Skip to content

Commit 2d266e2

Browse files
BoopdiBopBoopdiBop
committed
Merge branch 'dev' into claire/EKS_Setup
2 parents b152712 + 751686a commit 2d266e2

File tree

13 files changed

+7805
-13916
lines changed

13 files changed

+7805
-13916
lines changed

‎app/components/AwsEksGrafana.tsx

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
// import React, { useContext, useEffect, useState } from 'react';
2+
// import AwsChart from '../charts/AwsChart';
3+
// import { AwsContext } from '../context/AwsContext';
4+
// import { CircularProgress } from '@material-ui/core';
5+
// import zIndex from '@material-ui/core/styles/zIndex';
6+
7+
// const AwsEksGrafana: React.FC = React.memo(props => {
8+
// const { awsData, setAwsData, isLoading, setLoadingState } = useContext(AwsContext);
9+
10+
11+
12+
13+
// return (
14+
// <div className="charts">
15+
// return (
16+
// <iframe src="http://a43696611f78d41e89960d0f1bb06f07-578600705.us-west-2.elb.amazonaws.com/d/3H7r_bB4z/kubernetes-cluster-monitoring-via-prometheus?orgId=1&refresh=10s" width="450" height="200" ></iframe> <AwsEksGrafana />
17+
18+
// );
19+
20+
// </div>
21+
// );
22+
// });
23+
24+
// export default AwsEksGrafana;

‎app/components/Occupied.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
/** From Version 5.2 Team:
1+
/** From Version 5.2 Team:
22
* We only fixed linting issues regarding Notifications.
33
* Otherwise, Notifications still does not function properly.
44
* Good luck!
@@ -103,7 +103,8 @@ const Occupied = React.memo(() => {
103103
if (
104104
selectedService === 'AWS' ||
105105
selectedService === 'AWS/EC2' ||
106-
selectedService === 'AWS/ECS'
106+
selectedService === 'AWS/ECS' ||
107+
selectedService === 'AWS/EKS'
107108
) {
108109
setAppIndex(i);
109110
setApp(selectedApp);

‎app/containers/AWSGraphsContainer.tsx

Lines changed: 31 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,18 @@ import { ApplicationContext } from '../context/ApplicationContext';
44
import { DashboardContext } from '../context/DashboardContext';
55
import { Typography } from '@material-ui/core';
66
import { AwsContext } from '../context/AwsContext';
7-
7+
// import AwsEksGrafana from '../components/AwsEksGrafana';
88
import '../stylesheets/AWSGraphsContainer.scss';
99
import AwsChart from '../charts/AwsChart';
1010
import ClusterTable from '../components/ClusterTable';
1111
import AwsEC2Graphs from '../components/AwsEC2Graphs';
1212
import AwsECSClusterGraphs from '../components/AwsECSClusterGraphs';
1313
import { useLocation } from 'react-router-dom';
14-
14+
import GrafanaIFrame from './GrafanaIFrame';
15+
interface Dashboard {
16+
uid: string;
17+
url: string;
18+
}
1519
const AwsGraphsContainer: React.FC = React.memo(props => {
1620
const {
1721
awsData,
@@ -22,15 +26,18 @@ const AwsGraphsContainer: React.FC = React.memo(props => {
2226
setAwsEcsData,
2327
fetchAwsData,
2428
fetchAwsEcsData,
29+
fetchAwsEksData,
2530
fetchAwsAppInfo,
2631
} = useContext(AwsContext);
32+
const [dashboards, setDashboards] = useState<Dashboard[]>([]);
2733
const { app, appIndex, intervalID, setIntervalID } = useContext(ApplicationContext);
2834
const { user } = useContext(DashboardContext);
2935
// const [intervalID, setintervalID] = useState<NodeJS.Timeout | null>(null);
3036
const [awsLive, setAwsLive] = useState<boolean>(false);
3137
const { region } = awsAppInfo;
3238
const { state } = useLocation();
3339
const { typeOfService } = state;
40+
const { awsUrl } = awsAppInfo;
3441

3542
useEffect(() => {
3643
if (awsLive) {
@@ -48,16 +55,17 @@ const AwsGraphsContainer: React.FC = React.memo(props => {
4855
if (intervalID) clearInterval(intervalID);
4956
fetchAwsAppInfo(user, appIndex);
5057

51-
typeOfService === 'AWS/EC2' ? fetchAwsData(user, appIndex) : fetchAwsEcsData(user, appIndex);
58+
typeOfService === 'AWS/EC2'? fetchAwsData(user, appIndex) : fetchAwsEcsData(user, appIndex);
5259
}
60+
5361
}, [awsLive]);
5462

5563
useEffect(() => {
5664
return () => {
5765
if (intervalID) clearInterval(intervalID);
5866
setAwsData({ CPUUtilization: [], NetworkIn: [], NetworkOut: [], DiskReadBytes: [] });
5967
setAwsEcsData({});
60-
setAwsAppInfo({ typeOfService: '', region: '' });
68+
setAwsAppInfo({ typeOfService: '', region: '', awsUrl: '' });
6169
};
6270
}, []);
6371

@@ -77,10 +85,8 @@ const AwsGraphsContainer: React.FC = React.memo(props => {
7785
return colour;
7886
}
7987
};
80-
81-
// const awsGraphArray = Object.keys(awsData)?.map(metric => {
82-
83-
// })
88+
89+
8490

8591
return (
8692
<div className="AWS-container">
@@ -91,23 +97,35 @@ const AwsGraphsContainer: React.FC = React.memo(props => {
9197
{awsLive ? (
9298
<div>
9399
<span id="live">Live</span>
100+
94101
</div>
95102
) : (
96103
<div id="gatherLiveData">Gather Live Data</div>
104+
97105
)}
98106
</button>
99107
</div>
100-
{typeOfService === 'AWS/ECS' ? (
108+
{typeOfService === 'AWS/ECS' && (
101109
<div className="cluster-table">
102110
<ClusterTable typeOfService={typeOfService} region={region} />
103-
<AwsECSClusterGraphs />
111+
{/* <iframe src="http://a43696611f78d41e89960d0f1bb06f07-578600705.us-west-2.elb.amazonaws.com/d/3H7r_bB4z/kubernetes-cluster-monitoring-via-prometheus?orgId=1&refresh=10s&theme=light" width="100" height="1300" ></iframe> */}
112+
<AwsECSClusterGraphs />
113+
</div>
114+
) }
115+
{typeOfService === 'AWS/EC2' && (
116+
<div className="cluster-table">
117+
<AwsEC2Graphs />
118+
</div>
119+
)}
120+
{typeOfService === 'AWS/EKS' && (
121+
<div>
122+
{/* <iframe src={`${awsUrl}/d/8jYcvsBVz/kubernetes-cluster-monitoring-via-prometheus?orgId=1&refresh=10s&theme=light`} width="1300" height="1300" ></iframe>
123+
<iframe src={`${awsUrl}/d/jPEGwyfVk/opencost?orgId=1&theme=light`} width="1300" height="1300" ></iframe> */}
124+
<GrafanaIFrame {...awsAppInfo} />
104125
</div>
105-
) : (
106-
<AwsEC2Graphs />
107126
)}
108127
</div>
109128
);
110129
// }
111130
});
112-
113131
export default AwsGraphsContainer;

‎app/containers/GrafanaIFrame.tsx

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import React, { useEffect, useState } from "react";
2+
3+
interface Dashboard {
4+
uid: string;
5+
url: string;
6+
title: string;
7+
}
8+
9+
interface Props {
10+
awsUrl: string;
11+
}
12+
13+
//http://a9921cff905094aa0a45e6e330684283-98913978.us-east-2.elb.amazonaws.com/api/search?folderIds=0
14+
//`${grafanaUrl}/api/search?query=&type=dash-db`
15+
//api/search?type=dash-folder
16+
17+
const GrafanaIFrames: React.FC<Props> = ({ awsUrl }) => {
18+
const [dashboards, setDashboards] = useState<Dashboard[]>([]);
19+
const [iframes, setIframes] = useState<JSX.Element[]>([]);
20+
21+
useEffect(() => {
22+
const url = `${awsUrl}/api/search?folderIds=0`
23+
console.log(awsUrl)
24+
const fetchDashboards = async () => {
25+
const response = await fetch(url, {
26+
method: 'GET',
27+
headers: {
28+
"Access-Control-Allow-Origin": "*",
29+
Accept: "application/json",
30+
"Content-Type": "application/json",
31+
Authorization: 'Bearer eyJrIjoiamN4UGRKVHg3cUQyZ201N042NW41bHg5bGhJaVFlaFciLCJuIjoidGVzdEtleSIsImlkIjoxfQ=='
32+
},
33+
});
34+
console.log(url)
35+
console.log(response)
36+
const data = await response.json();
37+
console.log(data)
38+
console.log(awsUrl)
39+
const tempDashboards = data.map((dashboard: any) => ({
40+
uid: dashboard.uid,
41+
url: dashboard.url,
42+
title: dashboard.title,
43+
}));
44+
setDashboards(tempDashboards);
45+
};
46+
fetchDashboards();
47+
}, [awsUrl]);
48+
49+
useEffect(() => {
50+
const iframesArr: JSX.Element[] = [];
51+
for (const dashboard of dashboards) {
52+
const iframe = (
53+
<iframe
54+
key={dashboard.uid}
55+
src={`${awsUrl}${dashboard.url}`}
56+
title={dashboard.title}
57+
width="100%"
58+
height="600"
59+
style={{ border: "none" }}
60+
/>
61+
);
62+
iframesArr.push(iframe);
63+
}
64+
setIframes(iframesArr);
65+
}, [dashboards, awsUrl]);
66+
return <div>
67+
{iframes}
68+
<div>${awsUrl}</div>
69+
70+
</div>;
71+
};
72+
73+
export default GrafanaIFrames;

‎app/context/AwsContext.tsx

Lines changed: 20 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,12 +20,13 @@ interface AwsData {
2020
interface AwsAppInfo {
2121
typeOfService: string,
2222
region: string
23+
awsUrl: string
2324
}
2425

2526
const AwsContextProvider: React.FC<Props> = React.memo(({ children }) => {
2627
const [awsData, setAwsData] = useState<AwsData>({ CPUUtilization: [], NetworkIn: [], NetworkOut: [], DiskReadBytes: [] })
2728
const [awsEcsData, setAwsEcsData] = useState<any>({});
28-
const [awsAppInfo, setAwsAppInfo] = useState<AwsAppInfo>({ typeOfService: '', region: '' });
29+
const [awsAppInfo, setAwsAppInfo] = useState<AwsAppInfo>({ typeOfService: '', region: '' , awsUrl: ''});
2930
const [isLoading, setLoadingState] = useState<boolean>(true);
3031

3132
const fetchAwsData = (username: string, index: number) => {
@@ -51,6 +52,23 @@ const AwsContextProvider: React.FC<Props> = React.memo(({ children }) => {
5152
setLoadingState(false);
5253
});
5354
};
55+
const fetchAwsEksData = (username: string, index: number) => {
56+
ipcRenderer.removeAllListeners('eksMetricsResponse');
57+
58+
setLoadingState(false);
59+
};
60+
// we definitely need to grab the cluster name and grafana nmetrics here
61+
// const fetchAwsEksData = (username: string, index: number) => {
62+
// ipcRenderer.removeAllListeners('eksMetricsResponse');
63+
64+
// ipcRenderer.send('eksMetricsRequest', username, index);
65+
// ipcRenderer.on('eksMetricsResponse', (event: Electron.Event, res: any) => {
66+
// const data = JSON.parse(res);
67+
68+
// setAwsEcsData(data);
69+
// setLoadingState(false);
70+
// });
71+
// };
5472

5573
const fetchAwsAppInfo = (username: string, index: number) => {
5674
ipcRenderer.removeAllListeners('awsAppInfoResponse');
@@ -65,7 +83,7 @@ const AwsContextProvider: React.FC<Props> = React.memo(({ children }) => {
6583

6684
return (
6785
<AwsContext.Provider
68-
value={{ fetchAwsData, awsData, setAwsData, fetchAwsEcsData, awsEcsData, setAwsEcsData, awsAppInfo, setAwsAppInfo, fetchAwsAppInfo, isLoading, setLoadingState}}
86+
value={{ fetchAwsData, awsData, setAwsData, fetchAwsEcsData,fetchAwsEksData, awsEcsData, setAwsEcsData, awsAppInfo, setAwsAppInfo, fetchAwsAppInfo, isLoading, setLoadingState}}
6987
>
7088
{children}
7189
</AwsContext.Provider>

‎app/context/DashboardContext.tsx

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ interface AwsFields {
1919
secretAccessKey: string;
2020
name: string;
2121
description?: string
22+
awsUrl: string;
2223
}
2324
// interface Props {
2425
// children: React.ReactNode;
@@ -62,10 +63,10 @@ const DashboardContextProvider = React.memo((props: any) => {
6263
}, []);
6364

6465
const addAwsApp = useCallback((awsFields: AwsFields) => {
65-
const { typeOfService, instance, region, accessKey, secretAccessKey, name, description } = awsFields;
66+
const { typeOfService, instance, region, accessKey, secretAccessKey, name, description, awsUrl } = awsFields;
6667
const result = ipcRenderer.sendSync(
6768
'addAwsApp', //"addApp"
68-
JSON.stringify([name, 'AWS', region, description, typeOfService, instance, accessKey, secretAccessKey])
69+
JSON.stringify([name, 'AWS', region, description, typeOfService, instance, accessKey, secretAccessKey, awsUrl])
6970
);
7071
setApplications(result);
7172
console.log('the current application that was added is : ', result)

‎app/modals/AwsModal.tsx

Lines changed: 18 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ interface AwsFields {
1111
secretAccessKey: string;
1212
name: string;
1313
description?: string;
14+
awsUrl ?: string;
1415
}
1516

1617
interface IDashboard {
@@ -34,6 +35,7 @@ const AwsModal: React.FC<AddModalProps> = React.memo(({ setOpen }) => {
3435
accessKey: '',
3536
secretAccessKey: '',
3637
name: '',
38+
awsUrl: '',
3739
description: '',
3840
});
3941

@@ -53,7 +55,7 @@ const AwsModal: React.FC<AddModalProps> = React.memo(({ setOpen }) => {
5355
});
5456
};
5557

56-
const { typeOfService, instance, region, accessKey, secretAccessKey, name, description } =
58+
const { typeOfService, instance, region, accessKey, secretAccessKey, name, description, awsUrl } =
5759
awsFields;
5860

5961
return (
@@ -74,6 +76,7 @@ const AwsModal: React.FC<AddModalProps> = React.memo(({ setOpen }) => {
7476
>
7577
<option value="AWS/EC2">Elastic Compute Cloud (EC2)</option>
7678
<option value="AWS/ECS">Elastic Container Service (ECS)</option>
79+
<option value="AWS/EKS">Elastic Kubernetes Service (EKS)</option>
7780
</select>
7881
</div>
7982
{typeOfService === 'AWS/EC2' && (
@@ -150,6 +153,20 @@ const AwsModal: React.FC<AddModalProps> = React.memo(({ setOpen }) => {
150153
required
151154
/>
152155
</div>
156+
<div>
157+
<label htmlFor="aws-url">
158+
Cluster URL<span>*</span>
159+
</label>
160+
<input
161+
id="aws-url"
162+
type="string"
163+
name="awsUrl"
164+
value={awsUrl}
165+
onChange={e => handleChange(e)}
166+
placeholder="AWS Url"
167+
required
168+
/>
169+
</div>
153170
<div>
154171
<label htmlFor="aws-name">
155172
Name<span>*</span>

0 commit comments

Comments
 (0)