Skip to content

Commit 90c431a

Browse files
HaoyL666HaoyL666
committed
connect front end to back end
1 parent e1700af commit 90c431a

File tree

8 files changed

+241
-112
lines changed

8 files changed

+241
-112
lines changed

‎app/charts/GrafanaEventChart.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { all, solo as soloStyle } from './sizeSwitch';
33

44
interface EventChartProps {
55
metricName: string;
6+
token: string;
67
}
78

89
// interface SoloStyles {
@@ -18,7 +19,7 @@ interface EventChartProps {
1819
* @returns {JSX.Element} The JSX element with the event chart.
1920
*/
2021
const GrafanaEventChart: React.FC<EventChartProps> = React.memo(props => {
21-
const { metricName } = props;
22+
const { metricName, token } = props;
2223
const [graphType, setGraphType] = useState<string>("timeseries");
2324
// const [solo, setSolo] = useState<SoloStyles | null>(null);
2425
console.log("inside GrafanaEventChart")
@@ -41,10 +42,11 @@ const GrafanaEventChart: React.FC<EventChartProps> = React.memo(props => {
4142
const handleSelectionChange = async (event) => {
4243
setGraphType(event.target.value);
4344
await fetch('http://localhost:1111/api/updateDashboard', {
45+
method: 'POST',
4446
headers: {
4547
'Content-Type': 'application/json',
4648
},
47-
body: JSON.stringify({ graphType: event.target.value, metric: metricName })
49+
body: JSON.stringify({ graphType: event.target.value, metric: metricName, token: token }),
4850
})
4951

5052
}

‎app/containers/EventContainer.tsx

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,9 @@ interface Params {
1919
interface MetricObject {
2020
[key: string]: {
2121
value: string[],
22-
time: string[]
22+
time: string[],
23+
id: string,
24+
token: string
2325
}
2426
}
2527

@@ -109,6 +111,8 @@ const EventContainer: React.FC<EventContainerProps> = React.memo(props => {
109111
//parsedName = metricName.replace(/.*\/.*\//g, '')
110112
const chartData = metricObject[metricName];
111113
console.log('chartData IS: ', chartData)
114+
const token = chartData.token;
115+
console.log('token IS: ', token);
112116
// plotting using plotly
113117
// chartsArray.push(
114118
// <EventChart
@@ -122,7 +126,7 @@ const EventContainer: React.FC<EventContainerProps> = React.memo(props => {
122126
// plotting using grafana
123127
console.log("I'm here")
124128
grafanaChartsArray.push(
125-
<GrafanaEventChart metricName={metricName} />);
129+
<GrafanaEventChart metricName={metricName} token={token} />);
126130
}
127131
}
128132
console.log(grafanaChartsArray)

‎app/context/helpers.ts

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@ export function eventTransformer(eventData: MetricObject[]) {
8686
console.log('eventData: ', eventData);
8787
eventData.forEach((metricObj: MetricObject) => {
8888
// destructure the category, metric name, time stamp, and metric value from the metricObj
89-
const { category, metric, time, value, _id } = metricObj
89+
const { category, metric, time, value, _id, token } = metricObj
9090
// if the category doesn't exist on the output object yet, initialize it
9191
if (!eventMetricsObject[category]) eventMetricsObject[category] = {};
9292
// if it doesn't exist yet in that nested object, assign a key using the current dataObject's metric name and assign its value an empty object
@@ -101,9 +101,12 @@ export function eventTransformer(eventData: MetricObject[]) {
101101
eventMetricsObject[category][metric].time.push(time);
102102

103103
if (!eventMetricsObject[category][metric].id) eventMetricsObject[category][metric].id = _id;
104+
if (!eventMetricsObject[category][metric].token) eventMetricsObject[category][metric].token = token;
105+
104106
});
105107
// return the eventMetricsObject
106108
console.log('eventMetricsObject.Event.length: ', Object.keys(eventMetricsObject["Event"]).length);
109+
console.log('eventMetricsObject: ', eventMetricsObject)
107110
//console.log('eventMetricsObject.length', eventMetricsObject);
108111
return eventMetricsObject;
109112
};

‎chronos_npm_package/controllers/GrafanaPanel.js

Lines changed: 191 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,191 @@
1+
function createGrafanaPanelObject(
2+
metric,
3+
datasource,
4+
graphType
5+
) {
6+
// Create a panel object to be used within dashboards.
7+
const panel = {
8+
"datasource": datasource,
9+
"fieldConfig": {
10+
"defaults": {
11+
"color": {
12+
"mode": "palette-classic"
13+
},
14+
"custom": {
15+
"axisCenteredZero": false,
16+
"axisColorMode": "text",
17+
"axisLabel": "",
18+
"axisPlacement": "auto",
19+
"barAlignment": 0,
20+
"drawStyle": "line",
21+
"fillOpacity": 0,
22+
"gradientMode": "none",
23+
"hideFrom": {
24+
"legend": false,
25+
"tooltip": false,
26+
"viz": false
27+
},
28+
"lineInterpolation": "linear",
29+
"lineWidth": 1,
30+
"pointSize": 5,
31+
"scaleDistribution": {
32+
"type": "linear"
33+
},
34+
"showPoints": "auto",
35+
"spanNulls": false,
36+
"stacking": {
37+
"group": "A",
38+
"mode": "none"
39+
},
40+
"thresholdsStyle": {
41+
"mode": "off"
42+
}
43+
},
44+
"mappings": [],
45+
"thresholds": {
46+
"mode": "absolute",
47+
"steps": [
48+
{
49+
"color": "green",
50+
"value": null
51+
},
52+
{
53+
"color": "red",
54+
"value": 80
55+
}
56+
]
57+
},
58+
"min": 0
59+
},
60+
"overrides": []
61+
},
62+
"gridPos": {
63+
"h": 8,
64+
"w": 12,
65+
"x": 0,
66+
"y": 0
67+
},
68+
"options": {
69+
"legend": {
70+
"calcs": [],
71+
"displayMode": "list",
72+
"placement": "bottom",
73+
"showLegend": true
74+
},
75+
"tooltip": {
76+
"mode": "single",
77+
"sort": "none"
78+
}
79+
},
80+
"id": 1,
81+
"targets": [{
82+
"datasource": datasource,
83+
"editorMode": "builder",
84+
"expr": metric.metric.replace(/.*\/.*\//g, ''),
85+
"instant": false,
86+
"range": true,
87+
"refId": "A"
88+
}],
89+
"title": metric.metric.replace(/.*\/.*\//g, ''),
90+
"type": graphType,
91+
"interval": "2s"
92+
}
93+
return panel;
94+
}
95+
96+
function updateGrafanaPanelObject(
97+
metric,
98+
datasource,
99+
graphType
100+
) {
101+
// Create a panel object to be used within dashboards.
102+
const panel = {
103+
"datasource": datasource,
104+
"fieldConfig": {
105+
"defaults": {
106+
"color": {
107+
"mode": "palette-classic"
108+
},
109+
"custom": {
110+
"axisCenteredZero": false,
111+
"axisColorMode": "text",
112+
"axisLabel": "",
113+
"axisPlacement": "auto",
114+
"barAlignment": 0,
115+
"drawStyle": "line",
116+
"fillOpacity": 0,
117+
"gradientMode": "none",
118+
"hideFrom": {
119+
"legend": false,
120+
"tooltip": false,
121+
"viz": false
122+
},
123+
"lineInterpolation": "linear",
124+
"lineWidth": 1,
125+
"pointSize": 5,
126+
"scaleDistribution": {
127+
"type": "linear"
128+
},
129+
"showPoints": "auto",
130+
"spanNulls": false,
131+
"stacking": {
132+
"group": "A",
133+
"mode": "none"
134+
},
135+
"thresholdsStyle": {
136+
"mode": "off"
137+
}
138+
},
139+
"mappings": [],
140+
"thresholds": {
141+
"mode": "absolute",
142+
"steps": [
143+
{
144+
"color": "green",
145+
"value": null
146+
},
147+
{
148+
"color": "red",
149+
"value": 80
150+
}
151+
]
152+
},
153+
"min": 0
154+
},
155+
"overrides": []
156+
},
157+
"gridPos": {
158+
"h": 8,
159+
"w": 12,
160+
"x": 0,
161+
"y": 0
162+
},
163+
"options": {
164+
"legend": {
165+
"calcs": [],
166+
"displayMode": "list",
167+
"placement": "bottom",
168+
"showLegend": true
169+
},
170+
"tooltip": {
171+
"mode": "single",
172+
"sort": "none"
173+
}
174+
},
175+
"id": 1,
176+
"targets": [{
177+
"datasource": datasource,
178+
"editorMode": "builder",
179+
"expr": metric.replace(/.*\/.*\//g, ''),
180+
"instant": false,
181+
"range": true,
182+
"refId": "A"
183+
}],
184+
"title": metric.replace(/.*\/.*\//g, ''),
185+
"type": graphType,
186+
"interval": "2s"
187+
}
188+
return panel;
189+
}
190+
191+
module.exports = { createGrafanaPanelObject, updateGrafanaPanelObject };

‎chronos_npm_package/controllers/createGrafanaPanel.js

Lines changed: 0 additions & 96 deletions
This file was deleted.

0 commit comments

Comments
 (0)