Skip to content

Commit 3762557

Browse files
edwinlnyedwinlny
committed
Merge branch 'devDocker_v2' into devDocker-addingGrafana
2 parents d515cc3 + ffa4d79 commit 3762557

File tree

10 files changed

+609
-923
lines changed

10 files changed

+609
-923
lines changed

‎app/charts/GrafanaEventChart.tsx‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,9 +74,13 @@ const GrafanaEventChart: React.FC<EventChartProps> = React.memo(props => {
7474
<option value="gauge">Gauge</option>
7575
<option value="table">Table</option>
7676
<option value="histogram">Histogram</option>
77+
<option value="piechart">Pie Chart</option>
78+
<option value="alertlist">Alert</option>
7779
</select>
7880

79-
<label htmlFor="graphType"> Time Frame: </label>
81+
<label htmlFor="graphType" style={{
82+
marginLeft: '20px'
83+
}}> Time Frame: </label>
8084
<select name="graphType" id="graphType" onChange={(e) => setTimeFrame(e.target.value as TimeFrame)}>
8185
<option value={'5m'}>5 minutes</option>
8286
<option value={'15m'}>15 minutes</option>
@@ -97,7 +101,9 @@ const GrafanaEventChart: React.FC<EventChartProps> = React.memo(props => {
97101
graphType === "gauge" ? Gauge(uid, parsedName, graphType, timeFrame) :
98102
graphType === "table" ? Table(uid, parsedName, graphType, timeFrame) :
99103
graphType === "histogram" ? Histogram(uid, parsedName, graphType, timeFrame) :
100-
null}
104+
graphType === "piechart" ? PieChart(uid, parsedName, graphType, timeFrame) :
105+
graphType === "alertlist" ? AlertList(uid, parsedName, graphType, timeFrame) :
106+
null}
101107

102108
</div>
103109
);
@@ -129,4 +135,12 @@ const Table = (uid, parsedName, graphType, timeFrame) => {
129135
const Histogram = (uid, parsedName, graphType, timeFrame) => {
130136
return <iframe src={`http://localhost:32000/d-solo/${uid}/${parsedName}?orgId=1&refresh=10s&from=now-${timeFrame}&to=now&panelId=1${graphType}`} width="800" height="500" ></iframe>
131137
}
138+
139+
const PieChart = (uid, parsedName, graphType, timeFrame) => {
140+
return <iframe src={`http://localhost:32000/d-solo/${uid}/${parsedName}?orgId=1&refresh=10s&from=now-${timeFrame}&to=now&panelId=1${graphType}`} width="800" height="500" ></iframe>
141+
}
142+
143+
const AlertList = (uid, parsedName, graphType, timeFrame) => {
144+
return <iframe src={`http://localhost:32000/d-solo/${uid}/${parsedName}?orgId=1&refresh=10s&from=now-${timeFrame}&to=now&panelId=1${graphType}`} width="800" height="500" ></iframe>
145+
}
132146
export default GrafanaEventChart;

‎app/containers/EventContainer.tsx‎

Lines changed: 18 additions & 277 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,6 @@ import { QueryContext } from '../context/QueryContext';
55
import EventChart from '../charts/EventChart';
66
import { Button } from '@material-ui/core';
77
import GrafanaEventChart from '../charts/GrafanaEventChart';
8-
import { get } from 'http';
9-
import axios from 'axios';
108

119
interface EventContainerProps {
1210
sizing: string;
@@ -39,6 +37,7 @@ const EventContainer: React.FC<EventContainerProps> = React.memo(props => {
3937
const [currIndex, setCurrIndex] = useState(0);
4038
const [currChunk, setCurrChunk] = useState<JSX.Element[]>([]);
4139
const chunkSize = 7;
40+
let [isGrafana, setIsGrafana] = useState(false);
4241

4342
// nextChunk and prevChunk handle button clicks to show a limited number of graphs per page to prevent crashing
4443
function nextChunk() {
@@ -114,6 +113,8 @@ const EventContainer: React.FC<EventContainerProps> = React.memo(props => {
114113
const token = chartData.token;
115114
console.log('token IS: ', token);
116115
// plotting using plotly
116+
// if (!isGrafana) {
117+
// console.log("plotting plotly")
117118
// chartsArray.push(
118119
// <EventChart
119120
// key={'E' + keymaker()}
@@ -123,302 +124,42 @@ const EventContainer: React.FC<EventContainerProps> = React.memo(props => {
123124
// colourGenerator={colourGenerator}
124125
// />
125126
// );
127+
// } else {
128+
126129
// plotting using grafana
127-
console.log("I'm here")
130+
console.log("plotting grafana")
128131
grafanaChartsArray.push(
129132
<GrafanaEventChart metricName={metricName} token={token} />);
133+
134+
// }
130135
}
131136
}
137+
// if (isGrafana) {
132138
console.log(grafanaChartsArray)
133139
setEventChartsArr(grafanaChartsArray);
134140
setCurrChunk(grafanaChartsArray.slice(currIndex, currIndex + chunkSize));
135141
setCurrIndex(currIndex + chunkSize);
142+
// }
143+
// else {
144+
// console.log(chartsArray)
145+
// setEventChartsArr(chartsArray);
146+
// setCurrChunk(chartsArray.slice(currIndex, currIndex + chunkSize));
147+
// setCurrIndex(currIndex + chunkSize);
148+
// }
136149
};
137150

138-
// function createGrafanaPanelObject(
139-
// metric,
140-
// datasource
141-
// ) {
142-
// // Create a panel object to be used within dashboards.
143-
// const panel = {
144-
// "datasource": datasource,
145-
// "fieldConfig": {
146-
// "defaults": {
147-
// "color": {
148-
// "mode": "palette-classic"
149-
// },
150-
// "custom": {
151-
// "axisCenteredZero": false,
152-
// "axisColorMode": "text",
153-
// "axisLabel": "",
154-
// "axisPlacement": "auto",
155-
// "barAlignment": 0,
156-
// "drawStyle": "line",
157-
// "fillOpacity": 0,
158-
// "gradientMode": "none",
159-
// "hideFrom": {
160-
// "legend": false,
161-
// "tooltip": false,
162-
// "viz": false
163-
// },
164-
// "lineInterpolation": "linear",
165-
// "lineWidth": 1,
166-
// "pointSize": 5,
167-
// "scaleDistribution": {
168-
// "type": "linear"
169-
// },
170-
// "showPoints": "auto",
171-
// "spanNulls": false,
172-
// "stacking": {
173-
// "group": "A",
174-
// "mode": "none"
175-
// },
176-
// "thresholdsStyle": {
177-
// "mode": "off"
178-
// }
179-
// },
180-
// "mappings": [],
181-
// "thresholds": {
182-
// "mode": "absolute",
183-
// "steps": [
184-
// {
185-
// "color": "green",
186-
// "value": null
187-
// },
188-
// {
189-
// "color": "red",
190-
// "value": 80
191-
// }
192-
// ]
193-
// },
194-
// "min": 0
195-
// },
196-
// "overrides": []
197-
// },
198-
// "gridPos": {
199-
// "h": 8,
200-
// "w": 12,
201-
// "x": 0,
202-
// "y": 0
203-
// },
204-
// "options": {
205-
// "legend": {
206-
// "calcs": [],
207-
// "displayMode": "list",
208-
// "placement": "bottom",
209-
// "showLegend": true
210-
// },
211-
// "tooltip": {
212-
// "mode": "single",
213-
// "sort": "none"
214-
// }
215-
// },
216-
// "id": 1,
217-
// "targets": [{
218-
// "datasource": datasource,
219-
// "editorMode": "builder",
220-
// "expr": metric,
221-
// "instant": false,
222-
// "range": true,
223-
// "refId": "A"
224-
// }],
225-
// "title": metric,
226-
// "type": "timeseries",
227-
// "interval": "2s"
228-
// }
229-
// return panel;
230-
// }
231-
232-
// const createGrafanaDashboard = async (
233-
// metric,
234-
// datasource,
235-
// ) => {
236-
// // create dashboard object boilerplate
237-
// const dashboard = {
238-
// "dashboard": {
239-
// "id": null,
240-
// "uid": metric,
241-
// "title": metric,
242-
// "tags": ["templated"],
243-
// "timezone": "browser",
244-
// "schemaVersion": 16,
245-
// "version": 0,
246-
// "refresh": "10s",
247-
// panels: [{
248-
// "datasource": datasource,
249-
// "fieldConfig": {
250-
// "defaults": {
251-
// "color": {
252-
// "mode": "palette-classic"
253-
// },
254-
// "custom": {
255-
// "axisCenteredZero": false,
256-
// "axisColorMode": "text",
257-
// "axisLabel": "",
258-
// "axisPlacement": "auto",
259-
// "barAlignment": 0,
260-
// "drawStyle": "line",
261-
// "fillOpacity": 0,
262-
// "gradientMode": "none",
263-
// "hideFrom": {
264-
// "legend": false,
265-
// "tooltip": false,
266-
// "viz": false
267-
// },
268-
// "lineInterpolation": "linear",
269-
// "lineWidth": 1,
270-
// "pointSize": 5,
271-
// "scaleDistribution": {
272-
// "type": "linear"
273-
// },
274-
// "showPoints": "auto",
275-
// "spanNulls": false,
276-
// "stacking": {
277-
// "group": "A",
278-
// "mode": "none"
279-
// },
280-
// "thresholdsStyle": {
281-
// "mode": "off"
282-
// }
283-
// },
284-
// "mappings": [],
285-
// "thresholds": {
286-
// "mode": "absolute",
287-
// "steps": [
288-
// {
289-
// "color": "green",
290-
// "value": null
291-
// },
292-
// {
293-
// "color": "red",
294-
// "value": 80
295-
// }
296-
// ]
297-
// },
298-
// "min": 0
299-
// },
300-
// "overrides": []
301-
// },
302-
// "gridPos": {
303-
// "h": 8,
304-
// "w": 12,
305-
// "x": 0,
306-
// "y": 0
307-
// },
308-
// "options": {
309-
// "legend": {
310-
// "calcs": [],
311-
// "displayMode": "list",
312-
// "placement": "bottom",
313-
// "showLegend": true
314-
// },
315-
// "tooltip": {
316-
// "mode": "single",
317-
// "sort": "none"
318-
// }
319-
// },
320-
// "id": 1,
321-
// "targets": [{
322-
// "datasource": datasource,
323-
// "editorMode": "builder",
324-
// "expr": metric,
325-
// "instant": false,
326-
// "range": true,
327-
// "refId": "A"
328-
// }],
329-
// "title": metric,
330-
// "type": "timeseries",
331-
// "interval": "2s"
332-
// }],
333-
// },
334-
// folderId: 0,
335-
// overwrite: true,
336-
// };
337-
338-
339-
// // push panel into dashboard object with a line for each metric in promQLQueries object
340-
// //dashboard.dashboard.panels.push(createGrafanaPanelObject(metric, datasource));
341-
342-
// try {
343-
// // POST request to Grafana Dashboard API to create a dashboard
344-
// const dashboardResponse = await axios.post(
345-
// 'http://localhost:32000/api/dashboards/db',
346-
// JSON.stringify(dashboard),
347-
// {
348-
// headers: {
349-
// 'Content-Type': 'application/json',
350-
// 'Authorization': 'Bearer glsa_k6xRnpAs8yiOJBI1eQTqyuRbRhI4lHAi_16c38fd4'
351-
// },
352-
// }
353-
// );
354-
355-
// // Descriptive error log for developers
356-
// if (dashboardResponse.status >= 400) {
357-
// console.log(
358-
// 'Error with POST request to Grafana Dashboards API. In createGrafanaDashboardObject.'
359-
// );
360-
// } else {
361-
// // A simple console log to show when graphs are done being posted to Grafana.
362-
// console.log(`📊 Grafana graphs 📊 for the ${metric} container are ready!!`);
363-
// }
364-
// } catch (err) {
365-
// console.log(err);
366-
// }
367-
// }
368-
369-
// const getGrafanaDatasource = async () => {
370-
// // Fetch datasource information from grafana API.
371-
// // This datasource is PRECONFIGURED on launch using grafana config.
372-
// const datasourceResponse = await axios.get('http://localhost:32000/api/datasources', {
373-
// //mode: 'no-cors',
374-
// headers: {
375-
// "Access-Control-Allow-Origin": "*",
376-
// 'Content-Type': 'application/json',
377-
// 'Authorization': 'Bearer glsa_k6xRnpAs8yiOJBI1eQTqyuRbRhI4lHAi_16c38fd4'
378-
// },
379-
// });
380-
381-
// // Create a datasource object to be used within panels.
382-
// const datasource = {
383-
// type: datasourceResponse[0].type,
384-
// uid: datasourceResponse[0].uid,
385-
// };
386-
387-
// return datasource;
388-
// }
389-
390-
// // const createDashboards = async (filteredEventData) => {
391-
// // for (let key in filteredEventData.Event) {
392-
// // try {
393-
// // let datasource = await getGrafanaDatasource();
394-
// // await createGrafanaDashboard(key.replace(/.*\/.*\//g, ''), datasource);
395-
// // } catch (err) {
396-
// // console.error(err);
397-
// // }
398-
// // }
399-
// // }
400151

401152
// invoke the filter and generate functions to render charts
402153
useEffect(() => {
403154
const filteredEventData = filterSelectedEventMetricsandData(eventData);
404-
// const createDashboards = async (filteredEventData) => {
405-
// for (let key in filteredEventData.Event) {
406-
// try {
407-
// let datasource = await getGrafanaDatasource();
408-
// console.log("dssd")
409-
// await createGrafanaDashboard(key.replace(/.*\/.*\//g, ''), datasource);
410-
// } catch (err) {
411-
// console.error(err);
412-
// }
413-
// }
414-
// }
415-
// createDashboards(filteredEventData)
416155
generateEventCharts(filteredEventData);
417156

418157
}, [eventData, service]);
419158

420159
return (
160+
421161
<div>
162+
{/* <div id="grafana" onClick={() => { setIsGrafana(!isGrafana) }}>Grafana</div> */}
422163
{service.includes('kafkametrics') || service.includes('kubernetesmetrics') ? currChunk : []}
423164
{eventChartsArr.length > chunkSize && (
424165
<>

0 commit comments

Comments
 (0)