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

This commit is contained in:
Zuul 2021-12-20 01:06:35 +00:00 committed by Gerrit Code Review
commit 581e755ddd
3 changed files with 115 additions and 37 deletions

View File

@ -15,7 +15,6 @@
import * as React from 'react'
import PropTypes from 'prop-types'
import {
PageSection,
Tab,
Tabs,
TabTitleText,
@ -67,7 +66,6 @@ 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>
@ -84,7 +82,6 @@ class Job extends React.Component {
</Tab>
))}
</Tabs>
</PageSection>
</React.Fragment>
)
}

View File

@ -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

View File

@ -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',
]
@ -244,10 +245,11 @@ class JobVariant extends React.Component {
rows.push({label: nice_label, value: items})
})
return (
<div className='pf-u-m-xl'>
<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>
@ -259,7 +261,7 @@ class JobVariant extends React.Component {
</DescriptionListGroup>
))}
</DescriptionList>
</div>
</React.Fragment>
)
}
}