From 271de9b04da7daee7d439cf18eb46814a6b1217a Mon Sep 17 00:00:00 2001 From: Mitchell Stern Date: Mon, 3 Feb 2020 11:51:09 -0800 Subject: [PATCH] [Dashboard] Remove files used by previous dashboard (#7028) --- python/ray/dashboard/index.html | 99 ----------- python/ray/dashboard/res/main.css | 58 ------- python/ray/dashboard/res/main.js | 265 ------------------------------ 3 files changed, 422 deletions(-) delete mode 100644 python/ray/dashboard/index.html delete mode 100644 python/ray/dashboard/res/main.css delete mode 100644 python/ray/dashboard/res/main.js diff --git a/python/ray/dashboard/index.html b/python/ray/dashboard/index.html deleted file mode 100644 index 395dc36ae..000000000 --- a/python/ray/dashboard/index.html +++ /dev/null @@ -1,99 +0,0 @@ - - - - - - ray dashboard - - - - - - - - - - -
- - - - - - - - - - - - - - - -
HostnameUptimeWorkersRAMDiskLoad (1m, 5m, 15m)Sent (M/s)Recv (M/s)
- - - -

Last updated {{age}} ago

- -
-
- -
- -
- -
-
-
- - - diff --git a/python/ray/dashboard/res/main.css b/python/ray/dashboard/res/main.css deleted file mode 100644 index 9b7474ae4..000000000 --- a/python/ray/dashboard/res/main.css +++ /dev/null @@ -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; } diff --git a/python/ray/dashboard/res/main.js b/python/ray/dashboard/res/main.js deleted file mode 100644 index b6d149266..000000000 --- a/python/ray/dashboard/res/main.js +++ /dev/null @@ -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: ` - - {{workers}}/{{cores}} {{(frac*100).toFixed(0)}}% - - `, -}); - -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: ` - - - {{hostname | hostnamefilter}} - {{age}} - - - - - - {{n_sent | mib}}/s - {{n_recv | mib}}/s - - - - `, -}); - -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: ` - - {{used | gib}}/{{total | gib}} {{ frac | pct }} - - `, -}); - -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: ` - - {{onem.toFixed(2)}}, {{fivem.toFixed(2)}}, {{fifteenm.toFixed(2)}} - - `, -}); - -setInterval(dashboard.tickClock, 1000); -dashboard.updateAll();