Skip to content
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

(Frontend): Clearer split between modular frontend and "Runner" #1053

Draft
wants to merge 2 commits into
base: main
Choose a base branch
from
Draft

(Frontend): Clearer split between modular frontend and "Runner" #1053

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
c6a5d9a
(Frontend): Energy-ID is now modular frontend component; Home page dr…
ArneTR Jan 19, 2025
41e1c3b
Added sample display of cards for connected tools [skip ci]
ArneTR Jan 20, 2025
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
4 changes: 2 additions & 2 deletions frontend/ci-index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<link rel="icon" href="/images/favicon-16x16.png" sizes="16x16">
<link rel="icon" href="/images/favicon-32x32.png" sizes="32x32">
<!-- Site Properties -->
<title>Green Metrics Tool</title>
<title>Green Metrics Tool - Eco-CI</title>
<meta name="referrer" content="no-referrer-when-downgrade" />
<meta name="description" content="Measuring the energy of your software" />
<script src="/dist/js/jquery.min.js" defer></script>
Expand All @@ -32,7 +32,7 @@
<div class="main ui container" id="main">
<h1 class="ui header float left">
<a id="menu-toggle" class="opened"><i class="bars bordered inverted left icon openend"></i></a>
CI Projects
Eco-CI Projects
</h1>
<!--
<div class="ui search">
Expand Down
31 changes: 31 additions & 0 deletions frontend/css/green-coding.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,37 @@ Thanks to https://css-tricks.com/transitions-only-after-page-load/ */
-o-transition: none !important;
}

.index-connected-tools {
display: none;
}


a.project-item.wrapped {
border: 10px solid #3d936f;
border-radius: 50%
}

a.project-item>i.icon {
display: block;
color: #f9f9f5;
width: 140px;
height: 140px;
border: 15px solid #f9f9f5;
border-radius: 50%;
font-size: 3.5em!important;
text-align: center;
overflow: hidden;
font-weight: 700;
background: #67a98b;
line-height: 108px;
font-size: 80px;
margin: 0
}

#runs-table, #repositories-table, .energy-id-runs, .energy-id-repositories {
visibility: hidden;
}

.full-width-card {
width: 100% !important;
margin-bottom: 26px !important;
Expand Down
34 changes: 26 additions & 8 deletions frontend/repositories.html → frontend/energy-id.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<link rel="icon" href="/images/favicon-16x16.png" sizes="16x16">
<link rel="icon" href="/images/favicon-32x32.png" sizes="32x32">
<!-- Site Properties -->
<title>Green Metrics Tool</title>
<title>Green Metrics Tool - Energy ID</title>
<meta name="referrer" content="no-referrer-when-downgrade" />
<meta name="description" content="Measuring the energy of your software" />
<script src="/dist/js/jquery.min.js" defer></script>
Expand All @@ -21,7 +21,7 @@
<script src="/js/helpers/config.js" defer></script>
<script src="/js/helpers/main.js" defer></script>
<script src="/js/helpers/runs.js" defer></script>
<script src="/js/repositories.js" defer></script>
<script src="/js/energy-id.js" defer></script>

<link rel="stylesheet" type="text/css" class="ui" href="/dist/css/semantic_reduced.min.css">
<link rel="stylesheet" type="text/css" href="/css/green-coding.css">
Expand All @@ -32,17 +32,33 @@
<div class="main ui container" id="main">
<h1 class="ui header float left">
<a id="menu-toggle" class="opened"><i class="bars bordered inverted left icon openend"></i></a>
Green Metrics Tool - All Repositories
<span>Energy-ID - Last 50 Runs</span>
<button id="home-toggle-button" class="ui button green float-right">Switch to repository view</button>

</h1>
<div class="ui full-width-card segment card">
<div id="energy-id-repositories-description" class="ui full-width-card segment card">
<div class="content">
<div class="header">Repository overview</div>
<div class="description">
<i class="close icon"></i>
<p>The repository page of the Green Metrics Tool shows you all known repositories
<p>The home page of the Green Metrics Tool shows you the last 50 runs
</p>
<p>By clicking on a repository name a drawer will open with all the runs known for that repository.</p>
<p>From there you can go into the details for a specific measurement, or compare them with other runs or even repositories.</p>
<p>From here you can go into the details for a specific measurement, or compare them.</p>
<p>Comparing is possible for different repos, different branches and different runs as long as they are on the same machine. Also different machines are supported if you compare the same repo.
</p>
<p>Currently we do not support comparing different machines AND different repos at the same time. The tool will notifiy you if you attempt to do so :)</p>
</div>
</div>
</div>

<div id="energy-id-runs-description" class="ui full-width-card segment card">
<div class="content">
<div class="header">Last runs</div>
<div class="description">
<i class="close icon"></i>
<p>The home page of the Green Metrics Tool shows you the last 50 runs
</p>
<p>From here you can go into the details for a specific measurement, or compare them.</p>
<p>Comparing is possible for different repos, different branches and different runs as long as they are on the same machine. Also different machines are supported if you compare the same repo.
</p>
<p>Currently we do not support comparing different machines AND different repos at the same time. The tool will notifiy you if you attempt to do so :)</p>
Expand All @@ -57,7 +73,9 @@ <h1 class="ui header float left">
<ul></ul>
</div>

<table id="repositories-table" class="ui celled striped table">
<table id="runs-table" class="ui celled striped table energy-id-runs"></table>

<table id="repositories-table" class="ui celled striped table energy-id-repositories">
<thead>
<tr>
<th>
Expand Down
89 changes: 79 additions & 10 deletions frontend/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
<link rel="icon" href="/images/favicon-16x16.png" sizes="16x16">
<link rel="icon" href="/images/favicon-32x32.png" sizes="32x32">
<!-- Site Properties -->
<title>Green Metrics Tool</title>
<title>Green Metrics Tool - Home</title>
<meta name="referrer" content="no-referrer-when-downgrade" />
<meta name="description" content="Measuring the energy of your software" />
<script src="/dist/js/jquery.min.js" defer></script>
Expand Down Expand Up @@ -39,22 +39,91 @@ <h1 class="ui header float left">
<div class="header">Welcome to the home page</div>
<div class="description">
<i class="close icon"></i>
<p>The home page of the Green Metrics Tool shows you the last 50 runs
<p>The Green Metrics Tool is a modular suite of different tools that capture energy and carbon data for different stages of the software lifecycle.
</p>
<p>From here you can go into the details for a specific measurement, or compare them.</p>
<p>Comparing is possible for different repos, different branches and different runs as long as they are on the same machine. Also different machines are supported if you compare the same repo.
<p>The home page shows you all available and connected tools.</p>
<p>Click on any of them to get to a detailed view of the energy and carbon data.</p>
<p>Through settings you can also adjust the default sorting, default fetching of detailed metrics etc..
</p>
<p>Currently we do not support comparing different machines AND different repos at the same time. The tool will notifiy you if you attempt to do so :)</p>
</div>
</div>
</div>
<div class="ui warning message hidden">
<div class="header">
<i class="notched warning icon"></i> Filters are active
<div class="ui four column stackable grid">
<div class="column energy-id index-connected-tools">
<div class="ui fluid card">
<div class="image" style="background: #3d936f">
<a href="/energy-id.html" class="project-item" style="
/* margin: auto; */
/* margin-left: 50%; */
/* width: 131px !important; */!i;!;
/* display: block; */
"><i class="code huge icon project-item-white" style="
margin: 50px auto;
"></i></a>
</div>
<div class="content">
<a class="header">Energy-ID</a>
<br>Currently 200 measurements<br>dating back to 2021
<br>
<br> Additional Info ... etc.
</div>
</div>
<ul></ul>
</div>
<div class="column eco-ci index-connected-tools">
<div class="ui fluid card">
<div class="image" style="background: #3d936f">
<a href="/energy-id.html" class="project-item" style="
/* margin: auto; */
/* margin-left: 50%; */
/* width: 131px !important; */!i;!;
/* display: block; */
"><i class="leaf huge icon project-item-white" style="
margin: 50px auto;
"></i></a>
</div>
<div class="content">
<a class="header">Eco-CI</a>
<br>Currently 400 pipeline runs - dating back to 2022
</div>
</div>
</div>
<div class="column carbon-db index-connected-tools">
<div class="ui fluid card">
<div class="image" style="background: #3d936f">
<a href="/energy-id.html" class="project-item" style="
/* margin: auto; */
/* margin-left: 50%; */
/* width: 131px !important; */!i;!;
/* display: block; */
"><i class="piggy bank huge icon project-item-white" style="
margin: 50px auto;
"></i></a>
</div>
<div class="content">
<a class="header">CarbonDB</a>
<br>Currently 600 datapoints dating back to 2024
</div>
</div>
</div>
<div class="column power-hog index-connected-tools">
<div class="ui fluid card">
<div class="image" style="background: #3d936f">
<a href="/energy-id.html" class="project-item" style="
/* margin: auto; */
/* margin-left: 50%; */
/* width: 131px !important; */!i;!;
/* display: block; */
"><i class="journal whills huge icon project-item-white" style="
margin: 50px auto;
"></i></a>
</div>
<div class="content">
<a class="header">PowerHOG</a>
<br>Currently 600 app measurements - dating back to 2023
</div>
</div>
</div>
</div>
<table id="runs-table" class="ui celled striped table"></table>
</div>
</body>
</html>
2 changes: 1 addition & 1 deletion frontend/js/ci-index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,5 +107,5 @@ const getCIRunsTable = async (el, url, include_uri=true, include_button=true, se
}

(async () => {
await sortDate();
sortDate();
})();
23 changes: 22 additions & 1 deletion frontend/js/repositories.js → frontend/js/energy-id.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,5 +45,26 @@ async function getRepositories(sort_by = 'date') {
}

(async () => {
await sortDate();
document.querySelector('#home-toggle-button').addEventListener('click', el => {
if (el.currentTarget.innerText == 'Switch to repository view') {
el.currentTarget.innerText = 'Switch to last runs view';
localStorage.setItem('energy_id_data_shown', 'repositories');
window.location.reload();
} else {
el.currentTarget.innerText = 'Switch to repository view';
localStorage.setItem('energy_id_data_shown', 'last_runs');
window.location.reload();
}
});

if (localStorage.getItem('energy_id_data_shown') == 'repositories') {
document.querySelector('#home-toggle-button').innerText = 'Switch to last runs view';
document.querySelectorAll('.energy-id-repositories').forEach(el => el.style.visibility = 'visible');
document.querySelector('#energy-id-runs-description')?.remove();
sortDate();
} else {
document.querySelectorAll('.energy-id-runs').forEach(el => el.style.visibility = 'visible');
document.querySelector('#energy-id-repositories-description')?.remove();
getRunsTable($('#runs-table'), `/v1/runs?${getFilterQueryStringFromURI()}&limit=50`)
}
})();
Loading