Browse Source

Merge "web: JobVariant : pull description into a card"

changes/37/822137/6
Zuul 1 month ago
committed by Gerrit Code Review
parent
commit
581e755ddd
  1. 35
      web/src/containers/job/Job.jsx
  2. 79
      web/src/containers/job/JobDescriptionCard.jsx
  3. 38
      web/src/containers/job/JobVariant.jsx

35
web/src/containers/job/Job.jsx

@ -15,7 +15,6 @@
import * as React from 'react'
import PropTypes from 'prop-types'
import {
PageSection,
Tab,
Tabs,
TabTitleText,
@ -67,24 +66,22 @@ class Job extends React.Component {
return (
<React.Fragment>
<PageSection>
<Title headingLevel="h2">
Details for job <span style={{color: 'var(--pf-global--primary-color--100)'}}>{job[0].name}</span>
</Title>
<Tabs activeKey={activeTabKey}
onSelect={(event, tabIndex) => this.handleTabClick(tabIndex)}
isBox>
{job.map((variant, idx) => (
<Tab eventKey={idx} key={idx}
title={<TabTitleText>{this.renderVariantTitle(variant)}</TabTitleText>}>
<JobVariant
variant={job[idx]}
parent={this}
/>
</Tab>
))}
</Tabs>
</PageSection>
<Title headingLevel="h2">
Details for job <span style={{color: 'var(--pf-global--primary-color--100)'}}>{job[0].name}</span>
</Title>
<Tabs activeKey={activeTabKey}
onSelect={(event, tabIndex) => this.handleTabClick(tabIndex)}
isBox>
{job.map((variant, idx) => (
<Tab eventKey={idx} key={idx}
title={<TabTitleText>{this.renderVariantTitle(variant)}</TabTitleText>}>
<JobVariant
variant={job[idx]}
parent={this}
/>
</Tab>
))}
</Tabs>
</React.Fragment>
)
}

79
web/src/containers/job/JobDescriptionCard.jsx

@ -0,0 +1,79 @@
// Copyright 2021 Red Hat, Inc
//
// Licensed under the Apache License, Version 2.0 (the "License"); you may
// not use this file except in compliance with the License. You may obtain
// a copy of the License at
//
// http://www.apache.org/licenses/LICENSE-2.0
//
// Unless required by applicable law or agreed to in writing, software
// distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
// WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
// License for the specific language governing permissions and limitations
// under the License.
/*
* NOTE(ianw) 2021-08-16
* Some thoughts for future work:
*
* - Most descriptions are one line, but some a very long.
* - Might be cool to have a fixed height and show a preview of the description
* that fades out, but can the be clicked to be read fully.
* - Perhaps Zuul could format this for us, as it looks like raw RST.
* I think that would have to be a python/sphinx thing, can't practically
* do it client side.
*/
import * as React from 'react'
import PropTypes from 'prop-types'
import {
Card,
CardHeader,
CardTitle,
CardExpandableContent,
CardBody
} from '@patternfly/react-core'
class JobDescriptionCard extends React.Component {
static propTypes = {
description: PropTypes.string
}
constructor(props) {
super(props)
this.state = {
isExpanded: true
}
this.onExpand = () => {
this.setState({
isExpanded: !this.state.isExpanded
})
}
}
render() {
if (!this.props.description) {
return null
}
return (
<React.Fragment>
<Card className={['pf-u-m-lg']} isExpanded={this.state.isExpanded}>
<CardHeader onExpand={ this.onExpand }>
<CardTitle>Job description</CardTitle>
</CardHeader>
<CardExpandableContent>
<CardBody style={{whiteSpace: 'pre-wrap'}}>
{this.props.description}
</CardBody>
</CardExpandableContent>
</Card>
</React.Fragment>
)
}
}
export default JobDescriptionCard

38
web/src/containers/job/JobVariant.jsx

@ -52,6 +52,7 @@ import SourceContext from '../SourceContext'
import Nodeset from './Nodeset'
import Role from './Role'
import JobProject from './JobProject'
import JobDescriptionCard from './JobDescriptionCard'
class JobVariant extends React.Component {
static propTypes = {
@ -104,7 +105,7 @@ class JobVariant extends React.Component {
const rows = []
const jobInfos = [
'description', 'source_context', 'builds', 'status',
'source_context', 'builds', 'status',
'parent', 'attempts', 'timeout', 'semaphores',
'nodeset', 'variables', 'override_checkout',
]
@ -243,23 +244,24 @@ class JobVariant extends React.Component {
)
rows.push({label: nice_label, value: items})
})
return (
<div className='pf-u-m-xl'>
<DescriptionList isHorizontal
style={{'--pf-c-description-list--RowGap': '0.5rem'}}
>
{rows.map((item, idx) => (
<DescriptionListGroup key={idx}>
<DescriptionListTerm>
{item.label}
</DescriptionListTerm>
<DescriptionListDescription>
{item.value}
</DescriptionListDescription>
</DescriptionListGroup>
))}
</DescriptionList>
</div>
return (
<React.Fragment>
<JobDescriptionCard description={variant.description}/>
<DescriptionList isHorizontal
style={{'--pf-c-description-list--RowGap': '0.5rem'}}
className='pf-u-m-xl'>
{rows.map((item, idx) => (
<DescriptionListGroup key={idx}>
<DescriptionListTerm>
{item.label}
</DescriptionListTerm>
<DescriptionListDescription>
{item.value}
</DescriptionListDescription>
</DescriptionListGroup>
))}
</DescriptionList>
</React.Fragment>
)
}
}

Loading…
Cancel
Save