Skip to content

Commit 1561013

Browse files
edwinlnyedwinlny
authored
Merge pull request #8 from HEET-Group/Haoyu/grafana
add time frame
2 parents ee3efc0 + 056e648 commit 1561013

File tree

3 files changed

+101
-27
lines changed

3 files changed

+101
-27
lines changed

‎app/charts/GrafanaEventChart.tsx

Lines changed: 42 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import React, { useState } from 'react';
22
import { all, solo as soloStyle } from './sizeSwitch';
3+
import '../stylesheets/GrafanaGraph.scss';
34

45
interface EventChartProps {
56
metricName: string;
@@ -11,6 +12,8 @@ interface EventChartProps {
1112
// width: number;
1213
// }
1314

15+
type TimeFrame = '5m' | '15m' | '1h' | '2h' | '1d' | '2d' | '3d';
16+
1417

1518

1619
/**
@@ -22,6 +25,8 @@ const GrafanaEventChart: React.FC<EventChartProps> = React.memo(props => {
2225
const { metricName, token } = props;
2326
const [graphType, setGraphType] = useState("timeseries");
2427
const [type, setType] = useState(['timeserie']);
28+
const [timeFrame, setTimeFrame] = useState('5m');
29+
2530
// const [solo, setSolo] = useState<SoloStyles | null>(null);
2631
console.log("graphType: ", graphType)
2732
console.log("type: ", type)
@@ -42,10 +47,6 @@ const GrafanaEventChart: React.FC<EventChartProps> = React.memo(props => {
4247
console.log("uid: ", uid)
4348
console.log("parsedName: ", parsedName)
4449

45-
let currentType;
46-
47-
48-
4950
const handleSelectionChange = async (event) => {
5051
//setGraphType(event.target.value);
5152
setType([...type, graphType]);
@@ -62,55 +63,70 @@ const GrafanaEventChart: React.FC<EventChartProps> = React.memo(props => {
6263

6364

6465
return (
65-
<div className="chart" data-testid="Grafana Event Chart">
66-
<h2>{`${parsedName} - ${graphType}`}</h2>
67-
<div>
68-
<select name="graphType" id="graphType" onChange={handleSelectionChange}>
66+
<div className="chart" id="Grafana_Event_Chart">
67+
<h2>{`${parsedName} --- ${graphType}`}</h2>
68+
<div id="selection">
69+
<label htmlFor="timeFrame">Graph Type: </label>
70+
<select name="timeFrame" id="timeFrame" onChange={handleSelectionChange}>
6971
<option value="timeseries">Time Series</option>
7072
<option value="barchart">Bar Chart</option>
7173
<option value="stat">Stat</option>
7274
<option value="gauge">Gauge</option>
7375
<option value="table">Table</option>
7476
<option value="histogram">Histogram</option>
7577
</select>
78+
79+
<label htmlFor="graphType"> Time Frame: </label>
80+
<select name="graphType" id="graphType" onChange={(e) => setTimeFrame(e.target.value as TimeFrame)}>
81+
<option value={'5m'}>5 minutes</option>
82+
<option value={'15m'}>15 minutes</option>
83+
<option value={'1h'}>1 hour</option>
84+
<option value={'2h'}>2 hours</option>
85+
<option value={'1d'}>1 day</option>
86+
<option value={'2d'}>2 days</option>
87+
<option value={'3d'}>3 days</option>
88+
</select>
7689
</div>
7790
{/* create chart using grafana iframe tag*/}
7891
{/* {type[type.length - 1] !== graphType ?
7992
<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>
8093
: <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) :
94+
{graphType === "timeseries" ? TimeSeries(uid, parsedName, graphType, timeFrame) :
95+
graphType === "barchart" ? BarChart(uid, parsedName, graphType, timeFrame) :
96+
graphType === "stat" ? Stat(uid, parsedName, graphType, timeFrame) :
97+
graphType === "gauge" ? Gauge(uid, parsedName, graphType, timeFrame) :
98+
graphType === "table" ? Table(uid, parsedName, graphType, timeFrame) :
99+
graphType === "histogram" ? Histogram(uid, parsedName, graphType, timeFrame) :
87100
null}
88101

89102
</div>
90103
);
91104
});
92105

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>
106+
const TimeSeries = (uid, parsedName, graphType, timeFrame) => {
107+
return <>
108+
<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>
109+
<hr />
110+
</>
95111
}
96112

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>
113+
const BarChart = (uid, parsedName, graphType, timeFrame) => {
114+
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>
99115
}
100116

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>
117+
const Stat = (uid, parsedName, graphType, timeFrame) => {
118+
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>
103119
}
104120

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>
121+
const Gauge = (uid, parsedName, graphType, timeFrame) => {
122+
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>
107123
}
108124

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>
125+
const Table = (uid, parsedName, graphType, timeFrame) => {
126+
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>
111127
}
112128

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>
129+
const Histogram = (uid, parsedName, graphType, timeFrame) => {
130+
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>
115131
}
116132
export default GrafanaEventChart;

‎app/containers/GraphsContainer.tsx

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,6 @@ const GraphsContainer: React.FC = React.memo(props => {
160160
>
161161
Metrics Query
162162
</button>
163-
<button onClick={() => fetch('http://localhost:1111/random')}>test</button>
164163
{HealthAndEventButtons}
165164
{dockerData.containername && (
166165
<button

‎app/stylesheets/GrafanaGraph.scss

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
#graphType {
2+
min-width: 130px;
3+
height: 40px;
4+
color: #fff;
5+
padding: 5px 10px;
6+
font-weight: bold;
7+
cursor: pointer;
8+
transition: all 0.3s ease;
9+
position: relative;
10+
display: inline-block;
11+
outline: none;
12+
border-radius: 5px;
13+
border: none;
14+
background-size: 120% auto;
15+
background-image: linear-gradient(315deg, #bdc3c7 0%, #2c3e50 75%);
16+
margin-top: 10px;
17+
margin-bottom: 10px;
18+
19+
}
20+
21+
#graphType {
22+
background-position: right center;
23+
}
24+
25+
#graphType {
26+
top: 2px;
27+
}
28+
29+
#timeFrame {
30+
min-width: 130px;
31+
height: 40px;
32+
color: #fff;
33+
padding: 5px 10px;
34+
font-weight: bold;
35+
cursor: pointer;
36+
transition: all 0.3s ease;
37+
position: relative;
38+
display: inline-block;
39+
outline: none;
40+
border-radius: 5px;
41+
border: none;
42+
background-size: 120% auto;
43+
background-image: linear-gradient(315deg, #bdc3c7 0%, #2c3e50 75%);
44+
margin-top: 10px;
45+
margin-bottom: 10px;
46+
47+
}
48+
49+
#timeFrame {
50+
background-position: right center;
51+
}
52+
53+
#timeFrame {
54+
top: 2px;
55+
}
56+
57+
#Grafana_Event_Chart {
58+
margin-bottom: 50px;
59+
}

0 commit comments

Comments
 (0)