Skip to content

Commit a0d40e1

Browse files
ribalbaribalba
committed
os swith
1 parent 33f9c4a commit a0d40e1

File tree

1 file changed

+92
-72
lines changed

1 file changed

+92
-72
lines changed

‎frontend/js/helpers/metric-boxes.js

Lines changed: 92 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,26 @@
1-
/*
2-
WebComponent function without ShadowDOM
3-
to expand the template in the HTML pages
4-
*/
51
class PhaseMetrics extends HTMLElement {
62
connectedCallback() {
7-
const tabCards = {
8-
power: [
9-
{ key: 'cpu', name: 'CPU', icon: 'microchip' },
10-
{ key: 'dram', name: 'DRAM', icon: 'memory' },
11-
{ key: 'gpu', name: 'GPU', icon: 'camera retro' },
12-
{ key: 'disk', name: 'Disk', icon: 'hdd' },
13-
{ key: 'machine', name: 'Machine', icon: 'power off' },
14-
],
15-
energy: [
16-
{ key: 'cpu', name: 'CPU', icon: 'microchip' },
17-
{ key: 'dram', name: 'DRAM', icon: 'memory' },
18-
{ key: 'gpu', name: 'GPU', icon: 'camera retro' },
19-
{ key: 'disk', name: 'Disk', icon: 'hdd' },
20-
{ key: 'machine', name: 'Machine', icon: 'battery three quarters' },
21-
],
22-
co2: [
23-
{ key: 'cpu', name: 'CPU', icon: 'microchip' },
24-
{ key: 'dram', name: 'DRAM', icon: 'memory' },
25-
{ key: 'gpu', name: 'GPU', icon: 'camera retro' },
26-
{ key: 'disk', name: 'Disk', icon: 'hdd' },
27-
{ key: 'machine', name: 'Machine', icon: 'burn' },
28-
],
29-
};
3+
const tabCards = [
4+
{ key: 'cpu', name: 'CPU', icon: 'microchip', colour: 'orange' },
5+
{ key: 'gpu', name: 'GPU', icon: 'camera retro', colour: 'orange' },
6+
{ key: 'dram', name: 'DRAM', icon: 'memory', colour: 'orange' },
7+
{ key: 'disk', name: 'Disk', icon: 'hdd', colour: 'orange' },
8+
{ key: 'machine', name: 'Machine', icon: 'power off', colour: 'orange' },
9+
];
3010

3111
const extraCards = [
32-
{ key: 'runtime', name: 'Runtime', icon: 'clock' },
33-
{ key: 'sci', name: 'SCI', icon: 'leaf' },
34-
{ key: 'network', name: 'Network', icon: 'wifi' },
12+
{ key: 'runtime', name: 'Phase Duration', icon: 'clock', colour: 'green' },
13+
{ key: 'runtime', name: 'Data Transferred', icon: 'clock', colour: 'green' },
14+
{ key: 'network', name: 'Network', icon: 'power off', colour: 'green' },
15+
{ key: 'runtime', name: 'Embodied Carbon', icon: 'clock', colour: 'green' },
16+
{ key: 'runtime', name: 'Operational Carbon', icon: 'clock', colour: 'green' },
17+
{ key: 'sci', name: 'SCI', icon: 'leaf', colour: 'green' },
3518
];
3619

37-
const createCard = ({ key, name, icon }, suffix = '') => {
20+
const createCard = ({ key, name, icon, colour }, suffix = '') => {
3821
const cardClass = suffix ? `${key}-${suffix}` : key;
3922
return `
40-
<div class="ui card ${cardClass}">
23+
<div class="ui ${colour} card ${cardClass}">
4124
<div class="content">
4225
<i class="${icon} icon"></i><b>${name}</b>
4326
<div class="right floated meta si-unit"></div>
@@ -55,28 +38,47 @@ class PhaseMetrics extends HTMLElement {
5538

5639
const buildTab = (tab, active = false) => `
5740
<div class="ui tab ${active ? 'active' : ''}" data-tab="${tab}">
58-
<div class="ui five cards stackable">
59-
${tabCards[tab].map(card => createCard(card, tab)).join('')}
41+
<div class="ui six cards stackable">
42+
${tabCards.map(card => createCard(card, tab)).join('')}
43+
</div>
44+
<h4 class="ui horizontal left aligned divider header">Impact</h4>
45+
<div class="ui six cards stackable">
46+
${extraCards.map(card => createCard(card)).join('')}
6047
</div>
48+
6149
</div>`;
6250

51+
52+
// <div class="ui stackable grid">
53+
// <div class="two wide left attached column">
54+
// <div class="ui vertical fluid tabular menu">
55+
// <a class="item active" data-tab="power">Power</a>
56+
// <a class="item" data-tab="energy">Energy</a>
57+
// <a class="item" data-tab="co2">CO<sub>2</sub></a>
58+
// </div>
59+
// </div>
60+
// <div class="fourteen wide right attached column">
61+
// <div class="ui seamless right attached segment">
62+
// ${buildTab('power', true)}
63+
// ${buildTab('energy')}
64+
// ${buildTab('co2')}
65+
// </div>
66+
// </div>
67+
// </div>
68+
6369
this.innerHTML = `
64-
<h3 class="ui dividing header print-page-break">Metrics Overview</h3>
65-
<div class="ui top attached tabular menu">
66-
<a class="item active" data-tab="power">Power</a>
67-
<a class="item" data-tab="energy">Energy</a>
68-
<a class="item" data-tab="co2">CO<sub>2</sub></a>
69-
</div>
70-
<div class="ui bottom attached segment">
71-
${buildTab('power', true)}
72-
${buildTab('energy')}
73-
${buildTab('co2')}
74-
</div>
75-
<div class="ui warning message hidden">
76-
<ul></ul>
77-
</div>
78-
<div class="ui three cards stackable">
79-
${extraCards.map(card => createCard(card)).join('')}
70+
<div class="ui segments">
71+
<div class="ui segment">
72+
<div class="ui pointing menu">
73+
<a class="active item" data-tab="power">Power</a>
74+
<a class="item" data-tab="energy">Energy</a>
75+
<a class="item" data-tab="co2">CO<sub>2</sub></a>
76+
</div>
77+
<h4 class="ui horizontal left aligned divider header">Hardware</h4>
78+
${buildTab('power', true)}
79+
${buildTab('energy', false)}
80+
${buildTab('co2', false)}
81+
</div>
8082
</div>
8183
<br>
8284
<div class="ui accordion">
@@ -283,48 +285,66 @@ const calculateCO2 = (phase, total_CO2_in_ug) => {
283285
}
284286
}
285287

286-
const updateKeyMetric = (phase, metric_name, clean_name, detail_name, value, std_dev_text, unit, raw_value, raw_unit, explanation, source) => {
288+
const updateKeyMetric = (
289+
phase, metric_name, clean_name, detail_name,
290+
value, std_dev_text, unit, raw_value, raw_unit,
291+
explanation, source
292+
) => {
287293

288294
let selector = null;
289295

290-
if(phase_time_metric_condition(metric_name)) {
296+
console.log(`Updating key metric for ${metric_name} in phase ${phase} with value ${value} ${unit}`);
297+
298+
if (phase_time_metric_condition(metric_name)) {
291299
selector = '.runtime';
292-
} else if(sci_metric_condition(metric_name)) {
300+
} else if (sci_metric_condition(metric_name)) {
293301
selector = '.sci';
294-
} else if(network_energy_metric_condition(metric_name)) {
302+
} else if (network_energy_metric_condition(metric_name)) {
295303
selector = '.network';
304+
} else if (network_carbon_metric_condition(metric_name)) {
305+
selector = '.network-co2';
306+
} else if (embodied_carbon_share_metric_condition(metric_name)) {
307+
selector = '.embodied-carbon';
296308
} else {
297-
const isPower = metric_name.indexOf('_power_') !== -1;
298-
const isEnergy = metric_name.indexOf('_energy_') !== -1;
299-
const isCO2 = metric_name.indexOf('_carbon_') !== -1;
309+
const isPower = metric_name.includes('_power_');
310+
const isEnergy = metric_name.includes('_energy_');
311+
const isCO2 = metric_name.includes('_carbon_');
300312

301313
let component = null;
302-
if(metric_name.indexOf('cpu') !== -1) component = 'cpu';
303-
else if(metric_name.indexOf('memory') !== -1) component = 'dram';
304-
else if(metric_name.indexOf('gpu') !== -1) component = 'gpu';
305-
else if(metric_name.indexOf('disk') !== -1) component = 'disk';
306-
else if(metric_name.indexOf('psu') !== -1 || metric_name.indexOf('machine') !== -1) component = 'machine';
307-
308-
if(component !== null) {
309-
if(isPower) selector = `.${component}-power`;
310-
else if(isEnergy) selector = `.${component}-energy`;
311-
else if(isCO2) selector = `.${component}-co2`;
314+
if (metric_name.includes('cpu')) component = 'cpu';
315+
else if (metric_name.includes('memory') || metric_name.includes('dram')) component = 'dram';
316+
else if (metric_name.includes('gpu')) component = 'gpu';
317+
else if (metric_name.includes('disk')) component = 'disk';
318+
else if (metric_name.includes('psu') || metric_name.includes('machine')) component = 'machine';
319+
320+
if (component !== null) {
321+
if (isPower) selector = `.${component}-power`;
322+
else if (isEnergy) selector = `.${component}-energy`;
323+
else if (isCO2) selector = `.${component}-co2`;
312324
}
313325
}
314326

315-
if(selector === null) return; // could not match key metric
327+
if (selector === null) {
328+
console.warn(`No matching selector found for metric "${metric_name}"`);
329+
return;
330+
}
316331

317332
const card = document.querySelector(`div.tab[data-tab='${phase}'] ${selector}`);
318-
if(!card) return;
333+
if (!card) {
334+
console.warn(`No card found for selector "${selector}" in phase "${phase}"`);
335+
return;
336+
}
319337

320338
const valueNode = card.querySelector('.value');
321339
valueNode.innerText = `${value} ${std_dev_text}`;
322340
valueNode.setAttribute('title', `${raw_value} [${raw_unit}]`);
323341

324342
const unitNode = card.querySelector('.si-unit');
325-
if(unitNode) unitNode.innerText = unit;
343+
if (unitNode) unitNode.innerText = unit;
326344

327345
const helpNode = card.querySelector('.help');
328-
if(helpNode) helpNode.setAttribute('data-tooltip', explanation || 'No data available');
346+
if (helpNode) helpNode.setAttribute('data-tooltip', explanation || 'No data available');
329347

330-
}
348+
const sourceNode = card.querySelector('.source');
349+
if (sourceNode) sourceNode.innerText = source || '';
350+
};

0 commit comments

Comments
 (0)