Skip to content

Commit ecda434

Browse files
BoopdiBopBoopdiBop
authored
Merge pull request #14 from oslabs-beta/victor/iframes
eks metrics
2 parents 0a1af3e + 556d357 commit ecda434

File tree

5 files changed

+263
-74
lines changed

5 files changed

+263
-74
lines changed

‎app/containers/AWSGraphsContainer.tsx

Lines changed: 13 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,9 @@ const AwsGraphsContainer: React.FC = React.memo(props => {
2323
awsAppInfo,
2424
setAwsAppInfo,
2525
awsEcsData,
26+
awsEksData,
2627
setAwsEcsData,
28+
setAwsEksData,
2729
fetchAwsData,
2830
fetchAwsEcsData,
2931
fetchAwsEksData,
@@ -46,16 +48,19 @@ const AwsGraphsContainer: React.FC = React.memo(props => {
4648
console.log('intervalId after click live', intervalID);
4749
fetchAwsAppInfo(user, appIndex);
4850

49-
typeOfService === 'AWS/EC2'
50-
? fetchAwsData(user, appIndex)
51-
: fetchAwsEcsData(user, appIndex);
51+
if (typeOfService === 'AWS/EC2') fetchAwsData(user, appIndex) ;
52+
if (typeOfService === 'AWS/ECS')fetchAwsEcsData(user, appIndex);
53+
if (typeOfService === 'AWS/EKS') fetchAwsEksData(user, appIndex)
5254
}, 10000)
5355
);
5456
} else {
5557
if (intervalID) clearInterval(intervalID);
5658
fetchAwsAppInfo(user, appIndex);
5759

58-
typeOfService === 'AWS/EC2'? fetchAwsData(user, appIndex) : fetchAwsEcsData(user, appIndex);
60+
if (typeOfService === 'AWS/EC2') fetchAwsData(user, appIndex) ;
61+
if (typeOfService === 'AWS/ECS') fetchAwsEcsData(user, appIndex);
62+
if (typeOfService === 'AWS/EKS') fetchAwsEksData(user, appIndex)
63+
5964
}
6065

6166
}, [awsLive]);
@@ -65,6 +70,7 @@ const AwsGraphsContainer: React.FC = React.memo(props => {
6570
if (intervalID) clearInterval(intervalID);
6671
setAwsData({ CPUUtilization: [], NetworkIn: [], NetworkOut: [], DiskReadBytes: [] });
6772
setAwsEcsData({});
73+
setAwsEksData({});
6874
setAwsAppInfo({ typeOfService: '', region: '', awsUrl: '' });
6975
};
7076
}, []);
@@ -119,9 +125,9 @@ const AwsGraphsContainer: React.FC = React.memo(props => {
119125
)}
120126
{typeOfService === 'AWS/EKS' && (
121127
<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} />
128+
<iframe src={`${awsUrl}/d/8jYcvsBVz/kubernetes-cluster-monitoring-via-prometheus?orgId=1&refresh=10s&theme=light&kiosk`} width="1300" height="1300" ></iframe>
129+
<iframe src={`${awsUrl}/d/jPEGwyfVk/opencost?orgId=1&theme=light&kiosk`} width="1300" height="1300" ></iframe>
130+
{/* <GrafanaIFrame {...awsAppInfo}/> */}
125131
</div>
126132
)}
127133
</div>

‎app/containers/GrafanaIFrame.tsx

Lines changed: 170 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,64 @@
1-
import React, { useEffect, useState } from "react";
1+
import React, { useEffect,useContext, useState } from "react";
2+
import { AwsContext } from '../context/AwsContext';
23

3-
interface Dashboard {
4-
uid: string;
5-
url: string;
6-
title: string;
7-
}
84

95
interface Props {
106
awsUrl: string;
117
}
12-
8+
interface Dashboard {
9+
uid: string,
10+
url: string,
11+
title: string,
12+
13+
}
1314
//http://a9921cff905094aa0a45e6e330684283-98913978.us-east-2.elb.amazonaws.com/api/search?folderIds=0
1415
//`${grafanaUrl}/api/search?query=&type=dash-db`
1516
//api/search?type=dash-folder
1617

17-
const GrafanaIFrames: React.FC<Props> = ({ awsUrl }) => {
18+
const GrafanaIFrame: React.FC<Props> = ({ awsUrl }) => {
1819
const [dashboards, setDashboards] = useState<Dashboard[]>([]);
1920
const [iframes, setIframes] = useState<JSX.Element[]>([]);
21+
const { awsEksData, setAwsEksData, setLoadingState } = useContext(AwsContext);
22+
23+
useEffect(() => {
24+
return () => {
25+
setAwsEksData({});
26+
setLoadingState(true);
27+
};
28+
}, []);
2029

2130
useEffect(() => {
31+
32+
// const url = `${awsUrl}/api/search?folderIds=0`
33+
34+
// ipcRenderer.send('eksMetricRequest', url);
35+
36+
// ipcRenderer.on('eksMetricResponse', async (event, data) => {
37+
// const eksData = await data.json();
38+
// console.log(eksData)
39+
// const tempDashboards = eksData.map((dashboard: any) => ({
40+
// uid: dashboard.uid,
41+
// url: dashboard.url,
42+
// title: dashboard.title,
43+
// }));
44+
// setDashboards(tempDashboards);
45+
// })
2246
const url = `${awsUrl}/api/search?folderIds=0`
2347
console.log(awsUrl)
2448
const fetchDashboards = async () => {
2549
const response = await fetch(url, {
2650
method: 'GET',
51+
mode:"no-cors",
2752
headers: {
53+
2854
"Access-Control-Allow-Origin": "*",
2955
Accept: "application/json",
3056
"Content-Type": "application/json",
3157
Authorization: 'Bearer eyJrIjoiamN4UGRKVHg3cUQyZ201N042NW41bHg5bGhJaVFlaFciLCJuIjoidGVzdEtleSIsImlkIjoxfQ=='
3258
},
3359
});
34-
console.log(url)
35-
console.log(response)
3660
const data = await response.json();
37-
console.log(data)
38-
console.log(awsUrl)
61+
console.log(data);
3962
const tempDashboards = data.map((dashboard: any) => ({
4063
uid: dashboard.uid,
4164
url: dashboard.url,
@@ -44,6 +67,7 @@ const GrafanaIFrames: React.FC<Props> = ({ awsUrl }) => {
4467
setDashboards(tempDashboards);
4568
};
4669
fetchDashboards();
70+
console.log(dashboards)
4771
}, [awsUrl]);
4872

4973
useEffect(() => {
@@ -63,11 +87,141 @@ const GrafanaIFrames: React.FC<Props> = ({ awsUrl }) => {
6387
}
6488
setIframes(iframesArr);
6589
}, [dashboards, awsUrl]);
66-
return <div>
67-
{iframes}
90+
91+
92+
93+
94+
console.log(awsEksData);
95+
return (
96+
<div>
97+
{iframes}
6898
<div>${awsUrl}</div>
6999

70-
</div>;
100+
</div>
101+
)
71102
};
72103

73-
export default GrafanaIFrames;
104+
105+
export default GrafanaIFrame;
106+
107+
// interface Props {
108+
// awsUrl: string;
109+
// }
110+
111+
// //http://a9921cff905094aa0a45e6e330684283-98913978.us-east-2.elb.amazonaws.com/api/search?folderIds=0
112+
// //`${grafanaUrl}/api/search?query=&type=dash-db`
113+
// //api/search?type=dash-folder
114+
115+
// const GrafanaIFrames: React.FC<Props> = ({ awsUrl }) => {
116+
// const [dashboards, setDashboards] = useState<Dashboard[]>([]);
117+
// const [iframes, setIframes] = useState<JSX.Element[]>([]);
118+
// const { awsEksData, setAwsEksData, setLoadingState } = useContext(AwsContext);
119+
120+
// useEffect(() => {
121+
// return () => {
122+
// setAwsEksData({});
123+
// setLoadingState(true);
124+
// };
125+
// }, []);
126+
127+
// useEffect(() => {
128+
129+
// // const url = `${awsUrl}/api/search?folderIds=0`
130+
131+
// // ipcRenderer.send('eksMetricRequest', url);
132+
133+
// // ipcRenderer.on('eksMetricResponse', async (event, data) => {
134+
// // const eksData = await data.json();
135+
// // console.log(eksData)
136+
// // const tempDashboards = eksData.map((dashboard: any) => ({
137+
// // uid: dashboard.uid,
138+
// // url: dashboard.url,
139+
// // title: dashboard.title,
140+
// // }));
141+
// // setDashboards(tempDashboards);
142+
// // })
143+
// // const url = `${awsUrl}/api/search?folderIds=0`
144+
// // console.log(awsUrl)
145+
// // const fetchDashboards = async () => {
146+
// // const response = await fetch(url, {
147+
// // method: 'GET',
148+
// // headers: {
149+
// // "Access-Control-Allow-Origin": "*",
150+
// // Accept: "application/json",
151+
// // "Content-Type": "application/json",
152+
// // Authorization: 'Bearer eyJrIjoiamN4UGRKVHg3cUQyZ201N042NW41bHg5bGhJaVFlaFciLCJuIjoidGVzdEtleSIsImlkIjoxfQ=='
153+
// // },
154+
// // });
155+
// // const data = await response.json();
156+
// // const tempDashboards = data.map((dashboard: any) => ({
157+
// // uid: dashboard.uid,
158+
// // url: dashboard.url,
159+
// // title: dashboard.title,
160+
// // }));
161+
// // setDashboards(tempDashboards);
162+
// // };
163+
// // fetchDashboards();
164+
// // console.log(dashboards)
165+
// }, [awsUrl]);
166+
167+
// useEffect(() => {
168+
// // const iframesArr: JSX.Element[] = [];
169+
// // for (const dashboard of dashboards) {
170+
// // const iframe = (
171+
// // <iframe
172+
// // key={dashboard.uid}
173+
// // src={`${awsUrl}${dashboard.url}`}
174+
// // title={dashboard.title}
175+
// // width="100%"
176+
// // height="600"
177+
// // style={{ border: "none" }}
178+
// // />
179+
// // );
180+
// // iframesArr.push(iframe);
181+
// // }
182+
// // setIframes(iframesArr);
183+
// }, [dashboards, awsUrl]);
184+
185+
186+
187+
188+
// console.log(awsEksData);
189+
// return (
190+
// <div>
191+
// {iframes}
192+
// <div>${awsUrl}</div>
193+
194+
// </div>
195+
// )
196+
// };
197+
198+
// export default GrafanaIFrames;
199+
200+
//interface Dashboard {
201+
// uid: string;
202+
// url: string;
203+
// title: string;
204+
// }
205+
206+
207+
// const GrafanaIFrame: React.FC = React.memo(props => {
208+
// const {awsEksData, setAwsEksData , setLoadingState } = useContext(AwsContext);
209+
210+
// useEffect(() => {
211+
// return () => {
212+
// setAwsEksData({});
213+
// setLoadingState(true);
214+
// };
215+
// }, []);
216+
217+
218+
// console.log(awsEksData)
219+
220+
221+
// console.log('dashboard data: ', awsEksData)
222+
// return (
223+
// <div>
224+
// hi
225+
// </div>
226+
// );
227+
// });

‎app/context/AwsContext.tsx

Lines changed: 13 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,8 @@ interface AwsAppInfo {
2626
const AwsContextProvider: React.FC<Props> = React.memo(({ children }) => {
2727
const [awsData, setAwsData] = useState<AwsData>({ CPUUtilization: [], NetworkIn: [], NetworkOut: [], DiskReadBytes: [] })
2828
const [awsEcsData, setAwsEcsData] = useState<any>({});
29+
const [awsEksData, setAwsEksData] = useState<any>({});
30+
2931
const [awsAppInfo, setAwsAppInfo] = useState<AwsAppInfo>({ typeOfService: '', region: '' , awsUrl: ''});
3032
const [isLoading, setLoadingState] = useState<boolean>(true);
3133

@@ -54,21 +56,18 @@ const AwsContextProvider: React.FC<Props> = React.memo(({ children }) => {
5456
};
5557
const fetchAwsEksData = (username: string, index: number) => {
5658
ipcRenderer.removeAllListeners('eksMetricsResponse');
57-
59+
60+
ipcRenderer.send('eksMetricsRequest', username, index);
61+
console.log("hi2");
62+
ipcRenderer.on('eksMetricsResponse', (event: Electron.Event, res: any) => {
63+
console.log('response: ', res)
64+
const data = JSON.parse(res);
65+
console.log('data: ', data)
66+
setAwsEksData(data);
5867
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');
68+
});
6369

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-
// };
70+
};
7271

7372
const fetchAwsAppInfo = (username: string, index: number) => {
7473
ipcRenderer.removeAllListeners('awsAppInfoResponse');
@@ -80,10 +79,9 @@ const AwsContextProvider: React.FC<Props> = React.memo(({ children }) => {
8079
setAwsAppInfo(appInfo);
8180
});
8281
};
83-
8482
return (
8583
<AwsContext.Provider
86-
value={{ fetchAwsData, awsData, setAwsData, fetchAwsEcsData,fetchAwsEksData, awsEcsData, setAwsEcsData, awsAppInfo, setAwsAppInfo, fetchAwsAppInfo, isLoading, setLoadingState}}
84+
value={{ fetchAwsData, awsData, setAwsData, fetchAwsEcsData,fetchAwsEksData, awsEksData, setAwsEksData, awsEcsData, setAwsEcsData, awsAppInfo, setAwsAppInfo, fetchAwsAppInfo, isLoading, setLoadingState}}
8785
>
8886
{children}
8987
</AwsContext.Provider>

‎electron/Main.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,15 @@ const createWindow = () => {
2121
nodeIntegration: true,
2222
contextIsolation: false,
2323
},
24+
2425
});
2526

2627
if (process.env.NODE_ENV === 'development') {
2728
// Development: load the application window to the port in the webpack config
2829
win.loadURL('http://localhost:8080/');
2930

3031
// Uncomment below to use Dev Tools on Electron
31-
// win.webContents.openDevTools();
32+
win.webContents.openDevTools();
3233
} else {
3334
// Production
3435
win.loadFile(path.resolve(__dirname, '../index.html'));

0 commit comments

Comments
 (0)