Skip to content

Commit 48b8d58

Browse files
robicano22robicano22
committed
Health Info Visualizer Update
1 parent bac651b commit 48b8d58

3 files changed

Lines changed: 169 additions & 37 deletions

File tree

‎app/components/Modal.jsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import React from 'react';
2+
import RequestTypesChart from '../charts/request-type-chart.jsx';
3+
import ResponseCodesChart from '../charts/response-code-chart.jsx';
4+
import SpeedChart from '../charts/speed-chart.jsx';
5+
import ProcessesChart from '../charts/processes-chart.jsx';
6+
import TemperatureChart from '../charts/temperature-chart.jsx';
7+
import LatencyChart from '../charts/latency-chart.jsx';
8+
import MemoryChart from '../charts/memory-chart.jsx';
9+
10+
const Modal = (props) => {
11+
const { modalChart } = props;
12+
const { service } = props;
13+
const { toggleModalDisplay } = props;
14+
const { chartTitle } = props;
15+
const dict = {
16+
request: <RequestTypesChart service={service} />,
17+
response: <ResponseCodesChart service={service} />,
18+
speed: <SpeedChart service={service} />,
19+
processes: <ProcessesChart service={service} />,
20+
latency: <LatencyChart service={service} />,
21+
temperature: <TemperatureChart service={service} />,
22+
memory: <MemoryChart service={service} />,
23+
};
24+
25+
return (
26+
<div id="modalWindow" onClick={() => toggleModalDisplay(!toggleModalDisplay)}>
27+
<div id="modalContent" onClick={(event) => event.stopPropagation()}>
28+
<h3 id="chartTitle">{chartTitle}</h3>
29+
{dict[modalChart]}
30+
</div>
31+
</div>
32+
);
33+
};
34+
35+
export default Modal;

‎app/components/ServiceDetails.jsx‎

Lines changed: 64 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,71 @@
1-
import React from 'react';
2-
import RequestTypesChart from '../charts/request-type-chart.jsx';
3-
import ResponseCodesChart from '../charts/response-code-chart.jsx';
4-
import SpeedChart from '../charts/speed-chart.jsx';
5-
import ProcessesChart from '../charts/processes-chart.jsx';
6-
import TemperatureChart from '../charts/temperature-chart.jsx'
7-
import LatencyChart from '../charts/latency-chart.jsx';
8-
import MemoryChart from '../charts/memory-chart.jsx';
1+
/* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
2+
import React, { useState } from 'react';
3+
import Modal from './Modal.jsx';
94

10-
// Renders charts created with health and communication data for a selected database.
5+
// Renders health info detail buttons
116
const ServiceDetails = (props) => {
7+
const { service } = props;
8+
// Hook used to toggle whether or not the Modal component renders
9+
const [modalDisplay, toggleModalDisplay] = useState(false);
10+
// Hook used to set the chart that the Modal displays. The
11+
// modalDisplay state is drilled into the Modal component.
12+
const [modalChart, setModalChart] = useState();
13+
// Hook used to set the Modal Component title. The "alt" attribute
14+
// is grabbed from the onClick event via event.path[0].alt
15+
const [chartTitle, setChartTitle] = useState();
16+
17+
// Dictionary used by the healthInfoButtons loop below
18+
const buttonProperties = [
19+
{ id: 'request', alt: 'Request Data', src: 'https://st2.depositphotos.com/3894705/9581/i/950/depositphotos_95816620-stock-photo-round-button-shows-speedometer.jpg' },
20+
{ id: 'response', alt: 'Response Data', src: 'https://st2.depositphotos.com/3894705/9581/i/950/depositphotos_95816620-stock-photo-round-button-shows-speedometer.jpg' },
21+
{ id: 'speed', alt: 'Speed Data', src: 'https://st2.depositphotos.com/3894705/9581/i/950/depositphotos_95816620-stock-photo-round-button-shows-speedometer.jpg' },
22+
{ id: 'processes', alt: 'Processes Data', src: 'https://st2.depositphotos.com/3894705/9581/i/950/depositphotos_95816620-stock-photo-round-button-shows-speedometer.jpg' },
23+
{ id: 'latency', alt: 'Latency Data', src: 'https://st2.depositphotos.com/3894705/9581/i/950/depositphotos_95816620-stock-photo-round-button-shows-speedometer.jpg' },
24+
{ id: 'temperature', alt: 'Temperature Data', src: 'https://st2.depositphotos.com/3894705/9581/i/950/depositphotos_95816620-stock-photo-round-button-shows-speedometer.jpg' },
25+
{ id: 'memory', alt: 'Memory Data', src: 'https://st2.depositphotos.com/3894705/9581/i/950/depositphotos_95816620-stock-photo-round-button-shows-speedometer.jpg' },
26+
];
27+
28+
// Create the Health Info buttons and their associated properties. Each time a button is clicked,
29+
// setChartTitle will grab a title to render in the Modal component, setModalChart will grab the
30+
// correct chart to render, and toggleModalDisplay will actually render the Modal display
31+
const healthInfoButtons = [];
32+
for (let i = 0; i < buttonProperties.length; i += 1) {
33+
healthInfoButtons.push(
34+
<div className="healthChartContainer">
35+
<input
36+
onClick={() => {
37+
setChartTitle(event.path[0].alt);
38+
setModalChart(event.path[0].id);
39+
toggleModalDisplay(!modalDisplay);
40+
}}
41+
type="image"
42+
id={buttonProperties[i].id}
43+
src={buttonProperties[i].src}
44+
width="50px"
45+
alt={buttonProperties[i].alt}
46+
/>
47+
</div>,
48+
);
49+
}
50+
51+
1252
return (
13-
<div>
53+
<div id="serviceDetailsContainer">
54+
{modalDisplay ? (
55+
<Modal
56+
chartTitle={chartTitle}
57+
service={service}
58+
modalChart={modalChart}
59+
toggleModalDisplay={toggleModalDisplay}
60+
onClick={() => {
61+
toggleModalDisplay(!modalDisplay);
62+
}}
63+
/>
64+
) : null}
1465
<button className="backButton" type="button" onClick={() => document.location.reload()}>Back</button>
15-
<div>
16-
<h3>Request Types</h3>
17-
<RequestTypesChart service={props.service} />
18-
</div>
19-
<div>
20-
<h3>Response Codes </h3>
21-
<ResponseCodesChart service={props.service} />
22-
</div>
23-
<div>
24-
<h3>Speed Chart</h3>
25-
<SpeedChart service={props.service} />
26-
</div>
27-
<div>
28-
<h3>Processes Chart</h3>
29-
<ProcessesChart service={props.service} />
30-
</div>
31-
<div>
32-
<h3>Latency</h3>
33-
<LatencyChart service={props.service} />
34-
</div>
35-
<div>
36-
<h3>Temperature Chart</h3>
37-
<TemperatureChart service={props.service} />
38-
</div>
39-
<div>
40-
<h3>Memory Chart</h3>
41-
<MemoryChart service={props.service} />
66+
<h3 id="microserviceHealthTitle">Microservice Health</h3>
67+
<div id="healthGrid">
68+
{healthInfoButtons}
4269
</div>
4370
</div>
4471
);

‎app/index.css‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -207,6 +207,7 @@ select {
207207

208208
.backButton {
209209
height: 25px;
210+
/* width: 35px; */
210211
background-color: #edd9a3;
211212
transition: 0.2s;
212213
margin-left: 10px;
@@ -223,3 +224,72 @@ form {
223224
font-size: 2vh;
224225
/* margin-top: -4%; */
225226
}
227+
228+
229+
/* healthInfo visualizer css from 2.0 Team */
230+
#serviceDetailsContainer {
231+
display: flex;
232+
flex-direction: column;
233+
align-items: center;
234+
justify-content: center;
235+
}
236+
#healthGrid {
237+
display: grid;
238+
grid-template-columns: 75px 75px 75px;
239+
width: auto;
240+
justify-items: center;
241+
align-items: center;
242+
}
243+
244+
.healthName {
245+
text-align: center;
246+
margin-bottom: 1px;
247+
}
248+
249+
.healthChartContainer {
250+
margin: 10px 10px 10px 10px;
251+
}
252+
253+
.healthChartContainer:hover {
254+
opacity: 0.7;
255+
}
256+
257+
#microserviceHealthInfo {
258+
text-align: center;
259+
margin-top: 25px;
260+
}
261+
262+
#microserviceHealthTitle {
263+
margin-left: 0px;
264+
}
265+
266+
#modalWindow {
267+
position:fixed;
268+
padding:0;
269+
margin:0;
270+
top:0;
271+
left:0;
272+
width: 100%;
273+
height: 100%;
274+
background:rgba(0,0,0,.5);
275+
}
276+
277+
#modalContent {
278+
position: fixed;
279+
top: 50%;
280+
left: 50%;
281+
margin-left: -500px;
282+
margin-top: -380px;
283+
z-index: 1;
284+
width: 1000px;
285+
height: 760px;
286+
background: #333;
287+
opacity: 1 !important;
288+
align-content: center;
289+
290+
}
291+
292+
#chartTitle {
293+
text-align: center;
294+
margin-bottom: 50px;
295+
}

0 commit comments

Comments
 (0)