diff --git a/app/App.tsx b/app/App.tsx index ee3b69e54..5e8ed6efc 100644 --- a/app/App.tsx +++ b/app/App.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import Splash from './components/Splash/Splash'; -import DashboardContainer from './containers/DashboardContainer'; -import './stylesheets/scrollBar.scss'; +import DashboardContainer from './containers/DashboardContainer/DashboardContainer'; +import './index.scss'; // this is the fitness gram pacer test diff --git a/app/charts/GrafanaEventChart.tsx b/app/charts/GrafanaEventChart.tsx deleted file mode 100644 index cff8f9c27..000000000 --- a/app/charts/GrafanaEventChart.tsx +++ /dev/null @@ -1,136 +0,0 @@ -import React, { useState } from 'react'; -import { all, solo as soloStyle } from './sizeSwitch'; -import '../stylesheets/GrafanaGraph.scss'; - -interface EventChartProps { - metricName: string; - token: string; -} - - -type TimeFrame = '5m' | '15m' | '30m' | '1h' | '2h' | '1d' | '2d'; - - - -/** - * @params {EventChartProps} props - the props object containing relevant data. - * @desc Handles k8s and container metrics. Memoized component to generate event chart with formatted data - * @returns {JSX.Element} The JSX element with the event chart. - */ -const GrafanaEventChart: React.FC = React.memo(props => { - const { metricName, token } = props; - const [graphType, setGraphType] = useState("timeseries"); - const [type, setType] = useState(['timeserie']); - const [timeFrame, setTimeFrame] = useState('5m'); - - // console.log("graphType: ", graphType) - // console.log("type: ", type) - // console.log("inside GrafanaEventChart") - - // console.log("metricName: ", metricName) - let uid = metricName.replace(/.*\/.*\//g, '') - if (uid.length >= 40) { - uid = metricName.slice(metricName.length - 39); - } - - let parsedName = metricName.replace(/.*\/.*\//g, '') - // console.log("uid: ", uid) - // console.log("parsedName: ", parsedName) - - const handleSelectionChange = async (event) => { - setType([...type, graphType]); - await fetch('http://localhost:1111/api/updateDashboard', { - method: 'POST', - headers: { - 'Content-Type': 'application/json', - }, - body: JSON.stringify({ graphType: event.target.value, metric: metricName, token: token }), - }) - console.log("event.target.value: ", event.target.value) - setGraphType(event.target.value); - } - - - return ( -
-

{`${parsedName} --- ${graphType}`}

-
- - - - - -
- {/* create chart using grafana iframe tag*/} - {/* {type[type.length - 1] !== graphType ? - - : } */} - {graphType === "timeseries" ? TimeSeries(uid, parsedName, graphType, timeFrame) : - graphType === "barchart" ? BarChart(uid, parsedName, graphType, timeFrame) : - graphType === "stat" ? Stat(uid, parsedName, graphType, timeFrame) : - graphType === "gauge" ? Gauge(uid, parsedName, graphType, timeFrame) : - graphType === "table" ? Table(uid, parsedName, graphType, timeFrame) : - graphType === "histogram" ? Histogram(uid, parsedName, graphType, timeFrame) : - graphType === "piechart" ? PieChart(uid, parsedName, graphType, timeFrame) : - graphType === "alertlist" ? AlertList(uid, parsedName, graphType, timeFrame) : - null} - -
- ); -}); - -const TimeSeries = (uid, parsedName, graphType, timeFrame) => { - return <> - -
- -} - -const BarChart = (uid, parsedName, graphType, timeFrame) => { - return -} - -const Stat = (uid, parsedName, graphType, timeFrame) => { - return -} - -const Gauge = (uid, parsedName, graphType, timeFrame) => { - return -} - -const Table = (uid, parsedName, graphType, timeFrame) => { - return -} - -const Histogram = (uid, parsedName, graphType, timeFrame) => { - return -} - -const PieChart = (uid, parsedName, graphType, timeFrame) => { - return -} - -const AlertList = (uid, parsedName, graphType, timeFrame) => { - return -} -export default GrafanaEventChart; diff --git a/app/charts/GrafanaEventChart/GrafanaEventChart.tsx b/app/charts/GrafanaEventChart/GrafanaEventChart.tsx new file mode 100644 index 000000000..4728e7d96 --- /dev/null +++ b/app/charts/GrafanaEventChart/GrafanaEventChart.tsx @@ -0,0 +1,196 @@ +import React, { useState } from 'react'; +import { all, solo as soloStyle } from '../sizeSwitch'; +import './styles.scss'; + +interface EventChartProps { + metricName: string; + token: string; +} + +type TimeFrame = '5m' | '15m' | '30m' | '1h' | '2h' | '1d' | '2d'; + +/** + * @params {EventChartProps} props - the props object containing relevant data. + * @desc Handles k8s and container metrics. Memoized component to generate event chart with formatted data + * @returns {JSX.Element} The JSX element with the event chart. + */ +const GrafanaEventChart: React.FC = React.memo(props => { + const { metricName, token } = props; + const [graphType, setGraphType] = useState('timeseries'); + const [type, setType] = useState(['timeserie']); + const [timeFrame, setTimeFrame] = useState('5m'); + + // console.log("graphType: ", graphType) + // console.log("type: ", type) + // console.log("inside GrafanaEventChart") + + // console.log("metricName: ", metricName) + let uid = metricName.replace(/.*\/.*\//g, ''); + if (uid.length >= 40) { + uid = metricName.slice(metricName.length - 39); + } + + let parsedName = metricName.replace(/.*\/.*\//g, ''); + // console.log("uid: ", uid) + // console.log("parsedName: ", parsedName) + + const handleSelectionChange = async event => { + setType([...type, graphType]); + await fetch('http://localhost:1111/api/updateDashboard', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ graphType: event.target.value, metric: metricName, token: token }), + }); + console.log('event.target.value: ', event.target.value); + setGraphType(event.target.value); + }; + + return ( +
+

{`${parsedName} --- ${graphType}`}

+
+ + + + + +
+ {/* create chart using grafana iframe tag*/} + {/* {type[type.length - 1] !== graphType ? + + : } */} + {graphType === 'timeseries' + ? TimeSeries(uid, parsedName, graphType, timeFrame) + : graphType === 'barchart' + ? BarChart(uid, parsedName, graphType, timeFrame) + : graphType === 'stat' + ? Stat(uid, parsedName, graphType, timeFrame) + : graphType === 'gauge' + ? Gauge(uid, parsedName, graphType, timeFrame) + : graphType === 'table' + ? Table(uid, parsedName, graphType, timeFrame) + : graphType === 'histogram' + ? Histogram(uid, parsedName, graphType, timeFrame) + : graphType === 'piechart' + ? PieChart(uid, parsedName, graphType, timeFrame) + : graphType === 'alertlist' + ? AlertList(uid, parsedName, graphType, timeFrame) + : null} +
+ ); +}); + +const TimeSeries = (uid, parsedName, graphType, timeFrame) => { + return ( + <> + +
+ + ); +}; + +const BarChart = (uid, parsedName, graphType, timeFrame) => { + return ( + + ); +}; + +const Stat = (uid, parsedName, graphType, timeFrame) => { + return ( + + ); +}; + +const Gauge = (uid, parsedName, graphType, timeFrame) => { + return ( + + ); +}; + +const Table = (uid, parsedName, graphType, timeFrame) => { + return ( + + ); +}; + +const Histogram = (uid, parsedName, graphType, timeFrame) => { + return ( + + ); +}; + +const PieChart = (uid, parsedName, graphType, timeFrame) => { + return ( + + ); +}; + +const AlertList = (uid, parsedName, graphType, timeFrame) => { + return ( + + ); +}; +export default GrafanaEventChart; diff --git a/app/stylesheets/GrafanaGraph.scss b/app/charts/GrafanaEventChart/styles.scss similarity index 100% rename from app/stylesheets/GrafanaGraph.scss rename to app/charts/GrafanaEventChart/styles.scss diff --git a/app/charts/RequestTypesChart.tsx b/app/charts/RequestTypesChart.tsx index 816cc47e1..8e77e75ba 100644 --- a/app/charts/RequestTypesChart.tsx +++ b/app/charts/RequestTypesChart.tsx @@ -1,7 +1,7 @@ import React, { useContext } from 'react'; import Plot from 'react-plotly.js'; import { CommsContext } from '../context/CommsContext'; -import '../stylesheets/constants.scss'; +import '../index.scss'; const RequestTypesChart: React.FC = React.memo(() => { const { commsData } = useContext(CommsContext); diff --git a/app/components/About/styles.scss b/app/components/About/styles.scss index 060677a34..42043873c 100644 --- a/app/components/About/styles.scss +++ b/app/components/About/styles.scss @@ -1,4 +1,4 @@ -@import '../../stylesheets/constants.scss'; +@import '../../index.scss'; .about { min-width: 421px; @@ -72,4 +72,4 @@ p { padding-left: 10px; -} \ No newline at end of file +} diff --git a/app/components/ApplicationsCard/styles.scss b/app/components/ApplicationsCard/styles.scss index 13001cc41..8fef07fab 100644 --- a/app/components/ApplicationsCard/styles.scss +++ b/app/components/ApplicationsCard/styles.scss @@ -1,5 +1,4 @@ - -@import '../../stylesheets/constants.scss'; +@import '../../index.scss'; .card { display: flex; @@ -66,7 +65,6 @@ } } - #card-MongoDB { &:hover .databaseIconHeader { visibility: hidden; @@ -245,4 +243,4 @@ #serviceName { font-size: 11px; margin-top: 6px; -} \ No newline at end of file +} diff --git a/app/components/Contact/styles.scss b/app/components/Contact/styles.scss index 4b88db993..e0182c00f 100644 --- a/app/components/Contact/styles.scss +++ b/app/components/Contact/styles.scss @@ -1,4 +1,4 @@ -@import '../../stylesheets/constants.scss'; +@import '../../index.scss'; .contact { display: flex; @@ -164,4 +164,4 @@ input[type='file'] { &:hover { color: blue !important; } -} \ No newline at end of file +} diff --git a/app/components/DashboardIcons/styles.scss b/app/components/DashboardIcons/styles.scss index 52c18b089..7dc2cd372 100644 --- a/app/components/DashboardIcons/styles.scss +++ b/app/components/DashboardIcons/styles.scss @@ -1,4 +1,4 @@ -@import '../../stylesheets/constants.scss'; +@import '../../index.scss'; .dashboardIconWrapper { margin-right: 37px; @@ -143,4 +143,4 @@ .personIconArea .personTooltip { color: $gyellow; text-align: center; -} \ No newline at end of file +} diff --git a/app/components/FirstLaunch/styles.scss b/app/components/FirstLaunch/styles.scss index 134d8cdd5..44dee318e 100644 --- a/app/components/FirstLaunch/styles.scss +++ b/app/components/FirstLaunch/styles.scss @@ -1,4 +1,4 @@ -@import '../../stylesheets/constants.scss'; +@import '../../index.scss'; .btns { display: flex; @@ -22,7 +22,6 @@ height: 100vh; opacity: 1; - .logo-container { height: auto; width: 40%; @@ -144,4 +143,4 @@ 100% { opacity: 1; } -} \ No newline at end of file +} diff --git a/app/components/Header/styles.scss b/app/components/Header/styles.scss index 48598ae42..ae83d30aa 100644 --- a/app/components/Header/styles.scss +++ b/app/components/Header/styles.scss @@ -1,4 +1,4 @@ -@import '../../stylesheets/constants.scss'; +@import '../../index.scss'; .microservice-header { width: 100%; @include centerWithFlex(center); @@ -209,4 +209,4 @@ label.select { background-color: #67688d; } } -} \ No newline at end of file +} diff --git a/app/components/Occupied/styles.scss b/app/components/Occupied/styles.scss index 726b38f59..6f4f65e4b 100644 --- a/app/components/Occupied/styles.scss +++ b/app/components/Occupied/styles.scss @@ -1,11 +1,11 @@ -@import '../../stylesheets/constants.scss'; +@import '../../index.scss'; // MAIN DASHBOARD .dashboardArea { display: flex; flex-direction: column; justify-content: flex-start; - padding-top:2rem; + padding-top: 2rem; } // HEADER @@ -103,6 +103,6 @@ select:-webkit-autofill:focus { text-decoration: none; } -a{ +a { text-decoration: none; -} \ No newline at end of file +} diff --git a/app/components/Setting/styles.scss b/app/components/Setting/styles.scss index 7cd5a0871..6252e769c 100644 --- a/app/components/Setting/styles.scss +++ b/app/components/Setting/styles.scss @@ -1,4 +1,4 @@ -@import '../../stylesheets/constants.scss'; // Update the import path according to your project structure +@import '../../index.scss'; .settings { display: flex; @@ -45,4 +45,4 @@ color: $white; background-color: $black; box-shadow: $boxshadow2; -} \ No newline at end of file +} diff --git a/app/components/Splash/styles.scss b/app/components/Splash/styles.scss index f75684ca5..b0ce540bb 100644 --- a/app/components/Splash/styles.scss +++ b/app/components/Splash/styles.scss @@ -1,4 +1,4 @@ -@import '../../stylesheets/constants.scss'; // Update the import path according to your project structure +@import '../../index.scss'; // Update the import path according to your project structure #splash { display: flex; diff --git a/app/components/WindowBar/styles.scss b/app/components/WindowBar/styles.scss index 04ae3f38c..a9ec60cfb 100644 --- a/app/components/WindowBar/styles.scss +++ b/app/components/WindowBar/styles.scss @@ -1,4 +1,4 @@ -@import '../../stylesheets/constants.scss'; +@import '../../index.scss'; #titleBar { position: fixed; display: flex; @@ -14,4 +14,4 @@ margin: 9px 7px 0px; -webkit-app-region: no-drag; } -} \ No newline at end of file +} diff --git a/app/containers/AWSGraphsContainer.tsx b/app/containers/AWSGraphsContainer.tsx deleted file mode 100644 index b8687fd79..000000000 --- a/app/containers/AWSGraphsContainer.tsx +++ /dev/null @@ -1,135 +0,0 @@ -/* eslint-disable no-bitwise */ -import React, { useEffect, useState, useContext } from 'react'; -import { ApplicationContext } from '../context/ApplicationContext'; -import { DashboardContext } from '../context/DashboardContext'; -import { Typography } from '@material-ui/core'; -import { AwsContext } from '../context/AwsContext'; -// import AwsEksGrafana from '../components/AwsEksGrafana'; -import '../stylesheets/AWSGraphsContainer.scss'; -import AwsChart from '../charts/AwsChart'; -import ClusterTable from '../components/ClusterTable'; -import AwsEC2Graphs from '../components/AwsEC2Graphs'; -import AwsECSClusterGraphs from '../components/AwsECSClusterGraphs'; -import { useLocation } from 'react-router-dom'; -import GrafanaIFrame from './GrafanaIFrame'; -interface Dashboard { - uid: string; - url: string; -} -const AwsGraphsContainer: React.FC = React.memo(props => { - const { - awsData, - setAwsData, - awsAppInfo, - setAwsAppInfo, - awsEcsData, - awsEksData, - setAwsEcsData, - setAwsEksData, - fetchAwsData, - fetchAwsEcsData, - fetchAwsEksData, - fetchAwsAppInfo, - } = useContext(AwsContext); - const [dashboards, setDashboards] = useState([]); - const { app, appIndex, intervalID, setIntervalID } = useContext(ApplicationContext); - const { user } = useContext(DashboardContext); - // const [intervalID, setintervalID] = useState(null); - const [awsLive, setAwsLive] = useState(false); - const { region } = awsAppInfo; - const { state } = useLocation(); - const { typeOfService } = state; - const { awsUrl } = awsAppInfo; - - useEffect(() => { - if (awsLive) { - setIntervalID( - setInterval(() => { - // console.log('intervalId after click live', intervalID); - fetchAwsAppInfo(user, appIndex); - - if (typeOfService === 'AWS/EC2') fetchAwsData(user, appIndex) ; - if (typeOfService === 'AWS/ECS')fetchAwsEcsData(user, appIndex); - if (typeOfService === 'AWS/EKS') fetchAwsEksData(user, appIndex) - }, 10000) - ); - } else { - if (intervalID) clearInterval(intervalID); - fetchAwsAppInfo(user, appIndex); - - if (typeOfService === 'AWS/EC2') fetchAwsData(user, appIndex) ; - if (typeOfService === 'AWS/ECS') fetchAwsEcsData(user, appIndex); - if (typeOfService === 'AWS/EKS') fetchAwsEksData(user, appIndex) - - } - - }, [awsLive]); - - useEffect(() => { - return () => { - if (intervalID) clearInterval(intervalID); - setAwsData({ CPUUtilization: [], NetworkIn: [], NetworkOut: [], DiskReadBytes: [] }); - setAwsEcsData({}); - setAwsEksData({}); - setAwsAppInfo({ typeOfService: '', region: '', awsUrl: '' }); - }; - }, []); - - const stringToColor = (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; - } - }; - - // console.log(awsUrl) - - return ( -
-
- {app} -

Metrics for AWS Service

- -
- {typeOfService === 'AWS/ECS' && ( -
- - {/* */} - -
- ) } - {typeOfService === 'AWS/EC2' && ( -
- -
- )} - {typeOfService === 'AWS/EKS' && ( -
- -
- )} -
- ); - // } -}); -export default AwsGraphsContainer; diff --git a/app/containers/AWSGraphsContainer/AWSGraphsContainer.tsx b/app/containers/AWSGraphsContainer/AWSGraphsContainer.tsx new file mode 100644 index 000000000..f4a81c585 --- /dev/null +++ b/app/containers/AWSGraphsContainer/AWSGraphsContainer.tsx @@ -0,0 +1,78 @@ +import React, { useContext, useEffect } from 'react'; +import { ApplicationContext } from '../../context/ApplicationContext'; +import { DashboardContext } from '../../context/DashboardContext'; +import { Typography } from '@material-ui/core'; +import { AwsContext } from '../../context/AwsContext'; +import './styles.scss'; +import { useLocation } from 'react-router-dom'; +import EC2GraphsComponent from './EC2GraphsComponent'; +import ECSGraphsComponent from './ECSGraphsComponent'; +import EKSGraphsComponent from './EKSGraphsComponent'; + +const AwsGraphsContainer = () => { + const { app, appIndex, setIntervalID, intervalID } = useContext(ApplicationContext); + const { user } = useContext(DashboardContext); + const { awsAppInfo, fetchAwsData, fetchAwsEcsData, fetchAwsEksData, fetchAwsAppInfo } = + useContext(AwsContext); + const { state } = useLocation(); + const { typeOfService } = state; + const [awsLive, setAwsLive] = React.useState(false); + + useEffect(() => { + if (awsLive) { + const id = setInterval(() => { + fetchAwsAppInfo(user, appIndex); + if (typeOfService === 'AWS/EC2') { + fetchAwsData(user, appIndex); + } + if (typeOfService === 'AWS/ECS') { + fetchAwsEcsData(user, appIndex); + } + if (typeOfService === 'AWS/EKS') { + fetchAwsEksData(user, appIndex); + } + }, 10000); + setIntervalID(id); + } else { + if (intervalID) { + clearInterval(intervalID); + } + } + + return () => { + if (intervalID) { + clearInterval(intervalID); + } + }; + }, [ + awsLive, + user, + appIndex, + typeOfService, + fetchAwsAppInfo, + fetchAwsData, + fetchAwsEcsData, + fetchAwsEksData, + intervalID, + setIntervalID, + ]); + + return ( +
+
+ {app} +

Metrics for AWS Service

+ +
+ {typeOfService === 'AWS/ECS' && ( + + )} + {typeOfService === 'AWS/EC2' && } + {typeOfService === 'AWS/EKS' && } +
+ ); +}; + +export default AwsGraphsContainer; diff --git a/app/containers/AWSGraphsContainer/EC2GraphsComponent.tsx b/app/containers/AWSGraphsContainer/EC2GraphsComponent.tsx new file mode 100644 index 000000000..288cb9715 --- /dev/null +++ b/app/containers/AWSGraphsContainer/EC2GraphsComponent.tsx @@ -0,0 +1,10 @@ +import React from 'react'; +import AwsEC2Graphs from '../../components/AwsEC2Graphs'; + +const EC2GraphsComponent = () => ( +
+ +
+); + +export default EC2GraphsComponent; \ No newline at end of file diff --git a/app/containers/AWSGraphsContainer/ECSGraphsComponent.tsx b/app/containers/AWSGraphsContainer/ECSGraphsComponent.tsx new file mode 100644 index 000000000..254cdf4c8 --- /dev/null +++ b/app/containers/AWSGraphsContainer/ECSGraphsComponent.tsx @@ -0,0 +1,12 @@ +import React from 'react'; +import ClusterTable from '../../components/ClusterTable'; +import AwsECSClusterGraphs from '../../components/AwsECSClusterGraphs'; + +const ECSGraphsComponent = ({ region, typeOfService }) => ( +
+ + +
+); + +export default ECSGraphsComponent; \ No newline at end of file diff --git a/app/containers/AWSGraphsContainer/EKSGraphsComponent.tsx b/app/containers/AWSGraphsContainer/EKSGraphsComponent.tsx new file mode 100644 index 000000000..bd9aeec9a --- /dev/null +++ b/app/containers/AWSGraphsContainer/EKSGraphsComponent.tsx @@ -0,0 +1,7 @@ +import React from 'react'; + +const EKSGraphsComponent = ({ awsEksData }) => ( + +); + +export default EKSGraphsComponent; \ No newline at end of file diff --git a/app/stylesheets/AWSGraphsContainer.scss b/app/containers/AWSGraphsContainer/styles.scss similarity index 96% rename from app/stylesheets/AWSGraphsContainer.scss rename to app/containers/AWSGraphsContainer/styles.scss index 8ebe3a5c4..b5551c4db 100644 --- a/app/stylesheets/AWSGraphsContainer.scss +++ b/app/containers/AWSGraphsContainer/styles.scss @@ -1,4 +1,4 @@ -@import './constants.scss'; +@import '../../index.scss'; .AWS-container { margin-top: 40px; diff --git a/app/containers/DashboardContainer.tsx b/app/containers/DashboardContainer/DashboardContainer.tsx similarity index 69% rename from app/containers/DashboardContainer.tsx rename to app/containers/DashboardContainer/DashboardContainer.tsx index 36d26326b..b6b6e6625 100644 --- a/app/containers/DashboardContainer.tsx +++ b/app/containers/DashboardContainer/DashboardContainer.tsx @@ -1,19 +1,18 @@ import React, { useState, useEffect } from 'react'; import { HashRouter as Router } from 'react-router-dom'; -import MainContainer from './MainContainer'; -import SidebarContainer from './SidebarContainer'; -import HealthContextProvider from '../context/HealthContext'; -import CommsContextProvider from '../context/CommsContext'; -import ApplicationContextProvider from '../context/ApplicationContext'; -import DashboardContextProvider from '../context/DashboardContext'; -import DockerContextProvider from '../context/DockerContext'; -import EventContextProvider from '../context/EventContext'; -import QueryContextProvider from '../context/QueryContext'; -import AwsContextProvider from '../context/AwsContext'; -import '../stylesheets/Dashboard.scss'; +import MainContainer from '../MainContainer/MainContainer'; +import SidebarContainer from '../SidebarContainer/SidebarContainer'; +import HealthContextProvider from '../../context/HealthContext'; +import CommsContextProvider from '../../context/CommsContext'; +import ApplicationContextProvider from '../../context/ApplicationContext'; +import DashboardContextProvider from '../../context/DashboardContext'; +import DockerContextProvider from '../../context/DockerContext'; +import EventContextProvider from '../../context/EventContext'; +import QueryContextProvider from '../../context/QueryContext'; +import AwsContextProvider from '../../context/AwsContext'; +import './styles.scss'; const DashboardContainer = React.memo(() => { - const [visible, setVisible] = useState(false); /** * When DashBoard Container first mounted, visible is default to false, so that the Splash component can be stay visible. @@ -42,7 +41,7 @@ const DashboardContainer = React.memo(() => { - + diff --git a/app/stylesheets/Dashboard.scss b/app/containers/DashboardContainer/styles.scss similarity index 100% rename from app/stylesheets/Dashboard.scss rename to app/containers/DashboardContainer/styles.scss diff --git a/app/containers/DockerHealthContainer.tsx b/app/containers/DockerHealthContainer.tsx index 67c46b2cc..9f9aeb2e3 100644 --- a/app/containers/DockerHealthContainer.tsx +++ b/app/containers/DockerHealthContainer.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useState, useContext } from 'react'; import { HealthContext } from '../context/HealthContext'; import { QueryContext } from '../context/QueryContext'; -import GrafanaEventChart from '../charts/GrafanaEventChart'; +import GrafanaEventChart from '../charts/GrafanaEventChart/GrafanaEventChart'; import { Button } from '@material-ui/core'; import { useParams } from 'react-router-dom'; import { stringToColour as colourGenerator } from './GraphsContainer/helpers'; @@ -17,14 +17,14 @@ interface Params { interface DataObject { [key: string]: { - value: string[], - time: string[], - id: string, - token: string + value: string[]; + time: string[]; + id: string; + token: string; }; } interface DockerDataObject { - [key: string]: DataObject + [key: string]: DataObject; } const DockerHealthContainer: React.FC = React.memo(props => { @@ -89,16 +89,16 @@ const DockerHealthContainer: React.FC = React.memo(props = return filteredHealthData; }; - // helper function for geting only the names of the metrics - const getIndex = (str: string, substr: string, ind: number): number => { - let Len = str.length, - i = -1; - while (ind-- && i++ < Len) { - i = str.indexOf(substr, i); - if (i < 0) break; - } - return i; - } + // helper function for geting only the names of the metrics + const getIndex = (str: string, substr: string, ind: number): number => { + let Len = str.length, + i = -1; + while (ind-- && i++ < Len) { + i = str.indexOf(substr, i); + if (i < 0) break; + } + return i; + }; // function to generate charts using the type-sorted data const generateHealthCharts = (sortedData: DockerDataObject): void => { @@ -113,11 +113,9 @@ const DockerHealthContainer: React.FC = React.memo(props = // pass down the value of the current data type and service const chartData = metricObjects[metricName]; const token = chartData.token; - - // console.log("plotting grafana") - grafanaChartsArray.push( - ); + // console.log("plotting grafana") + grafanaChartsArray.push(); } } // console.log(grafanaChartsArray) @@ -135,13 +133,32 @@ const DockerHealthContainer: React.FC = React.memo(props = return (
- {service.includes('kafkametrics') || service.includes('kubernetesmetrics') || service.includes('books') || service.includes('customers') || service.includes('frontend') || service.includes('orders')? currChunk : []} + {service.includes('kafkametrics') || + service.includes('kubernetesmetrics') || + service.includes('books') || + service.includes('customers') || + service.includes('frontend') || + service.includes('orders') + ? currChunk + : []} {healthChartsArr.length > chunkSize && ( <> - - diff --git a/app/containers/EventContainer.tsx b/app/containers/EventContainer.tsx index 7c98ace11..c62ddc213 100644 --- a/app/containers/EventContainer.tsx +++ b/app/containers/EventContainer.tsx @@ -5,7 +5,7 @@ import { HealthContext } from '../context/HealthContext'; import { QueryContext } from '../context/QueryContext'; import EventChart from '../charts/EventChart'; import { Button } from '@material-ui/core'; -import GrafanaEventChart from '../charts/GrafanaEventChart'; +import GrafanaEventChart from '../charts/GrafanaEventChart/GrafanaEventChart'; import { stringToColour as colourGenerator } from './GraphsContainer/helpers'; interface EventContainerProps { @@ -17,15 +17,15 @@ interface Params { } interface MetricObject { [key: string]: { - value: string[], - time: string[], - id: string, - token: string - } + value: string[]; + time: string[]; + id: string; + token: string; + }; } interface EventDataObject { - [key: string]: MetricObject + [key: string]: MetricObject; } const EventContainer: React.FC = React.memo(props => { @@ -69,8 +69,8 @@ const EventContainer: React.FC = React.memo(props => { if (selectedArr.includes(metricName)) { filteredEventData[service][metricName] = serviceMetricsObject[metricName]; } - }; - }; + } + } // console.log('filteredEventData IS: ', filteredEventData) return filteredEventData; }; @@ -84,7 +84,7 @@ const EventContainer: React.FC = React.memo(props => { if (i < 0) break; } return i; - } + }; // iterate over the filtered event data to build an array of charts, then set the event charts array state const generateEventCharts = (filteredEventDataObj: EventDataObject): void => { @@ -118,8 +118,7 @@ const EventContainer: React.FC = React.memo(props => { // plotting using grafana // console.log("plotting grafana") - grafanaChartsArray.push( - ); + grafanaChartsArray.push(); // } } @@ -139,26 +138,35 @@ const EventContainer: React.FC = React.memo(props => { // } }; - // invoke the filter and generate functions to render charts useEffect(() => { const filteredEventData = filterSelectedEventMetricsandData(eventData); generateEventCharts(filteredEventData); - }, [eventData, service]); return ( -
{/*
{ setIsGrafana(!isGrafana) }}>Grafana
*/} {service.includes('kafkametrics') || service.includes('kubernetesmetrics') ? currChunk : []} {eventChartsArr.length > chunkSize && ( <> - - @@ -168,4 +176,3 @@ const EventContainer: React.FC = React.memo(props => { }); export default EventContainer; - diff --git a/app/containers/GraphsContainer/GraphsContainer.tsx b/app/containers/GraphsContainer/GraphsContainer.tsx index 8e7298368..9ca5ed44a 100644 --- a/app/containers/GraphsContainer/GraphsContainer.tsx +++ b/app/containers/GraphsContainer/GraphsContainer.tsx @@ -15,15 +15,15 @@ import LogsTable from '../../charts/LogsTable'; import EventContainer from '../EventContainer'; import TransferColumns from '../../components/TransferColumns'; import HealthContainer from '../HealthContainer'; -import ModifyMetrics from '../ModifyMetricsContainer'; +import ModifyMetrics from '../ModifyMetricsContainer/ModifyMetricsContainer'; import * as DashboardContext from '../../context/DashboardContext'; import lightAndDark from '../../components/Styling'; import DockerHealthContainer from '../DockerHealthContainer'; import GraphNavBar from '../../components/GraphNavBar/GraphNavBar'; -import '../../stylesheets/GraphsContainer.scss'; -import Inspect from '../Inspect'; +import './styles.scss'; +import Inspect from '../Inspect/Inspect'; interface Params { app: any; @@ -31,10 +31,9 @@ interface Params { } const GraphsContainer: React.FC = React.memo(() => { - const { app, service } = useParams() as Params; - const [ live, setLive ] = useState(false); - const { intervalID, setIntervalID,example,chart,setChart } = useContext(ApplicationContext); + const [live, setLive] = useState(false); + const { intervalID, setIntervalID, example, chart, setChart } = useContext(ApplicationContext); const { getSavedMetrics } = useContext(ApplicationContext); const { fetchHealthData, setHealthData } = useContext(HealthContext); const { setDockerData, dockerData } = useContext(DockerContext); @@ -94,7 +93,6 @@ const GraphsContainer: React.FC = React.memo(() => { return ( <> - { inspect={inspect} setInspect={setInspect} /> -
+
{inspect && } - +
{chart === 'communications' ? (
@@ -128,31 +121,16 @@ const GraphsContainer: React.FC = React.memo(() => {
)} - { - chart.startsWith('health_') ? - - : - chart.startsWith('event_') ? - - : - chart.startsWith('docker_') ? - - - : + {chart.startsWith('health_') ? ( + + ) : chart.startsWith('event_') ? ( + + ) : chart.startsWith('docker_') ? ( + + ) : ( <> - } - { - chart === 'modifyMetrics' && - - } + )} + {chart === 'modifyMetrics' && }
)}
diff --git a/app/stylesheets/GraphsContainer.scss b/app/containers/GraphsContainer/styles.scss similarity index 98% rename from app/stylesheets/GraphsContainer.scss rename to app/containers/GraphsContainer/styles.scss index 20af9aff7..6585c8cb8 100644 --- a/app/stylesheets/GraphsContainer.scss +++ b/app/containers/GraphsContainer/styles.scss @@ -1,4 +1,4 @@ -@import './constants.scss'; +@import '../../index.scss'; .traceContainer { display: flex; @@ -78,7 +78,6 @@ font-weight: 580; } } - } /* Tablet */ @@ -111,7 +110,7 @@ letter-spacing: 1.5px; font-weight: 450; } - + to { background-color: $darkblue; } @@ -130,7 +129,7 @@ nav { animation: FadeIn 1.5s ease-in-out forwards; color: white; margin: 0 16px; - + &.selected { text-decoration: underline; text-underline-offset: 7px; diff --git a/app/containers/Inspect.jsx b/app/containers/Inspect/Inspect.jsx similarity index 99% rename from app/containers/Inspect.jsx rename to app/containers/Inspect/Inspect.jsx index 75dbd0fc3..ff722b9b3 100644 --- a/app/containers/Inspect.jsx +++ b/app/containers/Inspect/Inspect.jsx @@ -2,7 +2,7 @@ import React, { useEffect } from 'react'; import * as d3 from 'd3'; // Import D3 libraries here import ForceGraph3D from '3d-force-graph'; // Import 3d-force-graph library here import dat from 'dat.gui'; // Import dat.gui library here -import '../stylesheets/Inspect.scss'; +import './styles.scss'; import { CSS2DRenderer, CSS2DObject } from 'three/examples/jsm/renderers/CSS2DRenderer.js'; diff --git a/app/stylesheets/Inspect.scss b/app/containers/Inspect/styles.scss similarity index 100% rename from app/stylesheets/Inspect.scss rename to app/containers/Inspect/styles.scss diff --git a/app/containers/MainContainer.tsx b/app/containers/MainContainer/MainContainer.tsx similarity index 61% rename from app/containers/MainContainer.tsx rename to app/containers/MainContainer/MainContainer.tsx index 5087a97af..5163b8c01 100644 --- a/app/containers/MainContainer.tsx +++ b/app/containers/MainContainer/MainContainer.tsx @@ -1,22 +1,21 @@ -import React, { useContext,useState } from 'react'; +import React, { useContext, useState } from 'react'; import { Route, Routes } from 'react-router-dom'; -import About from '../components/About/About'; -import Contact from '../components/Contact/Contact'; -import Settings from '../components/Setting/Setting'; -import Occupied from '../components/Occupied/Occupied'; -import lightAndDark from '../components/Styling'; -import GraphsContainer from './GraphsContainer/GraphsContainer'; -import { DashboardContext } from '../context/DashboardContext'; -import SignUp from '../components/SignUp'; -import Login from '../components/Login'; -import AwsGraphsContainer from '../containers/AWSGraphsContainer'; +import About from '../../components/About/About'; +import Contact from '../../components/Contact/Contact'; +import Settings from '../../components/Setting/Setting'; +import Occupied from '../../components/Occupied/Occupied'; +import lightAndDark from '../../components/Styling'; +import GraphsContainer from '../GraphsContainer/GraphsContainer'; +import { DashboardContext } from '../../context/DashboardContext'; +import SignUp from '../../components/SignUp'; +import Login from '../../components/Login'; +import AwsGraphsContainer from '../AwsGraphsContainer/AwsGraphsContainer'; -import '../stylesheets/MainContainer.scss'; +import './styles.scss'; -const MainContainer = React.memo((props) => { +const MainContainer = React.memo(props => { const { mode, applications } = useContext(DashboardContext); const currentModeCSS = mode === 'light' ? lightAndDark.lightModeMain : lightAndDark.darkModeMain; - return ( <> diff --git a/app/stylesheets/MainContainer.scss b/app/containers/MainContainer/styles.scss similarity index 94% rename from app/stylesheets/MainContainer.scss rename to app/containers/MainContainer/styles.scss index c18fbd6a9..097936775 100644 --- a/app/stylesheets/MainContainer.scss +++ b/app/containers/MainContainer/styles.scss @@ -1,4 +1,4 @@ -@import './constants.scss'; +@import '../../index.scss'; .main-container { background-color: $grey; @@ -10,7 +10,6 @@ transition: padding-left, 200ms; max-width: 100%; - .main-routes { width: 100%; max-width: 100%; @@ -27,4 +26,4 @@ margin: 30px 0px; color: $background; } -} \ No newline at end of file +} diff --git a/app/containers/ModifyMetricsContainer.tsx b/app/containers/ModifyMetricsContainer/ModifyMetricsContainer.tsx similarity index 94% rename from app/containers/ModifyMetricsContainer.tsx rename to app/containers/ModifyMetricsContainer/ModifyMetricsContainer.tsx index 395f6855f..61dfa18ae 100644 --- a/app/containers/ModifyMetricsContainer.tsx +++ b/app/containers/ModifyMetricsContainer/ModifyMetricsContainer.tsx @@ -1,9 +1,9 @@ import React, { useState, useEffect, useContext } from 'react'; import { JsxElement } from 'typescript'; -import { ApplicationContext } from '../context/ApplicationContext'; -import * as DashboardContext from '../context/DashboardContext'; -import lightAndDark from '../components/Styling'; -import '../stylesheets/ModifyMetrics.scss'; +import { ApplicationContext } from '../../context/ApplicationContext'; +import * as DashboardContext from '../../context/DashboardContext'; +import lightAndDark from '../../components/Styling'; +import './styles.scss'; import { Button } from '@material-ui/core'; const { ipcRenderer } = window.require('electron'); @@ -40,7 +40,7 @@ const MetricsContainer: React.FC = React.memo(props => { // ipcRenderer.on('updateResponse') }; - /** + /** * @desc Toggle functionality to deselect and select all metrics. */ const toggleCheckbox = () => { diff --git a/app/containers/ModifyMetricsContainer/styles.scss b/app/containers/ModifyMetricsContainer/styles.scss new file mode 100644 index 000000000..57115100e --- /dev/null +++ b/app/containers/ModifyMetricsContainer/styles.scss @@ -0,0 +1,50 @@ +@import '../../index.scss'; + +.metricsSelector { + max-width: 90%; + + h2 { + margin-bottom: 10px; + } + + p { + margin-bottom: 20px; + margin-left: 10px; + } +} + +.metricsSublist { + margin-left: 20px; +} + +.modifyMetric { + display: flex; + gap: 1em; + margin: 10px; + align-items: center; + + label { + display: flex; + font-size: 1em; + + &:hover { + font-weight: 550; + cursor: pointer; + color: royalblue; + } + + &:active { + color: darkblue; + } + } + + input { + height: 20px; + width: 20px; + margin-right: 10px; + } +} + +#changeDatabaseSettingsButton { + margin-bottom: 30px; +} diff --git a/app/containers/SidebarContainer.tsx b/app/containers/SidebarContainer/SidebarContainer.tsx similarity index 82% rename from app/containers/SidebarContainer.tsx rename to app/containers/SidebarContainer/SidebarContainer.tsx index c3dd8d958..4dac43fc7 100644 --- a/app/containers/SidebarContainer.tsx +++ b/app/containers/SidebarContainer/SidebarContainer.tsx @@ -6,19 +6,18 @@ import InfoIcon from '@material-ui/icons/Info'; import ContactSupportIcon from '@material-ui/icons/ContactSupport'; import SettingsIcon from '@material-ui/icons/Settings'; -import '../stylesheets/SidebarContainer.scss'; -import { ApplicationContext } from '../context/ApplicationContext'; -import { AwsContext } from '../context/AwsContext'; -import { DashboardContext } from '../context/DashboardContext'; +import './styles.scss'; +import { ApplicationContext } from '../../context/ApplicationContext'; +import { AwsContext } from '../../context/AwsContext'; +import { DashboardContext } from '../../context/DashboardContext'; const SidebarContainer = React.memo(() => { - // Extract invervalID from ApplicationContext. Initival value: intervalID = null - const { intervalID,setExample } = useContext(ApplicationContext); + const { intervalID, setExample } = useContext(ApplicationContext); // Extract isLoading and setLoading state from AwsContext. Initial value: isLoading = true const { isLoading, setLoadingState } = useContext(AwsContext); // clear interval and set loading state to true when leaving graph containers - const { addApp } = useContext(DashboardContext) + const { addApp } = useContext(DashboardContext); /** * @function handleCLick - check if the 'intervalID' exists. If so, theres a timer running and the fuunction clears the timer using @function clearInterval - function. * Checks if variable 'isLoading' is false and if so the content is not loading and therefore, sets it to true using the setLoadingState function. @@ -29,18 +28,17 @@ const SidebarContainer = React.memo(() => { }; const handleExample = () => { + setExample(true); - setExample(true) - const fields = { typeOfService: 'Microservices', database: 'MongoDB', - URI: "mongodb://127.0.0.1:27017/?directConnection=true&serverSelectionTimeoutMS=2000&appName=mongosh+2.2.5", + URI: 'mongodb://127.0.0.1:27017/?directConnection=true&serverSelectionTimeoutMS=2000&appName=mongosh+2.2.5', name: 'Example', - description: 'Microservices' - } - addApp(fields) - } + description: 'Microservices', + }; + addApp(fields); + }; return (
@@ -101,14 +99,10 @@ const SidebarContainer = React.memo(() => {  Contact - -
diff --git a/app/stylesheets/SidebarContainer.scss b/app/containers/SidebarContainer/styles.scss similarity index 95% rename from app/stylesheets/SidebarContainer.scss rename to app/containers/SidebarContainer/styles.scss index a6fe87b0d..daf2fb2dd 100644 --- a/app/stylesheets/SidebarContainer.scss +++ b/app/containers/SidebarContainer/styles.scss @@ -1,4 +1,4 @@ -@import './constants.scss'; +@import '../../index.scss'; .sidebar-container { color: $background; @@ -78,7 +78,7 @@ #sprout2:active, #sprout3:active, #sprout4:active { - background-image: url('../assets/mountain.png'); + background-image: url('../../assets/mountain.png'); background-size: contain; } @@ -231,13 +231,13 @@ } .example-button { - height:100px; - width:100px; - color:whitesmoke; - cursor:pointer; + height: 100px; + width: 100px; + color: whitesmoke; + cursor: pointer; font-weight: 600; } .example-button:hover { - color:blue; -} \ No newline at end of file + color: blue; +} diff --git a/app/index.scss b/app/index.scss new file mode 100644 index 000000000..fb525c38a --- /dev/null +++ b/app/index.scss @@ -0,0 +1,351 @@ +@import url('https://fonts.googleapis.com/css?family=Baloo+Bhaijaan&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Open+Sans&family=Inter:wght@100&family=Inter:wght@100&family=Lexend+Peta&family=Nunito+Sans:wght@300;400;600&family=Quicksand:wght@300&display=swap'); + + +// sass constants + +// Chronos 6.0 colors +$darkblue: #000314; +$white: #ffffff; +$black: #000000; +$blue: #224281; +$lightblue: #4267b2; +$yellowwhite: #ffffe5; +$gray: #c2c2c2; + +$yellow: #fce356; +$navy: #040819; +$background: #ffffff; +$grey: #eeeeee; +$icon: #999999; +$header: #888888; +$darkgrey: #444d56; +$hover: rgba(255, 255, 255, 0.1); +$warningred: rgb(255, 0, 0); // #cc0000 +// $lightblue: #b5d3e9; + +// Primary colors: +$gblue: #3788fc; +$gred: #fc4039; +$gyellow: #febc2c; +$ggreen: #32b44f; +$gorange: #ffa500; + +// Graph colors: +$purple: #4b54ea; +$lightpurple: #5e84fb; +$bluishred: #f7215b; +$popgreen: #27eba2; +$teal: #24d3f0; +$lightteal: #2cfef1; + +// Material UI colors: +$orange: #ff9800; +$fire: #f44336; +$grass: #4caf50; +$aqua: #00bcd4; +$deepaqua: #00acc1; +$plum: #9c27b0; + +$boxshadow: 2px 2px 6px rgb(187, 187, 187); +$boxshadow1: 0 2px 2px 0 rgba(153, 153, 153, 0.14), 0 3px 1px -2px rgba(153, 153, 153, 0.2), + 0 1px 5px 0 rgba(153, 153, 153, 0.12); +$boxshadow2: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); +$boxshadow3: 0 4px 8px 0 rgba(255, 255, 255, 0.2), 0 6px 20px 0 rgba(255, 255, 255, 0.19); +$logoPositionLeft: 55px; +$cardColorHover: #b2b4b5; +$logoPositionTop: 40px; +$logoSize: 25px; +$logoTransition: 100ms; +$sproutSize: 50px; +$originalSproutLeftOffset: -12px; +$sproutLeftOffset: -26px; +$sproutTopOffset: 67px; +$sproutLeftOffsetIncrement: 64px; +$headerFontSize: 18px; + +$sidebarWidth: 140px; + +@mixin centerWithFlex($justify: center, $direction: row, $align: center) { + display: flex; + align-items: $align; + justify-content: $justify; + flex-direction: $direction; +} + +@mixin centerModal($width: auto, $minwidth: 400px) { + @include centerWithFlex(center, column); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + border-radius: 5px; + width: $width; + min-width: $minwidth; + min-height: 100px; + background-color: $background; +} + +@mixin modalHeader() { + font-weight: 700; + font-size: 200%; + color: $darkgrey; + &:hover { + color: $gblue; + font-weight: 500; + cursor: pointer; + } +} + +@keyframes blink { + 0%, + 65% { + background-color: $warningred; + } + 66%, + 100% { + background-color: $warningred; + } +} + +@keyframes twirl { + from { + transform: rotateZ(0deg); + } + to { + transform: rotateZ(360deg); + } +} + +@keyframes glow { + 0% { + background-color: $navy; + } + 66% { + background-color: lighten($navy, 35%); + } + 100% { + background-color: $navy; + } +} + + + +* { + margin: 0; + padding: 0; + box-sizing: border-box; + + &:focus { + outline: none; + } +} + +html, +body { + background-color: $navy; + font-size: 16px; + font-family: 'Roboto'; + font-weight: 100; + overflow-x: hidden; +} + +button { + font-size: 90%; + padding: 6px; + // border: thin solid #24262f; + border-radius: 3px; + // background-color: #484e63; + color: #fff; + // min-width: 105px; + transition: 0.2s; + cursor: pointer; +} + +button:hover { + // background-color: #24262f; +} + +// scrollBar styling + +/* width */ +::-webkit-scrollbar { + width: 10px; +} + +/* Track */ +::-webkit-scrollbar-track { + background: #f1f1f1; +} + +/* Handle */ +::-webkit-scrollbar-thumb { + background: #888; +} + +/* Handle on hover */ +::-webkit-scrollbar-thumb:hover { + background: #555; +} + +body { + height: 100vh; + &::-webkit-scrollbar { + display: none; + } + #app { + height: 100vh; + overflow-y: scroll; + overflow-x: hidden; + &::-webkit-scrollbar { + width: 10px; + } + } +} + +// Home sass + +.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; + } +} diff --git a/app/index.tsx b/app/index.tsx index 0e1c2c478..388162313 100644 --- a/app/index.tsx +++ b/app/index.tsx @@ -4,7 +4,7 @@ import ReactDOM from 'react-dom'; // REACT 18 Syntax below // import { createRoot } from 'react-dom/client'; -import './stylesheets/index.scss'; +import './index.scss'; import { createTheme, ThemeProvider } from '@material-ui/core/'; import App from './App'; import WindowBar from './components/WindowBar/WindowBar'; diff --git a/app/modals/AddModal/AddModal.scss b/app/modals/AddModal/AddModal.scss index f1925d88c..c8a6a8fea 100644 --- a/app/modals/AddModal/AddModal.scss +++ b/app/modals/AddModal/AddModal.scss @@ -1,4 +1,4 @@ -@import '../../stylesheets/constants.scss'; +@import '../../index.scss'; .add-container { @include centerModal(30%, 500px); @@ -57,8 +57,6 @@ &:last-of-type { @include centerWithFlex($justify: flex-start, $align: flex-start); } - - } /* Submit button */ diff --git a/app/modals/AwsModal/AwsModal.scss b/app/modals/AwsModal/AwsModal.scss index 69e77418c..c8a6a8fea 100644 --- a/app/modals/AwsModal/AwsModal.scss +++ b/app/modals/AwsModal/AwsModal.scss @@ -1,4 +1,4 @@ -@import '../../stylesheets/constants.scss'; +@import '../../index.scss'; .add-container { @include centerModal(30%, 500px); diff --git a/app/modals/EnvModal/EnvModal.scss b/app/modals/EnvModal/EnvModal.scss index a033b92f2..4f988244f 100644 --- a/app/modals/EnvModal/EnvModal.scss +++ b/app/modals/EnvModal/EnvModal.scss @@ -1,4 +1,4 @@ -@import '../../stylesheets/constants.scss'; +@import '../../index.scss'; .add-container { @include centerModal(30%, 500px); diff --git a/app/modals/ServicesModal/ServicesModal.scss b/app/modals/ServicesModal/ServicesModal.scss index 92b4a7b80..86456902c 100644 --- a/app/modals/ServicesModal/ServicesModal.scss +++ b/app/modals/ServicesModal/ServicesModal.scss @@ -1,9 +1,8 @@ -@import '../../stylesheets/constants.scss'; +@import '../../index.scss'; .servicesContainer { width: 100px; @include centerModal(375px); - // Header .services-header { @@ -35,7 +34,6 @@ gap: 1em; .link { - display: block; width: 80%; font-size: 90%; @@ -54,8 +52,8 @@ &#selectLink { background-color: #fbdca3; } - - &:hover { + + &:hover { cursor: pointer; font-weight: 460; color: #fff; @@ -76,7 +74,6 @@ } } - .loadingMessage { max-width: 80px; } diff --git a/app/modals/UserModal/UserModal.scss b/app/modals/UserModal/UserModal.scss index ebfec87eb..29eccaa57 100644 --- a/app/modals/UserModal/UserModal.scss +++ b/app/modals/UserModal/UserModal.scss @@ -1,4 +1,4 @@ -@import '../../stylesheets/constants.scss'; +@import '../../index.scss'; .add-container { @include centerModal(30%, 500px); diff --git a/app/stylesheets/Applications.scss b/app/stylesheets/Applications.scss deleted file mode 100644 index bafe46bfc..000000000 --- a/app/stylesheets/Applications.scss +++ /dev/null @@ -1,3 +0,0 @@ -@import './constants.scss'; - - diff --git a/app/stylesheets/Contact.scss b/app/stylesheets/Contact.scss deleted file mode 100644 index 4d8848fda..000000000 --- a/app/stylesheets/Contact.scss +++ /dev/null @@ -1,167 +0,0 @@ -@import './constants.scss'; - -.contact { - display: flex; - flex-direction: column; - flex-direction: column; - align-content: center; - align-items: center; - justify-content: center; - justify-items: center; - top: 0; - left: 0; - min-height: 100vh; - opacity: 1; - vertical-align: top; - justify-content: center; - align-items: center; - color: $background; -} -.contact-border { - display: flex; - flex-direction: column; - justify-content: center; - font-size: 18px; - border-radius: 10px; - border: none; - box-shadow: $boxshadow2; - padding: 30px; - min-width: 421px; - max-width: 600px; - margin: 100px 20px; - - &:hover { - background-color: rgba(255, 255, 255, 0.1); - } -} -.contact-container { - padding: 20px; - margin-right: 0; - justify-content: left; - min-width: 50%; -} -.contact-blurb { - min-width: 50%; - font-size: 18px; -} -.email-container { - line-height: 34px; - font-size: 18px; - text-align: start; - display: flex; - flex-direction: row; - justify-content: flex-start; - align-content: flex-start; - align-items: flex-start; - align-self: flex-start; - padding: 0px 20px; - margin: 0; - width: 100%; - form { - width: 100%; - label { - display: flex; - flex-direction: column; - width: 100%; - input { - border: 1px solid transparent; - border-radius: 5px; - width: 100%; - color: $header; - font-size: 16px; - padding: 6px; - &[type='file'] { - width: 226px; - cursor: pointer; - } - } - textarea { - border-radius: 5px; - font-size: 16px; - width: 100%; - min-width: 100%; - max-width: 100%; - height: 150px; - min-height: 50px; - max-height: 300px; - padding: 6px; - } - } - } - - #messageLabel { - vertical-align: top; - } - - #message { - margin-top: 10px; - border-color: lightgray; - color: $header; - } -} - -#myfile { - font-size: 16px; - color: $background; -} - -#contact-submit { - border: none; - color: $background; - - &:hover { - border: none; - cursor: pointer; - } - - &:focus { - border: none; - } - - &:active { - border: none; - } -} - -input[type='file'] { - border: none; - border-radius: 5px; - - &:hover { - border: none; - } - - &:focus { - border: none; - } - - &:active { - border: none; - } -} - -#contact-submit { - font-size: 18px; - width: 90px; - height: 40px; - margin-top: 20px; - margin-left: -4px; - padding: 10px; - border: 1px dotted $background; - outline: none; - color: $background; - background-color: transparent; - border-radius: 8px; - &:hover { - background-color: $gblue; - } -} - -#issueLink { - color: $header; - cursor: pointer; - text-decoration: underline; - &:hover { - color: blue !important; - } -} diff --git a/app/stylesheets/Home.scss b/app/stylesheets/Home.scss deleted file mode 100644 index 134d8cdd5..000000000 --- a/app/stylesheets/Home.scss +++ /dev/null @@ -1,147 +0,0 @@ -@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/stylesheets/ModifyMetrics.scss b/app/stylesheets/ModifyMetrics.scss deleted file mode 100644 index 1df6e21fd..000000000 --- a/app/stylesheets/ModifyMetrics.scss +++ /dev/null @@ -1,51 +0,0 @@ -@import './constants.scss'; - -.metricsSelector { - max-width: 90%; - - h2 { - margin-bottom: 10px; - } - - p { - margin-bottom: 20px; - margin-left: 10px; - } -} - -.metricsSublist { - margin-left: 20px; -} - - -.modifyMetric { - display: flex; - gap: 1em; - margin: 10px; - align-items: center; - - label { - display: flex; - font-size: 1em; - - &:hover { - font-weight: 550; - cursor: pointer; - color: royalblue; - } - - &:active { - color: darkblue; - } - } - - input { - height: 20px; - width: 20px; - margin-right: 10px; - } -} - -#changeDatabaseSettingsButton { - margin-bottom: 30px; -} \ No newline at end of file diff --git a/app/stylesheets/ServicesList.scss b/app/stylesheets/ServicesList.scss deleted file mode 100644 index 938110f38..000000000 --- a/app/stylesheets/ServicesList.scss +++ /dev/null @@ -1,23 +0,0 @@ -@import './constants.scss'; - -/* .services-btn { - font-family: 'Nunito', sans-serif; - background-color: #24262F; - width: 13em; - color: white; - word-wrap: break-word; - font-size: 15px; - text-align: center; - box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); - border: none; - height: 50px; - transition: 0.2s; - margin: 0 8px 0 8px; -} - -.services-btn:hover { - background-color: #494FEE; - font-weight: 400; - box-shadow: #333; - cursor: pointer; -} */ \ No newline at end of file diff --git a/app/stylesheets/constants.scss b/app/stylesheets/constants.scss deleted file mode 100644 index 2cfa3ac05..000000000 --- a/app/stylesheets/constants.scss +++ /dev/null @@ -1,124 +0,0 @@ -// Chronos 6.0 colors -$darkblue: #000314; -$white: #ffffff; -$black: #000000; -$blue: #224281; -$lightblue: #4267b2; -$yellowwhite: #ffffe5; -$gray: #c2c2c2; - -$yellow: #fce356; -$navy: #040819; -$background: #ffffff; -$grey: #eeeeee; -$icon: #999999; -$header: #888888; -$darkgrey: #444d56; -$hover: rgba(255, 255, 255, 0.1); -$warningred: rgb(255, 0, 0); // #cc0000 -// $lightblue: #b5d3e9; - -// Primary colors: -$gblue: #3788fc; -$gred: #fc4039; -$gyellow: #febc2c; -$ggreen: #32b44f; -$gorange: #ffa500; - -// Graph colors: -$purple: #4b54ea; -$lightpurple: #5e84fb; -$bluishred: #f7215b; -$popgreen: #27eba2; -$teal: #24d3f0; -$lightteal: #2cfef1; - -// Material UI colors: -$orange: #ff9800; -$fire: #f44336; -$grass: #4caf50; -$aqua: #00bcd4; -$deepaqua: #00acc1; -$plum: #9c27b0; - -$boxshadow: 2px 2px 6px rgb(187, 187, 187); -$boxshadow1: 0 2px 2px 0 rgba(153, 153, 153, 0.14), 0 3px 1px -2px rgba(153, 153, 153, 0.2), - 0 1px 5px 0 rgba(153, 153, 153, 0.12); -$boxshadow2: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); -$boxshadow3: 0 4px 8px 0 rgba(255, 255, 255, 0.2), 0 6px 20px 0 rgba(255, 255, 255, 0.19); -$logoPositionLeft: 55px; -$cardColorHover: #b2b4b5; -$logoPositionTop: 40px; -$logoSize: 25px; -$logoTransition: 100ms; -$sproutSize: 50px; -$originalSproutLeftOffset: -12px; -$sproutLeftOffset: -26px; -$sproutTopOffset: 67px; -$sproutLeftOffsetIncrement: 64px; -$headerFontSize: 18px; - -$sidebarWidth: 140px; - -@mixin centerWithFlex($justify: center, $direction: row, $align: center) { - display: flex; - align-items: $align; - justify-content: $justify; - flex-direction: $direction; -} - -@mixin centerModal($width: auto, $minwidth: 400px) { - @include centerWithFlex(center, column); - position: absolute; - top: 50%; - left: 50%; - transform: translate(-50%, -50%); - border-radius: 5px; - width: $width; - min-width: $minwidth; - min-height: 100px; - background-color: $background; -} - -@mixin modalHeader() { - font-weight: 700; - font-size: 200%; - color: $darkgrey; - &:hover { - color: $gblue; - font-weight: 500; - cursor: pointer; - } -} - -@keyframes blink { - 0%, - 65% { - background-color: $warningred; - } - 66%, - 100% { - background-color: $warningred; - } -} - -@keyframes twirl { - from { - transform: rotateZ(0deg); - } - to { - transform: rotateZ(360deg); - } -} - -@keyframes glow { - 0% { - background-color: $navy; - } - 66% { - background-color: lighten($navy, 35%); - } - 100% { - background-color: $navy; - } -} diff --git a/app/stylesheets/index.scss b/app/stylesheets/index.scss deleted file mode 100644 index 92cec5e74..000000000 --- a/app/stylesheets/index.scss +++ /dev/null @@ -1,38 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Baloo+Bhaijaan&display=swap'); -@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Open+Sans&family=Inter:wght@100&family=Inter:wght@100&family=Lexend+Peta&family=Nunito+Sans:wght@300;400;600&family=Quicksand:wght@300&display=swap'); -@import './constants.scss'; - -* { - margin: 0; - padding: 0; - box-sizing: border-box; - - &:focus { - outline: none; - } -} - -html, -body { - background-color: $navy; - font-size: 16px; - font-family: 'Roboto'; - font-weight: 100; - overflow-x: hidden; -} - -button { - font-size: 90%; - padding: 6px; - border: thin solid #24262f; - border-radius: 3px; - background-color: #484e63; - color: #fff; - // min-width: 105px; - transition: 0.2s; - cursor: pointer; -} - -button:hover { - background-color: #24262f; -} diff --git a/app/stylesheets/scrollBar.scss b/app/stylesheets/scrollBar.scss deleted file mode 100644 index 4fd0ceebf..000000000 --- a/app/stylesheets/scrollBar.scss +++ /dev/null @@ -1,34 +0,0 @@ -/* width */ -::-webkit-scrollbar { - width: 10px; -} - -/* Track */ -::-webkit-scrollbar-track { - background: #f1f1f1; -} - -/* Handle */ -::-webkit-scrollbar-thumb { - background: #888; -} - -/* Handle on hover */ -::-webkit-scrollbar-thumb:hover { - background: #555; -} - -body { - height: 100vh; - &::-webkit-scrollbar { - display: none; - } - #app { - height: 100vh; - overflow-y: scroll; - overflow-x: hidden; - &::-webkit-scrollbar { - width: 10px; - } - } -}