Added service property to application/card

timlee12 · timlee12 · commit e599776b4be1 · 2023-02-07T15:47:53.000-08:00
diff --git a/app/components/Occupied.tsx b/app/components/Occupied.tsx
@@ -55,14 +55,14 @@ interface StyleProps {
   
 
 const Occupied = React.memo(() => {
-  const { setServicesData } = useContext(ApplicationContext);
+  const { setServicesData, app, setApp } = useContext(ApplicationContext);
   const { user, applications, getApplications, deleteApp, mode } = useContext(DashboardContext);
   const { commsData } = useContext(CommsContext);
   const [serviceModalOpen, setServiceModalOpen] = useState<boolean>(false);
   const [addModalOpen, setAddModalOpen] = useState<boolean>(false);
   const [personModalOpen, setPersonModalOpen] = useState<boolean>(false);
   const [index, setIndex] = useState<number>(0);
-  const [app, setApp] = useState<string>('');
+  // const [app, setApp] = useState<string>('');
   const [searchTerm, setSearchTerm] = useState<string>('');
   const [clickedAt, setClickedAt] = useState<string>('2000-01-01T00:00:00Z');
     
@@ -84,6 +84,7 @@ const Occupied = React.memo(() => {
   // Handle clicks on Application cards
   const handleClick = (event: ClickEvent, selectedApp: string, i: number) => {
     if (delRef.current[i] && !delRef.current[i].contains(event.target)) {
+      console.log('the application that you clicked is: ', selectedApp)
       setIndex(i);
       setApp(selectedApp);
       setServicesData([]);
@@ -274,7 +275,10 @@ const Occupied = React.memo(() => {
                   key={`card-${i}`}
                   className={classes.paper}
                   variant="outlined"
-                  onClick={event => handleClick(event, application[0], i)}
+                  onClick={event => {
+                    console.log('what are all the applications mapped: ', applications)
+                    handleClick(event, application[0], i)
+                  }}
                 >
                   <div className="databaseIconContainer">
                     <div className="databaseIconHeader">
@@ -308,15 +312,17 @@ const Occupied = React.memo(() => {
                     }
                   />
                   <CardContent>
-                    <p id="databaseName">Database Name:</p>
+                    <p id="databaseName">Name:</p>
                     <Typography className={classes.fontStyles}>{application[0]}</Typography>
+                    <p id="databaseName">Service:</p>
+                    <Typography className={classes.fontStyles}>{application[3]}</Typography>
                   </CardContent>
                   <hr className="cardLine" />
 
                   <div className="cardFooter">
                     <UpdateIcon className="cardFooterIcon" />
                     <em>
-                      <p id="cardFooterText">{application[3]}</p>
+                      <p id="cardFooterText">{application[4]}</p>
                     </em>
                   </div>
                 </Card>
diff --git a/app/components/SignUp.tsx b/app/components/SignUp.tsx
@@ -14,7 +14,7 @@ const SignUp = React.memo(() => {
   return (
     <div className="home">
       <div className="welcome" data-testid="SignUp">
-        <h1 className="welcomeMessage">Welcome Chronos!</h1>
+        <h1 className="welcomeMessage">Welcome to Chronos!</h1>
         <h2>Your all-in-one application monitoring tool.</h2>
 
         <form className="form" onSubmit={handleSubmit}>
diff --git a/app/components/Splash.tsx b/app/components/Splash.tsx
@@ -2,10 +2,10 @@ import React, { useState, useEffect } from 'react';
 import '../stylesheets/Splash.scss';
 
 const Splash: React.FC = React.memo((props) => {
-  const [visible, setVisible] = useState(true);
-  useEffect(() => {
-    setTimeout(() => setVisible(false), 4000);
-  }, []);
+  const [visible, setVisible] = useState(false);
+  // useEffect(() => {
+  //   setTimeout(() => setVisible(false), 4000);
+  // }, []);
 
   return (
     <>
diff --git a/app/components/TransferColumns.tsx b/app/components/TransferColumns.tsx
@@ -149,7 +149,7 @@ const TransferColumns = React.memo(() => {
         temp.push(newCategory);
       }
     }
-    console.log('temp is: ', temp);
+    console.log('temp array with requested graphs is: ', temp);
     setSelectedMetrics(temp);
   };
 
diff --git a/app/containers/DashboardContainer.tsx b/app/containers/DashboardContainer.tsx
@@ -12,10 +12,11 @@ import QueryContextProvider from '../context/QueryContext';
 import '../stylesheets/Dashboard.scss';
 
 const DashboardContainer = React.memo(() => {
-  const [visible, setVisible] = useState(false);
-  useEffect(() => {
-    setTimeout(() => setVisible(true), 4000);
-  }, []);
+  const [visible, setVisible] = useState(true);
+  
+  // useEffect(() => {
+  //   setTimeout(() => setVisible(true), 4000);
+  // }, []);
 
   return (
     <>
diff --git a/app/containers/GraphsContainer.tsx b/app/containers/GraphsContainer.tsx
@@ -73,7 +73,7 @@ const GraphsContainer: React.FC = React.memo(props => {
           if (service.includes('kubernetesmetrics')) {
             fetchEventData('kubernetesmetrics');
           }
-        }, 3000)
+        }, 10000)
       );
     } else {
       if (intervalID) clearInterval(intervalID);
@@ -212,7 +212,12 @@ const GraphsContainer: React.FC = React.memo(props => {
           </div>
         ) : (
           <div className="graphs">
-            {chart === 'all' && <div className="transferColumns"><h2 style={currentMode}>Search Your Metrics to Display</h2><TransferColumns /></div>}
+            {chart === 'all' && 
+              <div className="transferColumns">
+                <h2 style={currentMode}>Search Your Metrics to Display</h2>
+                <TransferColumns />
+              </div>
+            }
             {chart.startsWith('health_') && (
               <HealthContainer
                 colourGenerator={stringToColour}
diff --git a/app/context/ApplicationContext.tsx b/app/context/ApplicationContext.tsx
@@ -44,6 +44,7 @@ const ApplicationContextProvider: React.FC<AppContextProps> = React.memo((props)
     ipcRenderer.on('servicesResponse', (event: Electron.Event, data: any) => {
       let result: any;
       if (tryParseJSON(data)) result = JSON.parse(data);
+      console.log('result from ipcrenderer services response is: ', result);
       setServicesData(result);
       ipcRenderer.removeAllListeners('servicesResponse');
     });
@@ -65,13 +66,14 @@ const ApplicationContextProvider: React.FC<AppContextProps> = React.memo((props)
       data.forEach(el => {
         store[el.metric] = el;
       })
+      console.log('result from getSavedMetrics is: ', store)
       setSavedMetrics(store);
     });
   }, []);
 
   return (
     <ApplicationContext.Provider
-      value={{ connectToDB, fetchServicesNames, setServicesData, servicesData, app, getSavedMetrics, setSavedMetrics, savedMetrics }}
+      value={{ connectToDB, fetchServicesNames, setServicesData, servicesData, app, setApp, getSavedMetrics, setSavedMetrics, savedMetrics }}
     >
       {children}
     </ApplicationContext.Provider>
diff --git a/app/context/CommsContext.tsx b/app/context/CommsContext.tsx
@@ -46,6 +46,7 @@ const CommsContextProvider: React.FC<Props> = React.memo((props) => {
       ipcRenderer.on('commsResponse', (event: Electron.Event, data: any) => {
         let result: any;
         if (tryParseJSON(data)) result = JSON.parse(data);
+        console.log('communication data from fetch request is: ', result);
         setCommsData(result);
       });
     }
diff --git a/app/context/DashboardContext.tsx b/app/context/DashboardContext.tsx
@@ -4,6 +4,7 @@ import React, { useState, createContext, useCallback } from 'react';
 const { ipcRenderer } = window.require('electron');
 
 interface IFields {
+  typeOfService: string;
   database: string;
   URI: string;
   name: string;
@@ -41,12 +42,14 @@ const DashboardContextProvider = React.memo((props: any) => {
   }, []);
 
   const addApp = useCallback((fields: IFields) => {
-    const { database, URI, name, description } = fields;
+    const { typeOfService, database, URI, name, description } = fields;
+    console.log('what is the service that was passed into add app: ', typeOfService)
     const result = ipcRenderer.sendSync(
       'addApp',
-      JSON.stringify([name, database, URI, description])
+      JSON.stringify([name, database, URI, description, typeOfService])
     );
     setApplications(result);
+    console.log('the current application that was added is : ', result)
   }, []);
 
   const deleteApp = useCallback((index: number) => {
diff --git a/app/context/DockerContext.tsx b/app/context/DockerContext.tsx
@@ -39,6 +39,7 @@ const DockerContextProvider: React.FC<Props> = React.memo((props) => {
       let result;
       if (tryParseJSON(data)) result = JSON.parse(data);
       const newDockerData = result[0] || {};
+      console.log(newDockerData);
       setDockerData(newDockerData);
     });
   }, []);
diff --git a/app/context/HealthContext.tsx b/app/context/HealthContext.tsx
@@ -38,6 +38,7 @@ const HealthContextProvider: React.FC<Props> = React.memo(({ children }) => {
     ipcRenderer.removeAllListeners('healthResponse');
 
     let temp: any[] = [];
+    console.log('the cb being passed into fetch health data from graphscontainer is: ', serv);
 
     Promise.all(
       serv.map((service: string) => {
@@ -47,6 +48,7 @@ const HealthContextProvider: React.FC<Props> = React.memo(({ children }) => {
             let result: any[];
             if (JSON.stringify(data) !== '{}' && tryParseJSON(data)) {
               result = JSON.parse(data);
+              console.log('the health results before transformation: ', result)
               if (result && result.length && service === Object.keys(result[0])[0]) {
                 resolve(result[0]);
               }
@@ -58,6 +60,7 @@ const HealthContextProvider: React.FC<Props> = React.memo(({ children }) => {
             setServices(serv);
             let transformedData: any = {};
             transformedData = transformData(temp);
+            console.log('results from fetch health data: ', transformedData);
             setHealthData(transformedData);
           }
         });
diff --git a/app/context/helpers.js b/app/context/helpers.js
@@ -2,8 +2,11 @@
 /* eslint-disable camelcase */
 import { useRef, useEffect } from 'react';
 
+console.log('category list at start is: ', categoryList);
+let categoryList = [];
+
 export function transformData(healthData) {
-  const categoryList = getCategory(healthData[0]);
+  if(!categoryList[0]) categoryList = getCategory(healthData[0]);
   const serviceList = getServices(healthData);
   const categoryList_time = [];
   const categoryList_data = [];
@@ -36,10 +39,14 @@ export function transformData(healthData) {
 
 function getCategory(serviceObj) {
   const set = new Set();
+
+  // serviceObj = healthData state
+  // valueArr = array of current service data values
   const valueArr = Object.values(serviceObj)[0];
 
   for (let i = 0; i < valueArr.length; i++) {
     const row = valueArr[i];
+    console.log(row.category);
     set.add(row.category);
   }
   return [...set];
diff --git a/app/modals/AddModal.tsx b/app/modals/AddModal.tsx
@@ -4,6 +4,7 @@ import { DashboardContext } from '../context/DashboardContext';
 import '../stylesheets/AddModal.scss';
 
 interface IFields {
+  typeOfService: string;
   database: string;
   URI: string;
   name: string;
@@ -25,6 +26,7 @@ const AddModal: React.FC<AddModalProps> = React.memo(({ setOpen }) => {
   const { addApp }: IDashboard = useContext(DashboardContext);
 
   const [fields, setFields] = useState<IFields>({
+    typeOfService: 'AWS',
     database: 'SQL',
     URI: '',
     name: '',
@@ -47,7 +49,7 @@ const AddModal: React.FC<AddModalProps> = React.memo(({ setOpen }) => {
     });
   };
 
-  const { database, URI, name, description } = fields;
+  const { typeOfService, database, URI, name, description } = fields;
 
   return (
     <div className="add-container">
@@ -57,9 +59,21 @@ const AddModal: React.FC<AddModalProps> = React.memo(({ setOpen }) => {
       </div>
       <form onSubmit={handleSubmit}>
         <p>Required*</p>
+        <div>
+          <label htmlFor="serv-type">
+            Type of Service<span>*</span>
+          </label>
+          <select id="serv-type" name="typeOfService" value={typeOfService} onChange={e => handleChange(e)}>
+            <option value="AWS">AWS</option>
+            <option value="Docker">Docker</option>
+            <option value="gRPC">gRPC</option>
+            <option value="Kubernetes">Kubernetes</option>
+            <option value="Microservices">Microservices</option>
+          </select>
+        </div>
         <div>
           <label htmlFor="db-type">
-            Type<span>*</span>
+            Type of Database<span>*</span>
           </label>
           <select id="db-type" name="database" value={database} onChange={e => handleChange(e)}>
             <option value="SQL">SQL</option>
diff --git a/app/stylesheets/AddModal.scss b/app/stylesheets/AddModal.scss
@@ -58,53 +58,60 @@
         @include centerWithFlex($justify: flex-start, $align: flex-start);
       }
 
-      @include centerWithFlex(space-between);
-      width: 100%;
-      margin: 15px 0;
-
-      select,
-      input,
-      textarea {
-        font-family: 'Roboto';
-        font-size: 14px;
-        padding: 5px;
-        border: thin solid $grey;
-        flex: 1;
-        border-radius: 3px;
-        color: $darkgrey;
-      }
 
-      // Select field
-      select {
-        cursor: pointer;
-        font-family: 'Roboto';
-        height: 30px;
-        margin: 0;
-        appearance: none;
-        transition: 0.2s;
-
-        &:hover {
-          background-color: darken(#fff, 5%);
+      .add-fields {
+        display: flex;
+        flex-direction: column;
+
+        @include centerWithFlex(space-between);
+        width: 100%;
+        margin: 15px 0;
+  
+        select,
+        input,
+        textarea {
+          font-family: 'Roboto';
+          font-size: 14px;
+          padding: 5px;
+          border: thin solid $grey;
+          flex: 1;
+          border-radius: 3px;
+          color: $darkgrey;
+        }
+  
+        // Select field
+        select {
+          cursor: pointer;
+          font-family: 'Roboto';
+          height: 30px;
+          margin: 0;
+          appearance: none;
+          transition: 0.2s;
+  
+          &:hover {
+            background-color: darken(#fff, 5%);
+          }
+        }
+  
+        // Text input
+        input {
+          height: 30px;
+          color: $darkgrey;
+        }
+  
+        // Textarea
+        textarea {
+          resize: none;
+          height: 90px;
+        }
+  
+        label {
+          width: 140px;
+          font-size: 135%;
+          font-weight: 400;
         }
       }
 
-      // Text input
-      input {
-        height: 30px;
-        color: $darkgrey;
-      }
-
-      // Textarea
-      textarea {
-        resize: none;
-        height: 90px;
-      }
-
-      label {
-        width: 140px;
-        font-size: 135%;
-        font-weight: 400;
-      }
     }
 
     /* Submit button */
diff --git a/electron/Main.ts b/electron/Main.ts
diff --git a/electron/routes/dashboard.ts b/electron/routes/dashboard.ts

Original file line number	Diff line number	Diff line change
`@@ -149,7 +149,7 @@ const TransferColumns = React.memo(() => {`
`149`	`149`	`temp.push(newCategory);`
`150`	`150`	`}`
`151`	`151`	`}`
`152`		`- console.log('temp is: ', temp);`
	`152`	`+ console.log('temp array with requested graphs is: ', temp);`
`153`	`153`	`setSelectedMetrics(temp);`
`154`	`154`	`};`
`155`	`155`
Original file line number	Diff line number	Diff line change
`@@ -46,6 +46,7 @@ const CommsContextProvider: React.FC<Props> = React.memo((props) => {`
`46`	`46`	`ipcRenderer.on('commsResponse', (event: Electron.Event, data: any) => {`
`47`	`47`	`let result: any;`
`48`	`48`	`if (tryParseJSON(data)) result = JSON.parse(data);`
	`49`	`+ console.log('communication data from fetch request is: ', result);`
`49`	`50`	`setCommsData(result);`
`50`	`51`	`});`
`51`	`52`	`}`