Merge pull request #37 from oslabs-beta/contTSConvert

Cont ts convert

Author: nathanycho

src/components/tabs/ImagesUser.js renamed to src/components/tabs/ImagesUser.tsx

@@ -1,16 +1,17 @@
 /* eslint-disable react/prop-types */
-import React, { useState } from 'react';
+import React, { useState, MouseEvent } from 'react';
 import * as helper from '../helper/commands';
+import { ImagesProps } from '../../../types';
 
 /**
  * Render Images of the user has
  * 
  * @param {*} props
  */
-const Images = (props) => {
+const Images = (props: ImagesProps) => {
   const [repo, setRepo] = useState('');
 
-  const handleClick = (e) => {
+  const handleClick = (e: MouseEvent) => {
     e.preventDefault();
     helper.pullImage(repo);
   };

src/components/tabs/Metrics.js renamed to src/components/tabs/Metrics.tsx

@@ -1,25 +1,23 @@
 /* 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 { Chart } from 'react-chartjs-2';
+import LineChartDisplay from '../display/LineChartDisplay';
+import { useSelector } from 'react-redux';
+import {  MetricsProps } from '../../../types';
 
 /**
  * Display general metrics
  *
  * @param {*} props
  */
-const Metrics = (props) => {
-  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 Metrics = (props: MetricsProps) => {
+  const fullRunningList = props.runningList;
+  const hostStats = useSelector((state: any) => state.containersList.hostStats);
+  const cpuData = 100 - hostStats.cpuPerc; 
+  const memoryData = 100 - hostStats.memPerc; 
+  const cpuThreshold = props.threshold[0];
+  const memThreshold = props.threshold[1];
 
   let cpuFails = 0
   let memFails = 0
@@ -33,23 +31,23 @@ const Metrics = (props) => {
   }
 
   const cpu = {
-    labels: [`Available: ${cpuData}%`, `Usage: ${result.cpuPerc}%`],
+    labels: [`Available: ${cpuData}%`, `Usage: ${hostStats.cpuPerc}%`],
     datasets: [
       {
         label: 'CPU',
         backgroundColor: ['#4594ce', '#67f267'],
-        data: [cpuData, result.cpuPerc],
+        data: [cpuData, hostStats.cpuPerc],
       },
     ],
   }
 
   const memory = {
-    labels: [`Available: ${memoryData}%`, `Usage: ${result.memPerc}%`],
+    labels: [`Available: ${memoryData}%`, `Usage: ${hostStats.memPerc}%`],
     datasets: [
       {
         label: 'Memory',
         backgroundColor: ['#4594ce', '#67f267'],
-        data: [memoryData, result.memPerc],
+        data: [memoryData, hostStats.memPerc],
       },
     ],
   }
@@ -62,14 +60,14 @@ const Metrics = (props) => {
       tooltips: { enabled: true, mode: 'index' },
       legend: { display: false },
       datalabels: {
-        formatter: (value, ctx) => {
-          let sum = 0
-          const dataArr = ctx.chart.data.datasets[0].data
-          dataArr.map((data) => {
-            sum += data
-          })
-          const percentage = (value * 100) / sum + '%'
-          return percentage
+        formatter: (value: number, ctx: any) => {
+          let sum = 0;
+          const dataArr = ctx.chart.data.datasets[0].data;
+          dataArr.map((data: any) => {
+            sum += data;
+          });
+          const percentage = (value * 100) / sum + '%';
+          return percentage;
         },
         color: '#fff',
       },
@@ -84,14 +82,14 @@ const Metrics = (props) => {
       tooltips: { enabled: false },
       legend: { display: false },
       datalabels: {
-        formatter: (value, ctx) => {
-          let sum = 0
-          const dataArr = ctx.chart.data.datasets[0].data
-          dataArr.map((data) => {
-            sum += data
-          })
-          const percentage = (value * 100) / sum + '%'
-          return percentage
+        formatter: (value: number, ctx: any) => {
+          let sum = 0;
+          const dataArr = ctx.chart.data.datasets[0].data;
+          dataArr.map((data: any) => {
+            sum += data;
+          });
+          const percentage = (value * 100) / sum + '%';
+          return percentage;
         },
         color: '#fff',
       },
@@ -123,10 +121,7 @@ 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(hostStats.cpuPerc)}%</p>
             </div>
           </div>
         </div>
@@ -150,10 +145,7 @@ const Metrics = (props) => {
             </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(hostStats.memPerc)}%</p>
             </div>
           </div>
         </div>

src/components/tabs/ProcessLogs.js renamed to src/components/tabs/ProcessLogs.tsx

@@ -1,16 +1,18 @@
 /* eslint-disable react/prop-types */
-import React from 'react'
-import ProcessLogsCard from '../display/ProcessLogsCard'
+import { AnyAsyncThunk } from '@reduxjs/toolkit/dist/matchers';
+import React from 'react';
+import ProcessLogsCard from '../display/ProcessLogsCard';
+import { ContainerType } from '../../../types';
 
 /**
  * Display all running and stopped containers. Each box can be selected to view process log tables.
  *
  * @param {*} props
  */
 
-const ProcessLogs = (props) => {
-  const renderRunningList = []
-  props.runningList.map((container, index) => {
+const ProcessLogs = (props: any) => {
+  const renderRunningList: any[] = [];
+  props.runningList.map((container: ContainerType, index: number) => {
     renderRunningList.push(
       <ProcessLogsCard
         key={index}
@@ -21,8 +23,8 @@ const ProcessLogs = (props) => {
     )
   })
 
-  const renderStoppedList = []
-  props.stoppedList.map((container, index) => {
+  const renderStoppedList: any[] = [];
+  props.stoppedList.map((container: ContainerType, index: number) => {
     renderStoppedList.push(
       <ProcessLogsCard
         key={index}

src/components/tabs/Stopped.js

@@ -57,6 +57,7 @@ const AdminView = () => {
   const runningList = useSelector((state: StateType) => state.containersList.runningList);
   const stoppedList = useSelector((state: StateType) => state.containersList.stoppedList);
   const imagesList = useSelector((state: StateType) => state.images.imagesList);
+  const { mem_threshold, cpu_threshold } = useSelector((state: StateType) => state.session);
   // const networkList = useSelector((state: StateType) => state.networkList.networkList);
 
   const arrayOfVolumeNames = useSelector(
@@ -249,7 +250,7 @@ const AdminView = () => {
         <Route
           path='/metrics'
           element={
-            <Metrics runningList={runningList} />
+            <Metrics runningList={runningList} threshold={[cpu_threshold, mem_threshold]}/>
           }
         />
         <Route

src/components/views/Admin.tsx

@@ -56,6 +56,7 @@ const UserView = () => {
   const runningList = useSelector((state: StateType) => state.containersList.runningList);
   const stoppedList = useSelector((state: StateType) => state.containersList.stoppedList);
   const imagesList = useSelector((state: StateType) => state.images.imagesList);
+  const { mem_threshold, cpu_threshold } = useSelector((state: StateType) => state.session);
   // const networkList = useSelector((state: StateType) => state.networkList.networkList);
   const arrayOfVolumeNames = useSelector((state: StateType) => state.volumeList.arrayOfVolumeNames);
   const volumeContainersList = useSelector((state: StateType) => state.volumeList.volumeContainersList);
@@ -237,7 +238,7 @@ const UserView = () => {
         <Route
           path='/metrics'
           element={
-            <Metrics runningList={runningList} />
+            <Metrics runningList={runningList} threshold={[cpu_threshold, mem_threshold]}/>
           }
         />
 

src/components/views/UserView.tsx

@@ -25,6 +25,11 @@ export interface RunningListType {
     RunningFor: string,
 }
 
+export interface hostStats {
+  cpuPerc: string,
+  memPerc: string,
+}
+
 // for more info review actions.ts file and Settings.ts
 export type ContainerProps = {
     stoppedList: StoppedListType[];
@@ -36,8 +41,14 @@ export type ContainerProps = {
     stop: (id: string, refreshStoppedContainers: (data: StoppedContainerObj[]) => void) => void;
     runningList: RunningListType[];
     runIm: (id: ContainerType, runningList: RunningListType, callback_1: () => void, callback_2: () => void) => void;
+    hostStats?: hostStats[];
   }
 
+export type MetricsProps = {
+  runningList: any[];
+  threshold: any[];
+}
+
   // Stopped containers have a Names key and running containers have a Name key
   export type ContainerType = {
     Name?: string;
@@ -242,9 +253,10 @@ interface session {
 }
 
 // "any" has been used below since strict typing was used to define these props in the tabs types 
-interface containersList {
+export interface containersList {
   runningList: any[],
-  stoppedList: any[]
+  stoppedList: any[],
+  hostStats: string[],
 }
 
 interface imagesList {