Skip to content

Commit bae3625

Browse files
mdtaggmdtagg
committed
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
1 parent 81825c9 commit bae3625

2 files changed

Lines changed: 141 additions & 105 deletions

File tree

‎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/containers/GraphsContainer.tsx‎

Lines changed: 22 additions & 105 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
11
/* eslint-disable no-bitwise */
22
import React, { useEffect, useState, useContext } from 'react';
3-
import { useNavigate, useParams } from 'react-router-dom';
3+
import { useParams } from 'react-router-dom';
44
import { ApplicationContext } from '../context/ApplicationContext';
55
import { HealthContext } from '../context/HealthContext';
66
import { CommsContext } from '../context/CommsContext';
77
import { DockerContext } from '../context/DockerContext';
88
import { EventContext } from '../context/EventContext';
9-
import { QueryContext } from '../context/QueryContext';
109
import Header from '../components/Header';
1110
import RequestTypesChart from '../charts/RequestTypesChart';
1211
import ResponseCodesChart from '../charts/ResponseCodesChart';
@@ -21,8 +20,9 @@ import * as DashboardContext from '../context/DashboardContext';
2120
import lightAndDark from '../components/Styling';
2221
import DockerHealthContainer from './DockerHealthContainer';
2322

23+
import GraphNavBar from '../components/GraphNavBar';
24+
2425
import '../stylesheets/GraphsContainer.scss';
25-
import { Link } from 'react-router-dom';
2626
import Inspect from './Inspect';
2727

2828
interface Params {
@@ -31,20 +31,20 @@ interface Params {
3131
}
3232

3333
const GraphsContainer: React.FC = React.memo(() => {
34-
const navigate = useNavigate();
34+
3535
const { app, service } = useParams<keyof Params>() as Params;
3636
const [live, setLive] = useState<boolean>(false);
3737
const { intervalID, setIntervalID } = useContext(ApplicationContext);
38-
const { servicesData, getSavedMetrics } = useContext(ApplicationContext);
39-
const { fetchHealthData, setHealthData, services } = useContext(HealthContext);
38+
const { getSavedMetrics } = useContext(ApplicationContext);
39+
const { fetchHealthData, setHealthData } = useContext(HealthContext);
4040
const { setDockerData, dockerData } = useContext(DockerContext);
4141
const { fetchEventData, setEventData } = useContext(EventContext);
4242
// const { fetchKafkaEventData, setKafkaEventData } = useContext(EventContext);
4343
// const { fetchKubernetesEventData, setKubernetesEventData } = useContext(EventContext);
44-
const { fetchCommsData, commsData } = useContext(CommsContext);
45-
const { selectedMetrics } = useContext(QueryContext);
44+
const { fetchCommsData } = useContext(CommsContext);
45+
// const { selectedMetrics } = useContext(QueryContext);
4646
const [chart, setChart] = useState<string>('all');
47-
const [prevRoute, setPrevRoute] = useState<string>('');
47+
// const [prevRoute, setPrevRoute] = useState<string>('');
4848
const { mode } = useContext(DashboardContext.DashboardContext);
4949
let [inspect, setInspect] = useState<boolean>(false);
5050

@@ -94,14 +94,6 @@ const GraphsContainer: React.FC = React.memo(() => {
9494
//random variable to hold the light or dark mode of the display?..ok....sure
9595
const currentMode = mode === 'light' ? lightAndDark.lightModeText : lightAndDark.darkModeText;
9696

97-
const routing = (route: string) => {
98-
if (location.href.includes('communications')) {
99-
if (prevRoute === '') navigate(`${servicesData[0].microservice}`);
100-
else navigate(prevRoute);
101-
}
102-
setChart(route);
103-
};
104-
10597
const stringToColour = (string: string, recurses = 0) => {
10698
if (recurses > 20) return string;
10799
function hashString(str: string) {
@@ -128,96 +120,21 @@ const GraphsContainer: React.FC = React.memo(() => {
128120
return contrastYiq(string);
129121
};
130122

131-
const getHealthAndEventComponents = () => {
132-
const buttonList: JSX.Element[] = [];
133-
if (selectedMetrics) {
134-
selectedMetrics.forEach((element, id) => {
135-
const categoryName = Object.keys(element)[0];
136-
let prefix;
137-
if (categoryName === 'Event') {
138-
prefix = 'event_';
139-
} else if (categoryName === 'books' || categoryName === 'customers' || categoryName === 'frontend' || categoryName === 'orders'){
140-
prefix = 'docker_';
141-
} else {
142-
prefix = 'health_';
143-
}
144-
buttonList.push(
145-
<button
146-
id={`${prefix}${categoryName}-button`}
147-
className={chart === `${prefix}${categoryName}` ? 'selected' : undefined}
148-
onClick={() => routing(`${prefix}${categoryName}`)}
149-
key={`1-${id}`}
150-
>
151-
{categoryName}
152-
</button>
153-
);
154-
});
155-
}
156-
157-
return buttonList;
158-
};
159-
160-
const HealthAndEventButtons: JSX.Element[] = getHealthAndEventComponents();
161-
162123
return (
163124
<>
164-
<nav id="navigationBar">
165-
<button
166-
className={chart === 'all' ? 'selected' : undefined}
167-
id="all-button"
168-
onClick={() => routing('all')}
169-
key="0"
170-
>
171-
Metrics Query
172-
</button>
173-
{HealthAndEventButtons}
174-
{dockerData.containername && (
175-
<button
176-
id="docker-button"
177-
className={chart === 'docker' ? 'selected' : undefined}
178-
onClick={() => routing('docker')}
179-
key="2"
180-
>
181-
Docker
182-
</button>
183-
)}
184-
{commsData.length > 0 && (
185-
<button
186-
id="communication-button"
187-
className={chart === 'communications' ? 'selected' : undefined}
188-
onClick={() => {
189-
if (!location.href.includes('communications')) setPrevRoute(services.join(' '));
190-
setChart('communications');
191-
}}
192-
key="3"
193-
>
194-
Communication
195-
</button>
196-
)}
197-
<button
198-
id="modify-metrics-button"
199-
className={chart === 'modifyMetrics' ? 'selected' : undefined}
200-
onClick={() => {
201-
routing('modifyMetrics');
202-
}}
203-
key="4"
204-
>
205-
Modify Metrics
206-
</button>
207-
{/* <Link className="sidebar-link" to="/Inspect" id="Inspect" >
208-
<SettingsIcon
209-
style={{
210-
WebkitBoxSizing: 'content-box',
211-
boxShadow: 'none',
212-
width: '35px',
213-
height: '35px',
214-
}}
215-
/>
216-
&emsp;Inspect
217-
</Link> */}
218-
<button onClick={() => { setInspect(!inspect) }}>Inspect</button>
219-
</nav>
220-
<Header app={app} service={service} live={live} setLive={setLive} />
125+
<GraphNavBar
126+
chart={chart}
127+
setChart={setChart}
128+
dockerData={dockerData}
129+
inspect={inspect}
130+
setInspect={setInspect}
131+
/>
132+
<Header
133+
app={app}
134+
service={service}
135+
live={live}
136+
setLive={setLive}
137+
/>
221138
{inspect && <Inspect />}
222139
<div className="graphs-container">
223140
{chart === 'communications' ? (

0 commit comments

Comments
 (0)