From 9a910701fa831a3d9a56b80abe14416416e34ca3 Mon Sep 17 00:00:00 2001
From: Julius Volz <julius.volz@gmail.com>
Date: Sun, 3 Feb 2019 22:47:56 +0100
Subject: [PATCH] Add metrics fetching and stuff

Signed-off-by: Julius Volz <julius.volz@gmail.com>
---
 package-lock.json | 41 ++++++++++++++------
 src/App.js        | 95 +++++++++++++++++++++++++++++++++++++++--------
 2 files changed, 109 insertions(+), 27 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index e0e4af97cf..d9607f8a23 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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
         }
       }
     },
diff --git a/src/App.js b/src/App.js
index 0e77d4bda0..98927cdb06 100755
--- a/src/App.js
+++ b/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>
     );