Skip to content

Commit 4bc2eea

Browse files
committed
Co-authored-by: Taylor Zhang <[email protected]>
Co-authored-by: Roberto Meloni <[email protected]> Co-authored-by: Snow X. Bai <[email protected]>
2 parents e599776 + e946fc4 commit 4bc2eea

File tree

21 files changed

+6016
-163
lines changed

21 files changed

+6016
-163
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';
@@ -49,10 +47,9 @@ import { CommsContext } from '../context/CommsContext';
4947

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

5754
const Occupied = React.memo(() => {
5855
const { setServicesData, app, setApp } = useContext(ApplicationContext);
@@ -65,24 +62,25 @@ const Occupied = React.memo(() => {
6562
// const [app, setApp] = useState<string>('');
6663
const [searchTerm, setSearchTerm] = useState<string>('');
6764
const [clickedAt, setClickedAt] = useState<string>('2000-01-01T00:00:00Z');
68-
65+
6966
// Grab services and applications whenever the user changes
7067
useEffect(() => {
7168
setServicesData([]);
7269
getApplications();
73-
}, [ user ]);
70+
}, [user]);
7471

7572
// Dynamic refs
7673
const delRef = useRef<any>([]);
77-
74+
7875
// Asks user to confirm deletion
7976
const confirmDelete = (event: ClickEvent, application: string, i: number) => {
8077
const message = `The application '${app}' will be permanently deleted. Continue?`;
8178
if (confirm(message)) deleteApp(i);
8279
};
83-
80+
8481
// Handle clicks on Application cards
8582
const handleClick = (event: ClickEvent, selectedApp: string, i: number) => {
83+
console.log(selectedApp, i);
8684
if (delRef.current[i] && !delRef.current[i].contains(event.target)) {
8785
console.log('the application that you clicked is: ', selectedApp)
8886
setIndex(i);
@@ -250,7 +248,11 @@ const Occupied = React.memo(() => {
250248
You have {notification ? notification.length : 0} new alerts
251249
</span>
252250
<NotificationsIcon className="navIcon" id="notificationsIcon" />
253-
<Badge overlap="rectangular" badgeContent={notification ? notification.length : 0} color="secondary" />
251+
<Badge
252+
overlap="rectangular"
253+
badgeContent={notification ? notification.length : 0}
254+
color="secondary"
255+
/>
254256
</div>
255257
<div className="personIconArea">
256258
<Button className="personTooltip" onClick={() => setPersonModalOpen(true)}>
@@ -268,66 +270,66 @@ const Occupied = React.memo(() => {
268270
</Button>
269271
</div>
270272
{applications &&
271-
applications.filter((db: any) => db[0].toLowerCase().includes(searchTerm.toLowerCase()))
272-
.map((application: string[], i: number | any | string | undefined) => (
273-
<div className="card" key={`card-${i}`} id={`card-${application[1]}`}>
274-
<Card
275-
key={`card-${i}`}
276-
className={classes.paper}
277-
variant="outlined"
278-
onClick={event => {
279-
console.log('what are all the applications mapped: ', applications)
280-
handleClick(event, application[0], i)
281-
}}
282-
>
283-
<div className="databaseIconContainer">
284-
<div className="databaseIconHeader">
285-
{application[1] === 'SQL' ? (
286-
<img className="databaseIcon" alt="SQL" />
287-
) : (
288-
<img className="databaseIcon" alt="MongoDB" />
289-
)}
273+
applications
274+
.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 => handleClick(event, application[0], i)}
282+
>
283+
<div className="databaseIconContainer">
284+
<div className="databaseIconHeader">
285+
{application[1] === 'SQL' ? (
286+
<img className="databaseIcon" alt="SQL" />
287+
) : (
288+
<img className="databaseIcon" alt="MongoDB" />
289+
)}
290+
</div>
290291
</div>
291-
</div>
292292

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

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

332334
<Modal open={addModalOpen} onClose={() => setAddModalOpen(false)}>
333335
<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: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
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';

0 commit comments

Comments
 (0)