Merge pull request #5040 from keithjgrant/4976-job-list-status-icons

Add status icon to job list

Reviewed-by: https://github.com/apps/softwarefactory-project-zuul
This commit is contained in:
softwarefactory-project-zuul[bot]
2019-10-18 19:12:14 +00:00
committed by GitHub

View File

@@ -1,5 +1,6 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import styled from 'styled-components';
import { withI18n } from '@lingui/react'; import { withI18n } from '@lingui/react';
import { t } from '@lingui/macro'; import { t } from '@lingui/macro';
import { import {
@@ -14,10 +15,15 @@ import DataListCheck from '@components/DataListCheck';
import LaunchButton from '@components/LaunchButton'; import LaunchButton from '@components/LaunchButton';
import ListActionButton from '@components/ListActionButton'; import ListActionButton from '@components/ListActionButton';
import VerticalSeparator from '@components/VerticalSeparator'; import VerticalSeparator from '@components/VerticalSeparator';
import { StatusIcon } from '@components/Sparkline';
import { toTitleCase } from '@util/strings'; import { toTitleCase } from '@util/strings';
import { formatDateString } from '@util/dates'; import { formatDateString } from '@util/dates';
import { JOB_TYPE_URL_SEGMENTS } from '../../../constants'; import { JOB_TYPE_URL_SEGMENTS } from '../../../constants';
const PaddedIcon = styled(StatusIcon)`
margin-right: 20px;
`;
class JobListItem extends Component { class JobListItem extends Component {
render() { render() {
const { i18n, job, isSelected, onSelect } = this.props; const { i18n, job, isSelected, onSelect } = this.props;
@@ -38,11 +44,14 @@ class JobListItem extends Component {
dataListCells={[ dataListCells={[
<DataListCell key="divider"> <DataListCell key="divider">
<VerticalSeparator /> <VerticalSeparator />
{job.status && <PaddedIcon status={job.status} />}
<span> <span>
<Link <Link
to={`/jobs/${JOB_TYPE_URL_SEGMENTS[job.type]}/${job.id}`} to={`/jobs/${JOB_TYPE_URL_SEGMENTS[job.type]}/${job.id}`}
> >
<b>{job.name}</b> <b>
{job.id} &mdash; {job.name}
</b>
</Link> </Link>
</span> </span>
</DataListCell>, </DataListCell>,