diff options
author | Zuul <zuul@review.opendev.org> | 2021-12-20 01:06:35 +0000 |
---|---|---|
committer | Gerrit Code Review <review@openstack.org> | 2021-12-20 01:06:35 +0000 |
commit | 581e755ddd5419b77b885d9bb42828efc6fc371c (patch) | |
tree | 3cf280852caa06e607d3470eedae8dc0a7adc52c /web | |
parent | b5bbe7d3c106f7edc40c5c82b92b77891a41d890 (diff) | |
parent | 0428f7a613bbf4664dfa9a1884c4d9c2798bd634 (diff) | |
download | zuul-581e755ddd5419b77b885d9bb42828efc6fc371c.tar.gz |
Merge "web: JobVariant : pull description into a card"
Diffstat (limited to 'web')
-rw-r--r-- | web/src/containers/job/Job.jsx | 35 | ||||
-rw-r--r-- | web/src/containers/job/JobDescriptionCard.jsx | 79 | ||||
-rw-r--r-- | web/src/containers/job/JobVariant.jsx | 38 |
3 files changed, 115 insertions, 37 deletions
diff --git a/web/src/containers/job/Job.jsx b/web/src/containers/job/Job.jsx index 758bd4570..c12449dba 100644 --- a/web/src/containers/job/Job.jsx +++ b/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> ) } diff --git a/web/src/containers/job/JobDescriptionCard.jsx b/web/src/containers/job/JobDescriptionCard.jsx new file mode 100644 index 000000000..c180e9a7c --- /dev/null +++ b/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 diff --git a/web/src/containers/job/JobVariant.jsx b/web/src/containers/job/JobVariant.jsx index 52c69e495..a05e5250c 100644 --- a/web/src/containers/job/JobVariant.jsx +++ b/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> ) } } |