Merge pull request #385 from Kitware/preference-changes

cjh1 · cjh1 · commit 0551883c9a87 · 2016-05-10T16:43:33.000-04:00
Preference changes
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -8,9 +8,17 @@ module.exports = {
     'no-param-reassign': [2, { props: false }],
     'no-unused-vars': [2, { args: 'none' }],
     'no-var': 0,
+    'no-underscore-dangle': 0,
     'one-var': 0,
+    'block-spacing': 0,
+    'global-require': 0,
+    'import/no-unresolved': 0,
     'react/no-is-mounted': 1,
     'react/prefer-es6-class': 0,
     'react/prefer-stateless-function': 0,
+    'react/jsx-curly-spacing': 0,
+    'react/jsx-first-prop-new-line': 0,
+    'react/jsx-indent': 0,
+    'jsx-a11y/img-has-alt': 0,
   }
 };
diff --git a/package.json b/package.json
@@ -40,7 +40,7 @@
     "simput": "1.2.0",
     "pvw-visualizer": "1.0.11",
 
-    "kw-web-suite": "Kitware/kw-web-suite.git#reduced-hpcc-deps"
+    "kw-web-suite": "2.0.0"
   },
   "scripts": {
     "install:pyfr"  : "cp ./node_modules/simput/dist/types/pyfr.js ./dist/simput-pyfr.js",
diff --git a/src/pages/Preferences/AWS/index.js b/src/pages/Preferences/AWS/index.js
@@ -129,11 +129,9 @@ const AWSPrefs = React.createClass({
 
     return (
       <div className={ style.rootContainer }>
-        <Toolbar
-          breadcrumb={ awsBreadCrumb }
-          title="AWS EC2"
-          actions={[{ name: 'add', icon: style.addIcon }]}
-          onAction={this.addItem}
+        <Toolbar breadcrumb={ awsBreadCrumb } title="AWS EC2"
+          actions={[{ name: 'add', icon: style.addIcon }]} onAction={this.addItem}
+          hasTabs
         />
         <div className={ style.container }>
           <ActiveList
diff --git a/src/pages/Preferences/Cluster/index.js b/src/pages/Preferences/Cluster/index.js
@@ -164,11 +164,9 @@ const ClusterPrefs = React.createClass({
 
     return (
       <div className={ style.rootContainer }>
-        <Toolbar
-          breadcrumb={ clusterBreadCrumb }
-          title="Clusters"
-          actions={[{ name: 'add', icon: style.addIcon }]}
-          onAction={this.addItem}
+        <Toolbar breadcrumb={ clusterBreadCrumb } title="Clusters"
+          actions={[{ name: 'add', icon: style.addIcon }]} onAction={this.addItem}
+          hasTabs
         />
         <div className={ style.container }>
           <ActiveList
diff --git a/src/pages/Preferences/Network/index.js b/src/pages/Preferences/Network/index.js
@@ -34,10 +34,7 @@ const StatusPage = React.createClass({
   render() {
     return (
       <div className={ style.rootContainer }>
-        <Toolbar
-          breadcrumb={ clusterBreadCrumb }
-          title="Network"
-        />
+        <Toolbar breadcrumb={ clusterBreadCrumb } title="Network" hasTabs />
         <div className={ style.container }>
           <div className={ style.content }>
             <OutputPanel items={this.props.log.map(this.networkMapper)} title="Network log" />
diff --git a/src/pages/Preferences/ServerStatus/index.js b/src/pages/Preferences/ServerStatus/index.js
@@ -33,10 +33,8 @@ const StatusPage = React.createClass({
   render() {
     return (
       <div className={ style.rootContainer }>
-        <Toolbar
-          breadcrumb={ clusterBreadCrumb }
-          title="Status"
-          onAction={this.addItem}
+        <Toolbar breadcrumb={ clusterBreadCrumb } title="Status"
+          onAction={this.addItem} hasTabs
         />
         <div className={ style.container }>
           <div className={ style.content }>
diff --git a/src/pages/Preferences/User/index.js b/src/pages/Preferences/User/index.js
@@ -48,7 +48,7 @@ export default React.createClass({
   render() {
     return (
       <div className={ style.rootContainer }>
-        <Toolbar title="User" breadcrumb={userBreadCrumb} />
+        <Toolbar title="User" breadcrumb={userBreadCrumb} hasTabs />
         <div className={ style.container }>
             <ActiveList
               className={ style.menu }
diff --git a/src/pages/Preferences/index.js b/src/pages/Preferences/index.js
@@ -7,14 +7,26 @@ export const breadcrumb = {
     '/Preferences/Cluster',
     '/Preferences/AWS',
     '/Preferences/Status',
-    '/Preferences/Network',
+    //'/Preferences/Network',
   ],
   icons: [
     style.userIcon,
     style.clusterIcon,
     style.ec2Icon,
     style.statusIcon,
-    style.networkIcon,
+    // style.networkIcon,
+  ],
+  titles: [
+    'User preferences',
+    'Cluster',
+    'EC2',
+    'Server status',
+  ],
+  labels: [
+    'User',
+    'Cluster',
+    'EC2',
+    'Status',
   ],
   active: -1,
 };
diff --git a/src/pages/Project/All/index.js b/src/pages/Project/All/index.js
@@ -3,6 +3,7 @@ import React             from 'react';
 import TableListing      from '../../../panels/TableListing';
 import EmptyPlaceholder  from '../../../panels/EmptyPlaceholder';
 import { ProjectHelper } from '../../../utils/AccessHelper';
+import { primaryBreadCrumbs } from '../../../utils/Constants';
 
 import theme from 'HPCCloudStyle/Theme.mcss';
 
@@ -55,11 +56,7 @@ const ProjectAll = React.createClass({
   render() {
     return (
       <TableListing
-        breadcrumb={{
-          paths: ['/'],
-          icons: [
-            theme.breadCrumbRootIcon,
-          ] }}
+        breadcrumb={primaryBreadCrumbs()}
         location={ this.props.location }
         accessHelper={ ProjectHelper }
         items={ this.props.projects }
diff --git a/src/pages/Project/View/index.js b/src/pages/Project/View/index.js
@@ -2,7 +2,7 @@ import React                from 'react';
 import { SimulationHelper } from '../../../utils/AccessHelper';
 import TableListing         from '../../../panels/TableListing';
 import EmptyPlaceholder     from '../../../panels/EmptyPlaceholder';
-
+import { primaryBreadCrumbs } from '../../../utils/Constants';
 import theme      from 'HPCCloudStyle/Theme.mcss';
 
 import { connect }  from 'react-redux';
@@ -57,12 +57,7 @@ const ProjectView = React.createClass({
   render() {
     return (
       <TableListing
-        breadcrumb={{
-          paths: ['/', `/View/Project/${this.props.params.id}`],
-          icons: [
-            theme.breadCrumbRootIcon,
-            theme.breadCrumbProjectIcon,
-          ] }}
+        breadcrumb={primaryBreadCrumbs(this.props.params.id)}
         location={ this.props.location }
         accessHelper={ SimulationHelper }
         items={ this.props.simulations }
diff --git a/src/panels/Toolbar/index.js b/src/panels/Toolbar/index.js
@@ -9,6 +9,7 @@ export default React.createClass({
   propTypes: {
     actions: React.PropTypes.array,
     breadcrumb: React.PropTypes.object,
+    hasTabs: React.PropTypes.bool,
     filter: React.PropTypes.bool,
     location: React.PropTypes.object,
     onAction: React.PropTypes.func,
@@ -27,7 +28,9 @@ export default React.createClass({
       breadcrumb: {
         paths: [],
         icons: [],
+        titles: [],
       },
+      hasTabs: false,
     };
   },
 
@@ -52,10 +55,13 @@ export default React.createClass({
     return (
       <nav className={ style.container }>
         <Breadcrumb
-          className={ style.breadcrumb }
+          className={ this.props.hasTabs ? style.toolbarTab : style.breadcrumb }
           paths={ this.props.breadcrumb.paths }
           icons={ this.props.breadcrumb.icons }
+          titles={ this.props.breadcrumb.titles }
+          labels={ this.props.breadcrumb.labels }
           active={ this.props.breadcrumb.active }
+          hasTabs={this.props.hasTabs}
         />
 
         <div className={ style.title }>
diff --git a/src/panels/run/RunEC2.js b/src/panels/run/RunEC2.js
@@ -101,6 +101,7 @@ export default React.createClass({
         </div>;
     }
 
+    const runningClusters = this.state.clusters ? this.state.clusters.filter((el) => el.status === 'running') : [];
     const optionMapper = (el, index) =>
       <option key={ `${el.name}_${index}` } value={index}>
         {el.name}
@@ -117,14 +118,14 @@ export default React.createClass({
       </option>;
     return (
       <div className={style.container}>
-        { this.state.clusters ?
+        { runningClusters.length ?
           <section className={style.group}>
             <label className={style.label}>Existing Instances</label>
             <select className={style.input}
               onChange={this.dataChange} data-key="cluster"
             >
               <option value={null}></option>
-              {this.state.clusters.map((el, index) => <option key={el._id} value={el._id}>{el.name}</option>)}
+              { runningClusters.map((el, index) => <option key={el._id} value={el._id}>{el.name}</option>)}
             </select>
           </section> : null
         }
diff --git a/src/tools/visualizer/index.js b/src/tools/visualizer/index.js
@@ -5,9 +5,9 @@ import ProxyManager     from 'pvw-visualizer/src/ProxyManager';
 import ControlPanel     from 'pvw-visualizer/src/panels/ControlPanel';
 import VtkRenderer      from 'paraviewweb/src/React/Renderers/VtkRenderer';
 import client           from '../../network';
+import { primaryBreadCrumbs } from '../../utils/Constants';
 
 import style            from 'HPCCloudStyle/PageWithMenu.mcss';
-import breadCrumbStyle  from 'HPCCloudStyle/Theme.mcss';
 import vizStyle         from 'HPCCloudStyle/Visualizer.mcss';
 
 export default React.createClass({
@@ -110,14 +110,7 @@ export default React.createClass({
     return (
       <div className={ style.rootContainer }>
           <Toolbar
-            breadcrumb={{
-              paths: ['/', `/View/Project/${this.props.project._id}`, `/View/Simulation/${this.props.simulation._id}`],
-              icons: [
-                breadCrumbStyle.breadCrumbRootIcon,
-                breadCrumbStyle.breadCrumbProjectIcon,
-                breadCrumbStyle.breadCrumbSimulationIcon,
-              ],
-            }}
+            breadcrumb={primaryBreadCrumbs(this.props.project._id, this.props.simulation._id)}
             actions={[
                 { name: 'toggleMenu', icon: vizStyle.toggleMenuButton },
                 { name: 'nextTimeStep', icon: vizStyle.nextButton },
diff --git a/src/utils/Constants.js b/src/utils/Constants.js
@@ -1,3 +1,5 @@
+import breadCrumbStyle  from 'HPCCloudStyle/Theme.mcss';
+
 export const baseURL = '/api/v1';
 
 // name: action in component that this action runs
@@ -9,3 +11,22 @@ export const taskflowActions = {
   rerun: { name: 'deleteTaskflow', label: 'Rerun', icon: '' },
   terminateInstance: { name: 'terminateInstance', label: 'Terminate EC2 Instance', icon: '' },
 };
+
+export function primaryBreadCrumbs(projectId = null, simulationId = null) {
+  var ret = {
+    paths: ['/'],
+    icons: [breadCrumbStyle.breadCrumbRootIcon],
+    titles: ['Home'],
+  };
+  if (projectId) {
+    ret.paths.push(`/View/Project/${projectId}`);
+    ret.icons.push(breadCrumbStyle.breadCrumbProjectIcon);
+    ret.titles.push('Project');
+    if (simulationId) {
+      ret.paths.push(`/View/Simulation/${simulationId}`);
+      ret.icons.push(breadCrumbStyle.breadCrumbSimulationIcon);
+      ret.titles.push('Simulation');
+    }
+  }
+  return ret;
+}
diff --git a/src/widgets/Breadcrumb/index.js b/src/widgets/Breadcrumb/index.js
@@ -1,5 +1,6 @@
 import React    from 'react';
 import LinkIcon from '../LinkIcon';
+import { Link } from 'react-router';
 import style    from 'HPCCloudStyle/Theme.mcss';
 
 const DEFAULT_BREADCRUMB_ICONS = [
@@ -15,31 +16,57 @@ const DEFAULT_BREADCRUMB_ICONS = [
 ];
 
 export default React.createClass({
-  displayName: 'LinkIcon',
+  displayName: 'BreadCrumb',
 
   propTypes: {
     active: React.PropTypes.number,
     className: React.PropTypes.string,
     icons: React.PropTypes.array,
     paths: React.PropTypes.array,
+    titles: React.PropTypes.array,
+    hasTabs: React.PropTypes.bool,
+    labels: React.PropTypes.array,
   },
 
   getDefaultProps() {
     return {
       active: -1,
       icons: DEFAULT_BREADCRUMB_ICONS,
+      hasTabs: false,
     };
   },
 
   render() {
+    var mapper;
+    if (!this.props.hasTabs) {
+      mapper = (path, index) =>
+        <LinkIcon key={`${path}_${index}`} to={path}
+          icon={this.props.icons[index]}
+          title={this.props.titles ? this.props.titles[index] : null}
+          className={ index === this.props.active ? style.activeBreadCrumb : null}
+        />;
+    } else {
+      const iconClasses = (index) => [
+        this.props.icons[index],
+        index === this.props.active ? style.activeBreadCrumb : null,
+      ];
+      mapper = (path, index) =>
+        <span key={`${path}_${index}`} className={this.props.className}>
+          <Link to={path} className={this.props.className}
+            title={this.props.titles ? this.props.titles[index] : null}
+          >
+            <i className={ iconClasses(index).join(' ') }></i>
+            <span className={index === this.props.active ? style.activeBreadCrumb : null}>
+              &nbsp;{ this.props.labels[index] }
+            </span>
+          </Link>
+        </span>;
+    }
+
+
     return (
       <div className={ this.props.className }>
-        { this.props.paths.map((path, index) =>
-          <LinkIcon key={`${path}_${index}`} to={path}
-            icon={this.props.icons[index]}
-            className={ index === this.props.active ? style.activeBreadCrumb : style.breadCrumb}
-          />
-        )}
+        { this.props.paths.map(mapper) }
       </div>);
   },
 });
diff --git a/src/widgets/LinkIcon/index.js b/src/widgets/LinkIcon/index.js
@@ -8,15 +8,19 @@ export default React.createClass({
     className: React.PropTypes.string,
     icon: React.PropTypes.string,
     to: React.PropTypes.string,
+    title: React.PropTypes.string,
   },
 
   getDefaultProps() {
     return {
       className: '',
+      title: null,
     };
   },
 
   render() {
-    return (<Link to={this.props.to}><i className={ [this.props.icon, this.props.className].join(' ') }></i></Link>);
+    return (<Link to={this.props.to} title={this.props.title}>
+      <i className={ [this.props.icon, this.props.className].join(' ') }></i>
+    </Link>);
   },
 });
diff --git a/src/workflows/pyfr/common/root/ViewSimulation.js b/src/workflows/pyfr/common/root/ViewSimulation.js
@@ -4,7 +4,7 @@ import Toolbar      from '../../../../panels/Toolbar';
 import client       from '../../../../network';
 
 import style            from 'HPCCloudStyle/PageWithMenu.mcss';
-import breadCrumbStyle  from 'HPCCloudStyle/Theme.mcss';
+import { primaryBreadCrumbs } from '../../../../utils/Constants';
 
 export default React.createClass({
 
@@ -50,14 +50,7 @@ export default React.createClass({
     return (
       <div className={ style.rootContainer }>
           <Toolbar
-            breadcrumb={{
-              paths: ['/', `/View/Project/${this.props.project._id}`, `/View/Simulation/${this.props.simulation._id}`],
-              icons: [
-                breadCrumbStyle.breadCrumbRootIcon,
-                breadCrumbStyle.breadCrumbProjectIcon,
-                breadCrumbStyle.breadCrumbSimulationIcon,
-              ],
-            }}
+            breadcrumb={primaryBreadCrumbs(this.props.project._id, this.props.simulation._id)}
             title={ `${this.props.project.name} / ${this.props.simulation.name}` }
           />
           <div className={ style.container }>
diff --git a/src/workflows/visualizer/components/root/ViewSimulation.js b/src/workflows/visualizer/components/root/ViewSimulation.js
diff --git a/style/Theme.mcss b/style/Theme.mcss
diff --git a/style/Toolbar.mcss b/style/Toolbar.mcss
diff --git a/style/global.mcss b/style/global.mcss
