will fix heading margins in lineChartDisplay and Metrics tabs

Author: GarimaB06

src/components/css/styles.css

@@ -93,7 +93,7 @@ h4 {
 }
 
 .container-heading{
-  margin: 30px;
+  margin: 10px;
 }
 
 .settings-container.inner-box {
@@ -116,7 +116,7 @@ h4 {
 }
 
 .tabTitle {
-  margin: 25px;
+  margin: 50px 15px;
   font-weight: bolder;
   font-size: 30px;
 }
@@ -127,10 +127,10 @@ h4 {
 }
 
 .containers {
-  background-color: #e1e4e6;
-  max-height: 800px;
   display: flex;
   flex-wrap: wrap;
+  background-color: #e1e4e6;
+  max-height: 800px;
   overflow-y: auto;
 }
 
@@ -162,7 +162,7 @@ h4 {
 
 .box {
   margin-top: 20px;
-  margin-left: 20px;
+  margin-right: 20px;
   min-width: 250px;
   background: white;
   padding-bottom: 10px;

src/components/display/LineChartDisplay.js

@@ -550,7 +550,7 @@ const LineChartDisplay = () => {
   return (
     <div>
       <div className="metric-section-title">
-        <h3>Metrics Over Time</h3>
+        <h3 className="container-heading">Metrics Over Time</h3>
       </div>
       <div className="metrics-options-form">
         <form

src/components/tabs/Metrics.js

@@ -1,35 +1,35 @@
 /* eslint-disable no-tabs */
 /* eslint-disable react/prop-types */
-import React from 'react';
-import { convertToMetricsArr } from '../helper/parseContainerFormat';
-import { Chart } from 'react-chartjs-2';
-import LineChartDisplay from '../display/LineChartDisplay';
-import { useSelector } from 'react-redux';
+import React from 'react'
+import { convertToMetricsArr } from '../helper/parseContainerFormat'
+import { Chart } from 'react-chartjs-2'
+import LineChartDisplay from '../display/LineChartDisplay'
+import { useSelector } from 'react-redux'
 
 /**
  * Display general metrics
  *
  * @param {*} props
  */
 const Metrics = (props) => {
-  const hostStats = useSelector((state) => state.containersList.hostStats);
-  const fullRunningList = props.runningList;
+  const hostStats = useSelector((state) => state.containersList.hostStats)
+  const fullRunningList = props.runningList
   // const result = convertToMetricsArr(props.runningList)
-  const result = hostStats;
-  const cpuData = 100 - result.cpuPerc; // .toFixed(2) // 60%
-  const memoryData = 100 - result.memPerc; // .toFixed(2)
-  const cpuThreshold = props.threshold[0];
-  const memThreshold = props.threshold[1];
+  const result = hostStats
+  const cpuData = 100 - result.cpuPerc // .toFixed(2) // 60%
+  const memoryData = 100 - result.memPerc // .toFixed(2)
+  const cpuThreshold = props.threshold[0]
+  const memThreshold = props.threshold[1]
 
-  let cpuFails = 0;
-  let memFails = 0;
+  let cpuFails = 0
+  let memFails = 0
 
   // used to monitor threshold and fail counts
   for (const each of fullRunningList) {
-    const cpu = parseFloat(each['CPUPerc'].replace(/([%])+/g, ''));
-    const memory = parseFloat(each['MemPerc'].replace(/([%])+/g, ''));
-    if (cpu >= cpuThreshold) cpuFails++;
-    if (memory >= memThreshold) memFails++;
+    const cpu = parseFloat(each['CPUPerc'].replace(/([%])+/g, ''))
+    const memory = parseFloat(each['MemPerc'].replace(/([%])+/g, ''))
+    if (cpu >= cpuThreshold) cpuFails++
+    if (memory >= memThreshold) memFails++
   }
 
   const cpu = {
@@ -41,7 +41,7 @@ const Metrics = (props) => {
         data: [cpuData, result.cpuPerc],
       },
     ],
-  };
+  }
 
   const memory = {
     labels: [`Available: ${memoryData}%`, `Usage: ${result.memPerc}%`],
@@ -52,7 +52,7 @@ const Metrics = (props) => {
         data: [memoryData, result.memPerc],
       },
     ],
-  };
+  }
 
   const memOptions = {
     responsive: true,
@@ -63,18 +63,18 @@ const Metrics = (props) => {
       legend: { display: false },
       datalabels: {
         formatter: (value, ctx) => {
-          let sum = 0;
-          const dataArr = ctx.chart.data.datasets[0].data;
+          let sum = 0
+          const dataArr = ctx.chart.data.datasets[0].data
           dataArr.map((data) => {
-            sum += data;
-          });
-          const percentage = (value * 100) / sum + '%';
-          return percentage;
+            sum += data
+          })
+          const percentage = (value * 100) / sum + '%'
+          return percentage
         },
         color: '#fff',
       },
     },
-  };
+  }
 
   const cpuOptions = {
     responsive: true,
@@ -85,26 +85,26 @@ const Metrics = (props) => {
       legend: { display: false },
       datalabels: {
         formatter: (value, ctx) => {
-          let sum = 0;
-          const dataArr = ctx.chart.data.datasets[0].data;
+          let sum = 0
+          const dataArr = ctx.chart.data.datasets[0].data
           dataArr.map((data) => {
-            sum += data;
-          });
-          const percentage = (value * 100) / sum + '%';
-          return percentage;
+            sum += data
+          })
+          const percentage = (value * 100) / sum + '%'
+          return percentage
         },
         color: '#fff',
       },
     },
-  };
+  }
 
   return (
     <div className="renderContainers">
       <div className="header">
         <h1 className="tabTitle">Metrics</h1>
       </div>
       <div className="metric-section-title">
-        <h3>Host Metrics</h3>
+        <h3 className="container-heading">Host Metrics</h3>
       </div>
       <div className="aggregate-conatiner">
         <div className="pieChart">
@@ -123,7 +123,10 @@ const Metrics = (props) => {
             </div>
             <div className="legend-section">
               <div className="usage-box"></div>
-              <p className="legend-text"> Usage {Math.round(result.cpuPerc)}%</p>
+              <p className="legend-text">
+                {' '}
+                Usage {Math.round(result.cpuPerc)}%
+              </p>
             </div>
           </div>
         </div>
@@ -140,11 +143,17 @@ const Metrics = (props) => {
           <div className="legend-container">
             <div className="legend-section">
               <div className="avaliable-box"></div>
-              <p className="legend-text"> Available {Math.round(memoryData)}%</p>
+              <p className="legend-text">
+                {' '}
+                Available {Math.round(memoryData)}%
+              </p>
             </div>
             <div className="legend-section">
               <div className="usage-box"></div>
-              <p className="legend-text"> Usage {Math.round(result.memPerc)}%</p>
+              <p className="legend-text">
+                {' '}
+                Usage {Math.round(result.memPerc)}%
+              </p>
             </div>
           </div>
         </div>
@@ -178,7 +187,7 @@ const Metrics = (props) => {
         for more information on these metrics
       </p> */}
     </div>
-  );
-};
+  )
+}
 
-export default Metrics;
+export default Metrics