mirror of
https://github.com/vale981/ray
synced 2025-03-06 10:31: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