Skip to content

Commit 6fa838d

Browse files
HaoyL666HaoyL666
committed
change box size
1 parent b5f4b02 commit 6fa838d

File tree

5 files changed

+539
-289
lines changed

5 files changed

+539
-289
lines changed

‎app/charts/GrafanaEventChart.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,9 @@ const GrafanaEventChart: React.FC<EventChartProps> = React.memo(props => {
7676
<option value="histogram">Histogram</option>
7777
</select>
7878

79-
<label htmlFor="graphType"> Time Frame: </label>
79+
<label htmlFor="graphType" style={{
80+
marginLeft: '20px'
81+
}}> Time Frame: </label>
8082
<select name="graphType" id="graphType" onChange={(e) => setTimeFrame(e.target.value as TimeFrame)}>
8183
<option value={'5m'}>5 minutes</option>
8284
<option value={'15m'}>15 minutes</option>

‎app/containers/EventContainer.tsx

Lines changed: 3 additions & 276 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() {
@@ -135,290 +134,18 @@ const EventContainer: React.FC<EventContainerProps> = React.memo(props => {
135134
setCurrIndex(currIndex + chunkSize);
136135
};
137136

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-
// // }
400137

401138
// invoke the filter and generate functions to render charts
402139
useEffect(() => {
403140
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)
416141
generateEventCharts(filteredEventData);
417142

418143
}, [eventData, service]);
419144

420145
return (
146+
421147
<div>
148+
{/* <div id="gatherLiveData" onClick={() => { setIsGrafana(!isGrafana) }}>Gather Live Data</div> */}
422149
{service.includes('kafkametrics') || service.includes('kubernetesmetrics') ? currChunk : []}
423150
{eventChartsArr.length > chunkSize && (
424151
<>

‎app/stylesheets/GrafanaGraph.scss

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
#graphType {
2-
min-width: 130px;
3-
height: 40px;
2+
min-width: 100px;
3+
height: 25px;
44
color: #fff;
55
padding: 5px 10px;
66
font-weight: bold;
@@ -27,8 +27,8 @@
2727
}
2828

2929
#timeFrame {
30-
min-width: 130px;
31-
height: 40px;
30+
min-width: 100px;
31+
height: 25px;
3232
color: #fff;
3333
padding: 5px 10px;
3434
font-weight: bold;

0 commit comments

Comments
 (0)