Skip to content

Commit bf10701

Browse files
ArneTRArneTR
committed
New version of website tester
1 parent 9b2c11a commit bf10701

File tree

3 files changed

+238
-216
lines changed

3 files changed

+238
-216
lines changed

‎code.js‎

Lines changed: 48 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -83,92 +83,68 @@ function removeField(button) {
8383
const network_transfer = data?.['data']?.['[RUNTIME]']?.['data']?.['network_total_cgroup_container']?.['data']?.['gmt-playwright-nodejs']?.['data']?.[uuid]?.['mean'];
8484
const network_transfer_kb = network_transfer/1000;
8585

86-
let power_class;
87-
let power_color;
88-
let network_transfer_class;
89-
let network_transfer_color;
90-
91-
const machine_idle_power = 6.6
92-
93-
if (cpu_power_W > machine_idle_power*1.2) {
94-
power_class = 'F';
95-
power_color = 'red'
96-
} else if (cpu_power_W >= machine_idle_power*1.2) {
97-
power_class = 'E';
98-
power_color = 'orange'
99-
} else if (cpu_power_W >= machine_idle_power*1.15) {
100-
power_class = 'D';
101-
power_color = 'yellow'
102-
} else if (cpu_power_W >= machine_idle_power*1.1) {
103-
power_class = 'C';
104-
power_color = 'teal'
105-
} else if (cpu_power_W >= machine_idle_power*1.05) {
106-
power_class = 'B';
107-
power_color = 'olive'
108-
} else if (cpu_power_W > 0 && cpu_power_W < machine_idle_power*1.05) {
109-
power_class = 'A';
110-
power_color = 'green'
86+
let rendering_power_html;
87+
let network_transfer_html;
88+
89+
const cpu_idle_power = 2.45
90+
91+
if (cpu_power_W > cpu_idle_power*2.5) {
92+
rendering_power_html = '<ul class="color-score"><li>A+</li><li>A</li><li>B</li><li>C</li><li>D</li><li>E</li><li class="color-score-current">F</li></ul>';
93+
} else if (cpu_power_W >= cpu_idle_power*2.25) {
94+
rendering_power_html = '<ul class="color-score"><li>A+</li><li>A</li><li>B</li><li>C</li><li>D</li><li class="color-score-current">E</li><li>F</li></ul>';
95+
} else if (cpu_power_W >= cpu_idle_power*2) {
96+
rendering_power_html = '<ul class="color-score"><li>A+</li><li>A</li><li>B</li><li>C</li><li class="color-score-current">D</li><li>E</li><li>F</li></ul>';
97+
} else if (cpu_power_W >= cpu_idle_power*1.75) {
98+
rendering_power_html = '<ul class="color-score"><li>A+</li><li>A</li><li>B</li><li class="color-score-current">C</li><li>D</li><li>E</li><li>F</li></ul>';
99+
} else if (cpu_power_W >= cpu_idle_power*1.5) {
100+
rendering_power_html = '<ul class="color-score"><li>A+</li><li>A</li><li class="color-score-current">B</li><li>C</li><li>D</li><li>E</li><li>F</li></ul>';
101+
} else if (cpu_power_W >= cpu_idle_power*1.25) {
102+
rendering_power_html = '<ul class="color-score"><li>A+</li><li class="color-score-current">A</li><li>B</li><li>C</li><li>D</li><li>E</li><li>F</li></ul>';
103+
} else if (cpu_power_W > 0 && cpu_power_W < cpu_idle_power*1.25) {
104+
rendering_power_html = '<ul class="color-score"><li class="color-score-current">A+</li><li>A</li><li>B</li><li>C</li><li>D</li><li>E</li><li>F</li></ul>';
111105
} else {
112-
power_class = 'N/A';
113-
power_color = 'purple'
106+
console.error('Could not determine rendering power for ', runs_data[idx][7]['__GMT_VAR_PAGE__'], '. Value: ', cpu_power_W);
107+
rendering_power_html = 'N/A';
114108
}
115109

116110
// we mimic the SWD model: https://sustainablewebdesign.org/digital-carbon-ratings
117111
if (network_transfer_kb > 0 && network_transfer_kb < 272.51) {
118-
network_transfer_class = 'A+';
119-
network_transfer_color = 'green'
112+
network_transfer_html = '<ul class="color-score"><li class="color-score-current">A+</li><li>A</li><li>B</li><li>C</li><li>D</li><li>E</li><li>F</li></ul>';
120113
} else if (network_transfer_kb <= 531.15) {
121-
network_transfer_class = 'A';
122-
network_transfer_color = 'green'
114+
network_transfer_html = '<ul class="color-score"><li>A+</li><li class="color-score-current">A</li><li>B</li><li>C</li><li>D</li><li>E</li><li>F</li></ul>';
123115
} else if (network_transfer_kb <= 975.85) {
124-
network_transfer_class = 'B';
125-
network_transfer_color = 'olive'
116+
network_transfer_html = '<ul class="color-score"><li>A+</li><li>A</li><li class="color-score-current">B</li><li>C</li><li>D</li><li>E</li><li>F</li></ul>';
126117
} else if (network_transfer_kb <= 1410.39) {
127-
network_transfer_class = 'C';
128-
network_transfer_color = 'teal'
118+
network_transfer_html = '<ul class="color-score"><li>A+</li><li>A</li><li>B</li><li class="color-score-current">C</li><li>D</li><li>E</li><li>F</li></ul>';
129119
} else if (network_transfer_kb <= 1875.01) {
130-
network_transfer_class = 'D';
131-
network_transfer_color = 'yellow'
120+
network_transfer_html = '<ul class="color-score"><li>A+</li><li>A</li><li>B</li><li>C</li><li class="color-score-current">D</li><li>E</li><li>F</li></ul>';
132121
} else if (network_transfer_kb <= 2419.56) {
133-
network_transfer_class = 'E';
134-
network_transfer_color = 'orange'
122+
network_transfer_html = '<ul class="color-score"><li>A+</li><li>A</li><li>B</li><li>C</li><li>D</li><li class="color-score-current">E</li><li>F</li></ul>';
135123
} else if (network_transfer_kb > 2419.56) {
136-
network_transfer_class = 'F';
137-
network_transfer_color = 'red'
124+
network_transfer_html = '<ul class="color-score"><li>A+</li><li>A</li><li>B</li><li>C</li><li>D</li><li>E</li><li class="color-score-current">F</li></ul>';
138125
} else {
139-
network_transfer_class = 'N/A';
140-
network_transfer_color = 'purple'
126+
console.error('Could not determine network transfer for ', runs_data[idx][7]['__GMT_VAR_PAGE__'], '. Value: ', network_transfer_kb);
127+
network_transfer_html = 'N/A';
141128
}
142129

143-
document.querySelector('#websites').insertAdjacentHTML(
144-
'beforeend',
145-
`<div class="ui yellow segment"><a class="ui label" href="https://metrics.green-coding.io/stats.html?id=${runs_data[idx][0]}">${truncate(runs_data[idx][7]['__GMT_VAR_PAGE__'])} - (${(new Date(runs_data[idx][4])).toLocaleDateString(navigator.language, { year: 'numeric', month: 'short', day: 'numeric' })}) <i class="external alternate icon"></i></a>
146-
<hr>
147-
<div class="badge-container">
148-
<a href="http://metrics.green-coding.io/stats.html?id=${runs_data[idx][0]}" target='_blank' rel='noopener'>
149-
<div class="ui label" style="
150-
display: inline-block;
151-
display: inline-flex;
152-
153-
gap: 16px;
154-
">
155-
<div>
156-
<div class="ui ${power_color} label" style="margin-left: 13px; margin-bottom: 3px;"> ${power_class} </div>
157-
<div>Rendering</div>
158-
</div>
159-
<div>
160-
<div class="ui ${network_transfer_color} label" style="
161-
margin-left: 25px;
162-
margin-bottom: 3px;
163-
"> ${network_transfer_class}
164-
</div>
165-
<div>Network Data</div>
166-
</div>
167-
</div>
168-
</a>
169-
</div>
170-
</div>`,
171-
);
130+
const html_content = `
131+
<tr>
132+
<td class="single line">${truncate(runs_data[idx][7]['__GMT_VAR_PAGE__'])}</td>
133+
<td>${(new Date(runs_data[idx][4])).toLocaleDateString(navigator.language, { year: 'numeric', month: 'short', day: 'numeric' })}</td>
134+
<td class="single line">
135+
${rendering_power_html}
136+
</td>
137+
<td class="single line">
138+
${network_transfer_html}
139+
</td>
140+
<td>
141+
<a href="https://metrics.green-coding.io/timeline.html?uri=https%3A%2F%2Fgithub.com%2Fgreen-coding-solutions%2Fgreen-metrics-tool&amp;branch=main&amp;machine_id=6&amp;filename=templates%2Fwebsite%2Fusage_scenario_cached.yml&amp;metrics=key" class="ui teal horizontal label no-wrap"><i class="ui icon clock"></i>History &nbsp;</a>
142+
</td>
143+
<td>
144+
<a class="ui button" href="https://metrics.green-coding.io/stats.html?id=${runs_data[idx][0]}" target='_blank' rel='noopener'>Details</a>
145+
</td>
146+
</tr>`;
147+
document.querySelector('#websites').insertAdjacentHTML('beforeend', html_content);
172148
});
173149

174150
// Prevent form submission (for demonstration purposes)

0 commit comments

Comments
 (0)