Skip to content

Commit dcaff92

Browse files
timlee12timlee12
committed
merged with Taylor branch
2 parents e0480d9 + 54df19a commit dcaff92

File tree

10 files changed

+701
-125
lines changed

10 files changed

+701
-125
lines changed

‎app/components/Occupied.tsx

Lines changed: 21 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -45,6 +45,7 @@ import { DashboardContext } from '../context/DashboardContext';
4545
import { ApplicationContext } from '../context/ApplicationContext';
4646
import { CommsContext } from '../context/CommsContext';
4747
import { AwsContext } from '../context/AwsContext';
48+
import { useNavigate } from 'react-router-dom';
4849

4950
// TYPESCRIPT
5051
interface StyleProps {
@@ -65,6 +66,9 @@ const Occupied = React.memo(() => {
6566
const [searchTerm, setSearchTerm] = useState<string>('');
6667
const [clickedAt, setClickedAt] = useState<string>('2000-01-01T00:00:00Z');
6768

69+
// const [showAwsContainer, setShowAwsContainer] = useState(false);
70+
const navigate = useNavigate();
71+
6872
// Grab services and applications whenever the user changes
6973
useEffect(() => {
7074
setServicesData([]);
@@ -81,15 +85,23 @@ const Occupied = React.memo(() => {
8185
};
8286

8387
// Handle clicks on Application cards
84-
const handleClick = (event: ClickEvent, selectedApp: string, i: number) => {
85-
console.log(selectedApp, i);
88+
const handleClick = (
89+
event: ClickEvent,
90+
selectedApp: string,
91+
selectedService: string,
92+
i: number
93+
) => {
94+
//delRaf refers to the delete button
8695
if (delRef.current[i] && !delRef.current[i].contains(event.target)) {
87-
console.log('the application that you clicked is: ', selectedApp)
88-
setIndex(i);
89-
setApp(selectedApp);
90-
setServicesData([]);
91-
setServiceModalOpen(true);
92-
fetchAwsData();
96+
if (selectedService === 'AWS') {
97+
navigate(`/aws/:${app}`);
98+
fetchAwsData();
99+
} else {
100+
setIndex(i);
101+
setApp(selectedApp);
102+
setServicesData([]);
103+
setServiceModalOpen(true);
104+
}
93105
}
94106
};
95107

@@ -281,7 +293,7 @@ const Occupied = React.memo(() => {
281293
key={`card-${i}`}
282294
className={classes.paper}
283295
variant="outlined"
284-
onClick={event => handleClick(event, application[0], i)}
296+
onClick={event => handleClick(event, application[0], application[3], i)}
285297
>
286298
<div className="databaseIconContainer">
287299
<div className="databaseIconHeader">
@@ -333,7 +345,6 @@ const Occupied = React.memo(() => {
333345
</Card>
334346
</div>
335347
))}
336-
337348
<Modal open={addModalOpen} onClose={() => setAddModalOpen(false)}>
338349
<AddModal setOpen={setAddModalOpen} />
339350
</Modal>

‎app/containers/AWSGraphsContainer.tsx

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,20 @@
11
/* eslint-disable no-bitwise */
22
import React, { useEffect, useState, useContext } from 'react';
3-
import { useNavigate, useParams } from 'react-router-dom';
43
import { ApplicationContext } from '../context/ApplicationContext';
54
import * as DashboardContext from '../context/DashboardContext';
65
import lightAndDark from '../components/Styling';
76
import { useQuery } from 'react-query';
87
import { AwsContext } from '../context/AwsContext';
98

10-
const AwsGraphsContainer: React.FC = React.memo(props => {
9+
import '../stylesheets/AWSGraphsContainer.scss';
10+
11+
const AWSGraphsContainer: React.FC = React.memo(props => {
1112
const { awsData, fetchAwsData, setAwsData } = useContext(AwsContext);
1213

1314
useEffect(() => {
1415
fetchAwsData();
15-
})
16-
16+
});
17+
1718
// const { data, status, isLoading } = useQuery('awsData', fetchAwsData);
1819

1920
// if(status === 'loading') {
@@ -25,13 +26,16 @@ const AwsGraphsContainer: React.FC = React.memo(props => {
2526
// }
2627

2728
// else {
28-
return (
29-
<div className='test-container'>
30-
<p>AWS TEST DATAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>
31-
<p>Here is our data: {awsData}</p>
32-
</div>
33-
)
34-
// }
29+
return (
30+
<div className="AWS-container">
31+
<p>
32+
AWS TEST
33+
DATAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA
34+
</p>
35+
<p>Here is our data: {awsData}</p>
36+
</div>
37+
);
38+
// }
3539
});
3640

37-
export default AwsGraphsContainer;
41+
export default AWSGraphsContainer;

‎app/containers/MainContainer.tsx

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,13 @@ import GraphsContainer from './GraphsContainer';
99
import { DashboardContext } from '../context/DashboardContext';
1010
import SignUp from '../components/SignUp';
1111
import Login from '../components/Login';
12+
import AwsGraphsContainer from '../containers/AWSGraphsContainer';
13+
1214
import '../stylesheets/MainContainer.scss';
1315

1416
const MainContainer = React.memo(() => {
1517
const { mode } = useContext(DashboardContext);
16-
const currentModeCSS =
17-
mode === 'light' ? lightAndDark.lightModeMain : lightAndDark.darkModeMain;
18+
const currentModeCSS = mode === 'light' ? lightAndDark.lightModeMain : lightAndDark.darkModeMain;
1819

1920
return (
2021
<>
@@ -27,11 +28,12 @@ const MainContainer = React.memo(() => {
2728
<Route path="/about" element={<About />} />
2829
<Route path="/contact" element={<Contact />} />
2930
<Route path="/settings" element={<Settings />} />
31+
<Route path="/applications/:app/:service" element={<GraphsContainer />} />
32+
<Route path="/aws/:app" element={<AwsGraphsContainer />} />
3033
<Route
31-
path="/applications/:app/:service"
32-
element={<GraphsContainer />}
34+
path="*"
35+
element={<h1 style={{ color: 'red', fontSize: '200px' }}>Not Found</h1>}
3336
/>
34-
<Route path="*" element={<h1 style={{color: 'red', fontSize: '200px'}}>Not Found</h1>} />
3537
</Routes>
3638
</div>
3739
</div>

‎app/context/ApplicationContext.tsx

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,8 @@ const ApplicationContextProvider: React.FC<AppContextProps> = React.memo(props =
3737
}
3838

3939
const fetchServicesNames = useCallback((application: string) => {
40-
setApp(application);
40+
console.log('app when fetch services name', application);
41+
// setApp(application);
4142

4243
ipcRenderer.send('servicesRequest');
4344

@@ -65,8 +66,8 @@ const ApplicationContextProvider: React.FC<AppContextProps> = React.memo(props =
6566
const store: object = {};
6667
data.forEach(el => {
6768
store[el.metric] = el;
68-
})
69-
console.log('result from getSavedMetrics is: ', store)
69+
});
70+
console.log('result from getSavedMetrics is: ', store);
7071
setSavedMetrics(store);
7172
});
7273
}, []);

‎app/stylesheets/AWSGraphsContainer.scss

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
@import './constants.scss';
2+
3+
.AWS-container {
4+
margin-top: 40px;
5+
}

‎electron/Main.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ let win: Electron.BrowserWindow;
99

1010
/**
1111
* @desc createWindow sets up the environment of the window (dimensions, port, initial settings)
12-
*/
12+
*/
1313
const createWindow = () => {
1414
win = new BrowserWindow({
1515
width: 1920,

‎electron/routes/data.ts

Lines changed: 35 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const postgresFetch = fetchData.postgresFetch;
2020
const AWS = require('aws-sdk');
2121

2222
require('dotenv').config({
23-
path: path.join(__dirname, './.env')
23+
path: path.join(__dirname, './.env'),
2424
});
2525
// Initiate pool variable for SQL setup
2626
let pool: any;
@@ -116,7 +116,6 @@ ipcMain.on('commsRequest', async (message: Electron.IpcMainEvent) => {
116116
} catch (error) {
117117
// Catch errors
118118
console.log('Error in "commsRequest" event: ', error);
119-
120119
}
121120
});
122121

@@ -126,14 +125,12 @@ ipcMain.on('commsRequest', async (message: Electron.IpcMainEvent) => {
126125
*/
127126
ipcMain.on('healthRequest', async (message: Electron.IpcMainEvent, service: string) => {
128127
try {
129-
130128
let result: any;
131129

132130
// Mongo Database
133131
if (currentDatabaseType === 'MongoDB') {
134132
result = await mongoFetch(service);
135133
}
136-
137134

138135
// SQL Database
139136
if (currentDatabaseType === 'SQL') {
@@ -224,53 +221,55 @@ ipcMain.on('updateSavedMetrics', async (message: Electron.IpcMainEvent, args: Ob
224221
if (currentDatabaseType === 'MongoDB' && args.length) {
225222
// Update the 'selected' option for each metric
226223
args.forEach(async (el: any) => {
227-
await MetricsModel.updateOne({ metric: el.metric }, {
228-
$set: {
229-
selected: el.selected
224+
await MetricsModel.updateOne(
225+
{ metric: el.metric },
226+
{
227+
$set: {
228+
selected: el.selected,
229+
},
230230
}
231-
})
232-
})
231+
);
232+
});
233233
// let result = await MetricsModel.update();
234234
}
235235
if (currentDatabaseType === 'SQL' && args.length) {
236236
args.forEach(async (el: any) => {
237-
await pool.query(`UPDATE metrics SET selected=${el.selected} WHERE metric='${el.metric}'`)
238-
})
237+
await pool.query(`UPDATE metrics SET selected=${el.selected} WHERE metric='${el.metric}'`);
238+
});
239239
}
240+
} catch (err) {
241+
if (err) console.error(err);
240242
}
241-
242-
catch (err) {
243-
if (err) console.error(err)
244-
}
245-
})
246-
247-
248-
249-
243+
});
250244

251245
/**
252246
* @event eventRequest/EventResponse
253-
* @desc
247+
* @desc
254248
*/
255249

256-
257250
// start fetch
258251
function extractWord(str: string) {
259-
const res :any[] = [];
252+
const res: any[] = [];
260253
const arr = str.split('\n'); // `/\n/`
261254
for (const element of arr) {
262-
if (element && element.length !== 0 && element[0] !== '#' && element.substring(0, 3) !== 'jmx' && element.substring(0, 4) !== '\'jmx') {
255+
if (
256+
element &&
257+
element.length !== 0 &&
258+
element[0] !== '#' &&
259+
element.substring(0, 3) !== 'jmx' &&
260+
element.substring(0, 4) !== "'jmx"
261+
) {
263262
const metric = element.split(' ')[0];
264263
const metricValue = Number(element.split(' ')[1]);
265264
const time = Date.now();
266-
const temp = {'metric': metric, 'category': 'Event', 'value': metricValue, 'time': time };
265+
const temp = { metric: metric, category: 'Event', value: metricValue, time: time };
267266
res.push(temp);
268267
}
269268
}
270269
return res;
271270
}
272271

273-
ipcMain.on('kafkaRequest', async (message) => {
272+
ipcMain.on('kafkaRequest', async message => {
274273
try {
275274
let result: any;
276275
// Mongo Database
@@ -280,7 +279,7 @@ ipcMain.on('kafkaRequest', async (message) => {
280279
// SQL Database
281280
if (currentDatabaseType === 'SQL') {
282281
// Get last 50 documents. If less than 50 get all
283-
result = await postgresFetch('kafkametrics', pool);
282+
result = await postgresFetch('kafkametrics', pool);
284283
}
285284

286285
message.sender.send('kafkaResponse', JSON.stringify(result));
@@ -292,7 +291,7 @@ ipcMain.on('kafkaRequest', async (message) => {
292291
});
293292

294293
// JJ-ADDITION
295-
ipcMain.on('kubernetesRequest', async (message) => {
294+
ipcMain.on('kubernetesRequest', async message => {
296295
try {
297296
let result: any;
298297
// Mongo Database
@@ -302,27 +301,27 @@ ipcMain.on('kubernetesRequest', async (message) => {
302301
// SQL Database
303302
if (currentDatabaseType === 'SQL') {
304303
// Get last 50 documents. If less than 50 get all
305-
result = await postgresFetch('kubernetesmetrics', pool);
304+
result = await postgresFetch('kubernetesmetrics', pool);
306305
}
307306
message.sender.send('kubernetesResponse', JSON.stringify(result));
308307
} catch (error) {
309308
// Catch errors
310309
console.log('Error in "kubernetesRequest" event', message);
311310
message.sender.send('kubernetesResponse', {});
312311
}
313-
})
312+
});
314313

315314
ipcMain.on('awsMetricsRequest', async (message: Electron.IpcMainEvent) => {
316315
try {
317316
// message.sender.send('awsMetricsResponse', 'hello from chronos team')
318317
// console.log('i am inside the ipcmain')
319-
318+
320319
const cloudwatch = new AWS.CloudWatch({
321320
region: 'us-west-1',
322321
accessKeyId: process.env.AWS_ACCESS_KEY,
323322
secretAccessKey: process.env.AWS_SECRET_KEY
324323
});
325-
324+
326325
const metricsNamesArray = ['CPUUtilization', 'NetworkIn', 'NetworkOut', 'DiskReadBytes'];
327326
// const awsData = {};
328327
const paramsArray = metricsNamesArray.map(metric => {
@@ -333,7 +332,7 @@ ipcMain.on('awsMetricsRequest', async (message: Electron.IpcMainEvent) => {
333332
Period: 60,
334333
StartTime: new Date(new Date().getTime() - 60*60*1000),
335334
Statistics: ['Average'],
336-
Dimensions: [{
335+
Dimensions: [{
337336
Name: 'InstanceId',
338337
Value: 'i-0c5656a0366bc6027'
339338
}]
@@ -351,12 +350,12 @@ ipcMain.on('awsMetricsRequest', async (message: Electron.IpcMainEvent) => {
351350

352351
const newData = data.Datapoints.map((el, index: number) => {
353352
let transformedData = {};
354-
353+
355354
transformedData['time'] = data.Datapoints[index].Timestamp,
356355
transformedData['metric'] = data.Label,
357356
transformedData['value'] = data.Datapoints[index].Average,
358357
transformedData['unit'] = data.Datapoints[index].Unit
359-
358+
360359
return transformedData;
361360
});
362361

@@ -365,7 +364,7 @@ ipcMain.on('awsMetricsRequest', async (message: Electron.IpcMainEvent) => {
365364

366365
return fetched;
367366
};
368-
367+
369368
fetchData().then(data => {
370369
message.sender.send('awsMetricsResponse', JSON.stringify(data)) // send data to frontend
371370
})
@@ -375,6 +374,4 @@ ipcMain.on('awsMetricsRequest', async (message: Electron.IpcMainEvent) => {
375374
}
376375
});
377376

378-
379-
380377
// end fetch

0 commit comments

Comments
 (0)