Dashboard for ArangoLocalStorage operator

.dockerignore

@@ -5,4 +5,4 @@ docs
 pkg
 tools
 deps
-
+dashboard

dashboard/package.json

@@ -16,7 +16,7 @@
   "devDependencies": {
     "react-scripts": "1.1.4"
   },
-  "proxy": "https://192.168.140.208:8528",
+  "proxy": "https://192.168.140.211:8528",
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",

dashboard/src/App.js

@@ -1,11 +1,12 @@
 import React, { Component } from 'react';
 import ReactTimeout from 'react-timeout';
 import DeploymentOperator from './deployment/DeploymentOperator.js';
+import StorageOperator from './storage/StorageOperator.js';
 import NoOperator from './NoOperator.js';
 import Loading from './util/Loading.js';
-import api from './api/api.js';
+import api, { isUnauthorized } from './api/api.js';
 import { Container, Segment, Message } from 'semantic-ui-react';
-import './App.css';
+import { withAuth } from './auth/Auth.js';
 
 const PodInfoView = ({pod, namespace}) => (
   <Segment basic>
@@ -16,12 +17,18 @@ const PodInfoView = ({pod, namespace}) => (
   </Segment>
 );
 
-const OperatorsView = ({error, deployment, pod, namespace}) => {
-  const podInfoView = (<PodInfoView pod={pod} namespace={namespace}/>);
-  if (deployment) {
-    return (<DeploymentOperator podInfoView={podInfoView} error={error}/>);
-  }
-  return (<NoOperator podInfoView={podInfoView} error={error}/>);
+const OperatorsView = ({error, deployment, storage, pod, namespace}) => {
+  let Operator = NoOperator;
+  if (deployment)
+    Operator = DeploymentOperator;
+  else if (storage)
+    Operator = StorageOperator;
+  return (
+    <Operator
+      podInfoView={<PodInfoView pod={pod} namespace={namespace} />}
+      error={error}
+    />
+  );
 }
 
 const LoadingView = () => (
@@ -43,24 +50,33 @@ class App extends Component {
   reloadOperators = async() => {
     try {
       const operators = await api.get('/api/operators');
-      this.setState({operators, error: undefined});
+      this.setState({
+        operators,
+        error: undefined
+      });
     } catch (e) {
-      this.setState({error: e.message});
+      this.setState({
+        error: e.message
+      });
+      if (isUnauthorized(e)) {
+        this.props.doLogout();
+      }
     }
     this.props.setTimeout(this.reloadOperators, 10000);
   }
 
   render() {
     if (this.state.operators) {
-      return <OperatorsView 
+      return <OperatorsView
         error={this.state.error}
-        deployment={this.state.operators.deployment} 
-        pod={this.state.operators.pod} 
-        namespace={this.state.operators.namespace} 
-      />;
+        deployment={this.state.operators.deployment}
+        storage={this.state.operators.storage}
+        pod={this.state.operators.pod}
+        namespace={this.state.operators.namespace}
+        />;
     }
     return (<LoadingView/>);
   }
 }
 
-export default ReactTimeout(App);
+export default ReactTimeout(withAuth(App));

dashboard/src/NoOperator.js

@@ -1,22 +1,23 @@
 import React, { Component } from 'react';
-import logo from './logo.svg';
-import './App.css';
-import { Message } from 'semantic-ui-react';
+import { Container, Message, Modal, Segment } from 'semantic-ui-react';
 
 class NoOperator extends Component {
   render() {
     return (
-        <div className="App">
-          <header className="App-header">
-            <img src={logo} className="App-logo" alt="logo" />
-            <h1 className="App-title">Welcome to Kube-ArangoDB</h1>
-          </header>
-          <p className="App-intro">
-            There are no operators available yet.
-          </p>
-          {this.props.podInfoView}
-          {(this.props.error) ? <Message error content={this.props.error}/> : null}
-        </div>
+        <Container>
+          <Modal open>
+            <Modal.Header>Welcome to Kube-ArangoDB</Modal.Header>
+            <Modal.Content>
+              <Segment basic>
+                <Message color="orange">
+                  There are no operators available yet.
+                </Message>
+              </Segment>
+              {this.props.podInfoView}
+              {(this.props.error) ? <Message error content={this.props.error}/> : null}
+            </Modal.Content>
+          </Modal>
+        </Container>
     );
   }
 }

dashboard/src/api/api.js

@@ -1,13 +1,22 @@
+export function isUnauthorized(e) { 
+    return (e.status === 401);
+}
+
 export default {
     token: '',
 
     async decodeResults(result) {
         const decoded = await result.json();
-        if (result.status === 401) {
-            throw Error(decoded.error || "Unauthorized")
-        }
         if (result.status !== 200) {
-            throw Error(`Unexpected status ${result.status}`);
+            let message = decoded.error;
+            if (!message) {
+                if (result.status === 401) {
+                    message = "Unauthorized";
+                } else {
+                    message = `Unexpected status ${result.status}`;
+                }
+            }
+            throw Object.assign(new Error(message), { status: result.status });
         }
         return decoded;
     },

dashboard/src/auth/Auth.js

@@ -7,6 +7,18 @@ import { getSessionItem, setSessionItem } from "../util/Storage.js";
 
 const tokenSessionKey = "auth-token";
 
+
+// withAuth adds a doLogout property to the given component.
+export function withAuth(WrappedComponent) {
+  return function AuthAwareComponent(props) {
+      return (
+        <LogoutContext.Consumer>
+          {doLogout => <WrappedComponent {...props} doLogout={doLogout} />}
+        </LogoutContext.Consumer>
+      );
+  }
+}
+
 class Auth extends Component {
   state = {
     authenticated: false,

dashboard/src/auth/Login.js

@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import { Button, Container, Form, Icon, Message, Modal } from 'semantic-ui-react';
+import { css } from 'react-emotion';
 
 const LoginView = ({username, password, onUsernameChanged, onPasswordChanged, doLogin, error}) => (
   <Container>
@@ -12,6 +13,7 @@ const LoginView = ({username, password, onUsernameChanged, onPasswordChanged, do
         <label>Password</label>
         <input type="password" value={password} onChange={(e) => onPasswordChanged(e.target.value)}/>
       </Form.Field>
+      <Form.Button className={css`display:none`} type="submit" />
     </Form>
     {(error) ? <Message error content={error}/> : null}
   </Container>

dashboard/src/deployment/DeploymentDetails.js

@@ -1,10 +1,11 @@
 import ReactTimeout from 'react-timeout';
 import React, { Component } from 'react';
-import api from '../api/api.js';
+import api, { isUnauthorized } from '../api/api.js';
 import Loading from '../util/Loading.js';
 import MemberList from './MemberList.js';
 import styled from 'react-emotion';
 import { Loader } from 'semantic-ui-react';
+import { withAuth } from '../auth/Auth.js';
 
 const LoaderBox = styled('span')`
   float: right;
@@ -39,7 +40,9 @@ class DeploymentDetails extends Component {
 
   reloadDeployment = async() => {
     try {
-      this.setState({loading:true});
+      this.setState({
+        loading: true
+      });
       const result = await api.get(`/api/deployment/${this.props.name}`);
       this.setState({
         deployment: result,
@@ -51,6 +54,10 @@ class DeploymentDetails extends Component {
         loading: false,
         error: e.message
       });
+      if (isUnauthorized(e)) {
+        this.props.doLogout();
+        return;
+      }
     }
     this.props.setTimeout(this.reloadDeployment, 5000);
   }
@@ -65,8 +72,8 @@ class DeploymentDetails extends Component {
         <LoaderBox><Loader size="mini" active={this.state.loading} inline/></LoaderBox>
         <MemberGroupsView memberGroups={d.member_groups} namespace={d.namespace}/>
       </div>
-    );
+      );
   }
 }
 
-export default ReactTimeout(DeploymentDetails);
+export default ReactTimeout(withAuth(DeploymentDetails));

dashboard/src/deployment/DeploymentList.js

@@ -1,11 +1,12 @@
 import { Icon, Loader, Popup, Table } from 'semantic-ui-react';
 import { Link } from "react-router-dom";
-import api from '../api/api.js';
+import api, { isUnauthorized } from '../api/api.js';
 import CommandInstruction from '../util/CommandInstruction.js';
 import Loading from '../util/Loading.js';
 import React, { Component } from 'react';
 import ReactTimeout from 'react-timeout';
 import styled from 'react-emotion';
+import { withAuth } from '../auth/Auth.js';
 
 const LoaderBox = styled('span')`
   float: right;
@@ -172,6 +173,10 @@ class DeploymentList extends Component {
       });
     } catch (e) {
       this.setState({error: e.message, loading: false});
+      if (isUnauthorized(e)) {
+        this.props.doLogout();
+        return;
+      }
     }
     this.props.setTimeout(this.reloadDeployments, 5000);
   }
@@ -188,4 +193,4 @@ class DeploymentList extends Component {
   }
 }
 
-export default ReactTimeout(DeploymentList);
+export default ReactTimeout(withAuth(DeploymentList));

dashboard/src/deployment/DeploymentOperator.js

@@ -23,7 +23,7 @@ const StyledContentBox = styled('div')`
 const ListView = () => (
   <div>
     <Header dividing>
-      ArangoDeployments
+      ArangoDeployment resources
     </Header>
     <DeploymentList/>
   </div>