ourworld_web/www_threefold_io
23
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

get data from all envs

Browse Source
This commit is contained in:
samaradel
2024-01-14 16:04:22 +02:00
parent 97c16ef3a1
commit 5c48165ddb
2 changed files with 121 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

80
static/js/custom.js
View File

@@ -158,5 +158,85 @@ function readingTime() {
times[i].innerText = `${time} minute read`;
}
}
const urls = [
"https://gridproxy.grid.tf/stats?status=up",
"https://gridproxy.dev.grid.tf/stats?status=up",
"https://gridproxy.test.grid.tf/stats?status=up",
"https://gridproxy.grid.tf/stats?status=standby",
"https://gridproxy.dev.grid.tf/stats?status=standby",
"https://gridproxy.test.grid.tf/stats?status=standby",
];
async function getStats() {
try {
const stats = await Promise.all(
urls.map((url) => fetch(url).then((resp) => resp.json()))
);
return mergeStatsData(stats);
} catch (error) {
throw new Error(
`Failed to retrieve data from network statistics: ${error}`
);
}
}
function mergeStatsData(stats) {
const res = stats[0];
for (let i = 1; i < stats.length; i++) {
res.nodes += stats[i].nodes;
res.totalCru += stats[i].totalCru;
res.totalHru += stats[i].totalHru;
res.totalSru += stats[i].totalSru;
res.nodesDistribution = mergeNodeDistribution([
res.nodesDistribution,
stats[i].nodesDistribution,
]);
res.countries = Object.keys(res.nodesDistribution).length;
}
let capacity = toTeraOrGiga(res.totalHru + res.totalSru);
document.getElementById("capacity").innerHTML = capacity;
document.getElementById("nodes").innerHTML = res.nodes;
document.getElementById("countries").innerHTML = res.countries;
document.getElementById("cores").innerHTML = res.totalCru
.toString()
.replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
function mergeNodeDistribution(stats) {
const keys = new Set(stats.map((obj) => Object.keys(obj)).flat());
return Array.from(keys).reduce((res, key) => {
res[key] = 0;
stats.forEach((country) => {
res[key] += country[key] ?? 0;
});
return res;
}, {});
}
function toTeraOrGiga(value) {
const giga = 1024 ** 3;
if (!value) return "0";
const val = +value;
if (val === 0 || isNaN(val)) return "0";
if (val < giga) return val.toString();
let gb = val / giga;
if (gb < 1024) return `${gb.toFixed(2)} GB`;
gb = gb / 1024;
if (gb < 1024) return `${gb.toFixed(2)} TB`;
gb = gb / 1024;
return `${gb.toFixed(2)} PB`;
}
readingTime();
getStats();
document.getElementById("year").innerHTML = new Date().getFullYear();

89
templates/shortcodes/grid_stats.html
View File

@@ -1,70 +1,63 @@
{% set styles = "background-image: url('images/V3.png');" %}
{% set data = load_data(url="https://gridproxy.grid.tf/stats?status=up", required=false, format="json") %}
{% if data %}
{% set capacity = (data.totalHru + data.totalSru) / 1024 / 1024 / 1024 / 1024 / 1024 %}
{% set nodes = data.nodes %}
{% set countries = data.countries %}
{% set cores = data.totalCru %}
{% endif %}
{% if data %}
<section class="px-2 h-auto bg-center lg:py-28 p-12 bg-cover bg-no-repeat" style="{{styles}}">
<div class="relative lg:max-w-6xl mx-auto">
<div class="text-center rounded lg:px-6 mt-10 lg:mt-0 mx-auto">
{{body | markdown | safe }}
<div class="my-10 grid lg:grid-cols-4 lg:gap-8">
<!-- capacity -->
<div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
<img class="mx-auto p-4" src="images/V3-08.png" width="150" alt="">
<div class="leading-none font-extrabold text-3xl">
{{ capacity | round(precision=2) }}PB
<div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
<img
class="mx-auto p-4"
src="images/V3-08.png"
width="150"
alt=""
>
<div id="capacity" class="leading-none font-extrabold text-3xl"></div>
<span class="block text-lg mt-4 font-normal capitalize">capacity</span>
</div>
</div>
<!-- Nodes -->
<div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
<img class="mx-auto p-4" src="images/V3-09.png" width="150" alt="">
<div class="leading-none font-extrabold text-3xl">
{{ nodes }}
<div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
<img
class="mx-auto p-4"
src="images/V3-09.png"
width="150"
alt=""
>
<div id="nodes" class="leading-none font-extrabold text-3xl"></div>
<span class="block text-lg mt-4 font-normal capitalize">nodes</span>
</div>
</div>
<!-- countries -->
<div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
<img class="mx-auto p-4" src="images/V3-10.png" width="150" alt="">
<div class="leading-none font-extrabold text-3xl">
{{ countries }}
<div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
<img
class="mx-auto p-4"
src="images/V3-10.png"
width="150"
alt=""
>
<div id="countries" class="leading-none font-extrabold text-3xl"></div>
<span class="block text-lg mt-4 font-normal capitalize">countries</span>
</div>
</div>
<!-- cores -->
<div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
<img class="mx-auto p-4" src="images/V3-11.png" width="150" alt="">
<div class="leading-none font-extrabold text-3xl">
{{ cores | num_format }}
<span class="block text-lg mt-4 font-normal capitalize">cores</span>
<!-- cores -->
<div class="flex flex-col border border-gray-50 shadow-lg bg-white py-8 my-4">
<img
class="mx-auto p-4"
src="images/V3-11.png"
width="150"
alt=""
>
<div id="cores" class="leading-none font-extrabold text-3xl"></div>
<span class="block text-lg mt-4 font-normal capitalize">cores</span>
</div>
</div>
</div>
<button class="my-8"><a href="https://dashboard.grid.tf/explorer/statistics" target="_blank">Explore
ThreeFold Grid Capacity</a></button>
<button class="my-8">
<a href="https://dashboard.grid.tf/explorer/statistics" target="_blank">
Explore
ThreeFold Grid Capacity
</a>
</button>
</div>
</div>
</section>
{% endif %}
<style>
dd {
display: inline-block;
@@ -80,4 +73,4 @@
.bg-pink {
background-color: #ea1ff7;
}
</style>
</style>