@@ -8,13 +8,8 @@ import {isEmpty} from "lodash";
|
||||
|
||||
require('./job-lifecycle.styles.scss');
|
||||
|
||||
// Get Bodyshop record
|
||||
// md_RepairStatus
|
||||
// All status, array of strings, all statuses available system-wide, the order is meaningful.
|
||||
|
||||
// CHECK SORT OF LEGEND
|
||||
// show text on bar if text can fit
|
||||
export function JobLifecycleComponent({job, ...rest}) {
|
||||
export function JobLifecycleComponent({job, statuses, ...rest}) {
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [lifecycleData, setLifecycleData] = useState(null);
|
||||
|
||||
@@ -38,10 +33,13 @@ export function JobLifecycleComponent({job, ...rest}) {
|
||||
* @returns {Promise<void>}
|
||||
*/
|
||||
const getLifecycleData = useCallback(async () => {
|
||||
if (job && job.id) {
|
||||
if (job && job.id && statuses && statuses.statuses) {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await axios.post("/job/lifecycle", {jobids: job.id});
|
||||
const response = await axios.post("/job/lifecycle", {
|
||||
jobids: job.id,
|
||||
statuses: statuses.statuses
|
||||
});
|
||||
const data = response.data.transition[job.id];
|
||||
setLifecycleData(data);
|
||||
} catch (err) {
|
||||
@@ -50,7 +48,7 @@ export function JobLifecycleComponent({job, ...rest}) {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
}, [job]);
|
||||
}, [job, statuses]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!data) return;
|
||||
@@ -105,6 +103,11 @@ export function JobLifecycleComponent({job, ...rest}) {
|
||||
},
|
||||
];
|
||||
|
||||
useEffect(() => {
|
||||
console.log('Statuses');
|
||||
console.dir(statuses, {depth: null});
|
||||
}, [statuses]);
|
||||
|
||||
// useEffect(() => {
|
||||
// console.log('LifeCycle Data');
|
||||
// console.dir(lifecycleData, {depth: null})
|
||||
@@ -119,8 +122,8 @@ export function JobLifecycleComponent({job, ...rest}) {
|
||||
type='inner'
|
||||
title={(
|
||||
<Space direction='horizontal' size='small'>
|
||||
<Badge status='processing' count={lifecycleData.durations.totalStatuses} />
|
||||
Statuses
|
||||
<Badge status='processing' count={lifecycleData.durations.totalStatuses}/>
|
||||
Historical Status Durations
|
||||
</Space>
|
||||
|
||||
)}
|
||||
@@ -145,6 +148,7 @@ export function JobLifecycleComponent({job, ...rest}) {
|
||||
<div key={key.status} style={{
|
||||
overflow: 'hidden',
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
margin: 0,
|
||||
@@ -161,7 +165,17 @@ export function JobLifecycleComponent({job, ...rest}) {
|
||||
aria-label={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
|
||||
title={`${key.status} | ${key.roundedPercentage} | ${key.humanReadable}`}
|
||||
>
|
||||
{Math.round(key.percentage)}%
|
||||
<div>{key.roundedPercentage}</div>
|
||||
{key.percentage > 5 ?
|
||||
<div style={{
|
||||
backgroundColor: '#f0f2f5',
|
||||
borderRadius: '5px',
|
||||
paddingRight: '2px',
|
||||
paddingLeft: '2px',
|
||||
fontSize: '0.8rem',
|
||||
}}>
|
||||
{key.status}
|
||||
</div> : null}
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
@@ -186,13 +200,14 @@ export function JobLifecycleComponent({job, ...rest}) {
|
||||
</div>
|
||||
</Card>
|
||||
<Card style={{marginTop: '10px'}}>
|
||||
<span style={{fontWeight: 'bold'}}>Accumulated Time:</span> {lifecycleData.durations.humanReadableTotal}
|
||||
<span
|
||||
style={{fontWeight: 'bold'}}>Previous Status Accumulated Time:</span> {lifecycleData.durations.humanReadableTotal}
|
||||
</Card>
|
||||
</Card>
|
||||
<Card type='inner' title={(
|
||||
<>
|
||||
<Space direction="horizontal" size="small">
|
||||
<Badge status='processing' count={lifecycleData.lifecycle.length} />
|
||||
<Badge status='processing' count={lifecycleData.lifecycle.length}/>
|
||||
Transitions
|
||||
</Space>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user