Skip to content

Commit d36cc3f

Browse files
MarcBaeuerleMarcBaeuerle
committed
added preset configurations
1 parent b53b603 commit d36cc3f

6 files changed

Lines changed: 185 additions & 9 deletions

File tree

‎frontend/src/App.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -52,9 +52,6 @@ function App() {
5252
target='_blank'
5353
>Read Paper</a>
5454
</p>
55-
<p className='text-cyan-700 underline underline-offset-2 text-lg text-center'>
56-
Configuration Presets
57-
</p>
5855
<p className='text-cyan-700 underline underline-offset-2 text-lg text-center'>
5956
Read More
6057
</p>

‎frontend/src/assets/data.ts‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29,6 +29,78 @@ export const CPU_METRICS: Record<string, CPUMetric> = {
2929
"SPECrate per TDP": { label: "SPECINTrate_PER_TDP", unit: "Score/Watt", tofixed: 2, delimeter: true }
3030
};
3131

32+
export interface ServerPresetType {
33+
specific_name: string;
34+
instance: 'EC2' | 'Azure';
35+
cpu: keyof CPUs;
36+
ram: number;
37+
ssd: number;
38+
hdd: number;
39+
}
40+
41+
export interface ServerPresets {
42+
[key: string]: ServerPresetType;
43+
}
44+
45+
export const SERVER_PRESETS : ServerPresets = {
46+
"C5": {
47+
specific_name: "c5d.12xlarge",
48+
cpu: "Intel Xeon Platinum 8180",
49+
ram: 96,
50+
ssd: 2*900,
51+
hdd: 0,
52+
instance: "EC2"
53+
},
54+
"R5": {
55+
specific_name: "r5d.12xlarge",
56+
cpu: "Intel Xeon Platinum 8259CL",
57+
ram: 384,
58+
ssd: 2*900,
59+
hdd: 0,
60+
instance: "EC2"
61+
},
62+
"M5n": {
63+
specific_name: "m5dn.12xlarge",
64+
cpu: "Intel Xeon Platinum 8259CL",
65+
ram: 192,
66+
ssd: 2*900,
67+
hdd: 0,
68+
instance: "EC2"
69+
},
70+
"M6a": {
71+
specific_name: "m6a.24xlarge",
72+
cpu: "AMD EPYC 7552",
73+
ram: 384,
74+
ssd: 0,
75+
hdd: 0,
76+
instance: "EC2"
77+
},
78+
"M7a": {
79+
specific_name: "m7a.32xlarge",
80+
cpu: "AMD EPYC 9554",
81+
ram: 512,
82+
ssd: 0,
83+
hdd: 0,
84+
instance: "EC2"
85+
},
86+
"Dasv5": {
87+
specific_name: "Standard_D96as_v5",
88+
cpu: "AMD EPYC 7773X",
89+
ram: 384,
90+
ssd: 0,
91+
hdd: 0,
92+
instance: "Azure"
93+
},
94+
"Dasv6": {
95+
specific_name: "Standard_D96as_v6",
96+
cpu: "AMD EPYC 9554",
97+
ram: 384,
98+
ssd: 0,
99+
hdd: 0,
100+
instance: "Azure"
101+
}
102+
}
103+
32104
const CPU_DATA :CPUs = {
33105
"Intel Xeon E7-4880 v2": {
34106
"MAKE": INTEL,

‎frontend/src/partials/BenchmarkSettings.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,8 +38,8 @@ export interface CPUEntry {
3838
SPECINT: PerformanceType;
3939
SORTED_TUPLES_PER_JOULE: number | null;
4040
TPCH_RUNS_PER_KJOULE: number | null;
41-
SPECINT_PER_TDP: number;
42-
SPECINTrate_PER_TDP: number;
41+
SPECINT_PER_TDP: number | null;
42+
SPECINTrate_PER_TDP: number | null;
4343
DIE_SIZE: number;
4444
}
4545

‎frontend/src/partials/Compare.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,13 @@ import logo2024 from "../assets/intel_logo/2024.jpg";
1111
import amdLogo from "../assets/AMD_epyc_logo.svg";
1212
import close from "../assets/close.png";
1313
import ValueSelection from "../utility/ValueSelection.tsx";
14+
import ServerPresetsComponent from "./ServerPresets.tsx";
15+
import { ServerPresets } from "../assets/data.ts";
1416

1517
export const RAM_CAPACITIES :number[] = [128, 512];
1618
export const SSD_CAPACITIES :number[] = [512, 2048];
1719
export const HDD_CAPACITIES :number[] = [0, 4096];
20+
export const CUSTOM = 'Custom' as const;
1821

1922
const YEAR_LOGOS: Record<number, string> = {
2023
2013: logo2013,
@@ -84,6 +87,7 @@ const Dropdown: React.FC<DropdownProps> = ({ label, thisServer, otherServer, sho
8487
const canToggle = label == NEW_LABEL;
8588

8689
const [showDropdown, setShowDropdown] = useState<boolean>(canToggle ? false : true);
90+
const [presetValue, setPresetValue] = useState<keyof ServerPresets | typeof CUSTOM>(CUSTOM)
8791

8892
// This is when new hardware is hidden, we set it equal to current hardware
8993
if (canToggle && !showDropdown) {
@@ -98,10 +102,12 @@ const Dropdown: React.FC<DropdownProps> = ({ label, thisServer, otherServer, sho
98102
setShowDropdown(!showDropdown);
99103
}
100104

101-
const updateComponent = (updates: Partial<ServerType>) => {
105+
const updateComponent = (updates: Partial<ServerType>, preset: false | string = false) => {
102106
// Always update the current server
103107
updateServer(thisServer, updates);
108+
setPresetValue(preset ? preset : CUSTOM);
104109

110+
// TODO: fix bug here when changing presets after scaling option
105111
if (advancedOptions === 'Mirror') {
106112
const { cpu, ...updatesWithoutCPU } = updates;
107113
updateServer(otherServer, updatesWithoutCPU);
@@ -147,10 +153,10 @@ const Dropdown: React.FC<DropdownProps> = ({ label, thisServer, otherServer, sho
147153
}, [advancedOptions])
148154

149155
return (
150-
<div className="col-span-1 z-10 flex flex-col gap-2 font-light relative">
156+
<div className="col-span-1 flex flex-col gap-2 font-light relative">
151157
<div
152158
onClick={toggleShow}
153-
className={`${showDropdown ? 'opacity-0 pointer-events-none' : 'opacity-100 pointer-events-auto'} z-10 cursor-pointer duration-150 absolute top-0 left-0 w-full h-full bg-white border-2 border-slate-400 rounded-xl flex items-center justify-center group hover:border-slate-300`}>
159+
className={`${showDropdown ? 'opacity-0 pointer-events-none' : 'opacity-100 pointer-events-auto'} z-20 cursor-pointer duration-150 absolute top-0 left-0 w-full h-full bg-white border-2 border-slate-400 rounded-xl flex items-center justify-center group hover:border-slate-300`}>
154160
<p className="text-6xl text-slate-500 group-hover:text-slate-400 duration-150">+</p>
155161
</div>
156162
<div className="flex justify-between">
@@ -165,6 +171,7 @@ const Dropdown: React.FC<DropdownProps> = ({ label, thisServer, otherServer, sho
165171
className="h-5" />
166172
</button>
167173
</div>
174+
<ServerPresetsComponent presetValue={presetValue} updateServer={updateComponent} />
168175
<div className={`${showDropdown ? 'opacity-100' : 'opacity-0 pointer-events-none'} relative duration-150`}>
169176
<select
170177
className="block appearance-none text-base w-full bg-gray-100 border-2 border-gray-400 py-1 px-2 pr-8 rounded focus:outline-none focus:bg-white focus:border-gray-500"

‎frontend/src/partials/ServerPresets.tsx‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import { useState, useRef, useEffect } from 'react';
2+
import CPU_DATA, { SERVER_PRESETS, ServerPresets } from '../assets/data';
3+
import { ServerType } from '../utility/BenchmarkContext';
4+
import { CUSTOM } from './Compare';
5+
6+
type ServerPresetsComponentProps = {
7+
updateServer: (update: Partial<ServerType>, preset: string) => void;
8+
presetValue: keyof ServerPresets | typeof CUSTOM
9+
};
10+
11+
const ServerPresetsComponent = ({ presetValue, updateServer }: ServerPresetsComponentProps) => {
12+
const [showPopup, setShowPopup] = useState(false);
13+
const popupRef = useRef<HTMLDivElement>(null);
14+
15+
// Close popup if clicked outside
16+
useEffect(() => {
17+
const handleClickOutside = (event: MouseEvent) => {
18+
if (popupRef.current && !popupRef.current.contains(event.target as Node)) {
19+
setShowPopup(false);
20+
}
21+
};
22+
23+
if (showPopup) {
24+
document.addEventListener('mousedown', handleClickOutside);
25+
} else {
26+
document.removeEventListener('mousedown', handleClickOutside);
27+
}
28+
29+
// Clean up
30+
return () => {
31+
document.removeEventListener('mousedown', handleClickOutside);
32+
};
33+
}, [showPopup]);
34+
35+
const handleSelectPreset = (key: keyof ServerPresets) => {
36+
console.log('Selected preset:', key);
37+
console.log(SERVER_PRESETS[key]);
38+
const preset = SERVER_PRESETS[key];
39+
40+
const config: Partial<ServerType> = {
41+
cpu: preset.cpu as string,
42+
ram: preset.ram,
43+
ssd: preset.ssd,
44+
hdd: preset.hdd,
45+
};
46+
updateServer(config, key as string);
47+
setShowPopup(false);
48+
};
49+
50+
return (
51+
<div className="relative">
52+
{/* Trigger */}
53+
<div
54+
onClick={() => setShowPopup(!showPopup)}
55+
draggable="false"
56+
className="cursor-pointer -mt-2 text-gray-500"
57+
>
58+
Preset: {presetValue} {showPopup ? '▼' : '▶'}
59+
</div>
60+
61+
{/* Popup */}
62+
{showPopup && (
63+
<div
64+
ref={popupRef}
65+
className="absolute left-0 mt-2 ml-3 w-72 bg-white border rounded shadow-lg z-50 p-3">
66+
{/* Close button */}
67+
<div className="flex justify-between items-center mb-2">
68+
<p className="font-semibold">Select a Preset</p>
69+
<button
70+
onClick={() => setShowPopup(false)}
71+
className="text-gray-500 hover:text-red-400 text-sm cursor-pointer"
72+
>
73+
✕
74+
</button>
75+
</div>
76+
77+
<div className="space-y-3">
78+
{Object.entries(SERVER_PRESETS).map(([key, preset]) => (
79+
<div
80+
key={key}
81+
onClick={() => handleSelectPreset(key)}
82+
className={`cursor-pointer p-2 hover:bg-gray-100 rounded ${key === presetValue ? 'bg-gray-200' : ''}`}
83+
>
84+
<p className="font-medium">
85+
{preset.instance} | {key}
86+
</p>
87+
<div className="text-sm text-gray-600 ml-2">
88+
<p>{CPU_DATA[preset.cpu].LAUNCH_YEAR} {preset.cpu}</p>
89+
<p>{preset.ram}GB RAM - {preset.ssd} GB SSD</p>
90+
</div>
91+
</div>
92+
))}
93+
</div>
94+
</div>
95+
)}
96+
</div>
97+
);
98+
};
99+
100+
export default ServerPresetsComponent;

‎frontend/src/utility/ToggleSelection.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ interface ToggleSelectionProps<T> {
1414
flexGrow?: boolean;
1515
disabled?: Array<T>;
1616
color?: 'New' | 'Current' | 'None';
17-
zIndex?: string; // I cannot find another workaround...remove this and see tooltip interaction
17+
zIndex?: string; // I cannot find another workaround...remove this and see hover tooltip interaction
1818
setState: (value: T) => void;
1919
}
2020

0 commit comments

Comments
 (0)