Skip to content

Commit 618fd39

Browse files
tedpham3tedpham3
committed
merged dev
2 parents 8f55a4d + 0c47451 commit 618fd39

29 files changed

Lines changed: 516 additions & 346 deletions

‎app/components/GraphNavBar/index.tsx‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
import React , { useState,useContext } from 'react'
2+
import { useNavigate } from 'react-router-dom'
3+
import { ApplicationContext } from '../../context/ApplicationContext'
4+
import { QueryContext } from '../../context/QueryContext'
5+
import { CommsContext } from '../../context/CommsContext'
6+
import { HealthContext } from '../../context/HealthContext'
7+
import { Link } from 'react-router-dom';
8+
9+
const GraphNavBar = (props) => {
10+
11+
const { chart,setChart,dockerData,inspect,setInspect } = props
12+
const [ prevRoute, setPrevRoute ] = useState<string>('');
13+
const { servicesData } = useContext(ApplicationContext);
14+
const { selectedMetrics } = useContext(QueryContext);
15+
const { commsData } = useContext(CommsContext)
16+
const { services } = useContext(HealthContext)
17+
18+
const navigate = useNavigate();
19+
20+
const routing = (route: string) => {
21+
if (location.href.includes('communications')) {
22+
if (prevRoute === '') navigate(`${servicesData[0].microservice}`);
23+
else navigate(prevRoute);
24+
}
25+
setChart(route);
26+
};
27+
28+
const getHealthAndEventComponents = () => {
29+
const buttonList: JSX.Element[] = [];
30+
if (selectedMetrics) {
31+
selectedMetrics.forEach((element, id) => {
32+
const categoryName = Object.keys(element)[0];
33+
let prefix;
34+
if (categoryName === 'Event') {
35+
prefix = 'event_';
36+
} else if (categoryName === 'books' || categoryName === 'customers' || categoryName === 'frontend' || categoryName === 'orders'){
37+
prefix = 'docker_';
38+
} else {
39+
prefix = 'health_';
40+
}
41+
buttonList.push(
42+
<button
43+
id={`${prefix}${categoryName}-button`}
44+
className={chart === `${prefix}${categoryName}` ? 'selected' : undefined}
45+
onClick={() => routing(`${prefix}${categoryName}`)}
46+
key={`1-${id}`}
47+
>
48+
{categoryName}
49+
</button>
50+
);
51+
});
52+
}
53+
54+
return buttonList;
55+
};
56+
57+
const HealthAndEventButtons: JSX.Element[] = getHealthAndEventComponents();
58+
59+
return (
60+
<nav id="navigationBar">
61+
<button
62+
className={chart === 'all' ? 'selected' : undefined}
63+
id="all-button"
64+
onClick={() => routing('all')}
65+
key="0"
66+
>
67+
Metrics Query
68+
</button>
69+
{HealthAndEventButtons}
70+
{dockerData.containername && (
71+
<button
72+
id="docker-button"
73+
className={chart === 'docker' ? 'selected' : undefined}
74+
onClick={() => routing('docker')}
75+
key="2"
76+
>
77+
Docker
78+
</button>
79+
)}
80+
{commsData.length > 0 && (
81+
<button
82+
id="communication-button"
83+
className={chart === 'communications' ? 'selected' : undefined}
84+
onClick={() => {
85+
if (!location.href.includes('communications')) setPrevRoute(services.join(' '));
86+
setChart('communications');
87+
}}
88+
key="3"
89+
>
90+
Communication
91+
</button>
92+
)}
93+
<button
94+
id="modify-metrics-button"
95+
className={chart === 'modifyMetrics' ? 'selected' : undefined}
96+
onClick={() => {
97+
routing('modifyMetrics');
98+
}}
99+
key="4"
100+
>
101+
Modify Metrics
102+
</button>
103+
{/* <Link className="sidebar-link" to="/Inspect" id="Inspect" >
104+
<SettingsIcon
105+
style={{
106+
WebkitBoxSizing: 'content-box',
107+
boxShadow: 'none',
108+
width: '35px',
109+
height: '35px',
110+
}}
111+
/>
112+
&emsp;Inspect
113+
</Link> */}
114+
<button onClick={() => { setInspect(!inspect) }}>Inspect</button>
115+
</nav>
116+
)
117+
}
118+
119+
export default GraphNavBar

‎app/components/Occupied/Occupied.tsx‎

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,11 @@ import AddCircleOutlineTwoToneIcon from '@material-ui/icons/AddCircleOutlineTwoT
1414

1515
// // MODALS
1616
// import AddModal from '../modals/AddModal';
17-
import EnvModal from '../../modals/EnvModal';
18-
import AddModal from '../../modals/AddModal';
19-
import AwsModal from '../../modals/AwsModal';
17+
import EnvModal from '../../modals/EnvModal/EnvModal';
18+
import AddModal from '../../modals/AddModal/AddModal';
19+
import AwsModal from '../../modals/AwsModal/AwsModal';
2020
import ProfileContainer from '../../containers/ProfileContainer';
21-
import ServicesModal from '../../modals/ServicesModal';
21+
import ServicesModal from '../../modals/ServicesModal/ServicesModal';
2222

2323
// STYLESHEETS
2424
import './Occupied.scss';
@@ -56,7 +56,6 @@ const Occupied = React.memo(() => {
5656
<div
5757
className="dashboardArea"
5858
>
59-
6059
<header className="mainHeader">
6160
<section
6261
className="header"

‎app/containers/DashboardContainer.tsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,6 @@ import '../stylesheets/Dashboard.scss';
1515
const DashboardContainer = React.memo(() => {
1616

1717
const [visible, setVisible] = useState(false);
18-
const [ example,setExample ] = useState(false);
19-
2018
/**
2119
* When DashBoard Container first mounted, visible is default to false, so that the Splash component can be stay visible.
2220
* After 4 seconds, set the DashBoard Container visibility to true
@@ -43,10 +41,8 @@ const DashboardContainer = React.memo(() => {
4341
<EventContextProvider>
4442
<QueryContextProvider>
4543
<AwsContextProvider>
46-
<SidebarContainer
47-
setExample={setExample}
48-
/>
49-
<MainContainer />
44+
<SidebarContainer />
45+
<MainContainer/>
5046
</AwsContextProvider>
5147
</QueryContextProvider>
5248
</EventContextProvider>

‎app/containers/DockerHealthContainer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,10 @@ import { QueryContext } from '../context/QueryContext';
44
import GrafanaEventChart from '../charts/GrafanaEventChart';
55
import { Button } from '@material-ui/core';
66
import { useParams } from 'react-router-dom';
7+
import { stringToColour as colourGenerator } from './GraphsContainer/helpers';
78

89
interface HealthContainerProps {
910
sizing: string;
10-
colourGenerator: Function;
1111
category: string;
1212
}
1313

@@ -32,7 +32,7 @@ const DockerHealthContainer: React.FC<HealthContainerProps> = React.memo(props =
3232
const { selectedMetrics } = useContext(QueryContext);
3333
const { service } = useParams<keyof Params>() as Params;
3434
const [healthChartsArr, setHealthChartsArr] = useState<JSX.Element[]>([]);
35-
const { sizing, colourGenerator, category } = props;
35+
const { sizing, category } = props;
3636
const [currIndex, setCurrIndex] = useState(0);
3737
const [currChunk, setCurrChunk] = useState<JSX.Element[]>([]);
3838
const chunkSize = 7;

‎app/containers/EventContainer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ import { QueryContext } from '../context/QueryContext';
66
import EventChart from '../charts/EventChart';
77
import { Button } from '@material-ui/core';
88
import GrafanaEventChart from '../charts/GrafanaEventChart';
9+
import { stringToColour as colourGenerator } from './GraphsContainer/helpers';
910

1011
interface EventContainerProps {
1112
sizing: string;
12-
colourGenerator: Function;
1313
}
1414

1515
interface Params {
@@ -32,7 +32,7 @@ const EventContainer: React.FC<EventContainerProps> = React.memo(props => {
3232
const { eventData } = useContext(EventContext);
3333
const { selectedMetrics } = useContext(QueryContext);
3434
const { service } = useParams<keyof Params>() as Params;
35-
const { sizing, colourGenerator } = props;
35+
const { sizing } = props;
3636
// eventChartsArr contains all charts of all metrics
3737
const [eventChartsArr, setEventChartsArr] = useState<JSX.Element[]>([]);
3838
const [currIndex, setCurrIndex] = useState(0);

0 commit comments

Comments
 (0)