Skip to content

Commit 11ef6e4

Browse files
tim-atapagratim-atapagra
authored
Merge pull request #32 from Chronos2-0/chris/health-button-restructure
Chris/health button restructure
2 parents 3b2c10c + 294056a commit 11ef6e4

File tree

11 files changed

+3652
-50
lines changed

11 files changed

+3652
-50
lines changed

‎Main.js

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -202,6 +202,7 @@ ipcMain.on('deleteService', (message, index) => {
202202

203203
// Queries the database for communications information and returns it back to the render process.
204204
ipcMain.on('overviewRequest', (message, index) => {
205+
console.log('hello from overview request');
205206
const { services } = JSON.parse(
206207
fs.readFileSync(path.resolve(__dirname, './user/settings.json'), { encoding: 'UTF-8' }),
207208
);
@@ -244,6 +245,7 @@ ipcMain.on('overviewRequest', (message, index) => {
244245
console.log('Connected to SQL Database');
245246
const queryResults = JSON.stringify(result.rows);
246247
// Asynchronous event emitter used to transmit query results back to the render process.
248+
console.log('ipcMain about to send overviewResponse message');
247249
message.sender.send('overviewResponse', queryResults);
248250
}
249251
});
@@ -252,6 +254,7 @@ ipcMain.on('overviewRequest', (message, index) => {
252254

253255
// Queries the database for computer health information and returns it back to the render process.
254256
ipcMain.on('detailsRequest', (message, index) => {
257+
console.log('detailsRequest message received');
255258
const databaseType = JSON.parse(
256259
fs.readFileSync(path.resolve(__dirname, './user/settings.json'), { encoding: 'UTF-8' }),
257260
).services[index][1];
@@ -275,6 +278,7 @@ ipcMain.on('detailsRequest', (message, index) => {
275278
}
276279
const queryResults = JSON.stringify(result.rows);
277280
// Asynchronous event emitter used to transmit query results back to the render process.
281+
// console.log('healthInfo data about to comeback');
278282
message.sender.send('detailsResponse', queryResults);
279283
});
280284
}

‎app/assets/tooltip.jpg

11.9 KB
Loading

‎app/components/AddService.jsx

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,10 +29,19 @@ const AddService = () => {
2929
setDbType(document.getElementById('dbType').value);
3030
}, [dbState, setDbType]);
3131

32+
const tooltipWriteup = `Chronos utilizes user-owned databases to store communications and system health data.
33+
Please enter a valid connection string to a SQL or noSQL database to begin monitoring.`;
34+
3235
return (
3336
<div className="mainContainer">
34-
<img src="app/assets/logo2.png" alt="logo" />
35-
<h2 className="signUpHeader">Enter Your Database Information</h2>
37+
<img src="app/assets/logo2.png" alt="logo" id="addServiceLogo" />
38+
<h2 className="signUpHeader">
39+
Enter Your Database Information
40+
<sup className="tooltip">
41+
&#9432;
42+
<div className="tooltiptext">{tooltipWriteup}</div>
43+
</sup>
44+
</h2>
3645
<form>
3746
Database Type:
3847
<select id="dbType" onChange={() => setDbType(document.getElementById('dbType').value)}>

‎app/components/Modal.jsx

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -16,15 +16,15 @@ const Modal = (props) => {
1616
} = props;
1717
// Dictionary used to render proper data chart within Modal component upon rendering
1818
const dict = {
19-
request: <RequestTypesChart service={service} />,
19+
Request: <RequestTypesChart service={service} />,
2020
routesImage: <RouteTrace service={service} />,
21-
response: <ResponseCodesChart service={service} />,
22-
speed: <SpeedChart service={service} />,
23-
processes: <ProcessesChart service={service} />,
24-
latency: <LatencyChart service={service} />,
21+
Response: <ResponseCodesChart service={service} />,
22+
Speed: <SpeedChart service={service} />,
23+
Processes: <ProcessesChart service={service} />,
24+
Latency: <LatencyChart service={service} />,
2525
Traffic: <MicroServiceTraffic service={service} />,
26-
temperature: <TemperatureChart service={service} />,
27-
memory: <MemoryChart service={service} />,
26+
Temperature: <TemperatureChart service={service} />,
27+
Memory: <MemoryChart service={service} />,
2828
};
2929

3030
// event.stopPropogation allows the user to interact with the chart as opposed to a click on the

‎app/components/ServiceDetails.jsx

Lines changed: 22 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,11 @@
1+
/* eslint-disable react/jsx-one-expression-per-line */
12
import React, { useState } from 'react';
23
import Modal from './Modal.jsx';
3-
import pieChart from '../assets/pieChart.png';
4-
import memoryChart from '../assets/memoryChart.png';
5-
import tempChart from '../assets/tempChart.png';
6-
import speedChart from '../assets/speedChart.png';
7-
import latencyChart from '../assets/latencyChart.png';
8-
import processingChart from '../assets/processingChart.png';
94

105
// Renders charts created with health and communication data for a selected database.
116
const ServiceDetails = (props) => {
127
// Renders health info detail buttons
13-
const { service } = props;
8+
const { service, setDetails } = props;
149
// Hook used to toggle whether or not the Modal component renders
1510
const [modalDisplay, toggleModalDisplay] = useState(false);
1611
// Hook used to set the chart that the Modal displays. The
@@ -19,19 +14,17 @@ const ServiceDetails = (props) => {
1914
// Hook used to set the Modal Component title. The "alt" attribute
2015
// is grabbed from the onClick event via event.path[0].alt
2116
const [chartTitle, setChartTitle] = useState();
22-
const { currentMicroservice } = props;
2317

2418
// Dictionary used by the healthInfoButtons loop below
2519

2620
const buttonProperties = [
27-
{ id: 'request', alt: 'Request Data', src: 'app/assets/pieChart.png' },
28-
{ id: 'response', alt: 'Response Data', src: 'app/assets/pieChart.png' },
29-
// { id: 'routes', alt: 'Route Trace', src: 'https://st2.depositphotos.com/3894705/9581/i/950/depositphotos_95816620-stock-photo-round-button-shows-speedometer.jpg' },
30-
{ id: 'speed', alt: 'Speed Data', src: 'app/assets/speedChart.png' },
31-
{ id: 'processes', alt: 'Processes Data', src: 'app/assets/processingChart.png' },
32-
{ id: 'latency', alt: 'Latency Data', src: 'app/assets/latencyChart.png' },
33-
{ id: 'temperature', alt: 'Temperature Data', src: 'app/assets/tempChart.png' },
34-
{ id: 'memory', alt: 'Memory Data', src: 'app/assets/memoryChart.png' },
21+
{ id: 'Request', alt: 'Request Data', src: 'app/assets/pieChart.png' },
22+
{ id: 'Response', alt: 'Response Data', src: 'app/assets/pieChart.png' },
23+
{ id: 'Speed', alt: 'Speed Data', src: 'app/assets/speedChart.png' },
24+
{ id: 'Processes', alt: 'Processes Data', src: 'app/assets/processingChart.png' },
25+
{ id: 'Latency', alt: 'Latency Data', src: 'app/assets/latencyChart.png' },
26+
{ id: 'Temperature', alt: 'Temperature Data', src: 'app/assets/tempChart.png' },
27+
{ id: 'Memory', alt: 'Memory Data', src: 'app/assets/memoryChart.png' },
3528
];
3629

3730
// Create the Health Info buttons and their associated properties. Each time a button is clicked,
@@ -56,7 +49,7 @@ const ServiceDetails = (props) => {
5649
alt={buttonProperties[i].alt}
5750
/>
5851
<br />
59-
<div style={{ color: 'white', paddingLeft: '7px' }}>
52+
<div>
6053
{buttonProperties[i].id}
6154
</div>
6255
</div>
@@ -78,11 +71,21 @@ const ServiceDetails = (props) => {
7871
}}
7972
/>
8073
) : null}
81-
<button className="backButton" type="button" onClick={() => document.location.reload()}>Back</button>
82-
<h3 id="microserviceHealthTitle">Microservice Health</h3>
74+
75+
<h3 id="microserviceHealthTitle">Microservice Health - {service}</h3>
8376
<div id="healthGrid">
8477
{healthInfoButtons}
8578
</div>
79+
<button
80+
className="backButton"
81+
type="button"
82+
onClick={() => {
83+
// document.location.reload()
84+
setDetails(null);
85+
}}
86+
>
87+
Clear Health Data
88+
</button>
8689
</div>
8790
);
8891
};

‎app/components/ServiceOverview.jsx

Lines changed: 29 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -23,15 +23,16 @@ const ServiceOverview = (props) => {
2323
useEffect(() => {
2424
// IPC communication used to initiate query for information on microservices.
2525
ipcRenderer.send('overviewRequest', props.index);
26-
2726
// IPC listener responsible for retrieving infomation from asynchronous main process message.
2827
ipcRenderer.on('overviewResponse', (event, data) => {
2928
// Adds to state and context.
29+
console.log(JSON.parse(data));
3030
setOverviewState(Object.values(JSON.parse(data)));
3131
serviceComponents.overviewData = JSON.parse(data);
3232
});
3333
}, []);
3434

35+
console.log('overviewstate: ', overviewState);
3536
// Add routes to the display
3637
// Hook used to toggle whether or not the Modal component renders
3738
const [modalDisplay, toggleModalDisplay] = useState(false);
@@ -43,7 +44,10 @@ const ServiceOverview = (props) => {
4344
const [chartTitle, setChartTitle] = useState();
4445

4546
// route button AND traffic button property
46-
const routeButtonProperty = { traffic: { id: 'Traffic', alt: 'Microservice Traffic', src: 'app/assets/chartModal.png' }, routes: { id: 'routesImage', alt: 'Route Trace', src: routeChart } };
47+
const routeButtonProperty = {
48+
traffic: { id: 'Traffic', alt: 'Microservice Traffic', src: 'app/assets/chartModal.png' },
49+
routes: { id: 'routesImage', alt: 'Route Trace', src: routeChart },
50+
};
4751

4852
// declare routes array to display routes when modal is toggled
4953
const routes = [];
@@ -126,7 +130,8 @@ const ServiceOverview = (props) => {
126130
// Adds returned data to context
127131
healthdata.detailData = Object.values(JSON.parse(data));
128132
// Updates state. Triggers rerender.
129-
setDetails(<ServiceDetails service={element.currentmicroservice} />);
133+
setDetails(<ServiceDetails service={element.currentmicroservice} setDetails={setDetails} />);
134+
console.log('details selected is: ', detailsSelected);
130135
});
131136
}}
132137
>
@@ -175,16 +180,21 @@ const ServiceOverview = (props) => {
175180
return componentButtons;
176181
};
177182

178-
if (detailsSelected) return detailsSelected;
183+
const tooltipWriteup = `Communications data - Routes and Traffic - is not specific to a single microservice,
184+
but combines data from all microservices within a single application network.`;
185+
186+
const tooltipWriteup2 = 'View and toggle between health data for individual services within your microservice network.';
179187

180188
return (
181189
<div className="mainContainer">
182-
<div>
183-
<h1 className="overviewTitle">Microservices Overview</h1>
184-
</div>
185-
<div className="servicesList">{serviceList()}</div>
186-
<br />
187-
<h1>Microservices Communications</h1>
190+
<h1 className="overviewTitle">Microservices Overview</h1>
191+
<h2>
192+
Communications Data
193+
<sup className="tooltip">
194+
&#9432;
195+
<div className="tooltiptext">{tooltipWriteup}</div>
196+
</sup>
197+
</h2>
188198
{modalDisplay ? (
189199
<Modal
190200
chartTitle={chartTitle}
@@ -200,7 +210,15 @@ const ServiceOverview = (props) => {
200210
{routes}
201211
{traffic}
202212
</div>
203-
213+
<div className="servicesList">
214+
{serviceList()}
215+
<sup className="tooltip">
216+
&#9432;
217+
<div className="tooltiptext">{tooltipWriteup2}</div>
218+
</sup>
219+
</div>
220+
<br />
221+
{detailsSelected || null}
204222
</div>
205223
);
206224
};

‎app/components/ServicesDashboard.jsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1+
/* eslint-disable react/jsx-one-expression-per-line */
12
import React, { useState, useContext } from 'react';
23
import ServiceOverview from './ServiceOverview.jsx';
34
import DashboardContext from '../context/DashboardContext';
45
import SetupContext from '../context/SetupContext';
56
import AddService from './AddService.jsx';
67
import DeleteService from './DeleteService.jsx';
78

8-
const path = require('path');
9-
109
const ServicesDashboard = (props) => {
1110
// Used to toggle setup required if user wants to add a new database.
1211
const setup = useContext(SetupContext);
@@ -43,7 +42,9 @@ const ServicesDashboard = (props) => {
4342
<div className="leftTopContainer">
4443
<img alt="Chronos Logo" src="app/assets/icon2Cropped.png" id="serviceDashLogo" />
4544
<div className="left-top">
46-
<h2 className="dashboardHeader">Your Databases</h2>
45+
<h2 className="dashboardHeader">
46+
Your Databases
47+
</h2>
4748
{renderServiceList(serviceList)}
4849
</div>
4950
<div className="left-bottom">

‎app/index.css

Lines changed: 48 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,38 @@ margin-top: -100px;
6565
font-weight: lighter;
6666
}
6767

68+
#addServiceLogo {
69+
margin-bottom: 0px;
70+
}
71+
72+
.tooltip {
73+
font-size: 10px;
74+
position: relative;
75+
/* display: inline-block; */
76+
z-index: 0;
77+
}
78+
79+
.tooltiptext {
80+
visibility: hidden;
81+
font-size: 12px;
82+
width: 180px;
83+
background-color: black;
84+
color: #fff;
85+
text-align: center;
86+
border-radius: 6px;
87+
padding: 5px 0;
88+
89+
/* Position the tooltip */
90+
position: absolute;
91+
z-index: 1;
92+
left: 105%;
93+
top: -5px;
94+
}
95+
96+
.tooltip:hover .tooltiptext {
97+
visibility: visible;
98+
}
99+
68100
.header {
69101
color: white;
70102
height: 50px;
@@ -76,10 +108,8 @@ margin-top: -100px;
76108

77109
.mainContainer {
78110
font-family: Arial, Helvetica, sans-serif;
79-
display: grid;
80-
grid-template-columns: 100%;
81-
grid-template-rows: 33% 33% 33%;
82-
justify-items: center;
111+
display: flex;
112+
flex-direction: column;
83113
align-items: center;
84114
color: white;
85115
}
@@ -123,7 +153,7 @@ margin-top: -100px;
123153
}
124154

125155
.overviewTitle {
126-
margin-top: 80px;
156+
margin-top: 40px;
127157
}
128158

129159
.leftTopContainer {
@@ -286,6 +316,7 @@ select {
286316
background-color: #edd9a3;
287317
transition: 0.2s;
288318
margin-left: 0px;
319+
margin-top: 5%;
289320
}
290321

291322
.backButton:hover {
@@ -295,17 +326,26 @@ select {
295326

296327
/* healthInfo visualizer css from 2.0 Team */
297328
#serviceDetailsContainer {
329+
margin-top: 5%;
298330
display: flex;
299331
flex-direction: column;
300332
align-items: center;
301333
justify-content: center;
302334
}
303-
#healthGrid {
335+
336+
/* #healthGrid {
304337
display: grid;
305338
grid-template-columns: 75px 75px 75px;
306339
width: auto;
307340
justify-items: center;
308341
align-items: center;
342+
} */
343+
344+
#healthGrid {
345+
display: grid;
346+
grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
347+
justify-items: center;
348+
text-align: center;
309349
}
310350

311351
.healthName {
@@ -344,6 +384,7 @@ select {
344384
width: 100%;
345385
height: 100%;
346386
background:rgba(0,0,0,.5);
387+
z-index: 1;
347388
}
348389

349390
#modalContent {
@@ -352,7 +393,7 @@ select {
352393
left: 50%;
353394
margin-left: -500px;
354395
margin-top: -380px;
355-
z-index: 1;
396+
z-index: 2;
356397
width: 1000px;
357398
height: 760px;
358399
background: #333;

‎dist/index.html

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Chronos</title>
8+
</head>
9+
<body>
10+
<div id='app'></div>
11+
<script type="text/javascript" src="index_bundle.js"></script></body>
12+
</html>

0 commit comments

Comments
 (0)