New sidebar in the bottom left

* status bar (fixes #207)
* moved topology options to sidebar
* render topology option like snackbar
* upgrade material-ui to 0.11

client/app/scripts/components/app.js

@@ -1,7 +1,9 @@
 const React = require('react');
+const mui = require('material-ui');
 
 const Logo = require('./logo');
 const AppStore = require('../stores/app-store');
+const Sidebar = require('./sidebar.js');
 const Status = require('./status.js');
 const Topologies = require('./topologies.js');
 const TopologyOptions = require('./topology-options.js');
@@ -11,6 +13,8 @@ const Details = require('./details');
 const Nodes = require('./nodes');
 const RouterUtils = require('../utils/router-utils');
 
+const ThemeManager = new mui.Styles.ThemeManager();
+
 const ESC_KEY_CODE = 27;
 
 function getStateFromStores() {
@@ -57,6 +61,12 @@ const App = React.createClass({
     }
   },
 
+  getChildContext: function() {
+    return {
+      muiTheme: ThemeManager.getCurrentTheme()
+    };
+  },
+
   render: function() {
     const showingDetails = this.state.selectedNodeId;
     const versionString = this.state.version ? 'Version ' + this.state.version : '';
@@ -73,9 +83,6 @@ const App = React.createClass({
         <div className="header">
           <Logo />
           <Topologies topologies={this.state.topologies} currentTopology={this.state.currentTopology} />
-          <TopologyOptions options={this.state.currentTopologyOptions}
-            activeOptions={this.state.activeTopologyOptions} />
-          <Status errorUrl={this.state.errorUrl} websocketClosed={this.state.websocketClosed} />
         </div>
 
         <Nodes nodes={this.state.nodes} highlightedNodeIds={this.state.highlightedNodeIds}
@@ -83,14 +90,24 @@ const App = React.createClass({
           selectedNodeId={this.state.selectedNodeId} topMargin={topMargin}
           topologyId={this.state.currentTopologyId} />
 
+        <Sidebar>
+          <TopologyOptions options={this.state.currentTopologyOptions}
+            activeOptions={this.state.activeTopologyOptions} />
+          <Status errorUrl={this.state.errorUrl} topology={this.state.currentTopology}
+            websocketClosed={this.state.websocketClosed} />
+        </Sidebar>
+
         <div className="footer">
           {versionString}&nbsp;&nbsp;
           <a href="https://gitreports.com/issue/weaveworks/scope" target="_blank">Report an issue</a>
         </div>
       </div>
     );
-  }
+  },
 
+  childContextTypes: {
+    muiTheme: React.PropTypes.object
+  }
 });
 
 module.exports = App;

client/app/scripts/components/details.js

@@ -10,7 +10,7 @@ const Details = React.createClass({
   render: function() {
     return (
       <div id="details">
-        <Paper zDepth={3}>
+        <Paper zDepth={3} style={{height: '100%', paddingBottom: 8}}>
           <div className="details-tools-wrapper">
             <div className="details-tools">
               <span className="fa fa-close" onClick={this.handleClickClose} />

client/app/scripts/components/sidebar.js

@@ -0,0 +1,15 @@
+const React = require('react');
+
+const Sidebar = React.createClass({
+
+  render: function() {
+    return (
+      <div className="sidebar">
+        {this.props.children}
+      </div>
+    );
+  }
+
+});
+
+module.exports = Sidebar;

client/app/scripts/components/status.js

@@ -14,10 +14,17 @@ const Status = React.createClass({
     }
   },
 
+  renderTopologyStats: function(stats) {
+    const statsText = `${stats.node_count} nodes, ${stats.edge_count} connections`;
+    return <div className="status-stats">{statsText}</div>;
+  },
+
   render: function() {
+    const showStats = this.props.topology && !this.props.errorUrl && !this.props.websocketClosed;
     return (
-      <div className="status">
-        {this.renderConnectionState(this.props.errorUrl, this.props.websocketClosed)}
+      <div className="status sidebar-item">
+        {showStats && this.renderTopologyStats(this.props.topology.stats)}
+        {!showStats && this.renderConnectionState(this.props.errorUrl, this.props.websocketClosed)}
       </div>
     );
   }

client/app/scripts/components/topology-option-action.js

@@ -0,0 +1,22 @@
+const React = require('react');
+
+const AppActions = require('../actions/app-actions');
+
+const TopologyOptionAction = React.createClass({
+
+  onClick: function(ev) {
+    ev.preventDefault();
+    AppActions.changeTopologyOption(this.props.option, this.props.value);
+  },
+
+  render: function() {
+    return (
+      <span className="sidebar-item-action" onClick={this.onClick}>
+        {this.props.value}
+      </span>
+    );
+  }
+
+});
+
+module.exports = TopologyOptionAction;

client/app/scripts/components/topology-options.js

@@ -1,40 +1,35 @@
 const React = require('react');
 const _ = require('lodash');
-const mui = require('material-ui');
-const DropDownMenu = mui.DropDownMenu;
 
-const AppActions = require('../actions/app-actions');
+const TopologyOptionAction = require('./topology-option-action');
 
 const TopologyOptions = React.createClass({
 
-  componentDidMount: function() {
-    this.fixWidth();
-  },
-
-  onChange: function(ev, index, item) {
-    ev.preventDefault();
-    AppActions.changeTopologyOption(item.option, item.payload);
+  renderAction: function(action, option) {
+    return (
+      <TopologyOptionAction option={option} value={action} />
+    );
   },
 
   renderOption: function(items) {
-    let selected = 0;
-    let key;
+    let activeText;
+    const actions = [];
     const activeOptions = this.props.activeOptions;
-    const menuItems = items.map(function(item, index) {
+    items.forEach(function(item) {
       if (activeOptions[item.option] && activeOptions[item.option] === item.value) {
-        selected = index;
+        activeText = item.display;
+      } else {
+        actions.push(this.renderAction(item.value, item.option));
       }
-      key = item.option;
-      return {
-        option: item.option,
-        payload: item.value,
-        text: item.display
-      };
-    });
+    }, this);
 
     return (
-      <DropDownMenu menuItems={menuItems} onChange={this.onChange} key={key}
-        selectedIndex={selected} />
+      <div className="sidebar-item">
+        {activeText}
+        <span className="sidebar-item-actions">
+          {actions}
+        </span>
+      </div>
     );
   },
 
@@ -51,27 +46,14 @@ const TopologyOptions = React.createClass({
     );
 
     return (
-      <div className="topology-options" ref="container">
+      <div className="topology-options">
         {options.map(function(items) {
           return this.renderOption(items);
         }, this)}
       </div>
     );
-  },
-
-  componentDidUpdate: function() {
-    this.fixWidth();
-  },
-
-  fixWidth: function() {
-    const containerNode = this.refs.container.getDOMNode();
-    _.each(containerNode.childNodes, function(child) {
-      // set drop down width to length of current label
-      const label = child.getElementsByClassName('mui-menu-label')[0];
-      const width = label.getBoundingClientRect().width + 40;
-      child.style.width = width + 'px';
-    });
   }
+
 });
 
 module.exports = TopologyOptions;

client/app/styles/main.less

@@ -1,6 +1,3 @@
-@import "~material-ui/src/less/scaffolding.less";
-@import "~material-ui/src/less/components.less";
-
 @font-face {
   font-family: "Roboto";
   src: url("../../node_modules/materialize-css/font/roboto/Roboto-Regular.woff2"),
@@ -8,7 +5,6 @@
     url("../../node_modules/materialize-css/font/roboto/Roboto-Regular.ttf");
 }
 
-
 .browsehappy {
   margin: 0.2em 0;
   background: #ccc;
@@ -32,12 +28,6 @@
 @text-darker-color: @primary-color;
 @white: @background-secondary-color;
 
-html, body {
-}
-
-.wrap {
-}
-
 /* add this class to truncate text with ellipsis, container needs width */
 .truncate {
   white-space: nowrap;
@@ -50,6 +40,25 @@ body {
   background: linear-gradient(30deg, @background-color 0%, @background-secondary-color 100%);
   color: @text-color;
   line-height: 150%;
+  font-family: Roboto, Helvetica, Arial, sans-serif;
+  font-size: 13px;
+}
+
+p {
+  line-height: 20px;
+  padding-top: 6px;
+  margin-bottom: 14px;
+  letter-spacing: 0;
+  font-weight: 400;
+  color: @text-color;
+}
+
+h2 {
+  font-size: 34px;
+  line-height: 40px;
+  padding-top: 8px;
+  margin-bottom: 12px;
+  font-weight: 400;
 }
 
 #app {
@@ -135,10 +144,6 @@ body {
 }
 
 .status {
-  float: right;
-  margin-top: 14px;
-  margin-right: 64px;
-
   &-icon {
     font-size: 16px;
     position: relative;
@@ -280,26 +285,6 @@ body {
   }
 }
 
-.mui-paper, .mui-paper-container {
-  height: 100%;
-}
-
-.mui-drop-down-menu {
-  .mui-menu-control {
-    .mui-menu-label {
-      font-size: 12px;
-    }
-
-    .mui-menu-control-underline {
-      border-top: none;
-    }
-
-    .mui-menu-control-bg {
-      background-color: transparent;
-    }
-  }
-}
-
 .node-details {
   height: 100%;
   width: 100%;
@@ -311,7 +296,7 @@ body {
 
     &-label {
       color: white;
-      margin-bottom: 0;
+      margin: 0;
       width: 348px;
 
       &-minor {
@@ -383,3 +368,31 @@ body {
 
 }
 
+.sidebar {
+  position: fixed;
+  bottom: 16px;
+  left: 24px;
+  width: 16em;
+  font-size: 85%;
+
+  &-item {
+    background-color: darken(@background-color, 8%);
+    border-radius: 2px;
+    padding: 4px 8px;
+    width: 100%;
+    margin-top: 2px;
+
+    &.status {
+      background-color: darken(@background-color, 4%);
+      color: @text-secondary-color;
+    }
+
+    &-action {
+      float: right;
+      text-transform: uppercase;
+      font-weight: bold;
+      color: darken(@weave-orange, 15%);
+      cursor: pointer;
+    }
+  }
+}

client/package.json

@@ -15,7 +15,7 @@
     "immutable": "^3.7.4",
     "keymirror": "^0.1.1",
     "lodash": "~3.9.3",
-    "material-ui": "~0.7.5",
+    "material-ui": "^0.11.0",
     "materialize-css": "^0.96.1",
     "object-assign": "^2.0.0",
     "page": "^1.6.3",