Skip to content

Commit 7c9f1ea

Browse files
ribalbaribalba
committed
Review comments
1 parent 8914163 commit 7c9f1ea

File tree

3 files changed

+51
-82
lines changed

3 files changed

+51
-82
lines changed

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

Lines changed: 33 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -20,72 +20,80 @@ const TOTAL_CHART_BOTTOM_TITLE = 'Total energy consumption';
2020
const TOTAL_CHART_BOTTOM_LABEL = 'Machine Energy';
2121
// function must return boolean
2222
const total_chart_bottom_condition = (metric) => {
23-
if(metric.match(/^.*_energy.*_machine$/) !== null) return true;
24-
return false;
23+
return metric.match(/^.*_energy.*_machine$/) !== null;
2524
}
2625

2726
// title and filter function for the top left most chart in the Detailed Metrics / Compare view
2827
const TOP_BAR_CHART_TITLE = 'Energy metrics'
2928
const top_bar_chart_condition = (metric) => {
30-
if(metric.indexOf('_energy_') !== -1) return true;
31-
return false;
29+
return metric.indexOf('_energy_') !== -1;
3230
}
3331

3432
// title and filter function for the top right radar chart in the Detailed Metrics / Compare view
3533
const RADAR_CHART_TITLE = 'General component distribution'
3634
const radar_chart_condition = (metric) => {
37-
if(metric.indexOf('cpu_frequency_sysfs_core') == -1) return true;
38-
return false;
35+
return metric.indexOf('cpu_frequency_sysfs_core') == -1;
3936
}
4037

4138
// filter function for the CO₂ calculations in the Detailed Metrics
4239
// please note that this metric must be unique per phase
4340
const phase_time_metric_condition = (metric) => {
44-
if(metric == 'phase_time_syscall_system') return true;
45-
return false;
41+
return metric == 'phase_time_syscall_system';
4642
}
4743

4844
const psu_machine_carbon_metric_condition = (metric) => {
49-
if(metric.match(/^psu_carbon_.*_machine$/) !== null) return true;
50-
return false;
45+
return metric.match(/^psu_carbon_.*_machine$/) !== null;
5146
}
5247

5348
const network_carbon_metric_condition = (metric) => {
54-
if(metric == 'network_carbon_formula_global') return true;
55-
return false;
49+
return metric == 'network_carbon_formula_global';
5650
}
5751

5852
const network_energy_metric_condition = (metric) => {
59-
if(metric == 'network_energy_formula_global') return true;
60-
return false;
53+
return metric == 'network_energy_formula_global';
6154
}
6255

6356
const network_io_metric_condition = (metric) => {
64-
if(metric == 'network_io_cgroup_container') return true;
65-
return false;
57+
return metric == 'network_io_cgroup_container';
6658
}
6759

68-
6960
const machine_power_metric_condition = (metric) => {
70-
if(metric.match(/^.*_power_.*_machine$/) !== null) return true;
71-
return false;
61+
return metric.match(/^.*_power_.*_machine$/) !== null;
7262
}
7363

7464
const machine_energy_metric_condition = (metric) => {
75-
if(metric.match(/^.*_energy_.*_machine$/) !== null) return true;
76-
return false;
65+
return metric.match(/^.*_energy_.*_machine$/) !== null;
7766
}
7867

7968
const sci_metric_condition = (metric) => {
80-
if(metric == 'software_carbon_intensity_global') return true;
81-
return false;
69+
return metric == 'software_carbon_intensity_global';
8270
}
8371

8472
const embodied_carbon_share_metric_condition = (metric) => {
85-
if(metric == 'embodied_carbon_share_machine') return true;
86-
return false;
73+
return metric == 'embodied_carbon_share_machine'
8774
}
8875

76+
/*
77+
Here you can define the ordering of the information cards shown in the detail view
78+
You can also remove some if you want or change the icon. The name will be changed when the values are written
79+
detail name defined in METRIC_MAPPINGS
80+
*/
81+
const HARDWARECARDS = [
82+
{ key: 'cpu', name: 'CPU', icon: 'microchip', variable:true },
83+
{ key: 'gpu', name: 'GPU', icon: 'camera retro', variable:true },
84+
{ key: 'dram', name: 'DRAM', icon: 'memory', variable:true },
85+
{ key: 'disk', name: 'Disk', icon: 'hdd', variable:true },
86+
{ key: 'machine', name: 'Machine', icon: 'server', variable:true },
87+
];
88+
89+
const EXTRACARDS = [
90+
{ key: 'runtime', name: 'Phase Duration', icon: 'hourglass half', variable:false },
91+
{ key: 'network-data', name: 'Data Transferred', icon: 'exchange', variable:false },
92+
{ key: 'network', name: 'Network', icon: 'sitemap', variable:true },
93+
{ key: 'embodied-carbon', name: 'Embodied Carbon', icon: 'industry', variable:false },
94+
{ key: 'sci', name: 'SCI', icon: 'leaf', variable:false },
95+
];
96+
8997
/*
9098
Here you can statically define the badges that shall be shown in the timeline view
9199
although this could also be done dynamically it would be a slightly more heavy lifting for the database and only reflect the latest run.

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

Lines changed: 17 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,18 @@
11
class PhaseMetrics extends HTMLElement {
22
connectedCallback() {
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 },
9-
];
10-
11-
const extraCards = [
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 },
18-
];
19-
20-
const createCard = ({ key, name, icon, colour, variable }, suffix = '') => {
3+
4+
const createCard = ({ key, name, icon, variable }, suffix = '', colour) => {
215
const cardClass = variable ? `${key}-${suffix}` : key;
6+
const colourClass = variable ? colour : 'green';
227
return `
23-
<div class="ui ${colour} card ${cardClass}">
8+
<div class="ui ${colourClass} card ${cardClass}">
249
<div class="content">
25-
<i class="${icon} icon"></i><b class="metric-name">${name}</b>
10+
<i class="${icon} icon"></i><span class="metric-name">${name}</span>
2611
<div class="right floated meta si-unit"></div>
2712
</div>
2813
<div class="extra content">
2914
<div class="description">
30-
<span class="value">N/A</span>
15+
<span class="value bold">N/A</span>
3116
<div class="right floated meta help" data-tooltip="No data available" data-position="bottom right" data-inverted>
3217
<i class="question circle outline icon"></i>
3318
</div>
@@ -36,36 +21,19 @@ class PhaseMetrics extends HTMLElement {
3621
</div>`;
3722
};
3823

39-
const buildTab = (tab, active = false) => `
24+
const buildTab = (tab, active = false, colour='green') => `
4025
<div class="ui tab ${active ? 'active' : ''}" data-tab="${tab}">
41-
<div class="ui six cards stackable">
42-
${hardwareCards.map(card => createCard(card, tab)).join('')}
26+
<div class="ui five cards stackable">
27+
${HARDWARECARDS.map(card => createCard(card, tab, colour)).join('')}
4328
</div>
4429
<h4 class="ui horizontal left aligned divider header">Impact</h4>
45-
<div class="ui six cards stackable">
46-
${extraCards.map(card => createCard(card, tab)).join('')}
30+
<div class="ui five cards stackable">
31+
${EXTRACARDS.map(card => createCard(card, tab, colour)).join('')}
4732
</div>
4833
4934
</div>`;
5035

5136

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-
6937
this.innerHTML = `
7038
<div class="ui segments">
7139
<div class="ui segment">
@@ -75,9 +43,9 @@ class PhaseMetrics extends HTMLElement {
7543
<a class="item" data-tab="co2">CO<sub>2</sub></a>
7644
</div>
7745
<h4 class="ui horizontal left aligned divider header">Hardware</h4>
78-
${buildTab('power', true)}
79-
${buildTab('energy', false)}
80-
${buildTab('co2', false)}
46+
${buildTab('power', true, 'orange')}
47+
${buildTab('energy', false, 'blue')}
48+
${buildTab('co2', false, 'black')}
8149
</div>
8250
</div>
8351
<br>
@@ -293,14 +261,6 @@ const updateKeyMetric = (
293261

294262
let selector = null;
295263

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' },
304264

305265

306266
if (phase_time_metric_condition(metric_name)) {
@@ -310,7 +270,7 @@ const updateKeyMetric = (
310270
} else if (embodied_carbon_share_metric_condition(metric_name)) {
311271
selector = '.embodied-carbon';
312272
}else if (psu_machine_carbon_metric_condition(metric_name)) {
313-
selector = '.operational-carbon';
273+
selector = '.machine-co2';
314274
} else if (sci_metric_condition(metric_name)) {
315275
selector = '.sci';
316276
} else {
@@ -323,7 +283,7 @@ const updateKeyMetric = (
323283
else if (metric_name.includes('memory') || metric_name.includes('dram')) component = 'dram';
324284
else if (metric_name.includes('gpu')) component = 'gpu';
325285
else if (metric_name.includes('disk')) component = 'disk';
326-
else if (metric_name.includes('psu') || metric_name.includes('machine')) component = 'machine';
286+
else if (metric_name.includes('psu') && metric_name.includes('machine')) component = 'machine';
327287
else if (metric_name.includes('network')) component = 'network';
328288

329289
if (component !== null) {
@@ -337,7 +297,7 @@ const updateKeyMetric = (
337297
return;
338298
}
339299

340-
const cards = document.querySelectorAll(selector);
300+
const cards = document.querySelectorAll(`div.tab[data-tab='${phase}'] ${selector}`);
341301

342302
if (cards.length === 0) {
343303
console.warn(`No card found for selector "${selector}" in phase "${phase}"`);

‎tools/import_data.py

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,3 +18,4 @@
1818
data = fp.read()
1919

2020
DB().query(data)
21+
DB().shutdown()

0 commit comments

Comments
 (0)