Merge branch 'dev' into contTSConvert

Author: WongJonathann

src/components/css/metric.css

@@ -1,10 +1,14 @@
 .legend-container {
   display: flex;
   flex-direction: column;
-  align-items: flex-start;
   width: 170px;
+  align-items: center;
+  margin-top: 5px;
 }
 
+.legend-container p {
+  margin-left: 8px;
+}
 .aggregate-conatiner {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;

src/components/css/styles.css

@@ -10,6 +10,7 @@
 header {
   display: flex;
   justify-content: center;
+  color: #042331;
 }
 
 body {
@@ -19,7 +20,8 @@ body {
 
 i {
   color: rgb(105, 105, 72);
-  transition: 0.3s;
+  transition: 0.7s;
+  margin-right: 8px;
 }
 
 ul {
@@ -60,7 +62,7 @@ h4 {
   padding: 0px 25px 0px 25px;
   min-width: 78vw;
   height: 100%;
-  /* flex-wrap: wrap; */
+  flex-wrap: wrap;
   overflow: scroll;
   border-radius: 0.3rem;
   background: #e1e4e6;
@@ -90,6 +92,10 @@ h4 {
   padding-bottom: 120px;
 }
 
+.container-heading{
+  margin: 10px;
+}
+
 .settings-container.inner-box {
   border-radius: 0.7rem;
 }
@@ -110,6 +116,7 @@ h4 {
 }
 
 .tabTitle {
+  margin: 20px 15px;
   font-weight: bolder;
   font-size: 30px;
 }
@@ -120,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;
 }
 
@@ -155,7 +162,7 @@ h4 {
 
 .box {
   margin-top: 20px;
-  margin-left: 20px;
+  margin-right: 20px;
   min-width: 250px;
   background: white;
   padding-bottom: 10px;
@@ -220,11 +227,13 @@ h4 {
 }
 
 .tab ul li:hover {
-  border-left: #e1e4e6 12px solid;
+  /* border-left: #e1e4e6 5px solid; */
+  
 }
 
 .tab ul li a:hover {
   font-weight: 900;
+  color: #ecfffe;
 }
 
 .tab ul li a:hover i {
@@ -379,12 +388,9 @@ h4 {
 
 .users-container {
   border-radius: 0.5rem;
-  -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3),
-    0 0 40px rgba(0, 0, 0, 0.1) inset;
-  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3),
-    0 0 40px rgba(0, 0, 0, 0.1) inset;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset; 
-  /* overflow: hidden; */
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
+  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
 }
 
 .settings-container {
@@ -394,13 +400,11 @@ h4 {
   flex-direction: column;
   background-color: white;
   margin: 20px 0px 20px 0px;
-  padding: 15px;
-  -webkit-box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3),
-    0 0 40px rgba(0, 0, 0, 0.1) inset;
-  -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3),
-    0 0 40px rgba(0, 0, 0, 0.1) inset;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
+  padding: 30px;
   border-radius: 0.5rem;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
+  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
+  -moz-box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px;
   line-height: 1.5rem;
 }
 
@@ -790,4 +794,9 @@ h4 {
   padding: 1vh 1vw;
   width: 50vw;
   margin: 1vh 1vw 0 0;
+  border-radius: 0.2rem;
+}
+
+.user-table{
+  height: calc(100% - 70px) !important;
 }

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.tsx

@@ -19,38 +19,38 @@ const Metrics = (props: MetricsProps) => {
   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 = {
     labels: [`Available: ${cpuData}%`, `Usage: ${hostStats.cpuPerc}%`],
     datasets: [
       {
         label: 'CPU',
-        backgroundColor: ['rgba(44, 130, 201, 1)', 'rgba(19, 221, 29, 1)'],
+        backgroundColor: ['#4594ce', '#67f267'],
         data: [cpuData, hostStats.cpuPerc],
       },
     ],
-  };
+  }
 
   const memory = {
     labels: [`Available: ${memoryData}%`, `Usage: ${hostStats.memPerc}%`],
     datasets: [
       {
         label: 'Memory',
-        backgroundColor: ['rgba(44, 130, 201, 1)', 'rgba(19, 221, 29, 1)'],
+        backgroundColor: ['#4594ce', '#67f267'],
         data: [memoryData, hostStats.memPerc],
       },
     ],
-  };
+  }
 
   const memOptions = {
     responsive: true,
@@ -72,7 +72,7 @@ const Metrics = (props: MetricsProps) => {
         color: '#fff',
       },
     },
-  };
+  }
 
   const cpuOptions = {
     responsive: true,
@@ -94,15 +94,15 @@ const Metrics = (props: MetricsProps) => {
         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">
@@ -138,7 +138,10 @@ const Metrics = (props: MetricsProps) => {
           <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>
@@ -176,7 +179,7 @@ const Metrics = (props: MetricsProps) => {
         for more information on these metrics
       </p> */}
     </div>
-  );
-};
+  )
+}
 
-export default Metrics;
+export default Metrics

src/components/tabs/ProcessLogs.tsx

@@ -18,35 +18,44 @@ const ProcessLogs = (props: any) => {
         key={index}
         index={index}
         container={container}
-        status='Running'
-      />
-    );
-  });
+        status="Running"
+      />,
+    )
+  })
 
   const renderStoppedList: any[] = [];
   props.stoppedList.map((container: ContainerType, index: number) => {
     renderStoppedList.push(
-      <ProcessLogsCard key={index} index={index} container={container} status='Stopped' />
-    );
-  });
+      <ProcessLogsCard
+        key={index}
+        index={index}
+        container={container}
+        status="Stopped"
+      />,
+    )
+  })
 
   return (
-    <div className='renderContainers'>
-      <div className='header'>
-        <h1 className='tabTitle'>Process Logs</h1>
+    <div className="renderContainers">
+      <div className="header">
+        <h1 className="tabTitle">Process Logs</h1>
       </div>
 
-      <h3>Running Containers: {props.runningList.length}</h3>
+      <h3 className="container-heading">
+        Running Containers: {props.runningList.length}
+      </h3>
 
-      <div className='containers'>{renderRunningList}</div>
+      <div className="containers">{renderRunningList}</div>
 
       <br></br>
 
-      <h3>Stopped Containers: {props.stoppedList.length}</h3>
+      <h3 className="container-heading">
+        Stopped Containers: {props.stoppedList.length}
+      </h3>
 
-      <div className='containers'>{renderStoppedList}</div>
+      <div className="containers">{renderStoppedList}</div>
     </div>
-  );
-};
+  )
+}
 
-export default ProcessLogs;
+export default ProcessLogs

src/components/tabs/Stopped.js

@@ -111,6 +111,7 @@ const UserTable = () => {
           * Double click on the role to access the drop down menu
         </Typography>
         <DataGrid
+          className="user-table"
           sx={{}}
           columns={columns}
           rows={userList}