card name css changed

taylrzhang · taylrzhang · commit f39e3232f7aa · 2023-02-07T23:49:06.000-08:00
diff --git a/app/components/Occupied.tsx b/app/components/Occupied.tsx
@@ -19,7 +19,6 @@ import {
   Typography,
 } from '@material-ui/core';
 
-
 import { makeStyles } from '@material-ui/core/styles';
 import { BaseCSSProperties } from '@material-ui/core/styles/withStyles';
 
@@ -32,7 +31,6 @@ import Badge from '@material-ui/core/Badge';
 import PersonIcon from '@material-ui/icons/Person';
 import UpdateIcon from '@material-ui/icons/Update';
 
-
 // // MODALS
 import AddModal from '../modals/AddModal';
 import ProfileContainer from '../containers/ProfileContainer';
@@ -49,38 +47,37 @@ import { CommsContext } from '../context/CommsContext';
 
 // TYPESCRIPT
 interface StyleProps {
-    root: BaseCSSProperties;
-  }
-  type ClickEvent = React.MouseEvent<HTMLElement>;
-  
+  root: BaseCSSProperties;
+}
+type ClickEvent = React.MouseEvent<HTMLElement>;
 
 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');
-    
+
   // Grab services and applications whenever the user changes
   useEffect(() => {
     setServicesData([]);
     getApplications();
-  }, [ user ]);
+  }, [user]);
 
   // Dynamic refs
   const delRef = useRef<any>([]);
-  
+
   // Asks user to confirm deletion
   const confirmDelete = (event: ClickEvent, application: string, i: number) => {
     const message = `The application '${app}' will be permanently deleted. Continue?`;
     if (confirm(message)) deleteApp(i);
   };
-  
+
   // Handle clicks on Application cards
   const handleClick = (event: ClickEvent, selectedApp: string, i: number) => {
     if (delRef.current[i] && !delRef.current[i].contains(event.target)) {
@@ -249,7 +246,11 @@ const Occupied = React.memo(() => {
                   You have {notification ? notification.length : 0} new alerts
                 </span>
                 <NotificationsIcon className="navIcon" id="notificationsIcon" />
-                <Badge overlap="rectangular" badgeContent={notification ? notification.length : 0} color="secondary" />
+                <Badge
+                  overlap="rectangular"
+                  badgeContent={notification ? notification.length : 0}
+                  color="secondary"
+                />
               </div>
               <div className="personIconArea">
                 <Button className="personTooltip" onClick={() => setPersonModalOpen(true)}>
@@ -267,61 +268,66 @@ const Occupied = React.memo(() => {
             </Button>
           </div>
           {applications &&
-            applications.filter((db: any) => db[0].toLowerCase().includes(searchTerm.toLowerCase()))
-            .map((application: string[], i: number | any | string | undefined) => (
-              <div className="card" key={`card-${i}`} id={`card-${application[1]}`}>
-                <Card
-                  key={`card-${i}`}
-                  className={classes.paper}
-                  variant="outlined"
-                  onClick={event => handleClick(event, application[0], i)}
-                >
-                  <div className="databaseIconContainer">
-                    <div className="databaseIconHeader">
-                      {application[1] === 'SQL' ? (
-                        <img className="databaseIcon" alt="SQL" />
-                      ) : (
-                        <img className="databaseIcon" alt="MongoDB" />
-                      )}
+            applications
+              .filter((db: any) => db[0].toLowerCase().includes(searchTerm.toLowerCase()))
+              .map((application: string[], i: number | any | string | undefined) => (
+                <div className="card" key={`card-${i}`} id={`card-${application[1]}`}>
+                  <Card
+                    key={`card-${i}`}
+                    className={classes.paper}
+                    variant="outlined"
+                    onClick={event => handleClick(event, application[0], i)}
+                  >
+                    <div className="databaseIconContainer">
+                      <div className="databaseIconHeader">
+                        {application[1] === 'SQL' ? (
+                          <img className="databaseIcon" alt="SQL" />
+                        ) : (
+                          <img className="databaseIcon" alt="MongoDB" />
+                        )}
+                      </div>
                     </div>
-                  </div>
 
-                  <CardHeader
-                    avatar={
-                      <IconButton
-                        id="iconButton"
-                        ref={element => {
-                          delRef.current[i] = element;
-                        }}
-                        className={classes.iconbutton}
-                        aria-label="Delete"
-                        onClick={event => confirmDelete(event, application[0], i)}
-                      >
-                        <HighlightOffIcon
-                          className={classes.btnStyle}
-                          id="deleteIcon"
+                    <CardHeader
+                      avatar={
+                        <IconButton
+                          id="iconButton"
                           ref={element => {
                             delRef.current[i] = element;
                           }}
-                        />
-                      </IconButton>
-                    }
-                  />
-                  <CardContent>
-                    <p id="databaseName">Database Name:</p>
-                    <Typography className={classes.fontStyles}>{application[0]}</Typography>
-                  </CardContent>
-                  <hr className="cardLine" />
+                          className={classes.iconbutton}
+                          aria-label="Delete"
+                          onClick={event => confirmDelete(event, application[0], i)}
+                        >
+                          <HighlightOffIcon
+                            className={classes.btnStyle}
+                            id="deleteIcon"
+                            ref={element => {
+                              delRef.current[i] = element;
+                            }}
+                          />
+                        </IconButton>
+                      }
+                    />
+                    <CardContent>
+                      {/* <p id="databaseName">Name:</p> */}
+                      <Typography id="databaseName" className={classes.fontStyles}>
+                        {application[0]}
+                      </Typography>
+                      <p id="serviceName">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>
-                    </em>
-                  </div>
-                </Card>
-              </div>
-            ))}
+                    <div className="cardFooter">
+                      <UpdateIcon className="cardFooterIcon" />
+                      <em>
+                        <p id="cardFooterText">{application[4]}</p>
+                      </em>
+                    </div>
+                  </Card>
+                </div>
+              ))}
 
           <Modal open={addModalOpen} onClose={() => setAddModalOpen(false)}>
             <AddModal setOpen={setAddModalOpen} />
diff --git a/app/components/Splash.tsx b/app/components/Splash.tsx
@@ -1,19 +1,19 @@
 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 Splash: React.FC = React.memo(props => {
+  const [visible, setVisible] = useState(false);
+  // useEffect(() => {
+  //   setTimeout(() => setVisible(false), 4000);
+  // }, []);
 
   return (
     <>
-      {visible &&
-          <div id="splash">
+      {visible && (
+        <div id="splash">
           <img id="splashLogo" src="../assets/logo.svg" alt="Chronos" />
         </div>
-      }
+      )}
     </>
   );
 });
diff --git a/app/context/ApplicationContext.tsx b/app/context/ApplicationContext.tsx
@@ -17,7 +17,7 @@ interface AppContextProps {
 
 export const ApplicationContext = React.createContext<any>(null);
 
-const ApplicationContextProvider: React.FC<AppContextProps> = React.memo((props) => {
+const ApplicationContextProvider: React.FC<AppContextProps> = React.memo(props => {
   const children = props.children;
   const [servicesData, setServicesData] = useState([]);
   const [app, setApp] = useState<string>('');
@@ -64,14 +64,24 @@ const ApplicationContextProvider: React.FC<AppContextProps> = React.memo((props)
       const store: object = {};
       data.forEach(el => {
         store[el.metric] = el;
-      })
+      });
       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/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;
@@ -29,9 +30,9 @@ export const DashboardContext = createContext<any>(null);
 
 const DashboardContextProvider = React.memo((props: any) => {
   const children = props.children;
-  
+
   // Initial user will always be the guest
-  const [user, setUser] = useState('guest');  
+  const [user, setUser] = useState('guest');
   const [applications, setApplications] = useState<string[]>([]);
   const [mode, setMode] = useState<string>('light');
 
@@ -41,10 +42,10 @@ const DashboardContextProvider = React.memo((props: any) => {
   }, []);
 
   const addApp = useCallback((fields: IFields) => {
-    const { database, URI, name, description } = fields;
+    const { typeOfService, database, URI, name, description } = fields;
     const result = ipcRenderer.sendSync(
       'addApp',
-      JSON.stringify([name, database, URI, description])
+      JSON.stringify([name, database, URI, description, typeOfService])
     );
     setApplications(result);
   }, []);
diff --git a/app/context/helpers.js b/app/context/helpers.js
@@ -4,6 +4,7 @@ import { useRef, useEffect } from 'react';
 
 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 = [];
@@ -122,7 +123,7 @@ export const useIsMount = () => {
 
 // Keep this in sync with the format in the users.json file for guests
 export const guestUser = {
-  "username": "guest",
-  "services":[],
-  "mode": "light"
+  username: 'guest',
+  services: [],
+  mode: 'light',
 };
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,26 @@ 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/Occupied.scss b/app/stylesheets/Occupied.scss
@@ -531,7 +531,7 @@ select:-webkit-autofill:focus {
   width: 85%;
   border: none;
   height: 1px;
-  margin-top: 59px;
+  margin-top: 20px;
   margin-bottom: 15px;
 }
 
@@ -557,8 +557,13 @@ select:-webkit-autofill:focus {
 }
 
 #databaseName {
-  margin-top: 40px;
+  margin-top: 20px;
   margin-bottom: 0;
   color: $header;
+  font-size: 36px;
+}
+
+#serviceName {
   font-size: 11px;
+  margin-top: 6px;
 }
diff --git a/electron/Main.ts b/electron/Main.ts
@@ -26,6 +26,7 @@ const createWindow = () => {
   if (process.env.NODE_ENV === 'development') {
     // Development: load the application window to the port in the webpack config
     win.loadURL('http://localhost:8081/');
+    win.webContents.openDevTools();
   } else {
     // Production
     win.loadFile(path.resolve(__dirname, '../index.html'));
diff --git a/electron/routes/dashboard.ts b/electron/routes/dashboard.ts
diff --git a/settings.json b/settings.json
