moving to vite as build system 🎉

ui/src/views/jobs/insights/JobInsight.jsx

@@ -0,0 +1,66 @@
+import React from 'react';
+
+import { roundToNext5Minute } from '../../../services/time/timeService';
+import Headline from '../../../components/headline/Headline';
+import { useDispatch, useSelector } from 'react-redux';
+import { useParams } from 'react-router';
+import Linechart from './Linechart';
+
+const JobInsight = function JobInsight() {
+  const dispatch = useDispatch();
+
+  const insights = useSelector((state) => state.jobs.insights);
+  const jobs = useSelector((state) => state.jobs.jobs);
+  const params = useParams();
+
+  React.useEffect(() => {
+    dispatch.jobs.getInsightDataForJob(params.jobId);
+    dispatch.jobs.getJobs();
+  }, []);
+
+  const getData = () => {
+    const data = insights[params.jobId] || {};
+
+    const result = [];
+    Object.keys(data).forEach((key) => {
+      const series = {
+        name: key[0].toUpperCase() + key.substring(1),
+        data: [],
+      };
+
+      const tmpTimeObj = {};
+
+      Object.values(data[key] || {}).forEach((listingTs) => {
+        const time = roundToNext5Minute(listingTs);
+        tmpTimeObj[time] = tmpTimeObj[time] == null ? 1 : tmpTimeObj[time] + 1;
+      });
+
+      Object.keys(tmpTimeObj)
+        .sort()
+        .forEach((timeKey) => {
+          series.data.push([parseInt(timeKey), tmpTimeObj[timeKey]]);
+        });
+      result.push(series);
+    });
+
+    return result;
+  };
+
+  const getJobName = () => {
+    const job = jobs.find((job) => job.id === params.jobId);
+    if (job == null) {
+      return 'unknown';
+    } else {
+      return job.name;
+    }
+  };
+
+  return (
+    <div>
+      <Headline text={`Insights into Job: ${getJobName()}`} />
+      <Linechart isLoading={false} series={getData()} />
+    </div>
+  );
+};
+
+export default JobInsight;