No metric selected by default.

- Fixes metric keyboard selection order

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

@@ -1,25 +1,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import { selectMetric, lockMetric, unlockMetric } from '../actions/app-actions';
-
-
-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'
-};
-
-
-export function label(m) {
-  return METRIC_LABELS[m.id];
-}
+import { label } from '../utils/data-utils';
 
 
 export class MetricSelectorItem extends React.Component {

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

@@ -1,7 +1,6 @@
 import React from 'react';
-import _ from 'lodash';
 import { selectMetric } from '../actions/app-actions';
-import { MetricSelectorItem, label } from './metric-selector-item';
+import { MetricSelectorItem } from './metric-selector-item';
 
 // const CROSS = '\u274C';
 // const MINUS = '\u2212';
@@ -23,7 +22,7 @@ export default class MetricSelector extends React.Component {
   render() {
     const {availableCanvasMetrics} = this.props;
 
-    const items = _.sortBy(availableCanvasMetrics, label).map(metric => (
+    const items = availableCanvasMetrics.map(metric => (
       <MetricSelectorItem key={metric.id} metric={metric} {...this.props} />
     ));
 

client/app/scripts/stores/app-store.js

@@ -8,6 +8,7 @@ import ActionTypes from '../constants/action-types';
 import { EDGE_ID_SEPARATOR } from '../constants/naming';
 import { findTopologyById, setTopologyUrlsById, updateTopologyIds,
   filterHiddenTopologies } from '../utils/topology-utils';
+import { METRIC_LABELS } from '../utils/data-utils';
 
 const makeList = List;
 const makeMap = Map;
@@ -59,7 +60,7 @@ let controlPipes = makeOrderedMap(); // pipeId -> controlPipe
 let updatePausedAt = null; // Date
 let websocketClosed = true;
 
-let selectedMetric = 'process_cpu_usage_percent';
+let selectedMetric = null;
 let lockedMetric = selectedMetric;
 let availableCanvasMetrics = [];
 
@@ -604,7 +605,7 @@ export class AppStore extends Store {
           .valueSeq()
           .flatMap(n => (n.get('metrics') || makeMap()).keys())
           .toSet()
-          .sort()
+          .sortBy(n => METRIC_LABELS[n])
           .toJS()
           .map(v => ({id: v, label: v}));
 

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

@@ -41,6 +41,24 @@ function getNextValue(keyValues, maxValue) {
   return v;
 }
 
+export 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'
+};
+
+
+export function label(m) {
+  return METRIC_LABELS[m.id];
+}
+
 
 const METRIC_FORMATS = {
   docker_cpu_total_usage: 'percent',