DemandedHardwarePerformance['demandTierName'] utilized in Demand Moni…

…tor Table (#1251)
SaladTechnologies · Dec 19, 2024 · d2417e3 · d2417e3
1 parent 90b988f
commit d2417e3
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 24 deletions.
diff --git a/.../modules/demand-monitor-views/DemandMonitorPage/DemandMonitorTable/DemandMonitorTable.tsx b/.../modules/demand-monitor-views/DemandMonitorPage/DemandMonitorTable/DemandMonitorTable.tsx
@@ -10,7 +10,7 @@ import type { SaladTheme } from '../../../../SaladTheme'
 import type { DemandedHardwarePerformance } from '../../DemandMonitorStore'
 import { demandMonitorTableColumns, demandPillColors } from './constants'
 import type { DemandMonitorTableColumn, DemandMonitorTableSort } from './types'
-import { getHardwareDemandLevel, sortHardwareDemandPerformance } from './utils'
+import { sortHardwareDemandPerformance } from './utils'
 
 const styles: (theme: SaladTheme) => Record<string, CSS.Properties> = (theme: SaladTheme) => ({
   tableWrapper: {
@@ -190,9 +190,7 @@ const _DemandMonitorTable: FunctionComponent<Props> = ({ classes, demandedHardwa
           </thead>
           <tbody>
             {sortedDemandedHardwarePerformanceList.map(
-              ({ displayName, earningRates, recommendedSpecs, utilizationPct }) => {
-                const demand = getHardwareDemandLevel(utilizationPct)
-
+              ({ displayName, earningRates, recommendedSpecs, demandTierName }) => {
                 return (
                   <tr key={displayName}>
                     <td className={classNames(classes.gpuWrapper, classes.tableCell, classes.greenTableCell)}>
@@ -215,11 +213,11 @@ const _DemandMonitorTable: FunctionComponent<Props> = ({ classes, demandedHardwa
                       <div
                         className={classes.demandPill}
                         style={{
-                          backgroundColor: demandPillColors[demand].background,
-                          color: demandPillColors[demand].text,
+                          backgroundColor: demandPillColors[demandTierName].background,
+                          color: demandPillColors[demandTierName].text,
                         }}
                       >
-                        <Text variant="baseXS">{demand}</Text>
+                        <Text variant="baseXS">{demandTierName}</Text>
                       </div>
                     </td>
                     <td className={classes.tableCell}>

diff --git a/...eb-app/src/modules/demand-monitor-views/DemandMonitorPage/DemandMonitorTable/constants.ts b/...eb-app/src/modules/demand-monitor-views/DemandMonitorPage/DemandMonitorTable/constants.ts
@@ -1,4 +1,5 @@
-import type { Demand, DemandMonitorTableColumn } from './types'
+import type { DemandedHardwarePerformance } from '../../DemandMonitorStore'
+import type { DemandMonitorTableColumn } from './types'
 import {
   sortByAvgEarningRate,
   sortByDemand,
@@ -12,7 +13,7 @@ interface DemandPillColors {
   background: string
 }
 
-export const demandPillColors: Record<Demand, DemandPillColors> = {
+export const demandPillColors: Record<DemandedHardwarePerformance['demandTierName'], DemandPillColors> = {
   Low: {
     text: 'white',
     background: '#546470',

diff --git a/...es/web-app/src/modules/demand-monitor-views/DemandMonitorPage/DemandMonitorTable/types.ts b/...es/web-app/src/modules/demand-monitor-views/DemandMonitorPage/DemandMonitorTable/types.ts
@@ -1,12 +1,10 @@
 import type { DemandedHardwarePerformance } from '../../DemandMonitorStore'
 
-export type Demand = 'Low' | 'Moderate' | 'High'
-
 export interface DemandMonitorItem {
   gpu: string
   hourlyRate: string
   recommendedSpecs: { ram: string; storage: string }
-  demand: Demand
+  demand: DemandedHardwarePerformance['demandTierName']
   avgEarnings: string
   avgRunningTime: string
 }

diff --git a/...es/web-app/src/modules/demand-monitor-views/DemandMonitorPage/DemandMonitorTable/utils.ts b/...es/web-app/src/modules/demand-monitor-views/DemandMonitorPage/DemandMonitorTable/utils.ts
@@ -1,16 +1,5 @@
 import type { DemandedHardwarePerformance } from '../../DemandMonitorStore'
-import type { Demand, DemandMonitorTableSort, DemandMonitorTableSortRule } from './types'
-
-export const getHardwareDemandLevel = (utilizationPercentage: number): Demand => {
-  if (utilizationPercentage > 80) {
-    return 'High'
-  }
-  if (utilizationPercentage < 50) {
-    return 'Low'
-  }
-
-  return 'Moderate'
-}
+import type { DemandMonitorTableSort, DemandMonitorTableSortRule } from './types'
 
 interface SortHardwareDemandPerformanceParams {
   demandedHardwarePerformanceList: DemandedHardwarePerformance[]

diff --git a/packages/web-app/src/modules/demand-monitor-views/DemandMonitorStore.tsx b/packages/web-app/src/modules/demand-monitor-views/DemandMonitorStore.tsx
@@ -5,6 +5,8 @@ import { demandMonitorGpuEndpointPath } from './constants'
 export interface DemandedHardwarePerformance {
   name: string
   displayName: string
+  demandTier: 'low' | 'mid' | 'high'
+  demandTierName: 'Low' | 'Moderate' | 'High'
   earningRates: {
     avgEarningRate: number
     top25PctEarningRate: number