Skip to content

Commit 40ea014

Browse files
torkelotorkelo
committed
ux(dashboar): added shortcut for build mode, switched keybinding lib to mousetrap, supports sequences so also added for Go to home dashboard, open search with starred dashbords prefiltered, go to profile, grafana#6442 
1 parent 3c14352 commit 40ea014

File tree

16 files changed

+155
-113
lines changed

16 files changed

+155
-113
lines changed

‎package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -73,6 +73,7 @@
7373
"grunt-sync": "^0.4.1",
7474
"karma-sinon": "^1.0.3",
7575
"lodash": "^2.4.1",
76+
"mousetrap": "^1.6.0",
7677
"remarkable": "^1.6.2",
7778
"sinon": "1.16.1",
7879
"systemjs-builder": "^0.15.13",

‎public/app/core/components/search/search.ts

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export class SearchCtrl {
2929
this.isOpen = this.ignoreClose;
3030
}
3131

32-
openSearch() {
32+
openSearch(evt, payload) {
3333
if (this.isOpen) {
3434
this.isOpen = false;
3535
return;
@@ -43,6 +43,10 @@ export class SearchCtrl {
4343
this.currentSearchId = 0;
4444
this.ignoreClose = true;
4545

46+
if (payload && payload.starred) {
47+
this.query.starred = true;
48+
}
49+
4650
this.$timeout(() => {
4751
this.ignoreClose = false;
4852
this.giveSearchFocus = this.giveSearchFocus + 1;

‎public/app/core/core.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,7 @@ import appEvents from './app_events';
4444
import colors from './utils/colors';
4545
import {assignModelProperties} from './utils/model_utils';
4646
import {contextSrv} from './services/context_srv';
47+
import {KeybindingSrv} from './services/keybindingSrv';
4748

4849

4950
export {
@@ -66,4 +67,5 @@ export {
6667
colors,
6768
assignModelProperties,
6869
contextSrv,
70+
KeybindingSrv,
6971
};

‎public/app/core/services/keybindingSrv.ts

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
///<reference path="../../headers/common.d.ts" />
2+
3+
import $ from 'jquery';
4+
5+
import coreModule from 'app/core/core_module';
6+
import appEvents from 'app/core/app_events';
7+
8+
import Mousetrap from 'mousetrap';
9+
10+
export class KeybindingSrv {
11+
helpModal: boolean;
12+
13+
/** @ngInject */
14+
constructor(private $rootScope, private $modal, private $location) {
15+
// clear out all shortcuts on route change
16+
$rootScope.$on('$routeChangeSuccess', () => {
17+
Mousetrap.reset();
18+
// rebind global shortcuts
19+
this.setupGlobal();
20+
});
21+
22+
this.setupGlobal();
23+
}
24+
25+
26+
setupGlobal() {
27+
this.bind("?", this.showHelpModal);
28+
this.bind("g h", this.goToHome);
29+
this.bind("g p", this.goToProfile);
30+
this.bind("s s", this.openSearchStarred);
31+
this.bind(['f'], this.openSearch);
32+
}
33+
34+
openSearchStarred() {
35+
this.$rootScope.appEvent('show-dash-search', {starred: true});
36+
}
37+
38+
openSearch() {
39+
this.$rootScope.appEvent('show-dash-search');
40+
}
41+
42+
goToHome() {
43+
this.$location.path("/");
44+
}
45+
46+
goToProfile() {
47+
this.$location.path("/profile");
48+
}
49+
50+
showHelpModal() {
51+
console.log('showing help modal');
52+
appEvents.emit('show-modal', {
53+
src: 'public/app/partials/help_modal.html',
54+
model: {}
55+
});
56+
}
57+
58+
bind(keyArg, fn) {
59+
Mousetrap.bind(keyArg, evt => {
60+
evt.preventDefault();
61+
evt.stopPropagation();
62+
return this.$rootScope.$apply(fn.bind(this));
63+
});
64+
}
65+
66+
setupDashboardBindings(scope, dashboard) {
67+
this.bind('b', () => {
68+
dashboard.toggleEditMode();
69+
});
70+
71+
this.bind('ctrl+o', () => {
72+
dashboard.sharedCrosshair = !dashboard.sharedCrosshair;
73+
scope.broadcastRefresh();
74+
});
75+
76+
this.bind(['ctrl+s', 'command+s'], () => {
77+
scope.appEvent('save-dashboard');
78+
});
79+
80+
this.bind('r', () => {
81+
scope.broadcastRefresh();
82+
});
83+
84+
this.bind('ctrl+z', () => {
85+
scope.appEvent('zoom-out');
86+
});
87+
88+
this.bind('left', () => {
89+
scope.appEvent('shift-time-backward');
90+
});
91+
92+
this.bind('right', () => {
93+
scope.appEvent('shift-time-forward');
94+
});
95+
96+
this.bind('ctrl+i', () => {
97+
scope.appEvent('quick-snapshot');
98+
});
99+
100+
this.bind('esc', () => {
101+
var popups = $('.popover.in');
102+
if (popups.length > 0) {
103+
return;
104+
}
105+
// close modals
106+
var modalData = $(".modal").data();
107+
if (modalData && modalData.$scope && modalData.$scope.dismiss) {
108+
modalData.$scope.dismiss();
109+
}
110+
111+
scope.appEvent('hide-dash-editor');
112+
113+
scope.exitFullscreen();
114+
});
115+
}
116+
}
117+
118+
coreModule.service('keybindingSrv', KeybindingSrv);

‎public/app/core/services/util_srv.ts

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import coreModule from 'app/core/core_module';
88
import appEvents from 'app/core/app_events';
99

1010
export class UtilSrv {
11+
modalScope: any;
1112

1213
/** @ngInject */
1314
constructor(private $rootScope, private $modal) {
@@ -18,9 +19,15 @@ export class UtilSrv {
1819
}
1920

2021
showModal(options) {
22+
if (this.modalScope && this.modalScope.dismiss) {
23+
this.modalScope.dismiss();
24+
}
25+
2126
if (options.model) {
22-
options.scope = this.$rootScope.$new();
27+
options.scope = this.modalScope = this.$rootScope.$new();
2328
options.scope.model = options.model;
29+
} else {
30+
this.modalScope = options.scope;
2431
}
2532

2633
var modal = this.$modal({

‎public/app/features/dashboard/all.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@ define([
99
'./shareModalCtrl',
1010
'./shareSnapshotCtrl',
1111
'./dashboard_srv',
12-
'./keybindings',
1312
'./viewStateSrv',
1413
'./timeSrv',
1514
'./unsavedChangesSrv',

‎public/app/features/dashboard/dashboard_ctrl.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ export class DashboardCtrl {
1313
constructor(
1414
private $scope,
1515
private $rootScope,
16-
dashboardKeybindings,
16+
keybindingSrv,
1717
timeSrv,
1818
variableSrv,
1919
alertingSrv,
@@ -61,7 +61,7 @@ export class DashboardCtrl {
6161
$scope.dashboardMeta = dashboard.meta;
6262
$scope.dashboardViewState = dashboardViewStateSrv.create($scope);
6363

64-
dashboardKeybindings.shortcuts($scope);
64+
keybindingSrv.setupDashboardBindings($scope, dashboard);
6565

6666
$scope.dashboard.updateSubmenuVisibility();
6767
$scope.setWindowTitleAndTheme();

‎public/app/features/dashboard/keybindings.js

Lines changed: 0 additions & 96 deletions
This file was deleted.

‎public/app/features/dashboard/partials/settings.html

Lines changed: 0 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -55,12 +55,6 @@ <h5 class="section-heading">Toggles</h5>
5555
checked="dashboard.editable"
5656
label-class="width-11">
5757
</gf-form-switch>
58-
<gf-form-switch class="gf-form"
59-
label="Build Mode"
60-
tooltip="Enable build mode. Shortcut: CTRL+B"
61-
checked="dashboard.editMode"
62-
label-class="width-11">
63-
</gf-form-switch>
6458
<gf-form-switch class="gf-form"
6559
label="Shared Crosshair"
6660
tooltip="Shared Crosshair line on all graphs. Shortcut: CTRL+O"

‎public/app/headers/common.d.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -57,3 +57,8 @@ declare module 'virtual-scroll' {
5757
var config: any;
5858
export default config;
5959
}
60+
61+
declare module 'mousetrap' {
62+
var config: any;
63+
export default config;
64+
}

‎public/app/plugins/panel/graph/graph.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -535,9 +535,9 @@ module.directive('grafanaGraph', function($rootScope, timeSrv) {
535535
return "%H:%M";
536536
}
537537

538-
// new GraphTooltip(elem, dashboard, scope, function() {
539-
// return sortedSeries;
540-
// });
538+
new GraphTooltip(elem, dashboard, scope, function() {
539+
return sortedSeries;
540+
});
541541

542542
elem.bind("plotselected", function (event, ranges) {
543543
scope.$apply(function() {

‎public/app/plugins/panel/graph/threshold_manager.ts

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -153,8 +153,8 @@ export class ThresholdManager {
153153
this.renderHandle(1, this.height-30);
154154
}
155155

156-
// this.placeholder.off('mousedown', '.alert-handle');
157-
// this.placeholder.on('mousedown', '.alert-handle', this.initDragging.bind(this));
156+
this.placeholder.off('mousedown', '.alert-handle');
157+
this.placeholder.on('mousedown', '.alert-handle', this.initDragging.bind(this));
158158
this.needsCleanup = true;
159159
}
160160

‎public/app/system.conf.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ System.config({
33
baseURL: 'public',
44
paths: {
55
'virtual-scroll': 'vendor/npm/virtual-scroll/src/index.js',
6+
'mousetrap': 'vendor/npm/mousetrap/mousetrap.js',
67
'remarkable': 'vendor/npm/remarkable/dist/remarkable.js',
78
'tether': 'vendor/npm/tether/dist/js/tether.js',
89
'eventemitter3': 'vendor/npm/eventemitter3/index.js',
@@ -66,5 +67,9 @@ System.config({
6667
format: 'cjs',
6768
exports: 'EventEmitter'
6869
},
70+
'vendor/npm/mousetrap/mousetrap.js': {
71+
format: 'global',
72+
exports: 'Mousetrap'
73+
},
6974
}
7075
});

‎public/sass/_variables.dark.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -265,7 +265,7 @@ $tooltipBackground: $popover-help-bg;
265265
$tooltipArrowWidth: 5px;
266266
$tooltipArrowColor: $tooltipBackground;
267267
$tooltipLinkColor: $link-color;
268-
$graph-tooltip-bg: $dark-4;
268+
$graph-tooltip-bg: $dark-1;
269269

270270
// images
271271
$checkboxImageUrl: '../img/checkbox.png';

‎public/sass/components/_panel_graph.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -244,6 +244,8 @@
244244
position: relative;
245245
top: -3px;
246246
padding: 0.2rem;
247+
font-weight: bold;
248+
color: $text-color;
247249
}
248250

249251
.graph-tooltip-list-item {

‎tasks/options/copy.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ module.exports = function(config) {
3333
'remarkable/dist/*',
3434
'remarkable/dist/*',
3535
'virtual-scroll/**/*',
36+
'mousetrap/**/*',
3637
],
3738
dest: '<%= srcDir %>/vendor/npm'
3839
}

0 commit comments

Comments
 (0)