From 946f9af73332c890e0ebb98bc179287892f6a402 Mon Sep 17 00:00:00 2001
From: sveisvei <sveinung.rosaker@gmail.com>
Date: Fri, 9 Dec 2016 14:02:36 +0100
Subject: [PATCH] applications

---
 .../application/application-edit-component.js | 111 +++++++++++++-----
 .../application/application-edit-container.js |   7 +-
 .../application/application-list-component.js |  21 ++--
 .../component/feature/view-edit-container.jsx |  17 ++-
 frontend/src/data/applications-api.js         |  12 ++
 frontend/src/store/application/actions.js     |  10 +-
 6 files changed, 131 insertions(+), 47 deletions(-)

diff --git a/frontend/src/component/application/application-edit-component.js b/frontend/src/component/application/application-edit-component.js
index 31e63dd682..2c2c73ebcf 100644
--- a/frontend/src/component/application/application-edit-component.js
+++ b/frontend/src/component/application/application-edit-component.js
@@ -1,10 +1,31 @@
-import React, { PureComponent } from 'react';
+/* eslint react/no-multi-comp:off */
+import React, { Component, PureComponent } from 'react';
 
 import { Link } from 'react-router';
-import { Grid, Cell } from 'react-mdl';
+import { Grid, Cell, List, ListItem, ListItemContent, Textfield, Icon } from 'react-mdl';
+
+
+class StatefulTextfield extends Component {
+    constructor (props) {
+        super(props);
+        this.state = { value: props.value };
+        this.setValue = function setValue (e) {
+            this.setState({ value: e.target.value });
+        }.bind(this);
+    }
+
+    render () {
+        return (<Textfield label={this.props.label}
+            floatingLabel
+            rows={this.props.rows}
+            value={this.state.value}
+            onChange={this.setValue}
+            onBlur={this.props.onBlur} />
+        );
+    }
+}
 
 class ClientStrategies extends PureComponent {
-
     componentDidMount () {
         this.props.fetchApplication(this.props.appName);
     }
@@ -13,44 +34,76 @@ class ClientStrategies extends PureComponent {
         if (!this.props.application) {
             return <div>Loading application info...</div>;
         }
+        const {
+            application,
+            storeApplicationMetaData,
+        } = this.props;
         const {
             appName,
             instances,
             strategies,
             seenToggles,
-        } = this.props.application;
+            data = {},
+        } = application;
 
         return (
             <div>
-                <h5>{appName}</h5>
+                <h5><Icon name={data.icon || 'apps'} /> {appName}</h5>
+                {data.description && <p>{data.description} </p>}
                 <Grid>
-                    <Cell col={4}>
-                        <h6>Instances</h6>
-                        <ol className="demo-list-item mdl-list">
-                        {instances.map(({ instanceId }, i) => <li className="mdl-list__item" key={i}>{instanceId}</li>)}
-                        </ol>
-                    </Cell>
-                    <Cell col={4}>
-                        <h6>Implemented strategies</h6>
-                        <ol className="demo-list-item mdl-list">
-                            {strategies.map((name, i) => (
-                                <li className="mdl-list__item" key={`${name}-${i}`}>
-                                    <Link to={`/strategies/view/${name}`}>
+                    <Cell col={3}>
+                        <h6> Toggles</h6>
+                        <hr />
+                        <List>
+                        {seenToggles.map((name, i) =>
+                            <ListItem key={i}>
+                                <ListItemContent icon="check box">
+                                    <Link to={`/features/edit/${name}`}>
                                         {name}
                                     </Link>
-                                </li>
-                            ))}
-                        </ol>
+                                </ListItemContent>
+                        </ListItem>)}
+                        </List>
                     </Cell>
-                    <Cell col={4}>
-                        <h6>Toggles</h6>
-                        <ol className="demo-list-item mdl-list">
-                        {seenToggles.map((name, i) => <li className="mdl-list__item"  key={i}>
-                            <Link to={`/features/edit/${name}`}>
-                                {name}
-                            </Link>
-                        </li>)}
-                        </ol>
+                    <Cell col={3}>
+                        <h6>Implemented strategies</h6>
+                        <hr />
+                        <List>
+                            {strategies.map((name, i) => (
+                                <ListItem key={`${name}-${i}`}>
+                                    <ListItemContent icon="toc">
+                                        <Link to={`/strategies/view/${name}`}>
+                                            {name}
+                                        </Link>
+                                    </ListItemContent>
+                                </ListItem>
+                            ))}
+                        </List>
+                    </Cell>
+                    <Cell col={6}>
+                        <h6>{instances.length} Instances connected</h6>
+                        <hr />
+                        <List>
+                        {instances.map(({ instanceId, clientIp, lastSeen }, i) => (
+                            <ListItem key={i} twoLine>
+                                <ListItemContent icon="timeline" subtitle={<span>{clientIp} last seen at <small>{new Date(lastSeen).toLocaleString('nb-NO')}</small></span>}>
+                                    {instanceId}
+                                </ListItemContent>
+                            </ListItem>
+                        ))}
+                        </List>
+                    </Cell>
+
+                    <Cell col={12}>
+                        <h5>Edit app meta data</h5>
+                    </Cell>
+                    <Cell col={6}>
+                        <StatefulTextfield value={data.url} label="URL" onBlur={(e) => storeApplicationMetaData(appName, 'url', e.target.value)} /><br />
+                        <StatefulTextfield value={data.description} label="Description" rows={5} onBlur={(e) => storeApplicationMetaData(appName, 'description', e.target.value)} />
+                    </Cell>
+                    <Cell col={6}>
+                        <StatefulTextfield value={data.icon} label="Select icon" onBlur={(e) => storeApplicationMetaData(appName, 'icon', e.target.value)} />
+                        <StatefulTextfield value={data.color} label="Select color" onBlur={(e) => storeApplicationMetaData(appName, 'color', e.target.value)} />
                     </Cell>
                 </Grid>
             </div>
diff --git a/frontend/src/component/application/application-edit-container.js b/frontend/src/component/application/application-edit-container.js
index fa76680372..b3b2d66989 100644
--- a/frontend/src/component/application/application-edit-container.js
+++ b/frontend/src/component/application/application-edit-container.js
@@ -1,6 +1,6 @@
 import { connect } from 'react-redux';
 import ApplicationEdit from './application-edit-component';
-import { fetchApplication } from '../../store/application/actions';
+import { fetchApplication, storeApplicationMetaData } from '../../store/application/actions';
 
 const mapStateToProps = (state, props) => {
     let application = state.applications.getIn(['apps', props.appName]);
@@ -12,6 +12,9 @@ const mapStateToProps = (state, props) => {
     };
 };
 
-const Constainer = connect(mapStateToProps, { fetchApplication })(ApplicationEdit);
+const Constainer = connect(mapStateToProps, {
+    fetchApplication,
+    storeApplicationMetaData,
+})(ApplicationEdit);
 
 export default Constainer;
diff --git a/frontend/src/component/application/application-list-component.js b/frontend/src/component/application/application-list-component.js
index 8d616d3568..f96e3fc63b 100644
--- a/frontend/src/component/application/application-list-component.js
+++ b/frontend/src/component/application/application-list-component.js
@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+import { List, ListItem, ListItemContent } from 'react-mdl';
 import { Link } from 'react-router';
 
 class ClientStrategies extends Component {
@@ -17,15 +18,19 @@ class ClientStrategies extends Component {
         }
         return (
             <div>
-                <ul>
-                {applications.map(item => (
-                    <li>
-                        <Link key={item.appName} to={`/applications/${item.appName}`}>
-                            Link: {item.appName}
-                        </Link>
-                    </li>
+                <h5>Applications</h5>
+                <hr />
+                <List>
+                {applications.map(({ appName, data = {} }) => (
+                    <ListItem key={appName} twoLine>
+                        <ListItemContent avatar={data.icon || 'apps'} subtitle={data.description}>
+                            <Link to={`/applications/${appName}`}>
+                                {appName}
+                            </Link>
+                        </ListItemContent>
+                    </ListItem>
                 ))}
-                </ul>
+                </List>
             </div>
         );
     }
diff --git a/frontend/src/component/feature/view-edit-container.jsx b/frontend/src/component/feature/view-edit-container.jsx
index 98a662e2ac..84f6469a98 100644
--- a/frontend/src/component/feature/view-edit-container.jsx
+++ b/frontend/src/component/feature/view-edit-container.jsx
@@ -105,17 +105,22 @@ class EditFeatureToggleWrapper extends React.Component {
                                 <div><small><strong>Not used in a app in the last hour.</strong> This might be due to your client implementation is not reporting usage.</small></div>
                             </div>
                         }
-                        {seenApps.length > 0 && seenApps.map((appName) => (
-                            <Link key={appName} to={`/applications/${appName}`}>
-                                {appName}
-                            </Link>
+                        <List style={{ textAlign: 'left' }}>
+                        {seenApps.length > 0 && seenApps.map(({ appName, data = {} }) => (
+                            <ListItem twoLine>
+                                <ListItemContent avatar={data.icon || 'apps'} subtitle={data.description || '-'}>
+                                    <Link key={appName} to={`/applications/${appName}`}>
+                                        {appName}
+                                    </Link>
+                                </ListItemContent>
+                            </ListItem>
                         ))}
-                        <p>add instances count?</p>
+                        </List>
                     </Cell>
                     <Cell col={3}>
                             <div><strong>History</strong></div>
                             <List style={{ textAlign: 'left' }}>
-                                {history.map(({ createdAt, type, createdBy }, i) => 
+                                {history.map(({ createdAt, type, createdBy }, i) =>
                                     <ListItem twoLine key={i}>
                                         <ListItemContent title={type} avatar={getIcon(type)} subtitle={createdAt}>
                                             {createdBy}
diff --git a/frontend/src/data/applications-api.js b/frontend/src/data/applications-api.js
index fcbd5c4ae3..3b72645b2a 100644
--- a/frontend/src/data/applications-api.js
+++ b/frontend/src/data/applications-api.js
@@ -20,8 +20,20 @@ function fetchApplicationsWithStrategyName (strategyName) {
         .then(response => response.json());
 }
 
+function storeApplicationMetaData (appName, key, value) {
+    const data = {};
+    data[key] = value;
+    return fetch(`${URI}/${appName}`, {
+            method: 'POST',
+            headers,
+            body: JSON.stringify(data),
+            credentials: 'include',
+        }).then(throwIfNotSuccess);
+}
+
 module.exports = {
     fetchApplication,
     fetchAll,
     fetchApplicationsWithStrategyName,
+    storeApplicationMetaData,
 };
diff --git a/frontend/src/store/application/actions.js b/frontend/src/store/application/actions.js
index 311c5d6b10..3f295bd4c3 100644
--- a/frontend/src/store/application/actions.js
+++ b/frontend/src/store/application/actions.js
@@ -2,6 +2,7 @@ import api from '../../data/applications-api';
 
 export const RECEIVE_ALL_APPLICATIONS = 'RECEIVE_ALL_APPLICATIONS';
 export const ERROR_RECEIVE_ALL_APPLICATIONS = 'ERROR_RECEIVE_ALL_APPLICATIONS';
+export const ERROR_UPDATING_APPLICATION_DATA = 'ERROR_UPDATING_APPLICATION_DATA';
 
 export const RECEIVE_APPLICATION = 'RECEIVE_APPLICATION';
 
@@ -15,8 +16,8 @@ const recieveApplication = (json) => ({
     value: json,
 });
 
-const errorReceiveApplications = (statusCode) => ({
-    type: ERROR_RECEIVE_ALL_APPLICATIONS,
+const errorReceiveApplications = (statusCode, type = ERROR_RECEIVE_ALL_APPLICATIONS) => ({
+    type,
     statusCode,
 });
 
@@ -26,6 +27,11 @@ export function fetchAll () {
         .catch(error => dispatch(errorReceiveApplications(error)));
 }
 
+export function storeApplicationMetaData (appName, key, value) {
+    return dispatch => api.storeApplicationMetaData(appName, key, value)
+        .catch(error => dispatch(errorReceiveApplications(error, ERROR_UPDATING_APPLICATION_DATA)));
+}
+
 export function fetchApplication (appName) {
     return dispatch => api.fetchApplication(appName)
         .then(json => dispatch(recieveApplication(json)))