Skip to content

Commit bcf891b

Browse files
alon25alon25
committed
Modularization
1 parent 98b491d commit bcf891b

13 files changed

Lines changed: 396 additions & 85 deletions

‎app/AComp/Extras.jsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from 'react';
2+
3+
const Extras = (props) => {
4+
const { AddClick, DeleteClick, RefreshClick } = props;
5+
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+
</>
35+
);
36+
};
37+
38+
export default Extras;

‎app/AComp/Header.jsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import React, { Fragment } from 'react';
2+
import ServicesList from './ServicesList.jsx';
3+
4+
const Header = (props) => {
5+
const { context, Click } = props;
6+
return (
7+
<>
8+
<img
9+
alt="Chronos Logo"
10+
src="app/assets/icon2Cropped.png"
11+
id="serviceDashLogo"
12+
/>
13+
<div className="left-top">
14+
<h2>Databases</h2>
15+
</div>
16+
</>
17+
);
18+
};
19+
20+
export default Header;

‎app/AComp/Microservices.jsx‎

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

‎app/AComp/MonitorHeader.jsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import React from 'react';
2+
3+
const MonitorHeader = () => (
4+
<>
5+
<h1>Microservices Overview</h1>
6+
<h2>Communications Data</h2>
7+
</>
8+
);
9+
10+
export default MonitorHeader;

‎app/AComp/ServicesList.jsx‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from 'react';
2+
3+
const ServicesList = (props) => {
4+
const { context, Click } = 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+
>
15+
{context[i]}
16+
</button>
17+
);
18+
}
19+
return (
20+
buttonStore
21+
);
22+
};
23+
24+
export default ServicesList;

‎app/components/ServiceDetails.jsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import Modal from './Modal.jsx';
55
// Renders charts created with health and communication data for a selected database.
66
const ServiceDetails = (props) => {
77
// Renders health info detail buttons
8-
const { service, setDetails } = props;
8+
const { service, details } = props;
99
// Hook used to toggle whether or not the Modal component renders
1010
const [modalDisplay, toggleModalDisplay] = useState(false);
1111
// Hook used to set the chart that the Modal displays. The
@@ -82,7 +82,7 @@ const ServiceDetails = (props) => {
8282
onClick={() => {
8383
// document.location.reload()
8484
console.log('should clear data');
85-
setDetails(null);
85+
details(null);
8686
}}
8787
>
8888
Clear Health Data

‎app/containers/DashboardContainer.jsx‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React, { useState } from 'react';
2+
import Monitoring from './MonitoringContainer.jsx';
3+
import SidebarContainer from './SideBarContainer.jsx';
4+
import AddService from '../components/AddService.jsx';
5+
import DeleteService from '../components/DeleteService.jsx';
6+
// import ServiceOverview from '../components/ServiceOverview';
7+
8+
const DashboardContainer = () => {
9+
// Used to hold the buttons created for each database found in context.
10+
const [serviceSelected, setSelection] = useState();
11+
12+
// Details state used to cause rerender on user selection.
13+
const [detailsSelected, setDetails] = useState();
14+
15+
16+
17+
return (
18+
<div className="servicesDashboardContainer">
19+
<SidebarContainer selection={setSelection} details={setDetails}/>
20+
<div className="databsaseList">
21+
<Monitoring service={serviceSelected} detail={detailsSelected}/>
22+
</div>
23+
</div>
24+
);
25+
};
26+
27+
export default DashboardContainer;
28+
29+
// {/* <div className="databsaseList">
30+
31+
// </div> */}
32+
// {/* <Monitoring service={serviceSelected}/> */}

‎app/containers/MonitoringContainer.jsx‎

Lines changed: 106 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,106 @@
1+
import React, { useState, useContext } from 'react';
2+
import MonitorHeader from '../AComp/MonitorHeader.jsx';
3+
import Modal from '../components/Modal.jsx';
4+
import OverviewContext from '../context/OverviewContext';
5+
import HealthInformationContext from '../context/DetailsContext';
6+
import routeChart from '../assets/routeChart.png';
7+
import ServiceDetails from '../components/ServiceDetails.jsx';
8+
9+
const MonitoringContainer = (props) => {
10+
const { service } = props;
11+
const { detail } = props;
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+
const healthdata = useContext(HealthInformationContext);
16+
17+
// Hook used to toggle whether or not the Modal component renders
18+
const [modalDisplay, toggleModalDisplay] = useState(false);
19+
// Hook used to set the chart that the Modal displays. The
20+
// modalDisplay state is drilled into the Modal component.
21+
const [modalChart, setModalChart] = useState();
22+
// Hook used to set the Modal Component title. The "alt" attribute
23+
// is grabbed from the onClick event via event.path[0].alt
24+
const [chartTitle, setChartTitle] = useState();
25+
26+
// route button AND traffic button property
27+
const routeButtonProperty = {
28+
traffic: {
29+
id: 'Traffic',
30+
alt: 'Microservice Traffic',
31+
src: 'app/assets/chartModal.png',
32+
},
33+
routes: { id: 'routesImage', alt: 'Route Trace', src: routeChart },
34+
};
35+
36+
// declare routes array to display routes when modal is toggled
37+
const routes = [];
38+
// declare traffic array to display traffic when modal is toggled
39+
const traffic = [];
40+
41+
// push traffic component logic traffic
42+
traffic.push(
43+
<div className="healthChartContainer">
44+
<input
45+
onClick={() => {
46+
setChartTitle(event.path[0].alt);
47+
setModalChart(event.path[0].id);
48+
toggleModalDisplay(!modalDisplay);
49+
}}
50+
type="image"
51+
id={routeButtonProperty.traffic.id}
52+
src={routeButtonProperty.traffic.src}
53+
width="60px"
54+
alt={routeButtonProperty.traffic.alt}
55+
/>
56+
<br />
57+
<div style={{ color: 'white', paddingLeft: '7px' }}>
58+
{routeButtonProperty.traffic.id}
59+
</div>
60+
</div>
61+
);
62+
63+
// push routes component logic traffic
64+
routes.push(
65+
<div className="healthChartContainer">
66+
<input
67+
onClick={() => {
68+
setChartTitle(event.path[0].alt);
69+
setModalChart(event.path[0].id);
70+
toggleModalDisplay(!modalDisplay);
71+
}}
72+
type="image"
73+
id={routeButtonProperty.routes.id}
74+
src="app/assets/routeChart.png"
75+
width="60px"
76+
alt={routeButtonProperty.routes.alt}
77+
/>
78+
<br />
79+
<div style={{ color: 'white', paddingLeft: '7px' }}>Routes</div>
80+
</div>
81+
);
82+
83+
return (
84+
<div className="mainContainer">
85+
<MonitorHeader />
86+
{modalDisplay ? (
87+
<Modal
88+
chartTitle={chartTitle}
89+
modalChart={modalChart}
90+
service=""
91+
toggleModalDisplay={toggleModalDisplay}
92+
onClick={() => {
93+
toggleModalDisplay(!modalDisplay);
94+
}}
95+
/>
96+
) : null}
97+
<div id="routeAndTrafficDisplay">
98+
{routes}
99+
{traffic}
100+
</div>
101+
{detail || null}
102+
</div>
103+
);
104+
};
105+
106+
export default MonitoringContainer;

0 commit comments

Comments
 (0)