Better labels for metrics-on-canvas, log scale for load and open-files

- Small fixes after the rebase

client/app/scripts/components/metric-selector.js

@@ -1,10 +1,25 @@
 import React from 'react';
+import _ from 'lodash';
 import { selectMetric, lockMetric, unlockMetric } from '../actions/app-actions';
 import classNames from 'classnames';
 
 // const CROSS = '\u274C';
 // const MINUS = '\u2212';
 // const DOT = '\u2022';
+//
+
+const METRIC_LABELS = {
+  docker_cpu_total_usage: 'Container CPU',
+  docker_memory_usage: 'Container Memory',
+  host_cpu_usage_percent: 'Host CPU',
+  host_mem_usage_bytes: 'Host Memory',
+  load1: 'Host Load 1',
+  load15: 'Host Load 15',
+  load5: 'Host Load 5',
+  open_files_count: 'Process Open files',
+  process_cpu_usage_percent: 'Process CPU',
+  process_memory_usage_bytes: 'Process Memory'
+};
 
 function onMouseOver(k) {
   selectMetric(k);
@@ -22,6 +37,10 @@ function onMouseOut(k) {
   selectMetric(k);
 }
 
+function label(m) {
+  return METRIC_LABELS[m.id];
+}
+
 export default function MetricSelector({availableCanvasMetrics, selectedMetric, lockedMetric}) {
   return (
     <div
@@ -30,7 +49,8 @@ export default function MetricSelector({availableCanvasMetrics, selectedMetric,
       <div className="sidebar-item">
         METRICS
       </div>
-      {availableCanvasMetrics.map(({id, label}) => {
+      {_.sortBy(availableCanvasMetrics, label).map(m => {
+        const id = m.id;
         const isLocked = (id === lockedMetric);
         const isSelected = (id === selectedMetric);
         const className = classNames('sidebar-item', {
@@ -44,7 +64,7 @@ export default function MetricSelector({availableCanvasMetrics, selectedMetric,
             className={className}
             onMouseOver={() => onMouseOver(id)}
             onClick={() => onMouseClick(id, lockedMetric)}>
-            {label}
+            {label(m)}
             {isLocked && <span className="sidebar-item-actions">
               <span className="sidebar-item-action fa fa-thumb-tack"></span>
             </span>}

client/app/scripts/utils/data-utils.js

@@ -1,6 +1,7 @@
 import _ from 'lodash';
 import d3 from 'd3';
 import { formatMetric } from './string-utils';
+import AppStore from '../stores/app-store';
 
 
 // Inspired by Lee Byron's test data generator.
@@ -78,6 +79,10 @@ export function addMetrics(delta, prevNodes) {
   });
 }
 
+const openFilesScale = d3.scale.log().domain([1, 100000]).range([0, 1]);
+//
+// loadScale(1) == 0.5; E.g. a nicely balanced system :).
+const loadScale = d3.scale.log().domain([0.01, 100]).range([0, 1]);
 
 export function getMetricValue(metric, size) {
   if (!metric) {
@@ -86,7 +91,14 @@ export function getMetricValue(metric, size) {
 
   const max = metric.getIn(['max']);
   const value = metric.getIn(['samples', 0, 'value']);
-  const valuePercentage = value === 0 ? 0 : value / max;
+
+  let valuePercentage = value === 0 ? 0 : value / max;
+  if (AppStore.getSelectedMetric() === 'open_files_count') {
+    valuePercentage = openFilesScale(value);
+  } else if (_.includes(['load1', 'load5', 'load15'], AppStore.getSelectedMetric())) {
+    valuePercentage = loadScale(value);
+  }
+
   const baseline = 0.05;
   const displayedValue = valuePercentage * (1 - baseline) + baseline;
   const height = size * displayedValue;

client/app/styles/main.less

@@ -387,8 +387,6 @@ h2 {
     }
   }
 
-  .shape {
-
   .stack .shape .highlighted {
     display: none;
   }