diff --git a/client/src/views/prometheusgraph.tsx b/client/src/views/prometheusgraph.tsx index 36abb22..49cbb9d 100644 --- a/client/src/views/prometheusgraph.tsx +++ b/client/src/views/prometheusgraph.tsx @@ -1,6 +1,6 @@ import React from 'react'; -import Base from '../components/base'; import {XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries} from 'react-vis'; +import Base from '../components/base'; const {hostname} = window.location; @@ -26,26 +26,24 @@ export default class PrometheusGraph extends Base { const url = `${BASE_HTTP_URL}/api/v1/query_range`; this.setState((prevState => ({ ...prevState, - data: new Map() + data: new Map(), }))); for (let i = 0; i < GRAPH_QUERIES.length; i++) { const query = GRAPH_QUERIES[i]; const params = { query, start: (Date.now() / 1000 - 60 * 60).toString(), - end: (Date.now() / 1000 ).toString(), // One hour range + end: (Date.now() / 1000).toString(), // One hour range step: '1', }; fetch(`${url}?${new URLSearchParams(params).toString()}`) - .then((result) => result.json()) + .then(result => result.json()) .then((json) => { - const json_data = json.data - const graph_data : Array> = json_data.result[0].values.map((value: any) => { - return {x: value[0], y: +value[1]} - }) - this.state.data.set(query, graph_data); - this.setState((prevState) => ({ - ...prevState + const jsonData = json.data; + const graphData : Array> = jsonData.result[0].values.map((value: any) => ({x: value[0], y: +value[1]})); + this.state.data.set(query, graphData); + this.setState(prevState => ({ + ...prevState, })); }); } @@ -53,13 +51,12 @@ export default class PrometheusGraph extends Base { render() { return
- {this.state?.data && GRAPH_QUERIES.map((value, i) => { + {this.state?.data && GRAPH_QUERIES.map((value) => { if (!this.state.data.get(value)) { - return
Pending...
+ return
Pending...
; } - console.log(this.state.data) - return this.state.data.get(value) && -
+ return this.state.data.get(value) + &&
{ -
+
; })}
;