From 018bc836b36da9839cf23140e4e793c9c7f2418b Mon Sep 17 00:00:00 2001 From: Sofia Date: Tue, 23 Apr 2024 21:18:11 -0500 Subject: [PATCH 001/179] dev env set up --- electron/models/UserModel.ts | 2 +- examples/docker/docker-compose.yml | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/electron/models/UserModel.ts b/electron/models/UserModel.ts index 4564436eb..cccf05a73 100644 --- a/electron/models/UserModel.ts +++ b/electron/models/UserModel.ts @@ -1,5 +1,5 @@ // Insert the MongoDB URI for your private User database in place of the example URI provided below. -const MONGO_URI = 'mongodb://username:password@hostname:port/database'; +const MONGO_URI = 'mongodb+srv://msofiasarhiri:89l3un6TQvGJOGh8@axo-cluster.uazpijv.mongodb.net/'; const mongoose = require('mongoose'); diff --git a/examples/docker/docker-compose.yml b/examples/docker/docker-compose.yml index 8daf938ec..0fc435a00 100644 --- a/examples/docker/docker-compose.yml +++ b/examples/docker/docker-compose.yml @@ -16,7 +16,7 @@ services: container_name: 'client' ports: - - '5000:5000' + - '5001:5001' volumes: - '/var/run/docker.sock:/var/run/docker.sock' @@ -61,10 +61,10 @@ services: volumes: - '/var/run/docker.sock:/var/run/docker.sock' cadvisor: - image: gcr.io/cadvisor/cadvisor:latest + image: gcr.io/cadvisor/cadvisor:v0.47.0 container_name: cadvisor privileged: true - platform: linux/amd64/v8 + platform: linux/arm64/v8 ports: - 8081:8081 command: From 6b0d8bf99ab54e0327c157fd1f6482d0ebdd7017 Mon Sep 17 00:00:00 2001 From: Mike Tagg Date: Thu, 25 Apr 2024 08:09:51 -0700 Subject: [PATCH 002/179] imports for new search bar component added --- app/components/Occupied.tsx | 21 +++++++-------------- 1 file changed, 7 insertions(+), 14 deletions(-) diff --git a/app/components/Occupied.tsx b/app/components/Occupied.tsx index d332322ac..deef57eb9 100644 --- a/app/components/Occupied.tsx +++ b/app/components/Occupied.tsx @@ -48,6 +48,10 @@ import { CommsContext } from '../context/CommsContext'; import { AwsContext } from '../context/AwsContext'; import { useNavigate } from 'react-router-dom'; +//Components + +import SearchBar from './SearchBar'; + // TYPESCRIPT interface StyleProps { root: BaseCSSProperties; @@ -259,20 +263,9 @@ const Occupied = React.memo(() => {
-
e.preventDefault()}> - -
+
From 8f6206f2cfe298671209913f7b6c69a4036bc8d2 Mon Sep 17 00:00:00 2001 From: Mike Tagg Date: Thu, 25 Apr 2024 08:10:01 -0700 Subject: [PATCH 003/179] Modularlized search bar component the search bar in the dashboard component was removed from occupied component and given its own folder with associated styles --- app/components/SearchBar/index.tsx | 24 ++++++++++++++++++++++++ app/components/SearchBar/styles.scss | 23 +++++++++++++++++++++++ 2 files changed, 47 insertions(+) create mode 100644 app/components/SearchBar/index.tsx create mode 100644 app/components/SearchBar/styles.scss diff --git a/app/components/SearchBar/index.tsx b/app/components/SearchBar/index.tsx new file mode 100644 index 000000000..607407aa8 --- /dev/null +++ b/app/components/SearchBar/index.tsx @@ -0,0 +1,24 @@ +import React from "react" +import Search from "../icons/Search" + +const SearchBar = (props) => { + const { setSearchTerm } = props + return ( +
e.preventDefault()}> + +
+ ) +} + +export default SearchBar \ No newline at end of file diff --git a/app/components/SearchBar/styles.scss b/app/components/SearchBar/styles.scss new file mode 100644 index 000000000..76f73da93 --- /dev/null +++ b/app/components/SearchBar/styles.scss @@ -0,0 +1,23 @@ +.form { + height: 30px; + font-weight: 100; + font-size: inherit; + color: inherit; + display: flex; + text-align: center; + vertical-align: middle; + justify-items: center; + align-items: center; +} + +.inputContainer { + position: relative; + display: flex; + flex-direction: column; + + .searchIconSvg { + transform: scale(0.1) translate(758.9px, -720px); + position: absolute; + fill: white; + } +} \ No newline at end of file From 1f6f808ec6a6c8d31e6218ec18732a4e724b603e Mon Sep 17 00:00:00 2001 From: Mike Tagg Date: Thu, 25 Apr 2024 08:43:48 -0700 Subject: [PATCH 004/179] Dashboard icons extracted into seperate component For easier readability and DX the developer icons sections was extracted into its own component and associated style sheet --- app/components/Occupied.tsx | 30 +++++------------------------- 1 file changed, 5 insertions(+), 25 deletions(-) diff --git a/app/components/Occupied.tsx b/app/components/Occupied.tsx index deef57eb9..7bfed7c7a 100644 --- a/app/components/Occupied.tsx +++ b/app/components/Occupied.tsx @@ -51,6 +51,7 @@ import { useNavigate } from 'react-router-dom'; //Components import SearchBar from './SearchBar'; +import DashboardIcons from './DashboardIcons/DashboardIcons'; // TYPESCRIPT interface StyleProps { @@ -261,36 +262,15 @@ const Occupied = React.memo(() => { return (
+
- -
-
- - You have {applications ? applications.length : 0} active databases - - -
-
- - You have {notification ? notification.length : 0} new alerts - - - -
-
- -
-
+
From f85b8db0e884348d97881ac2715b6a45c5101546 Mon Sep 17 00:00:00 2001 From: Mike Tagg Date: Thu, 25 Apr 2024 08:45:39 -0700 Subject: [PATCH 005/179] search bar styles import added --- app/components/SearchBar/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/app/components/SearchBar/index.tsx b/app/components/SearchBar/index.tsx index 607407aa8..27a8d30b3 100644 --- a/app/components/SearchBar/index.tsx +++ b/app/components/SearchBar/index.tsx @@ -1,5 +1,6 @@ import React from "react" import Search from "../icons/Search" +import './styles.scss' const SearchBar = (props) => { const { setSearchTerm } = props From 371b96f9efa9839d503ddb3d315376ce469e7846 Mon Sep 17 00:00:00 2001 From: Mike Tagg Date: Thu, 25 Apr 2024 08:46:04 -0700 Subject: [PATCH 006/179] extracted dashboard icons component --- .../DashboardIcons/DashboardIcons.tsx | 55 +++++++++++++++++++ app/components/DashboardIcons/styles.scss | 30 ++++++++++ 2 files changed, 85 insertions(+) create mode 100644 app/components/DashboardIcons/DashboardIcons.tsx create mode 100644 app/components/DashboardIcons/styles.scss diff --git a/app/components/DashboardIcons/DashboardIcons.tsx b/app/components/DashboardIcons/DashboardIcons.tsx new file mode 100644 index 000000000..aa44d4756 --- /dev/null +++ b/app/components/DashboardIcons/DashboardIcons.tsx @@ -0,0 +1,55 @@ +import { CommsContext } from "../../context/CommsContext" +import { DashboardContext } from "../../context/DashboardContext" +import DashboardIcon from '@material-ui/icons/Dashboard'; +import NotificationsIcon from '@material-ui/icons/Notifications'; +import Badge from '@material-ui/core/Badge'; +import PersonIcon from '@material-ui/icons/Person'; +import { Button } from '@material-ui/core'; +import React, { useContext,useState } from "react" +import './styles.scss' + +const DashboardIcons = (props) => { + + const { setPersonModalOpen } = props + const { applications } = useContext(DashboardContext) + const { commsData } = useContext(CommsContext) + + const [clickedAt, setClickedAt] = useState('2000-01-01T00:00:00Z'); + + const notification = commsData + .filter((item: { responsestatus: number }) => item.responsestatus >= 400) + .filter((item: { time: string }) => { + const d1 = new Date(item.time); + const d2 = new Date(clickedAt); + return d1 > d2; + }); + + return ( +
+
+ + You have {applications ? applications.length : 0} active databases + + +
+
+ + You have {notification ? notification.length : 0} new alerts + + + +
+
+ +
+
+ ) +} + +export default DashboardIcons \ No newline at end of file diff --git a/app/components/DashboardIcons/styles.scss b/app/components/DashboardIcons/styles.scss new file mode 100644 index 000000000..8ff4de7a7 --- /dev/null +++ b/app/components/DashboardIcons/styles.scss @@ -0,0 +1,30 @@ +@import '../../stylesheets/constants.scss'; + +.dashboardIconWrapper { + margin-right: 37px; +} + +.dashboardIconArea { + position: relative; + display: inline-block; +} + +.dashboardIconArea:hover .dashboardTooltip { + visibility: visible; +} + +.dashboardIconArea .dashboardTooltip { + visibility: hidden; + width: 80px; + background-color: $background; + color: $ggreen; + text-align: center; + border-radius: 6px; + // padding: 5px 0; + font-size: 12px; + /* Position the tooltip */ + position: absolute; + z-index: 1; + top: 50px; + right: -14px; +} \ No newline at end of file From f70d764638a5f9bd7f110904c242d150571a753a Mon Sep 17 00:00:00 2001 From: Mike Tagg Date: Thu, 25 Apr 2024 08:46:45 -0700 Subject: [PATCH 007/179] styles moved to repective compoents folders --- app/stylesheets/Occupied.scss | 55 ++--------------------------------- 1 file changed, 3 insertions(+), 52 deletions(-) diff --git a/app/stylesheets/Occupied.scss b/app/stylesheets/Occupied.scss index df08a812f..e934ef2b4 100644 --- a/app/stylesheets/Occupied.scss +++ b/app/stylesheets/Occupied.scss @@ -136,31 +136,6 @@ } } -.dashboardIconArea { - position: relative; - display: inline-block; -} - -.dashboardIconArea:hover .dashboardTooltip { - visibility: visible; -} - -.dashboardIconArea .dashboardTooltip { - visibility: hidden; - width: 80px; - background-color: $background; - color: $ggreen; - text-align: center; - border-radius: 6px; - // padding: 5px 0; - font-size: 12px; - /* Position the tooltip */ - position: absolute; - z-index: 1; - top: 50px; - right: -14px; -} - .dashboardIconArea .dashboardTooltip::after { content: ''; position: absolute; @@ -273,9 +248,9 @@ // border-color: transparent transparent $background transparent; // } -.dashboardIconWrapper { - margin-right: 37px; -} +// .dashboardIconWrapper { +// margin-right: 37px; +// } .btns { display: flex; @@ -313,30 +288,6 @@ button { } } -.form { - height: 30px; - font-weight: 100; - font-size: inherit; - color: inherit; - display: flex; - text-align: center; - vertical-align: middle; - justify-items: center; - align-items: center; -} - -.inputContainer { - position: relative; - display: flex; - flex-direction: column; - - .searchIconSvg { - transform: scale(0.1) translate(758.9px, -720px); - position: absolute; - fill: white; - } -} - #textInput { background-color: transparent; font-family: 'Roboto'; From 548ed0b9f39fb0996a0665d2b0c7680bd7209326 Mon Sep 17 00:00:00 2001 From: Mike Tagg Date: Thu, 25 Apr 2024 09:54:53 -0700 Subject: [PATCH 008/179] Applications card extracted into separate component Done to facilitate readablity and DX Styles also moved to ApplicationsCard component folder --- app/components/Occupied.tsx | 182 ++++++------------------------------ 1 file changed, 30 insertions(+), 152 deletions(-) diff --git a/app/components/Occupied.tsx b/app/components/Occupied.tsx index 7bfed7c7a..93f4db8a3 100644 --- a/app/components/Occupied.tsx +++ b/app/components/Occupied.tsx @@ -4,30 +4,15 @@ */ /* eslint-disable jsx-a11y/label-has-associated-control */ -import React, { useContext, useEffect, useState, useRef } from 'react'; +import React, { useContext, useEffect, useState } from 'react'; // MATERIAL UI METHODS -import { - IconButton, - Modal, - Card, - CardHeader, - CardContent, - Button, - Typography, -} from '@material-ui/core'; - +import { Modal, Button } from '@material-ui/core'; import { makeStyles } from '@material-ui/core/styles'; import { BaseCSSProperties } from '@material-ui/core/styles/withStyles'; // MATERIAL UI ICONS import AddCircleOutlineTwoToneIcon from '@material-ui/icons/AddCircleOutlineTwoTone'; -import HighlightOffIcon from '@material-ui/icons/HighlightOff'; -import DashboardIcon from '@material-ui/icons/Dashboard'; -import NotificationsIcon from '@material-ui/icons/Notifications'; -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'; @@ -36,7 +21,6 @@ import AddModal from '../modals/AddModal'; import AwsModal from '../modals/AwsModal'; import ProfileContainer from '../containers/ProfileContainer'; import ServicesModal from '../modals/ServicesModal'; -import Search from './icons/Search'; // STYLESHEETS import '../stylesheets/Occupied.scss'; @@ -44,48 +28,29 @@ import '../stylesheets/Occupied.scss'; // // CONTEXT import { DashboardContext } from '../context/DashboardContext'; import { ApplicationContext } from '../context/ApplicationContext'; -import { CommsContext } from '../context/CommsContext'; -import { AwsContext } from '../context/AwsContext'; -import { useNavigate } from 'react-router-dom'; //Components import SearchBar from './SearchBar'; import DashboardIcons from './DashboardIcons/DashboardIcons'; +import ApplicationsCard from './ApplicationsCard/ApplicationsCard'; // TYPESCRIPT interface StyleProps { root: BaseCSSProperties; } -type ClickEvent = React.MouseEvent; - -// type OccupiedProps = { -// switch: any; -// setSwitch: any; -// }; -//v10: Memoized function, witouth any props. Should theoretically be called only once. +//v10: Memoized function, without any props. Should theoretically be called only once. const Occupied = React.memo(() => { - const { awsData, fetchAwsData, fetchAwsAppInfo, setLoadingState } = useContext(AwsContext); - const { setServicesData, app, setApp } = useContext(ApplicationContext); - // const { user, getApplications, deleteApp, mode } = useContext(DashboardContext); - const { user, applications, getApplications, deleteApp, mode } = useContext(DashboardContext); - const { commsData } = useContext(CommsContext); + const { setServicesData, app } = useContext(ApplicationContext); + const { user, applications, getApplications, mode } = useContext(DashboardContext); const [serviceModalOpen, setServiceModalOpen] = useState(false); - // const [addModalOpen, setAddModalOpen] = useState(false); const [personModalOpen, setPersonModalOpen] = useState(false); const [envModalOpen, setEnvModalOpen] = useState(false); const [addModalOpen, setAddModalOpen] = useState(false); const [awsModalOpen, setAwsModalOpen] = useState(false); - const { appIndex, setAppIndex } = useContext(ApplicationContext); - // const [index, setIndex] = useState(0); - // const [app, setApp] = useState(''); + const { appIndex } = useContext(ApplicationContext); const [searchTerm, setSearchTerm] = useState(''); - const [clickedAt, setClickedAt] = useState('2000-01-01T00:00:00Z'); - - // const [showAwsContainer, setShowAwsContainer] = useState(false); - const navigate = useNavigate(); - // Grab services and applications whenever the user changes // v10: Runs once when Occupied is memoized, and subsequently when user is updated. @@ -94,45 +59,6 @@ const Occupied = React.memo(() => { getApplications(); }, [user]); - - // Dynamic refs - const delRef = useRef([]); - - // 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 - // v10 info: when card is clicked (not on the delete button) if the service is an AWS instance, - // you are redirected to AWSGraphsContainer passing in the state object containing typeOfService - const handleClick = ( - event: ClickEvent, - selectedApp: string, - selectedService: string, - i: number - ) => { - //delRaf refers to the delete button - if (delRef.current[i] && !delRef.current[i].contains(event.target)) { - if ( - selectedService === 'AWS' || - selectedService === 'AWS/EC2' || - selectedService === 'AWS/ECS' || - selectedService === 'AWS/EKS' - ) { - setAppIndex(i); - setApp(selectedApp); - navigate(`/aws/:${app}`, { state: { typeOfService: selectedService } }); - } else { - setAppIndex(i); - setApp(selectedApp); - setServicesData([]); - setServiceModalOpen(true); - } - } - }; - // Conditional Rendering of UI Modals for Light and Dark Mode // Theme, StyleProps const useStylesDark = makeStyles(theme => ({ @@ -246,23 +172,23 @@ const Occupied = React.memo(() => { const classes = mode === 'light' ? useStylesLight({}) : useStylesDark({}); // update notification count based on statuscode >= 400 - const notification = commsData - .filter((item: { responsestatus: number }) => item.responsestatus >= 400) - .filter((item: { time: string }) => { - const d1 = new Date(item.time); - const d2 = new Date(clickedAt); - return d1 > d2; - }); - - const updateNotification = () => { - const timestamp = new Date(); - setClickedAt(timestamp.toISOString()); - }; + // const notification = commsData + // .filter((item: { responsestatus: number }) => item.responsestatus >= 400) + // .filter((item: { time: string }) => { + // const d1 = new Date(item.time); + // const d2 = new Date(clickedAt); + // return d1 > d2; + // }); + + // const updateNotification = () => { + // const timestamp = new Date(); + // setClickedAt(timestamp.toISOString()); + // }; return (
- +
{
+
+ {applications && applications .filter((db: any) => db[0].toLowerCase().includes(searchTerm.toLowerCase())) - .map((application: string[], i: number | any | string | undefined) => ( -
- handleClick(event, application[0], application[3], i)} - > -
-
- {/* {application[1] === 'SQL' ? ( - SQL - ) : ( - MongoDB - )} */} -
-
- - { - delRef.current[i] = element; - }} - className={classes.iconbutton} - aria-label="Delete" - onClick={event => confirmDelete(event, application[0], i)} - > - { - delRef.current[i] = element; - }} - /> - - } - /> - - {/*

Name:

*/} - - {application[0]} - -

Service:

- {application[3]} - -
- -
- - -

{application[4]}

- -
- -
- ))} + .map((application: string[], i: any) => ( + + ))} setEnvModalOpen(false)}> Date: Thu, 25 Apr 2024 09:56:36 -0700 Subject: [PATCH 009/179] styles moved to applicationsCard component --- app/stylesheets/Occupied.scss | 203 ---------------------------------- 1 file changed, 203 deletions(-) diff --git a/app/stylesheets/Occupied.scss b/app/stylesheets/Occupied.scss index e934ef2b4..cdbde5f56 100644 --- a/app/stylesheets/Occupied.scss +++ b/app/stylesheets/Occupied.scss @@ -335,209 +335,6 @@ select:-webkit-autofill:focus { margin-top: 50px; } -.card { - display: flex; - flex-direction: row; - justify-content: space-around; - margin: 20px; - padding: 0; - cursor: pointer; - transition: all 0.5s; - - &:after, - &:before { - content: ' '; - width: 10px; - height: 10px; - position: absolute; - transition: all 0.5s; - } - - &:hover { - position: relative; - border-top-right-radius: 0px; - border-bottom-left-radius: 0px; - - &:before, - &:after { - width: 25%; - height: 25%; - } - } -} - -.card { - &:hover .databaseIconHeader { - visibility: hidden; - // background-color: $gblue; - // opacity: 0.7; - // box-shadow: 0 4px 20px 0 rgba(0, 0, 0,.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4); - } - - &:hover p { - color: $background; - font-weight: 400; - } - - &:hover .cardFooter { - color: $background; - } - - &:hover .cardLine { - background-color: $background; - } - - &:hover #cardFooterText { - color: $background; - } - - &:hover .cardFooterIcon { - color: $background; - } - - &:hover #databaseName { - color: $background; - } -} - -#card-MongoDB { - &:hover .databaseIconHeader { - visibility: hidden; - // background-color: $gblue; - // opacity: 0.7; - // box-shadow: 0 4px 20px 0 rgba(0, 0, 0,.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4); - } - - .databaseIconContainer { - display: inline-block; - overflow: visible; - } - - .databaseIconHeader { - position: absolute; - background-color: $ggreen; - display: flex; - justify-content: center; - align-items: center; - width: 90px; - height: 90px; - padding: 15px; - float: left; - top: -20px; - left: 180px; - border-radius: 3px; - box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 255, 42, 0.4); - background-image: url('../assets/mongo-icon-white.png'); - background-position: center; - background-size: 70%; - background-repeat: no-repeat; - - .databaseIcon { - width: 55px; - height: 55px; - visibility: hidden; - } - } -} - -#card-SQL { - &:hover .databaseIconHeader { - visibility: hidden; - // background-color: $gblue; - // opacity: 0.7; - // box-shadow: 0 4px 20px 0 rgba(0, 0, 0,.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4); - } - - .databaseIconContainer { - display: inline-block; - overflow: visible; - } - - .databaseIconHeader { - position: absolute; - background-color: $gyellow; - display: flex; - justify-content: center; - align-items: center; - width: 90px; - height: 90px; - padding: 15px; - float: left; - top: -20px; - left: 180px; - border-radius: 3px; - box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 152, 0, 0.4); - background-image: url('../assets/postgres-icon-white.png'); - background-size: cover; - - .databaseIcon { - visibility: hidden; - } - } -} - -#card-AWS { - &:hover .databaseIconHeader { - visibility: hidden; - // background-color: $gblue; - // opacity: 0.7; - // box-shadow: 0 4px 20px 0 rgba(0, 0, 0,.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4); - } - - .databaseIconContainer { - display: inline-block; - overflow: visible; - } - - .databaseIconHeader { - position: absolute; - background-color: $gorange; - display: flex; - justify-content: center; - align-items: center; - width: 90px; - height: 90px; - padding: 15px; - float: left; - top: -20px; - left: 180px; - border-radius: 3px; - box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 152, 0, 0.4); - background-image: url('../assets/aws-icon-white.png'); - background-size: cover; - - .databaseIcon { - visibility: hidden; - } - } -} - -.databaseIconContainer { - display: inline-block; - overflow: visible; -} - -.databaseIconHeader { - position: absolute; - background-color: $ggreen; - display: flex; - justify-content: center; - align-items: center; - width: 90px; - height: 90px; - padding: 15px; - float: left; - top: -20px; - left: 180px; - border-radius: 3px; - box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 255, 42, 0.4); - - .databaseIcon { - width: 55px; - height: 55px; - } -} - .cardLine { background-color: $grey; width: 85%; From 1f0b31eaf4d36ff255089e7421479faa33917c5e Mon Sep 17 00:00:00 2001 From: Mike Tagg Date: Thu, 25 Apr 2024 09:57:13 -0700 Subject: [PATCH 010/179] extracted from occupied component --- .../ApplicationsCard/ApplicationsCard.tsx | 119 ++++++++++ app/components/ApplicationsCard/styles.scss | 206 ++++++++++++++++++ 2 files changed, 325 insertions(+) create mode 100644 app/components/ApplicationsCard/ApplicationsCard.tsx create mode 100644 app/components/ApplicationsCard/styles.scss diff --git a/app/components/ApplicationsCard/ApplicationsCard.tsx b/app/components/ApplicationsCard/ApplicationsCard.tsx new file mode 100644 index 000000000..fb07ba76d --- /dev/null +++ b/app/components/ApplicationsCard/ApplicationsCard.tsx @@ -0,0 +1,119 @@ + +import React, { useContext, useRef } from "react"; +import { useNavigate } from 'react-router-dom'; +import { Card,CardHeader,IconButton,CardContent,Typography } from "@material-ui/core"; +import { DashboardContext } from "../../context/DashboardContext"; +import { ApplicationContext } from "../../context/ApplicationContext"; +import HighlightOffIcon from '@material-ui/icons/HighlightOff'; +import UpdateIcon from '@material-ui/icons/Update'; +import './styles.scss' + +type ClickEvent = React.MouseEvent; + +const ApplicationsCard = (props) => { + + const { application, i, setServiceModalOpen, classes } = props + const { deleteApp } = useContext(DashboardContext) + const { setAppIndex, setApp, setServicesData, app } = useContext(ApplicationContext) + + //dynamic refs + const delRef = useRef([]); + + const navigate = useNavigate(); + + // Handle clicks on Application cards + // v10 info: when card is clicked (not on the delete button) if the service is an AWS instance, + // you are redirected to AWSGraphsContainer passing in the state object containing typeOfService + const handleClick = ( + event: ClickEvent, + selectedApp: string, + selectedService: string, + i: number + ) => { + //delRef refers to the delete button + if (delRef.current[i] && !delRef.current[i].contains(event.target)) { + if ( + selectedService === 'AWS' || + selectedService === 'AWS/EC2' || + selectedService === 'AWS/ECS' || + selectedService === 'AWS/EKS' + ) { + setAppIndex(i); + setApp(selectedApp); + navigate(`/aws/:${app}`, { state: { typeOfService: selectedService } }); + } else { + setAppIndex(i); + setApp(selectedApp); + setServicesData([]); + setServiceModalOpen(true); + } + } + }; + + // 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); + }; + + return ( +
+ handleClick(event, application[0], application[3], i)} + > +
+
+ {/* {application[1] === 'SQL' ? ( + SQL + ) : ( + MongoDB + )} */} +
+
+ + { + delRef.current[i] = element; + }} + className={classes.iconbutton} + aria-label="Delete" + onClick={event => confirmDelete(event, application[0], i)} + > + { + delRef.current[i] = element; + }} + /> + + } + /> + + {/*

Name:

*/} + + {application[0]} + +

Service:

+ {application[3]} + +
+ +
+ + +

{application[4]}

+ +
+ +
+ ) +} + +export default ApplicationsCard \ No newline at end of file diff --git a/app/components/ApplicationsCard/styles.scss b/app/components/ApplicationsCard/styles.scss new file mode 100644 index 000000000..6386d7bac --- /dev/null +++ b/app/components/ApplicationsCard/styles.scss @@ -0,0 +1,206 @@ + +@import '../../stylesheets/constants.scss'; + +.card { + display: flex; + flex-direction: row; + justify-content: space-around; + margin: 20px; + padding: 0; + cursor: pointer; + transition: all 0.5s; + + &:after, + &:before { + content: ' '; + width: 10px; + height: 10px; + position: absolute; + transition: all 0.5s; + } + + &:hover { + position: relative; + border-top-right-radius: 0px; + border-bottom-left-radius: 0px; + + &:before, + &:after { + width: 25%; + height: 25%; + } + } +} + +.card { + &:hover .databaseIconHeader { + visibility: hidden; + // background-color: $gblue; + // opacity: 0.7; + // box-shadow: 0 4px 20px 0 rgba(0, 0, 0,.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4); + } + + &:hover p { + color: $background; + font-weight: 400; + } + + &:hover .cardFooter { + color: $background; + } + + &:hover .cardLine { + background-color: $background; + } + + &:hover #cardFooterText { + color: $background; + } + + &:hover .cardFooterIcon { + color: $background; + } + + &:hover #databaseName { + color: $background; + } +} + + +#card-MongoDB { + &:hover .databaseIconHeader { + visibility: hidden; + // background-color: $gblue; + // opacity: 0.7; + // box-shadow: 0 4px 20px 0 rgba(0, 0, 0,.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4); + } + + .databaseIconContainer { + display: inline-block; + overflow: visible; + } + + .databaseIconHeader { + position: absolute; + background-color: $ggreen; + display: flex; + justify-content: center; + align-items: center; + width: 90px; + height: 90px; + padding: 15px; + float: left; + top: -20px; + left: 180px; + border-radius: 3px; + box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 255, 42, 0.4); + background-image: url('../../assets/mongo-icon-white.png'); + background-position: center; + background-size: 70%; + background-repeat: no-repeat; + + .databaseIcon { + width: 55px; + height: 55px; + visibility: hidden; + } + } +} + +#card-SQL { + &:hover .databaseIconHeader { + visibility: hidden; + // background-color: $gblue; + // opacity: 0.7; + // box-shadow: 0 4px 20px 0 rgba(0, 0, 0,.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4); + } + + .databaseIconContainer { + display: inline-block; + overflow: visible; + } + + .databaseIconHeader { + position: absolute; + background-color: $gyellow; + display: flex; + justify-content: center; + align-items: center; + width: 90px; + height: 90px; + padding: 15px; + float: left; + top: -20px; + left: 180px; + border-radius: 3px; + box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 152, 0, 0.4); + background-image: url('../../assets/postgres-icon-white.png'); + background-size: cover; + + .databaseIcon { + visibility: hidden; + } + } +} + +#card-AWS { + &:hover .databaseIconHeader { + visibility: hidden; + // background-color: $gblue; + // opacity: 0.7; + // box-shadow: 0 4px 20px 0 rgba(0, 0, 0,.14), 0 7px 10px -5px rgba(255, 255, 255, 0.4); + } + + .databaseIconContainer { + display: inline-block; + overflow: visible; + } + + .databaseIconHeader { + position: absolute; + background-color: $gorange; + display: flex; + justify-content: center; + align-items: center; + width: 90px; + height: 90px; + padding: 15px; + float: left; + top: -20px; + left: 180px; + border-radius: 3px; + box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(255, 152, 0, 0.4); + background-image: url('../../assets/aws-icon-white.png'); + background-size: cover; + + .databaseIcon { + visibility: hidden; + } + } +} + +.databaseIconContainer { + display: inline-block; + overflow: visible; +} + +.databaseIconHeader { + position: absolute; + background-color: $ggreen; + display: flex; + justify-content: center; + align-items: center; + width: 90px; + height: 90px; + padding: 15px; + float: left; + top: -20px; + left: 180px; + border-radius: 3px; + box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.14), 0 7px 10px -5px rgba(0, 255, 42, 0.4); + + .databaseIcon { + width: 55px; + height: 55px; + } +} From a63c7f8088841ca7decba7a01a92e0fdd18a6226 Mon Sep 17 00:00:00 2001 From: Mike Tagg Date: Thu, 25 Apr 2024 10:05:36 -0700 Subject: [PATCH 011/179] stylesheets for Occupied component moved to Occupied --- app/components/Occupied.tsx | 251 ------------------------------------ 1 file changed, 251 deletions(-) delete mode 100644 app/components/Occupied.tsx diff --git a/app/components/Occupied.tsx b/app/components/Occupied.tsx deleted file mode 100644 index 93f4db8a3..000000000 --- a/app/components/Occupied.tsx +++ /dev/null @@ -1,251 +0,0 @@ - /** From Version 5.2 Team: - * We only fixed linting issues regarding Notifications. - * Otherwise, Notifications still does not function properly. - */ - -/* eslint-disable jsx-a11y/label-has-associated-control */ -import React, { useContext, useEffect, useState } from 'react'; - -// MATERIAL UI METHODS -import { Modal, Button } from '@material-ui/core'; -import { makeStyles } from '@material-ui/core/styles'; -import { BaseCSSProperties } from '@material-ui/core/styles/withStyles'; - -// MATERIAL UI ICONS -import AddCircleOutlineTwoToneIcon from '@material-ui/icons/AddCircleOutlineTwoTone'; - -// // MODALS -// import AddModal from '../modals/AddModal'; -import EnvModal from '../modals/EnvModal'; -import AddModal from '../modals/AddModal'; -import AwsModal from '../modals/AwsModal'; -import ProfileContainer from '../containers/ProfileContainer'; -import ServicesModal from '../modals/ServicesModal'; - -// STYLESHEETS -import '../stylesheets/Occupied.scss'; - -// // CONTEXT -import { DashboardContext } from '../context/DashboardContext'; -import { ApplicationContext } from '../context/ApplicationContext'; - -//Components - -import SearchBar from './SearchBar'; -import DashboardIcons from './DashboardIcons/DashboardIcons'; -import ApplicationsCard from './ApplicationsCard/ApplicationsCard'; - -// TYPESCRIPT -interface StyleProps { - root: BaseCSSProperties; -} - -//v10: Memoized function, without any props. Should theoretically be called only once. -const Occupied = React.memo(() => { - const { setServicesData, app } = useContext(ApplicationContext); - const { user, applications, getApplications, mode } = useContext(DashboardContext); - const [serviceModalOpen, setServiceModalOpen] = useState(false); - const [personModalOpen, setPersonModalOpen] = useState(false); - const [envModalOpen, setEnvModalOpen] = useState(false); - const [addModalOpen, setAddModalOpen] = useState(false); - const [awsModalOpen, setAwsModalOpen] = useState(false); - const { appIndex } = useContext(ApplicationContext); - const [searchTerm, setSearchTerm] = useState(''); - - // Grab services and applications whenever the user changes - // v10: Runs once when Occupied is memoized, and subsequently when user is updated. - useEffect(() => { - setServicesData([]); - getApplications(); - }, [user]); - - // Conditional Rendering of UI Modals for Light and Dark Mode - // Theme, StyleProps - const useStylesDark = makeStyles(theme => ({ - // ALL CARDS - paper: { - display: 'flex', - flexDirection: 'column', - alignContent: 'center', - alignItems: 'center', - position: 'relative', - overflow: 'visible', - height: 280, - width: 280, - textAlign: 'center', - color: '#888888', - whiteSpace: 'nowrap', - backgroundColor: 'lightgray', - borderRadius: 3, - border: '0', - boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)', - '&:hover, &.Mui-focusVisible': { - backgroundColor: 'rgba(255, 255, 255, 0.2)', - color: '#ffffff', - fontWeight: 600, - }, - }, - iconbutton: { - boxShadow: 'none', - color: 'none', - visibility: 'hidden', - }, - btnStyle: { - position: 'absolute', - top: -10, - left: -72, - margin: '0', - color: '#eeeeee', - borderRadius: '0', - backgroundColor: 'none', - visibility: 'visible', - }, - icon: { - width: '75px', - height: '75px', - boxShadow: 'none', - }, - - // ALL CARDS: CONTENT - fontStyles: { - fontSize: '18px', - fontFamily: 'Roboto', - fontWeight: 300, - color: '#444d56', - }, - })); - - const useStylesLight = makeStyles(theme => ({ - // ALL CARDS - paper: { - display: 'flex', - flexDirection: 'column', - alignContent: 'center', - alignItems: 'center', - position: 'relative', - overflow: 'visible', - height: 280, - width: 280, - textAlign: 'center', - color: '#888888', - whiteSpace: 'nowrap', - backgroundColor: 'white', - borderRadius: 3, - border: '0', - boxShadow: - '0 6px 6px 0 rgba(153, 153, 153, 0.14), 0 6px 6px -2px rgba(153, 153, 153, 0.2), 0 6px 8px 0 rgba(153, 153, 153, 0.12)', - '&:hover, &.Mui-focusVisible': { - backgroundColor: `#3788fc`, - color: '#ffffff', - fontWeight: 600, - }, - }, - iconbutton: { - boxShadow: 'none', - color: 'none', - visibility: 'hidden', - }, - btnStyle: { - position: 'absolute', - top: -10, - left: -72, - margin: '0', - color: '#eeeeee', - borderRadius: '0', - backgroundColor: 'none', - visibility: 'visible', - }, - icon: { - width: '75px', - height: '75px', - boxShadow: 'none', - }, - // ALL CARDS: CONTENT - fontStyles: { - fontSize: '18px', - fontFamily: 'Roboto', - fontWeight: 300, - color: '#444d56', - }, - })); - - const classes = mode === 'light' ? useStylesLight({}) : useStylesDark({}); - - // update notification count based on statuscode >= 400 - // const notification = commsData - // .filter((item: { responsestatus: number }) => item.responsestatus >= 400) - // .filter((item: { time: string }) => { - // const d1 = new Date(item.time); - // const d2 = new Date(clickedAt); - // return d1 > d2; - // }); - - // const updateNotification = () => { - // const timestamp = new Date(); - // setClickedAt(timestamp.toISOString()); - // }; - - return ( -
-
- -
-
- - -
-
- -
- -
- -
- - {applications && - applications - .filter((db: any) => db[0].toLowerCase().includes(searchTerm.toLowerCase())) - .map((application: string[], i: any) => ( - - ))} - setEnvModalOpen(false)}> - - - - setAwsModalOpen(false)}> - - - - setAddModalOpen(false)}> - - - - setPersonModalOpen(false)}> - - - - setServiceModalOpen(false)}> - - -
-
-
- ); -}); - -export default Occupied; From 5eddf77203fd213e93416b4bb11681fdd9c95bd6 Mon Sep 17 00:00:00 2001 From: Mike Tagg Date: Thu, 25 Apr 2024 10:06:16 -0700 Subject: [PATCH 012/179] stylesheets moved to Occupied folder --- app/stylesheets/Occupied.scss | 378 ---------------------------------- 1 file changed, 378 deletions(-) delete mode 100644 app/stylesheets/Occupied.scss diff --git a/app/stylesheets/Occupied.scss b/app/stylesheets/Occupied.scss deleted file mode 100644 index cdbde5f56..000000000 --- a/app/stylesheets/Occupied.scss +++ /dev/null @@ -1,378 +0,0 @@ -@import './constants.scss'; - -.entireArea { - height: 100%; -} - -// HEADER -.mainHeader { - display: flex; - flex-direction: row; - justify-content: space-between; - align-items: center; - margin-left: 50px; -} - -.header { - margin-top: $logoPositionTop - 18px; - font-size: $headerFontSize; - color: $header; -} - -#leftHeader { - display: flex; - justify-content: center; - align-items: center; - margin-left: $logoPositionLeft - 30px; -} - -#rightHeader { - display: flex; - justify-content: space-between; - width: 100%; - align-items: center; - margin: 0; - margin-top: 40px; -} - -#listIcon { - position: absolute; - top: 20px; - left: 250px; - font-size: 42px; - margin: 10px; - padding: 5px; - - &:hover { - cursor: pointer; - box-shadow: $boxshadow3; - color: $gblue; - } -} - -#dashboard { - position: absolute; - top: 43px; - left: 300px; - margin-left: $logoPositionLeft - 34px; - - &:hover { - color: $gblue; - font-weight: 500; - cursor: pointer; - } -} - -.icon { - vertical-align: middle; - text-align: center; - color: $icon; - // background-color: $background; - box-sizing: content-box; - border-radius: 50%; - box-shadow: $boxshadow1; - line-height: 1.5; - white-space: nowrap; - display: inline-flex; - outline: 0; - border: none; - cursor: pointer; - position: relative; - min-height: auto; - white-space: nowrap; -} - -.navIcon { - font-size: 34px; - vertical-align: middle; - text-align: center; - color: $icon; - background-color: transparent; - box-sizing: content-box; - border-radius: 50%; - line-height: 1.5; - white-space: nowrap; - // display: inline-block; - outline: 0; - border: none; - cursor: pointer; - position: relative; - min-height: auto; - white-space: nowrap; - margin: 5px; - margin-top: 15px; - padding: 5px; -} - -#searchIcon { - // background-color: $background; - font-size: 26px; - font-weight: 400px; - padding: 8px; - margin: 0px; - margin-left: 15px; - margin-right: 15px; - - &:hover { - cursor: pointer; - box-shadow: $boxshadow3; - color: $gblue; - } -} - -// Dashboard Icon -#dashboardIcon { - margin-top: 4px; - margin-left: -35px; - font-size: 26px; - padding: 8px; - - &:hover { - cursor: pointer; - box-shadow: $boxshadow3; - // background-color: rgba(255, 255, 255, 0.3); - background-color: $background; - color: $ggreen; - } -} - -.dashboardIconArea .dashboardTooltip::after { - content: ''; - position: absolute; - bottom: 50px; - left: 35px; - border-width: 5px; - border-style: solid; - border-color: transparent transparent $background transparent; -} - -// Notification Icon -#notificationsIcon { - margin-top: 4px; - margin-left: 2px; - font-size: 26px; - - // padding: 8px; - &:hover { - cursor: pointer; - box-shadow: $boxshadow3; - // background-color: rgba(255, 255, 255, 0.3); - background-color: $background; - color: $gred; - } -} - -.notificationsIconArea { - position: relative; - display: inline-block; -} - -.notificationsIconArea:hover .notificationsTooltip { - visibility: visible; -} - -.notificationsIconArea .notificationsTooltip { - visibility: hidden; - width: 80px; - background-color: $background; - color: $gred; - text-align: center; - border-radius: 6px; - padding: 5px 0; - font-size: 12px; - /* Position the tooltip */ - position: absolute; - z-index: 1; - top: 50px; - right: -14px; -} - -.notificationsIconArea .notificationsTooltip::after { - content: ''; - position: absolute; - bottom: 37px; - left: 35px; - border-width: 5px; - border-style: solid; - border-color: transparent transparent $background transparent; -} - -// Person Icon -#personIcon { - margin-top: 4px; - margin-left: 2px; - font-size: 26px; - - // padding: 8px; - &:hover { - cursor: pointer; - box-shadow: $boxshadow3; - // background-color: rgba(255, 255, 255, 0.3); - background-color: $background; - color: $gyellow; - } -} - -.personIconArea { - position: relative; - display: inline-block; -} - -.personIconArea:hover .personTooltip { - visibility: visible; -} - -.personIconArea .personTooltip { - // visibility: hidden; - // width: 80px; - // background-color: $background; - color: $gyellow; - text-align: center; - // border-radius: 6px; - // padding: 5px 0 !important; - // font-size: 12px; - // /* Position the tooltip */ - // position: absolute; - // z-index: 1; - // top: 63px; - // right: 10px; -} - -// .personIconArea .personTooltip::after { -// content: ''; -// position: absolute; -// bottom: 37px; -// left: 35px; -// border-width: 5px; -// border-style: solid; -// border-color: transparent transparent $background transparent; -// } - -// .dashboardIconWrapper { -// margin-right: 37px; -// } - -.btns { - display: flex; - justify-content: space-around; -} - -button { - background-color: transparent; - border: 0; - outline: none; - white-space: nowrap; - margin: 10px 0; - // padding: 0px; - color: transparent; - - &:hover { - background-color: transparent; - } -} - -#deleteIcon { - background: none; - border: 0; - outline: none; - box-shadow: none; - transform: translateX(-40px); - filter: none; - - &:hover { - background: none; - background-color: none; - color: $warningred; - filter: none; - cursor: pointer; - } -} - -#textInput { - background-color: transparent; - font-family: 'Roboto'; - font-size: 16px; - outline: none; - border: 0; - padding: 2px; - // transform: translateY(-50%); - transition: all 0.25s ease; - pointer-events: none; - text-align: left; - margin-top: 5px; -} - -input:-webkit-autofill, -input:-webkit-autofill:hover, -input:-webkit-autofill:focus, -textarea:-webkit-autofill, -textarea:-webkit-autofill:hover, -textarea:-webkit-autofill:focus, -select:-webkit-autofill, -select:-webkit-autofill:hover, -select:-webkit-autofill:focus { - border: 1px solid green; - box-shadow: $boxshadow1; - -webkit-text-fill-color: green; - -webkit-box-shadow: 0 0 0px 1000px #000 inset; - transition: background-color 5000s ease-in-out 0s; -} - -// MAIN DASHBOARD -.dashboardArea { - display: flex; - flex-direction: column; - justify-content: space-evenly; -} - -// DATABASE CARDS -.cardContainer { - display: flex; - flex-wrap: wrap; - justify-content: center; - align-self: center; - width: 80%; - margin-top: 50px; -} - -.cardLine { - background-color: $grey; - width: 85%; - border: none; - height: 1px; - margin-top: 20px; - margin-bottom: 15px; -} - -.cardFooter { - width: 90%; - display: flex; - height: 20px; - align-items: center; - margin-left: 18px; -} - -#cardFooterText { - color: $icon; - font-size: 11px; - margin: 0; - margin-left: 10px; -} - -.cardFooterIcon { - color: $icon; - font-size: 14px; - margin: 0; -} - -#databaseName { - margin-top: 14px; - margin-bottom: 0; - font-size: 40px; - width: 280px; -} - -#serviceName { - font-size: 11px; - margin-top: 6px; -} \ No newline at end of file From c87a97c3f544f8e250d6498a3ed870e301362d77 Mon Sep 17 00:00:00 2001 From: Mike Tagg Date: Thu, 25 Apr 2024 10:07:02 -0700 Subject: [PATCH 013/179] import changed for occupied component --- app/containers/MainContainer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/containers/MainContainer.tsx b/app/containers/MainContainer.tsx index 8edda9015..c7f5ef3b6 100644 --- a/app/containers/MainContainer.tsx +++ b/app/containers/MainContainer.tsx @@ -3,7 +3,7 @@ import { Route, Routes } from 'react-router-dom'; import About from '../components/About'; import Contact from '../components/Contact'; import Settings from '../components/Settings'; -import Occupied from '../components/Occupied'; +import Occupied from '../components/Occupied/Occupied'; import lightAndDark from '../components/Styling'; import GraphsContainer from './GraphsContainer'; import { DashboardContext } from '../context/DashboardContext'; From c62f6830db07300fee85117dc8c8231c7ab61567 Mon Sep 17 00:00:00 2001 From: Mike Tagg Date: Thu, 25 Apr 2024 10:07:18 -0700 Subject: [PATCH 014/179] occupied folder added --- app/components/Occupied/Occupied.scss | 378 ++++++++++++++++++++++++++ app/components/Occupied/Occupied.tsx | 253 +++++++++++++++++ 2 files changed, 631 insertions(+) create mode 100644 app/components/Occupied/Occupied.scss create mode 100644 app/components/Occupied/Occupied.tsx diff --git a/app/components/Occupied/Occupied.scss b/app/components/Occupied/Occupied.scss new file mode 100644 index 000000000..4b266d744 --- /dev/null +++ b/app/components/Occupied/Occupied.scss @@ -0,0 +1,378 @@ +@import '../../stylesheets/constants.scss'; + +.entireArea { + height: 100%; +} + +// HEADER +.mainHeader { + display: flex; + flex-direction: row; + justify-content: space-between; + align-items: center; + margin-left: 50px; +} + +.header { + margin-top: $logoPositionTop - 18px; + font-size: $headerFontSize; + color: $header; +} + +#leftHeader { + display: flex; + justify-content: center; + align-items: center; + margin-left: $logoPositionLeft - 30px; +} + +#rightHeader { + display: flex; + justify-content: space-between; + width: 100%; + align-items: center; + margin: 0; + margin-top: 40px; +} + +#listIcon { + position: absolute; + top: 20px; + left: 250px; + font-size: 42px; + margin: 10px; + padding: 5px; + + &:hover { + cursor: pointer; + box-shadow: $boxshadow3; + color: $gblue; + } +} + +#dashboard { + position: absolute; + top: 43px; + left: 300px; + margin-left: $logoPositionLeft - 34px; + + &:hover { + color: $gblue; + font-weight: 500; + cursor: pointer; + } +} + +.icon { + vertical-align: middle; + text-align: center; + color: $icon; + // background-color: $background; + box-sizing: content-box; + border-radius: 50%; + box-shadow: $boxshadow1; + line-height: 1.5; + white-space: nowrap; + display: inline-flex; + outline: 0; + border: none; + cursor: pointer; + position: relative; + min-height: auto; + white-space: nowrap; +} + +.navIcon { + font-size: 34px; + vertical-align: middle; + text-align: center; + color: $icon; + background-color: transparent; + box-sizing: content-box; + border-radius: 50%; + line-height: 1.5; + white-space: nowrap; + // display: inline-block; + outline: 0; + border: none; + cursor: pointer; + position: relative; + min-height: auto; + white-space: nowrap; + margin: 5px; + margin-top: 15px; + padding: 5px; +} + +#searchIcon { + // background-color: $background; + font-size: 26px; + font-weight: 400px; + padding: 8px; + margin: 0px; + margin-left: 15px; + margin-right: 15px; + + &:hover { + cursor: pointer; + box-shadow: $boxshadow3; + color: $gblue; + } +} + +// Dashboard Icon +#dashboardIcon { + margin-top: 4px; + margin-left: -35px; + font-size: 26px; + padding: 8px; + + &:hover { + cursor: pointer; + box-shadow: $boxshadow3; + // background-color: rgba(255, 255, 255, 0.3); + background-color: $background; + color: $ggreen; + } +} + +.dashboardIconArea .dashboardTooltip::after { + content: ''; + position: absolute; + bottom: 50px; + left: 35px; + border-width: 5px; + border-style: solid; + border-color: transparent transparent $background transparent; +} + +// Notification Icon +#notificationsIcon { + margin-top: 4px; + margin-left: 2px; + font-size: 26px; + + // padding: 8px; + &:hover { + cursor: pointer; + box-shadow: $boxshadow3; + // background-color: rgba(255, 255, 255, 0.3); + background-color: $background; + color: $gred; + } +} + +.notificationsIconArea { + position: relative; + display: inline-block; +} + +.notificationsIconArea:hover .notificationsTooltip { + visibility: visible; +} + +.notificationsIconArea .notificationsTooltip { + visibility: hidden; + width: 80px; + background-color: $background; + color: $gred; + text-align: center; + border-radius: 6px; + padding: 5px 0; + font-size: 12px; + /* Position the tooltip */ + position: absolute; + z-index: 1; + top: 50px; + right: -14px; +} + +.notificationsIconArea .notificationsTooltip::after { + content: ''; + position: absolute; + bottom: 37px; + left: 35px; + border-width: 5px; + border-style: solid; + border-color: transparent transparent $background transparent; +} + +// Person Icon +#personIcon { + margin-top: 4px; + margin-left: 2px; + font-size: 26px; + + // padding: 8px; + &:hover { + cursor: pointer; + box-shadow: $boxshadow3; + // background-color: rgba(255, 255, 255, 0.3); + background-color: $background; + color: $gyellow; + } +} + +.personIconArea { + position: relative; + display: inline-block; +} + +.personIconArea:hover .personTooltip { + visibility: visible; +} + +.personIconArea .personTooltip { + // visibility: hidden; + // width: 80px; + // background-color: $background; + color: $gyellow; + text-align: center; + // border-radius: 6px; + // padding: 5px 0 !important; + // font-size: 12px; + // /* Position the tooltip */ + // position: absolute; + // z-index: 1; + // top: 63px; + // right: 10px; +} + +// .personIconArea .personTooltip::after { +// content: ''; +// position: absolute; +// bottom: 37px; +// left: 35px; +// border-width: 5px; +// border-style: solid; +// border-color: transparent transparent $background transparent; +// } + +// .dashboardIconWrapper { +// margin-right: 37px; +// } + +.btns { + display: flex; + justify-content: space-around; +} + +button { + background-color: transparent; + border: 0; + outline: none; + white-space: nowrap; + margin: 10px 0; + // padding: 0px; + color: transparent; + + &:hover { + background-color: transparent; + } +} + +#deleteIcon { + background: none; + border: 0; + outline: none; + box-shadow: none; + transform: translateX(-40px); + filter: none; + + &:hover { + background: none; + background-color: none; + color: $warningred; + filter: none; + cursor: pointer; + } +} + +#textInput { + background-color: transparent; + font-family: 'Roboto'; + font-size: 16px; + outline: none; + border: 0; + padding: 2px; + // transform: translateY(-50%); + transition: all 0.25s ease; + pointer-events: none; + text-align: left; + margin-top: 5px; +} + +input:-webkit-autofill, +input:-webkit-autofill:hover, +input:-webkit-autofill:focus, +textarea:-webkit-autofill, +textarea:-webkit-autofill:hover, +textarea:-webkit-autofill:focus, +select:-webkit-autofill, +select:-webkit-autofill:hover, +select:-webkit-autofill:focus { + border: 1px solid green; + box-shadow: $boxshadow1; + -webkit-text-fill-color: green; + -webkit-box-shadow: 0 0 0px 1000px #000 inset; + transition: background-color 5000s ease-in-out 0s; +} + +// MAIN DASHBOARD +.dashboardArea { + display: flex; + flex-direction: column; + justify-content: space-evenly; +} + +// DATABASE CARDS +.cardContainer { + display: flex; + flex-wrap: wrap; + justify-content: center; + align-self: center; + width: 80%; + margin-top: 50px; +} + +.cardLine { + background-color: $grey; + width: 85%; + border: none; + height: 1px; + margin-top: 20px; + margin-bottom: 15px; +} + +.cardFooter { + width: 90%; + display: flex; + height: 20px; + align-items: center; + margin-left: 18px; +} + +#cardFooterText { + color: $icon; + font-size: 11px; + margin: 0; + margin-left: 10px; +} + +.cardFooterIcon { + color: $icon; + font-size: 14px; + margin: 0; +} + +#databaseName { + margin-top: 14px; + margin-bottom: 0; + font-size: 40px; + width: 280px; +} + +#serviceName { + font-size: 11px; + margin-top: 6px; +} \ No newline at end of file diff --git a/app/components/Occupied/Occupied.tsx b/app/components/Occupied/Occupied.tsx new file mode 100644 index 000000000..092e6a79b --- /dev/null +++ b/app/components/Occupied/Occupied.tsx @@ -0,0 +1,253 @@ + /** From Version 5.2 Team: + * We only fixed linting issues regarding Notifications. + * Otherwise, Notifications still does not function properly. + */ + +/* eslint-disable jsx-a11y/label-has-associated-control */ +import React, { useContext, useEffect, useState } from 'react'; + +// MATERIAL UI METHODS +import { Modal, Button } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; +import { BaseCSSProperties } from '@material-ui/core/styles/withStyles'; + +// MATERIAL UI ICONS +import AddCircleOutlineTwoToneIcon from '@material-ui/icons/AddCircleOutlineTwoTone'; + +// // MODALS +// import AddModal from '../modals/AddModal'; +import EnvModal from '../../modals/EnvModal'; +import AddModal from '../../modals/AddModal'; +import AwsModal from '../../modals/AwsModal'; +import ProfileContainer from '../../containers/ProfileContainer'; +import ServicesModal from '../../modals/ServicesModal'; + +// STYLESHEETS +import './Occupied.scss'; + +// // CONTEXT +import { DashboardContext } from '../../context/DashboardContext'; +import { ApplicationContext } from '../../context/ApplicationContext'; + +//Components + +import SearchBar from '../SearchBar'; +import DashboardIcons from '../DashboardIcons/DashboardIcons'; +import ApplicationsCard from '../ApplicationsCard/ApplicationsCard'; + +// TYPESCRIPT +interface StyleProps { + root: BaseCSSProperties; +} + +//v10: Memoized function, without any props. Should theoretically be called only once. +const Occupied = React.memo(() => { + const { setServicesData, app } = useContext(ApplicationContext); + const { user, applications, getApplications, mode } = useContext(DashboardContext); + const [serviceModalOpen, setServiceModalOpen] = useState(false); + const [personModalOpen, setPersonModalOpen] = useState(false); + const [envModalOpen, setEnvModalOpen] = useState(false); + const [addModalOpen, setAddModalOpen] = useState(false); + const [awsModalOpen, setAwsModalOpen] = useState(false); + const { appIndex } = useContext(ApplicationContext); + const [searchTerm, setSearchTerm] = useState(''); + + // Grab services and applications whenever the user changes + // v10: Runs once when Occupied is memoized, and subsequently when user is updated. + useEffect(() => { + setServicesData([]); + getApplications(); + }, [user]); + + // Conditional Rendering of UI Modals for Light and Dark Mode + // Theme, StyleProps + const useStylesDark = makeStyles(theme => ({ + // ALL CARDS + paper: { + display: 'flex', + flexDirection: 'column', + alignContent: 'center', + alignItems: 'center', + position: 'relative', + overflow: 'visible', + height: 280, + width: 280, + textAlign: 'center', + color: '#888888', + whiteSpace: 'nowrap', + backgroundColor: 'lightgray', + borderRadius: 3, + border: '0', + boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)', + '&:hover, &.Mui-focusVisible': { + backgroundColor: 'rgba(255, 255, 255, 0.2)', + color: '#ffffff', + fontWeight: 600, + }, + }, + iconbutton: { + boxShadow: 'none', + color: 'none', + visibility: 'hidden', + }, + btnStyle: { + position: 'absolute', + top: -10, + left: -72, + margin: '0', + color: '#eeeeee', + borderRadius: '0', + backgroundColor: 'none', + visibility: 'visible', + }, + icon: { + width: '75px', + height: '75px', + boxShadow: 'none', + }, + + // ALL CARDS: CONTENT + fontStyles: { + fontSize: '18px', + fontFamily: 'Roboto', + fontWeight: 300, + color: '#444d56', + }, + })); + + const useStylesLight = makeStyles(theme => ({ + // ALL CARDS + paper: { + display: 'flex', + flexDirection: 'column', + alignContent: 'center', + alignItems: 'center', + position: 'relative', + overflow: 'visible', + height: 280, + width: 280, + textAlign: 'center', + color: '#888888', + whiteSpace: 'nowrap', + backgroundColor: 'white', + borderRadius: 3, + border: '0', + boxShadow: + '0 6px 6px 0 rgba(153, 153, 153, 0.14), 0 6px 6px -2px rgba(153, 153, 153, 0.2), 0 6px 8px 0 rgba(153, 153, 153, 0.12)', + '&:hover, &.Mui-focusVisible': { + backgroundColor: `#3788fc`, + color: '#ffffff', + fontWeight: 600, + }, + }, + iconbutton: { + boxShadow: 'none', + color: 'none', + visibility: 'hidden', + }, + btnStyle: { + position: 'absolute', + top: -10, + left: -72, + margin: '0', + color: '#eeeeee', + borderRadius: '0', + backgroundColor: 'none', + visibility: 'visible', + }, + icon: { + width: '75px', + height: '75px', + boxShadow: 'none', + }, + // ALL CARDS: CONTENT + fontStyles: { + fontSize: '18px', + fontFamily: 'Roboto', + fontWeight: 300, + color: '#444d56', + }, + })); + + const classes = mode === 'light' ? useStylesLight({}) : useStylesDark({}); + + return ( +
+
+ +
+
+ + +
+
+ +
+ +
+ +
+ + {applications && + applications + .filter((db: any) => db[0].toLowerCase().includes(searchTerm.toLowerCase())) + .map((application: string[], i: any) => ( + + ))} + setEnvModalOpen(false)}> + + + + setAwsModalOpen(false)}> + + + + setAddModalOpen(false)}> + + + + setPersonModalOpen(false)}> + + + + setServiceModalOpen(false)}> + + +
+
+
+ ); +}); + +export default Occupied; + +/* +// update notification count based on statuscode >= 400 + // const notification = commsData + // .filter((item: { responsestatus: number }) => item.responsestatus >= 400) + // .filter((item: { time: string }) => { + // const d1 = new Date(item.time); + // const d2 = new Date(clickedAt); + // return d1 > d2; + // }); + + // const updateNotification = () => { + // const timestamp = new Date(); + // setClickedAt(timestamp.toISOString()); + // }; +*/ \ No newline at end of file From ceee56ed1fb9b9d2531d86e8a45efa2b0cd541ec Mon Sep 17 00:00:00 2001 From: Mike Tagg Date: Thu, 25 Apr 2024 16:40:31 -0700 Subject: [PATCH 015/179] spacing added --- app/components/Occupied/Occupied.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/app/components/Occupied/Occupied.tsx b/app/components/Occupied/Occupied.tsx index 092e6a79b..3cebe096a 100644 --- a/app/components/Occupied/Occupied.tsx +++ b/app/components/Occupied/Occupied.tsx @@ -205,6 +205,7 @@ const Occupied = React.memo(() => { classes={classes} /> ))} + setEnvModalOpen(false)}> Date: Thu, 25 Apr 2024 16:43:28 -0700 Subject: [PATCH 016/179] extracted svg into search bar component --- app/components/SearchBar/index.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/app/components/SearchBar/index.tsx b/app/components/SearchBar/index.tsx index 27a8d30b3..667370dd6 100644 --- a/app/components/SearchBar/index.tsx +++ b/app/components/SearchBar/index.tsx @@ -1,5 +1,4 @@ import React from "react" -import Search from "../icons/Search" import './styles.scss' const SearchBar = (props) => { @@ -15,7 +14,11 @@ const SearchBar = (props) => { type="text" name="search" /> - + + +
From 5863f1384e1627d73716e634513e9eeda02c1b62 Mon Sep 17 00:00:00 2001 From: Mike Tagg Date: Thu, 25 Apr 2024 18:45:56 -0700 Subject: [PATCH 017/179] spaces added --- app/components/DashboardIcons/DashboardIcons.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/app/components/DashboardIcons/DashboardIcons.tsx b/app/components/DashboardIcons/DashboardIcons.tsx index aa44d4756..3529fe182 100644 --- a/app/components/DashboardIcons/DashboardIcons.tsx +++ b/app/components/DashboardIcons/DashboardIcons.tsx @@ -32,6 +32,7 @@ const DashboardIcons = (props) => {
+
You have {notification ? notification.length : 0} new alerts @@ -43,6 +44,7 @@ const DashboardIcons = (props) => { color="secondary" />
+
+ +
From 5e2a8a39d94ef24acdb3ec8637f7cf25b43729d5 Mon Sep 17 00:00:00 2001 From: Mike Tagg Date: Thu, 25 Apr 2024 18:51:07 -0700 Subject: [PATCH 020/179] added styles for example button --- app/stylesheets/SidebarContainer.scss | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/app/stylesheets/SidebarContainer.scss b/app/stylesheets/SidebarContainer.scss index 8ab471fc1..35230812f 100644 --- a/app/stylesheets/SidebarContainer.scss +++ b/app/stylesheets/SidebarContainer.scss @@ -228,4 +228,15 @@ animation: none; -webkit-tap-highlight-color: transparent; } +} + +.example-button { + height:100px; + width:100px; + color:yellow; + cursor:pointer; +} + +.example-button:hover { + color:blue; } \ No newline at end of file From c9db5cb12671ad933b2c2e695554cf31414840e1 Mon Sep 17 00:00:00 2001 From: Mike Tagg Date: Thu, 25 Apr 2024 19:02:01 -0700 Subject: [PATCH 021/179] deleted icons folder --- app/components/icons/Search.jsx | 9 --------- 1 file changed, 9 deletions(-) delete mode 100644 app/components/icons/Search.jsx diff --git a/app/components/icons/Search.jsx b/app/components/icons/Search.jsx deleted file mode 100644 index f0b75de2e..000000000 --- a/app/components/icons/Search.jsx +++ /dev/null @@ -1,9 +0,0 @@ -import React from 'react'; - -export default function Search(props) { - return ( - - ); -} From a6903d68ef22789c6e98809cad038e29c763923a Mon Sep 17 00:00:00 2001 From: Mike Tagg Date: Fri, 26 Apr 2024 20:17:57 -0700 Subject: [PATCH 022/179] extracted styles from occupied component styles block at the top of occupied component was moved into a helper function. Tried to only switch the different styles (background-color, box shadow and another background color) Ran into trouble becuase those styles depend on the mode state which is defined in a context which cant be used outside a function component. Ended up just moving both styling functions whole --- app/components/Occupied/Occupied.tsx | 120 +-------------------------- 1 file changed, 4 insertions(+), 116 deletions(-) diff --git a/app/components/Occupied/Occupied.tsx b/app/components/Occupied/Occupied.tsx index 3cebe096a..4531fdb14 100644 --- a/app/components/Occupied/Occupied.tsx +++ b/app/components/Occupied/Occupied.tsx @@ -8,8 +8,6 @@ import React, { useContext, useEffect, useState } from 'react'; // MATERIAL UI METHODS import { Modal, Button } from '@material-ui/core'; -import { makeStyles } from '@material-ui/core/styles'; -import { BaseCSSProperties } from '@material-ui/core/styles/withStyles'; // MATERIAL UI ICONS import AddCircleOutlineTwoToneIcon from '@material-ui/icons/AddCircleOutlineTwoTone'; @@ -35,10 +33,7 @@ import SearchBar from '../SearchBar'; import DashboardIcons from '../DashboardIcons/DashboardIcons'; import ApplicationsCard from '../ApplicationsCard/ApplicationsCard'; -// TYPESCRIPT -interface StyleProps { - root: BaseCSSProperties; -} +import { useStylesLight, useStylesDark } from './helpers/muiHelper' //v10: Memoized function, without any props. Should theoretically be called only once. const Occupied = React.memo(() => { @@ -59,118 +54,11 @@ const Occupied = React.memo(() => { getApplications(); }, [user]); - // Conditional Rendering of UI Modals for Light and Dark Mode - // Theme, StyleProps - const useStylesDark = makeStyles(theme => ({ - // ALL CARDS - paper: { - display: 'flex', - flexDirection: 'column', - alignContent: 'center', - alignItems: 'center', - position: 'relative', - overflow: 'visible', - height: 280, - width: 280, - textAlign: 'center', - color: '#888888', - whiteSpace: 'nowrap', - backgroundColor: 'lightgray', - borderRadius: 3, - border: '0', - boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)', - '&:hover, &.Mui-focusVisible': { - backgroundColor: 'rgba(255, 255, 255, 0.2)', - color: '#ffffff', - fontWeight: 600, - }, - }, - iconbutton: { - boxShadow: 'none', - color: 'none', - visibility: 'hidden', - }, - btnStyle: { - position: 'absolute', - top: -10, - left: -72, - margin: '0', - color: '#eeeeee', - borderRadius: '0', - backgroundColor: 'none', - visibility: 'visible', - }, - icon: { - width: '75px', - height: '75px', - boxShadow: 'none', - }, - - // ALL CARDS: CONTENT - fontStyles: { - fontSize: '18px', - fontFamily: 'Roboto', - fontWeight: 300, - color: '#444d56', - }, - })); - - const useStylesLight = makeStyles(theme => ({ - // ALL CARDS - paper: { - display: 'flex', - flexDirection: 'column', - alignContent: 'center', - alignItems: 'center', - position: 'relative', - overflow: 'visible', - height: 280, - width: 280, - textAlign: 'center', - color: '#888888', - whiteSpace: 'nowrap', - backgroundColor: 'white', - borderRadius: 3, - border: '0', - boxShadow: - '0 6px 6px 0 rgba(153, 153, 153, 0.14), 0 6px 6px -2px rgba(153, 153, 153, 0.2), 0 6px 8px 0 rgba(153, 153, 153, 0.12)', - '&:hover, &.Mui-focusVisible': { - backgroundColor: `#3788fc`, - color: '#ffffff', - fontWeight: 600, - }, - }, - iconbutton: { - boxShadow: 'none', - color: 'none', - visibility: 'hidden', - }, - btnStyle: { - position: 'absolute', - top: -10, - left: -72, - margin: '0', - color: '#eeeeee', - borderRadius: '0', - backgroundColor: 'none', - visibility: 'visible', - }, - icon: { - width: '75px', - height: '75px', - boxShadow: 'none', - }, - // ALL CARDS: CONTENT - fontStyles: { - fontSize: '18px', - fontFamily: 'Roboto', - fontWeight: 300, - color: '#444d56', - }, - })); - const classes = mode === 'light' ? useStylesLight({}) : useStylesDark({}); + // const classes = useStylesTest({}) + console.log(classes) + return (
From ac8d98b999b7294d518f514c8cf9c5e2242b32d4 Mon Sep 17 00:00:00 2001 From: Mike Tagg Date: Fri, 26 Apr 2024 20:20:42 -0700 Subject: [PATCH 023/179] mui styles now live in helper folder --- app/components/Occupied/helpers/muiHelper.ts | 114 +++++++++++++++++++ 1 file changed, 114 insertions(+) create mode 100644 app/components/Occupied/helpers/muiHelper.ts diff --git a/app/components/Occupied/helpers/muiHelper.ts b/app/components/Occupied/helpers/muiHelper.ts new file mode 100644 index 000000000..7195b11b3 --- /dev/null +++ b/app/components/Occupied/helpers/muiHelper.ts @@ -0,0 +1,114 @@ + +import { makeStyles } from '@material-ui/core/styles'; +import { BaseCSSProperties } from '@material-ui/core/styles/withStyles'; + + // Conditional Rendering of UI Modals for Light and Dark Mode +// Theme, StyleProps + +export const useStylesDark = makeStyles(theme => ({ + // ALL CARDS + paper: { + display: 'flex', + flexDirection: 'column', + alignContent: 'center', + alignItems: 'center', + position: 'relative', + overflow: 'visible', + height: 280, + width: 280, + textAlign: 'center', + color: '#888888', + whiteSpace: 'nowrap', + backgroundColor: 'lightgray', + borderRadius: 3, + border: '0', + boxShadow: '0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19)', + '&:hover, &.Mui-focusVisible': { + backgroundColor: 'rgba(255, 255, 255, 0.2)', + color: '#ffffff', + fontWeight: 600, + }, + }, + iconbutton: { + boxShadow: 'none', + color: 'none', + visibility: 'hidden', + }, + btnStyle: { + position: 'absolute', + top: -10, + left: -72, + margin: '0', + color: '#eeeeee', + borderRadius: '0', + backgroundColor: 'none', + visibility: 'visible', + }, + icon: { + width: '75px', + height: '75px', + boxShadow: 'none', + }, + + // ALL CARDS: CONTENT + fontStyles: { + fontSize: '18px', + fontFamily: 'Roboto', + fontWeight: 300, + color: '#444d56', + }, +})); + +export const useStylesLight = makeStyles(theme => ({ + // ALL CARDS + paper: { + display: 'flex', + flexDirection: 'column', + alignContent: 'center', + alignItems: 'center', + position: 'relative', + overflow: 'visible', + height: 280, + width: 280, + textAlign: 'center', + color: '#888888', + whiteSpace: 'nowrap', + backgroundColor: 'white', + borderRadius: 3, + border: '0', + boxShadow: + '0 6px 6px 0 rgba(153, 153, 153, 0.14), 0 6px 6px -2px rgba(153, 153, 153, 0.2), 0 6px 8px 0 rgba(153, 153, 153, 0.12)', + '&:hover, &.Mui-focusVisible': { + backgroundColor: `#3788fc`, + color: '#ffffff', + fontWeight: 600, + }, + }, + iconbutton: { + boxShadow: 'none', + color: 'none', + visibility: 'hidden', + }, + btnStyle: { + position: 'absolute', + top: -10, + left: -72, + margin: '0', + color: '#eeeeee', + borderRadius: '0', + backgroundColor: 'none', + visibility: 'visible', + }, + icon: { + width: '75px', + height: '75px', + boxShadow: 'none', + }, + // ALL CARDS: CONTENT + fontStyles: { + fontSize: '18px', + fontFamily: 'Roboto', + fontWeight: 300, + color: '#444d56', + }, +})); \ No newline at end of file From b173708383480a2a94a2d7399c03e654db68ca2e Mon Sep 17 00:00:00 2001 From: Mike Tagg Date: Fri, 26 Apr 2024 20:21:29 -0700 Subject: [PATCH 024/179] spacing removed --- examples/docker/prometheus.yml | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/examples/docker/prometheus.yml b/examples/docker/prometheus.yml index 23063dcf7..4ea91461b 100644 --- a/examples/docker/prometheus.yml +++ b/examples/docker/prometheus.yml @@ -19,7 +19,4 @@ scrape_configs: scrape_interval: 5s static_configs: - targets: - - docker.for.mac.localhost:8081 - - - + - docker.for.mac.localhost:8081 \ No newline at end of file From 401f04a772767ac920b33c1070fb5ed79dfcb252 Mon Sep 17 00:00:00 2001 From: Mike Tagg Date: Sat, 27 Apr 2024 10:24:04 -0700 Subject: [PATCH 025/179] added types for new modal and set modal state to be imported to each modal --- app/components/Occupied/types/Occupied.ts | 12 ++++++++++++ 1 file changed, 12 insertions(+) create mode 100644 app/components/Occupied/types/Occupied.ts diff --git a/app/components/Occupied/types/Occupied.ts b/app/components/Occupied/types/Occupied.ts new file mode 100644 index 000000000..b6f1f46e2 --- /dev/null +++ b/app/components/Occupied/types/Occupied.ts @@ -0,0 +1,12 @@ + +export type TModal = { + isOpen:boolean + type:string +} + +export type TModalSetter = { + setModal: React.Dispatch> +} \ No newline at end of file From dfdc00ed14c56156eea3c02b0439cfea6c020094 Mon Sep 17 00:00:00 2001 From: Mike Tagg Date: Sat, 27 Apr 2024 10:24:32 -0700 Subject: [PATCH 026/179] Condensed modal states into single state The modal component was being rendered multiple times which was unecessary. Additionally each modal component had a different state that was only being used to determine if that modal should be open or not. These states were condensed to one state to simplify the modal states --- app/components/Occupied/Occupied.tsx | 51 ++++++++++++++++++++-------- 1 file changed, 37 insertions(+), 14 deletions(-) diff --git a/app/components/Occupied/Occupied.tsx b/app/components/Occupied/Occupied.tsx index 4531fdb14..aec07cdf4 100644 --- a/app/components/Occupied/Occupied.tsx +++ b/app/components/Occupied/Occupied.tsx @@ -39,11 +39,7 @@ import { useStylesLight, useStylesDark } from './helpers/muiHelper' const Occupied = React.memo(() => { const { setServicesData, app } = useContext(ApplicationContext); const { user, applications, getApplications, mode } = useContext(DashboardContext); - const [serviceModalOpen, setServiceModalOpen] = useState(false); - const [personModalOpen, setPersonModalOpen] = useState(false); - const [envModalOpen, setEnvModalOpen] = useState(false); - const [addModalOpen, setAddModalOpen] = useState(false); - const [awsModalOpen, setAwsModalOpen] = useState(false); + const [ modal,setModal ] = useState({isOpen:false,type:''}) const { appIndex } = useContext(ApplicationContext); const [searchTerm, setSearchTerm] = useState(''); @@ -56,9 +52,6 @@ const Occupied = React.memo(() => { const classes = mode === 'light' ? useStylesLight({}) : useStylesDark({}); - // const classes = useStylesTest({}) - console.log(classes) - return (
@@ -69,7 +62,7 @@ const Occupied = React.memo(() => { setSearchTerm={setSearchTerm} />
@@ -77,7 +70,9 @@ const Occupied = React.memo(() => {
-
@@ -89,12 +84,40 @@ const Occupied = React.memo(() => { ))} - - setEnvModalOpen(false)}> + + setModal({isOpen:false,type:''})} + > + { + modal.type === 'envModal' ? + + : + modal.type === 'awsModal' ? + + : + modal.type === 'addModal' ? + + : + modal.type === 'personalModal' ? + + : + modal.type === 'serviceModal' ? + + : + <> + } + + + {/* setEnvModalOpen(false)}> { setServiceModalOpen(false)}> - + */}
From 57d1f73a34e4df0ae70fe818591205a07a8f63af Mon Sep 17 00:00:00 2001 From: Mike Tagg Date: Sat, 27 Apr 2024 10:26:36 -0700 Subject: [PATCH 027/179] Modal component refactor this commit represents the changes to all the individual modals that are now rendered from a single modal state. Done to clarify which modals are open and prevent unnecessary states --- .../ApplicationsCard/ApplicationsCard.tsx | 4 ++-- .../DashboardIcons/DashboardIcons.tsx | 4 ++-- app/containers/ProfileContainer.tsx | 11 ++++------ app/modals/AddModal.tsx | 12 +++++------ app/modals/AwsModal.tsx | 6 ++++-- app/modals/EnvModal.tsx | 20 +++++-------------- app/modals/SetAuth.tsx | 13 ++++++------ app/modals/UserModal.tsx | 12 ++++++++--- 8 files changed, 39 insertions(+), 43 deletions(-) diff --git a/app/components/ApplicationsCard/ApplicationsCard.tsx b/app/components/ApplicationsCard/ApplicationsCard.tsx index fb07ba76d..1a296c61b 100644 --- a/app/components/ApplicationsCard/ApplicationsCard.tsx +++ b/app/components/ApplicationsCard/ApplicationsCard.tsx @@ -12,7 +12,7 @@ type ClickEvent = React.MouseEvent; const ApplicationsCard = (props) => { - const { application, i, setServiceModalOpen, classes } = props + const { application, i, setModal, classes } = props const { deleteApp } = useContext(DashboardContext) const { setAppIndex, setApp, setServicesData, app } = useContext(ApplicationContext) @@ -45,7 +45,7 @@ const ApplicationsCard = (props) => { setAppIndex(i); setApp(selectedApp); setServicesData([]); - setServiceModalOpen(true); + setModal({isOpen:true,type:'serviceModal'}) } } }; diff --git a/app/components/DashboardIcons/DashboardIcons.tsx b/app/components/DashboardIcons/DashboardIcons.tsx index 3529fe182..d9a659e29 100644 --- a/app/components/DashboardIcons/DashboardIcons.tsx +++ b/app/components/DashboardIcons/DashboardIcons.tsx @@ -10,7 +10,7 @@ import './styles.scss' const DashboardIcons = (props) => { - const { setPersonModalOpen } = props + const { setModal } = props const { applications } = useContext(DashboardContext) const { commsData } = useContext(CommsContext) @@ -46,7 +46,7 @@ const DashboardIcons = (props) => {
-
diff --git a/app/containers/ProfileContainer.tsx b/app/containers/ProfileContainer.tsx index f35c346fb..7dc4cbed0 100644 --- a/app/containers/ProfileContainer.tsx +++ b/app/containers/ProfileContainer.tsx @@ -2,16 +2,13 @@ import React, { useContext } from 'react'; import UserModal from '../modals/UserModal'; import SetAuth from '../modals/SetAuth'; import { DashboardContext } from '../context/DashboardContext'; +import { TModalSetter } from '../components/Occupied/types/Occupied'; -interface Props { - setOpen: React.Dispatch>; -} - -const ProfileContainer: React.FC = React.memo(({ setOpen }) => { +const ProfileContainer: React.FC = React.memo(({ setModal }) => { const { landingPage } = useContext(DashboardContext); - if (landingPage === 'dashBoard') return ; - return ; + if (landingPage === 'dashBoard') return ; + return ; }); export default ProfileContainer; diff --git a/app/modals/AddModal.tsx b/app/modals/AddModal.tsx index 1bbde592f..fcb611dac 100644 --- a/app/modals/AddModal.tsx +++ b/app/modals/AddModal.tsx @@ -3,6 +3,8 @@ import React, { useState, useContext, useCallback } from 'react'; import { DashboardContext } from '../context/DashboardContext'; import '../stylesheets/AddModal.scss'; +import { TModalSetter } from '../components/Occupied/types/Occupied'; + interface IFields { typeOfService: string; database: string; @@ -16,14 +18,10 @@ interface IDashboard { setApplications: any; } -interface AddModalProps { - setOpen: React.Dispatch>; -} - type InputElement = React.ChangeEvent; type FormElement = React.FormEvent; -const AddModal: React.FC = React.memo(({ setOpen }) => { +const AddModal: React.FC = React.memo(({ setModal }) => { const { addApp, setApplications }: IDashboard = useContext(DashboardContext); const [fields, setFields] = useState({ @@ -40,7 +38,9 @@ const AddModal: React.FC = React.memo(({ setOpen }) => { // const newApp = [name, database, URI, description, typeOfService]; // setApplications(prev => [...prev, ...newApp]) addApp(fields); - setOpen(false); // Close modal on submit + // setOpenModal(false); // Close modal on submit + // setModalType('') + setModal({isOpen:false,type:''}) }; // Handle form changes diff --git a/app/modals/AwsModal.tsx b/app/modals/AwsModal.tsx index ae5cb7a27..dbda782c4 100644 --- a/app/modals/AwsModal.tsx +++ b/app/modals/AwsModal.tsx @@ -3,6 +3,8 @@ import React, { useState, useContext, useCallback } from 'react'; import { DashboardContext } from '../context/DashboardContext'; import '../stylesheets/AwsModal.scss'; +import { TModalSetter } from '../components/Occupied/types/Occupied'; + interface AwsFields { typeOfService: string; instance: string; @@ -25,7 +27,7 @@ interface AddModalProps { type InputElement = React.ChangeEvent; type FormElement = React.FormEvent; -const AwsModal: React.FC = React.memo(({ setOpen }) => { +const AwsModal: React.FC = React.memo(({ setModal }) => { const { addAwsApp }: IDashboard = useContext(DashboardContext); // instance is instanceID @@ -44,7 +46,7 @@ const AwsModal: React.FC = React.memo(({ setOpen }) => { const handleSubmit = (event: FormElement) => { event.preventDefault(); addAwsApp(awsFields); - setOpen(false); // Close modal on submit + setModal({isOpen:false,type:''}) }; // Handle form changes diff --git a/app/modals/EnvModal.tsx b/app/modals/EnvModal.tsx index 14cf0656c..ecf4686f4 100644 --- a/app/modals/EnvModal.tsx +++ b/app/modals/EnvModal.tsx @@ -2,24 +2,17 @@ import React from 'react'; import { Button, Typography } from '@material-ui/core'; import '../stylesheets/EnvModal.scss'; import { CloudQueue, Computer } from '@material-ui/icons'; +import { TModalSetter } from '../components/Occupied/types/Occupied'; -interface EnvModalProps { - setOpen: React.Dispatch>; - setAddModalOpen: React.Dispatch>; - setAwsModalOpen: React.Dispatch>; -} +const EnvModal: React.FC = React.memo( + ({ setModal}) => { -const EnvModal: React.FC = React.memo( - ({ setOpen, setAddModalOpen, setAwsModalOpen }) => { return (
+
+
); @@ -48,7 +54,7 @@ const UserModal: React.FC = React.memo(({ setOpen }) => { setApplications(guestUser.services); setMode(guestUser.mode); ipcRenderer.sendSync('signOut'); - setOpen(false); + setModal({isOpen:false,type:''}) } }); From 26309117dd122932e39af75850b37a43faa31933 Mon Sep 17 00:00:00 2001 From: Mike Tagg Date: Sat, 27 Apr 2024 18:33:45 -0700 Subject: [PATCH 028/179] removed unused styles --- app/components/Occupied/Occupied.scss | 57 ++++----------------------- 1 file changed, 8 insertions(+), 49 deletions(-) diff --git a/app/components/Occupied/Occupied.scss b/app/components/Occupied/Occupied.scss index 4b266d744..785cce1d3 100644 --- a/app/components/Occupied/Occupied.scss +++ b/app/components/Occupied/Occupied.scss @@ -4,6 +4,14 @@ height: 100%; } +// MAIN DASHBOARD +.dashboardArea { + display: flex; + flex-direction: column; + justify-content: space-evenly; +} + + // HEADER .mainHeader { display: flex; @@ -19,13 +27,6 @@ color: $header; } -#leftHeader { - display: flex; - justify-content: center; - align-items: center; - margin-left: $logoPositionLeft - 30px; -} - #rightHeader { display: flex; justify-content: space-between; @@ -50,38 +51,6 @@ } } -#dashboard { - position: absolute; - top: 43px; - left: 300px; - margin-left: $logoPositionLeft - 34px; - - &:hover { - color: $gblue; - font-weight: 500; - cursor: pointer; - } -} - -.icon { - vertical-align: middle; - text-align: center; - color: $icon; - // background-color: $background; - box-sizing: content-box; - border-radius: 50%; - box-shadow: $boxshadow1; - line-height: 1.5; - white-space: nowrap; - display: inline-flex; - outline: 0; - border: none; - cursor: pointer; - position: relative; - min-height: auto; - white-space: nowrap; -} - .navIcon { font-size: 34px; vertical-align: middle; @@ -92,7 +61,6 @@ border-radius: 50%; line-height: 1.5; white-space: nowrap; - // display: inline-block; outline: 0; border: none; cursor: pointer; @@ -105,7 +73,6 @@ } #searchIcon { - // background-color: $background; font-size: 26px; font-weight: 400px; padding: 8px; @@ -317,14 +284,6 @@ select:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0px 1000px #000 inset; transition: background-color 5000s ease-in-out 0s; } - -// MAIN DASHBOARD -.dashboardArea { - display: flex; - flex-direction: column; - justify-content: space-evenly; -} - // DATABASE CARDS .cardContainer { display: flex; From fbd0a9be635a83892549a5b59d6b10631b3e4f6a Mon Sep 17 00:00:00 2001 From: Mike Tagg Date: Sat, 27 Apr 2024 18:34:54 -0700 Subject: [PATCH 029/179] removed commented out code --- app/modals/AddModal.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/app/modals/AddModal.tsx b/app/modals/AddModal.tsx index fcb611dac..88f1e8077 100644 --- a/app/modals/AddModal.tsx +++ b/app/modals/AddModal.tsx @@ -22,7 +22,7 @@ type InputElement = React.ChangeEvent; const AddModal: React.FC = React.memo(({ setModal }) => { - const { addApp, setApplications }: IDashboard = useContext(DashboardContext); + const { addApp }: IDashboard = useContext(DashboardContext); const [fields, setFields] = useState({ typeOfService: 'Docker', @@ -38,8 +38,6 @@ const AddModal: React.FC = React.memo(({ setModal }) => { // const newApp = [name, database, URI, description, typeOfService]; // setApplications(prev => [...prev, ...newApp]) addApp(fields); - // setOpenModal(false); // Close modal on submit - // setModalType('') setModal({isOpen:false,type:''}) }; From 7697e43f6cbdc1a86abc18dcc6217a2fd35ef2f9 Mon Sep 17 00:00:00 2001 From: Mike Tagg Date: Sat, 27 Apr 2024 19:16:16 -0700 Subject: [PATCH 030/179] Occupied component styling broken up and extracted to components Repeated styles inside of the occupied component were removed Styles unique to other components than occupied were extracted into files associated with folders of those componenets --- app/assets/search.svg | 1 - app/components/ApplicationsCard/styles.scss | 42 ++++ app/components/DashboardIcons/styles.scss | 118 ++++++++- app/components/FirstLaunch/FirstLaunch.scss | 147 +++++++++++ .../{ => FirstLaunch}/FirstLaunch.tsx | 5 +- app/components/Occupied/Occupied.scss | 230 ------------------ app/components/SearchBar/styles.scss | 13 + app/components/SignUp.tsx | 2 +- app/containers/LandingPageContainer.tsx | 2 +- app/stylesheets/Home.scss | 76 +++--- 10 files changed, 364 insertions(+), 272 deletions(-) delete mode 100644 app/assets/search.svg create mode 100644 app/components/FirstLaunch/FirstLaunch.scss rename app/components/{ => FirstLaunch}/FirstLaunch.tsx (84%) diff --git a/app/assets/search.svg b/app/assets/search.svg deleted file mode 100644 index cd27601f4..000000000 --- a/app/assets/search.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/components/ApplicationsCard/styles.scss b/app/components/ApplicationsCard/styles.scss index 6386d7bac..13001cc41 100644 --- a/app/components/ApplicationsCard/styles.scss +++ b/app/components/ApplicationsCard/styles.scss @@ -204,3 +204,45 @@ height: 55px; } } + +.cardLine { + background-color: $grey; + width: 85%; + border: none; + height: 1px; + margin-top: 20px; + margin-bottom: 15px; +} + +.cardFooter { + width: 90%; + display: flex; + height: 20px; + align-items: center; + margin-left: 18px; +} + +#cardFooterText { + color: $icon; + font-size: 11px; + margin: 0; + margin-left: 10px; +} + +.cardFooterIcon { + color: $icon; + font-size: 14px; + margin: 0; +} + +#databaseName { + margin-top: 14px; + margin-bottom: 0; + font-size: 40px; + width: 280px; +} + +#serviceName { + font-size: 11px; + margin-top: 6px; +} \ No newline at end of file diff --git a/app/components/DashboardIcons/styles.scss b/app/components/DashboardIcons/styles.scss index 8ff4de7a7..52c18b089 100644 --- a/app/components/DashboardIcons/styles.scss +++ b/app/components/DashboardIcons/styles.scss @@ -20,11 +20,127 @@ color: $ggreen; text-align: center; border-radius: 6px; - // padding: 5px 0; + font-size: 12px; + position: absolute; + z-index: 1; + top: 50px; + right: -14px; +} + +.dashboardIconArea .dashboardTooltip::after { + content: ''; + position: absolute; + bottom: 50px; + left: 35px; + border-width: 5px; + border-style: solid; + border-color: transparent transparent $background transparent; +} + +.navIcon { + font-size: 34px; + vertical-align: middle; + text-align: center; + color: $icon; + background-color: transparent; + box-sizing: content-box; + border-radius: 50%; + line-height: 1.5; + white-space: nowrap; + outline: 0; + border: none; + cursor: pointer; + position: relative; + min-height: auto; + white-space: nowrap; + margin: 5px; + margin-top: 15px; + padding: 5px; +} + +#dashboardIcon { + margin-top: 4px; + margin-left: -35px; + font-size: 26px; + padding: 8px; + + &:hover { + cursor: pointer; + box-shadow: $boxshadow3; + background-color: $background; + color: $ggreen; + } +} + +.notificationsIconArea { + position: relative; + display: inline-block; +} + +.notificationsIconArea:hover .notificationsTooltip { + visibility: visible; +} + +.notificationsIconArea .notificationsTooltip { + visibility: hidden; + width: 80px; + background-color: $background; + color: $gred; + text-align: center; + border-radius: 6px; + padding: 5px 0; font-size: 12px; /* Position the tooltip */ position: absolute; z-index: 1; top: 50px; right: -14px; +} + +.notificationsIconArea .notificationsTooltip::after { + content: ''; + position: absolute; + bottom: 37px; + left: 35px; + border-width: 5px; + border-style: solid; + border-color: transparent transparent $background transparent; +} + +#notificationsIcon { + margin-top: 4px; + margin-left: 2px; + font-size: 26px; + &:hover { + cursor: pointer; + box-shadow: $boxshadow3; + background-color: $background; + color: $gred; + } +} + +#personIcon { + margin-top: 4px; + margin-left: 2px; + font-size: 26px; + &:hover { + cursor: pointer; + box-shadow: $boxshadow3; + background-color: $background; + color: $gyellow; + } +} + +.personIconArea { + position: relative; + display: inline-block; +} + +.personIconArea:hover .personTooltip { + visibility: visible; +} + +.personIconArea .personTooltip { + color: $gyellow; + text-align: center; } \ No newline at end of file diff --git a/app/components/FirstLaunch/FirstLaunch.scss b/app/components/FirstLaunch/FirstLaunch.scss new file mode 100644 index 000000000..134d8cdd5 --- /dev/null +++ b/app/components/FirstLaunch/FirstLaunch.scss @@ -0,0 +1,147 @@ +@import '../../stylesheets/constants.scss'; + +.btns { + display: flex; + justify-content: space-around; +} + +.home { + background: $darkblue; + display: flex; + flex-direction: column; + align-content: center; + align-items: center; + justify-content: flex-start; + justify-items: center; + position: absolute; + margin-left: 50px; + padding-top: 160px; + top: 0; + left: 0; + width: 100vw; + height: 100vh; + opacity: 1; + + + .logo-container { + height: auto; + width: 40%; + max-width: 650px; + + img { + width: 100%; + transition: 0.3s ease-in; + + &:hover { + filter: brightness(0.7); + } + } + } + + h1 { + font-size: 325%; + letter-spacing: 2px; + } + + p { + margin: 15px 0; + color: white; + } + + // Get Started Button + .link { + font-size: 88%; + padding: 10px 17px; + letter-spacing: 0.5px; + text-decoration: none; + border-radius: 30px; + background-color: $navy; + color: #fff; + @include centerWithFlex(); + transition: 1s; + animation: glow linear 4s infinite; + + &:hover { + background-color: $hover; + opacity: 0.85; + animation: none; + } + } +} + +.welcome { + color: rgba(255, 255, 255, 0.801); + text-align: center; + h1 { + margin-bottom: 90px; + } + h2 { + margin-bottom: 33px; + } + .btns { + display: flex; + justify-content: space-around; + } + form { + flex-direction: column; + label { + width: 50%; + input { + padding: 5px 7px; + margin: 2px 0; + width: 100%; + } + } + button.needAccount { + all: initial; + font-family: 'Roboto'; + color: rgba(255, 255, 255, 0.801); + cursor: pointer; + } + } +} + +@keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@-moz-keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@-webkit-keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@-o-keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@-ms-keyframes fadeIn { + 0% { + opacity: 0; + } + 100% { + opacity: 1; + } +} \ No newline at end of file diff --git a/app/components/FirstLaunch.tsx b/app/components/FirstLaunch/FirstLaunch.tsx similarity index 84% rename from app/components/FirstLaunch.tsx rename to app/components/FirstLaunch/FirstLaunch.tsx index 374b3069d..d824d4ff0 100644 --- a/app/components/FirstLaunch.tsx +++ b/app/components/FirstLaunch/FirstLaunch.tsx @@ -1,5 +1,6 @@ import React, { useContext } from 'react'; -import { DashboardContext } from '../context/DashboardContext'; +import { DashboardContext } from '../../context/DashboardContext'; +import './FirstLaunch.scss' // THIS FILE IS NOT DOING ANYTHING RIGHT NOW const FirstLaunch: React.FC = React.memo(() => { @@ -8,7 +9,7 @@ const FirstLaunch: React.FC = React.memo(() => { return (
-

Welcome to Chronos!

+

Welcome to Chronos!

Would you like authentication?

-
- - {applications && - applications - .filter((db: any) => db[0].toLowerCase().includes(searchTerm.toLowerCase())) - .map((application: string[], i: any) => ( - - ))} - - setModal({isOpen:false,type:''})} +
+ +
+
+ + +
+
+ +
+ +
+
+ + {applications + .filter((db: any) => db[0].toLowerCase().includes(searchTerm.toLowerCase())) + .map((application: string[], i: any) => ( + + ))} + + setModal({isOpen:false,type:''})} + > + { + modal.type === 'envModal' ? + + : + modal.type === 'awsModal' ? + + : + modal.type === 'addModal' ? + + : + modal.type === 'personalModal' ? + + : + modal.type === 'serviceModal' ? + + : + <> + } + + + {/* setEnvModalOpen(false)}> + + + + setAwsModalOpen(false)}> + + + + setAddModalOpen(false)}> + + + + setPersonModalOpen(false)}> + + + + setServiceModalOpen(false)}> + + */}
+ ); }); From 1480d1779874e52cd8263a685e270181866c8c98 Mon Sep 17 00:00:00 2001 From: Mike Tagg Date: Sun, 28 Apr 2024 16:35:27 -0700 Subject: [PATCH 032/179] explanation for where connect db is function gets fired added --- app/components/ApplicationsCard/ApplicationsCard.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/app/components/ApplicationsCard/ApplicationsCard.tsx b/app/components/ApplicationsCard/ApplicationsCard.tsx index 1a296c61b..7182d88b0 100644 --- a/app/components/ApplicationsCard/ApplicationsCard.tsx +++ b/app/components/ApplicationsCard/ApplicationsCard.tsx @@ -45,6 +45,7 @@ const ApplicationsCard = (props) => { setAppIndex(i); setApp(selectedApp); setServicesData([]); + //When we open the service modal a connection is made to the db in a useEffect inside of the service modal component setModal({isOpen:true,type:'serviceModal'}) } } From 3e0afbf6d4f633e8d1ea87dd38ebab866e25b5fe Mon Sep 17 00:00:00 2001 From: Mike Tagg Date: Sun, 28 Apr 2024 16:36:46 -0700 Subject: [PATCH 033/179] explanations added --- app/containers/MainContainer.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/containers/MainContainer.tsx b/app/containers/MainContainer.tsx index c7f5ef3b6..13efa45c1 100644 --- a/app/containers/MainContainer.tsx +++ b/app/containers/MainContainer.tsx @@ -1,4 +1,4 @@ -import React, { useContext } from 'react'; +import React, { useContext,useState } from 'react'; import { Route, Routes } from 'react-router-dom'; import About from '../components/About'; import Contact from '../components/Contact'; From dae6b8b837b8feabd46021d2176b0bbe00f8ed20 Mon Sep 17 00:00:00 2001 From: Mike Tagg Date: Sun, 28 Apr 2024 16:37:28 -0700 Subject: [PATCH 034/179] explanations added --- app/context/ApplicationContext.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/context/ApplicationContext.tsx b/app/context/ApplicationContext.tsx index 2c87a1ea3..3f5f7a60f 100644 --- a/app/context/ApplicationContext.tsx +++ b/app/context/ApplicationContext.tsx @@ -41,12 +41,12 @@ const ApplicationContextProvider: React.FC = React.memo(props = // console.log('app when fetch services name: ', application); ipcRenderer.send('servicesRequest'); ipcRenderer.on('servicesResponse', (event: Electron.Event, data: any) => { + //data here refers to the data coming the services document of the database let result: any; result = JSON.parse(data); console.log('result from ipcrenderer services response is: ', result); // console.log('Calling setServicesData passing in above result. Current servicesData is the following: ', servicesData); setServicesData(result); - // console.log('Leaving fetchedServicesNames function.'); ipcRenderer.removeAllListeners('servicesResponse'); }); @@ -61,6 +61,7 @@ const ApplicationContextProvider: React.FC = React.memo(props = */ const connectToDB = useCallback((username: string, index: number, application: string, URI: string, databaseType: string) => { console.log('Hi, inside ApplicationContext, connectToDB function was invoked.'); + /* ipcRenderer is referring to electron. The connect string is processed in data.ts inside of the electron folder at the root of the project */ ipcRenderer.removeAllListeners('databaseConnected'); ipcRenderer.send('connect', username, index, URI, databaseType); ipcRenderer.on('databaseConnected', (event: Electron.Event, data: any) => { From 70ff8d0f8478d25dbc97369aec4e349513dba18e Mon Sep 17 00:00:00 2001 From: Mike Tagg Date: Sun, 28 Apr 2024 16:38:24 -0700 Subject: [PATCH 035/179] updated array destructured values with appropriate names --- app/modals/ServicesModal.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/modals/ServicesModal.tsx b/app/modals/ServicesModal.tsx index b16eadb55..ffd1e3b60 100644 --- a/app/modals/ServicesModal.tsx +++ b/app/modals/ServicesModal.tsx @@ -26,6 +26,7 @@ const ServicesModal: React.FC = React.memo(({ i, app }) => { const { user, applications } = useContext(DashboardContext); const { servicesData, connectToDB } = useContext(ApplicationContext); const [services, setServices] = useState>([]); + const [ cardName,dbType,dbURI,description,serviceType ] = applications[i] const toggleService = service => { if (services.includes(service)) { @@ -42,7 +43,7 @@ const ServicesModal: React.FC = React.memo(({ i, app }) => { // adding database type to make connection and fetchServiceNames more efficient useEffect(() => { console.log('Hi, inside useEffect in ServicesModal. Calling connectToDB function.'); - connectToDB(user, i, app, applications[i][2], applications[i][1]); + connectToDB(user, i, app, dbURI, dbType); }, [i]); From cff8f92d33a5054707a7914a8a735e29814d66ac Mon Sep 17 00:00:00 2001 From: Stephen Yang Date: Mon, 29 Apr 2024 10:48:49 -0700 Subject: [PATCH 036/179] start of modularizing modals --- app/{stylesheets => modals/AddModal}/AddModal.scss | 2 +- app/modals/{ => AddModal}/AddModal.tsx | 6 +++--- app/{stylesheets => modals/AwsModal}/AwsModal.scss | 2 +- app/modals/{ => AwsModal}/AwsModal.tsx | 6 +++--- app/{stylesheets => modals/EnvModal}/EnvModal.scss | 2 +- app/modals/{ => EnvModal}/EnvModal.tsx | 4 ++-- .../ServicesModal}/ServicesModal.scss | 2 +- app/modals/{ => ServicesModal}/ServicesModal.tsx | 6 +++--- app/modals/{ => SetAuth}/SetAuth.tsx | 4 ++-- app/{stylesheets => modals/UserModal}/UserModal.scss | 2 +- app/modals/{ => UserModal}/UserModal.tsx | 8 ++++---- 11 files changed, 22 insertions(+), 22 deletions(-) rename app/{stylesheets => modals/AddModal}/AddModal.scss (97%) rename app/modals/{ => AddModal}/AddModal.tsx (95%) rename app/{stylesheets => modals/AwsModal}/AwsModal.scss (97%) rename app/modals/{ => AwsModal}/AwsModal.tsx (97%) rename app/{stylesheets => modals/EnvModal}/EnvModal.scss (93%) rename app/modals/{ => EnvModal}/EnvModal.tsx (89%) rename app/{stylesheets => modals/ServicesModal}/ServicesModal.scss (97%) rename app/modals/{ => ServicesModal}/ServicesModal.tsx (94%) rename app/modals/{ => SetAuth}/SetAuth.tsx (85%) rename app/{stylesheets => modals/UserModal}/UserModal.scss (98%) rename app/modals/{ => UserModal}/UserModal.tsx (88%) diff --git a/app/stylesheets/AddModal.scss b/app/modals/AddModal/AddModal.scss similarity index 97% rename from app/stylesheets/AddModal.scss rename to app/modals/AddModal/AddModal.scss index ae427d91b..f1925d88c 100644 --- a/app/stylesheets/AddModal.scss +++ b/app/modals/AddModal/AddModal.scss @@ -1,4 +1,4 @@ -@import './constants.scss'; +@import '../../stylesheets/constants.scss'; .add-container { @include centerModal(30%, 500px); diff --git a/app/modals/AddModal.tsx b/app/modals/AddModal/AddModal.tsx similarity index 95% rename from app/modals/AddModal.tsx rename to app/modals/AddModal/AddModal.tsx index fcb611dac..c0f5d74c7 100644 --- a/app/modals/AddModal.tsx +++ b/app/modals/AddModal/AddModal.tsx @@ -1,9 +1,9 @@ /* eslint-disable jsx-a11y/label-has-associated-control */ import React, { useState, useContext, useCallback } from 'react'; -import { DashboardContext } from '../context/DashboardContext'; -import '../stylesheets/AddModal.scss'; +import { DashboardContext } from '../../context/DashboardContext'; +import './AddModal.scss'; -import { TModalSetter } from '../components/Occupied/types/Occupied'; +import { TModalSetter } from '../../components/Occupied/types/Occupied'; interface IFields { typeOfService: string; diff --git a/app/stylesheets/AwsModal.scss b/app/modals/AwsModal/AwsModal.scss similarity index 97% rename from app/stylesheets/AwsModal.scss rename to app/modals/AwsModal/AwsModal.scss index a012e65dd..69e77418c 100644 --- a/app/stylesheets/AwsModal.scss +++ b/app/modals/AwsModal/AwsModal.scss @@ -1,4 +1,4 @@ -@import './constants.scss'; +@import '../../stylesheets/constants.scss'; .add-container { @include centerModal(30%, 500px); diff --git a/app/modals/AwsModal.tsx b/app/modals/AwsModal/AwsModal.tsx similarity index 97% rename from app/modals/AwsModal.tsx rename to app/modals/AwsModal/AwsModal.tsx index dbda782c4..d2c9463f9 100644 --- a/app/modals/AwsModal.tsx +++ b/app/modals/AwsModal/AwsModal.tsx @@ -1,9 +1,9 @@ /* eslint-disable jsx-a11y/label-has-associated-control */ import React, { useState, useContext, useCallback } from 'react'; -import { DashboardContext } from '../context/DashboardContext'; -import '../stylesheets/AwsModal.scss'; +import { DashboardContext } from '../../context/DashboardContext'; +import './AwsModal.scss'; -import { TModalSetter } from '../components/Occupied/types/Occupied'; +import { TModalSetter } from '../../components/Occupied/types/Occupied'; interface AwsFields { typeOfService: string; diff --git a/app/stylesheets/EnvModal.scss b/app/modals/EnvModal/EnvModal.scss similarity index 93% rename from app/stylesheets/EnvModal.scss rename to app/modals/EnvModal/EnvModal.scss index 07b2a7af5..a033b92f2 100644 --- a/app/stylesheets/EnvModal.scss +++ b/app/modals/EnvModal/EnvModal.scss @@ -1,4 +1,4 @@ -@import './constants.scss'; +@import '../../stylesheets/constants.scss'; .add-container { @include centerModal(30%, 500px); diff --git a/app/modals/EnvModal.tsx b/app/modals/EnvModal/EnvModal.tsx similarity index 89% rename from app/modals/EnvModal.tsx rename to app/modals/EnvModal/EnvModal.tsx index ecf4686f4..77503c0a9 100644 --- a/app/modals/EnvModal.tsx +++ b/app/modals/EnvModal/EnvModal.tsx @@ -1,8 +1,8 @@ import React from 'react'; import { Button, Typography } from '@material-ui/core'; -import '../stylesheets/EnvModal.scss'; +import './EnvModal.scss'; import { CloudQueue, Computer } from '@material-ui/icons'; -import { TModalSetter } from '../components/Occupied/types/Occupied'; +import { TModalSetter } from '../../components/Occupied/types/Occupied'; const EnvModal: React.FC = React.memo( ({ setModal}) => { diff --git a/app/stylesheets/ServicesModal.scss b/app/modals/ServicesModal/ServicesModal.scss similarity index 97% rename from app/stylesheets/ServicesModal.scss rename to app/modals/ServicesModal/ServicesModal.scss index 15d84c736..92b4a7b80 100644 --- a/app/stylesheets/ServicesModal.scss +++ b/app/modals/ServicesModal/ServicesModal.scss @@ -1,4 +1,4 @@ -@import './constants.scss'; +@import '../../stylesheets/constants.scss'; .servicesContainer { width: 100px; diff --git a/app/modals/ServicesModal.tsx b/app/modals/ServicesModal/ServicesModal.tsx similarity index 94% rename from app/modals/ServicesModal.tsx rename to app/modals/ServicesModal/ServicesModal.tsx index b16eadb55..59d1d3b9b 100644 --- a/app/modals/ServicesModal.tsx +++ b/app/modals/ServicesModal/ServicesModal.tsx @@ -4,9 +4,9 @@ /* eslint-disable jsx-a11y/no-static-element-interactions */ import React, { useContext, useEffect, useState } from 'react'; import { Link } from 'react-router-dom'; -import { DashboardContext } from '../context/DashboardContext' -import { ApplicationContext } from '../context/ApplicationContext'; -import '../stylesheets/ServicesModal.scss'; +import { DashboardContext } from '../../context/DashboardContext' +import { ApplicationContext } from '../../context/ApplicationContext'; +import './ServicesModal.scss'; interface ServicesModalProps { i: number; diff --git a/app/modals/SetAuth.tsx b/app/modals/SetAuth/SetAuth.tsx similarity index 85% rename from app/modals/SetAuth.tsx rename to app/modals/SetAuth/SetAuth.tsx index a647a908c..67c75d3ea 100644 --- a/app/modals/SetAuth.tsx +++ b/app/modals/SetAuth/SetAuth.tsx @@ -1,6 +1,6 @@ import React, { useContext } from 'react'; -import { DashboardContext } from '../context/DashboardContext'; -import { TModalSetter } from '../components/Occupied/types/Occupied'; +import { DashboardContext } from '../../context/DashboardContext'; +import { TModalSetter } from '../../components/Occupied/types/Occupied'; const SetAuthModal: React.FC = React.memo(({ setModal }) => { const { updateLandingPage } = useContext(DashboardContext); diff --git a/app/stylesheets/UserModal.scss b/app/modals/UserModal/UserModal.scss similarity index 98% rename from app/stylesheets/UserModal.scss rename to app/modals/UserModal/UserModal.scss index ec4784798..ebfec87eb 100644 --- a/app/stylesheets/UserModal.scss +++ b/app/modals/UserModal/UserModal.scss @@ -1,4 +1,4 @@ -@import './constants.scss'; +@import '../../stylesheets/constants.scss'; .add-container { @include centerModal(30%, 500px); diff --git a/app/modals/UserModal.tsx b/app/modals/UserModal/UserModal.tsx similarity index 88% rename from app/modals/UserModal.tsx rename to app/modals/UserModal/UserModal.tsx index 756acb263..5731dfd64 100644 --- a/app/modals/UserModal.tsx +++ b/app/modals/UserModal/UserModal.tsx @@ -2,11 +2,11 @@ import React, { useContext, useState, useCallback } from 'react'; import { useNavigate } from 'react-router-dom'; import PersonIcon from '@material-ui/icons/Person'; -import { DashboardContext } from '../context/DashboardContext'; -import { guestUser } from '../context/helpers'; -import '../stylesheets/UserModal.scss'; +import { DashboardContext } from '../../context/DashboardContext'; +import { guestUser } from '../../context/helpers'; +import './UserModal.scss'; import { Button } from '@material-ui/core'; -import { TModalSetter } from '../components/Occupied/types/Occupied'; +import { TModalSetter } from '../../components/Occupied/types/Occupied'; const { ipcRenderer } = window.require('electron'); From 9527960bfb0fffb8458a3168dd06d0122a8c71ab Mon Sep 17 00:00:00 2001 From: Sofia Date: Mon, 29 Apr 2024 12:59:45 -0500 Subject: [PATCH 037/179] initial search bar feature --- app/components/Occupied/Occupied.tsx | 1 + app/components/TransferColumns.tsx | 10 +++++++++- app/modals/EnvModal.tsx | 3 +++ app/modals/UserModal.tsx | 22 +++++++++++----------- 4 files changed, 24 insertions(+), 12 deletions(-) diff --git a/app/components/Occupied/Occupied.tsx b/app/components/Occupied/Occupied.tsx index aec07cdf4..5508d6b69 100644 --- a/app/components/Occupied/Occupied.tsx +++ b/app/components/Occupied/Occupied.tsx @@ -67,6 +67,7 @@ const Occupied = React.memo(() => { + {/* is the card with the + in the middle */}
diff --git a/app/components/TransferColumns.tsx b/app/components/TransferColumns.tsx index dc0071b5e..5695318fd 100644 --- a/app/components/TransferColumns.tsx +++ b/app/components/TransferColumns.tsx @@ -6,7 +6,9 @@ import { EventContext } from '../context/EventContext'; import { DataGrid } from '@material-ui/data-grid'; import * as DashboardContext from '../context/DashboardContext'; import lightAndDark from './Styling'; -import { Button } from '@material-ui/core'; +import { Button, TextField } from '@material-ui/core'; +import SearchBar from './SearchBar'; + interface Params { service: string; @@ -26,6 +28,7 @@ const TransferColumns = React.memo(() => { const { eventData } = useContext(EventContext); const { service } = useParams() as Params; const { mode } = useContext(DashboardContext.DashboardContext); + const [searchTerm, setSearchTerm] = useState(''); const currentMode = mode === 'light' ? lightAndDark.lightModeText : lightAndDark.darkModeText; @@ -185,6 +188,9 @@ const TransferColumns = React.memo(() => { return ( <> +
+ { setTargetKeys(metrics); }} /> +
{selectedRows.length > 0 && (

Selected Rows:

diff --git a/app/modals/EnvModal.tsx b/app/modals/EnvModal.tsx index ecf4686f4..1f44d3faf 100644 --- a/app/modals/EnvModal.tsx +++ b/app/modals/EnvModal.tsx @@ -9,6 +9,7 @@ const EnvModal: React.FC = React.memo( return (
+
+ +
{user === 'guest' ? - <> - -



- -



- - : - <> - -



- + <> + +



+ +



+ + : + <> + +



+ } diff --git a/app/context/AwsContext.tsx b/app/context/AwsContext.tsx index 9af774559..966322582 100644 --- a/app/context/AwsContext.tsx +++ b/app/context/AwsContext.tsx @@ -23,6 +23,7 @@ interface AwsAppInfo { } const AwsContextProvider: React.FC = React.memo(({ children }) => { + const [awsData, setAwsData] = useState({ CPUUtilization: [], NetworkIn: [], NetworkOut: [], DiskReadBytes: [] }) const [awsEcsData, setAwsEcsData] = useState({}); const [awsEksData, setAwsEksData] = useState({}); From fb76bf47cb469c15b85fa0ce597b97694f6a7f8c Mon Sep 17 00:00:00 2001 From: Mike Tagg Date: Mon, 29 Apr 2024 18:30:52 -0700 Subject: [PATCH 040/179] unused props removed from memoized componetns --- app/containers/GraphsContainer.tsx | 2 +- app/containers/MainContainer.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/app/containers/GraphsContainer.tsx b/app/containers/GraphsContainer.tsx index 1cef4c01e..6ecf3049d 100644 --- a/app/containers/GraphsContainer.tsx +++ b/app/containers/GraphsContainer.tsx @@ -30,7 +30,7 @@ interface Params { service: string; } -const GraphsContainer: React.FC = React.memo(props => { +const GraphsContainer: React.FC = React.memo(() => { const navigate = useNavigate(); const { app, service } = useParams() as Params; const [live, setLive] = useState(false); diff --git a/app/containers/MainContainer.tsx b/app/containers/MainContainer.tsx index 13efa45c1..c3bfe9bfb 100644 --- a/app/containers/MainContainer.tsx +++ b/app/containers/MainContainer.tsx @@ -13,10 +13,11 @@ import AwsGraphsContainer from '../containers/AWSGraphsContainer'; import '../stylesheets/MainContainer.scss'; -const MainContainer = React.memo(() => { +const MainContainer = React.memo((props) => { const { mode, applications } = useContext(DashboardContext); const currentModeCSS = mode === 'light' ? lightAndDark.lightModeMain : lightAndDark.darkModeMain; + return ( <>
From 7593af1be27b981d8838449be92eba3ebf14eff6 Mon Sep 17 00:00:00 2001 From: Mike Tagg Date: Mon, 29 Apr 2024 18:33:48 -0700 Subject: [PATCH 041/179] console logs removed --- app/context/DashboardContext.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/app/context/DashboardContext.tsx b/app/context/DashboardContext.tsx index 0e01bc44c..af0e98bfb 100644 --- a/app/context/DashboardContext.tsx +++ b/app/context/DashboardContext.tsx @@ -44,6 +44,7 @@ const DashboardContextProvider = React.memo((props: any) => { // Initial user will always be the guest const [user, setUser] = useState('guest'); const [applications, setApplications] = useState([]); + console.log({applications}) const [mode, setMode] = useState('light'); @@ -54,16 +55,12 @@ const DashboardContextProvider = React.memo((props: any) => { const addApp = useCallback((fields: IFields) => { const { typeOfService, database, URI, name, description } = fields; - const newApp = [name, database, URI, description, typeOfService]; - console.log('what is the service that was passed into add app: ', typeOfService) + const result = ipcRenderer.sendSync( 'addApp', JSON.stringify([name, database, URI, description, typeOfService]) ); setApplications(result); - // console.log('applications: ', applications); - // console.log('new app to add: ', newApp); - // setApplications([...applications, newApp]); console.log('the current application that was added is : ', result); }, []); @@ -101,7 +98,7 @@ const DashboardContextProvider = React.memo((props: any) => { deleteApp, mode, setMode, - changeMode, + changeMode }} > {children} From b2bdf1d19796c67da145c8a64ec2d8cc79cffd06 Mon Sep 17 00:00:00 2001 From: Mike Tagg Date: Mon, 29 Apr 2024 18:34:52 -0700 Subject: [PATCH 042/179] button removed from material UI not being used --- app/modals/EnvModal.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/modals/EnvModal.tsx b/app/modals/EnvModal.tsx index ecf4686f4..d583b18ae 100644 --- a/app/modals/EnvModal.tsx +++ b/app/modals/EnvModal.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Button, Typography } from '@material-ui/core'; +import { Typography } from '@material-ui/core'; import '../stylesheets/EnvModal.scss'; import { CloudQueue, Computer } from '@material-ui/icons'; import { TModalSetter } from '../components/Occupied/types/Occupied'; From 81825c9ce8977ab63ea6d0cdf3256ff1bee7df1c Mon Sep 17 00:00:00 2001 From: Mike Tagg Date: Mon, 29 Apr 2024 18:40:08 -0700 Subject: [PATCH 043/179] styling added to example button --- app/stylesheets/SidebarContainer.scss | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/app/stylesheets/SidebarContainer.scss b/app/stylesheets/SidebarContainer.scss index 35230812f..a6fe87b0d 100644 --- a/app/stylesheets/SidebarContainer.scss +++ b/app/stylesheets/SidebarContainer.scss @@ -233,8 +233,9 @@ .example-button { height:100px; width:100px; - color:yellow; + color:whitesmoke; cursor:pointer; + font-weight: 600; } .example-button:hover { From bae36250aea226e0c4f476f1174bcfe9a6363bcf Mon Sep 17 00:00:00 2001 From: Mike Tagg Date: Mon, 29 Apr 2024 20:30:49 -0700 Subject: [PATCH 044/179] nav in graphs bar extracted into seperate component Nav was extracted for readabilty purposes. Attempting to separate the concerns in the graph container and increase understandability --- app/components/GraphNavBar/index.tsx | 119 +++++++++++++++++++++++++ app/containers/GraphsContainer.tsx | 127 +++++---------------------- 2 files changed, 141 insertions(+), 105 deletions(-) create mode 100644 app/components/GraphNavBar/index.tsx diff --git a/app/components/GraphNavBar/index.tsx b/app/components/GraphNavBar/index.tsx new file mode 100644 index 000000000..fd43c9965 --- /dev/null +++ b/app/components/GraphNavBar/index.tsx @@ -0,0 +1,119 @@ +import React , { useState,useContext } from 'react' +import { useNavigate } from 'react-router-dom' +import { ApplicationContext } from '../../context/ApplicationContext' +import { QueryContext } from '../../context/QueryContext' +import { CommsContext } from '../../context/CommsContext' +import { HealthContext } from '../../context/HealthContext' +import { Link } from 'react-router-dom'; + +const GraphNavBar = (props) => { + + const { chart,setChart,dockerData,inspect,setInspect } = props + const [ prevRoute, setPrevRoute ] = useState(''); + const { servicesData } = useContext(ApplicationContext); + const { selectedMetrics } = useContext(QueryContext); + const { commsData } = useContext(CommsContext) + const { services } = useContext(HealthContext) + + const navigate = useNavigate(); + + const routing = (route: string) => { + if (location.href.includes('communications')) { + if (prevRoute === '') navigate(`${servicesData[0].microservice}`); + else navigate(prevRoute); + } + setChart(route); + }; + + const getHealthAndEventComponents = () => { + const buttonList: JSX.Element[] = []; + if (selectedMetrics) { + selectedMetrics.forEach((element, id) => { + const categoryName = Object.keys(element)[0]; + let prefix; + if (categoryName === 'Event') { + prefix = 'event_'; + } else if (categoryName === 'books' || categoryName === 'customers' || categoryName === 'frontend' || categoryName === 'orders'){ + prefix = 'docker_'; + } else { + prefix = 'health_'; + } + buttonList.push( + + ); + }); + } + + return buttonList; + }; + + const HealthAndEventButtons: JSX.Element[] = getHealthAndEventComponents(); + + return ( + + ) +} + +export default GraphNavBar \ No newline at end of file diff --git a/app/containers/GraphsContainer.tsx b/app/containers/GraphsContainer.tsx index 6ecf3049d..c81057343 100644 --- a/app/containers/GraphsContainer.tsx +++ b/app/containers/GraphsContainer.tsx @@ -1,12 +1,11 @@ /* eslint-disable no-bitwise */ import React, { useEffect, useState, useContext } from 'react'; -import { useNavigate, useParams } from 'react-router-dom'; +import { useParams } from 'react-router-dom'; import { ApplicationContext } from '../context/ApplicationContext'; import { HealthContext } from '../context/HealthContext'; import { CommsContext } from '../context/CommsContext'; import { DockerContext } from '../context/DockerContext'; import { EventContext } from '../context/EventContext'; -import { QueryContext } from '../context/QueryContext'; import Header from '../components/Header'; import RequestTypesChart from '../charts/RequestTypesChart'; import ResponseCodesChart from '../charts/ResponseCodesChart'; @@ -21,8 +20,9 @@ import * as DashboardContext from '../context/DashboardContext'; import lightAndDark from '../components/Styling'; import DockerHealthContainer from './DockerHealthContainer'; +import GraphNavBar from '../components/GraphNavBar'; + import '../stylesheets/GraphsContainer.scss'; -import { Link } from 'react-router-dom'; import Inspect from './Inspect'; interface Params { @@ -31,20 +31,20 @@ interface Params { } const GraphsContainer: React.FC = React.memo(() => { - const navigate = useNavigate(); + const { app, service } = useParams() as Params; const [live, setLive] = useState(false); const { intervalID, setIntervalID } = useContext(ApplicationContext); - const { servicesData, getSavedMetrics } = useContext(ApplicationContext); - const { fetchHealthData, setHealthData, services } = useContext(HealthContext); + const { getSavedMetrics } = useContext(ApplicationContext); + const { fetchHealthData, setHealthData } = useContext(HealthContext); const { setDockerData, dockerData } = useContext(DockerContext); const { fetchEventData, setEventData } = useContext(EventContext); // const { fetchKafkaEventData, setKafkaEventData } = useContext(EventContext); // const { fetchKubernetesEventData, setKubernetesEventData } = useContext(EventContext); - const { fetchCommsData, commsData } = useContext(CommsContext); - const { selectedMetrics } = useContext(QueryContext); + const { fetchCommsData } = useContext(CommsContext); + // const { selectedMetrics } = useContext(QueryContext); const [chart, setChart] = useState('all'); - const [prevRoute, setPrevRoute] = useState(''); + // const [prevRoute, setPrevRoute] = useState(''); const { mode } = useContext(DashboardContext.DashboardContext); let [inspect, setInspect] = useState(false); @@ -94,14 +94,6 @@ const GraphsContainer: React.FC = React.memo(() => { //random variable to hold the light or dark mode of the display?..ok....sure const currentMode = mode === 'light' ? lightAndDark.lightModeText : lightAndDark.darkModeText; - const routing = (route: string) => { - if (location.href.includes('communications')) { - if (prevRoute === '') navigate(`${servicesData[0].microservice}`); - else navigate(prevRoute); - } - setChart(route); - }; - const stringToColour = (string: string, recurses = 0) => { if (recurses > 20) return string; function hashString(str: string) { @@ -128,96 +120,21 @@ const GraphsContainer: React.FC = React.memo(() => { return contrastYiq(string); }; - const getHealthAndEventComponents = () => { - const buttonList: JSX.Element[] = []; - if (selectedMetrics) { - selectedMetrics.forEach((element, id) => { - const categoryName = Object.keys(element)[0]; - let prefix; - if (categoryName === 'Event') { - prefix = 'event_'; - } else if (categoryName === 'books' || categoryName === 'customers' || categoryName === 'frontend' || categoryName === 'orders'){ - prefix = 'docker_'; - } else { - prefix = 'health_'; - } - buttonList.push( - - ); - }); - } - - return buttonList; - }; - - const HealthAndEventButtons: JSX.Element[] = getHealthAndEventComponents(); - return ( <> - -
+ +
{inspect && }
{chart === 'communications' ? ( From 3b55a6e915a211e71b34d18d9be93986cda10463 Mon Sep 17 00:00:00 2001 From: Mike Tagg Date: Tue, 30 Apr 2024 09:00:35 -0700 Subject: [PATCH 045/179] extracted string to color function into helper folder The string to colour function was moved to facilitate easier navigation of the graph container. Additionally since it is only a function and not a react FC it could be imoprted into the three components that use it instead of passed down as props. Doing this added some simplicity to the types in the props --- app/containers/DockerHealthContainer.tsx | 4 +- app/containers/EventContainer.tsx | 4 +- .../{ => GraphsContainer}/GraphsContainer.tsx | 84 +++++++------------ .../GraphsContainer/helpers/index.ts | 27 ++++++ app/containers/HealthContainer.tsx | 5 +- app/containers/MainContainer.tsx | 2 +- 6 files changed, 66 insertions(+), 60 deletions(-) rename app/containers/{ => GraphsContainer}/GraphsContainer.tsx (64%) create mode 100644 app/containers/GraphsContainer/helpers/index.ts diff --git a/app/containers/DockerHealthContainer.tsx b/app/containers/DockerHealthContainer.tsx index cc30c727d..44f0eb1d6 100644 --- a/app/containers/DockerHealthContainer.tsx +++ b/app/containers/DockerHealthContainer.tsx @@ -4,10 +4,10 @@ import { QueryContext } from '../context/QueryContext'; import GrafanaEventChart from '../charts/GrafanaEventChart'; import { Button } from '@material-ui/core'; import { useParams } from 'react-router-dom'; +import { stringToColour as colourGenerator } from './GraphsContainer/helpers'; interface HealthContainerProps { sizing: string; - colourGenerator: Function; category: string; } @@ -32,7 +32,7 @@ const DockerHealthContainer: React.FC = React.memo(props = const { selectedMetrics } = useContext(QueryContext); const { service } = useParams() as Params; const [healthChartsArr, setHealthChartsArr] = useState([]); - const { sizing, colourGenerator, category } = props; + const { sizing, category } = props; const [currIndex, setCurrIndex] = useState(0); const [currChunk, setCurrChunk] = useState([]); const chunkSize = 7; diff --git a/app/containers/EventContainer.tsx b/app/containers/EventContainer.tsx index 772197866..aa89c32e1 100644 --- a/app/containers/EventContainer.tsx +++ b/app/containers/EventContainer.tsx @@ -6,10 +6,10 @@ import { QueryContext } from '../context/QueryContext'; import EventChart from '../charts/EventChart'; import { Button } from '@material-ui/core'; import GrafanaEventChart from '../charts/GrafanaEventChart'; +import { stringToColour as colourGenerator } from './GraphsContainer/helpers'; interface EventContainerProps { sizing: string; - colourGenerator: Function; } interface Params { @@ -32,7 +32,7 @@ const EventContainer: React.FC = React.memo(props => { const { eventData } = useContext(EventContext); const { selectedMetrics } = useContext(QueryContext); const { service } = useParams() as Params; - const { sizing, colourGenerator } = props; + const { sizing } = props; // eventChartsArr contains all charts of all metrics const [eventChartsArr, setEventChartsArr] = useState([]); const [currIndex, setCurrIndex] = useState(0); diff --git a/app/containers/GraphsContainer.tsx b/app/containers/GraphsContainer/GraphsContainer.tsx similarity index 64% rename from app/containers/GraphsContainer.tsx rename to app/containers/GraphsContainer/GraphsContainer.tsx index c81057343..13383b87a 100644 --- a/app/containers/GraphsContainer.tsx +++ b/app/containers/GraphsContainer/GraphsContainer.tsx @@ -1,29 +1,29 @@ /* eslint-disable no-bitwise */ import React, { useEffect, useState, useContext } from 'react'; import { useParams } from 'react-router-dom'; -import { ApplicationContext } from '../context/ApplicationContext'; -import { HealthContext } from '../context/HealthContext'; -import { CommsContext } from '../context/CommsContext'; -import { DockerContext } from '../context/DockerContext'; -import { EventContext } from '../context/EventContext'; -import Header from '../components/Header'; -import RequestTypesChart from '../charts/RequestTypesChart'; -import ResponseCodesChart from '../charts/ResponseCodesChart'; -import TrafficChart from '../charts/TrafficChart'; -import RouteChart from '../charts/RouteChart'; -import LogsTable from '../charts/LogsTable'; -import EventContainer from './EventContainer'; -import TransferColumns from '../components/TransferColumns'; -import HealthContainer from './HealthContainer'; -import ModifyMetrics from './ModifyMetricsContainer'; -import * as DashboardContext from '../context/DashboardContext'; -import lightAndDark from '../components/Styling'; -import DockerHealthContainer from './DockerHealthContainer'; +import { ApplicationContext } from '../../context/ApplicationContext'; +import { HealthContext } from '../../context/HealthContext'; +import { CommsContext } from '../../context/CommsContext'; +import { DockerContext } from '../../context/DockerContext'; +import { EventContext } from '../../context/EventContext'; +import Header from '../../components/Header'; +import RequestTypesChart from '../../charts/RequestTypesChart'; +import ResponseCodesChart from '../../charts/ResponseCodesChart'; +import TrafficChart from '../../charts/TrafficChart'; +import RouteChart from '../../charts/RouteChart'; +import LogsTable from '../../charts/LogsTable'; +import EventContainer from '../EventContainer'; +import TransferColumns from '../../components/TransferColumns'; +import HealthContainer from '../HealthContainer'; +import ModifyMetrics from '../ModifyMetricsContainer'; +import * as DashboardContext from '../../context/DashboardContext'; +import lightAndDark from '../../components/Styling'; +import DockerHealthContainer from '../DockerHealthContainer'; -import GraphNavBar from '../components/GraphNavBar'; +import GraphNavBar from '../../components/GraphNavBar'; -import '../stylesheets/GraphsContainer.scss'; -import Inspect from './Inspect'; +import '../../stylesheets/GraphsContainer.scss'; +import Inspect from '../Inspect'; interface Params { app: any; @@ -94,34 +94,9 @@ const GraphsContainer: React.FC = React.memo(() => { //random variable to hold the light or dark mode of the display?..ok....sure const currentMode = mode === 'light' ? lightAndDark.lightModeText : lightAndDark.darkModeText; - const stringToColour = (string: string, recurses = 0) => { - if (recurses > 20) return string; - function hashString(str: string) { - let hash = 0; - for (let i = 0; i < str.length; i++) { - hash = str.charCodeAt(i) + ((hash << 5) - hash); - } - let colour = '#'; - for (let i = 0; i < 3; i++) { - const value = (hash >> (i * 8)) & 0xff; - colour += `00${value.toString(16)}`.substring(-2); - } - return colour; - } - function contrastYiq(color: string) { - const num = parseInt(color.slice(1), 16); - const r = (num >>> 16) & 0xff; - const g = (num >>> 8) & 0xff; - const b = num & 0xff; - const yiq = (r * 299 + g * 587 + b * 114) / 1000; - return yiq <= 50 ? stringToColour(color, recurses + 1) : color; - } - for (let salt = 0; salt < 5; salt++) string = hashString(string); - return contrastYiq(string); - }; - return ( <> + { inspect={inspect} setInspect={setInspect} /> -
+ {inspect && } +
{chart === 'communications' ? (
@@ -155,22 +132,25 @@ const GraphsContainer: React.FC = React.memo(() => { )} {chart.startsWith('health_') && ( )} {chart.startsWith('event_') && ( <> - + )} {/* docker charts */} {chart.startsWith('docker_') && ( <> - + )} diff --git a/app/containers/GraphsContainer/helpers/index.ts b/app/containers/GraphsContainer/helpers/index.ts new file mode 100644 index 000000000..4fa55ed50 --- /dev/null +++ b/app/containers/GraphsContainer/helpers/index.ts @@ -0,0 +1,27 @@ + + +export const stringToColour = (string: string, recurses = 0) => { + if (recurses > 20) return string; + function hashString(str: string) { + let hash = 0; + for (let i = 0; i < str.length; i++) { + hash = str.charCodeAt(i) + ((hash << 5) - hash); + } + let colour = '#'; + for (let i = 0; i < 3; i++) { + const value = (hash >> (i * 8)) & 0xff; + colour += `00${value.toString(16)}`.substring(-2); + } + return colour; + } + function contrastYiq(color: string) { + const num = parseInt(color.slice(1), 16); + const r = (num >>> 16) & 0xff; + const g = (num >>> 8) & 0xff; + const b = num & 0xff; + const yiq = (r * 299 + g * 587 + b * 114) / 1000; + return yiq <= 50 ? stringToColour(color, recurses + 1) : color; + } + for (let salt = 0; salt < 5; salt++) string = hashString(string); + return contrastYiq(string); +}; \ No newline at end of file diff --git a/app/containers/HealthContainer.tsx b/app/containers/HealthContainer.tsx index add7130de..ce5d37c58 100644 --- a/app/containers/HealthContainer.tsx +++ b/app/containers/HealthContainer.tsx @@ -3,12 +3,11 @@ import { HealthContext } from '../context/HealthContext'; import { QueryContext } from '../context/QueryContext'; import HealthChart from '../charts/HealthChart'; import { useParams } from 'react-router-dom'; +import { stringToColour as colourGenerator } from './GraphsContainer/helpers'; interface HealthContainerProps { sizing: string; - colourGenerator: Function; category: string; - currentService: string; } interface Params { @@ -24,7 +23,7 @@ const HealthContainer: React.FC = React.memo(props => { const { selectedMetrics } = useContext(QueryContext); const { service } = useParams() as Params; const [healthChartsArr, setHealthChartsArr] = useState([]); - const { category, sizing, colourGenerator } = props; + const { category, sizing } = props; /** * This function filters the selectedMetrics array down to only metrics that match the category of this instance of HealthContainer. * Once that has finished, it then filters the healthData down to the current category and the filteredMetrics. diff --git a/app/containers/MainContainer.tsx b/app/containers/MainContainer.tsx index c3bfe9bfb..5f601f45f 100644 --- a/app/containers/MainContainer.tsx +++ b/app/containers/MainContainer.tsx @@ -5,7 +5,7 @@ import Contact from '../components/Contact'; import Settings from '../components/Settings'; import Occupied from '../components/Occupied/Occupied'; import lightAndDark from '../components/Styling'; -import GraphsContainer from './GraphsContainer'; +import GraphsContainer from './GraphsContainer/GraphsContainer'; import { DashboardContext } from '../context/DashboardContext'; import SignUp from '../components/SignUp'; import Login from '../components/Login'; From 1e2ee138c7c7ca904c2a3f88558f6d4c5376e85a Mon Sep 17 00:00:00 2001 From: Mike Tagg Date: Tue, 30 Apr 2024 09:41:00 -0700 Subject: [PATCH 046/179] Metric containers now rendered through ternary Charts are now conditionally rendered with a ternary instead of individal truthy checks to increase readablity and dryness of code --- .../GraphsContainer/GraphsContainer.tsx | 27 +++++++++---------- 1 file changed, 12 insertions(+), 15 deletions(-) diff --git a/app/containers/GraphsContainer/GraphsContainer.tsx b/app/containers/GraphsContainer/GraphsContainer.tsx index 13383b87a..29a76074d 100644 --- a/app/containers/GraphsContainer/GraphsContainer.tsx +++ b/app/containers/GraphsContainer/GraphsContainer.tsx @@ -130,30 +130,27 @@ const GraphsContainer: React.FC = React.memo(() => {
)} - {chart.startsWith('health_') && ( + {chart.startsWith('health_') ? - )} - {chart.startsWith('event_') && ( - <> - - - - )} - {/* docker charts */} - {chart.startsWith('docker_') && ( - <> + : + chart.startsWith('event_') ? + + : + chart.startsWith('docker_') ? + + : + <> - - )} + } {chart === 'modifyMetrics' && }
)} From a6f09a95642c25c41d3d423806b38aebce889c7e Mon Sep 17 00:00:00 2001 From: TedPham397 Date: Tue, 30 Apr 2024 09:41:57 -0700 Subject: [PATCH 047/179] created About folder to modularizing About.tsx --- app/components/About/About.tsx | 24 ++++++++++ app/components/About/PastContributors.tsx | 28 ++++++++++++ app/components/About/StylingContext.tsx | 9 ++++ app/components/About/TeamMembers.tsx | 28 ++++++++++++ app/components/About/style.scss | 53 +++++++++++++++++++++++ 5 files changed, 142 insertions(+) create mode 100644 app/components/About/About.tsx create mode 100644 app/components/About/PastContributors.tsx create mode 100644 app/components/About/StylingContext.tsx create mode 100644 app/components/About/TeamMembers.tsx create mode 100644 app/components/About/style.scss diff --git a/app/components/About/About.tsx b/app/components/About/About.tsx new file mode 100644 index 000000000..c3452accc --- /dev/null +++ b/app/components/About/About.tsx @@ -0,0 +1,24 @@ +import React from 'react'; +import './style.scss'; +import TeamMembers from './TeamMembers'; +import PastContributors from './PastContributors'; + +const About: React.FC = React.memo(() => { + return ( +
+
+

About

+

+ The Chronos Team has a passion for building tools that are powerful, beautifully + designed, and easy to use. Chronos was conceived as an Open Source endeavor that directly benefits the developer + community. It can also monitor applications deployed using AWS, EC2, and ECS from Amazon. +

+

+ + +
+
+ ); +}); + +export default About; \ No newline at end of file diff --git a/app/components/About/PastContributors.tsx b/app/components/About/PastContributors.tsx new file mode 100644 index 000000000..9cad8330d --- /dev/null +++ b/app/components/About/PastContributors.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { useStylingContext } from './StylingContext'; + +const contributors = [ + 'Snow', 'Taylor', 'Tim', 'Roberto', 'Nachiket', 'Tiffany', 'Bruno', 'Danny', 'Vince', + 'Matt', 'Derek', 'Kit', 'Grace', 'Jen', 'Patty', 'Stella', 'Michael', 'Ronelle', 'Todd', + 'Greg', 'Brianna', 'Brian', 'Alon', 'Alan', 'Ousman', 'Ben', 'Chris', 'Jenae', 'Tim', + 'Kirk', 'Jess', 'William', 'Alexander', 'Elisa', 'Josh', 'Troy', 'Gahl', 'Brisa', 'Kelsi', + 'Lucie', 'Jeffrey', 'Justin' +]; + +const PastContributors: React.FC = () => { + const currentMode = useStylingContext(); + + return ( +
+

+ Past Contributors +

+

+ {contributors.join(', ')} +

+
+
+ ); +}; + +export default PastContributors; \ No newline at end of file diff --git a/app/components/About/StylingContext.tsx b/app/components/About/StylingContext.tsx new file mode 100644 index 000000000..b99f255f0 --- /dev/null +++ b/app/components/About/StylingContext.tsx @@ -0,0 +1,9 @@ +import { useContext } from 'react'; +import { DashboardContext } from '../../context/DashboardContext'; +import lightAndDark from '../Styling'; + +export const useStylingContext = () => { + const { mode } = useContext(DashboardContext); + const currentMode = mode === 'light' ? lightAndDark.lightModeText : lightAndDark.darkModeText; + return currentMode; +}; \ No newline at end of file diff --git a/app/components/About/TeamMembers.tsx b/app/components/About/TeamMembers.tsx new file mode 100644 index 000000000..a7959fe04 --- /dev/null +++ b/app/components/About/TeamMembers.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { useStylingContext } from './StylingContext'; + +const names = ['Haoyu', 'Eisha', 'Edwin', 'Tyler']; + +const TeamMembers: React.FC = () => { + const currentMode = useStylingContext(); + + const nameList = names.map(name => ( + +

{name}

+ + )); + + return ( +
+

+ Current Version Authors +

+
+ {nameList} +
+
+
+ ); +}; + +export default TeamMembers; \ No newline at end of file diff --git a/app/components/About/style.scss b/app/components/About/style.scss new file mode 100644 index 000000000..558adaa59 --- /dev/null +++ b/app/components/About/style.scss @@ -0,0 +1,53 @@ +@import '../../stylesheets/constants.scss'; + +.about { + min-width: 421px; + max-width: 600px; + margin: auto 20px; + display: flex; + justify-content: center; + align-items: center; + width: 90%; + height: 100%; +} + +.blurb { + width: 100%; + margin: auto; + display: flex; + flex-direction: column; + justify-content: left; + border-radius: 10px; + border: none; + box-shadow: $boxshadow2; + padding: 30px; + background-color: $background; // Use your theme's background variable + + &:hover { + background-color: rgba(255, 255, 255, 0.1); + } +} + +.mainTitle, .title { + font-size: 18px; + color: $textColor; + text-align: left; + font-weight: 600; +} + +.mainTitle { + font-size: 36px; // Larger font for the main title +} + +.text { + font-size: 16px; + color: $textColor; + text-align: left; + font-weight: 400; + margin-bottom: 20px; // Add some space after paragraphs +} + +#OSPNames { + margin-top: 10px; + margin-bottom: 20px; // Space before the past contributors section +} \ No newline at end of file From e889a46e8657a26e1811fbefb40476b90a2406f6 Mon Sep 17 00:00:00 2001 From: TedPham397 Date: Tue, 30 Apr 2024 10:03:24 -0700 Subject: [PATCH 048/179] added modulized About, added Contact folder for next modulization --- app/components/Contact/Contact.tsx | 0 app/components/Contact/ContactForm.tsx | 0 app/components/Contact/style.scss | 0 3 files changed, 0 insertions(+), 0 deletions(-) create mode 100644 app/components/Contact/Contact.tsx create mode 100644 app/components/Contact/ContactForm.tsx create mode 100644 app/components/Contact/style.scss diff --git a/app/components/Contact/Contact.tsx b/app/components/Contact/Contact.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/app/components/Contact/ContactForm.tsx b/app/components/Contact/ContactForm.tsx new file mode 100644 index 000000000..e69de29bb diff --git a/app/components/Contact/style.scss b/app/components/Contact/style.scss new file mode 100644 index 000000000..e69de29bb From 4db81c37e31d0fdaf520bf94da52b5b7debe5493 Mon Sep 17 00:00:00 2001 From: Stephen Yang Date: Tue, 30 Apr 2024 10:05:05 -0700 Subject: [PATCH 049/179] modularized addmodal and servicesmodal components --- app/modals/AddModal/AddModal.tsx | 12 ++++-- app/modals/AddModal/ServiceDBType.tsx | 36 ++++++++++++++++ app/modals/AddModal/ServicesDescription.tsx | 47 +++++++++++++++++++++ app/modals/ServicesModal/ServicesLink.tsx | 47 +++++++++++++++++++++ app/modals/ServicesModal/ServicesModal.tsx | 22 ++++------ 5 files changed, 146 insertions(+), 18 deletions(-) create mode 100644 app/modals/AddModal/ServiceDBType.tsx create mode 100644 app/modals/AddModal/ServicesDescription.tsx create mode 100644 app/modals/ServicesModal/ServicesLink.tsx diff --git a/app/modals/AddModal/AddModal.tsx b/app/modals/AddModal/AddModal.tsx index 2c7be7185..571283ff9 100644 --- a/app/modals/AddModal/AddModal.tsx +++ b/app/modals/AddModal/AddModal.tsx @@ -4,6 +4,8 @@ import { DashboardContext } from '../../context/DashboardContext'; import './AddModal.scss'; import { TModalSetter } from '../../components/Occupied/types/Occupied'; +import ServiceDBType from './ServiceDBType'; +import ServicesDescription from'./ServicesDescription'; interface IFields { typeOfService: string; @@ -60,7 +62,8 @@ const AddModal: React.FC = React.memo(({ setModal }) => {

Required*

-
+ + {/*
@@ -84,8 +87,9 @@ const AddModal: React.FC = React.memo(({ setModal }) => { -
-
+
*/} + + {/*
@@ -121,7 +125,7 @@ const AddModal: React.FC = React.memo(({ setModal }) => { onChange={e => handleChange(e)} placeholder="Add a short description" /> -
+
*/}
diff --git a/app/modals/AddModal/ServiceDBType.tsx b/app/modals/AddModal/ServiceDBType.tsx new file mode 100644 index 000000000..34f3cf071 --- /dev/null +++ b/app/modals/AddModal/ServiceDBType.tsx @@ -0,0 +1,36 @@ +import React from 'react'; + + +const ServiceDBType = (props) => { + return ( + <> +
+ + +
+
+ + +
+ + ) +} + +export default ServiceDBType; \ No newline at end of file diff --git a/app/modals/AddModal/ServicesDescription.tsx b/app/modals/AddModal/ServicesDescription.tsx new file mode 100644 index 000000000..a36cae142 --- /dev/null +++ b/app/modals/AddModal/ServicesDescription.tsx @@ -0,0 +1,47 @@ +import React from 'react'; + +const ServicesDescription = (props) => { + return ( + <> +
+ + props.handleChange(e)} + placeholder="Database URI" + required + /> +
+
+ + props.handleChange(e)} + placeholder="Add a name for your new service" + required + /> +
+
+ +