mirror of
https://github.com/prometheus/prometheus.git
synced 2025-03-05 20:59:13 -08:00
Add metrics fetching and stuff
Signed-off-by: Julius Volz <julius.volz@gmail.com>
This commit is contained in:
Julius Volz
parent
3bd2fdaa97
commit
9a910701fa
41
package-lock.json
generated
41
package-lock.json
generated
|
|
@ -5660,7 +5660,8 @@
|
|||
},
|
||||
"ansi-regex": {
|
||||
"version": "2.1.1",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"aproba": {
|
||||
"version": "1.2.0",
|
||||
|
|
@ -5678,11 +5679,13 @@
|
|||
},
|
||||
"balanced-match": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"brace-expansion": {
|
||||
"version": "1.1.11",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"balanced-match": "^1.0.0",
|
||||
"concat-map": "0.0.1"
|
||||
|
|
@ -5695,15 +5698,18 @@
|
|||
},
|
||||
"code-point-at": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"concat-map": {
|
||||
"version": "0.0.1",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"console-control-strings": {
|
||||
"version": "1.1.0",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"core-util-is": {
|
||||
"version": "1.0.2",
|
||||
|
|
@ -5806,7 +5812,8 @@
|
|||
},
|
||||
"inherits": {
|
||||
"version": "2.0.3",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"ini": {
|
||||
"version": "1.3.5",
|
||||
|
|
@ -5816,6 +5823,7 @@
|
|||
"is-fullwidth-code-point": {
|
||||
"version": "1.0.0",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"number-is-nan": "^1.0.0"
|
||||
}
|
||||
|
|
@ -5828,17 +5836,20 @@
|
|||
"minimatch": {
|
||||
"version": "3.0.4",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"brace-expansion": "^1.1.7"
|
||||
}
|
||||
},
|
||||
"minimist": {
|
||||
"version": "0.0.8",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"minipass": {
|
||||
"version": "2.2.4",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"safe-buffer": "^5.1.1",
|
||||
"yallist": "^3.0.0"
|
||||
|
|
@ -5855,6 +5866,7 @@
|
|||
"mkdirp": {
|
||||
"version": "0.5.1",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"minimist": "0.0.8"
|
||||
}
|
||||
|
|
@ -5927,7 +5939,8 @@
|
|||
},
|
||||
"number-is-nan": {
|
||||
"version": "1.0.1",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"object-assign": {
|
||||
"version": "4.1.1",
|
||||
|
|
@ -5937,6 +5950,7 @@
|
|||
"once": {
|
||||
"version": "1.4.0",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"wrappy": "1"
|
||||
}
|
||||
|
|
@ -6012,7 +6026,8 @@
|
|||
},
|
||||
"safe-buffer": {
|
||||
"version": "5.1.1",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"safer-buffer": {
|
||||
"version": "2.1.2",
|
||||
|
|
@ -6042,6 +6057,7 @@
|
|||
"string-width": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"code-point-at": "^1.0.0",
|
||||
"is-fullwidth-code-point": "^1.0.0",
|
||||
|
|
@ -6059,6 +6075,7 @@
|
|||
"strip-ansi": {
|
||||
"version": "3.0.1",
|
||||
"bundled": true,
|
||||
"optional": true,
|
||||
"requires": {
|
||||
"ansi-regex": "^2.0.0"
|
||||
}
|
||||
|
|
@ -6097,11 +6114,13 @@
|
|||
},
|
||||
"wrappy": {
|
||||
"version": "1.0.2",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
},
|
||||
"yallist": {
|
||||
"version": "3.0.2",
|
||||
"bundled": true
|
||||
"bundled": true,
|
||||
"optional": true
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
|||
95
src/App.js
95
src/App.js
|
|
@ -1,5 +1,20 @@
|
|||
import React, { Component } from 'react';
|
||||
import { Alert, Button, Col, Container, InputGroup, InputGroupAddon, Input, Nav, NavItem, NavLink, Row, TabContent, TabPane, Table } from 'reactstrap';
|
||||
import {
|
||||
Alert,
|
||||
Button,
|
||||
Col,
|
||||
Container,
|
||||
InputGroup,
|
||||
InputGroupAddon,
|
||||
Input,
|
||||
Nav,
|
||||
NavItem,
|
||||
NavLink,
|
||||
Row,
|
||||
TabContent,
|
||||
TabPane,
|
||||
Table
|
||||
} from 'reactstrap';
|
||||
import ReactFlot from 'react-flot';
|
||||
import '../node_modules/react-flot/flot/jquery.flot.time.min';
|
||||
import './App.css';
|
||||
|
|
@ -19,6 +34,7 @@ class PanelList extends Component {
|
|||
super(props);
|
||||
this.state = {
|
||||
panels: [],
|
||||
metrics: [],
|
||||
};
|
||||
this.key = 0;
|
||||
|
||||
|
|
@ -28,6 +44,24 @@ class PanelList extends Component {
|
|||
|
||||
componentDidMount() {
|
||||
this.addPanel();
|
||||
|
||||
fetch("http://demo.robustperception.io:9090/api/v1/label/__name__/values")
|
||||
.then(resp => {
|
||||
if (resp.ok) {
|
||||
return resp.json();
|
||||
} else {
|
||||
console.log(resp);
|
||||
throw new Error('Unexpected response status when fetching metric names: ' + resp.statusText); // TODO extract error
|
||||
}
|
||||
})
|
||||
.then(json =>
|
||||
this.setState({
|
||||
metrics: json.data,
|
||||
})
|
||||
)
|
||||
.catch(error => {
|
||||
this.setState({error})
|
||||
});
|
||||
}
|
||||
|
||||
getKey() {
|
||||
|
|
@ -37,7 +71,7 @@ class PanelList extends Component {
|
|||
addPanel() {
|
||||
const panels = this.state.panels.slice();
|
||||
const key = this.getKey();
|
||||
panels.push(<Panel key={key} removePanel={() => this.removePanel(key)}/>);
|
||||
panels.push({key: key});
|
||||
this.setState({panels: panels});
|
||||
}
|
||||
|
||||
|
|
@ -51,7 +85,9 @@ class PanelList extends Component {
|
|||
render() {
|
||||
return (
|
||||
<>
|
||||
{this.state.panels}
|
||||
{this.state.panels.map(p =>
|
||||
<Panel key={p.key} removePanel={() => this.removePanel(p.key)} metrics={this.state.metrics}/>
|
||||
)}
|
||||
<Button color="primary" onClick={this.addPanel}>Add Panel</Button>
|
||||
</>
|
||||
);
|
||||
|
|
@ -63,7 +99,7 @@ class Panel extends Component {
|
|||
super(props);
|
||||
|
||||
this.state = {
|
||||
expr: '',
|
||||
expr: 'rate(node_cpu_seconds_total[1m])',
|
||||
type: 'table', // TODO enum?
|
||||
range: 3600,
|
||||
endTime: null,
|
||||
|
|
@ -78,6 +114,16 @@ class Panel extends Component {
|
|||
this.handleExpressionChange = this.handleExpressionChange.bind(this);
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps, prevState) {
|
||||
if (prevState.type !== this.state.type) {
|
||||
this.execute();
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.execute();
|
||||
}
|
||||
|
||||
execute() {
|
||||
if (this.state.expr === "") {
|
||||
return;
|
||||
|
|
@ -85,7 +131,7 @@ class Panel extends Component {
|
|||
|
||||
this.setState({loading: true});
|
||||
|
||||
let url = new URL('http://localhost:9090/');//window.location.href);
|
||||
let url = new URL('http://demo.robustperception.io:9090/');//window.location.href);
|
||||
let params = {
|
||||
'query': this.state.expr,
|
||||
};
|
||||
|
|
@ -119,7 +165,7 @@ class Panel extends Component {
|
|||
throw new Error('Unexpected response status: ' + resp.statusText);
|
||||
}
|
||||
})
|
||||
.then(json =>
|
||||
.then(json =>
|
||||
this.setState({
|
||||
error: null,
|
||||
data: json.data,
|
||||
|
|
@ -144,6 +190,9 @@ class Panel extends Component {
|
|||
<Row>
|
||||
<Col>
|
||||
<ExpressionInput value={this.state.expr} onChange={this.handleExpressionChange} execute={this.execute}/>
|
||||
{/*<Input type="select" name="selectMetric">
|
||||
{this.props.metrics.map(m => <option key={m}>{m}</option>)}
|
||||
</Input>*/}
|
||||
</Col>
|
||||
</Row>
|
||||
<Row>
|
||||
|
|
@ -177,17 +226,22 @@ class Panel extends Component {
|
|||
</NavItem>
|
||||
</Nav>
|
||||
<TabContent activeTab={this.state.type}>
|
||||
// TODO: Only render this pane when it's selected.
|
||||
<TabPane tabId="graph">
|
||||
<GraphControls
|
||||
range={this.state.range}
|
||||
endTime={this.state.endTime}
|
||||
step={this.state.step}
|
||||
/>
|
||||
<Graph data={this.state.data} />
|
||||
{this.state.type === 'graph' &&
|
||||
<>
|
||||
<GraphControls
|
||||
range={this.state.range}
|
||||
endTime={this.state.endTime}
|
||||
step={this.state}
|
||||
/>
|
||||
<Graph data={this.state.data} />
|
||||
</>
|
||||
}
|
||||
</TabPane>
|
||||
<TabPane tabId="table">
|
||||
<DataTable data={this.state.data} />
|
||||
{this.state.type === 'table' &&
|
||||
<DataTable data={this.state.data} />
|
||||
}
|
||||
</TabPane>
|
||||
</TabContent>
|
||||
</Col>
|
||||
|
|
@ -267,7 +321,7 @@ function DataTable(props) {
|
|||
break;
|
||||
default:
|
||||
// TODO
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
|
|
@ -281,6 +335,9 @@ function DataTable(props) {
|
|||
|
||||
class GraphControls extends Component {
|
||||
// TODO
|
||||
render() {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
var graphID = 0;
|
||||
|
|
@ -340,7 +397,13 @@ class Graph extends Component {
|
|||
}
|
||||
return (
|
||||
<div>
|
||||
<ReactFlot id={getGraphID()} data={this.getData()} options={this.getOptions()} width="1900px" height="500px" />
|
||||
<ReactFlot
|
||||
id={getGraphID().toString()}
|
||||
data={this.getData()}
|
||||
options={this.getOptions()}
|
||||
width="1900px"
|
||||
height="500px"
|
||||
/>
|
||||
<div ref={ref => { this.legend = ref; }}></div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in a new issue