diff --git a/web/src/containers/job/Job.jsx b/web/src/containers/job/Job.jsx
index 758bd45702..c12449dba5 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 (
-
-
- Details for job {job[0].name}
-
- this.handleTabClick(tabIndex)}
- isBox>
- {job.map((variant, idx) => (
- {this.renderVariantTitle(variant)}}>
-
-
- ))}
-
-
+
+ Details for job {job[0].name}
+
+ this.handleTabClick(tabIndex)}
+ isBox>
+ {job.map((variant, idx) => (
+ {this.renderVariantTitle(variant)}}>
+
+
+ ))}
+
)
}
diff --git a/web/src/containers/job/JobDescriptionCard.jsx b/web/src/containers/job/JobDescriptionCard.jsx
new file mode 100644
index 0000000000..c180e9a7c7
--- /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 (
+
+
+
+ Job description
+
+
+
+ {this.props.description}
+
+
+
+
+ )
+ }
+
+}
+
+export default JobDescriptionCard
diff --git a/web/src/containers/job/JobVariant.jsx b/web/src/containers/job/JobVariant.jsx
index 52c69e4950..a05e5250c9 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 (
-
-
- {rows.map((item, idx) => (
-
-
- {item.label}
-
-
- {item.value}
-
-
- ))}
-
-
+ return (
+
+
+
+ {rows.map((item, idx) => (
+
+
+ {item.label}
+
+
+ {item.value}
+
+
+ ))}
+
+
)
}
}