Skip to content

Commit 03d9e60

Browse files
alon25alon25
authored
Merge pull request #9 from alon25/staging
Staging
2 parents 29dd8a0 + 06d0251 commit 03d9e60

33 files changed

Lines changed: 367 additions & 343 deletions

‎app/.DS_Store‎

0 Bytes
Binary file not shown.

‎app/AComp/Extras.jsx‎

Lines changed: 27 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,35 @@
11
import React from 'react';
2+
import '../stylesheets/overviewSubmit.css';
3+
24

35
const Extras = (props) => {
46
const { AddClick, DeleteClick, RefreshClick } = props;
57
return (
6-
<>
7-
<div className="left-bottom">
8-
<button
9-
className="overviewSubmitBtn"
10-
type="submit"
11-
key="BackToStart"
12-
onClick={AddClick}
13-
>
14-
Add Database
15-
</button>
16-
<button
17-
className="overviewSubmitBtn"
18-
type="submit"
19-
key="goToDeletePage"
20-
onClick={DeleteClick}
21-
>
22-
Delete Database
23-
</button>
24-
</div>
25-
<div className="left-bottom">
26-
<button
27-
className="overviewSubmitBtn"
28-
type="submit"
29-
onClick={RefreshClick}
30-
>
31-
Refresh overview
32-
</button>
33-
</div>
34-
</>
8+
<div className="left-bottom">
9+
<button
10+
className="overviewSubmitBtn"
11+
type="submit"
12+
key="BackToStart"
13+
onClick={AddClick}
14+
>
15+
+
16+
</button>
17+
<button
18+
className="overviewSubmitBtn"
19+
type="submit"
20+
key="goToDeletePage"
21+
onClick={DeleteClick}
22+
>
23+
-
24+
</button>
25+
<button
26+
className="overviewSubmitBtn"
27+
type="submit"
28+
onClick={RefreshClick}
29+
>
30+
Refresh
31+
</button>
32+
</div>
3533
);
3634
};
3735

‎app/AComp/Microservices.jsx‎

Lines changed: 20 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -1,107 +1,27 @@
1-
import React, { useContext, useState, useEffect } from 'react';
2-
import OverviewContext from '../context/OverviewContext';
3-
import HealthInformationContext from '../context/DetailsContext';
4-
import ServiceDetails from '../components/ServiceDetails.jsx';
1+
import React from 'react';
2+
import '../stylesheets/Microservices.css';
53

6-
const { ipcRenderer } = window.require('electron');
74

85
const Microservices = (props) => {
9-
const { index, setDetails } = props;
10-
// Overview state used to create service buttons
11-
const [overviewState, setOverviewState] = useState([]);
12-
13-
// Contexts have data added to them following successful IPC return. Data is later used to create charts.
14-
const serviceComponents = useContext(OverviewContext);
15-
16-
useEffect(() => {
17-
// IPC communication used to initiate query for information on microservices.
18-
ipcRenderer.send('overviewRequest', index);
19-
// IPC listener responsible for retrieving infomation from asynchronous main process message.
20-
ipcRenderer.on('overviewResponse', (event, data) => {
21-
// Adds to state and context.
22-
// console.log(JSON.parse(data));
23-
setOverviewState(Object.values(JSON.parse(data)));
24-
serviceComponents.overviewData = JSON.parse(data);
25-
});
26-
}, []);
27-
28-
// Holds the buttons generated for unique services.
29-
const componentButtons = [];
30-
31-
// Tracks which services already have button created.
32-
const serviceCache = {};
33-
// Contexts have data added to them following successful IPC return. Data is later used to create charts.
34-
const healthdata = useContext(HealthInformationContext);
35-
36-
for (let i = 0; i < overviewState.length; i += 1) {
37-
const element = overviewState[i];
38-
// If SQL
39-
if (element.currentmicroservice) {
40-
if (!(element.currentmicroservice in serviceCache)) {
41-
const button = (
42-
<button
43-
className="servicesBtn"
44-
currentMicroservice={element.currentmicroservice}
45-
type="button"
46-
key={`serviceItem${index}${i}`}
47-
onClick={() => {
48-
// IPC communication used to initiate query for information on microservice health information.
49-
ipcRenderer.send('detailsRequest', index);
50-
51-
// IPC listener responsible for retrieving infomation from asynchronous main process message.
52-
ipcRenderer.on('detailsResponse', (event, data) => {
53-
// Adds returned data to context
54-
healthdata.detailData = Object.values(JSON.parse(data));
55-
// Updates state. Triggers rerender.
56-
setDetails(
57-
<ServiceDetails service={element.currentmicroservice} />
58-
);
59-
});
60-
}}
61-
>
62-
{element.currentmicroservice}
63-
</button>
64-
);
65-
componentButtons.push(button);
66-
serviceCache[element.currentmicroservice] = true;
67-
}
68-
} else if (element.currentMicroservice) {
69-
// If Mongo
70-
if (element.currentMicroservice) {
71-
if (!(element.currentMicroservice in serviceCache)) {
72-
const button = (
73-
<button
74-
className="servicesBtn"
75-
type="button"
76-
key={`serviceItem${index}${i}`}
77-
onClick={() => {
78-
ipcRenderer.send('detailsRequest', index);
79-
80-
// IPC listener responsible for retrieving infomation from asynchronous main process message.
81-
ipcRenderer.on('detailsResponse', (event, data) => {
82-
// Adds returned data to context.
83-
healthdata.detailData = Object.values(JSON.parse(data));
84-
// Updates state. Triggers rerender.
85-
setDetails(
86-
<ServiceDetails service={element.currentMicroservice} />
87-
);
88-
});
89-
}}
90-
>
91-
{element.currentMicroservice}
92-
</button>
93-
);
94-
componentButtons.push(button);
95-
serviceCache[element.currentMicroservice] = true;
96-
}
97-
}
98-
}
99-
}
100-
// If there's no data, return 'No data present', else return microservices button
101-
if (componentButtons.length === 0) {
102-
return <p>Loading</p>;
6+
const { context, Click, isclicked } = props;
7+
const buttonStore = [];
8+
for (let i = 0; i < context.length; i += 1) {
9+
buttonStore.push(
10+
<button
11+
className="microserviceBtn"
12+
id={i}
13+
type="button"
14+
key={`${i}${context[i]}`}
15+
onClick={Click}
16+
isclicked={isclicked}
17+
>
18+
{context[i]}
19+
</button>
20+
);
10321
}
104-
return componentButtons;
22+
return (
23+
buttonStore
24+
);
10525
};
10626

10727
export default Microservices;

‎app/AComp/ServicesList.jsx‎

Lines changed: 102 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,108 @@
1-
import React from 'react';
1+
import React, { useContext, useState, useEffect } from 'react';
2+
import OverviewContext from '../context/OverviewContext';
3+
import HealthInformationContext from '../context/DetailsContext';
4+
import ServiceDetails from '../components/ServiceDetails.jsx';
5+
import '../stylesheets/Services.css';
6+
7+
const { ipcRenderer } = window.require('electron');
28

39
const ServicesList = (props) => {
4-
const { context, Click, isclicked } = props;
5-
const buttonStore = [];
6-
for (let i = 0; i < context.length; i += 1) {
7-
buttonStore.push(
8-
<button
9-
className="microserviceBtn"
10-
id={i}
11-
type="button"
12-
key={`${i}${context[i]}`}
13-
onClick={Click}
14-
isclicked={isclicked}
15-
>
16-
{context[i]}
17-
</button>
18-
);
10+
const { index, setDetails } = props;
11+
// Overview state used to create service buttons
12+
const [overviewState, setOverviewState] = useState([]);
13+
14+
// Contexts have data added to them following successful IPC return. Data is later used to create charts.
15+
const serviceComponents = useContext(OverviewContext);
16+
17+
useEffect(() => {
18+
// IPC communication used to initiate query for information on microservices.
19+
ipcRenderer.send('overviewRequest', index);
20+
// IPC listener responsible for retrieving infomation from asynchronous main process message.
21+
ipcRenderer.on('overviewResponse', (event, data) => {
22+
// Adds to state and context.
23+
// console.log(JSON.parse(data));
24+
setOverviewState(Object.values(JSON.parse(data)));
25+
serviceComponents.overviewData = JSON.parse(data);
26+
});
27+
}, []);
28+
29+
// Holds the buttons generated for unique services.
30+
const componentButtons = [];
31+
32+
// Tracks which services already have button created.
33+
const serviceCache = {};
34+
// Contexts have data added to them following successful IPC return. Data is later used to create charts.
35+
const healthdata = useContext(HealthInformationContext);
36+
37+
for (let i = 0; i < overviewState.length; i += 1) {
38+
const element = overviewState[i];
39+
// If SQL
40+
if (element.currentmicroservice) {
41+
if (!(element.currentmicroservice in serviceCache)) {
42+
const button = (
43+
<button
44+
className="servicesBtn"
45+
currentMicroservice={element.currentmicroservice}
46+
type="button"
47+
key={`serviceItem${index}${i}`}
48+
onClick={() => {
49+
// IPC communication used to initiate query for information on microservice health information.
50+
ipcRenderer.send('detailsRequest', index);
51+
52+
// IPC listener responsible for retrieving infomation from asynchronous main process message.
53+
ipcRenderer.on('detailsResponse', (event, data) => {
54+
// Adds returned data to context
55+
healthdata.detailData = Object.values(JSON.parse(data));
56+
// Updates state. Triggers rerender.
57+
setDetails(
58+
<ServiceDetails service={element.currentmicroservice} />
59+
);
60+
});
61+
}}
62+
>
63+
{element.currentmicroservice}
64+
</button>
65+
);
66+
componentButtons.push(button);
67+
serviceCache[element.currentmicroservice] = true;
68+
}
69+
} else if (element.currentMicroservice) {
70+
// If Mongo
71+
if (element.currentMicroservice) {
72+
if (!(element.currentMicroservice in serviceCache)) {
73+
const button = (
74+
<button
75+
className="servicesBtn"
76+
type="button"
77+
key={`serviceItem${index}${i}`}
78+
onClick={() => {
79+
ipcRenderer.send('detailsRequest', index);
80+
81+
// IPC listener responsible for retrieving infomation from asynchronous main process message.
82+
ipcRenderer.on('detailsResponse', (event, data) => {
83+
// Adds returned data to context.
84+
healthdata.detailData = Object.values(JSON.parse(data));
85+
// Updates state. Triggers rerender.
86+
setDetails(
87+
<ServiceDetails service={element.currentMicroservice} />
88+
);
89+
});
90+
}}
91+
>
92+
{element.currentMicroservice}
93+
</button>
94+
);
95+
componentButtons.push(button);
96+
serviceCache[element.currentMicroservice] = true;
97+
}
98+
}
99+
}
100+
}
101+
// If there's no data, return 'No data present', else return microservices button
102+
if (componentButtons.length === 0) {
103+
return <p>Loading</p>;
19104
}
20-
return (
21-
buttonStore
22-
);
105+
return componentButtons;
23106
};
24107

25108
export default ServicesList;

‎app/AComp/SidebarHeader.jsx‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,15 @@
1-
import React, { Fragment } from 'react';
2-
1+
import React from 'react';
2+
import '../stylesheets/SidebarHeader.css';
33

44
const Header = (props) => {
55
return (
66
<>
7-
<div className="logoAndTitle">
87
<img
98
alt="Chronos Logo"
109
src="app/assets/icon2Cropped.png"
1110
id="serviceDashLogo"
1211
/>
13-
</div>
14-
<div className="left-top">
1512
<h2 className="dashboardHeader">Databases</h2>
16-
</div>
1713
</>
1814
);
1915
};

‎app/charts/latency-chart.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ const LatencyChart = (props) => {
3333
}]}
3434
layout = {{
3535
height: 400,
36-
width: 400,
36+
width: 650,
3737
font: {
3838
color: 'black',
3939
size: 15
@@ -58,7 +58,7 @@ const LatencyChart = (props) => {
5858
)
5959
};
6060

61-
return <div>{createChart()}</div>;
61+
return <div className="latencyChart">{createChart()}</div>;
6262
};
6363

6464
export default LatencyChart;

‎app/charts/memory-chart.jsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@ const MemoryChart = (props) => {
9191
)
9292
};
9393

94-
return <div>{createChart()}</div>;
94+
return <div className="memoryChart">{createChart()}</div>;
9595
};
9696

9797
export default MemoryChart;

0 commit comments

Comments
 (0)