Merged in master, various small fixes

Author: ewoutp

.dockerignore

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

dashboard/assets.go

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

dashboard/package.json

@@ -1,11 +1,14 @@
+import { Container, Segment, Menu, Message } from 'semantic-ui-react';
 import React, { Component } from 'react';
 import ReactTimeout from 'react-timeout';
-import DeploymentOperator from './deployment/DeploymentOperator.js';
-import NoOperator from './NoOperator.js';
-import Loading from './util/Loading.js';
-import api from './api/api.js';
-import { Container, Segment, Message } from 'semantic-ui-react';
-import './App.css';
+
+import { withAuth } from './auth/Auth';
+import api, { isUnauthorized } from './api/api';
+import DeploymentOperator from './deployment/DeploymentOperator';
+import DeploymentReplicationOperator from './replication/DeploymentReplicationOperator';
+import Loading from './util/Loading';
+import NoOperator from './NoOperator';
+import StorageOperator from './storage/StorageOperator';
 
 const PodInfoView = ({pod, namespace}) => (
   <Segment basic>
@@ -16,14 +19,43 @@ 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}/>);
+const OperatorsView = ({error, deployment, deploymentReplication, storage, pod, namespace, otherOperators}) => {
+  let commonMenuItems = otherOperators.map((item) => <Menu.Item><a href={item.url}>{operatorType2Name(item.type)}</a></Menu.Item>);
+  if (commonMenuItems.length > 0) {
+    commonMenuItems = (<Menu.Item>
+      <Menu.Header>Other operators</Menu.Header>
+      <Menu.Menu>{commonMenuItems}</Menu.Menu>
+    </Menu.Item>);
   }
-  return (<NoOperator podInfoView={podInfoView} error={error}/>);
+  let Operator = NoOperator;
+  if (deployment)
+    Operator = DeploymentOperator;
+  else if (deploymentReplication) 
+    Operator = DeploymentReplicationOperator;
+  else if (storage)
+    Operator = StorageOperator;
+  return (
+    <Operator
+      podInfoView={<PodInfoView pod={pod} namespace={namespace} />}
+      commonMenuItems={commonMenuItems}
+      error={error}
+    />
+  );
 }
 
+const operatorType2Name = (oType) => {
+  switch (oType) {
+    case "deployment":
+      return "Deployments";
+    case "deployment_replication":
+      return "Deployment replications";
+    case "storage":
+      return "Storage";
+    default:
+      return "";
+  }
+};
+
 const LoadingView = () => (
   <Container>
     <Loading/>
@@ -43,24 +75,35 @@ 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}
+        deploymentReplication={this.state.operators.deployment_replication}
+        storage={this.state.operators.storage}
+        otherOperators={this.state.operators.other || []}
+        pod={this.state.operators.pod}
+        namespace={this.state.operators.namespace}
+        />;
     }
     return (<LoadingView/>);
   }
 }
 
-export default ReactTimeout(App);
+export default ReactTimeout(withAuth(App));

dashboard/src/App.css

@@ -1,24 +1,21 @@
-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';
+import React from '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">
+const NoOperator = () => (
+  <Container>
+    <Modal open>
+      <Modal.Header>Welcome to Kube-ArangoDB</Modal.Header>
+      <Modal.Content>
+        <Segment basic>
+          <Message color="orange">
             There are no operators available yet.
-          </p>
-          {this.props.podInfoView}
-          {(this.props.error) ? <Message error content={this.props.error}/> : null}
-        </div>
-    );
-  }
-}
+          </Message>
+        </Segment>
+        {this.props.podInfoView}
+        {(this.props.error) ? <Message error content={this.props.error}/> : null}
+      </Modal.Content>
+    </Modal>
+  </Container>
+);
 
 export default NoOperator;

dashboard/src/App.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/App.test.js

@@ -1,12 +1,24 @@
 import React, { Component } from 'react';
-import api from '../api/api.js';
-import Login from './Login.js';
-import Loading from '../util/Loading.js';
-import LogoutContext from './LogoutContext.js';
-import { getSessionItem, setSessionItem } from "../util/Storage.js";
+
+import { getSessionItem, setSessionItem } from '../util/Storage';
+import api from '../api/api';
+import Loading from '../util/Loading';
+import Login from './Login';
+import LogoutContext from './LogoutContext';
 
 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/NoOperator.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';
+import React, { Component } from 'react';
 
 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>