From c3380b9af5b843eb006de85246ab928ee09706f3 Mon Sep 17 00:00:00 2001
From: Viktor <v.mozharovsky@gmail.com>
Date: Tue, 10 Dec 2024 10:15:30 -0800
Subject: [PATCH] [SALAD-23118] WebApp: Demand monitor display name (#1235)

* ModalWithOverlay component - added

* temp

* GetNotifiedDemandChangesModal - added

* demandHardware.displayName - applied

* duplicated code - removed
---
 .../DemandMonitorTable/DemandMonitorTable.tsx | 98 ++++++++++---------
 .../GetNotifiedDemandChangesModal.tsx         |  2 +-
 .../DemandMonitorStore.tsx                    |  1 +
 3 files changed, 52 insertions(+), 49 deletions(-)

diff --git a/packages/web-app/src/modules/demand-monitor-views/DemandMonitorPage/DemandMonitorTable/DemandMonitorTable.tsx b/packages/web-app/src/modules/demand-monitor-views/DemandMonitorPage/DemandMonitorTable/DemandMonitorTable.tsx
index 7bdfa480a..7dd0dfed4 100644
--- a/packages/web-app/src/modules/demand-monitor-views/DemandMonitorPage/DemandMonitorTable/DemandMonitorTable.tsx
+++ b/packages/web-app/src/modules/demand-monitor-views/DemandMonitorPage/DemandMonitorTable/DemandMonitorTable.tsx
@@ -189,57 +189,59 @@ const _DemandMonitorTable: FunctionComponent<Props> = ({ classes, demandedHardwa
             </tr>
           </thead>
           <tbody>
-            {sortedDemandedHardwarePerformanceList.map(({ name, earningRates, recommendedSpecs, utilizationPct }) => {
-              const demand = getHardwareDemandLevel(utilizationPct)
-              const avgEarningTimeHours = earningRates.avgEarningTimeMinutes / 60
-              const avgRunningTime = Math.round(avgEarningTimeHours * 10) / 10
+            {sortedDemandedHardwarePerformanceList.map(
+              ({ displayName, earningRates, recommendedSpecs, utilizationPct }) => {
+                const demand = getHardwareDemandLevel(utilizationPct)
+                const avgEarningTimeHours = earningRates.avgEarningTimeMinutes / 60
+                const avgRunningTime = Math.round(avgEarningTimeHours * 10) / 10
 
-              return (
-                <tr key={name}>
-                  <td className={classNames(classes.gpuWrapper, classes.tableCell, classes.greenTableCell)}>
-                    <div className={classes.greenTableCellDivider}></div>
-                    <Text className={classes.gpuName} variant="baseS">
-                      {name}
-                    </Text>
-                    <Text variant="baseXS">HOURLY RATE</Text>
-                    <Text variant="baseXS">
-                      ${earningRates.minEarningRate} - ${earningRates.maxEarningRate}
-                    </Text>
-                  </td>
-                  <td className={classes.tableCell}>
-                    <div className={classes.tableCellCentered}>
-                      <Text variant="baseXS">{recommendedSpecs.ramGb} GB System RAM</Text>
-                      <Text variant="baseXS">120 GB Storage</Text>
-                    </div>
-                  </td>
-                  <td className={classes.tableCell}>
-                    <div
-                      className={classes.demandPill}
-                      style={{
-                        backgroundColor: demandPillColors[demand].background,
-                        color: demandPillColors[demand].text,
-                      }}
-                    >
-                      <Text variant="baseXS">{demand}</Text>
-                    </div>
-                  </td>
-                  <td className={classes.tableCell}>
-                    <div className={classes.tableCellCentered}>
-                      <Text className={classes.boldText} variant="baseM">
-                        ${earningRates.avgEarning}
+                return (
+                  <tr key={displayName}>
+                    <td className={classNames(classes.gpuWrapper, classes.tableCell, classes.greenTableCell)}>
+                      <div className={classes.greenTableCellDivider}></div>
+                      <Text className={classes.gpuName} variant="baseS">
+                        {displayName}
                       </Text>
-                    </div>
-                  </td>
-                  <td className={classes.tableCell}>
-                    <div className={classes.tableCellCentered}>
-                      <Text className={classes.boldText} variant="baseM">
-                        {avgRunningTime} hours
+                      <Text variant="baseXS">HOURLY RATE</Text>
+                      <Text variant="baseXS">
+                        ${earningRates.minEarningRate} - ${earningRates.maxEarningRate}
                       </Text>
-                    </div>
-                  </td>
-                </tr>
-              )
-            })}
+                    </td>
+                    <td className={classes.tableCell}>
+                      <div className={classes.tableCellCentered}>
+                        <Text variant="baseXS">{recommendedSpecs.ramGb} GB System RAM</Text>
+                        <Text variant="baseXS">120 GB Storage</Text>
+                      </div>
+                    </td>
+                    <td className={classes.tableCell}>
+                      <div
+                        className={classes.demandPill}
+                        style={{
+                          backgroundColor: demandPillColors[demand].background,
+                          color: demandPillColors[demand].text,
+                        }}
+                      >
+                        <Text variant="baseXS">{demand}</Text>
+                      </div>
+                    </td>
+                    <td className={classes.tableCell}>
+                      <div className={classes.tableCellCentered}>
+                        <Text className={classes.boldText} variant="baseM">
+                          ${earningRates.avgEarning}
+                        </Text>
+                      </div>
+                    </td>
+                    <td className={classes.tableCell}>
+                      <div className={classes.tableCellCentered}>
+                        <Text className={classes.boldText} variant="baseM">
+                          {avgRunningTime} hours
+                        </Text>
+                      </div>
+                    </td>
+                  </tr>
+                )
+              },
+            )}
           </tbody>
         </table>
       </div>
diff --git a/packages/web-app/src/modules/demand-monitor-views/DemandMonitorPage/GetNotifiedDemandChangesModal/GetNotifiedDemandChangesModal.tsx b/packages/web-app/src/modules/demand-monitor-views/DemandMonitorPage/GetNotifiedDemandChangesModal/GetNotifiedDemandChangesModal.tsx
index 2b5c51c52..8de455d87 100644
--- a/packages/web-app/src/modules/demand-monitor-views/DemandMonitorPage/GetNotifiedDemandChangesModal/GetNotifiedDemandChangesModal.tsx
+++ b/packages/web-app/src/modules/demand-monitor-views/DemandMonitorPage/GetNotifiedDemandChangesModal/GetNotifiedDemandChangesModal.tsx
@@ -129,7 +129,7 @@ const _GetNotifiedDemandChangesModal = ({
   onContinuesClick,
 }: Props) => {
   const demandHardwareOptions = demandedHardwarePerformanceList?.map((demandHardware) => ({
-    label: demandHardware.name,
+    label: demandHardware.displayName,
     value: demandHardware.name,
   }))
 
diff --git a/packages/web-app/src/modules/demand-monitor-views/DemandMonitorStore.tsx b/packages/web-app/src/modules/demand-monitor-views/DemandMonitorStore.tsx
index 4d7e65d43..6496768be 100644
--- a/packages/web-app/src/modules/demand-monitor-views/DemandMonitorStore.tsx
+++ b/packages/web-app/src/modules/demand-monitor-views/DemandMonitorStore.tsx
@@ -4,6 +4,7 @@ import { demandMonitorGpuEndpointPath } from './constants'
 
 export interface DemandedHardwarePerformance {
   name: string
+  displayName: string
   earningRates: {
     avgEarning: number
     avgEarningTimeMinutes: number