Skip to content

Commit 7918cf5

Browse files
tedpham3tedpham3
committed
Merge branch 'dev' into ted-modular
2 parents f3e688f + 2a00b5d commit 7918cf5

38 files changed

Lines changed: 1728 additions & 268 deletions

‎app/components/TransferColumns.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,10 +6,10 @@ import { EventContext } from '../context/EventContext';
66
import { DataGrid } from '@material-ui/data-grid';
77
import * as DashboardContext from '../context/DashboardContext';
88
import lightAndDark from './Styling';
9+
910
import { Button, TextField } from '@mui/material';
1011
import SearchBar from './SearchBar/SearchBar';
1112

12-
1313
interface Params {
1414
service: string;
1515
}

‎app/containers/GraphsContainer/GraphsContainer.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ interface Params {
3333
const GraphsContainer: React.FC = React.memo(() => {
3434
const { app, service } = useParams<keyof Params>() as Params;
3535
const [live, setLive] = useState<boolean>(false);
36-
const { intervalID, setIntervalID, example, chart, setChart } = useContext(ApplicationContext);
36+
const { intervalID, setIntervalID, chart, setChart } = useContext(ApplicationContext);
3737
const { getSavedMetrics } = useContext(ApplicationContext);
3838
const { fetchHealthData, setHealthData } = useContext(HealthContext);
3939
const { setDockerData, dockerData } = useContext(DockerContext);
@@ -47,7 +47,6 @@ const GraphsContainer: React.FC = React.memo(() => {
4747

4848
useEffect(() => {
4949
const serviceArray = service.split(' ');
50-
// You would think you should add "kubernetesmetrics" into the below for consistency's sake but it makes it not work correctly, so it has been omitted
5150
const healthServiceArray = serviceArray.filter(
5251
(value: string) => value !== 'kafkametrics' && value !== 'kubernetesmetrics'
5352
);
@@ -60,23 +59,27 @@ const GraphsContainer: React.FC = React.memo(() => {
6059
if (service.includes('kafkametrics')) {
6160
fetchEventData('kafkametrics');
6261
}
63-
// JJ-ADDITION
6462
if (service.includes('kubernetesmetrics')) {
6563
fetchEventData('kubernetesmetrics');
6664
}
6765
}, 10000)
6866
);
6967
} else {
68+
//This block gets data from the metrics db, the health data from each of the services respective dbs and the communcations logs in the communications db
69+
//The respective states are commsData, healthData and savedMetrics
7070
if (intervalID) clearInterval(intervalID);
71+
// gets all the communication logs from the communications database and sets the communications data state
7172
fetchCommsData(app, live);
73+
// gets all health data stored in each of the services databases
7274
fetchHealthData(healthServiceArray);
75+
//kafka and kubernetes are currently not hooked up so these blocks will never fire
7376
if (service.includes('kafkametrics')) {
7477
fetchEventData('kafkametrics');
7578
}
76-
// JJ-ADDITION
7779
if (service.includes('kubernetesmetrics')) {
7880
fetchEventData('kubernetesmetrics');
7981
}
82+
// gets all metric data (cpu related metrics)
8083
getSavedMetrics();
8184
}
8285

@@ -88,7 +91,6 @@ const GraphsContainer: React.FC = React.memo(() => {
8891
};
8992
}, [service, live]);
9093

91-
//random variable to hold the light or dark mode of the display?..ok....sure
9294
const currentMode = mode === 'light' ? lightAndDark.lightModeText : lightAndDark.darkModeText;
9395

9496
return (

‎app/context/ApplicationContext.tsx‎

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,12 @@ const ApplicationContextProvider: React.FC<AppContextProps> = React.memo(props =
2222
const children = props.children;
2323
const [ example,setExample ] = useState(false)
2424
const [chart, setChart] = useState<string>('all');
25-
2625
const [servicesData, setServicesData] = useState([]);
2726
const [app, setApp] = useState<string>('');
2827
const [savedMetrics, setSavedMetrics] = useState({});
2928
const [appIndex, setAppIndex] = useState<number>(0);
3029
const [intervalID, setIntervalID] = useState<NodeJS.Timeout | null>(null);
3130

32-
3331
/**
3432
* @function fetchServicesNames - a function that will take an application name and update the state of `serviceData` based on backend response
3533
* 1. Take in an application name
@@ -40,16 +38,12 @@ const ApplicationContextProvider: React.FC<AppContextProps> = React.memo(props =
4038
*/
4139
// v10: Invoked by connectToDB, passing in app (card title)
4240
const fetchServicesNames = useCallback((application: string) => {
43-
// console.log('Hi, inside ApplicationConext - fetchServicesNames callback. Sending servicesRequest to ipcMain.');
44-
console.log('app when fetch services name: ', application);
45-
console.log(application)
41+
4642
ipcRenderer.send('servicesRequest');
4743
ipcRenderer.on('servicesResponse', (event: Electron.Event, data: any) => {
48-
//data here refers to the data coming the services document of the database
44+
//data here refers to the services coming the services document of the database
4945
let result: any;
5046
result = JSON.parse(data);
51-
console.log('result from ipcrenderer services response is: ', result);
52-
// console.log('Calling setServicesData passing in above result. Current servicesData is the following: ', servicesData);
5347
setServicesData(result);
5448
ipcRenderer.removeAllListeners('servicesResponse');
5549
});
@@ -88,8 +82,6 @@ const ApplicationContextProvider: React.FC<AppContextProps> = React.memo(props =
8882
data.forEach(el => {
8983
store[el.metric] = el;
9084
});
91-
// console.log({store})
92-
// console.log('result from getSavedMetrics is: ', store);
9385
setSavedMetrics(store);
9486
});
9587
}, []);

‎app/context/CommsContext.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@ const CommsContextProvider: React.FC<Props> = React.memo((props) => {
5050
ipcRenderer.send('commsRequest');
5151
ipcRenderer.on('commsResponse', (event: Electron.Event, data: any) => {
5252
let result: any;
53-
//Here we are grabbing all the data from our test database
53+
//Here we are grabbing all the data from our communications database
5454
if (tryParseJSON(data)) result = JSON.parse(data);
5555
setCommsData(result);
5656
});

‎app/context/HealthContext.tsx‎

Lines changed: 36 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -55,48 +55,47 @@ const HealthContextProvider: React.FC<Props> = React.memo(({ children }) => {
5555
*/
5656

5757
const fetchHealthData = useCallback(async servers => {
58-
// console.log({servers})
5958
ipcRenderer.removeAllListeners('healthResponse');
6059

6160
let temp: HealthDataObject[] = [];
62-
//Promise.all(
63-
let promises = await Promise.all(servers.map( async (service: string) => {
64-
//NOT WORKING HERE
65-
try {
66-
const newPromise: any = await new Promise((resolve, reject) => {
67-
ipcRenderer.send('healthRequest', `${service}`);
68-
ipcRenderer.on('healthResponse', (event: Electron.Event, data: string) => {
69-
let result: object[];
70-
// console.log({data})
71-
if (JSON.stringify(data) !== '{}' && tryParseJSON(data)) {
72-
result = JSON.parse(data);
73-
// console.log('HealthContext.tsx line 68 result: ', result, 'service', service, 'Obj key', Object.keys(result[0])[0]);
74-
//result exists, has a length prop, and the service name and database name are same
75-
if (result && result.length && `${service}` === Object.keys(result[0])[0]) {
76-
resolve(result[0]);
77-
}
78-
}
79-
});
80-
})
81-
temp.push(newPromise);
82-
// console.log('HealthContext.tsx line 80 temp populates?: ', temp, serv)
83-
if (checkServicesComplete(temp, [`${service}`])) {
84-
setServices([`${service}`]);
85-
let transformedData: any = {};
86-
// console.log('original healthData before transformation: ', temp);
87-
// transformedData = {
88-
// healthDataList: [1,2,3,4,5],
89-
// healthTimeList: [1,2,3,4,5]
90-
// } //testing typescript, transformedDATA of type 2 arrays with basic entries?
91-
transformedData = healthTransformer(temp); //must match the setHealthData STATE format
92-
// console.log('healthData after tranformation: ', transformedData);
93-
setHealthData(transformedData);
61+
await Promise.all(servers.map( async (service: string) => {
62+
//NOT WORKING HERE
63+
try {
64+
const newPromise: any = await new Promise((resolve, reject) => {
65+
ipcRenderer.send('healthRequest', `${service}`);
66+
ipcRenderer.on('healthResponse', (event: Electron.Event, data: string) => {
67+
let result: object[];
68+
// console.log({data})
69+
if (JSON.stringify(data) !== '{}' && tryParseJSON(data)) {
70+
result = JSON.parse(data);
71+
// console.log({result})
72+
// console.log('HealthContext.tsx line 68 result: ', result, 'service', service, 'Obj key', Object.keys(result[0])[0]);
73+
//result exists, has a length prop, and the service name and database name are same
74+
if (result && result.length && `${service}` === Object.keys(result[0])[0]) {
75+
resolve(result[0]);
76+
}
9477
}
95-
} catch (err) {
96-
// console.log("healthcontext.tsx ERROR: ", err);
97-
};
78+
});
79+
})
80+
temp.push(newPromise);
81+
// console.log('HealthContext.tsx line 80 temp populates?: ', temp, serv)
82+
if (checkServicesComplete(temp, [`${service}`])) {
83+
setServices([`${service}`]);
84+
let transformedData: any = {};
85+
// console.log('original healthData before transformation: ', temp);
86+
// transformedData = {
87+
// healthDataList: [1,2,3,4,5],
88+
// healthTimeList: [1,2,3,4,5]
89+
// } //testing typescript, transformedDATA of type 2 arrays with basic entries?
90+
transformedData = healthTransformer(temp); //must match the setHealthData STATE format
91+
// console.log('healthData after tranformation: ', transformedData);
92+
setHealthData(transformedData);
9893
}
99-
))
94+
} catch (err) {
95+
// console.log("healthcontext.tsx ERROR: ", err);
96+
};
97+
}
98+
))
10099
} , []);
101100

102101
const checkServicesComplete = (temp: any[], servers: string[]) => {

‎app/modals/AddModal/ServiceDBType.tsx‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22

33

44
const ServiceDBType = (props) => {
5+
const { typeOfService, handleChange, database } = props
56
return (
67
<>
78
<div>
@@ -11,8 +12,8 @@ const ServiceDBType = (props) => {
1112
<select
1213
id="serv-type"
1314
name="typeOfService"
14-
value={props.typeOfService}
15-
onChange={e => props.handleChange(e)}
15+
value={typeOfService}
16+
onChange={e => handleChange(e)}
1617
>
1718
<option value="Docker">Docker</option>
1819
<option value="gRPC">gRPC</option>
@@ -24,7 +25,7 @@ const ServiceDBType = (props) => {
2425
<label htmlFor="db-type">
2526
Type of Database<span>*</span>
2627
</label>
27-
<select id="db-type" name="database" value={props.database} onChange={e => props.handleChange(e)}>
28+
<select id="db-type" name="database" value={database} onChange={e => handleChange(e)}>
2829
<option value="SQL">SQL</option>
2930
<option value="MongoDB">MongoDB</option>
3031
</select>

‎app/modals/AddModal/ServicesDescription.tsx‎

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22

33
const ServicesDescription = (props) => {
4+
const { URI, handleChange, name, description } = props;
45
return (
56
<>
67
<div>
@@ -10,8 +11,8 @@ const ServicesDescription = (props) => {
1011
<input
1112
id="db-uri"
1213
name="URI"
13-
value={props.URI}
14-
onChange={e => props.handleChange(e)}
14+
value={URI}
15+
onChange={e => handleChange(e)}
1516
placeholder="Database URI"
1617
required
1718
/>
@@ -24,8 +25,8 @@ const ServicesDescription = (props) => {
2425
id="db-name"
2526
type="text"
2627
name="name"
27-
value={props.name}
28-
onChange={e => props.handleChange(e)}
28+
value={name}
29+
onChange={e => handleChange(e)}
2930
placeholder="Add a name for your new service"
3031
required
3132
/>
@@ -35,8 +36,8 @@ const ServicesDescription = (props) => {
3536
<textarea
3637
id="db-desc"
3738
name="description"
38-
value={props.description}
39-
onChange={e => props.handleChange(e)}
39+
value={description}
40+
onChange={e => handleChange(e)}
4041
placeholder="Add a short description"
4142
/>
4243
</div>

‎app/modals/AwsModal/AwsDescription.tsx‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22

33
const AwsDescription = (props) => {
4+
const { name, handleChange, description } = props;
45
return (
56
<>
67
<div>
@@ -11,8 +12,8 @@ const AwsDescription = (props) => {
1112
id="aws-name"
1213
type="text"
1314
name="name"
14-
value={props.name}
15-
onChange={e => props.handleChange(e)}
15+
value={name}
16+
onChange={e => handleChange(e)}
1617
placeholder="Add a name for your new service"
1718
required
1819
/>
@@ -22,8 +23,8 @@ const AwsDescription = (props) => {
2223
<textarea
2324
id="db-desc"
2425
name="description"
25-
value={props.description}
26-
onChange={e => props.handleChange(e)}
26+
value={description}
27+
onChange={e => handleChange(e)}
2728
placeholder="Add a short description"
2829
/>
2930
</div>

‎app/modals/AwsModal/AwsKeyUrl.tsx‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22

33
const AwsKeyUrl = (props) => {
4+
const { typeOfService, accessKey, handleChange, secretAccessKey, awsUrl } = props;
45
return (
56
<>
67
<div>
@@ -10,13 +11,13 @@ const AwsKeyUrl = (props) => {
1011
id="aws-access-key"
1112
type="password"
1213
name="accessKey"
13-
value={props.accessKey}
14-
onChange={e => props.handleChange(e)}
15-
placeholder={props.typeOfService === 'AWS/EKS' ? 'Grafana Bearer Token' : 'AWS Access Key'}
14+
value={accessKey}
15+
onChange={e => handleChange(e)}
16+
placeholder={typeOfService === 'AWS/EKS' ? 'Grafana Bearer Token' : 'AWS Access Key'}
1617
required
1718
/>
1819
</div>
19-
{(props.typeOfService !== 'AWS/EKS') && (
20+
{(typeOfService !== 'AWS/EKS') && (
2021
<div>
2122
<label htmlFor="aws-secret-access-key">
2223
Secret Access Key<span>*</span>
@@ -25,24 +26,24 @@ const AwsKeyUrl = (props) => {
2526
id="aws-secret-access-key"
2627
type="password"
2728
name="secretAccessKey"
28-
value={props.secretAccessKey}
29-
onChange={e => props.handleChange(e)}
29+
value={secretAccessKey}
30+
onChange={e => handleChange(e)}
3031
placeholder="AWS Secret Access Key"
3132
required
3233
/>
3334
</div>
3435
)}
3536
<div>
3637
<label htmlFor="aws-url">
37-
{(props.typeOfService === 'AWS/EKS') ? 'Grafana URL' : 'Access Key'}<span>*</span>
38+
{(typeOfService === 'AWS/EKS') ? 'Grafana URL' : 'Access Key'}<span>*</span>
3839
</label>
3940
<input
4041
id="aws-url"
4142
type="string"
4243
name="awsUrl"
43-
value={props.awsUrl}
44-
onChange={e => props.handleChange(e)}
45-
placeholder={props.typeOfService === 'AWS/EKS'? 'Grafana Provided URL': 'AWS Url'}
44+
value={awsUrl}
45+
onChange={e => handleChange(e)}
46+
placeholder={typeOfService === 'AWS/EKS'? 'Grafana Provided URL': 'AWS Url'}
4647
/>
4748
</div>
4849
</>

‎app/modals/AwsModal/AwsRegion.tsx‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import React from 'react';
22

33
const AwsRegion = (props) => {
4+
const { region, handleChange } = props;
45
return (
56
<div>
67
<label htmlFor="region">
@@ -9,8 +10,8 @@ const AwsRegion = (props) => {
910
<select
1011
id="aws-region"
1112
name="region"
12-
value={props.region}
13-
onChange={e => props.handleChange(e)}
13+
value={region}
14+
onChange={e => handleChange(e)}
1415
placeholder="AWS Region"
1516
required
1617
>

0 commit comments

Comments
 (0)