Modifies Memory for correct node order

dashboard/client/components/CPU.jsx

@@ -19,13 +19,12 @@ const CPU = (props) => {
  const [render, setRender] = useState(false);
  if (props.cpu.data) {
  const nodes = props.cpu.data.result;
- // transform data into percentages
  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(
+ dataPoint[`node${j + 1}`] = (parseFloat(nodes[j].values[i][1])*100).toFixed(
  2);
  }
  resultArr.push(dataPoint);

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,30 @@ 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 = [];
+ console.log(clusterInfo.data.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)
@@ -43,7 +48,7 @@ const mainContainer = () => {
  <CPU cpu={cpu} />
  </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} />