Add column for IC uptime, WIP: add IC infos and controls dialog #266

src/ic/ic-dialog.js

@@ -0,0 +1,45 @@
+import React from 'react';
+import {FormLabel} from 'react-bootstrap';
+import Dialog from '../common/dialogs/dialog';
+
+
+class ICDialog extends React.Component {
+  valid = true;
+
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      ic: props.ic
+    };
+  }
+
+  onClose(canceled) {
+    this.props.onClose();
+  }
+
+  handleChange(e) {
+    
+  }
+
+
+  render() {
+    
+    return (
+      <Dialog
+        show={this.props.show}
+        title="Infos and Controls"
+        buttonTitle="Save"
+        onClose={(c) => this.onClose(c)}
+        valid={true}
+        size='lg'
+      >
+        <form>
+          <FormLabel>Infos and Controls</FormLabel>
+        </form>
+      </Dialog>
+    );
+  }
+}
+
+export default ICDialog;

src/ic/ics.js

@@ -17,7 +17,7 @@
 
 import React, { Component } from 'react';
 import { Container } from 'flux/utils';
-import { Button } from 'react-bootstrap';
+import { Button, Badge } from 'react-bootstrap';
 import FileSaver from 'file-saver';
 import _ from 'lodash';
 import moment from 'moment'
@@ -31,6 +31,7 @@ import TableColumn from '../common/table-column';
 import NewICDialog from './new-ic';
 import EditICDialog from './edit-ic';
 import ImportICDialog from './import-ic';
+import ICDialog from './ic-dialog';
 
 import ICAction from './ic-action';
 import DeleteDialog from '../common/dialogs/delete-dialog';
@@ -78,6 +79,7 @@ class InfrastructureComponents extends Component {
       ics: ics,
       modalIC: {},
       deleteModal: false,
+      icModal: false,
       selectedICs: [],
       currentUser: JSON.parse(localStorage.getItem("currentUser"))
     };
@@ -99,7 +101,7 @@ class InfrastructureComponents extends Component {
 
   refresh() {
 
-    if (this.state.editModal || this.state.deleteModal){
+    if (this.state.editModal || this.state.deleteModal || this.state.icModal){
       // do nothing since a dialog is open at the moment
     }
     else {
@@ -139,6 +141,10 @@ class InfrastructureComponents extends Component {
     }
   }
 
+  closeICModal(data){
+    this.setState({ icModal : false });
+  }
+
   closeDeleteModal(confirmDelete){
     this.setState({ deleteModal: false });
 
@@ -200,7 +206,7 @@ class InfrastructureComponents extends Component {
     this.setState({ selectedICs: selectedICs });
   }
 
-  runAction = action => {
+  runAction(action) {
     for (let index of this.state.selectedICs) {
       AppDispatcher.dispatch({
         type: 'ics/start-action',
@@ -301,6 +307,16 @@ class InfrastructureComponents extends Component {
 
   }
 
+  modifyUptimeColumn(uptime){
+    if(uptime >= 0){
+      return <span>{uptime + "s"}</span>
+    }
+    else{
+      return <Badge variant="secondary">Unknown</Badge>
+    }
+  }
+
+
   render() {
     const buttonStyle = {
       marginLeft: '10px'
@@ -312,11 +328,12 @@ class InfrastructureComponents extends Component {
 
         <Table data={this.state.ics}>
           <TableColumn checkbox onChecked={(index, event) => this.onICChecked(index, event)} width='30' />
-          <TableColumn title='Name' dataKeys={['name', 'rawProperties.name']} />
+          <TableColumn title='Name' dataKeys={['name', 'rawProperties.name']} clickable={true} onClick={index => this.setState({ icModal: true, modalIC: this.state.ics[index], modalIndex: index })}/>
           <TableColumn title='State' labelKey='state' tooltipKey='error' labelStyle={(state, component) => this.stateLabelStyle(state, component)} />
           <TableColumn title='Category' dataKeys={['category', 'rawProperties.category']} />
           <TableColumn title='Type' dataKeys={['type', 'rawProperties.type']} />
           <TableColumn title='Managed externally' dataKey='managedexternally' modifier={(managedexternally) => this.modifyManagedExternallyColumn(managedexternally)} width='105' />
+          <TableColumn title='Uptime' dataKey='uptime' modifier={(uptime) => this.modifyUptimeColumn(uptime)}/>
           <TableColumn title='Location' dataKeys={['properties.location', 'rawProperties.location']} />
           {/* <TableColumn title='Realm' dataKeys={['properties.realm', 'rawProperties.realm']} /> */}
           <TableColumn title='WebSocket Endpoint' dataKey='host' />
@@ -343,7 +360,7 @@ class InfrastructureComponents extends Component {
           <div style={{ float: 'left' }}>
             <ICAction
               runDisabled={this.state.selectedICs.length === 0}
-              runAction={this.runAction}
+              runAction={action => this.runAction(action)}
               actions={[
                 { id: '-1', title: 'Select command', data: { action: 'none' } },
                 { id: '0', title: 'Reset', data: { action: 'reset' } },
@@ -369,6 +386,8 @@ class InfrastructureComponents extends Component {
         <NewICDialog show={this.state.newModal} onClose={data => this.closeNewModal(data)} />
         <EditICDialog show={this.state.editModal} onClose={data => this.closeEditModal(data)} ic={this.state.modalIC} />
         <ImportICDialog show={this.state.importModal} onClose={data => this.closeImportModal(data)} />
+        <ICDialog show={this.state.icModal} onClose={data => this.closeICModal(data)} ic={this.state.modalIC} token={this.state.sessionToken} />
+
 
         <DeleteDialog title="infrastructure-component" name={_.get(this.state.modalIC, 'properties.name') || _.get(this.state.modalIC, 'rawProperties.name') || 'Unknown'} managedexternally={this.state.modalIC.managedexternally} show={this.state.deleteModal} onClose={(e) => this.closeDeleteModal(e)} />
       </div>