[SALAD-23118] WebApp: Demand monitor display name (#1235)

* ModalWithOverlay component - added * temp * GetNotifiedDemandChangesModal - added * demandHardware.displayName - applied * duplicated code - removed
SaladTechnologies · Dec 10, 2024 · c3380b9 · c3380b9
1 parent 99e741e
commit c3380b9
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 49 deletions.
diff --git a/.../modules/demand-monitor-views/DemandMonitorPage/DemandMonitorTable/DemandMonitorTable.tsx b/.../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/...r-views/DemandMonitorPage/GetNotifiedDemandChangesModal/GetNotifiedDemandChangesModal.tsx b/...r-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
@@ -4,6 +4,7 @@ import { demandMonitorGpuEndpointPath } from './constants'
 
 export interface DemandedHardwarePerformance {
   name: string
+  displayName: string
   earningRates: {
     avgEarning: number
     avgEarningTimeMinutes: number