Fixes node order on all components

dashboard/client/components/CPU.jsx

@@ -19,13 +19,19 @@ const CPU = (props) => {
  const [render, setRender] = useState(false);
  if (props.cpu.data) {
  const nodes = props.cpu.data.result;
- // transform data into percentages
+ const nodeNums = props.nodeNums;
  nodes[0].values.forEach((x, i) => {
  const dataPoint = {};
  let current = new Date(x[0] * 1000);
  dataPoint.time = current.toLocaleString();
+
  for (let j = 0; j < nodes.length; j++) {
- dataPoint[`node${j + 1}`] = parseFloat(nodes[j].values[i][1]*100).toFixed(
+ // match length of instance to length of ip addresses in node list
+ const len = nodeNums[0].length;
+ const internal_ip = nodes[j].metric.instance.slice(0, len);
+ // find position of node in reference list
+ const position = nodeNums.findIndex((ip) => ip === internal_ip);
+ dataPoint[`node${position + 1}`] = (parseFloat(nodes[j].values[i][1])*100).toFixed(
  2);
  }
  resultArr.push(dataPoint);

dashboard/client/components/ClusterInfo.jsx

@@ -8,7 +8,7 @@ const ClusterInfo = ({ clusterInfo }) => {
 
  // component for each node
  const nodes = [];
- console.log('nodes', nodes);
+ // console.log('nodes', nodes);
  for (let i = 0; i < clusterInfoArr.length; i++) {
  const nodeName = clusterInfoArr[i].metric.node;
  const nodeNumber = 'node' + (i + 1);
@@ -29,7 +29,7 @@ const ClusterInfo = ({ clusterInfo }) => {
  // />
  // );
  }
- console.log('nodes', nodes);
+ // console.log('nodes', nodes);
 
  // const data = React.useMemo(() => {
  // nodes;

dashboard/client/components/DiskUsage.jsx

@@ -22,41 +22,55 @@ const DiskUsage = (props) => {
  if (props.free.data) {
  const total = props.total.data?.result;
  const free = props.free.data?.result;
- const nodes = props.total.data.result;
+ const nodes = {};
+ const nodeNums = props.nodeNums;
  // loop through freediskspace and get the times
 
  // loops through totalDiskSpace query and pushes the name of node and total diskspace of node into an object
  for (let i = 0; i < total.length; i++) {
  // push each node #: diskSpace
- nodes[`node${i + 1}`] = total[i].value[1];
+
+ // match length of instance to length of ip addresses in node list
+ const len = nodeNums[0].length;
+ const internal_ip = total[i].metric.instance.slice(0, len);
+ // // find position of node in reference list
+ const position = nodeNums.findIndex((ip) => ip === internal_ip);
+
+ nodes[`node${position + 1}`] = total[i].value[1];
  }
 
  // loops through FreeDiskSpace and sends time and value @ time to new object
  for (let i = 0; i < free.length; i++) {
- const nodeNum = `node${i + 1}`;
  const values = free[i].values;
+ //find correct nodeNum
+ // match length of instance to length of ip addresses in node list
+ const len = nodeNums[0].length;
+ const internal_ip = free[i].metric.instance.slice(0, len);
+ // // find position of node in reference list
+ const position = nodeNums.findIndex((ip) => ip === internal_ip);
 
  // grab all the times from the first index of the array
  if (i === 0) {
  for (let j = 0; j < values.length; j++) {
- // grab the time: values[j][0] and convert time to human readable format
  const time = new Date(values[j][0] * 1000).toLocaleString();
  data.push({ time: time });
  }
  }
  // put the node # & it's value in each time object
  for (let k = 0; k < data.length; k++) {
  // (total size - value at each time) / total size
- const totalDisk = nodes[nodeNum];
+ const totalDisk = nodes[`node${position + 1}`];
  const freeDiskSpace = values[k][1];
- data[k][nodeNum] = (((totalDisk - freeDiskSpace) / totalDisk)*100).toFixed(2);
+ data[k][`node${position + 1}`] = (((totalDisk - freeDiskSpace) / totalDisk)*100).toFixed(2);
  }
  }
+
  if (render === false) {
  setDiskUsage(data);
  setRender(true);
  }
- for (let i = 0; i < nodes.length; i++) {
+
+ for (let i = 0; i < total.length; i++) {
  lines.push(
  <Line
  type='monotone'

dashboard/client/components/Memory.jsx

@@ -14,18 +14,25 @@ import MemoryTooltip from './MemoryTooltip';
 import colors from '../assets/colors';
 
 
-const Memory = ({ nodeMemory }) => {
+const Memory = ({ nodeMemory, nodeNums }) => {
  // if (!nodeMemory.data) return null;
  const resultArr = [];
  const [result, setResult] = useState([]);
  const [render, setRender] = useState(false);
  if (nodeMemory.data) {
  const nodes = nodeMemory.data.result;
  nodes.forEach((node, i) => {
+ // match length of instance to length of ip addresses in node list
+ const len = nodeNums[0].length;
+ const internal_ip = node.metric.instance.slice(0, len);
+ // find position of node in reference list
+ const position = nodeNums.findIndex((ip) => ip === internal_ip);
  const dataPoint = {};
- dataPoint.node = 'node' + (i + 1);
+
+ dataPoint.node = 'node' + (position + 1);
+ dataPoint.ip = internal_ip;
  dataPoint.percentageMemoryUsed = (parseFloat(node.value[1])*100).toFixed(2);
- resultArr.push(dataPoint);
+ resultArr[position] = dataPoint;
  });
  if (render === false) {
  setResult(resultArr);

dashboard/client/components/TimeSeriesTooltip.js

@@ -5,7 +5,7 @@ const style = {
  backgroundColor: '#1F1B24',
  opacity: '0.9',
  border: 'none',
- borderRadius: '5px', 
+ borderRadius: '5px',
  padding: '5px',
  color: 'darkgray',
  textAlign: 'left',
@@ -16,13 +16,13 @@ const TimeSeriesTooltip = props => {
  const { active, payload, label } = props;
  if (!active || !payload) return null;
 
- const nodeEntries = []; 
+ const nodeEntries = [];
  for (let i = 0; i < payload.length; i++) {
- nodeEntries.push(<p style={{margin: '0px', color: colors[i]}}>
+ nodeEntries.push(<p style={{margin: '0px', color: colors[i]}} key={i}>
  node{i + 1}: {payload[0].payload[`node${i + 1}`]}%
  </p>);
  }
- 
+
  return (
  <div className="custom-tooltip" style={style} >
  <p style={{margin: '0px'}}>

dashboard/client/container/mainContainer.jsx

@@ -13,25 +13,29 @@ const mainContainer = () => {
  const [nodeMemory, setNodeMemory] = useState({});
  const [clusterInfo, setClusterInfo] = useState({});
  const [isLoading, setIsLoading] = useState(true);
-
-
-
- useEffect(() => {
- fetch('/metrics')
- .then((res) => res.json())
- .then((data) => {
- setCPU(data.nodeCPU);
- setTotalDisk(data.totalDisk);
- setFreeDisk(data.freeDisk);
- setNodeMemory(data.nodeMemory);
- console.log(data.clusterInfo)
- setClusterInfo(data.clusterInfo);
- setIsLoading(false);
- console.log(data)
- });
+ const [nodeNums, setNodeNums] = useState([]);
+ const [called, setCalled] = useState(false);
+
+ useEffect(async () => {
+ const response = await fetch('/metrics');
+ const data = await response.json();
+ setCPU(data.nodeCPU);
+ setTotalDisk(data.totalDisk);
+ setFreeDisk(data.freeDisk);
+ setNodeMemory(data.nodeMemory);
+ setClusterInfo(data.clusterInfo);
+ setIsLoading(false);
  }, []);
 
-
+ if (!isLoading && !called) {
+ const result = [];
+ for (let i = 1; i <= clusterInfo.data.result.length; i++){
+ // create nodes 1 through x based on internal Ip addresses
+ result.push(clusterInfo.data.result[i - 1].metric.internal_ip);
+ }
+ setNodeNums(result);
+ setCalled(true);
+ }
 
  return (
  (isLoading)
@@ -40,13 +44,13 @@ const mainContainer = () => {
  :
  <div className='main-container'>
  <div id='CPU' className='components'>
- <CPU cpu={cpu} />
+ <CPU cpu={cpu} nodeNums={nodeNums}/>
  </div>
  <div className='components' id='Memory'>
- <Memory nodeMemory={nodeMemory} />
+ <Memory nodeMemory={nodeMemory} nodeNums={nodeNums} />
  </div>
  <div id='disk-usage' className='components'>
- <DiskUsage total={totalDisk} free={freeDisk} />
+ <DiskUsage total={totalDisk} free={freeDisk} nodeNums={nodeNums} />
  </div>
  <div id='logs' className='components'>
  <ClusterInfo clusterInfo={clusterInfo} />