Skip to content

Commit 83d19e5

Browse files
mdtaggmdtagg
authored
Merge pull request #19 from oslabs-beta/ted-modular
Ted modular
2 parents 9703c7d + 3fda80e commit 83d19e5

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

50 files changed

+876
-1046
lines changed

‎app/App.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useState } from 'react';
22
import Splash from './components/Splash/Splash';
3-
import DashboardContainer from './containers/DashboardContainer';
4-
import './stylesheets/scrollBar.scss';
3+
import DashboardContainer from './containers/DashboardContainer/DashboardContainer';
4+
import './index.scss';
55

66

77
// this is the fitness gram pacer test

‎app/charts/GrafanaEventChart.tsx

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

‎app/charts/GrafanaEventChart/GrafanaEventChart.tsx

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
import React, { useState } from 'react';
2+
import { all, solo as soloStyle } from '../sizeSwitch';
3+
import './styles.scss';
4+
5+
interface EventChartProps {
6+
metricName: string;
7+
token: string;
8+
}
9+
10+
type TimeFrame = '5m' | '15m' | '30m' | '1h' | '2h' | '1d' | '2d';
11+
12+
/**
13+
* @params {EventChartProps} props - the props object containing relevant data.
14+
* @desc Handles k8s and container metrics. Memoized component to generate event chart with formatted data
15+
* @returns {JSX.Element} The JSX element with the event chart.
16+
*/
17+
const GrafanaEventChart: React.FC<EventChartProps> = React.memo(props => {
18+
const { metricName, token } = props;
19+
const [graphType, setGraphType] = useState('timeseries');
20+
const [type, setType] = useState(['timeserie']);
21+
const [timeFrame, setTimeFrame] = useState('5m');
22+
23+
// console.log("graphType: ", graphType)
24+
// console.log("type: ", type)
25+
// console.log("inside GrafanaEventChart")
26+
27+
// console.log("metricName: ", metricName)
28+
let uid = metricName.replace(/.*\/.*\//g, '');
29+
if (uid.length >= 40) {
30+
uid = metricName.slice(metricName.length - 39);
31+
}
32+
33+
let parsedName = metricName.replace(/.*\/.*\//g, '');
34+
// console.log("uid: ", uid)
35+
// console.log("parsedName: ", parsedName)
36+
37+
const handleSelectionChange = async event => {
38+
setType([...type, graphType]);
39+
await fetch('http://localhost:1111/api/updateDashboard', {
40+
method: 'POST',
41+
headers: {
42+
'Content-Type': 'application/json',
43+
},
44+
body: JSON.stringify({ graphType: event.target.value, metric: metricName, token: token }),
45+
});
46+
console.log('event.target.value: ', event.target.value);
47+
setGraphType(event.target.value);
48+
};
49+
50+
return (
51+
<div className="chart" id="Grafana_Event_Chart">
52+
<h2>{`${parsedName} --- ${graphType}`}</h2>
53+
<div id="selection">
54+
<label htmlFor="timeFrame">Graph Type: </label>
55+
<select name="timeFrame" id="timeFrame" onChange={handleSelectionChange}>
56+
<option value="timeseries">Time Series</option>
57+
<option value="barchart">Bar Chart</option>
58+
<option value="stat">Stat</option>
59+
<option value="gauge">Gauge</option>
60+
<option value="table">Table</option>
61+
<option value="histogram">Histogram</option>
62+
<option value="piechart">Pie Chart</option>
63+
<option value="alertlist">Alert</option>
64+
</select>
65+
66+
<label
67+
htmlFor="graphType"
68+
style={{
69+
marginLeft: '20px',
70+
}}
71+
>
72+
{' '}
73+
Time Frame:{' '}
74+
</label>
75+
<select
76+
name="graphType"
77+
id="graphType"
78+
onChange={e => setTimeFrame(e.target.value as TimeFrame)}
79+
>
80+
<option value={'5m'}>5 minutes</option>
81+
<option value={'15m'}>15 minutes</option>
82+
<option value={'30m'}>30 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+
</select>
88+
</div>
89+
{/* create chart using grafana iframe tag*/}
90+
{/* {type[type.length - 1] !== graphType ?
91+
<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>
92+
: <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>} */}
93+
{graphType === 'timeseries'
94+
? TimeSeries(uid, parsedName, graphType, timeFrame)
95+
: graphType === 'barchart'
96+
? BarChart(uid, parsedName, graphType, timeFrame)
97+
: graphType === 'stat'
98+
? Stat(uid, parsedName, graphType, timeFrame)
99+
: graphType === 'gauge'
100+
? Gauge(uid, parsedName, graphType, timeFrame)
101+
: graphType === 'table'
102+
? Table(uid, parsedName, graphType, timeFrame)
103+
: graphType === 'histogram'
104+
? Histogram(uid, parsedName, graphType, timeFrame)
105+
: graphType === 'piechart'
106+
? PieChart(uid, parsedName, graphType, timeFrame)
107+
: graphType === 'alertlist'
108+
? AlertList(uid, parsedName, graphType, timeFrame)
109+
: null}
110+
</div>
111+
);
112+
});
113+
114+
const TimeSeries = (uid, parsedName, graphType, timeFrame) => {
115+
return (
116+
<>
117+
<iframe
118+
src={`http://localhost:32000/d-solo/${uid}/${parsedName}?orgId=1&refresh=10s&from=now-${timeFrame}&to=now&panelId=1&${graphType}`}
119+
width="800"
120+
height="500"
121+
></iframe>
122+
<hr />
123+
</>
124+
);
125+
};
126+
127+
const BarChart = (uid, parsedName, graphType, timeFrame) => {
128+
return (
129+
<iframe
130+
src={`http://localhost:32000/d-solo/${uid}/${parsedName}?orgId=1&refresh=10s&from=now-${timeFrame}&to=now&panelId=1${graphType}`}
131+
width="800"
132+
height="500"
133+
></iframe>
134+
);
135+
};
136+
137+
const Stat = (uid, parsedName, graphType, timeFrame) => {
138+
return (
139+
<iframe
140+
src={`http://localhost:32000/d-solo/${uid}/${parsedName}?orgId=1&refresh=10s&from=now-${timeFrame}&to=now&panelId=1${graphType}`}
141+
width="800"
142+
height="500"
143+
></iframe>
144+
);
145+
};
146+
147+
const Gauge = (uid, parsedName, graphType, timeFrame) => {
148+
return (
149+
<iframe
150+
src={`http://localhost:32000/d-solo/${uid}/${parsedName}?orgId=1&refresh=10s&from=now-${timeFrame}&to=now&panelId=1${graphType}`}
151+
width="800"
152+
height="500"
153+
></iframe>
154+
);
155+
};
156+
157+
const Table = (uid, parsedName, graphType, timeFrame) => {
158+
return (
159+
<iframe
160+
src={`http://localhost:32000/d-solo/${uid}/${parsedName}?orgId=1&refresh=10s&from=now-${timeFrame}&to=now&panelId=1${graphType}`}
161+
width="800"
162+
height="500"
163+
></iframe>
164+
);
165+
};
166+
167+
const Histogram = (uid, parsedName, graphType, timeFrame) => {
168+
return (
169+
<iframe
170+
src={`http://localhost:32000/d-solo/${uid}/${parsedName}?orgId=1&refresh=10s&from=now-${timeFrame}&to=now&panelId=1${graphType}`}
171+
width="800"
172+
height="500"
173+
></iframe>
174+
);
175+
};
176+
177+
const PieChart = (uid, parsedName, graphType, timeFrame) => {
178+
return (
179+
<iframe
180+
src={`http://localhost:32000/d-solo/${uid}/${parsedName}?orgId=1&refresh=10s&from=now-${timeFrame}&to=now&panelId=1${graphType}`}
181+
width="800"
182+
height="500"
183+
></iframe>
184+
);
185+
};
186+
187+
const AlertList = (uid, parsedName, graphType, timeFrame) => {
188+
return (
189+
<iframe
190+
src={`http://localhost:32000/d-solo/${uid}/${parsedName}?orgId=1&refresh=10s&from=now-${timeFrame}&to=now&panelId=1${graphType}`}
191+
width="800"
192+
height="500"
193+
></iframe>
194+
);
195+
};
196+
export default GrafanaEventChart;

‎app/stylesheets/GrafanaGraph.scss renamed to ‎app/charts/GrafanaEventChart/styles.scss

File renamed without changes.

‎app/charts/RequestTypesChart.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useContext } from 'react';
22
import Plot from 'react-plotly.js';
33
import { CommsContext } from '../context/CommsContext';
4-
import '../stylesheets/constants.scss';
4+
import '../index.scss';
55

66
const RequestTypesChart: React.FC = React.memo(() => {
77
const { commsData } = useContext(CommsContext);

‎app/components/About/styles.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@import '../../stylesheets/constants.scss';
1+
@import '../../index.scss';
22

33
.about {
44
min-width: 421px;
@@ -72,4 +72,4 @@
7272

7373
p {
7474
padding-left: 10px;
75-
}
75+
}

‎app/components/ApplicationsCard/styles.scss

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
1-
2-
@import '../../stylesheets/constants.scss';
1+
@import '../../index.scss';
32

43
.card {
54
display: flex;
@@ -66,7 +65,6 @@
6665
}
6766
}
6867

69-
7068
#card-MongoDB {
7169
&:hover .databaseIconHeader {
7270
visibility: hidden;
@@ -245,4 +243,4 @@
245243
#serviceName {
246244
font-size: 11px;
247245
margin-top: 6px;
248-
}
246+
}

0 commit comments

Comments
 (0)