From cbb27b9d59b9253176131e8bddfde100f3002e44 Mon Sep 17 00:00:00 2001
From: hatim dinia <diniahatim@gmail.com>
Date: Fri, 1 Mar 2024 17:16:21 +0100
Subject: [PATCH] feat(ui-tasks): add launcher metrics

---
 webapp/public/locales/en/main.json            |  4 +-
 webapp/public/locales/fr/main.json            |  4 +-
 .../src/components/App/Tasks/JobTableView.tsx | 55 +++++++++++++------
 webapp/src/services/api/study.ts              | 10 ++--
 4 files changed, 50 insertions(+), 23 deletions(-)

diff --git a/webapp/public/locales/en/main.json b/webapp/public/locales/en/main.json
index 81b9935f03..b088d7e0cd 100644
--- a/webapp/public/locales/en/main.json
+++ b/webapp/public/locales/en/main.json
@@ -196,7 +196,9 @@
   "study.postProcessing": "Post processing",
   "study.timeLimit": "Time limit (h)",
   "study.nbCpu": "Number of cores",
-  "study.clusterLoad": "Cluster load",
+  "study.allocatedCpuRate": "CPU usage",
+  "study.clusterLoadRate": "Cluster load",
+  "study.nbQueuedJobs": "Pending jobs",
   "study.synthesis": "Synthesis",
   "study.level": "Level",
   "study.years": "Years",
diff --git a/webapp/public/locales/fr/main.json b/webapp/public/locales/fr/main.json
index 0f1f06ad45..afa0f7bab6 100644
--- a/webapp/public/locales/fr/main.json
+++ b/webapp/public/locales/fr/main.json
@@ -196,7 +196,9 @@
   "study.postProcessing": "Post-traitement",
   "study.timeLimit": "Limite de temps (h)",
   "study.nbCpu": "Nombre de coeurs",
-  "study.clusterLoad": "Charge du cluster",
+  "study.allocatedCpuRate": "Utilisation CPU",
+  "study.clusterLoadRate": "Charge du cluster",
+  "study.nbQueuedJobs": "Tâches en attente",
   "study.synthesis": "Synthèse",
   "study.level": "Niveau",
   "study.years": "Années",
diff --git a/webapp/src/components/App/Tasks/JobTableView.tsx b/webapp/src/components/App/Tasks/JobTableView.tsx
index 6a2003507e..6ddb3d3318 100644
--- a/webapp/src/components/App/Tasks/JobTableView.tsx
+++ b/webapp/src/components/App/Tasks/JobTableView.tsx
@@ -19,6 +19,7 @@ import {
   Checkbox,
   FormControlLabel,
   Typography,
+  Skeleton,
 } from "@mui/material";
 import { useTranslation } from "react-i18next";
 import RefreshIcon from "@mui/icons-material/Refresh";
@@ -27,8 +28,9 @@ import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import { grey } from "@mui/material/colors";
 import { TaskView, TaskType } from "../../../common/types";
 import usePromiseWithSnackbarError from "../../../hooks/usePromiseWithSnackbarError";
-import { getLauncherLoad } from "../../../services/api/study";
+import { getLauncherMetrics } from "../../../services/api/study";
 import LinearProgressWithLabel from "../../common/LinearProgressWithLabel";
+import UsePromiseCond from "../../common/utils/UsePromiseCond";
 
 interface PropType {
   content: TaskView[];
@@ -44,11 +46,13 @@ function JobTableView(props: PropType) {
     useState<boolean>(false);
   const [currentContent, setCurrentContent] = useState<TaskView[]>(content);
 
-  const { data: load, reload: reloadLauncherLoad } =
-    usePromiseWithSnackbarError(() => getLauncherLoad(), {
+  const laucherMetrics = usePromiseWithSnackbarError(
+    () => getLauncherMetrics(),
+    {
       errorMessage: t("study.error.launchLoad"),
       deps: [],
-    });
+    },
+  );
 
   const applyFilter = useCallback(
     (taskList: TaskView[]) => {
@@ -109,21 +113,38 @@ function JobTableView(props: PropType) {
       >
         <Box
           sx={{
-            width: "30%",
+            width: "60%",
             display: "flex",
-            justifyContent: "flex-start",
-            alignItems: "flex-end",
+            alignContent: "center",
+            alignSelf: "center",
+            gap: 1,
           }}
         >
-          <Typography sx={{ mr: 2 }}>{t("study.clusterLoad")}</Typography>
-          {load && (
-            <LinearProgressWithLabel
-              indicator={load.slurm * 100}
-              size="60%"
-              tooltip={t("study.clusterLoad")}
-              gradiant
-            />
-          )}
+          <UsePromiseCond
+            response={laucherMetrics}
+            ifResolved={(data) => (
+              <>
+                <Typography>{t("study.allocatedCpuRate")}</Typography>
+                <LinearProgressWithLabel
+                  indicator={data.allocatedCpuRate}
+                  size="20%"
+                  tooltip={t("study.allocatedCpuRate")}
+                  gradiant
+                />
+                <Typography>{t("study.clusterLoadRate")}</Typography>
+                <LinearProgressWithLabel
+                  indicator={data.clusterLoadRate}
+                  size="20%"
+                  tooltip={t("study.clusterLoadRate")}
+                  gradiant
+                />
+                <Typography>
+                  {t("study.nbQueuedJobs")}: {data.nbQueuedJobs}
+                </Typography>
+              </>
+            )}
+            ifPending={() => <Skeleton width={300} />}
+          />
         </Box>
         <Box display="flex" alignItems="center">
           <Tooltip title={t("tasks.refresh") as string} sx={{ mr: 4 }}>
@@ -131,7 +152,7 @@ function JobTableView(props: PropType) {
               color="primary"
               onClick={() => {
                 refresh();
-                reloadLauncherLoad();
+                laucherMetrics.reload();
               }}
               variant="outlined"
             >
diff --git a/webapp/src/services/api/study.ts b/webapp/src/services/api/study.ts
index 3b346e6d8d..9ee256d299 100644
--- a/webapp/src/services/api/study.ts
+++ b/webapp/src/services/api/study.ts
@@ -287,9 +287,11 @@ export const launchStudy = async (
   return res.data;
 };
 
-interface LauncherLoadDTO {
-  slurm: number;
-  local: number;
+interface LauncherMetrics {
+  allocatedCpuRate: number;
+  clusterLoadRate: number;
+  nbQueuedJobs: number;
+  status: string;
 }
 
 export const getLauncherVersions = async (): Promise<string[]> => {
@@ -302,7 +304,7 @@ export const getLauncherCores = async (): Promise<Record<string, number>> => {
   return res.data;
 };
 
-export const getLauncherLoad = async (): Promise<LauncherLoadDTO> => {
+export const getLauncherMetrics = async (): Promise<LauncherMetrics> => {
   const res = await client.get("/v1/launcher/load");
   return res.data;
 };