Skip to content

Commit 5e5b324

Browse files
timlee12timlee12
committed
pushing aws fetch changes with Taylor merge
2 parents 9e76f28 + 4bc2eea commit 5e5b324

22 files changed

+6041
-164
lines changed

‎app/components/Occupied.tsx

Lines changed: 67 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,6 @@ import {
1919
Typography,
2020
} from '@material-ui/core';
2121

22-
2322
import { makeStyles } from '@material-ui/core/styles';
2423
import { BaseCSSProperties } from '@material-ui/core/styles/withStyles';
2524

@@ -32,7 +31,6 @@ import Badge from '@material-ui/core/Badge';
3231
import PersonIcon from '@material-ui/icons/Person';
3332
import UpdateIcon from '@material-ui/icons/Update';
3433

35-
3634
// // MODALS
3735
import AddModal from '../modals/AddModal';
3836
import ProfileContainer from '../containers/ProfileContainer';
@@ -50,10 +48,9 @@ import { AwsContext } from '../context/AwsContext';
5048

5149
// TYPESCRIPT
5250
interface StyleProps {
53-
root: BaseCSSProperties;
54-
}
55-
type ClickEvent = React.MouseEvent<HTMLElement>;
56-
51+
root: BaseCSSProperties;
52+
}
53+
type ClickEvent = React.MouseEvent<HTMLElement>;
5754

5855
const Occupied = React.memo(() => {
5956
const { awsData, fetchAwsData } = useContext(AwsContext);
@@ -67,24 +64,25 @@ const Occupied = React.memo(() => {
6764
// const [app, setApp] = useState<string>('');
6865
const [searchTerm, setSearchTerm] = useState<string>('');
6966
const [clickedAt, setClickedAt] = useState<string>('2000-01-01T00:00:00Z');
70-
67+
7168
// Grab services and applications whenever the user changes
7269
useEffect(() => {
7370
setServicesData([]);
7471
getApplications();
75-
}, [ user ]);
72+
}, [user]);
7673

7774
// Dynamic refs
7875
const delRef = useRef<any>([]);
79-
76+
8077
// Asks user to confirm deletion
8178
const confirmDelete = (event: ClickEvent, application: string, i: number) => {
8279
const message = `The application '${app}' will be permanently deleted. Continue?`;
8380
if (confirm(message)) deleteApp(i);
8481
};
85-
82+
8683
// Handle clicks on Application cards
8784
const handleClick = (event: ClickEvent, selectedApp: string, i: number) => {
85+
console.log(selectedApp, i);
8886
if (delRef.current[i] && !delRef.current[i].contains(event.target)) {
8987
console.log('the application that you clicked is: ', selectedApp)
9088
setIndex(i);
@@ -253,7 +251,11 @@ const Occupied = React.memo(() => {
253251
You have {notification ? notification.length : 0} new alerts
254252
</span>
255253
<NotificationsIcon className="navIcon" id="notificationsIcon" />
256-
<Badge overlap="rectangular" badgeContent={notification ? notification.length : 0} color="secondary" />
254+
<Badge
255+
overlap="rectangular"
256+
badgeContent={notification ? notification.length : 0}
257+
color="secondary"
258+
/>
257259
</div>
258260
<div className="personIconArea">
259261
<Button className="personTooltip" onClick={() => setPersonModalOpen(true)}>
@@ -271,66 +273,66 @@ const Occupied = React.memo(() => {
271273
</Button>
272274
</div>
273275
{applications &&
274-
applications.filter((db: any) => db[0].toLowerCase().includes(searchTerm.toLowerCase()))
275-
.map((application: string[], i: number | any | string | undefined) => (
276-
<div className="card" key={`card-${i}`} id={`card-${application[1]}`}>
277-
<Card
278-
key={`card-${i}`}
279-
className={classes.paper}
280-
variant="outlined"
281-
onClick={event => {
282-
console.log('what are all the applications mapped: ', applications)
283-
handleClick(event, application[0], i)
284-
}}
285-
>
286-
<div className="databaseIconContainer">
287-
<div className="databaseIconHeader">
288-
{application[1] === 'SQL' ? (
289-
<img className="databaseIcon" alt="SQL" />
290-
) : (
291-
<img className="databaseIcon" alt="MongoDB" />
292-
)}
276+
applications
277+
.filter((db: any) => db[0].toLowerCase().includes(searchTerm.toLowerCase()))
278+
.map((application: string[], i: number | any | string | undefined) => (
279+
<div className="card" key={`card-${i}`} id={`card-${application[1]}`}>
280+
<Card
281+
key={`card-${i}`}
282+
className={classes.paper}
283+
variant="outlined"
284+
onClick={event => handleClick(event, application[0], i)}
285+
>
286+
<div className="databaseIconContainer">
287+
<div className="databaseIconHeader">
288+
{application[1] === 'SQL' ? (
289+
<img className="databaseIcon" alt="SQL" />
290+
) : (
291+
<img className="databaseIcon" alt="MongoDB" />
292+
)}
293+
</div>
293294
</div>
294-
</div>
295295

296-
<CardHeader
297-
avatar={
298-
<IconButton
299-
id="iconButton"
300-
ref={element => {
301-
delRef.current[i] = element;
302-
}}
303-
className={classes.iconbutton}
304-
aria-label="Delete"
305-
onClick={event => confirmDelete(event, application[0], i)}
306-
>
307-
<HighlightOffIcon
308-
className={classes.btnStyle}
309-
id="deleteIcon"
296+
<CardHeader
297+
avatar={
298+
<IconButton
299+
id="iconButton"
310300
ref={element => {
311301
delRef.current[i] = element;
312302
}}
313-
/>
314-
</IconButton>
315-
}
316-
/>
317-
<CardContent>
318-
<p id="databaseName">Name:</p>
319-
<Typography className={classes.fontStyles}>{application[0]}</Typography>
320-
<p id="databaseName">Service:</p>
321-
<Typography className={classes.fontStyles}>{application[3]}</Typography>
322-
</CardContent>
323-
<hr className="cardLine" />
303+
className={classes.iconbutton}
304+
aria-label="Delete"
305+
onClick={event => confirmDelete(event, application[0], i)}
306+
>
307+
<HighlightOffIcon
308+
className={classes.btnStyle}
309+
id="deleteIcon"
310+
ref={element => {
311+
delRef.current[i] = element;
312+
}}
313+
/>
314+
</IconButton>
315+
}
316+
/>
317+
<CardContent>
318+
{/* <p id="databaseName">Name:</p> */}
319+
<Typography noWrap id="databaseName" className={classes.fontStyles}>
320+
{application[0]}
321+
</Typography>
322+
<p id="serviceName">Service:</p>
323+
<Typography className={classes.fontStyles}>{application[3]}</Typography>
324+
</CardContent>
325+
<hr className="cardLine" />
324326

325-
<div className="cardFooter">
326-
<UpdateIcon className="cardFooterIcon" />
327-
<em>
328-
<p id="cardFooterText">{application[4]}</p>
329-
</em>
330-
</div>
331-
</Card>
332-
</div>
333-
))}
327+
<div className="cardFooter">
328+
<UpdateIcon className="cardFooterIcon" />
329+
<em>
330+
<p id="cardFooterText">{application[4]}</p>
331+
</em>
332+
</div>
333+
</Card>
334+
</div>
335+
))}
334336

335337
<Modal open={addModalOpen} onClose={() => setAddModalOpen(false)}>
336338
<AddModal setOpen={setAddModalOpen} />

‎app/components/Splash.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,19 @@
11
import React, { useState, useEffect } from 'react';
22
import '../stylesheets/Splash.scss';
33

4-
const Splash: React.FC = React.memo((props) => {
4+
const Splash: React.FC = React.memo(props => {
55
const [visible, setVisible] = useState(false);
66
// useEffect(() => {
77
// setTimeout(() => setVisible(false), 4000);
88
// }, []);
99

1010
return (
1111
<>
12-
{visible &&
13-
<div id="splash">
12+
{visible && (
13+
<div id="splash">
1414
<img id="splashLogo" src="../assets/logo.svg" alt="Chronos" />
1515
</div>
16-
}
16+
)}
1717
</>
1818
);
1919
});

‎app/components/TransferColumns.tsx

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -62,16 +62,15 @@ const TransferColumns = React.memo(() => {
6262
} else if (eventMetricsReady) {
6363
setMetricsPool(eventMetrics);
6464
}
65-
}
65+
}
6666
// JJ-ADDITION (CAN ALSO JUST ADD OR OPERATOR TO ABOVE CONDITIONAL)
6767
else if (service === 'kubernetesmetrics') {
6868
if (healthDataList && healthDataList.length > 0) {
6969
setMetricsPool(getMetrics('health', healthDataList));
7070
} else if (healthMetricsReady) {
7171
setMetricsPool(healthMetrics);
7272
}
73-
}
74-
else if (!service.includes('kafkametrics')) {
73+
} else if (!service.includes('kafkametrics')) {
7574
if (healthDataList && healthDataList.length > 0) {
7675
setMetricsPool(getMetrics('health', healthDataList));
7776
} else if (healthMetricsReady) {
@@ -129,7 +128,7 @@ const TransferColumns = React.memo(() => {
129128
// setSelectedMetrics
130129
const temp: any[] = [];
131130
const categorySet = new Set();
132-
console.log('targetKeys is: ', targetKeys)
131+
console.log('targetKeys is: ', targetKeys);
133132
for (let i = 0; i < targetKeys.length; i++) {
134133
const str: string = targetKeys[i];
135134
const strArr: string[] = str.split(' | ');
@@ -154,7 +153,7 @@ const TransferColumns = React.memo(() => {
154153
};
155154

156155
const columns = [
157-
{ field: 'id', headerName: 'ID', width: 100},
156+
{ field: 'id', headerName: 'ID', width: 100 },
158157
{
159158
field: 'tag',
160159
headerName: 'Category',
@@ -168,7 +167,7 @@ const TransferColumns = React.memo(() => {
168167
editable: true,
169168
},
170169
];
171-
170+
172171
const rows: any[] = [];
173172

174173
metricsPool.forEach((el, index) => {
@@ -182,17 +181,19 @@ const TransferColumns = React.memo(() => {
182181
const selectedRows: any[] = [];
183182

184183
targetKeys.forEach(el => {
185-
selectedRows.push(<li style={{marginLeft: '30px', marginTop: '5px', color: currentMode.color}}>{el}</li>)
186-
})
184+
selectedRows.push(
185+
<li style={{ marginLeft: '30px', marginTop: '5px', color: currentMode.color }}>{el}</li>
186+
);
187+
});
187188

188189
return (
189190
<>
190191
<div id="getChartsContainer">
191-
<Button id="getCharts" onClick={getCharts} variant='contained' color='primary'>
192+
<Button id="getCharts" onClick={getCharts} variant="contained" color="primary">
192193
Get Charts
193194
</Button>
194195
</div>
195-
<div id='transferTest'>
196+
<div id="transferTest">
196197
<div style={{ height: '500px', width: '100%' }}>
197198
<DataGrid
198199
style={currentMode}
@@ -205,18 +206,18 @@ const TransferColumns = React.memo(() => {
205206
const metrics: any[] = [];
206207
metricIndeces.forEach(el => {
207208
metrics.push(metricsPool[el].key);
208-
})
209+
});
209210
setTargetKeys(metrics);
210211
}}
211212
/>
212213
</div>
213-
{selectedRows.length > 0 && <h3 style={{marginTop: '20px', color: currentMode.color}}>Selected Rows:</h3>}
214-
<ol id="selectedRows">
215-
{selectedRows}
216-
</ol>
214+
{selectedRows.length > 0 && (
215+
<h3 style={{ marginTop: '20px', color: currentMode.color }}>Selected Rows:</h3>
216+
)}
217+
<ol id="selectedRows">{selectedRows}</ol>
217218
</div>
218219
</>
219220
);
220221
});
221222

222-
export default TransferColumns;
223+
export default TransferColumns;

‎app/containers/AWSGraphsContainer.tsx

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/* eslint-disable no-bitwise */
2+
import React, { useEffect, useState, useContext } from 'react';
3+
import { useNavigate, useParams } from 'react-router-dom';
4+
import { ApplicationContext } from '../context/ApplicationContext';
5+
import * as DashboardContext from '../context/DashboardContext';
6+
import lightAndDark from '../components/Styling';
7+
import { useQuery } from 'react-query';
8+
import { AwsContext } from '../context/AwsContext';
9+
10+
const AwsGraphsContainer: React.FC = React.memo(props => {
11+
const { awsData, fetchAwsData, setAwsData } = useContext(AwsContext);
12+
13+
useEffect(() => {
14+
fetchAwsData();
15+
})
16+
17+
// const { data, status, isLoading } = useQuery('awsData', fetchAwsData);
18+
19+
// if(status === 'loading') {
20+
// return <p>Loading...</p>
21+
// }
22+
23+
// if(status === 'error') {
24+
// return <p>Error!</p>
25+
// }
26+
27+
// 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+
// }
35+
});
36+
37+
export default AwsGraphsContainer;

0 commit comments

Comments
 (0)