Skip to content

Commit ee3efc0

Browse files
HaoyL666HaoyL666
authored
Merge pull request #7 from HEET-Group/Haoyu/grafana
add graphType functionality
2 parents 258959c + 62aa6b0 commit ee3efc0

File tree

5 files changed

+70
-19
lines changed

5 files changed

+70
-19
lines changed

‎app/charts/GrafanaEventChart.tsx

Lines changed: 58 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,11 @@ interface EventChartProps {
2020
*/
2121
const GrafanaEventChart: React.FC<EventChartProps> = React.memo(props => {
2222
const { metricName, token } = props;
23-
const [graphType, setGraphType] = useState<string>("timeseries");
23+
const [graphType, setGraphType] = useState("timeseries");
24+
const [type, setType] = useState(['timeserie']);
2425
// const [solo, setSolo] = useState<SoloStyles | null>(null);
26+
console.log("graphType: ", graphType)
27+
console.log("type: ", type)
2528
console.log("inside GrafanaEventChart")
2629

2730
// setInterval(() => {
@@ -39,33 +42,75 @@ const GrafanaEventChart: React.FC<EventChartProps> = React.memo(props => {
3942
console.log("uid: ", uid)
4043
console.log("parsedName: ", parsedName)
4144

45+
let currentType;
46+
47+
48+
4249
const handleSelectionChange = async (event) => {
43-
setGraphType(event.target.value);
50+
//setGraphType(event.target.value);
51+
setType([...type, graphType]);
4452
await fetch('http://localhost:1111/api/updateDashboard', {
4553
method: 'POST',
4654
headers: {
4755
'Content-Type': 'application/json',
4856
},
4957
body: JSON.stringify({ graphType: event.target.value, metric: metricName, token: token }),
5058
})
51-
59+
console.log("event.target.value: ", event.target.value)
60+
setGraphType(event.target.value);
5261
}
5362

63+
5464
return (
5565
<div className="chart" data-testid="Grafana Event Chart">
56-
<h2>{parsedName}</h2>
66+
<h2>{`${parsedName} - ${graphType}`}</h2>
67+
<div>
68+
<select name="graphType" id="graphType" onChange={handleSelectionChange}>
69+
<option value="timeseries">Time Series</option>
70+
<option value="barchart">Bar Chart</option>
71+
<option value="stat">Stat</option>
72+
<option value="gauge">Gauge</option>
73+
<option value="table">Table</option>
74+
<option value="histogram">Histogram</option>
75+
</select>
76+
</div>
5777
{/* 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>
78+
{/* {type[type.length - 1] !== graphType ?
79+
<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>
80+
: <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>} */}
81+
{graphType === "timeseries" ? TimeSeries(uid, parsedName, graphType) :
82+
graphType === "barchart" ? BarChart(uid, parsedName, graphType) :
83+
graphType === "stat" ? Stat(uid, parsedName, graphType) :
84+
graphType === "gauge" ? Gauge(uid, parsedName, graphType) :
85+
graphType === "table" ? Table(uid, parsedName, graphType) :
86+
graphType === "histogram" ? Histogram(uid, parsedName, graphType) :
87+
null}
88+
6789
</div>
6890
);
6991
});
7092

93+
const TimeSeries = (uid, parsedName, graphType) => {
94+
return <iframe src={`http://localhost:32000/d-solo/${uid}/${parsedName}?orgId=1&refresh=10s&from=now-5m&to=now&panelId=1&${graphType}`} width="650" height="400" ></iframe>
95+
}
96+
97+
const BarChart = (uid, parsedName, graphType) => {
98+
return <iframe src={`http://localhost:32000/d-solo/${uid}/${parsedName}?orgId=1&refresh=10s&from=now-5m&to=now&panelId=1${graphType}`} width="650" height="400" ></iframe>
99+
}
100+
101+
const Stat = (uid, parsedName, graphType) => {
102+
return <iframe src={`http://localhost:32000/d-solo/${uid}/${parsedName}?orgId=1&refresh=10s&from=now-5m&to=now&panelId=1${graphType}`} width="650" height="400" ></iframe>
103+
}
104+
105+
const Gauge = (uid, parsedName, graphType) => {
106+
return <iframe src={`http://localhost:32000/d-solo/${uid}/${parsedName}?orgId=1&refresh=10s&from=now-5m&to=now&panelId=1${graphType}`} width="650" height="400" ></iframe>
107+
}
108+
109+
const Table = (uid, parsedName, graphType) => {
110+
return <iframe src={`http://localhost:32000/d-solo/${uid}/${parsedName}?orgId=1&refresh=10s&from=now-5m&to=now&panelId=1${graphType}`} width="650" height="400" ></iframe>
111+
}
112+
113+
const Histogram = (uid, parsedName, graphType) => {
114+
return <iframe src={`http://localhost:32000/d-solo/${uid}/${parsedName}?orgId=1&refresh=10s&from=now-5m&to=now&panelId=1${graphType}`} width="650" height="400" ></iframe>
115+
}
71116
export default GrafanaEventChart;

‎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)