Skip to content

Commit 23c0e25

Browse files
robicano22robicano22
committed
splash ready, small styling changes
1 parent f7cd0f8 commit 23c0e25

6 files changed

Lines changed: 104 additions & 104 deletions

File tree

‎app/charts/route-trace.jsx‎

Lines changed: 31 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,64 +1,63 @@
1+
/* eslint-disable react/jsx-one-expression-per-line */
12
import React, { useContext } from 'react';
23
import CommunicationsContext from '../context/OverviewContext';
34

45
const RouteLocations = (props) => {
56
const communicationsData = useContext(CommunicationsContext).overviewData;
67

7-
//initialize an empty object resObj. This object will store the microservice names as values and its corresponding correlatingId or correlatingid as keys. The microservice names will be stored in array within the order it was to the database.
8+
// initialize an empty object resObj. This object will store the microservice names as values and its corresponding correlatingId or correlatingid as keys. The microservice names will be stored in array within the order it was to the database.
89
const resObj = {};
910

10-
if(communicationsData.length>0 && communicationsData[0]["_id"]){
11-
//Sort the communication array from latest to earliest document
11+
if (communicationsData.length > 0 && communicationsData[0]._id) {
12+
// Sort the communication array from latest to earliest document
1213
// communicationsData.sort((a,b)=>{ new Date(a.timeSent) - new Date(b.timeSent)})
13-
communicationsData.sort((a,b)=>{
14-
if(new Date(a.timeSent) > new Date(b.timeSent)) return 1;
15-
if(new Date(a.timeSent) < new Date(b.timeSent)) return -1;
14+
communicationsData.sort((a, b) => {
15+
if (new Date(a.timeSent) > new Date(b.timeSent)) return 1;
16+
if (new Date(a.timeSent) < new Date(b.timeSent)) return -1;
1617
return 0;
1718
});
1819

1920

20-
21-
//Iterate over sorted communicationsData array from the end to the beginning
22-
for (let i = 0; i < communicationsData.length; i+=1) {
23-
//declare a constant element and initialize it as the object at index i of the communicationsData array
21+
// Iterate over sorted communicationsData array from the end to the beginning
22+
for (let i = 0; i < communicationsData.length; i += 1) {
23+
// declare a constant element and initialize it as the object at index i of the communicationsData array
2424
const element = communicationsData[i];
25-
//Pushes the microservice name into the object
25+
// Pushes the microservice name into the object
2626
if (resObj[element.correlatingId]) {
2727
resObj[element.correlatingId].push(element.currentMicroservice);
28-
}
29-
else resObj[element.correlatingId] = [element.currentMicroservice];
28+
} else resObj[element.correlatingId] = [element.currentMicroservice];
3029
// initializing the object with the first microservice
3130
}
32-
}
33-
else{
34-
for (let i = communicationsData.length-1; i >= 0; i--) {
31+
} else {
32+
for (let i = communicationsData.length - 1; i >= 0; i--) {
3533
const element = communicationsData[i];
3634
if (resObj[element.correlatingid]) resObj[element.correlatingid].push(element.currentmicroservice);
3735
else resObj[element.correlatingid] = [element.currentmicroservice];
3836
// initializing the object with the first microservice
39-
};
40-
}
37+
}
38+
}
4139

42-
//use object values to destructure locations
40+
// use object values to destructure locations
4341
const tracePoints = Object.values(resObj);
44-
let position = communicationsData[0].correlatingid ? 0 : tracePoints.length-1;
45-
42+
const position = communicationsData[0].correlatingid ? 0 : tracePoints.length - 1;
43+
4644
const resArray = [];
4745

48-
for (let i = 0; i < tracePoints[position].length; i+=1) {
46+
for (let i = 0; i < tracePoints[position].length; i += 1) {
4947
resArray.push(
50-
<div className="RouteCircle" key={i}>
51-
<p id="routeText">Point {i+1}: {tracePoints[position][i]}</p>
52-
</div>
53-
)
54-
};
48+
<div className="RouteCircle" key={i}>
49+
<p id="routeText">Point {i + 1}: {tracePoints[position][i]}</p>
50+
</div>,
51+
);
52+
}
53+
54+
console.log('resArray: ', resArray);
5555

5656
return (
57-
<div>
58-
{resArray}
59-
</div>
60-
)
57+
<div id="routes">
58+
{resArray}
59+
</div>
60+
);
6161
};
6262

6363
export default RouteLocations;
64-

‎app/components/Modal.jsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const Modal = (props) => {
1616
// Dictionary used to render proper data chart within Modal component upon rendering
1717
const dict = {
1818
request: <RequestTypesChart service={service} />,
19-
routes: <RouteTrace service={service} />,
19+
routesImage: <RouteTrace service={service} />,
2020
response: <ResponseCodesChart service={service} />,
2121
speed: <SpeedChart service={service} />,
2222
processes: <ProcessesChart service={service} />,
@@ -27,6 +27,9 @@ const Modal = (props) => {
2727

2828
// event.stopPropogation allows the user to interact with the chart as opposed to a click on the
2929
// chart bubbling out and closing the Modal.
30+
31+
console.log('Modal Props: ', props);
32+
console.log('Modal props.modalChart: ', modalChart);
3033
return (
3134
<div id="modalWindow" onClick={() => toggleModalDisplay(!toggleModalDisplay)}>
3235
<div id="modalContent" onClick={(event) => event.stopPropagation()}>

‎app/components/ServiceDetails.jsx‎

Lines changed: 36 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
11
import React, { useState } from 'react';
22
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'
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';
99

1010
// Renders charts created with health and communication data for a selected database.
1111
const ServiceDetails = (props) => {
12-
1312
// Renders health info detail buttons
14-
const { service } = props;
13+
const { service } = props;
1514
// Hook used to toggle whether or not the Modal component renders
1615
const [modalDisplay, toggleModalDisplay] = useState(false);
1716
// Hook used to set the chart that the Modal displays. The
@@ -26,14 +25,14 @@ const ServiceDetails = (props) => {
2625
// { id: 'request', alt: 'Request Data', src: 'https://st2.depositphotos.com/3894705/9581/i/950/depositphotos_95816620-stock-photo-round-button-shows-speedometer.jpg' },
2726

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

3938
// Create the Health Info buttons and their associated properties. Each time a button is clicked,
@@ -42,30 +41,31 @@ const ServiceDetails = (props) => {
4241
const healthInfoButtons = [];
4342
for (let i = 0; i < buttonProperties.length; i += 1) {
4443
healthInfoButtons.push(
45-
<div>
46-
<div className="healthChartContainer">
47-
<input
48-
onClick={() => {
49-
setChartTitle(event.path[0].alt);
50-
setModalChart(event.path[0].id);
51-
toggleModalDisplay(!modalDisplay);
52-
}}
53-
service={service}
54-
type="image"
55-
id={buttonProperties[i].id}
56-
src={buttonProperties[i].src}
57-
width="60px"
58-
alt={buttonProperties[i].alt}
59-
/>
60-
<br/>
61-
<div style={{color:'white', paddingLeft:'7px'}}>
62-
{buttonProperties[i].id}
44+
<div>
45+
<div className="healthChartContainer">
46+
<input
47+
onClick={() => {
48+
setChartTitle(event.path[0].alt);
49+
setModalChart(event.path[0].id);
50+
toggleModalDisplay(!modalDisplay);
51+
}}
52+
service={service}
53+
type="image"
54+
id={buttonProperties[i].id}
55+
src={buttonProperties[i].src}
56+
width="60px"
57+
alt={buttonProperties[i].alt}
58+
/>
59+
<br />
60+
<div style={{ color: 'white', paddingLeft: '7px' }}>
61+
{buttonProperties[i].id}
62+
</div>
6363
</div>
64-
</div>
6564
</div>,
6665
);
6766
}
6867

68+
6969
return (
7070
<div id="serviceDetailsContainer">
7171
{modalDisplay ? (
@@ -83,7 +83,7 @@ const ServiceDetails = (props) => {
8383
<h3 id="microserviceHealthTitle">Microservice Health</h3>
8484
<div id="healthGrid">
8585
{healthInfoButtons}
86-
</div>
86+
</div>
8787
</div>
8888
);
8989
};

‎app/components/ServiceOverview.jsx‎

Lines changed: 9 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import React, { useState, useEffect, useContext } from 'react';
2+
import routeChart from '../assets/routeChart.png';
23
import OverviewContext from '../context/OverviewContext';
34
import HealthInformationContext from '../context/DetailsContext';
45
import ServiceDetails from './ServiceDetails.jsx';
56
import Modal from './Modal.jsx';
6-
import routeChart from '../assets/routeChart.png'
77

88
const { ipcRenderer } = window.require('electron');
99

@@ -31,7 +31,7 @@ const ServiceOverview = (props) => {
3131
});
3232
}, []);
3333

34-
//Add routes to the display
34+
// Add routes to the display
3535
// Hook used to toggle whether or not the Modal component renders
3636
const [modalDisplay, toggleModalDisplay] = useState(false);
3737
// Hook used to set the chart that the Modal displays. The
@@ -41,7 +41,7 @@ const ServiceOverview = (props) => {
4141
// is grabbed from the onClick event via event.path[0].alt
4242
const [chartTitle, setChartTitle] = useState();
4343

44-
const routeButtonProperty = { id: 'routes', alt: 'Route Trace', src: routeChart };
44+
const routeButtonProperty = { id: 'routesImage', alt: 'Route Trace', src: routeChart };
4545
const routes = [];
4646
routes.push(
4747
<div>
@@ -54,17 +54,17 @@ const ServiceOverview = (props) => {
5454
}}
5555
type="image"
5656
id={routeButtonProperty.id}
57-
src={routeButtonProperty.src}
57+
src="app/assets/routeChart.png"
5858
width="60px"
5959
alt={routeButtonProperty.alt}
6060
/>
61-
<br/>
62-
<div style={{color:'white', paddingLeft:'7px'}}>
63-
{routeButtonProperty.id}
61+
<br />
62+
<div style={{ color: 'white', paddingLeft: '7px' }}>
63+
Routes
6464
</div>
6565
</div>
66-
</div>,
67-
);
66+
</div>,
67+
);
6868

6969
// Filters data received from IPC to the communications database to create a list of the services tracked in the provided database,
7070
const serviceList = () => {
@@ -151,11 +151,6 @@ const ServiceOverview = (props) => {
151151
<h1 className="overviewTitle">Microservices Overview</h1>
152152
</div>
153153
<div />
154-
<<<<<<< HEAD
155-
<div className="servicesList">
156-
{serviceList()}
157-
</div>
158-
=======
159154
<div className="servicesList">{serviceList()}</div>
160155
{/* adding the route tracer button */}
161156
<h3>Trace Last Route</h3>
@@ -171,7 +166,6 @@ const ServiceOverview = (props) => {
171166
/>
172167
) : null}
173168
{routes}
174-
>>>>>>> dev
175169
</div>
176170
);
177171
};

‎app/components/ServicesDashboard.jsx‎

Lines changed: 14 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ const ServicesDashboard = (props) => {
1919

2020
// Creates button for each database in dashboard context.
2121
const renderServiceList = (context) => {
22-
console.log('inside renderServiceLIst');
2322
const buttonStore = [];
2423
for (let i = 0; i < context.length; i += 1) {
2524
buttonStore.push(
@@ -58,24 +57,20 @@ const ServicesDashboard = (props) => {
5857
}}
5958
>
6059
Add Database
61-
<<<<<<< HEAD
6260
</button>
63-
</div>
64-
=======
65-
</button>
66-
<button
67-
className="overviewSubmitBtn"
68-
type="submit"
69-
key="goToDeletePage"
70-
onClick={() => {
71-
setSelection(<DeleteService />);
72-
}}
73-
>
61+
<button
62+
className="overviewSubmitBtn"
63+
type="submit"
64+
key="goToDeletePage"
65+
onClick={() => {
66+
setSelection(<DeleteService />);
67+
}}
68+
>
7469
Delete Database
75-
</button>
76-
</div>
77-
<div className="left-bottom">
78-
<button
70+
</button>
71+
</div>
72+
<div className="left-bottom">
73+
<button
7974
className="overviewSubmitBtn"
8075
type="submit"
8176
onClick={() => {
@@ -84,9 +79,9 @@ const ServicesDashboard = (props) => {
8479
>
8580
Refresh overview
8681
</button>
87-
>>>>>>> dev
88-
</div>
82+
</div>
8983

84+
</div>
9085
</div>
9186
<div className="databsaseList">
9287
{serviceSelected}

‎app/index.css‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,10 @@ img {
4141
@keyframes fadeInOpacity {
4242
0% {
4343
opacity: 1;
44-
}
44+
}
45+
66% {
46+
opacity: .66
47+
}
4548
100% {
4649
opacity: 0;
4750
}
@@ -370,6 +373,12 @@ select {
370373
margin-right: 10px;
371374
}
372375

376+
#routes {
377+
/* display: flex;
378+
flex-direction: column;
379+
height: 800px; */
380+
}
381+
373382
.RouteCircle {
374383
font-family: Arial, Helvetica, sans-serif;
375384
color: white;

0 commit comments

Comments
 (0)