- Progress Update

Signed-off-by: Dave Richer <dave@imexsystems.ca>
This commit is contained in:
Dave Richer
2024-01-26 12:57:06 -05:00
parent b0f4ad7e4f
commit 89224e871c
6 changed files with 425 additions and 64 deletions

View File

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