11import CPU_DATA from "../assets/data" ;
22import { GRID_INTENSITY } from "../assets/grid_intensities" ;
3- import { useBenchmarkContext } from "../utility/BenchmarkContext" ;
3+ import { ServerType , useBenchmarkContext , NEW_LABEL , OLD_LABEL } from "../utility/BenchmarkContext" ;
44import ToggleSelection from "../utility/ToggleSelection" ;
5- import { addCommaToNumber } from "../utility/UtilityFunctions" ;
5+ import { addCommaToNumber , clamp } from "../utility/UtilityFunctions" ;
66import { getCountryColor } from "../partials/GeoMap" ;
77// @tsignore
88import GeoMap from "../partials/GeoMap" ;
99// @ts -ignore
1010import { COUNTRY_NAMES } from '../assets/countries.js' ;
1111import { ListItem , ListItemWithSearch } from "../utility/ListItems" ;
1212import { WORKLOAD_EXPLANATIONS , SCALING_EXPLANATIONS } from "../utility/descriptions" ;
13+ import UtilizationInput from "../utility/UtilizationInput.js" ;
1314
1415export const WORKLOAD_TYPES = [ 'SPECrate' , 'SPECspeed' , 'Sorting' , 'TPC-H' ] as const ;
1516export type WorkloadType = typeof WORKLOAD_TYPES [ number ] ;
1617
17- export const SCALING_TYPES = [ 'None' , 'Utilization' , 'Resources ' ] as const ;
18+ export const SCALING_TYPES = [ 'None' , 'Utilization' , 'Emissions ' ] as const ;
1819export type ScalingType = typeof SCALING_TYPES [ number ] ;
1920
2021export type PerformanceType = number | null ;
@@ -61,15 +62,15 @@ export const WORKLOAD_MAPPING: WorkloadMappingType = {
6162
6263function BenchmarkSettings ( ) {
6364
64- const { country, currentCPU , newCPU , workload, scaling, utilization , singleComparison, advancedSettings, setCountry, setWorkload, setScaling, setUtilization } = useBenchmarkContext ( ) ;
65+ const { country, currentServer , newServer , workload, scaling, singleComparison, advancedSettings, oldPerformanceIndicator , newPerformanceIndicator , setCountry, setWorkload, setScaling, updateServer } = useBenchmarkContext ( ) ;
6566
6667 const intensity = GRID_INTENSITY [ country ] ;
6768 let disabledWorkload : WorkloadType [ ] = [ ] ;
6869
6970 WORKLOAD_TYPES . forEach ( workload => {
7071 let push = false
71- if ( CPU_DATA [ currentCPU ] [ WORKLOAD_MAPPING [ workload ] ] === null ) push = true ;
72- if ( ! singleComparison && CPU_DATA [ newCPU ] [ WORKLOAD_MAPPING [ workload ] ] === null ) push = true ;
72+ if ( CPU_DATA [ currentServer . cpu ] [ WORKLOAD_MAPPING [ workload ] ] === null ) push = true ;
73+ if ( ! singleComparison && CPU_DATA [ newServer . cpu ] [ WORKLOAD_MAPPING [ workload ] ] === null ) push = true ;
7374
7475 // push only if it is not alreal in disableWorkload
7576 if ( push && ! disabledWorkload . includes ( workload ) ) disabledWorkload . push ( workload )
@@ -78,96 +79,89 @@ function BenchmarkSettings() {
7879 // need to reset workload if restriced cpu is selected after workload is set
7980 if ( disabledWorkload . includes ( workload ) ) setWorkload ( WORKLOAD_TYPES [ 0 ] )
8081
81-
82- return (
83- < div className = "flex z-30 flex-col text-medium font-medium flex-wrap px-4 py-2 gap-4" >
84- < div className = "grid grid-cols-7 space-x-4" >
85- < div className = "flex flex-col col-span-5 justify-evenly gap-2" >
86- < ToggleSelection < WorkloadType >
87- label = "Workload:"
88- options = { [ ...WORKLOAD_TYPES ] }
89- optionsTooltip = { WORKLOAD_EXPLANATIONS }
90- currentState = { workload }
91- setState = { setWorkload }
92- zIndex = "z-30"
93- disabled = { disabledWorkload }
94- flexGrow = { false }
95- />
96- < ToggleSelection < ScalingType >
97- label = "Scaling:"
98- options = { [ ...SCALING_TYPES ] }
99- optionsTooltip = { SCALING_EXPLANATIONS }
100- currentState = { scaling }
101- setState = { setScaling }
102- zIndex = "z-30"
103- disabled = { [ 'Resources' ] }
104- flexGrow = { false }
105- />
106- < div className = "flex gap-2 items-center" >
107- < label > < p > { advancedSettings ? 'Current HW ' : '' } Utilization %:</ p > </ label >
108- < input
109- className = "grow accent-orange-600"
110- type = "range"
111- value = { utilization }
112- min = { 0 }
113- max = { 100 }
114- onChange = { ( e ) => setUtilization ( Number ( e . target . value ) ) }
115- />
116- < div className = "flex gap-1" >
117- < input
118- className = "border rounded-md text-center bg-white"
119- type = "number"
120- min = { 0 }
121- max = { 100 }
122- value = { utilization }
123- onChange = { ( e ) => setUtilization ( Number ( e . target . value ) ) }
124- />
125- < p > %</ p >
126- </ div >
127- </ div >
128- < div hidden = { ! advancedSettings } className = "flex gap-2 items-center" >
129- < label > < p > New HW Utilization %:</ p > </ label >
130- < input
131- className = "grow accent-orange-600"
132- type = "range"
133- value = { utilization }
134- min = { 0 }
135- max = { 100 }
136- onChange = { ( e ) => setUtilization ( Number ( e . target . value ) ) }
137- />
138- < div className = "flex gap-1" >
139- < input
140- className = "border rounded-md text-center bg-white"
141- type = "number"
142- min = { 0 }
143- max = { 100 }
144- value = { utilization }
145- onChange = { ( e ) => setUtilization ( Number ( e . target . value ) ) }
82+ const updateUtilization = ( server : String , updates : Partial < ServerType > ) => {
83+ const thisServer = server == NEW_LABEL ? newServer : currentServer ;
84+ const otherServer = server == NEW_LABEL ? currentServer : newServer ;
85+
86+ updateServer ( thisServer , updates ) ;
87+
88+ if ( singleComparison ) return ;
89+
90+ if ( scaling == 'Utilization' ) {
91+ const isNew = server === NEW_LABEL ;
92+ console . log ( isNew )
93+ const base = isNew ? oldPerformanceIndicator : newPerformanceIndicator ;
94+ const target = isNew ? newPerformanceIndicator : oldPerformanceIndicator ;
95+
96+ const ratio = target / base ;
97+ const scaledUtilization = clamp ( updates . utilization as number * ratio , 0 , 100 )
98+
99+ updateServer ( otherServer , { utilization : scaledUtilization } )
100+ }
101+ }
102+
103+
104+ return (
105+ < div className = "flex z-30 flex-col text-medium font-medium flex-wrap px-4 py-2 gap-4" >
106+ < div className = "grid grid-cols-7 space-x-4" >
107+ < div className = "flex flex-col col-span-5 gap-5" >
108+ < ToggleSelection < WorkloadType >
109+ label = "Workload:"
110+ options = { [ ...WORKLOAD_TYPES ] }
111+ optionsTooltip = { WORKLOAD_EXPLANATIONS }
112+ currentState = { workload }
113+ setState = { setWorkload }
114+ zIndex = "z-30"
115+ disabled = { disabledWorkload }
116+ flexGrow = { false }
117+ />
118+ < ToggleSelection < ScalingType >
119+ label = "Scaling:"
120+ options = { [ ...SCALING_TYPES ] }
121+ optionsTooltip = { SCALING_EXPLANATIONS }
122+ currentState = { scaling }
123+ setState = { setScaling }
124+ zIndex = "z-30"
125+ disabled = { [ ] }
126+ flexGrow = { false }
127+ />
128+ < UtilizationInput
129+ label = { advancedSettings ? 'Current HW Utilization %:' : 'Utilization %:' }
130+ accent = "accent-orange-600"
131+ utilization = { currentServer . utilization }
132+ setUtilization = { ( x ) => updateUtilization ( OLD_LABEL , { utilization : ( x ) } ) }
133+ />
134+ {
135+ singleComparison ? null :
136+ < UtilizationInput
137+ label = "New HW Utilization %:"
138+ accent = "accent-blue-500"
139+ utilization = { newServer . utilization }
140+ setUtilization = { ( x ) => updateUtilization ( NEW_LABEL , { utilization : ( x ) } ) }
141+ hidden = { ! advancedSettings }
146142 />
147- < p > %</ p >
148- </ div >
149- </ div >
150- </ div >
151- < div className = "flex font-normal gap-2 flex-col col-span-2" >
152- < ListItemWithSearch
153- label = "Location"
154- value = { country }
155- options = { COUNTRY_NAMES }
156- onChange = { setCountry }
157- borderColor = { getCountryColor ( intensity ) }
158- />
159- < ListItem
160- label = "Grid Carbon Intensity"
161- value = { `${ addCommaToNumber ( intensity ) } }
162- borderColor = { getCountryColor ( intensity ) }
163- />
164- </ div >
143+ }
165144 </ div >
166- < div className = { `${ advancedSettings ? 'h-0' : 'h-96' } } >
167- < GeoMap country = { country } setCountry = { setCountry } />
145+ < div className = "flex font-normal gap-2 flex-col col-span-2" >
146+ < ListItemWithSearch
147+ label = "Location"
148+ value = { country }
149+ options = { COUNTRY_NAMES }
150+ onChange = { setCountry }
151+ borderColor = { getCountryColor ( intensity ) }
152+ />
153+ < ListItem
154+ label = "Grid Carbon Intensity"
155+ value = { `${ addCommaToNumber ( intensity ) } }
156+ borderColor = { getCountryColor ( intensity ) }
157+ />
168158 </ div >
169159 </ div >
170- )
160+ < div className = { `${ advancedSettings ? 'h-0' : 'h-96' } } >
161+ < GeoMap country = { country } setCountry = { setCountry } />
162+ </ div >
163+ </ div >
164+ )
171165}
172166
173167export default BenchmarkSettings ;
0 commit comments