Skip to content

Commit 639bf8d

Browse files
taylrzhangtaylrzhang
committed
ECS cluster status table added
1 parent 9bdc46f commit 639bf8d

File tree

4 files changed

+123
-63
lines changed

4 files changed

+123
-63
lines changed

‎app/components/ClusterStatus.tsx renamed to ‎app/components/ClusterTable.tsx

Lines changed: 63 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1,91 @@
11
import React, { useState } from 'react';
2-
import { Table, TableBody, TableCell, TableContainer, TableHead, TableRow, Paper } from '@material-ui/core';
2+
import {
3+
Table,
4+
TableBody,
5+
TableCell,
6+
TableContainer,
7+
TableHead,
8+
TableRow,
9+
Paper,
10+
} from '@material-ui/core';
311
import { makeStyles } from '@material-ui/core/styles';
4-
import {AwsContext} from '../context/AwsContext';
12+
import { AwsContext } from '../context/AwsContext';
13+
import cluster from 'cluster';
514

615
const useStyles = makeStyles({
716
table: {
817
minWidth: 650,
918
},
19+
tableContainer: {
20+
margin: '0 20px',
21+
},
22+
activeCell: {
23+
color: 'green',
24+
},
25+
column: {
26+
display: 'flex',
27+
flexDirection: 'column',
28+
},
29+
body: {
30+
fontSize: '1.2rem',
31+
},
32+
title: {
33+
color: '#888888',
34+
},
1035
});
1136

1237
export interface ClusterTableProps {
38+
typeOfService: string;
1339
region: string;
1440
}
1541

16-
const ClusterTable: React.FC<ClusterTableProps> = React.memo(({region}) => {
42+
const ClusterTable: React.FC<ClusterTableProps> = React.memo(({ region }) => {
1743
const classes = useStyles();
1844
// const {clusterName, servicesNum, tasksNum, status} = useContext(DashboardContext);
1945

20-
return (
21-
<div className="ClusterTable-container">
22-
<TableContainer component={Paper}>
23-
<Table className={classes.table} aria-label="cluster table">
24-
<TableHead>
25-
<TableRow>
26-
<TableCell>Name</TableCell>
27-
<TableCell>Status</TableCell>
28-
<TableCell>Services</TableCell>
29-
<TableCell>Tasks</TableCell>
30-
</TableRow>
31-
</TableHead>
32-
{/* <TableBody>
33-
{clusters.map((cluster: Cluster, index: number) => (
46+
return (
47+
<div className="ClusterTable-container">
48+
<TableContainer component={Paper}>
49+
<Table className={classes.table} aria-label="cluster table">
50+
<TableHead>
51+
<TableRow>
52+
<TableCell className={classes.title}>Name</TableCell>
53+
<TableCell className={classes.title}>Status</TableCell>
54+
<TableCell className={classes.title}>Services</TableCell>
55+
<TableCell className={classes.title}>Tasks</TableCell>
56+
</TableRow>
57+
</TableHead>
58+
<TableBody>
59+
<TableCell className={classes.body}>
60+
<div className={classes.column}>
61+
<div>test</div>
62+
<div>
63+
<span className="region">{region}</span>
64+
</div>
65+
</div>
66+
</TableCell>
67+
{/* <TableCell className={cluster.status === 'active' ? classes.activeCell : undefined}>testactive</TableCell> */}
68+
<TableCell className={classes.body}>active</TableCell>
69+
<TableCell className={classes.body}>3</TableCell>
70+
<TableCell className={classes.body}>0/3</TableCell>
71+
72+
{/* {clusters.map((cluster: Cluster, index: number) => (
3473
<TableRow key={index}>
3574
<TableCell>{cluster.name}</TableCell>
3675
<TableCell>{cluster.status}</TableCell>
3776
<TableCell>{cluster.serviceCount}</TableCell>
3877
<TableCell>{cluster.taskCount}</TableCell>
3978
</TableRow>
40-
))}
41-
</TableBody> */}
42-
</Table>
43-
</TableContainer>
44-
</div>
45-
)
46-
})
79+
))} */}
80+
</TableBody>
81+
</Table>
82+
</TableContainer>
83+
</div>
84+
);
85+
});
4786

4887
export default ClusterTable;
4988

50-
51-
52-
53-
5489
// type Cluster = {
5590
// name: string;
5691
// status: string;
@@ -88,4 +123,3 @@ export default ClusterTable;
88123
// }
89124
// });
90125
// }, []);
91-

‎app/components/Occupied.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -358,13 +358,17 @@ const Occupied = React.memo(() => {
358358
</Modal> */}
359359

360360
<Modal open={envModalOpen} onClose={() => setEnvModalOpen(false)}>
361-
<EnvModal setOpen={setEnvModalOpen} setAwsModalOpen={setAwsModalOpen} setAddModalOpen={setAddModalOpen}/>
361+
<EnvModal
362+
setOpen={setEnvModalOpen}
363+
setAwsModalOpen={setAwsModalOpen}
364+
setAddModalOpen={setAddModalOpen}
365+
/>
362366
</Modal>
363367

364368
<Modal open={awsModalOpen} onClose={() => setAwsModalOpen(false)}>
365369
<AwsModal setOpen={setAwsModalOpen} />
366370
</Modal>
367-
371+
368372
<Modal open={addModalOpen} onClose={() => setAddModalOpen(false)}>
369373
<AddModal setOpen={setAddModalOpen} />
370374
</Modal>

‎app/containers/AWSGraphsContainer.tsx

Lines changed: 38 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -8,45 +8,47 @@ import { AwsContext } from '../context/AwsContext';
88

99
import '../stylesheets/AWSGraphsContainer.scss';
1010
import AwsCpuChart from '../charts/AwsCpuChart';
11+
import ClusterTable from '../components/ClusterTable';
1112

1213
const AwsGraphsContainer: React.FC = React.memo(props => {
1314
const { awsData, awsAppInfo, fetchAwsData, fetchAwsAppInfo } = useContext(AwsContext);
1415
const { app, appIndex, intervalID, setIntervalID } = useContext(ApplicationContext);
1516
const { user } = useContext(DashboardContext);
1617
// const [intervalID, setintervalID] = useState<NodeJS.Timeout | null>(null);
1718
const [awsLive, setAwsLive] = useState<boolean>(false);
19+
const { typeOfService, region } = awsAppInfo;
1820

1921
useEffect(() => {
20-
if(awsLive) {
21-
console.log('we are live! fetching data every 10 seconds...')
22+
if (awsLive) {
23+
console.log('we are live! fetching data every 10 seconds...');
2224

2325
setIntervalID(
2426
setInterval(() => {
25-
console.log('intervalId after click live', intervalID)
27+
console.log('intervalId after click live', intervalID);
2628
fetchAwsData(user, appIndex);
2729
fetchAwsAppInfo(user, appIndex);
2830
}, 2000)
29-
)
31+
);
3032

31-
console.log('intervalId after click live', intervalID)
33+
console.log('intervalId after click live', intervalID);
3234
} else {
33-
console.log('interval id after stop live', intervalID)
34-
console.log('not fetching data')
35-
if(intervalID) clearInterval(intervalID);
35+
console.log('interval id after stop live', intervalID);
36+
console.log('not fetching data');
37+
if (intervalID) clearInterval(intervalID);
3638
fetchAwsData(user, appIndex);
37-
fetchAwsAppInfo(user, appIndex);
39+
fetchAwsAppInfo(user, appIndex); //typeofservice, region
3840
}
3941
}, [awsLive]);
4042

4143
useEffect(() => {
4244
return () => {
4345
console.log('changed page, shut down fetching');
44-
console.log('intervalId when unmounting ', intervalID)
46+
console.log('intervalId when unmounting ', intervalID);
47+
48+
if (intervalID) clearInterval(intervalID);
49+
};
50+
}, []);
4551

46-
if(intervalID) clearInterval(intervalID);
47-
}
48-
}, [])
49-
5052
const stringToColor = (string: string, recurses = 0) => {
5153
if (recurses > 20) return string;
5254
function hashString(str: string) {
@@ -63,11 +65,10 @@ const AwsGraphsContainer: React.FC = React.memo(props => {
6365
console.log(colour);
6466
return colour;
6567
}
66-
}
68+
};
6769

6870
return (
6971
<div className="AWS-container">
70-
7172
<div className="AWSheader">
7273
<Typography variant="h3">{app}</Typography>
7374
<p>Metrics for AWS Service</p>
@@ -81,42 +82,47 @@ const AwsGraphsContainer: React.FC = React.memo(props => {
8182
)}
8283
</button>
8384
</div>
85+
<div className="cluster-table">
86+
{awsAppInfo.typeOfService === 'AWS/ECS' && (
87+
<ClusterTable typeOfService={typeOfService} region={region} />
88+
)}
89+
</div>
8490
<div className="charts">
85-
<AwsCpuChart
86-
className='chart'
91+
<AwsCpuChart
92+
className="chart"
8793
// key={`Chart${counter}`}
88-
renderService='CPU Utilization'
89-
metric='Percent'
94+
renderService="CPU Utilization"
95+
metric="Percent"
9096
timeList={awsData.CPUUtilization?.map(el => el.time)}
9197
valueList={awsData.CPUUtilization?.map(el => el.value)}
9298
// sizing={props.sizing}
9399
colourGenerator={stringToColor}
94100
/>
95-
<AwsCpuChart
96-
className='chart'
101+
<AwsCpuChart
102+
className="chart"
97103
// key={`Chart${counter}`}
98-
renderService='Network In'
99-
metric='Percent'
104+
renderService="Network In"
105+
metric="Percent"
100106
timeList={awsData.NetworkIn?.map(el => el.time)}
101107
valueList={awsData.NetworkIn?.map(el => el.value)}
102108
// sizing={props.sizing}
103109
colourGenerator={stringToColor}
104110
/>
105-
<AwsCpuChart
106-
className='chart'
111+
<AwsCpuChart
112+
className="chart"
107113
// key={`Chart${counter}`}
108-
renderService='Network Out'
109-
metric='Percent'
114+
renderService="Network Out"
115+
metric="Percent"
110116
timeList={awsData.NetworkOut?.map(el => el.time)}
111117
valueList={awsData.NetworkOut?.map(el => el.value)}
112118
// sizing={props.sizing}
113119
colourGenerator={stringToColor}
114120
/>
115-
<AwsCpuChart
116-
className='chart'
121+
<AwsCpuChart
122+
className="chart"
117123
// key={`Chart${counter}`}
118-
renderService='DiskReadBytes'
119-
metric='Percent'
124+
renderService="DiskReadBytes"
125+
metric="Percent"
120126
timeList={awsData.DiskReadBytes?.map(el => el.time)}
121127
valueList={awsData.DiskReadBytes?.map(el => el.value)}
122128
// sizing={props.sizing}

‎app/stylesheets/AWSGraphsContainer.scss

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,24 @@
1515
text-align: center;
1616
}
1717

18+
.js-plotly-plot {
19+
box-shadow: $boxshadow;
20+
}
21+
22+
.region {
23+
font-size: 12px;
24+
color: $teal;
25+
padding: 4px 6px;
26+
outline: 0.4px solid $teal;
27+
border-radius: 4px;
28+
}
29+
1830
.AWSheader {
1931
padding: 40px;
2032
margin: 10px;
2133
text-align: center;
2234
}
35+
36+
.ClusterTable-container {
37+
margin: 0 20px;
38+
}

0 commit comments

Comments
 (0)