Skip to content

Better Key Metrics Display #1096

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

Better Key Metrics Display #1096

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
162 changes: 157 additions & 5 deletions frontend/js/helpers/metric-boxes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ class PhaseMetrics extends HTMLElement {
connectedCallback() {
this.innerHTML = `
<h3 class="ui dividing header print-page-break">Key metrics</h3>
<div class="ui four cards stackable">
<div class="ui six cards stackable">
<div class="ui card phase-duration">
<div class="ui content">
<div class="ui top attached purple label overflow-ellipsis">Phase Duration <span class="si-unit"></span></div>
Expand Down Expand Up @@ -44,16 +44,73 @@ class PhaseMetrics extends HTMLElement {
</div>
</div>
</div>
<div class="ui card machine-energy">
<div class="ui card machine-power">
<div class="ui content">
<div class="ui top attached blue label overflow-ellipsis">Machine Energy <span class="si-unit"></span></div>
<div class="ui top attached orange label overflow-ellipsis">CPU Power <span class="si-unit"></span></div>
<div class="description">
<div class="ui fluid mini statistic">
<div class="value">
<i class="battery three quarters icon"></i> <span>N/A</span>
<i class="power off icon"></i> <span>N/A</span>
</div>
</div>
<div class="ui bottom right attached label icon" data-position="bottom right" data-inverted="" data-tooltip="Energy of all hardware components during current usage phase.">
<div class="ui bottom right attached label icon" data-position="bottom right" data-inverted="" data-tooltip="Power of all hardware components during current usage phase.">
<span class="source"></span>
<i class="question circle icon"></i>
</div>
<div class="ui bottom left attached label">
<span class="metric-type"></span>
</div>
</div>
</div>
</div>
<div class="ui card machine-power">
<div class="ui content">
<div class="ui top attached orange label overflow-ellipsis">DRAM Power <span class="si-unit"></span></div>
<div class="description">
<div class="ui fluid mini statistic">
<div class="value">
<i class="power off icon"></i> <span>N/A</span>
</div>
</div>
<div class="ui bottom right attached label icon" data-position="bottom right" data-inverted="" data-tooltip="Power of all hardware components during current usage phase.">
<span class="source"></span>
<i class="question circle icon"></i>
</div>
<div class="ui bottom left attached label">
<span class="metric-type"></span>
</div>
</div>
</div>
</div>
<div class="ui card machine-power">
<div class="ui content">
<div class="ui top attached orange label overflow-ellipsis">SDD/HDD Power <span class="si-unit"></span></div>
<div class="description">
<div class="ui fluid mini statistic">
<div class="value">
<i class="power off icon"></i> <span>N/A</span>
</div>
</div>
<div class="ui bottom right attached label icon" data-position="bottom right" data-inverted="" data-tooltip="Power of all hardware components during current usage phase.">
<span class="source"></span>
<i class="question circle icon"></i>
</div>
<div class="ui bottom left attached label">
<span class="metric-type"></span>
</div>
</div>
</div>
</div>
<div class="ui card machine-power">
<div class="ui content">
<div class="ui top attached orange label overflow-ellipsis">GPU Power <span class="si-unit"></span></div>
<div class="description">
<div class="ui fluid mini statistic">
<div class="value">
<i class="power off icon"></i> <span>N/A</span>
</div>
</div>
<div class="ui bottom right attached label icon" data-position="bottom right" data-inverted="" data-tooltip="Power of all hardware components during current usage phase.">
<span class="source"></span>
<i class="question circle icon"></i>
</div>
Expand Down Expand Up @@ -82,6 +139,101 @@ class PhaseMetrics extends HTMLElement {
</div>
</div>
</div>
<div class="ui card machine-energy">
<div class="ui content">
<div class="ui top attached blue label overflow-ellipsis">Machine Energy <span class="si-unit"></span></div>
<div class="description">
<div class="ui fluid mini statistic">
<div class="value">
<i class="battery three quarters icon"></i> <span>N/A</span>
</div>
</div>
<div class="ui bottom right attached label icon" data-position="bottom right" data-inverted="" data-tooltip="Energy of all hardware components during current usage phase.">
<span class="source"></span>
<i class="question circle icon"></i>
</div>
<div class="ui bottom left attached label">
<span class="metric-type"></span>
</div>
</div>
</div>
</div>
<div class="ui card machine-energy">
<div class="ui content">
<div class="ui top attached blue label overflow-ellipsis">Machine Energy <span class="si-unit"></span></div>
<div class="description">
<div class="ui fluid mini statistic">
<div class="value">
<i class="battery three quarters icon"></i> <span>N/A</span>
</div>
</div>
<div class="ui bottom right attached label icon" data-position="bottom right" data-inverted="" data-tooltip="Energy of all hardware components during current usage phase.">
<span class="source"></span>
<i class="question circle icon"></i>
</div>
<div class="ui bottom left attached label">
<span class="metric-type"></span>
</div>
</div>
</div>
</div>
<div class="ui card machine-energy">
<div class="ui content">
<div class="ui top attached blue label overflow-ellipsis">Machine Energy <span class="si-unit"></span></div>
<div class="description">
<div class="ui fluid mini statistic">
<div class="value">
<i class="battery three quarters icon"></i> <span>N/A</span>
</div>
</div>
<div class="ui bottom right attached label icon" data-position="bottom right" data-inverted="" data-tooltip="Energy of all hardware components during current usage phase.">
<span class="source"></span>
<i class="question circle icon"></i>
</div>
<div class="ui bottom left attached label">
<span class="metric-type"></span>
</div>
</div>
</div>
</div>
<div class="ui card machine-energy">
<div class="ui content">
<div class="ui top attached blue label overflow-ellipsis">Machine Energy <span class="si-unit"></span></div>
<div class="description">
<div class="ui fluid mini statistic">
<div class="value">
<i class="battery three quarters icon"></i> <span>N/A</span>
</div>
</div>
<div class="ui bottom right attached label icon" data-position="bottom right" data-inverted="" data-tooltip="Energy of all hardware components during current usage phase.">
<span class="source"></span>
<i class="question circle icon"></i>
</div>
<div class="ui bottom left attached label">
<span class="metric-type"></span>
</div>
</div>
</div>
</div>
<div class="ui card machine-energy">
<div class="ui content">
<div class="ui top attached blue label overflow-ellipsis">Machine Energy <span class="si-unit"></span></div>
<div class="description">
<div class="ui fluid mini statistic">
<div class="value">
<i class="battery three quarters icon"></i> <span>N/A</span>
</div>
</div>
<div class="ui bottom right attached label icon" data-position="bottom right" data-inverted="" data-tooltip="Energy of all hardware components during current usage phase.">
<span class="source"></span>
<i class="question circle icon"></i>
</div>
<div class="ui bottom left attached label">
<span class="metric-type"></span>
</div>
</div>
</div>
</div>
<div class="ui card machine-co2">
<div class="ui content">
<div class="ui top black attached label overflow-ellipsis">Machine CO<sub>2</sub> (usage) <span class="si-unit"></span></div>
Expand Down