Merge pull request #329 from Kitware/placeholder-pages

Placeholder pages
Kitware · Apr 7, 2016 · bba871f · bba871f
2 parents 0111893 + eaa74b7
commit bba871f
Show file tree

Hide file tree

Showing 9 changed files with 156 additions and 66 deletions.
diff --git a/src/pages/Preferences/AWS/index.js b/src/pages/Preferences/AWS/index.js
@@ -3,8 +3,10 @@ import ActiveList       from '../../../panels/ActiveList';
 import ButtonBar        from '../../../panels/ButtonBar';
 import Toolbar          from '../../../panels/Toolbar';
 import React            from 'react';
+import EmptyPlaceholder from '../../../panels/EmptyPlaceholder';
 import { breadcrumb }   from '..';
 
+import theme from 'HPCCloudStyle/Theme.mcss';
 import style from 'HPCCloudStyle/PageWithMenu.mcss';
 
 import get          from 'mout/src/object/get';
@@ -103,6 +105,29 @@ const AWSPrefs = React.createClass({
     const { active, list, error, buttonsDisabled } = this.props;
     const activeData = active < list.length ? list[active] : null;
 
+    let content = null;
+    if (list.length) {
+      content = (<div className={ style.content }>
+        <AWSForm
+          data={activeData}
+          onChange={ this.changeItem }
+        />
+        <ButtonBar
+          visible={!!activeData}
+          onAction={ this.formAction }
+          error={ this.state._error || error }
+          actions={getActions(buttonsDisabled)}
+        />
+      </div>);
+    } else {
+      content = (<EmptyPlaceholder phrase={
+        <span>
+          There are no EC2 Profiles available <br />
+          You can create some with the <i className={theme.addIcon}></i> above
+        </span> }
+      />);
+    }
+
     return (
       <div className={ style.rootContainer }>
         <Toolbar
@@ -118,18 +143,7 @@ const AWSPrefs = React.createClass({
             active={active}
             list={list}
           />
-          <div className={ style.content }>
-            <AWSForm
-              data={activeData}
-              onChange={ this.changeItem }
-            />
-            <ButtonBar
-              visible={!!activeData}
-              onAction={ this.formAction }
-              error={ this.state._error || error }
-              actions={getActions(buttonsDisabled)}
-            />
-          </div>
+          { content }
         </div>
       </div>);
   },

diff --git a/src/pages/Preferences/Cluster/index.js b/src/pages/Preferences/Cluster/index.js
@@ -3,10 +3,12 @@ import ClusterForm      from './ClusterForm';
 import ActiveList       from '../../../panels/ActiveList';
 import Toolbar          from '../../../panels/Toolbar';
 import ButtonBar        from '../../../panels/ButtonBar';
+import EmptyPlaceholder from '../../../panels/EmptyPlaceholder';
 import PresetSelector   from '../PresetSelector';
 import React            from 'react';
 import { breadcrumb }   from '..';
 
+import theme from 'HPCCloudStyle/Theme.mcss';
 import style from 'HPCCloudStyle/PageWithMenu.mcss';
 
 import get          from 'mout/src/object/get';
@@ -43,6 +45,7 @@ const ClusterPrefs = React.createClass({
     simulations: React.PropTypes.object,
     taskflows: React.PropTypes.array,
     buttonsDisabled: React.PropTypes.bool,
+
     onUpdateItem: React.PropTypes.func,
     onActiveChange: React.PropTypes.func,
     onApplyPreset: React.PropTypes.func,
@@ -130,6 +133,35 @@ const ClusterPrefs = React.createClass({
     const { active, list, error, buttonsDisabled, presetNames } = this.props;
     const activeData = active < list.length ? list[active] : null;
 
+    let content = null;
+    if (list && list.length) {
+      content = (<div className={ style.content }>
+        <ClusterForm
+          data={activeData}
+          onChange={ this.changeItem }
+        />
+        <ButtonBar
+          visible={!!activeData}
+          onAction={ this.formAction }
+          error={ error || this.state._error }
+          actions={getActions(buttonsDisabled, activeData && activeData.config.ssh.publicKey && activeData.status !== 'running')}
+        >
+          <PresetSelector
+            contents={presetNames}
+            onChange={this.presetChange}
+            value={''}
+          />
+        </ButtonBar>
+      </div>);
+    } else {
+      content = (<EmptyPlaceholder phrase={
+        <span>
+          There are no Clusters available <br />
+          You can create some with the <i className={theme.addIcon}></i> above
+        </span> }
+      />);
+    }
+
     return (
       <div className={ style.rootContainer }>
         <Toolbar
@@ -145,24 +177,7 @@ const ClusterPrefs = React.createClass({
             active={active}
             list={list}
           />
-          <div className={ style.content }>
-            <ClusterForm
-              data={activeData}
-              onChange={ this.changeItem }
-            />
-            <ButtonBar
-              visible={!!activeData}
-              onAction={ this.formAction }
-              error={ error || this.state._error }
-              actions={getActions(buttonsDisabled, activeData && activeData.config.ssh.publicKey && activeData.status !== 'running')}
-            >
-              <PresetSelector
-                contents={presetNames}
-                onChange={this.presetChange}
-                value={''}
-              />
-            </ButtonBar>
-          </div>
+          { content }
         </div>
       </div>);
   },

diff --git a/src/pages/Project/All/index.js b/src/pages/Project/All/index.js
@@ -1,9 +1,10 @@
 import merge             from 'mout/src/object/merge';
 import React             from 'react';
 import TableListing      from '../../../panels/TableListing';
+import EmptyPlaceholder  from '../../../panels/EmptyPlaceholder';
 import { ProjectHelper } from '../../../utils/AccessHelper';
 
-import breadCrumbStyle from 'HPCCloudStyle/Theme.mcss';
+import theme from 'HPCCloudStyle/Theme.mcss';
 
 import { connect }  from 'react-redux';
 import { dispatch } from '../../../redux';
@@ -57,13 +58,23 @@ const ProjectAll = React.createClass({
         breadcrumb={{
           paths: ['/'],
           icons: [
-            breadCrumbStyle.breadCrumbRootIcon,
+            theme.breadCrumbRootIcon,
           ] }}
         location={ this.props.location }
         accessHelper={ ProjectHelper }
         items={ this.props.projects }
         onAction={ this.onAction }
         title="Projects"
+        placeholder={
+          <EmptyPlaceholder phrase={
+            <div>
+              <h3>Welcome to HPC Cloud</h3>
+              <span>You haven't created any projects yet<br />
+                Add one with the <i className={ theme.addIcon }></i> above.
+              </span>
+            </div>}
+          />
+        }
       />);
   },
 });

diff --git a/src/pages/Project/View/index.js b/src/pages/Project/View/index.js
@@ -1,8 +1,9 @@
 import React                from 'react';
 import { SimulationHelper } from '../../../utils/AccessHelper';
 import TableListing         from '../../../panels/TableListing';
+import EmptyPlaceholder     from '../../../panels/EmptyPlaceholder';
 
-import breadCrumbStyle      from 'HPCCloudStyle/Theme.mcss';
+import theme      from 'HPCCloudStyle/Theme.mcss';
 
 import { connect }  from 'react-redux';
 import { dispatch } from '../../../redux';
@@ -59,14 +60,21 @@ const ProjectView = React.createClass({
         breadcrumb={{
           paths: ['/', `/View/Project/${this.props.params.id}`],
           icons: [
-            breadCrumbStyle.breadCrumbRootIcon,
-            breadCrumbStyle.breadCrumbProjectIcon,
+            theme.breadCrumbRootIcon,
+            theme.breadCrumbProjectIcon,
           ] }}
         location={ this.props.location }
         accessHelper={ SimulationHelper }
         items={ this.props.simulations }
         onAction={ this.onAction }
         title={ `${this.props.project.name} / Simulations` }
+        placeholder={
+          <EmptyPlaceholder phrase={
+            <span>There are no simulations for this project<br />
+              You can add some with the <i className={ theme.addIcon }></i> above.
+            </span>}
+          />
+        }
       />);
   },
 });

diff --git a/src/panels/EmptyPlaceholder/index.js b/src/panels/EmptyPlaceholder/index.js
@@ -0,0 +1,24 @@
+import React from 'react';
+import style from 'HPCCloudStyle/Layout.mcss';
+
+// used for empty placeholders on some pages
+
+const classes = [
+  style.verticalFlexContainer,
+  style.fullWidth,
+  style.halfHeight,
+  style.horizontalCenter,
+  style.verticalCenter,
+  style.textCenter,
+].join(' ');
+
+const placeholder = (props) => (
+  <div className={ classes }>
+    { props.phrase }
+  </div>
+);
+
+placeholder.displayName = 'EmptyPlaceholder';
+placeholder.propTypes = { phrase: React.PropTypes.string };
+
+export default placeholder;
diff --git a/src/panels/TableListing/index.js b/src/panels/TableListing/index.js
@@ -29,6 +29,7 @@ export default React.createClass({
     location: React.PropTypes.object,
     onAction: React.PropTypes.func,
     title: React.PropTypes.string,
+    placeholder: React.PropTypes.object,
   },
 
   contextTypes: {
@@ -111,6 +112,43 @@ export default React.createClass({
     updateQuery(this.props.location.query.filter);
     const filteredList = this.props.items.filter(itemFilter);
     const helper = this.props.accessHelper;
+    let content = null;
+
+    if (this.props.items.length) {
+      content = (
+        <table className={ style.table }>
+          <thead>
+              <tr>
+                  <th></th>
+                  <th>Name</th>
+                  <th>Description</th>
+                  <th>Created</th>
+                  <th>Updated</th>
+                  <th></th>
+              </tr>
+          </thead>
+          <tbody>
+            { filteredList.map((item, index) =>
+              <tr key={ `${item._id}_${index}` } data-link={ helper.getViewLink(item) } data-index={ index }
+                className={this.state.selected.indexOf(index) !== -1 ? style.selected : ''}
+              >
+                <td onClick={ this.itemClicked } >
+                  <ImageIcon data={ helper.getIcon(item) } />
+                </td>
+                <td onClick={ this.itemClicked } >{ helper.getName(item) }</td>
+                <td onClick={ this.itemClicked } title={ helper.getDescription(item) }>{ helper.getDescription(item, true) }</td>
+                <td onClick={ this.itemClicked } title={helper.getCreationDate(item)}>{ helper.getCreationDate(item, true) }</td>
+                <td onClick={ this.itemClicked } title={helper.getUpdateDate(item)}>{ helper.getUpdateDate(item, true) }</td>
+                <td>
+                  <IconActionList actions={ helper.getActions(item) } onAction={ this.lineAction } />
+                </td>
+              </tr>
+            )}
+          </tbody>
+        </table>);
+    } else if (this.props.placeholder) {
+      content = this.props.placeholder;
+    }
 
     return (
       <div className={ style.container }>
@@ -122,36 +160,7 @@ export default React.createClass({
             onAction={ this.toolbarAction }
             filter
           />
-          <table className={ style.table }>
-              <thead>
-                  <tr>
-                      <th></th>
-                      <th>Name</th>
-                      <th>Description</th>
-                      <th>Created</th>
-                      <th>Updated</th>
-                      <th></th>
-                  </tr>
-              </thead>
-              <tbody>
-                { filteredList.map((item, index) =>
-                  <tr key={ `${item._id}_${index}` } data-link={ helper.getViewLink(item) } data-index={ index }
-                    className={this.state.selected.indexOf(index) !== -1 ? style.selected : ''}
-                  >
-                    <td onClick={ this.itemClicked } >
-                      <ImageIcon data={ helper.getIcon(item) } />
-                    </td>
-                    <td onClick={ this.itemClicked } >{ helper.getName(item) }</td>
-                    <td onClick={ this.itemClicked } title={ helper.getDescription(item) }>{ helper.getDescription(item, true) }</td>
-                    <td onClick={ this.itemClicked } title={helper.getCreationDate(item)}>{ helper.getCreationDate(item, true) }</td>
-                    <td onClick={ this.itemClicked } title={helper.getUpdateDate(item)}>{ helper.getUpdateDate(item, true) }</td>
-                    <td>
-                      <IconActionList actions={ helper.getActions(item) } onAction={ this.lineAction } />
-                    </td>
-                  </tr>
-                )}
-              </tbody>
-          </table>
+          { content }
       </div>);
   },
 });
diff --git a/style/Layout.mcss b/style/Layout.mcss
@@ -54,6 +54,10 @@
     width: 100%;
 }
 
+.halfHeight {
+    height: 50vh;
+}
+
 .horizontalPadding {
     padding-left: 10px;
     padding-right: 10px;

diff --git a/style/Theme.mcss b/style/Theme.mcss
@@ -140,6 +140,12 @@
     composes: fa-pencil     from 'font-awesome/css/font-awesome.css';
 }
 
+.addIcon {
+    composes: fa      from 'font-awesome/css/font-awesome.css';
+    composes: fa-fw   from 'font-awesome/css/font-awesome.css';
+    composes: fa-plus from 'font-awesome/css/font-awesome.css';
+}
+
 /* Simulation icons */
 .simulationEditIcon {
     composes: fa            from 'font-awesome/css/font-awesome.css';

diff --git a/style/Toolbar.mcss b/style/Toolbar.mcss
@@ -33,7 +33,6 @@
     align-items: center;
 }
 
-
 .actionButton {
     composes: isClickable from 'HPCCloudStyle/States.mcss';
     padding: 7px 17px;