Add processes to home

embark-ui/package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "axios": "^0.18.0",
+    "classnames": "^2.2.6",
     "connected-react-router": "^4.3.0",
     "history": "^4.7.2",
     "prop-types": "^15.6.2",

embark-ui/src/components/Process.js

@@ -7,8 +7,8 @@ class Process extends Component {
   render() {
     const logs = this.props.logs;
     return (
-      <Page.Content title={this.props.processName.charAt(0).toUpperCase() + this.props.processName.slice(1)}>
-        <p className="capitalize">State: {this.props.state}</p>
+      <Page.Content className="text-capitalize" title={this.props.processName}>
+        <p className="text-capitalize">State: {this.props.state}</p>
         {!logs &&
         <Loading/>}
         {logs &&

embark-ui/src/components/Processes.js

@@ -0,0 +1,44 @@
+import PropTypes from "prop-types";
+import React from 'react';
+import {Link} from "react-router-dom";
+import {Grid, Card} from 'tabler-react';
+import classNames from 'classnames';
+
+function stampClasses(state){
+  return classNames('stamp stamp-md mr-3', {
+    'bg-green': state === 'running',
+    'bg-danger': state !== 'running'
+  });
+}
+
+const Process = ({name, state}) => (
+  <Grid.Col sm={6} lg={3}>
+    <Card className="p-3">
+      <div className="d-flex align-items-center">
+        <span className={stampClasses(state)}>
+          <i className="fe fa-cube"></i>
+        </span>
+        <div>
+          <h4 className="text-capitalize m-0"><Link to={`/embark/processes/${name}`}>{name}</Link></h4>
+        </div>
+      </div>
+    </Card>
+  </Grid.Col>
+);
+
+Process.propTypes = {
+  name: PropTypes.string,
+  state: PropTypes.string
+};
+
+const Processes = ({processes}) => (
+  <Grid.Row cards>
+    {Object.keys(processes).map((name) => <Process key={name} name={name} state={processes[name].state} />)}
+  </Grid.Row>
+);
+
+Processes.propTypes = {
+  processes: PropTypes.object,
+};
+
+export default Processes;

embark-ui/src/components/ProcessesLayout.js

@@ -28,7 +28,7 @@ class ProcessesLayout extends Component {
           <List.Group transparent={true}>
             {processNames.map((processName, index) => {
               return (<List.GroupItem
-                className="d-flex align-items-center capitalize"
+                className="d-flex align-items-center text-capitalize"
                 to={`${routePrefix}/${processName}`}
                 key={'process-' + processName}
                 active={index === 0 && this.props.match.isExact === true}

embark-ui/src/components/Status.js

@@ -1,61 +0,0 @@
-import React from 'react';
-import {Grid, Card} from 'tabler-react';
-
-const Status = () => (
-  <Grid.Row cards>
-    <Grid.Col sm={6} lg={3}>
-      <Card className="p-3">
-        <div className="d-flex align-items-center">
-          <span className="stamp stamp-md bg-blue mr-3">
-            <i className="fe fa-cube"></i>
-          </span>
-          <div>
-            <h4 className="m-0"><a href="javascript:void(0)">IPFS</a></h4>
-            <small className="text-muted">version 2.5</small>
-        </div>
-        </div>
-      </Card>
-    </Grid.Col>
-    <Grid.Col sm={6} lg={3}>
-      <Card className="p-3">
-        <div className="d-flex align-items-center">
-                  <span className="stamp stamp-md bg-green mr-3">
-                    <i className="fe fe-check"></i>
-                  </span>
-          <div>
-            <h4 className="m-0"><a href="javascript:void(0)">Ethereum</a></h4>
-            <small className="text-muted">Geth 1.6.7-stable</small>
-          </div>
-        </div>
-      </Card>
-    </Grid.Col>
-    <Grid.Col sm={6} lg={3}>
-      <Card className="p-3">
-        <div className="d-flex align-items-center">
-                  <span className="stamp stamp-md bg-red mr-3">
-                    <i className="fe fe-message-square"></i>
-                  </span>
-          <div>
-            <h4 className="m-0"><a href="javascript:void(0)">Whisper</a></h4>
-            <small className="text-muted">V5</small>
-          </div>
-        </div>
-      </Card>
-    </Grid.Col>
-    <Grid.Col sm={6} lg={3}>
-      <Card className="p-3">
-        <div className="d-flex align-items-center">
-                  <span className="stamp stamp-md bg-yellow mr-3">
-                    <i className="fe fe-server"></i>
-                  </span>
-          <div>
-            <h4 className="m-0"><a href="javascript:void(0)">Webserver</a></h4>
-            <small className="text-muted">http://localhost:8000</small>
-          </div>
-        </div>
-      </Card>
-    </Grid.Col>
-  </Grid.Row>
-);
-
-export default Status;

embark-ui/src/containers/HomeContainer.js

@@ -1,8 +1,9 @@
+import PropTypes from "prop-types";
 import React, {Component} from 'react';
 import {connect} from 'react-redux';
 import {Page} from "tabler-react";
 
-import Status from '../components/Status';
+import Processes from '../components/Processes';
 import Console from '../components/Console';
 
 class HomeContainer extends Component {
@@ -10,14 +11,22 @@ class HomeContainer extends Component {
     return (
       <React.Fragment>
         <Page.Title className="my-5">Dashboard</Page.Title>
-        <Status />
+        {this.props.processes.data && <Processes processes={this.props.processes.data} />}
         <Console />
       </React.Fragment>
     );
   }
 }
 
+HomeContainer.propTypes = {
+  processes: PropTypes.object
+};
+
+function mapStateToProps(state) {
+  return {processes: state.processes};
+}
+
 export default connect(
-  null,
+  mapStateToProps,
   null,
 )(HomeContainer);

embark-ui/src/general.css

@@ -20,7 +20,3 @@
 .logs .trace {
   color: #8f98a2;
 }
-
-.capitalize {
-  text-transform: capitalize;
-}