this will typescript conversion on front end

Author: WongJonathann

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,23 +1,22 @@
 /* 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 { ContainerProps, hostStats, containersList } from '../../../types';
+import { RootState, AppDispatch } from '../../renderer/store';
 
 /**
  * Display general metrics
  *
  * @param {*} props
  */
-const Metrics = (props) => {
-  const hostStats = useSelector((state) => state.containersList.hostStats);
+const Metrics = (props : any) => {
   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 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];
 
@@ -33,23 +32,23 @@ const Metrics = (props) => {
   }
 
   const cpu = {
-    labels: [`Available: ${cpuData}%`, `Usage: ${result.cpuPerc}%`],
+    labels: [`Available: ${cpuData}%`, `Usage: ${hostStats.cpuPerc}%`],
     datasets: [
       {
         label: 'CPU',
         backgroundColor: ['rgba(44, 130, 201, 1)', 'rgba(19, 221, 29, 1)'],
-        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: ['rgba(44, 130, 201, 1)', 'rgba(19, 221, 29, 1)'],
-        data: [memoryData, result.memPerc],
+        data: [memoryData, hostStats.memPerc],
       },
     ],
   };
@@ -62,10 +61,10 @@ const Metrics = (props) => {
       tooltips: { enabled: true, mode: 'index' },
       legend: { display: false },
       datalabels: {
-        formatter: (value, ctx) => {
+        formatter: (value: number, ctx: any) => {
           let sum = 0;
           const dataArr = ctx.chart.data.datasets[0].data;
-          dataArr.map((data) => {
+          dataArr.map((data: any) => {
             sum += data;
           });
           const percentage = (value * 100) / sum + '%';
@@ -84,10 +83,10 @@ const Metrics = (props) => {
       tooltips: { enabled: false },
       legend: { display: false },
       datalabels: {
-        formatter: (value, ctx) => {
+        formatter: (value: number, ctx: any) => {
           let sum = 0;
           const dataArr = ctx.chart.data.datasets[0].data;
-          dataArr.map((data) => {
+          dataArr.map((data: any) => {
             sum += data;
           });
           const percentage = (value * 100) / sum + '%';
@@ -123,7 +122,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>
@@ -144,7 +143,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 { 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} index={index} container={container} status='Stopped' />
     );

src/components/tabs/Stopped.js

@@ -1,53 +1,53 @@
 /* eslint-disable react/prop-types */
-import React from "react";
+import React from 'react';
 
 /**
  * Display all stopped containers with functionality
  *
  * @param {*} props
  */
-const Stopped = (props) => {
-  const renderStoppedList = props.stoppedList.map((container, i) => {
-    return (
-      <div className="box" key={`stoppedBox${i}`}>
-        <div className="box-label">
-          <h3>{container.Names}</h3>
-          <p>{container.ID}</p>
-        </div>
+// const Stopped = (props) => {
+//   const renderStoppedList = props.stoppedList.map((container, i) => {
+//     return (
+//       <div className="box" key={`stoppedBox${i}`}>
+//         <div className="box-label">
+//           <h3>{container.Names}</h3>
+//           <p>{container.ID}</p>
+//         </div>
 
-        <div className="stopped-info">
-          <li>Img: {container.Image}</li>
-          <li>Created: {container.RunningFor}</li>
-          <li>name: {container.Names}</li>
-        </div>
-        <div className="stopped-button">
-          <button
-            className="run-btn"
-            onClick={() =>
-              props.runStopped(container["ID"], props.runStoppedContainer)
-            }
-          >
-            RUN
-          </button>
-          <button
-            className="stop-btn"
-            onClick={() => props.remove(container["ID"], props.removeContainer)}
-          >
-            REMOVE
-          </button>
-        </div>
-      </div>
-    );
-  });
+//         <div className="stopped-info">
+//           <li>Img: {container.Image}</li>
+//           <li>Created: {container.RunningFor}</li>
+//           <li>name: {container.Names}</li>
+//         </div>
+//         <div className="stopped-button">
+//           <button
+//             className="run-btn"
+//             onClick={() =>
+//               props.runStopped(container["ID"], props.runStoppedContainer)
+//             }
+//           >
+//             RUN
+//           </button>
+//           <button
+//             className="stop-btn"
+//             onClick={() => props.remove(container["ID"], props.removeContainer)}
+//           >
+//             REMOVE
+//           </button>
+//         </div>
+//       </div>
+//     );
+//   });
 
-  return (
-    <div className="renderContainers">
-      <div className="header">
-        <h1 className="tabTitle">Exited Containers</h1>
-      </div>
-      <div className="containers">{renderStoppedList}</div>
-    </div>
-  );
-};
+//   return (
+//     <div className="renderContainers">
+//       <div className="header">
+//         <h1 className="tabTitle">Exited Containers</h1>
+//       </div>
+//       <div className="containers">{renderStoppedList}</div>
+//     </div>
+//   );
+// };
 
-export default Stopped;
+// export default Stopped;

types.ts

@@ -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,6 +41,7 @@ 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[];
   }
 
   // Stopped containers have a Names key and running containers have a Name key
@@ -242,9 +248,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: any,
 }
 
 interface imagesList {