mirror of
https://github.com/vale981/ray
synced 2025-03-07 02:51:39 -05:00
[Dashboard] Remove files used by previous dashboard (#7028)
This commit is contained in:
Mitchell Stern
GitHub
parent
1c3d5add31
commit
271de9b04d
3 changed files with 0 additions and 422 deletions
|
|
@ -1,99 +0,0 @@
|
||||||
<!doctype html>
|
|
||||||
|
|
||||||
<html lang="en">
|
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
|
||||||
<title>ray dashboard</title>
|
|
||||||
<meta name="description" content="ray dashboard"</meta>
|
|
||||||
<link rel="stylesheet" href="res/main.css">
|
|
||||||
|
|
||||||
<meta name="referrer" content="same-origin">
|
|
||||||
<!--
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.4/vue.min.js"
|
|
||||||
integrity="sha384-rldcjlIPDkF0mEihgyEOIFhd2NW5YL717okjKC5YF2LrqoiBeMk4tpcgbRrlDHj5"
|
|
||||||
crossorigin="anonymous"></script>
|
|
||||||
-->
|
|
||||||
|
|
||||||
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.4/vue.js"
|
|
||||||
integrity="sha384-94H2I+MU5hfBDUinQG+/Y9JbHALTPlQmHO26R3Jv60MT6WWkOD5hlYNyT9ciiLsR"
|
|
||||||
crossorigin="anonymous"></script>
|
|
||||||
</head>
|
|
||||||
|
|
||||||
<body>
|
|
||||||
<div id="dashboard">
|
|
||||||
<table v-if="clients && !error" class="ray_node_grid">
|
|
||||||
<thead>
|
|
||||||
<tr>
|
|
||||||
<th class="hostname">Hostname</th>
|
|
||||||
<th class="uptime">Uptime</th>
|
|
||||||
<th class="workers">Workers</th>
|
|
||||||
<th class="mem">RAM</th>
|
|
||||||
<th class="storage">Disk</th>
|
|
||||||
<th class="load">Load (1m, 5m, 15m)</th>
|
|
||||||
<th class="netsent">Sent (M/s)</th>
|
|
||||||
<th class="netrecv">Recv (M/s)</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody is="node"
|
|
||||||
v-for="v in clients"
|
|
||||||
:key="v.hostname"
|
|
||||||
:now="now"
|
|
||||||
:hostname="v.hostname"
|
|
||||||
:boot_time="v.boot_time"
|
|
||||||
:n_workers="v.workers.length"
|
|
||||||
:n_cores="v.cpus[0]"
|
|
||||||
:m_avail="v.mem[1]"
|
|
||||||
:m_total="v.mem[0]"
|
|
||||||
:d_avail="v.disk['/'].free"
|
|
||||||
:d_total="v.disk['/'].total"
|
|
||||||
:load="v.load_avg[0]"
|
|
||||||
:n_sent="v.net[0]"
|
|
||||||
:n_recv="v.net[1]"
|
|
||||||
:workers="v.workers"
|
|
||||||
></tbody>
|
|
||||||
<tbody is="node"
|
|
||||||
class="totals"
|
|
||||||
v-if="totals"
|
|
||||||
:now="now"
|
|
||||||
:hostname="Object.keys(clients).length"
|
|
||||||
:boot_time="totals.boot_time"
|
|
||||||
:n_workers="totals.n_workers"
|
|
||||||
:n_cores="totals.n_cores"
|
|
||||||
:m_avail="totals.m_avail"
|
|
||||||
:m_total="totals.m_total"
|
|
||||||
:d_avail="totals.d_avail"
|
|
||||||
:d_total="totals.d_total"
|
|
||||||
:load="totals.load"
|
|
||||||
:n_sent="totals.n_sent"
|
|
||||||
:n_recv="totals.n_recv"
|
|
||||||
:workers="[]"
|
|
||||||
></tbody>
|
|
||||||
</table>
|
|
||||||
|
|
||||||
<template v-if="error">
|
|
||||||
<h2>{{error}}</h2>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<h2 v-if="last_update" :class="outdated_cls">Last updated {{age}} ago</h2>
|
|
||||||
|
|
||||||
<div class="cols">
|
|
||||||
<div class="tasks">
|
|
||||||
<template v-if="tasks && !error">
|
|
||||||
<h2>tasks</h2>
|
|
||||||
<ul>
|
|
||||||
<li v-for="v, k, _ in tasks">{{k}}: {{v}}</li>
|
|
||||||
</ul>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="ray_config">
|
|
||||||
<template v-if="ray_config">
|
|
||||||
<h2>ray config</h2>
|
|
||||||
<pre>{{ray_config}}</pre>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</body>
|
|
||||||
|
|
||||||
<script src="res/main.js"></script>
|
|
||||||
|
|
@ -1,58 +0,0 @@
|
||||||
* { font-family: monospace; margin: 0; padding: 0; }
|
|
||||||
h1, h2 { text-align: center; margin: 1rem 0; }
|
|
||||||
h1 { font-size: 3rem; margin: 0.5rem auto; text-align: center; }
|
|
||||||
h2 { font-size: 2rem; margin: 1rem auto; text-align: center; }
|
|
||||||
div#dashboard {
|
|
||||||
width: 116rem; margin: 1rem auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
table, tbody, thead {
|
|
||||||
width: 100%;
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
tr {
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
tr.workerlist td, tr.workerlist th {
|
|
||||||
font-size: 0.8rem;
|
|
||||||
}
|
|
||||||
tr:hover {
|
|
||||||
filter: brightness(0.85);
|
|
||||||
}
|
|
||||||
td, th {
|
|
||||||
padding: 0.3rem;
|
|
||||||
font-size: 1.4rem;
|
|
||||||
font-family: monospace;
|
|
||||||
text-align: center;
|
|
||||||
background-color: white;
|
|
||||||
}
|
|
||||||
th {
|
|
||||||
background-color: #eeeeee;
|
|
||||||
border: 1px solid black;
|
|
||||||
}
|
|
||||||
|
|
||||||
tbody.totals {
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 1.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
ul { list-style-position: inside; }
|
|
||||||
|
|
||||||
.critical { background-color: magenta; }
|
|
||||||
.bad { background-color: red; }
|
|
||||||
.high { background-color: orange; }
|
|
||||||
.average { background-color: limegreen; }
|
|
||||||
.low { background-color: aquamarine; }
|
|
||||||
|
|
||||||
div.cols {
|
|
||||||
width: 100%;
|
|
||||||
margin: 1rem 0;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
}
|
|
||||||
div.cols div {
|
|
||||||
padding: 1rem 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.outdated { background-color: red; }
|
|
||||||
|
|
@ -1,265 +0,0 @@
|
||||||
let dashboard = new Vue({
|
|
||||||
el: "#dashboard",
|
|
||||||
data: {
|
|
||||||
now: (new Date()).getTime() / 1000,
|
|
||||||
shown: {},
|
|
||||||
error: "loading...",
|
|
||||||
last_update: undefined,
|
|
||||||
clients: undefined,
|
|
||||||
totals: undefined,
|
|
||||||
tasks: undefined,
|
|
||||||
ray_config: undefined,
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
updateNodeInfo: function() {
|
|
||||||
var self = this;
|
|
||||||
fetch("/api/node_info").then(function (resp) {
|
|
||||||
return resp.json();
|
|
||||||
}).then(function(data) {
|
|
||||||
self.error = data.error;
|
|
||||||
if (data.error) {
|
|
||||||
self.clients = undefined;
|
|
||||||
self.tasks = undefined;
|
|
||||||
self.totals = undefined;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
self.last_update = data.timestamp;
|
|
||||||
self.clients = data.result.clients;
|
|
||||||
self.tasks = data.result.tasks;
|
|
||||||
self.totals = data.result.totals;
|
|
||||||
}).catch(function() {
|
|
||||||
self.error = "request error"
|
|
||||||
self.clients = undefined;
|
|
||||||
self.tasks = undefined;
|
|
||||||
self.totals = undefined;
|
|
||||||
}).finally(function() {
|
|
||||||
setTimeout(self.updateNodeInfo, 500);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
updateRayConfig: function() {
|
|
||||||
var self = this;
|
|
||||||
fetch("/api/ray_config").then(function (resp) {
|
|
||||||
return resp.json();
|
|
||||||
}).then(function(data) {
|
|
||||||
if (data.error) {
|
|
||||||
self.ray_config = undefined;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
self.ray_config = data.result;
|
|
||||||
}).catch(function() {
|
|
||||||
self.error = "request error"
|
|
||||||
self.ray_config = undefined;
|
|
||||||
}).finally(function() {
|
|
||||||
setTimeout(self.updateRayConfig, 10000);
|
|
||||||
});
|
|
||||||
},
|
|
||||||
updateAll: function() {
|
|
||||||
this.updateNodeInfo();
|
|
||||||
this.updateRayConfig();
|
|
||||||
},
|
|
||||||
tickClock: function() {
|
|
||||||
this.now = (new Date()).getTime() / 1000;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
outdated_cls: function(ts) {
|
|
||||||
if ((this.now - this.last_update) > 5) {
|
|
||||||
return "outdated";
|
|
||||||
}
|
|
||||||
return "";
|
|
||||||
},
|
|
||||||
age: function(ts) {
|
|
||||||
return (this.now - this.last_update | 0) + "s";
|
|
||||||
},
|
|
||||||
},
|
|
||||||
filters: {
|
|
||||||
si: function(x) {
|
|
||||||
let prefixes = ["B", "K", "M", "G", "T"]
|
|
||||||
let i = 0;
|
|
||||||
while (x > 1024) {
|
|
||||||
x /= 1024;
|
|
||||||
i += 1;
|
|
||||||
}
|
|
||||||
return `${x.toFixed(1)}${prefixes[i]}`;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
Vue.component("worker-usage", {
|
|
||||||
props: ['cores', 'workers'],
|
|
||||||
computed: {
|
|
||||||
frac: function() {
|
|
||||||
return this.workers / this.cores;
|
|
||||||
},
|
|
||||||
cls: function() {
|
|
||||||
if (this.frac > 3) { return "critical"; }
|
|
||||||
if (this.frac > 2) { return "bad"; }
|
|
||||||
if (this.frac > 1.5) { return "high"; }
|
|
||||||
if (this.frac > 1) { return "average"; }
|
|
||||||
return "low";
|
|
||||||
},
|
|
||||||
},
|
|
||||||
template: `
|
|
||||||
<td class="workers" :class="cls">
|
|
||||||
{{workers}}/{{cores}} {{(frac*100).toFixed(0)}}%
|
|
||||||
</td>
|
|
||||||
`,
|
|
||||||
});
|
|
||||||
|
|
||||||
Vue.component("node", {
|
|
||||||
props: [
|
|
||||||
"now",
|
|
||||||
"hostname",
|
|
||||||
"boot_time",
|
|
||||||
"n_workers",
|
|
||||||
"n_cores",
|
|
||||||
"m_avail",
|
|
||||||
"m_total",
|
|
||||||
"d_avail",
|
|
||||||
"d_total",
|
|
||||||
"load",
|
|
||||||
"n_sent",
|
|
||||||
"n_recv",
|
|
||||||
"workers",
|
|
||||||
],
|
|
||||||
data: function() {
|
|
||||||
return {
|
|
||||||
hidden: true,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
age: function() {
|
|
||||||
if (this.boot_time) {
|
|
||||||
let n = this.now;
|
|
||||||
if (this.boot_time > 2840140800) {
|
|
||||||
// Hack. It's a sum of multiple nodes.
|
|
||||||
n *= this.hostname;
|
|
||||||
}
|
|
||||||
let rs = n - this.boot_time | 0;
|
|
||||||
let s = rs % 60;
|
|
||||||
let m = ((rs / 60) % 60) | 0;
|
|
||||||
let h = (rs / 3600) | 0;
|
|
||||||
if (h) {
|
|
||||||
return `${h}h ${m}m ${s}s`;
|
|
||||||
}
|
|
||||||
if (m) {
|
|
||||||
return `${m}m ${s}s`;
|
|
||||||
}
|
|
||||||
return `${s}s`;
|
|
||||||
}
|
|
||||||
return "?"
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
toggleHide: function() {
|
|
||||||
this.hidden = !this.hidden;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
filters: {
|
|
||||||
mib(x) {
|
|
||||||
return `${(x/(1024**2)).toFixed(3)}M`;
|
|
||||||
},
|
|
||||||
hostnamefilter(x) {
|
|
||||||
if (isNaN(x)) {
|
|
||||||
return x;
|
|
||||||
}
|
|
||||||
return `Totals: ${x} nodes`;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
template: `
|
|
||||||
<tbody v-on:click="toggleHide()">
|
|
||||||
<tr class="ray_node">
|
|
||||||
<td class="hostname">{{hostname | hostnamefilter}}</td>
|
|
||||||
<td class="uptime">{{age}}</td>
|
|
||||||
<worker-usage
|
|
||||||
:workers="n_workers"
|
|
||||||
:cores="n_cores"
|
|
||||||
></worker-usage>
|
|
||||||
<usagebar
|
|
||||||
:avail="m_avail" :total="m_total"
|
|
||||||
stat="mem"
|
|
||||||
></usagebar>
|
|
||||||
<usagebar
|
|
||||||
:avail="d_avail" :total="d_total"
|
|
||||||
stat="storage"
|
|
||||||
></usagebar>
|
|
||||||
<loadbar
|
|
||||||
:cores="n_cores"
|
|
||||||
:onem="load[0]"
|
|
||||||
:fivem="load[1]"
|
|
||||||
:fifteenm="load[2]"
|
|
||||||
>
|
|
||||||
</loadbar>
|
|
||||||
<td class="netsent">{{n_sent | mib}}/s</td>
|
|
||||||
<td class="netrecv">{{n_recv | mib}}/s</td>
|
|
||||||
</tr>
|
|
||||||
<template v-if="!hidden && workers">
|
|
||||||
<tr class="workerlist">
|
|
||||||
<th>time</th>
|
|
||||||
<th>name</th>
|
|
||||||
<th>pid</th>
|
|
||||||
<th>uss</th>
|
|
||||||
</tr>
|
|
||||||
<tr class="workerlist" v-for="x in workers">
|
|
||||||
<td>user: {{x.cpu_times.user}}s</td>
|
|
||||||
<td>{{x.name}}</td>
|
|
||||||
<td>{{x.pid}}</td>
|
|
||||||
<td>{{(x.memory_full_info.uss/1048576).toFixed(0)}}MiB</td>
|
|
||||||
</tr>
|
|
||||||
</template>
|
|
||||||
</tbody>
|
|
||||||
`,
|
|
||||||
});
|
|
||||||
|
|
||||||
Vue.component("usagebar", {
|
|
||||||
props: ['stat', 'avail', 'total'], // e.g. free -m avail
|
|
||||||
computed: {
|
|
||||||
used: function() { return this.total - this.avail; },
|
|
||||||
frac: function() { return (this.total - this.avail)/this.total; },
|
|
||||||
cls: function() {
|
|
||||||
if (this.frac > 0.95) { return "critical"; }
|
|
||||||
if (this.frac > 0.9) { return "bad"; }
|
|
||||||
if (this.frac > 0.8) { return "high"; }
|
|
||||||
if (this.frac > 0.5) { return "average"; }
|
|
||||||
return "low";
|
|
||||||
},
|
|
||||||
tcls: function() {
|
|
||||||
return `${this.stat} ${this.cls}`;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
filters: {
|
|
||||||
gib(x) {
|
|
||||||
return `${(x/(1024**3)).toFixed(1)}G`;
|
|
||||||
},
|
|
||||||
pct(x) {
|
|
||||||
return `${(x*100).toFixed(0)}%`;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
template: `
|
|
||||||
<td class="usagebar" :class="tcls">
|
|
||||||
{{used | gib}}/{{total | gib}} {{ frac | pct }}
|
|
||||||
</td>
|
|
||||||
`,
|
|
||||||
});
|
|
||||||
|
|
||||||
Vue.component("loadbar", {
|
|
||||||
props: ['cores', 'onem', 'fivem', 'fifteenm'],
|
|
||||||
computed: {
|
|
||||||
frac: function() { return this.onem/this.cores; },
|
|
||||||
cls: function() {
|
|
||||||
if (this.frac > 3) { return "critical"; }
|
|
||||||
if (this.frac > 2.5) { return "bad"; }
|
|
||||||
if (this.frac > 2) { return "high"; }
|
|
||||||
if (this.frac > 1.5) { return "average"; }
|
|
||||||
return "low";
|
|
||||||
},
|
|
||||||
},
|
|
||||||
template: `
|
|
||||||
<td class="load loadbar" :class="cls">
|
|
||||||
{{onem.toFixed(2)}}, {{fivem.toFixed(2)}}, {{fifteenm.toFixed(2)}}
|
|
||||||
</td>
|
|
||||||
`,
|
|
||||||
});
|
|
||||||
|
|
||||||
setInterval(dashboard.tickClock, 1000);
|
|
||||||
dashboard.updateAll();
|
|
||||||
Loading…
Add table
Reference in a new issue