- Progress

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

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

@@ -1,89 +1,135 @@
-import React, {useEffect, useMemo, useState} from 'react';
+import React, {useCallback, useEffect, useState} from 'react';
+import moment from "moment";
 import axios from 'axios';
-import {Card, Space, Table, Timeline} from 'antd';
-import {Bar, BarChart, CartesianGrid, LabelList, Legend, ResponsiveContainer, Tooltip, XAxis, YAxis} from 'recharts';
+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";
+
+const transformDataForChart = (durations) => {
+    const output = {};
+    output.total  = durations.total;
+    return durations.summations.forEach((summation) => {
+        output[summation.status] = summation.value
+     });
+};
+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);
 
-    useEffect(() => {
-        const getLifecycleData = async () => {
-            if (job && job.id) {
-                try {
-                    setLoading(true);
-                    const response = await axios.post("/job/lifecycle", {jobids: job.id});
-                    const data = response.data.transition[job.id];
-                    setLifecycleData(data);
-                } catch (err) {
-                    console.error(`Error getting Job Lifecycle Data: ${err.message}`);
-                } finally {
-                    setLoading(false);
-                }
+    // Used for tracking external state changes.
+    const {data} = useQuery(gql`
+        query get_job_test($id: uuid!){
+            jobs_by_pk(id:$id){
+                id
+                status
             }
-        };
+        }
+    `, {
+        variables: {
+            id: job.id
+        },
+        fetchPolicy: 'cache-only'
+    });
 
-        getLifecycleData();
+    /**
+     * Gets the lifecycle data for the job.
+     * @returns {Promise<void>}
+     */
+    const getLifecycleData = useCallback(async () => {
+        if (job && job.id) {
+            try {
+                setLoading(true);
+                const response = await axios.post("/job/lifecycle", {jobids: job.id});
+                const data = response.data.transition[job.id];
+                setLifecycleData(data);
+            } catch (err) {
+                console.error(`Error getting Job Lifecycle Data: ${err.message}`);
+            } finally {
+                setLoading(false);
+            }
+        }
     }, [job]);
 
-    const columnKeys = [
-        'start', 'end', 'value', 'prev_value', 'next_value', 'duration', 'type', 'created_at', 'updated_at', 'start_readable', 'end_readable','duration'
+    useEffect(() => {
+        if (!data) return;
+        setTimeout(() => {
+            getLifecycleData().catch(err => console.error(`Error getting Job Lifecycle Data: ${err.message}`));
+        }, 1000);
+    }, [data, getLifecycleData]);
+
+    const columns = [
+        {
+            title: 'Value',
+            dataIndex: 'value',
+            key: 'value',
+        },
+        {
+            title: 'Start',
+            dataIndex: 'start',
+            key: 'start',
+            render: (text) => DateTimeFormatterFunction(text),
+            sorter: (a, b) => moment(a.start).unix() - moment(b.start).unix(),
+        },
+        {
+            title: 'Relative Start',
+            dataIndex: 'start_readable',
+            key: 'start_readable',
+        },
+        {
+            title: 'End',
+            dataIndex: 'end',
+            key: 'end',
+            sorter: (a, b) => {
+                if (isEmpty(a.end) || isEmpty(b.end)) {
+                    if (isEmpty(a.end) && isEmpty(b.end)) {
+                        return 0;
+                    }
+                    return isEmpty(a.end) ? 1 : -1;
+                }
+                return moment(a.end).unix() - moment(b.end).unix();
+            },
+            render: (text) => isEmpty(text) ? 'N/A' : DateTimeFormatterFunction(text)
+        },
+        {
+            title: 'Relative End',
+            dataIndex: 'end_readable',
+            key: 'end_readable',
+        },
+        {
+            title: 'Duration',
+            dataIndex: 'duration_readable',
+            key: 'duration_readable',
+            sorter: (a, b) => a.duration - b.duration,
+        },
     ];
 
-    const columns = columnKeys.map(key => ({
-        title: key.charAt(0).toUpperCase() + key.slice(1),
-        dataIndex: key,
-        key: key,
-    }));
-
-
-    const durationsData = useMemo(() => {
-        if (!lifecycleData) {
-            return [];
-        }
-
-        const transformedData = Object.entries(lifecycleData.durations).map(([name, {value, humanReadable}]) => {
-           return {
-               name,
-               amt: value,
-               pv: humanReadable,
-               uv: value,
-           }
-        })
-
-        return [transformedData];
-    }, [lifecycleData]);
-
-
     useEffect(() => {
+        console.log('LifeCycle Data');
         console.dir(lifecycleData, {depth: null})
-        console.dir(durationsData, {depth: null})
-
-    }, [lifecycleData,durationsData]);
+    }, [lifecycleData]);
 
     return (
         <Card loading={loading} title='Job Lifecycle Component'>
             {!loading ? (
-                lifecycleData ? (
+                lifecycleData && lifecycleData.lifecycle && lifecycleData.durations ? (
                     <Space direction='vertical' style={{width: '100%'}}>
                         <Space direction='horizontal' style={{width: '100%'}} align='start'>
-                            <Card type='inner' title='Timeline Format'>
-                                <Timeline>
-                                    {lifecycleData.lifecycle.map((item, index) => (
-                                        <Timeline.Item key={index}
-                                                       color={item.value === 'Open' ? 'green' : item.value === 'Scheduled' ? 'yellow' : 'red'}>
-                                            {item.value} - {item.start_readable}
-                                        </Timeline.Item>
-                                    ))}
-                                </Timeline>
-                            </Card>
                             <Card type='inner' title='Durations'>
                                 <ResponsiveContainer width="100%" height="100%">
                                     <BarChart
                                         width={500}
                                         height={300}
-                                        data={durationsData}
+                                        data={transformDataForChart(lifecycleData.durations)}
                                         margin={{
                                             top: 20,
                                             right: 30,
@@ -96,13 +142,19 @@ export function JobLifecycleComponent({job, ...rest}) {
                                         <YAxis />
                                         <Tooltip />
                                         <Legend />
-                                        <Bar dataKey="pv" stackId="a" fill="#8884d8" />
-                                        <Bar dataKey="uv" stackId="a" fill="#82ca9d" />
+                                        {lifecycleData.durations.summations.map((summation, idx) => {
+
+                                            return (
+                                                <Bar key={idx} dataKey={summation.status} stackId="a" fill={getColor(summation.status)} />
+                                            );
+                                        })}
+
                                     </BarChart>
                                 </ResponsiveContainer>
+
                             </Card>
                         </Space>
-                        <Card type='inner' title='Table Format'>
+                        <Card type='inner' title='Transitions'>
                             <Table columns={columns} dataSource={lifecycleData.lifecycle}/>
                         </Card>
                     </Space>