Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

cpu needs update #17

Closed
wants to merge 1 commit into from
Closed

cpu needs update #17

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
142 changes: 80 additions & 62 deletions dashboard/client/components/CPU.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,34 +1,49 @@
import React from 'react';
import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend, ResponsiveContainer } from 'recharts';

import {
LineChart,
Line,
XAxis,
YAxis,
CartesianGrid,
Tooltip,
Legend,
ResponsiveContainer,
} from 'recharts';
import lineColors from '../assets/colors';

const CPU = (props) => {

if (!props.cpu.data) return null;
const nodes = props.cpu.data.result;

const nodes = props.cpu.data.result;
const resultArr = [];
nodes[0].values.forEach((x, i) => {
const dataPoint = {};
let current = new Date(x[0]*1000);
let current = new Date(x[0] * 1000);
dataPoint.time = current.toLocaleString();
for (let j = 0; j < nodes.length; j++) {
for (let j = 0; j < nodes.length; j++) {
dataPoint[`node${j + 1}`] = parseFloat(nodes[j].values[i][1]).toFixed(4);
}
resultArr.push(dataPoint);
});

const lines = [];
const colors = ['red', 'green', 'blue'];
for (let i = 0; i < nodes.length; i++) {
lines.push(<Line type="monotone" dot={false} dataKey={`node${i + 1}`} key={i} stroke={colors[i]} />)
};

lines.push(
<Line
type='monotone'
dot={false}
dataKey={`node${i + 1}`}
key={i}
stroke={lineColors[i]}
/>
);
}

return (
<div>
<h2>CPU Usage</h2>
<ResponsiveContainer>
<LineChart
<LineChart
width={500}
height={300}
data={resultArr}
Expand All @@ -39,63 +54,66 @@ const CPU = (props) => {
bottom: 5,
}}
>
<CartesianGrid strokeDasharray="3 3" />
<XAxis scaleToFit={true} tick={{fontSize: 10}} dataKey="time" ticks={[20, 40, 60, 80, 100]}/>
<CartesianGrid strokeDasharray='3 3' />
<XAxis
scaleToFit={true}
tick={{ fontSize: 10 }}
dataKey='time'
ticks={[20, 40, 60, 80, 100]}
/>
<YAxis />
<Tooltip />
<Legend />
{lines || null}
</LineChart>
</ResponsiveContainer>
</div>

</ResponsiveContainer>
</div>
);
};

export default CPU;


// const data01 = [
// {
// name: 'Page A',
// uv: 4000,
// pv: 2400,
// amt: 2400,
// },
// {
// name: 'Page B',
// uv: 3000,
// pv: 1398,
// amt: 2210,
// },
// {
// name: 'Page C',
// uv: 2000,
// pv: 9800,
// amt: 2290,
// },
// {
// name: 'Page D',
// uv: 2780,
// pv: 3908,
// amt: 2000,
// },
// {
// name: 'Page E',
// uv: 1890,
// pv: 4800,
// amt: 2181,
// },
// {
// name: 'Page F',
// uv: 2390,
// pv: 3800,
// amt: 2500,
// },
// {
// name: 'Page G',
// uv: 3490,
// pv: 4300,
// amt: 2100,
// },
// ];
// const data01 = [
// {
// name: 'Page A',
// uv: 4000,
// pv: 2400,
// amt: 2400,
// },
// {
// name: 'Page B',
// uv: 3000,
// pv: 1398,
// amt: 2210,
// },
// {
// name: 'Page C',
// uv: 2000,
// pv: 9800,
// amt: 2290,
// },
// {
// name: 'Page D',
// uv: 2780,
// pv: 3908,
// amt: 2000,
// },
// {
// name: 'Page E',
// uv: 1890,
// pv: 4800,
// amt: 2181,
// },
// {
// name: 'Page F',
// uv: 2390,
// pv: 3800,
// amt: 2500,
// },
// {
// name: 'Page G',
// uv: 3490,
// pv: 4300,
// amt: 2100,
// },
// ];
69 changes: 5 additions & 64 deletions dashboard/client/components/DiskUsage.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,21 +11,7 @@ import {
Legend,
ResponsiveContainer,
} from 'recharts';
/*
{
time: #
node1: val
node2: val
node3: val
}

{
time: 10am
node1@10am
node2@10am
node3@10am
}
*/

const DiskUsage = (props) => {
const total = props.total.data?.result;
Expand Down Expand Up @@ -62,72 +48,27 @@ const DiskUsage = (props) => {
}
}
// put the node name & it's value in each time object
for (let k = 0; k < data.length; k++) {
for (let k = 0; k < data.length; k++)
{
// (total size - value at each time) / total size
const totalDisk = nodes[nodeName];
const freeDiskSpace = values[k][1];
data[k][nodeName] = (totalDisk - freeDiskSpace) / totalDisk;
data[k][`node${k+1}`] = (totalDisk - freeDiskSpace) / totalDisk;
}
}
}

// create the lines for each node
<Line type='monotone' dataKey='10.142.0.3:9100' stroke='#82ca9d' />;
// <Line type='monotone' dataKey='10.142.0.3:9100' stroke='#82ca9d' />;
// grab the names & the number of nodes from our nodes object
const numNodes = Object.keys(nodes);
const lines = [];
for (let i = 0; i < numNodes.length; i++) {
lines.push(
<Line type='monotone' dataKey={numNodes[i]} stroke={lineColors[i]} />
<Line type='monotone' dataKey={`node${i+1}`} key={i} stroke={lineColors[i]} />
);
}

console.log(data);

// const dataNm = [
// {
// name: 'Page A',
// uv: 4000,
// pv: 2400,
// amt: 2400,
// },
// {
// name: 'Page B',
// uv: 3000,
// pv: 1398,
// amt: 2210,
// },
// {
// name: 'Page C',
// uv: 2000,
// pv: 9800,
// amt: 2290,
// },
// {
// name: 'Page D',
// uv: 2780,
// pv: 3908,
// amt: 2000,
// },
// {
// name: 'Page E',
// uv: 1890,
// pv: 4800,
// amt: 2181,
// },
// {
// name: 'Page F',
// uv: 2390,
// pv: 3800,
// amt: 2500,
// },
// {
// name: 'Page G',
// uv: 3490,
// pv: 4300,
// amt: 2100,
// },
// ];

return (
<div>
Expand Down