Merge branch 'feature/dashboard' into feature/dashboard-storage

Author: ewoutp

dashboard/src/api/api.js

@@ -1,5 +1,5 @@
-class Api {
-    token = '';
+export default {
+    token: '',
 
     async decodeResults(result) {
         const decoded = await result.json();
@@ -10,7 +10,7 @@ class Api {
             throw Error(`Unexpected status ${result.status}`);
         }
         return decoded;
-    }
+    },
 
     // apiGet performs a GET request on the API with given local URL.
     // The result is decoded from JSON and returned.
@@ -23,7 +23,7 @@ class Api {
         }
         const result = await fetch(localURL, {headers});
         return this.decodeResults(result);
-    }
+    },
 
     // apiPost performs a POST request on the API with given local URL and given data.
     // The result is decoded from JSON and returned.
@@ -42,8 +42,4 @@ class Api {
         });
         return this.decodeResults(result);
     }
-}
-
-var api = new Api();
-
-export default api;
+};

dashboard/src/auth/Login.js

@@ -2,16 +2,16 @@ 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, usernameChanged, passwordChanged, doLogin, error}) => (
+const LoginView = ({username, password, onUsernameChanged, onPasswordChanged, doLogin, error}) => (
   <Container>
     <Form onSubmit={doLogin}>
       <Form.Field>
         <label>Name</label>
-        <input focus="true" value={username} onChange={(e) => usernameChanged(e.target.value)}/>
+        <input focus="true" value={username} onChange={(e) => onUsernameChanged(e.target.value)}/>
       </Form.Field>
       <Form.Field>
         <label>Password</label>
-        <input type="password" value={password} onChange={(e) => passwordChanged(e.target.value)}/>
+        <input type="password" value={password} onChange={(e) => onPasswordChanged(e.target.value)}/>
       </Form.Field>
       <Form.Button className={css`display:none`} type="submit" />
     </Form>
@@ -38,8 +38,8 @@ class Login extends Component {
             error={this.props.error}
             username={this.state.username}
             password={this.state.password}
-            usernameChanged={(v) => this.setState({username:v})}
-            passwordChanged={(v) => this.setState({password:v})}
+            onUsernameChanged={(v) => this.setState({username:v})}
+            onPasswordChanged={(v) => this.setState({password:v})}
             doLogin={this.handleLogin}
           />
         </Modal.Content>

dashboard/src/deployment/DeploymentDetails.js

@@ -19,7 +19,7 @@ const LoaderBox = styled('span')`
 const MemberGroupsView = ({memberGroups, namespace}) => (
   <div>
     {memberGroups.map((item) => <MemberList 
-      key={`server-group-${item.group}`}
+      key={item.group}
       group={item.group}
       members={item.members}
       namespace={namespace}

dashboard/src/deployment/DeploymentList.js

@@ -152,8 +152,8 @@ function getStateColorDescription(stateColor) {
 
 class DeploymentList extends Component {
   state = {
-    items: undefined,
-    error: undefined,
+    items: null,
+    error: null,
     loading: true
   };
 
@@ -168,7 +168,7 @@ class DeploymentList extends Component {
       this.setState({
         items: result.deployments,
         loading: false,
-        error: undefined
+        error: null
       });
     } catch (e) {
       this.setState({error: e.message, loading: false});