feat(FR-540): display max, avg stats in session detail panel (UI hidden) (#3432)

resolves #3188 (FR-540)

###  Add resource usage display options in session detail page

> The Max, Avg cpu values currently require a Core-side fix.

This PR adds a dropdown selector in the session detail page that allows users to choose between displaying current, maximum, or average resource usage statistics. The feature enhances the resource monitoring capabilities by providing more comprehensive usage information.

Key changes:
- Added a dropdown selector in the session detail page with options for "Current", "Max", and "Avg" resource usage (If there is no value, it is not visible on the screen.)
- Modified the `SessionUsageMonitor` component to accept a `displayTarget` prop
- Updated the component to display the selected resource usage metric (current/max/avg)
- Added corresponding translation strings for all supported languages

|Detail Panel|Session List|
|---|---|
|![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/lSyr8xXz1wdXALkJKzVx/9773788f-1af3-4107-9388-73d84db94ac5.png)|![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/lSyr8xXz1wdXALkJKzVx/46f9465a-b5f5-4554-be92-607979e38867.png)|
|![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/lSyr8xXz1wdXALkJKzVx/4b09657d-0d58-4326-9584-010e39d90661.png)|![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/lSyr8xXz1wdXALkJKzVx/f50fd7b2-eb31-4257-b177-0cc6ce06261d.png)|
|![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/lSyr8xXz1wdXALkJKzVx/7a2ed91e-a0f4-4591-b641-bc53fe4ac991.png)|![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/lSyr8xXz1wdXALkJKzVx/2d3d38c3-097e-47cb-a962-f7269e794dae.png)|

**Checklist:**
- [x] Documentation
- [ ] Minium required manager version
- [ ] Specific setting for review (eg., KB link, endpoint or how to setup)
- [ ] Minimum requirements to check during review
- [ ] Test case(s) to demonstrate the difference of before/after

Author: ironAiken2

react/src/components/SessionDetailContent.tsx

@@ -27,6 +27,7 @@ import {
   Button,
   Descriptions,
   Grid,
+  Select,
   Skeleton,
   Tag,
   theme,
@@ -54,6 +55,9 @@ const SessionDetailContent: React.FC<{
     useState<boolean>(false);
   const [openStatusDetailModal, setOpenStatusDetailModal] =
     useState<boolean>(false);
+  const [usageMonitorDisplayTarget, setUsageMonitorDisplayTarget] = useState<
+    'max' | 'avg' | 'current'
+  >('current');
 
   // TODO: remove and refactor this waterfall request after v24.12.0
   // get the project id of the session for <= v24.12.0.
@@ -330,8 +334,44 @@ const SessionDetailContent: React.FC<{
               />
             </Descriptions.Item>
           ) : null}
-          <Descriptions.Item label={'Resource Usage'} span={md ? 2 : 1}>
-            <SessionUsageMonitor sessionFrgmt={session} />
+          <Descriptions.Item
+            label={
+              <Flex direction="column" align="start" gap={token.marginSM}>
+                <Typography.Text style={{ color: token.colorTextSecondary }}>
+                  {t('session.ResourceUsage')}
+                </Typography.Text>
+                <Select
+                  size="small"
+                  popupMatchSelectWidth={false}
+                  style={{ width: '100%', display: 'none' }}
+                  variant="filled"
+                  defaultValue={'current'}
+                  options={[
+                    {
+                      label: t('session.CurrentUsage'),
+                      value: 'current',
+                    },
+                    {
+                      label: t('session.MaxUsage'),
+                      value: 'max',
+                    },
+                    {
+                      label: t('session.AverageUsage'),
+                      value: 'avg',
+                    },
+                  ]}
+                  onChange={(value: 'current' | 'max' | 'avg') => {
+                    setUsageMonitorDisplayTarget(value);
+                  }}
+                />
+              </Flex>
+            }
+            span={md ? 2 : 1}
+          >
+            <SessionUsageMonitor
+              sessionFrgmt={session}
+              displayTarget={usageMonitorDisplayTarget}
+            />
           </Descriptions.Item>
         </Descriptions>
       </Flex>

react/src/components/SessionUsageMonitor.tsx

@@ -17,6 +17,7 @@ import { useFragment } from 'react-relay';
 interface SessionUsageMonitorProps extends ProgressProps {
   sessionFrgmt: SessionUsageMonitorFragment$key | null;
   size?: 'small' | 'default';
+  displayTarget?: 'max' | 'avg' | 'current';
 }
 
 interface SessionUtilItemProps {
@@ -93,6 +94,7 @@ const SessionUtilItem: React.FC<SessionUtilItemProps> = ({
 const SessionUsageMonitor: React.FC<SessionUsageMonitorProps> = ({
   sessionFrgmt,
   size = 'default',
+  displayTarget = 'current',
 }) => {
   const { mergedResourceSlots } = useResourceSlotsDetails();
 
@@ -156,31 +158,51 @@ const SessionUsageMonitor: React.FC<SessionUsageMonitorProps> = ({
     } GiB`;
   };
 
+  const displayTargetName =
+    displayTarget === 'current'
+      ? 'current'
+      : (`stats.${displayTarget}` as const);
   const utilItems = filterEmptyItem([
     sortedLiveStat?.cpu_util && (
       <SessionUtilItem
         key={'cpu'}
         size={size}
         title={mergedResourceSlots?.['cpu']?.human_readable_name}
-        percent={sortedLiveStat?.cpu_util?.pct || 0}
+        percent={
+          displayTarget === 'current'
+            ? (sortedLiveStat?.cpu_util?.pct ?? '0')
+            : (sortedLiveStat?.cpu_util?.[displayTargetName] ?? '0')
+        }
       />
     ),
-    sortedLiveStat?.mem && (
+    sortedLiveStat?.mem && sortedLiveStat?.mem?.[displayTargetName] && (
       <SessionUtilItem
         key={'mem'}
         size={size}
         title={mergedResourceSlots?.['mem']?.human_readable_name}
-        percent={sortedLiveStat?.mem?.pct || 0}
+        percent={
+          displayTarget === 'current'
+            ? sortedLiveStat?.mem?.pct || '0'
+            : _.toString(
+                ((convertBinarySizeUnit(
+                  sortedLiveStat?.mem?.[displayTargetName],
+                  'g',
+                )?.number ?? 0) /
+                  (convertBinarySizeUnit(sortedLiveStat?.mem?.capacity, 'g')
+                    ?.number || 1)) *
+                  100,
+              )
+        }
         description={displayMemoryUsage(
-          sortedLiveStat?.mem?.current,
+          sortedLiveStat?.mem?.[displayTargetName],
           occupiedSlots?.mem,
         )}
         tooltipTitle={
           <Flex direction="column" align="stretch">
             {mergedResourceSlots?.['mem']?.human_readable_name}
             <br />
             {displayMemoryUsage(
-              sortedLiveStat?.mem?.current,
+              sortedLiveStat?.mem?.[displayTargetName],
               occupiedSlots?.mem,
             )}
           </Flex>
@@ -198,8 +220,7 @@ const SessionUsageMonitor: React.FC<SessionUsageMonitorProps> = ({
         if (size === 'small' && !key?.endsWith('mem')) {
           deviceKey = undefined;
         }
-
-        return deviceKey ? (
+        return deviceKey && value?.[displayTargetName] ? (
           <SessionUtilItem
             key={key}
             size={size}
@@ -212,10 +233,25 @@ const SessionUsageMonitor: React.FC<SessionUsageMonitorProps> = ({
                 </Typography.Text>
               </>
             }
-            percent={value.pct || 0}
+            percent={
+              displayTarget === 'current'
+                ? value?.pct || '0'
+                : _.includes(key, 'util')
+                  ? value?.[displayTargetName]
+                  : _.toString(
+                      ((convertBinarySizeUnit(value?.[displayTargetName], 'g')
+                        ?.number ?? 0) /
+                        (convertBinarySizeUnit(value?.capacity, 'g')?.number ||
+                          1)) *
+                        100,
+                    )
+            }
             description={
               _.includes(key, 'mem')
-                ? displayMemoryUsage(value?.current, value?.capacity)
+                ? displayMemoryUsage(
+                    value?.[displayTargetName],
+                    value?.capacity,
+                  )
                 : undefined
             }
             tooltipTitle={
@@ -225,7 +261,10 @@ const SessionUsageMonitor: React.FC<SessionUsageMonitorProps> = ({
                   <>
                     (mem)
                     <br />
-                    {displayMemoryUsage(value?.current, value?.capacity)}
+                    {displayMemoryUsage(
+                      value?.[displayTargetName],
+                      value?.capacity,
+                    )}
                   </>
                 )}
               </Flex>

resources/i18n/de.json

@@ -1110,6 +1110,7 @@
     "AlreadyTerminatingSession": "Die Sitzung ist bereits beendet.",
     "Architecture": "Architektur",
     "Arguments": "Argumente",
+    "AverageUsage": "Avg",
     "Batch": "Stapel",
     "CPU": "CPU",
     "CheckAgainDialog": "Diese Aktion kann nicht rückgängig gemacht werden. Willst du fortfahren?",
@@ -1126,6 +1127,7 @@
     "ContainerToCleanUp": "Behälter zum Aufräumen",
     "Core": "Ader",
     "CreationFailed": "Sitzungserstellung fehlgeschlagen. Bitte versuchen Sie es in einigen Minuten erneut.",
+    "CurrentUsage": "Aktuell",
     "DefaultTensorboardPath": "/home/work/logs",
     "DescCommitSession": "Sie sind im Begriff, einen Container zu übertragen, der der folgenden Sitzung entspricht:",
     "DownloadingCSVFile": "CSV-Datei wird heruntergeladen...",
@@ -1164,6 +1166,7 @@
     "MEM": "Speicher",
     "MaxSessionLifetime": "Maximale Lebensdauer der Sitzung",
     "MaxSessionLifetimeDesc": "Erzwingt die Beendigung von Sitzungen nach dieser Zeit ab der Erstellung. Dadurch wird verhindert, dass die Sitzung unendlich lange läuft.",
+    "MaxUsage": "Max",
     "Message": "Nachricht",
     "ModifyArguments": "Argumente ändern",
     "MySessions": "Meine Sitzungen",
@@ -1187,6 +1190,7 @@
     "RequestContainerCommit": "Container Commit anfordern",
     "Reservation": "Reservierung",
     "ResourceGroup": "Ressourcengruppe",
+    "ResourceUsage": "Ressourcenverbrauch",
     "Running": "Laufen",
     "SFTPDescription": "Verwenden Sie Ihre bevorzugte SSH/SFTP-Anwendung, um eine Verbindung herzustellen.",
     "SFTPExtraNotification": "Es wird empfohlen, Sitzungen zu löschen, nachdem sie benutzt wurden, da die Anzahl der Sitzungen begrenzt ist. Sitzungen, die innerhalb eines bestimmten Zeitraums nicht zum Hochladen von Dateien verwendet werden, können automatisch gelöscht werden.",

resources/i18n/el.json

@@ -1106,6 +1106,7 @@
     "AlreadyTerminatingSession": "Ήδη τερματισμός της συνεδρίας.",
     "Architecture": "Αρχιτεκτονική",
     "Arguments": "Επιχειρήματα",
+    "AverageUsage": "Μέγα μέρος",
     "Batch": "Παρτίδα",
     "CPU": "CPU",
     "CheckAgainDialog": "Αυτή η πράξη δε μπορεί να αναιρεθεί. Θέλετε να συνεχίσετε?",
@@ -1122,6 +1123,7 @@
     "ContainerToCleanUp": "Δοχείο(α) για καθαρισμό",
     "Core": "πυρήνας",
     "CreationFailed": "Η δημιουργία περιόδου σύνδεσης απέτυχε. Δοκιμάστε ξανά σε λίγα λεπτά.",
+    "CurrentUsage": "Ρεύμα",
     "DefaultTensorboardPath": "/ σπίτι / εργασία / αρχεία καταγραφής",
     "DescCommitSession": "Πρόκειται να δεσμεύσετε το δοχείο που αντιστοιχεί στην παρακάτω συνεδρία:",
     "DownloadingCSVFile": "Λήψη αρχείου CSV ...",
@@ -1160,6 +1162,7 @@
     "MEM": "Μνήμη",
     "MaxSessionLifetime": "Μέγιστη διάρκεια ζωής συνόδου",
     "MaxSessionLifetimeDesc": "Αναγκαστικός τερματισμός συνόδων μετά από αυτό το χρονικό διάστημα από τη δημιουργία. Αποτρέπει τη λειτουργία της συνόδου στο άπειρο.",
+    "MaxUsage": "Μέγιστος",
     "Message": "Μήνυμα",
     "ModifyArguments": "Τροποποιήστε τα ορίσματα",
     "MySessions": "Οι συνεδρίες μου",
@@ -1183,6 +1186,7 @@
     "RequestContainerCommit": "Αίτηση δέσμευσης εμπορευματοκιβωτίου",
     "Reservation": "Κράτηση",
     "ResourceGroup": "Ομάδα πόρων",
+    "ResourceUsage": "Χρήση πόρων",
     "Running": "Τρέξιμο",
     "SFTPDescription": "Χρησιμοποιήστε την αγαπημένη σας εφαρμογή SSH / SFTP για να συνδεθείτε.",
     "SFTPExtraNotification": "Συνιστάται να διαγράφετε συνεδρίες μετά τη χρήση τους, καθώς υπάρχει όριο στον αριθμό των συνεδριών. Οι συνεδρίες που δεν χρησιμοποιούνται για τη μεταφόρτωση αρχείων εντός ορισμένου χρονικού διαστήματος ενδέχεται να διαγραφούν αυτόματα.",

resources/i18n/en.json

@@ -1116,6 +1116,7 @@
     "AlreadyTerminatingSession": "Already terminating the session.",
     "Architecture": "Architecture",
     "Arguments": "Arguments",
+    "AverageUsage": "Average",
     "Batch": "Batch",
     "CPU": "CPU",
     "CheckAgainDialog": "This action cannot be undone. Do you want to proceed?",
@@ -1132,6 +1133,7 @@
     "ContainerToCleanUp": "Container(s) to clean up",
     "Core": "core",
     "CreationFailed": "Session creation failed. Please try again in few minutes.",
+    "CurrentUsage": "Current",
     "DefaultTensorboardPath": "/home/work/logs",
     "DescCommitSession": "You are about to commit container corresponding to the session below: ",
     "DownloadingCSVFile": "Downloading CSV file...",
@@ -1170,6 +1172,7 @@
     "MEM": "MEM",
     "MaxSessionLifetime": "Max Session Lifetime",
     "MaxSessionLifetimeDesc": "Force-terminate sessions after this time from creation. It prevents the session from running infinitely.",
+    "MaxUsage": "Max",
     "Message": "Message",
     "ModifyArguments": "Modify arguments",
     "MySessions": "My Sessions",
@@ -1193,6 +1196,7 @@
     "RequestContainerCommit": "Request Container Commit",
     "Reservation": "Reservation",
     "ResourceGroup": "Resource Group",
+    "ResourceUsage": "Resource Usage",
     "Running": "Running",
     "SFTPDescription": "You can upload files quickly and securely through an SSH/SFTP client. If you haven't uploaded your SSH key pair beforehand, please click the \"DOWNLOAD SSH KEY\" button to save your SSH key first. You can then use that key to execute commands such as SFTP, SCP, and Rsync. On the \"Session - Upload Session\" page, you can manage the list of sessions for file uploads.",
     "SFTPExtraNotification": "It is recommended to delete sessions after they have been used, as there is a limit on the number of sessions. Sessions that are not used for uploading files within a certain period of time may be automatically deleted.",

resources/i18n/es.json

@@ -1110,6 +1110,7 @@
     "AlreadyTerminatingSession": "Ya está terminando la sesión.",
     "Architecture": "Arquitectura",
     "Arguments": "Argumentos",
+    "AverageUsage": "Aviso",
     "Batch": "Lote",
     "CPU": "CPU",
     "CheckAgainDialog": "Esta acción no se puede deshacer. ¿Desea continuar?",
@@ -1126,6 +1127,7 @@
     "ContainerToCleanUp": "Contenedor(es) para limpiar",
     "Core": "núcleo",
     "CreationFailed": "No se ha podido crear la sesión. Por favor, inténtelo de nuevo en unos minutos.",
+    "CurrentUsage": "Actual",
     "DefaultTensorboardPath": "/home/trabajo/registros",
     "DescCommitSession": "Está a punto de comprometer el contenedor correspondiente a la sesión siguiente:",
     "DownloadingCSVFile": "Descargando archivo CSV...",
@@ -1164,6 +1166,7 @@
     "MEM": "Memoria",
     "MaxSessionLifetime": "Duración máxima de la sesión",
     "MaxSessionLifetimeDesc": "Fuerza la finalización de las sesiones después de este tiempo desde su creación. Evita que la sesión se ejecute infinitamente.",
+    "MaxUsage": "Máximo",
     "Message": "Mensaje",
     "ModifyArguments": "Modificar argumentos",
     "MySessions": "Mis sesiones",
@@ -1187,6 +1190,7 @@
     "RequestContainerCommit": "Solicitud de Compromiso de Contenedor",
     "Reservation": "Reserva",
     "ResourceGroup": "Grupo de recursos",
+    "ResourceUsage": "Uso de recursos",
     "Running": "Ejecutar",
     "SFTPDescription": "Puede cargar archivos de forma rápida y segura a través de un cliente SSH/SFTP. Si no has cargado previamente tu par de claves SSH, haz clic en el botón \"Descargar clave SSH\" para guardar primero tu clave SSH. A continuación, puede utilizar esa clave para ejecutar comandos como SFTP, SCP y Rsync. En la página \"Sesión - Sesión de carga\", puede gestionar la lista de sesiones para la carga de archivos.",
     "SFTPExtraNotification": "Se recomienda eliminar las sesiones una vez utilizadas, ya que existe un límite en el número de sesiones. Las sesiones que no se utilicen para subir archivos en un determinado periodo de tiempo pueden eliminarse automáticamente.",

resources/i18n/fi.json

@@ -1108,6 +1108,7 @@
     "AlreadyTerminatingSession": "Istunto on jo päättymässä.",
     "Architecture": "Arkkitehtuuri",
     "Arguments": "Argumentit",
+    "AverageUsage": "Avg",
     "Batch": "Erä",
     "CPU": "CPU",
     "CheckAgainDialog": "Tätä toimenpidettä ei voi perua. Haluatko jatkaa?",
@@ -1124,6 +1125,7 @@
     "ContainerToCleanUp": "Säiliö(t) puhdistettava(t).",
     "Core": "ydin",
     "CreationFailed": "Istunnon luominen epäonnistui. Yritä uudelleen muutaman minuutin kuluttua.",
+    "CurrentUsage": "Nykyinen",
     "DefaultTensorboardPath": "/home/work/logs",
     "DescCommitSession": "Olet aikeissa sitouttaa alla olevaa istuntoa vastaavan kontin:",
     "DownloadingCSVFile": "CSV-tiedoston lataaminen...",
@@ -1162,6 +1164,7 @@
     "MEM": "Muisti",
     "MaxSessionLifetime": "Istunnon enimmäiskestoikä",
     "MaxSessionLifetimeDesc": "Pakottaa lopettamaan istunnot tämän ajan kuluttua luomisesta. Se estää istuntoa toimimasta loputtomiin.",
+    "MaxUsage": "Max",
     "Message": "Viesti",
     "ModifyArguments": "Muokkaa argumentteja",
     "MySessions": "Istunnoni",
@@ -1185,6 +1188,7 @@
     "RequestContainerCommit": "Pyyntö Container Commit",
     "Reservation": "Varaukset",
     "ResourceGroup": "Resurssiryhmä",
+    "ResourceUsage": "Resurssien käyttö",
     "Running": "Running",
     "SFTPDescription": "Voit ladata tiedostoja nopeasti ja turvallisesti SSH/SFTP-asiakasohjelman kautta. Jos et ole ladannut SSH-avainparia etukäteen, tallenna SSH-avaimesi ensin napsauttamalla \"SSH-avaimen lataus\" -painiketta. Tämän jälkeen voit käyttää avainta SFTP:n, SCP:n ja Rsyncin kaltaisten komentojen suorittamiseen. \"Istunto - Upload Session\" -sivulla voit hallita istuntojen luetteloa tiedostojen lataamista varten.",
     "SFTPExtraNotification": "On suositeltavaa poistaa istunnot sen jälkeen, kun ne on käytetty, sillä istuntojen määrä on rajoitettu. Istunnot, joita ei käytetä tiedostojen lataamiseen tietyn ajan kuluessa, voidaan poistaa automaattisesti.",

resources/i18n/fr.json

@@ -1110,6 +1110,7 @@
     "AlreadyTerminatingSession": "La session est déjà terminée.",
     "Architecture": "Architecture",
     "Arguments": "Arguments",
+    "AverageUsage": "AVG",
     "Batch": "Lot",
     "CPU": "UNITÉ CENTRALE",
     "CheckAgainDialog": "Cette action ne peut pas être annulée. Voulez-vous poursuivre?",
@@ -1126,6 +1127,7 @@
     "ContainerToCleanUp": "Conteneur(s) à nettoyer",
     "Core": "cœur",
     "CreationFailed": "La création de la session a échoué. Veuillez réessayer dans quelques minutes.",
+    "CurrentUsage": "Actuel",
     "DefaultTensorboardPath": "/maison/travail/journaux",
     "DescCommitSession": "Vous êtes sur le point d'engager le conteneur correspondant à la session ci-dessous :",
     "DownloadingCSVFile": "Téléchargement du fichier CSV...",
@@ -1164,6 +1166,7 @@
     "MEM": "Mémoire",
     "MaxSessionLifetime": "Durée de vie maximale de la session",
     "MaxSessionLifetimeDesc": "Force l'arrêt des sessions après ce délai de création. Cela empêche la session de fonctionner à l'infini.",
+    "MaxUsage": "Max",
     "Message": "Message",
     "ModifyArguments": "Modifier les arguments",
     "MySessions": "Mes sessions",
@@ -1187,6 +1190,7 @@
     "RequestContainerCommit": "Demande de conteneur Engagement",
     "Reservation": "Réservation",
     "ResourceGroup": "Groupe de ressources",
+    "ResourceUsage": "Utilisation des ressources",
     "Running": "En cours",
     "SFTPDescription": "Utilisez votre application SSH/SFTP préférée pour vous connecter.",
     "SFTPExtraNotification": "Il est recommandé de supprimer les sessions après leur utilisation, car leur nombre est limité. Les sessions qui ne sont pas utilisées pour télécharger des fichiers pendant une certaine période peuvent être automatiquement supprimées.",