fix(ui-common): fix matrices display issues

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",

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 cluster",
+  "study.nbQueuedJobs": "Tâches en attente",
   "study.synthesis": "Synthèse",
   "study.level": "Niveau",
   "study.years": "Années",

webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/HydroMatrix.tsx

@@ -32,7 +32,6 @@ function HydroMatrix({ type }: Props) {
         fetchFn={hydroMatrix.fetchFn}
         disableEdit={hydroMatrix.disableEdit}
         enablePercentDisplay={hydroMatrix.enablePercentDisplay}
-        stretch={hydroMatrix.stretch}
       />
     </Root>
   );

webapp/src/components/App/Singlestudy/explore/Modelization/Areas/Hydro/utils.ts

@@ -36,7 +36,6 @@ export interface HydroMatrixProps {
   fetchFn?: fetchMatrixFn;
   disableEdit?: boolean;
   enablePercentDisplay?: boolean;
-  stretch?: boolean; // TODO: Remove this once the `EditableMatrix` component is refactored
 }
 
 type Matrices = Record<HydroMatrixType, HydroMatrixProps>;
@@ -121,7 +120,6 @@ export const MATRICES: Matrices = {
       "Pumping Max Energy (Hours at Pmax)",
     ],
     stats: MatrixStats.NOCOL,
-    stretch: false,
   },
   [HydroMatrixType.ReservoirLevels]: {
     title: "Reservoir Levels",
@@ -177,7 +175,6 @@ export const MATRICES: Matrices = {
       "December",
     ],
     stats: MatrixStats.NOCOL,
-    stretch: false,
   },
   [HydroMatrixType.Allocation]: {
     title: "Allocation",

webapp/src/components/App/Singlestudy/explore/Results/ResultDetails/index.tsx

@@ -153,11 +153,36 @@ function ResultDetails() {
   const dateTimeFromIndex = useMemo(() => {
     if (!matrixRes.data) return [];
 
-    return matrixRes.data.index.map((dateTime) => {
-      const parsedDate = moment(dateTime, "MM/DD HH:mm");
-      return parsedDate.format("ddd D MMM HH:mm");
-    });
-  }, [matrixRes.data]);
+    // Annual format has a static string
+    if (timestep === Timestep.Annual) {
+      return ["Annual"];
+    }
+
+    // Original date/time format mapping for moment parsing
+    const parseFormat = {
+      [Timestep.Hourly]: "MM/DD HH:mm",
+      [Timestep.Daily]: "MM/DD",
+      [Timestep.Weekly]: "WW",
+      [Timestep.Monthly]: "MM",
+    }[timestep];
+
+    // Output formats for each timestep to match legacy UI requirements
+    const outputFormat = {
+      [Timestep.Hourly]: "DD MMM HH:mm  I",
+      [Timestep.Daily]: "DD MMM  I",
+      [Timestep.Weekly]: "WW",
+      [Timestep.Monthly]: "MMM",
+    }[timestep];
+
+    const needsIndex =
+      timestep === Timestep.Hourly || timestep === Timestep.Daily;
+
+    return matrixRes.data.index.map((dateTime, i) =>
+      moment(dateTime, parseFormat).format(
+        outputFormat.replace("I", needsIndex ? ` - ${i + 1}` : ""),
+      ),
+    );
+  }, [matrixRes.data, timestep]);
 
   ////////////////////////////////////////////////////////////////
   // Event Handlers
@@ -380,7 +405,6 @@ function ResultDetails() {
                       matrix={matrix}
                       matrixTime={false}
                       rowNames={dateTimeFromIndex}
-                      stretch={false}
                       readOnly
                     />
                   )

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,29 +113,46 @@ 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={Math.floor(data.allocatedCpuRate)}
+                  size="20%"
+                  tooltip={t("study.allocatedCpuRate")}
+                  gradiant
+                />
+                <Typography>{t("study.clusterLoadRate")}</Typography>
+                <LinearProgressWithLabel
+                  indicator={Math.floor(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 }}>
             <Button
               color="primary"
               onClick={() => {
                 refresh();
-                reloadLauncherLoad();
+                laucherMetrics.reload();
               }}
               variant="outlined"
             >

webapp/src/components/common/EditableMatrix/index.tsx

@@ -28,7 +28,6 @@ interface PropTypes {
   rowNames?: string[];
   computStats?: MatrixStats;
   isPercentDisplayEnabled?: boolean;
-  stretch?: boolean;
 }
 
 type CellType = Array<number | string | boolean>;
@@ -56,7 +55,6 @@ function EditableMatrix(props: PropTypes) {
     rowNames,
     computStats,
     isPercentDisplayEnabled = false,
-    stretch = true,
   } = props;
   const { data = [], columns = [], index = [] } = matrix;
   const prependIndex = index.length > 0 && matrixTime;
@@ -178,10 +176,9 @@ function EditableMatrix(props: PropTypes) {
         data={grid}
         width="100%"
         height="100%"
-        stretchH={stretch ? "all" : "none"}
         className="editableMatrix"
         colHeaders
-        rowHeaderWidth={matrixRowNames ? 150 : undefined}
+        rowHeaderWidth={rowNames ? 150 : 50}
         afterChange={(change, source) =>
           onUpdate && handleSlice(change || [], source)
         }

webapp/src/components/common/MatrixInput/index.tsx

@@ -38,7 +38,6 @@ interface Props {
   fetchFn?: fetchMatrixFn;
   disableEdit?: boolean;
   enablePercentDisplay?: boolean;
-  stretch?: boolean;
 }
 
 function MatrixInput({
@@ -51,7 +50,6 @@ function MatrixInput({
   fetchFn,
   disableEdit,
   enablePercentDisplay,
-  stretch,
 }: Props) {
   const { enqueueSnackbar } = useSnackbar();
   const enqueueErrorSnackbar = useEnqueueErrorSnackbar();
@@ -213,7 +211,6 @@ function MatrixInput({
             onUpdate={handleUpdate}
             computStats={computStats}
             isPercentDisplayEnabled={enablePercentDisplay}
-            stretch={stretch}
           />
         ) : (
           !isLoading && (

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;
 };