Skip to content

Commit 60933c4

Browse files
HaoyL666HaoyL666
committed
add graphType functionality
1 parent 6a72a7b commit 60933c4

File tree

5 files changed

+35
-17
lines changed

5 files changed

+35
-17
lines changed

‎app/charts/GrafanaEventChart.tsx

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -39,31 +39,43 @@ const GrafanaEventChart: React.FC<EventChartProps> = React.memo(props => {
3939
console.log("uid: ", uid)
4040
console.log("parsedName: ", parsedName)
4141

42+
43+
4244
const handleSelectionChange = async (event) => {
43-
setGraphType(event.target.value);
45+
//setGraphType(event.target.value);
4446
await fetch('http://localhost:1111/api/updateDashboard', {
4547
method: 'POST',
4648
headers: {
4749
'Content-Type': 'application/json',
4850
},
4951
body: JSON.stringify({ graphType: event.target.value, metric: metricName, token: token }),
5052
})
51-
53+
console.log("event.target.value: ", event.target.value)
54+
setGraphType(event.target.value);
5255
}
5356

57+
5458
return (
5559
<div className="chart" data-testid="Grafana Event Chart">
5660
<h2>{parsedName}</h2>
5761
{/* create chart using grafana iframe tag*/}
58-
<iframe src={`http://localhost:32000/d-solo/${uid}/${parsedName}?orgId=1&refresh=10s&from=now-5m&to=now&panelId=1`} width="650" height="400" ></iframe>
59-
<select name="graphType" id="graphType" value={graphType} onChange={handleSelectionChange}>
60-
<option value="timeseries">Time Series</option>
61-
<option value="barchart">Bar Chart</option>
62-
<option value="stat">Stat</option>
63-
<option value="gauge">Gauge</option>
64-
<option value="table">Table</option>
65-
<option value="histogram">Histogram</option>
66-
</select>
62+
{graphType !== "timeseries" ? <> <iframe src={`http://localhost:32000/d-solo/${uid}/${parsedName}?orgId=1&refresh=10s&panelId=1`} width="650" height="400" ></iframe>
63+
<select name="graphType" id="graphType" onChange={handleSelectionChange}>
64+
<option value="timeseries">Time Series</option>
65+
<option value="barchart">Bar Chart</option>
66+
<option value="stat">Stat</option>
67+
<option value="gauge">Gauge</option>
68+
<option value="table">Table</option>
69+
<option value="histogram">Histogram</option>
70+
</select></> : <><iframe src={`http://localhost:32000/d-solo/${uid}/${parsedName}?orgId=1&refresh=10s&panelId=1`} width="650" height="400" ></iframe>
71+
<select name="graphType" id="graphType" onChange={handleSelectionChange}>
72+
<option value="timeseries">Time Series</option>
73+
<option value="barchart">Bar Chart</option>
74+
<option value="stat">Stat</option>
75+
<option value="gauge">Gauge</option>
76+
<option value="table">Table</option>
77+
<option value="histogram">Histogram</option>
78+
</select> </>}
6779
</div>
6880
);
6981
});

‎chronos_npm_package/controllers/utilities.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -409,7 +409,7 @@ const helpers = {
409409
updateGrafanaDashboard: async (graphType, token, metric, datasource) => {
410410
let uid = metric.replace(/.*\/.*\//g, '')
411411
if (metric.replace(/.*\/.*\//g, '').length >= 40) {
412-
uid = metric.slice(metric.metric.length - 39);
412+
uid = metric.slice(metric.length - 39);
413413
}
414414
//console.log("uid is: ", uid)
415415
//console.log("metric is: ", metric)
@@ -437,7 +437,7 @@ const helpers = {
437437
try {
438438
// POST request to Grafana Dashboard API to create a dashboard
439439
const dashboardResponse = await axios.post(
440-
'http://grafana:3000/api/dashboards/db',
440+
'http://localhost:32000/api/dashboards/db',
441441
JSON.stringify(dashboard),
442442
{
443443
headers: {
@@ -455,7 +455,7 @@ const helpers = {
455455
);
456456
} else {
457457
// A simple console log to show when graphs are done being posted to Grafana.
458-
console.log(`📊 Grafana graphs 📊 for the ${metric.metric.replace(/.*\/.*\//g, '')} has been updated!!!`);
458+
console.log(`📊 Grafana graphs 📊 for the ${metric.replace(/.*\/.*\//g, '')} has been updated!!!`);
459459
}
460460
} catch (err) {
461461
console.log(err);

‎chronos_npm_package/server/server.js

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,8 +24,8 @@ app.post('/api/updateDashboard', async (req, res) => {
2424
const { graphType, metric, token } = req.body;
2525
console.log(graphType, metric, token);
2626
console.log('updateDashboard endpoint hit');
27-
const datasource = await utilities.updateGrafanaDatasource();
28-
//await utilities.updateGrafanaDashboard(graphType, token, metric, datasource);
27+
const datasource = await utilities.updateGrafanaDatasource(token);
28+
await utilities.updateGrafanaDashboard(graphType, token, metric, datasource);
2929
console.log('Dashboard Updated');
3030
return res.status(200).send('Dashboard Updated');
3131
});

‎examples/kubernetes/scripts/setup.sh

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
kubectl apply -f ../launch/clusterRole.yml
2+
kubectl apply -f ../launch/promConfig.yml
3+
kubectl apply -f ../launch/prometheus.yml
4+
kubectl apply -f ../launch/grafana-datasource-config.yml
5+
kubectl apply -f ../launch/grafana.yml
6+
kubectl apply -f ../launch/grafanaService.yml

‎examples/kubernetes/scripts/stopKuber.sh

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ kubectl delete -f ../launch/promConfig.yml
33
kubectl delete -f ../launch/prometheus.yml
44
kubectl delete -f ../launch/backend.yml
55
kubectl delete -f ../launch/frontend.yml
6-
kubectl delete -f ../launch/grafana-datasource-config.yml
6+
# kubectl delete -f ../launch/grafana-datasource-config.yml
77
# kubectl delete -f ../launch/grafanaService.yml
88
# kubectl delete -f ../launch/grafana.yml
99

0 commit comments

Comments
 (0)