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>}