From c7bf7df97500b8d3b3089a7d98e910ae08a363ee Mon Sep 17 00:00:00 2001
From: Filip Barl <filip.barl@gmail.com>
Date: Wed, 26 Apr 2017 14:26:47 +0200
Subject: [PATCH] Fixed view mode switching keyboard shortcuts (#2471)

* Replaced toggleGridMode with working actions.

* Addressed @foot's comment.
---
 client/app/scripts/components/app.js        | 24 +++++++++++++++++----
 client/app/scripts/components/help-panel.js |  5 +++--
 client/app/styles/_base.scss                |  2 +-
 3 files changed, 24 insertions(+), 7 deletions(-)

diff --git a/client/app/scripts/components/app.js b/client/app/scripts/components/app.js
index de82efc60..36d7e3614 100644
--- a/client/app/scripts/components/app.js
+++ b/client/app/scripts/components/app.js
@@ -12,8 +12,20 @@ import Status from './status';
 import Topologies from './topologies';
 import TopologyOptions from './topology-options';
 import { getApiDetails, getTopologies } from '../utils/web-api-utils';
-import { focusSearch, pinNextMetric, hitBackspace, hitEnter, hitEsc, unpinMetric,
-  selectMetric, toggleHelp, toggleGridMode, shutdown } from '../actions/app-actions';
+import {
+  focusSearch,
+  pinNextMetric,
+  hitBackspace,
+  hitEnter,
+  hitEsc,
+  unpinMetric,
+  selectMetric,
+  toggleHelp,
+  setGraphView,
+  setTableView,
+  setResourceView,
+  shutdown
+} from '../actions/app-actions';
 import Details from './details';
 import Nodes from './nodes';
 import ViewModeSelector from './view-mode-selector';
@@ -92,8 +104,12 @@ class App extends React.Component {
         dispatch(pinNextMetric(-1));
       } else if (char === '>') {
         dispatch(pinNextMetric(1));
-      } else if (char === 't' || char === 'g') {
-        dispatch(toggleGridMode());
+      } else if (char === 'g') {
+        dispatch(setGraphView());
+      } else if (char === 't') {
+        dispatch(setTableView());
+      } else if (char === 'r') {
+        dispatch(setResourceView());
       } else if (char === 'q') {
         dispatch(unpinMetric());
         dispatch(selectMetric(null));
diff --git a/client/app/scripts/components/help-panel.js b/client/app/scripts/components/help-panel.js
index 2ee6fda96..12b243f53 100644
--- a/client/app/scripts/components/help-panel.js
+++ b/client/app/scripts/components/help-panel.js
@@ -10,8 +10,9 @@ const GENERAL_SHORTCUTS = [
   {key: 'esc', label: 'Close active panel'},
   {key: '/', label: 'Activate search field'},
   {key: '?', label: 'Toggle shortcut menu'},
-  {key: 't', label: 'Toggle Table mode'},
-  {key: 'g', label: 'Toggle Graph mode'},
+  {key: 'g', label: 'Switch to Graph view'},
+  {key: 't', label: 'Switch to Table view'},
+  {key: 'r', label: 'Switch to Resources view'},
 ];
 
 
diff --git a/client/app/styles/_base.scss b/client/app/styles/_base.scss
index a8c68c300..5d61053ba 100644
--- a/client/app/styles/_base.scss
+++ b/client/app/styles/_base.scss
@@ -1638,7 +1638,7 @@
         box-shadow: inset 0 -1px 0 #bbb;
       }
       div.key {
-        width: 80px;
+        width: 60px;
         display: inline-block;
       }
       div.label {