- Progress

Signed-off-by: Dave Richer <dave@imexsystems.ca>

client/src/components/job-lifecycle/job-lifecycle.component.jsx

@@ -5,24 +5,25 @@ import {Card, Space, Table} from 'antd';
 import {gql, useQuery} from "@apollo/client";
 import {DateTimeFormatterFunction} from "../../utils/DateFormatter";
 import {isEmpty} from "lodash";
-import {Bar, BarChart, CartesianGrid, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis} from "recharts";
+import {Bar, BarChart, CartesianGrid, Legend, Tooltip, YAxis} from "recharts";
+
 
 const transformDataForChart = (durations) => {
     const output = {};
-    output.total  = durations.total;
+    // output.amt = durations.total;
-    return durations.summations.forEach((summation) => {
+    // output.name = 'Total';
-        output[summation.status] = summation.value
+    durations.summations.forEach((summation) => {
+        output[summation.status] = summation.value;
     });
-};
+    return [output];
+}
 const getColor = (key) => {
     // Generate a random color
     const randomColor = '#' + Math.floor(Math.random() * 16777215).toString(16);
     return randomColor;
 };
 
-
 export function JobLifecycleComponent({job, ...rest}) {
-
     const [loading, setLoading] = useState(true);
     const [lifecycleData, setLifecycleData] = useState(null);
 
@@ -125,10 +126,9 @@ export function JobLifecycleComponent({job, ...rest}) {
                     <Space direction='vertical' style={{width: '100%'}}>
                         <Space direction='horizontal' style={{width: '100%'}} align='start'>
                             <Card type='inner' title='Durations'>
-                                <ResponsiveContainer width="100%" height="100%">
                                 <BarChart
                                     width={500}
-                                        height={300}
+                                    height={500}
                                     data={transformDataForChart(lifecycleData.durations)}
                                     margin={{
                                         top: 20,
@@ -138,20 +138,17 @@ export function JobLifecycleComponent({job, ...rest}) {
                                     }}
                                 >
                                     <CartesianGrid strokeDasharray="3 3"/>
-                                        <XAxis dataKey="name" />
                                     <YAxis />
                                     <Tooltip/>
                                     <Legend/>
-                                        {lifecycleData.durations.summations.map((summation, idx) => {
+                                    {
-
+                                        Object.keys(transformDataForChart(lifecycleData.durations)[0]).map((key) => {
                                             return (
-                                                <Bar key={idx} dataKey={summation.status} stackId="a" fill={getColor(summation.status)} />
+                                                <Bar dataKey={key} stackId="a" fill={getColor(key)}/>
-                                            );
+                                            )
-                                        })}
+                                        })
-
+                                    }
                                 </BarChart>
-                                </ResponsiveContainer>
-
                             </Card>
                         </Space>
                         <Card type='inner' title='Transitions'>

server/utils/calculateStatusDuration.js

@@ -11,7 +11,7 @@ const calculateStatusDuration = (transitions) => {
     let summations = [];
 
     transitions.forEach((transition, index) => {
-        let duration = transition.duration;
+        let duration = transition.duration_minutes;
         totalDuration += duration;
 
         if (!transition.prev_value) {