phc/cluster-dashboard
6
2
Fork 1
Code Issues 6 Pull Requests Packages Projects 1 Releases Wiki Activity

feat: refactor di alcune cose e grafici

Browse Source
This commit is contained in:
aziis98
2023-05-13 00:08:36 +02:00
parent b9073cebbb
commit 6d3b35ee66
8 changed files with 333 additions and 130 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/index.html
+1 -106
View File
@@ -25,111 +25,6 @@
<link rel="stylesheet" href="/styles/main.scss" />
</head>
<body>
<div class="sidebar">
<div class="top">
<div class="logo">
<pre><code>_______________________ _______ _______ _______ _
( ____ \__ __( ____ ( ____ ( ____ ( ____ ( )
| ( \/ ) ( | ( \/ ( \/ ( \/ ( \//
| (_____ | | | (__ | (__ | (__ | (__
(_____ ) | | | __) | __) | __) | __)
) | | | | ( | ( | ( | (
/\____) | | | | (____/\ ) | ) | (____/\
\_______) )_( (_______// |/ (_______/</code></pre>
</div>
<div class="item">
<div class="icon">
<span class="material-symbols-outlined">
dashboard
</span>
</div>
<div class="label">Overview</div>
</div>
<div class="item">
<div class="icon">
<span class="material-symbols-outlined">
device_thermostat
</span>
</div>
<div class="label">Temperature</div>
</div>
<div class="item">
<div class="icon">
<span class="material-symbols-outlined"> speed </span>
</div>
<div class="label">CPU</div>
</div>
<div class="item">
<div class="icon">
<span class="material-symbols-outlined">
swap_vert
</span>
</div>
<div class="label">Network</div>
</div>
<div class="item">
<div class="icon">
<span class="material-symbols-outlined"> memory </span>
</div>
<div class="label">Memory</div>
</div>
<div class="item">
<div class="icon">
<span class="material-symbols-outlined">
database
</span>
</div>
<div class="label">Storage</div>
</div>
<div class="item">
<div class="icon">
<span class="material-symbols-outlined">
view_list
</span>
</div>
<div class="label">Jobs</div>
</div>
</div>
<div class="bottom">
<div class="item">
<div class="icon">
<img src="/public/logo-gitea.svg" alt="logo gitea" />
</div>
<div class="label"><a href="#">Dashboard</a></div>
</div>
<div class="item">
<div class="icon">
<img src="/public/logo-gitea.svg" alt="logo gitea" />
</div>
<div class="label"><a href="#">cpar2023</a></div>
</div>
</div>
</div>
<div class="main">
<div class="card">
<div class="label">Uptime</div>
<div class="graph"></div>
</div>
<div class="card">
<div class="label">CPU</div>
<div class="graph"></div>
</div>
<div class="card">
<div class="label">Storage</div>
<div class="graph"></div>
</div>
<div class="card">
<div class="label">Memory</div>
<div class="graph"></div>
</div>
<div class="card">
<div class="label">Network</div>
<div class="graph"></div>
</div>
<div class="card">
<div class="label">Temperature</div>
<div class="graph"></div>
</div>
</div>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
frontend/src/components/Graph.jsx
+20
View File
@@ -0,0 +1,20 @@
import { useEffect, useState } from 'preact/hooks'
import { Plot } from './Plot.jsx'
import { server } from '../utils.js'
export const GraphCard = ({ label, url }) => {
const [samples, setSamples] = useState([])
useEffect(() => {
if (url) {
server.get(url).then(data => setSamples(data))
}
}, [])
return (
<div class="card">
<div class="label">{label}</div>
<div class="graph">{url && <Plot samples={samples} />}</div>
</div>
)
}
frontend/src/components/Plot.jsx
+79 -9
View File
@@ -1,13 +1,83 @@
import d3 from 'd3'
import * as d3 from 'd3'
import { useEffect, useRef } from 'preact/hooks'
// export const Plot = ({ samples }) => {
// const mountElement = el => {
// d3.select(el).append('svg')
// }
// return <div class="d3-plot" ref={mountElement}></div>
// }
// set the dimensions and margins of the graph
const margin = { top: 10, right: 10, bottom: 30, left: 30 }
export const Plot = ({ samples }) => {
return <div class="d3-plot">Work in progress...</div>
if (samples.length === 0) {
return <>Loading...</>
}
const data = samples.map(({ timestamp, value }) => ({
timestamp: d3.isoParse(timestamp),
value: value,
}))
const plotRef = useRef(null)
useEffect(() => {
if (plotRef.current) {
const el = plotRef.current
const width = el.offsetWidth - margin.left - margin.right
const height = el.offsetHeight - margin.top - margin.bottom
const svg = d3
.select(el)
.append('svg')
.attr('width', el.offsetWidth)
.attr('height', el.offsetHeight)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
const x = d3
.scaleTime()
.domain(
d3.extent(data, function (d) {
return d.timestamp
})
)
.range([0, width])
const y = d3
.scaleLinear()
.domain([
0,
d3.max(data, function (d) {
return +d.value
}),
])
.range([height, 0])
svg.append('g')
.attr('transform', 'translate(0,' + height + ')')
.call(d3.axisBottom(x))
svg.append('g').call(d3.axisLeft(y))
const line = svg.append('g')
line.append('path')
.datum(data)
.attr('fill', 'none')
.attr('stroke', 'steelblue')
.attr('stroke-width', 2)
.attr(
'd',
d3
.line()
.x(d => x(d.timestamp))
.y(d => y(d.value))
)
}
return () => {
if (plotRef.current) {
plotRef.current.firstChild.remove()
}
}
}, [plotRef])
return <div class="d3-plot" ref={plotRef}></div>
}
frontend/src/main.jsx
+1
View File
@@ -7,6 +7,7 @@ import { DashboardPage, JobsPage } from './pages.jsx'
const Redirect = ({ to }) => {
useEffect(() => {
console.log('Redirecting...')
route(to, true)
}, [])
frontend/src/pages.jsx
+95 -1
View File
@@ -1,6 +1,100 @@
import { GraphCard } from './components/Graph.jsx'
const LOGO = String.raw`
_______________________ _______ _______ _______ _
( ____ \__ __( ____ ( ____ ( ____ ( ____ ( )
| ( \/ ) ( | ( \/ ( \/ ( \/ ( \//
| (_____ | | | (__ | (__ | (__ | (__
(_____ ) | | | __) | __) | __) | __)
) | | | | ( | ( | ( | (
/\____) | | | | (____/\ ) | ) | (____/\
\_______) )_( (_______// |/ (_______/
`.trim()
export const DashboardPage = ({}) => {
return <>Dashboard Page</>
return (
<>
<div class="sidebar">
<div class="top">
<div class="logo">
<pre>
<code>{LOGO}</code>
</pre>
</div>
<div class="item">
<div class="icon">
<span class="material-symbols-outlined">dashboard</span>
</div>
<div class="label">Overview</div>
</div>
<div class="item">
<div class="icon">
<span class="material-symbols-outlined">device_thermostat</span>
</div>
<div class="label">Temperature</div>
</div>
<div class="item">
<div class="icon">
<span class="material-symbols-outlined"> speed </span>
</div>
<div class="label">CPU</div>
</div>
<div class="item">
<div class="icon">
<span class="material-symbols-outlined">swap_vert</span>
</div>
<div class="label">Network</div>
</div>
<div class="item">
<div class="icon">
<span class="material-symbols-outlined"> memory </span>
</div>
<div class="label">Memory</div>
</div>
<div class="item">
<div class="icon">
<span class="material-symbols-outlined">database</span>
</div>
<div class="label">Storage</div>
</div>
<div class="item">
<div class="icon">
<span class="material-symbols-outlined">view_list</span>
</div>
<div class="label">Jobs</div>
</div>
</div>
<div class="bottom">
<div class="item link">
<div class="icon">
<img src="/public/logo-gitea.svg" alt="logo gitea" />
</div>
<div class="label">
<a href="https://git.phc.dm.unipi.it/phc/cluster-dashboard">Dashboard</a>
</div>
</div>
<div class="item link">
<div class="icon">
<img src="/public/logo-gitea.svg" alt="logo gitea" />
</div>
<div class="label">
<a href="https://git.phc.dm.unipi.it/fdurastante/cpar2023">cpar2023</a>
</div>
</div>
</div>
</div>
<div class="main">
<GraphCard label="Uptime" />
<GraphCard label="CPU" />
<GraphCard label="Storage" />
<GraphCard label="Memory" />
<GraphCard label="Network" />
<GraphCard label="Temperature" url="/api/stats/temperature" />
</div>
</>
)
}
export const JobsPage = ({}) => {
return <>Jobs Page</>
}
frontend/src/utils.js
+19
View File
@@ -0,0 +1,19 @@
export const server = {
async get(url) {
const res = await fetch(url)
return await res.json()
},
async post(url, data) {
const res = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(data),
})
return await res.json()
},
}
window.server = server
frontend/styles/main.scss
+24 -4
View File
@@ -10,7 +10,7 @@ body {
width: 100%;
min-height: 100vh;
font-family: "Open Sans", "Segoe UI", "Helvetica", "Arial", sans-serif;
font-family: 'Open Sans', 'Segoe UI', 'Helvetica', 'Arial', sans-serif;
font-size: 16px;
color: #284a36;
@@ -57,7 +57,7 @@ body {
padding: 16px;
font-family: "Ubuntu Mono", monospace;
font-family: 'Ubuntu Mono', monospace;
font-weight: 700;
display: grid;
@@ -99,6 +99,22 @@ body {
&:hover {
background-color: #e8ede9;
}
&.link {
padding: 0 16px;
.label {
display: flex;
flex-grow: 1;
a {
display: flex;
flex-grow: 1;
padding: 8px 0;
}
}
}
}
}
}
@@ -128,9 +144,13 @@ body {
}
.graph {
background-color: #f4f5f9;
min-height: 300px;
.d3-plot {
display: flex;
width: 100%;
height: 100%;
}
}
}