Topology filter overhaul, still needs backend support

weaveworks · Mar 17, 2016 · c808de6 · c808de6
1 parent e7b4cce
commit c808de6
Show file tree

Hide file tree

Showing 3 changed files with 69 additions and 95 deletions.
diff --git a/client/app/scripts/components/topology-option-action.js b/client/app/scripts/components/topology-option-action.js
@@ -3,21 +3,24 @@ import React from 'react';
 import { changeTopologyOption } from '../actions/app-actions';
 
 export default class TopologyOptionAction extends React.Component {
+
   constructor(props, context) {
     super(props, context);
     this.onClick = this.onClick.bind(this);
   }
 
   onClick(ev) {
     ev.preventDefault();
-    changeTopologyOption(this.props.option, this.props.value, this.props.topologyId);
+    const { optionId, topologyId, value } = this.props;
+    changeTopologyOption(optionId, value, topologyId);
   }
 
   render() {
+    const className = this.props.active ? 'topology-option-action topology-option-action-selected' : 'topology-option-action';
     return (
-      <span className="sidebar-item-action" onClick={this.onClick}>
-        {this.props.value}
-      </span>
+      <div className={className} onClick={this.onClick}>
+        {this.props.label}
+      </div>
     );
   }
 }
diff --git a/client/app/scripts/components/topology-options.js b/client/app/scripts/components/topology-options.js
@@ -1,76 +1,28 @@
 import React from 'react';
-import _ from 'lodash';
 
 import TopologyOptionAction from './topology-option-action';
 
 export default class TopologyOptions extends React.Component {
-  renderAction(action, option, topologyId) {
-    return (
-      <TopologyOptionAction option={option} value={action} topologyId={topologyId} key={action} />
-    );
-  }
-
-  /**
-   * transforms a list of options into one sidebar-item.
-   * The sidebar text comes from the active option. the actions come from the
-   * remaining items.
-   */
-  renderOption(items) {
-    let activeText;
-    let activeValue;
-    const actions = [];
-    const activeOptions = this.props.activeOptions;
-    const topologyId = this.props.topologyId;
-    const option = items[0].option;
 
-    // find active option value
-    if (activeOptions && activeOptions.has(option)) {
-      activeValue = activeOptions.get(option);
-    } else {
-      // get default value
-      items.forEach(function(item) {
-        if (item.default) {
-          activeValue = item.value;
-        }
-      });
-    }
-
-    // render active option as text, add other options as actions
-    items.forEach(function(item) {
-      if (item.value === activeValue) {
-        activeText = item.display;
-      } else {
-        actions.push(this.renderAction(item.value, item.option, topologyId));
-      }
-    }, this);
+  renderOption(option) {
+    const { activeOptions, topologyId } = this.props;
+    const activeValue = activeOptions && activeOptions.has(option.id) ? activeOptions.get(option.id) : option.defaultValue;
 
     return (
-      <div className="sidebar-item" key={option}>
-        {activeText}
-        <span className="sidebar-item-actions">
-          {actions}
-        </span>
+      <div className="topology-option" key={option.id}>
+        <div className="topology-option-wrapper">
+          {option.options.map(item => <TopologyOptionAction
+            optionId={option.id} topologyId={topologyId} key={item.value}
+            active={activeValue === item.value} {...item} />)}
+        </div>
       </div>
     );
   }
 
   render() {
-    const options = _.sortBy(
-      _.map(this.props.options, function(items, optionId) {
-        _.each(items, function(item) {
-          item.option = optionId;
-        });
-        items.option = optionId;
-        return items;
-      }),
-      'option'
-    );
-
     return (
       <div className="topology-options">
-        {options.map(function(items) {
-          return this.renderOption(items);
-        }, this)}
+        {this.props.options && this.props.options.map(option => this.renderOption(option))}
       </div>
     );
   }

diff --git a/client/app/styles/main.less b/client/app/styles/main.less
@@ -36,6 +36,7 @@
 
 @details-window-width: 420px;
 @details-window-padding-left: 36px;
+@border-radius: 4px;
 
 @terminal-header-height: 34px;
 
@@ -259,7 +260,7 @@ h2 {
     .btn-opacity;
     cursor: pointer;
     padding: 4px 8px;
-    border-radius: 4px;
+    border-radius: @border-radius;
     opacity: 0.8;
     margin-bottom: 3px;
 
@@ -943,48 +944,76 @@ h2 {
 
 .status {
   text-transform: uppercase;
+  padding: 2px 12px;
+  border-radius: @border-radius;
+  color: @text-secondary-color;
+  display: inline-block;
 
   &-icon {
-    font-size: 16px;
+    font-size: 1rem;
     position: relative;
-    top: 1px;
-    margin-right: 0.5em;
+    top: 0.125rem;
+    margin-right: 0.25rem;
   }
 
   &.status-loading {
-    animation: status-loading 2.0s infinite ease-in-out;
+    animation: blinking 2.0s infinite ease-in-out;
     text-transform: none;
+    color: @text-color;
   }
 }
 
-.sidebar {
-  position: fixed;
-  bottom: 16px;
-  left: 16px;
-  font-size: .7rem;
+.topology-options {
 
-  &-item {
+  .topology-option {
     color: @text-secondary-color;
-    border-radius: 2px;
-    padding: 2px 8px;
-    width: 100%;
+    margin: 6px 0;
 
-    &.status {
-      padding: 4px 8px;
-      margin-bottom: 4px;
+    &:last-child {
+      margin-bottom: 0;
+    }
+
+    &-wrapper {
+      border-radius: @border-radius;
+      border: 1px solid @background-darker-color;
+      display: inline-block;
     }
 
     &-action {
       .btn-opacity;
-      text-transform: uppercase;
-      font-weight: bold;
-      color: darken(@weave-orange, 25%);
+      padding: 3px 12px;
       cursor: pointer;
-      font-size: 90%;
-      margin-left: 0.5em;
-      opacity: @link-opacity-default;
+      display: inline-block;
+
+      &-selected, &:hover {
+        color: @text-darker-color;
+        background-color: @background-darker-color;
+      }
+
+      &-selected {
+        cursor: default;
+      }
+
+      &:first-child {
+        border-left: none;
+        border-top-left-radius: @border-radius;
+        border-bottom-left-radius: @border-radius;
+      }
+
+      &:last-child {
+        border-top-right-radius: @border-radius;
+        border-bottom-right-radius: @border-radius;
+      }
     }
   }
+
+}
+
+.sidebar {
+  position: fixed;
+  bottom: 16px;
+  left: 16px;
+  font-size: .7rem;
 }
 
 @keyframes blinking {
@@ -995,16 +1024,6 @@ h2 {
   }
 }
 
-@keyframes status-loading {
-  0%, 100% {
-    background-color: @background-darker-secondary-color;
-    color: @text-secondary-color;
-  } 50% {
-    background-color: @background-darker-color;
-    color: @text-color;
-  }
-}
-
 //
 // Debug panel!
 //