Skip to content

Commit 93c0a81

Browse files
taylrzhangxueappRobertoRueMelonitimlee12
committed
ECS graphs CSS updated, cleaned up codes
Co-authored-by: Snow X. Bai <[email protected]> Co-authored-by: Roberto Meloni <[email protected]> Co-authored-by: Tim Lee <[email protected]>
1 parent 3b05016 commit 93c0a81

File tree

11 files changed

+366
-378
lines changed

11 files changed

+366
-378
lines changed

‎app/components/AwsEC2Graphs.tsx

Lines changed: 23 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,14 @@ const AwsEC2Graphs: React.FC = React.memo(props => {
99
const [isLoading, setLoadingState] = useState<boolean>(true);
1010

1111
useEffect(() => {
12-
console.log('is state loading? ', !!awsData);
13-
if(awsData) setLoadingState(false);
12+
if (awsData) setLoadingState(false);
1413
}, []);
1514

1615
useEffect(() => {
1716
return () => {
18-
setAwsData({ CPUUtilization: [], NetworkIn: [], NetworkOut: [], DiskReadBytes: [] })
19-
}
20-
}, [])
17+
setAwsData({ CPUUtilization: [], NetworkIn: [], NetworkOut: [], DiskReadBytes: [] });
18+
};
19+
}, []);
2120

2221
const stringToColor = (string: string, recurses = 0) => {
2322
if (recurses > 20) return string;
@@ -39,67 +38,36 @@ const AwsEC2Graphs: React.FC = React.memo(props => {
3938

4039
return (
4140
<div className="charts">
42-
{isLoading &&
43-
<div style={{ display: 'flex', width: 100, height:100, justifyContent: 'center', position: 'absolute', alignItems: 'center', zIndex: 50}}>
41+
{isLoading && (
42+
<div
43+
style={{
44+
display: 'flex',
45+
width: 100,
46+
height: 100,
47+
justifyContent: 'center',
48+
position: 'absolute',
49+
alignItems: 'center',
50+
zIndex: 50,
51+
}}
52+
>
4453
<CircularProgress />
4554
</div>
46-
}
55+
)}
4756
{Object.keys(awsData)?.map(metric => {
4857
return (
49-
<AwsChart
50-
className='chart'
51-
// key={`Chart${counter}`}
58+
<AwsChart
59+
className="chart"
60+
key={`Chart${metric}`}
5261
renderService={metric}
5362
metric={awsData[metric][0]?.unit}
5463
timeList={awsData[metric]?.map(el => el.time)}
5564
valueList={awsData[metric]?.map(el => el.value)}
56-
// sizing={props.sizing}
5765
colourGenerator={stringToColor}
5866
/>
59-
)
67+
);
6068
})}
61-
{/* <AwsChart
62-
className='chart'
63-
// key={`Chart${counter}`}
64-
renderService="CPU Utilization"
65-
metric="Percent"
66-
timeList={awsData.CPUUtilization?.map(el => el.time)}
67-
valueList={awsData.CPUUtilization?.map(el => el.value)}
68-
// sizing={props.sizing}
69-
colourGenerator={stringToColor}
70-
/>
71-
<AwsChart
72-
className='chart'
73-
// key={`Chart${counter}`}
74-
renderService="Network In"
75-
metric="Percent"
76-
timeList={awsData.NetworkIn?.map(el => el.time)}
77-
valueList={awsData.NetworkIn?.map(el => el.value)}
78-
// sizing={props.sizing}
79-
colourGenerator={stringToColor}
80-
/>
81-
<AwsChart
82-
className='chart'
83-
// key={`Chart${counter}`}
84-
renderService="Network Out"
85-
metric="Percent"
86-
timeList={awsData.NetworkOut?.map(el => el.time)}
87-
valueList={awsData.NetworkOut?.map(el => el.value)}
88-
// sizing={props.sizing}
89-
colourGenerator={stringToColor}
90-
/>
91-
<AwsChart
92-
className='chart'
93-
// key={`Chart${counter}`}
94-
renderService="DiskReadBytes"
95-
metric="Percent"
96-
timeList={awsData.DiskReadBytes?.map(el => el.time)}
97-
valueList={awsData.DiskReadBytes?.map(el => el.value)}
98-
// sizing={props.sizing}
99-
colourGenerator={stringToColor}
100-
/> */}
10169
</div>
102-
)
70+
);
10371
});
10472

105-
export default AwsEC2Graphs;
73+
export default AwsEC2Graphs;

‎app/components/AwsECSClusterGraphs.tsx

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,9 @@ const AwsECSClusterGraphs: React.FC = React.memo(props => {
77

88
useEffect(() => {
99
return () => {
10-
setAwsEcsData({})
10+
setAwsEcsData({});
1111
};
12-
}, [])
12+
}, []);
1313

1414
const stringToColor = (string: string, recurses = 0) => {
1515
if (recurses > 20) return string;
@@ -29,39 +29,39 @@ const AwsECSClusterGraphs: React.FC = React.memo(props => {
2929
}
3030
};
3131

32-
const activeServices = Object.keys(awsEcsData).slice(1).filter(el => awsEcsData[el].CPUUtilization?.value.length > 0)
32+
const activeServices = Object.keys(awsEcsData)
33+
.slice(1)
34+
.filter(el => awsEcsData[el].CPUUtilization?.value.length > 0);
3335
const serviceGraphs = activeServices.map(service => {
3436
return (
35-
<div className='ecsCharts'>
36-
<div id='service-name'>
37+
<div className="ecsCharts-container">
38+
<div id="service-name">
3739
<p>Service Name:</p>
38-
<p>{service}</p>
40+
<strong>{service}</strong>
41+
</div>
42+
<div className="ecsCharts">
43+
<AwsChart
44+
className="chart"
45+
renderService="CPU Utilization"
46+
metric="Percent"
47+
timeList={awsEcsData[service]?.CPUUtilization.time}
48+
valueList={awsEcsData[service]?.CPUUtilization.value}
49+
colourGenerator={stringToColor}
50+
/>
51+
<AwsChart
52+
className="chart"
53+
renderService="Memory Utilization"
54+
metric="Percent"
55+
timeList={awsEcsData[service]?.MemoryUtilization.time}
56+
valueList={awsEcsData[service]?.MemoryUtilization.value}
57+
colourGenerator={stringToColor}
58+
/>
3959
</div>
40-
<AwsChart
41-
className='chart'
42-
renderService='CPU Utilization'
43-
metric='Percent'
44-
timeList={awsEcsData[service]?.CPUUtilization.time}
45-
valueList={awsEcsData[service]?.CPUUtilization.value}
46-
colourGenerator={stringToColor}
47-
/>
48-
<AwsChart
49-
className='chart'
50-
renderService='Memory Utilization'
51-
metric='Percent'
52-
timeList={awsEcsData[service]?.MemoryUtilization.time}
53-
valueList={awsEcsData[service]?.MemoryUtilization.value}
54-
colourGenerator={stringToColor}
55-
/>
5660
</div>
57-
)
61+
);
5862
});
5963

60-
return (
61-
<div>
62-
{serviceGraphs}
63-
</div>
64-
);
64+
return <div>{serviceGraphs}</div>;
6565
});
6666

67-
export default AwsECSClusterGraphs;
67+
export default AwsECSClusterGraphs;

‎app/components/ClusterTable.tsx

Lines changed: 12 additions & 55 deletions
Original file line numberDiff line numberDiff line change
@@ -42,12 +42,11 @@ export interface ClusterTableProps {
4242
const ClusterTable: React.FC<ClusterTableProps> = React.memo(({ region }) => {
4343
const classes = useStyles();
4444
const { awsEcsData, isLoading } = useContext(AwsContext);
45-
// const {clusterName, servicesNum, tasksNum, status} = useContext(DashboardContext);
4645

4746
const activeServices = () => {
4847
const serviceNames = Object.keys(awsEcsData).slice(1);
4948

50-
return serviceNames.filter(el => awsEcsData[el].CPUUtilization?.value.length > 0)
49+
return serviceNames.filter(el => awsEcsData[el].CPUUtilization?.value.length > 0);
5150
};
5251

5352
return (
@@ -56,7 +55,7 @@ const ClusterTable: React.FC<ClusterTableProps> = React.memo(({ region }) => {
5655
<Table className={classes.table} aria-label="cluster table">
5756
<TableHead>
5857
<TableRow>
59-
<TableCell className={classes.title}>Name</TableCell>
58+
<TableCell className={classes.title}>Cluster Name</TableCell>
6059
<TableCell className={classes.title}>Status</TableCell>
6160
<TableCell className={classes.title}>Services</TableCell>
6261
<TableCell className={classes.title}>Tasks</TableCell>
@@ -65,25 +64,21 @@ const ClusterTable: React.FC<ClusterTableProps> = React.memo(({ region }) => {
6564
<TableBody>
6665
<TableCell className={classes.body}>
6766
<div className={classes.column}>
68-
<div>{isLoading ? 'Loading...': awsEcsData.clusterInfo?.clusterName}</div>
67+
<div>{isLoading ? 'Loading...' : awsEcsData.clusterInfo?.clusterName}</div>
6968
<div>
7069
<span className="region">{region}</span>
7170
</div>
7271
</div>
7372
</TableCell>
74-
{/* <TableCell className={cluster.status === 'active' ? classes.activeCell : undefined}>testactive</TableCell> */}
75-
<TableCell className={activeServices().length ? classes.activeCell : undefined}>{activeServices().length ? 'ACTIVE' : 'INACTIVE'}</TableCell>
76-
<TableCell className={classes.body}>{isLoading ? 'Loading...' : Object.keys(awsEcsData).length - 1}</TableCell>
77-
<TableCell className={classes.body}>{String(activeServices().length) + '/' + String(Object.keys(awsEcsData).length - 1)}</TableCell>
78-
79-
{/* {clusters.map((cluster: Cluster, index: number) => (
80-
<TableRow key={index}>
81-
<TableCell>{cluster.name}</TableCell>
82-
<TableCell>{cluster.status}</TableCell>
83-
<TableCell>{cluster.serviceCount}</TableCell>
84-
<TableCell>{cluster.taskCount}</TableCell>
85-
</TableRow>
86-
))} */}
73+
<TableCell className={activeServices().length ? classes.activeCell : undefined}>
74+
<strong>{activeServices().length ? 'ACTIVE' : 'INACTIVE'}</strong>
75+
</TableCell>
76+
<TableCell className={classes.body}>
77+
{isLoading ? 'Loading...' : Object.keys(awsEcsData).length - 1}
78+
</TableCell>
79+
<TableCell className={classes.body}>
80+
{String(activeServices().length) + '/' + String(Object.keys(awsEcsData).length - 1)}
81+
</TableCell>
8782
</TableBody>
8883
</Table>
8984
</TableContainer>
@@ -92,41 +87,3 @@ const ClusterTable: React.FC<ClusterTableProps> = React.memo(({ region }) => {
9287
});
9388

9489
export default ClusterTable;
95-
96-
// type Cluster = {
97-
// name: string;
98-
// status: string;
99-
// serviceCount: number;
100-
// taskCount: number;
101-
// };
102-
103-
// function ClusterTable() {
104-
// const [clusters, setClusters] = useState<Cluster[]>([]);
105-
// const classes = useStyles();
106-
107-
// useEffect(() => {
108-
// // Fetch cluster data using the AWS SDK and set the state
109-
// const ecs = new AWS.ECS();
110-
// ecs.listClusters({}, (err: Error, data: AWS.ECS.ListClustersResponse) => {
111-
// if (err) {
112-
// console.log(err, err.stack);
113-
// } else {
114-
// const clusterArns = data.clusterArns;
115-
// const clusterPromises = clusterArns?.map(clusterArn => ecs.describeClusters({ clusters: [clusterArn] }).promise());
116-
// Promise.all(clusterPromises).then(clusterData => {
117-
// const clusters = clusterData.map(cluster => {
118-
// const { clusterName, status, registeredContainerInstancesCount, runningTasksCount } = cluster?.clusters[0];
119-
// return {
120-
// name: clusterName,
121-
// status,
122-
// serviceCount: registeredContainerInstancesCount,
123-
// taskCount: runningTasksCount
124-
// };
125-
// });
126-
// setClusters(clusters);
127-
// }).catch(err => {
128-
// console.log(err, err.stack);
129-
// });
130-
// }
131-
// });
132-
// }, []);

‎app/components/Occupied.tsx

Lines changed: 7 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -67,7 +67,7 @@ const Occupied = React.memo(() => {
6767
const [envModalOpen, setEnvModalOpen] = useState<boolean>(false);
6868
const [addModalOpen, setAddModalOpen] = useState<boolean>(false);
6969
const [awsModalOpen, setAwsModalOpen] = useState<boolean>(false);
70-
const { appIndex, setAppIndex } = useContext(ApplicationContext)
70+
const { appIndex, setAppIndex } = useContext(ApplicationContext);
7171
// const [index, setIndex] = useState<number>(0);
7272
// const [app, setApp] = useState<string>('');
7373
const [searchTerm, setSearchTerm] = useState<string>('');
@@ -100,11 +100,14 @@ const Occupied = React.memo(() => {
100100
) => {
101101
//delRaf refers to the delete button
102102
if (delRef.current[i] && !delRef.current[i].contains(event.target)) {
103-
if (selectedService === 'AWS' || selectedService === 'AWS/EC2' || selectedService === 'AWS/ECS') {
103+
if (
104+
selectedService === 'AWS' ||
105+
selectedService === 'AWS/EC2' ||
106+
selectedService === 'AWS/ECS'
107+
) {
104108
setAppIndex(i);
105109
setApp(selectedApp);
106-
console.log('the selected AWS service is: ', selectedService)
107-
navigate(`/aws/:${app}`, { state: { typeOfService: selectedService }});
110+
navigate(`/aws/:${app}`, { state: { typeOfService: selectedService } });
108111
} else {
109112
setAppIndex(i);
110113
setApp(selectedApp);
@@ -354,10 +357,6 @@ const Occupied = React.memo(() => {
354357
</Card>
355358
</div>
356359
))}
357-
{/* <Modal open={addModalOpen} onClose={() => setAddModalOpen(false)}>
358-
<AddModal setOpen={setAddModalOpen} />
359-
</Modal> */}
360-
361360
<Modal open={envModalOpen} onClose={() => setEnvModalOpen(false)}>
362361
<EnvModal
363362
setOpen={setEnvModalOpen}

‎app/components/Splash.tsx

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

44
const Splash: React.FC = React.memo(props => {
5-
const [visible, setVisible] = useState(false);
6-
// useEffect(() => {
7-
// setTimeout(() => setVisible(false), 4000);
8-
// }, []);
5+
const [visible, setVisible] = useState(true);
6+
7+
useEffect(() => {
8+
setTimeout(() => setVisible(false), 4000);
9+
}, []);
910

1011
return (
1112
<>

0 commit comments

Comments
 (0)