Skip to content

Commit 8914163

Browse files
ribalbaribalba
committed
First working example
1 parent a0d40e1 commit 8914163

File tree

3 files changed

+68
-36
lines changed

3 files changed

+68
-36
lines changed

‎frontend/js/helpers/config.js.example

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -60,6 +60,12 @@ const network_energy_metric_condition = (metric) => {
6060
return false;
6161
}
6262

63+
const network_io_metric_condition = (metric) => {
64+
if(metric == 'network_io_cgroup_container') return true;
65+
return false;
66+
}
67+
68+
6369
const machine_power_metric_condition = (metric) => {
6470
if(metric.match(/^.*_power_.*_machine$/) !== null) return true;
6571
return false;
@@ -246,6 +252,11 @@ METRIC_MAPPINGS = {
246252
"source": "Formula",
247253
"explanation": "Estimated external energy cost for network infrastructure."
248254
},
255+
"network_power_formula_global": {
256+
"clean_name": "Network Transmission",
257+
"source": "Formula",
258+
"explanation": "Estimated external energy cost for network infrastructure."
259+
},
249260
"network_carbon_formula_global": {
250261
"clean_name": "Network Transmission CO₂",
251262
"source": "Formula",

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

Lines changed: 52 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,28 @@
11
class PhaseMetrics extends HTMLElement {
22
connectedCallback() {
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' },
3+
const hardwareCards = [
4+
{ key: 'cpu', name: 'CPU', icon: 'microchip', colour: 'orange', variable:true },
5+
{ key: 'gpu', name: 'GPU', icon: 'camera retro', colour: 'orange', variable:true },
6+
{ key: 'dram', name: 'DRAM', icon: 'memory', colour: 'orange', variable:true },
7+
{ key: 'disk', name: 'Disk', icon: 'hdd', colour: 'orange', variable:true },
8+
{ key: 'machine', name: 'Machine', icon: 'server', colour: 'orange', variable:true },
99
];
1010

1111
const extraCards = [
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' },
12+
{ key: 'runtime', name: 'Phase Duration', icon: 'hourglass half', colour: 'green', variable:false },
13+
{ key: 'network-data', name: 'Data Transferred', icon: 'exchange', colour: 'green', variable:false },
14+
{ key: 'network', name: 'Network', icon: 'sitemap', colour: 'green', variable:true },
15+
{ key: 'embodied-carbon', name: 'Embodied Carbon', icon: 'industry', colour: 'green', variable:false },
16+
{ key: 'operational-carbon', name: 'Operational Carbon', icon: 'fire', colour: 'green', variable:false },
17+
{ key: 'sci', name: 'SCI', icon: 'leaf', colour: 'green', variable:false },
1818
];
1919

20-
const createCard = ({ key, name, icon, colour }, suffix = '') => {
21-
const cardClass = suffix ? `${key}-${suffix}` : key;
20+
const createCard = ({ key, name, icon, colour, variable }, suffix = '') => {
21+
const cardClass = variable ? `${key}-${suffix}` : key;
2222
return `
2323
<div class="ui ${colour} card ${cardClass}">
2424
<div class="content">
25-
<i class="${icon} icon"></i><b>${name}</b>
25+
<i class="${icon} icon"></i><b class="metric-name">${name}</b>
2626
<div class="right floated meta si-unit"></div>
2727
</div>
2828
<div class="extra content">
@@ -39,11 +39,11 @@ class PhaseMetrics extends HTMLElement {
3939
const buildTab = (tab, active = false) => `
4040
<div class="ui tab ${active ? 'active' : ''}" data-tab="${tab}">
4141
<div class="ui six cards stackable">
42-
${tabCards.map(card => createCard(card, tab)).join('')}
42+
${hardwareCards.map(card => createCard(card, tab)).join('')}
4343
</div>
4444
<h4 class="ui horizontal left aligned divider header">Impact</h4>
4545
<div class="ui six cards stackable">
46-
${extraCards.map(card => createCard(card)).join('')}
46+
${extraCards.map(card => createCard(card, tab)).join('')}
4747
</div>
4848
4949
</div>`;
@@ -293,18 +293,26 @@ const updateKeyMetric = (
293293

294294
let selector = null;
295295

296-
console.log(`Updating key metric for ${metric_name} in phase ${phase} with value ${value} ${unit}`);
296+
//console.log(`Updating key metric for ${metric_name} in phase ${phase} with value ${value} ${unit}`);
297+
298+
// { key: 'runtime', name: 'Phase Duration', icon: 'hourglass half', colour: 'green' },
299+
// { key: 'network-data', name: 'Data Transferred', icon: 'exchange', colour: 'green' },
300+
// { key: 'network', name: 'Network', icon: 'sitemap', colour: 'green' },
301+
// { key: 'embodied-carbon', name: 'Embodied Carbon', icon: 'industry', colour: 'green' },
302+
// { key: 'operational-carbon', name: 'Operational Carbon', icon: 'fire', colour: 'green' },
303+
// { key: 'sci', name: 'SCI', icon: 'leaf', colour: 'green' },
304+
297305

298306
if (phase_time_metric_condition(metric_name)) {
299307
selector = '.runtime';
300-
} else if (sci_metric_condition(metric_name)) {
301-
selector = '.sci';
302-
} else if (network_energy_metric_condition(metric_name)) {
303-
selector = '.network';
304-
} else if (network_carbon_metric_condition(metric_name)) {
305-
selector = '.network-co2';
308+
} else if (network_io_metric_condition(metric_name)) {
309+
selector = '.network-data';
306310
} else if (embodied_carbon_share_metric_condition(metric_name)) {
307311
selector = '.embodied-carbon';
312+
}else if (psu_machine_carbon_metric_condition(metric_name)) {
313+
selector = '.operational-carbon';
314+
} else if (sci_metric_condition(metric_name)) {
315+
selector = '.sci';
308316
} else {
309317
const isPower = metric_name.includes('_power_');
310318
const isEnergy = metric_name.includes('_energy_');
@@ -316,6 +324,7 @@ const updateKeyMetric = (
316324
else if (metric_name.includes('gpu')) component = 'gpu';
317325
else if (metric_name.includes('disk')) component = 'disk';
318326
else if (metric_name.includes('psu') || metric_name.includes('machine')) component = 'machine';
327+
else if (metric_name.includes('network')) component = 'network';
319328

320329
if (component !== null) {
321330
if (isPower) selector = `.${component}-power`;
@@ -325,26 +334,33 @@ const updateKeyMetric = (
325334
}
326335

327336
if (selector === null) {
328-
console.warn(`No matching selector found for metric "${metric_name}"`);
329337
return;
330338
}
331339

332-
const card = document.querySelector(`div.tab[data-tab='${phase}'] ${selector}`);
333-
if (!card) {
340+
const cards = document.querySelectorAll(selector);
341+
342+
if (cards.length === 0) {
334343
console.warn(`No card found for selector "${selector}" in phase "${phase}"`);
335344
return;
336345
}
337346

338-
const valueNode = card.querySelector('.value');
339-
valueNode.innerText = `${value} ${std_dev_text}`;
340-
valueNode.setAttribute('title', `${raw_value} [${raw_unit}]`);
347+
cards.forEach(card => {
348+
const valueNode = card.querySelector('.value');
349+
valueNode.innerText = `${value} ${std_dev_text}`;
350+
valueNode.setAttribute('title', `${raw_value} [${raw_unit}]`);
351+
352+
const unitNode = card.querySelector('.si-unit');
353+
if (unitNode) unitNode.innerText = unit;
354+
355+
const helpNode = card.querySelector('.help');
356+
if (helpNode) helpNode.setAttribute('data-tooltip', explanation || 'No data available');
357+
358+
const metricNameNode = card.querySelector('.metric-name');
359+
if (metricNameNode) metricNameNode.innerText = clean_name || '';
341360

342-
const unitNode = card.querySelector('.si-unit');
343-
if (unitNode) unitNode.innerText = unit;
361+
const sourceNode = card.querySelector('.source');
362+
if (sourceNode) sourceNode.innerText = source || '';
363+
});
344364

345-
const helpNode = card.querySelector('.help');
346-
if (helpNode) helpNode.setAttribute('data-tooltip', explanation || 'No data available');
347365

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

‎lib/phase_stats.py

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -266,6 +266,11 @@ def build_and_store_phase_stats(run_id, sci=None):
266266
network_io_in_kWh = Decimal(sum(network_bytes_total)) / 1_000_000_000 * Decimal(sci['N'])
267267
network_io_in_uJ = network_io_in_kWh * 3_600_000_000_000
268268
csv_buffer.write(generate_csv_line(run_id, 'network_energy_formula_global', '[FORMULA]', f"{idx:03}_{phase['name']}", network_io_in_uJ, 'TOTAL', None, None, None, None, None, 'uJ'))
269+
270+
#power calculations
271+
network_io_power_w = (network_io_in_kWh * Decimal('3600000') / Decimal(duration_in_s) * Decimal('1000'))
272+
csv_buffer.write(generate_csv_line(run_id, 'network_power_formula_global', '[FORMULA]', f"{idx:03}_{phase['name']}", network_io_power_w, 'TOTAL', None, None, None, None, None, 'mW'))
273+
269274
# co2 calculations
270275
network_io_carbon_in_ug = network_io_in_kWh * Decimal(sci['I']) * 1_000_000
271276
if '[' not in phase['name']: # only for runtime sub phases

0 commit comments

Comments
 (0)