keybindingSrv.ts 4.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204
  1. ///<reference path="../../headers/common.d.ts" />
  2. import $ from 'jquery';
  3. import _ from 'lodash';
  4. import coreModule from 'app/core/core_module';
  5. import appEvents from 'app/core/app_events';
  6. import Mousetrap from 'mousetrap';
  7. export class KeybindingSrv {
  8. helpModal: boolean;
  9. /** @ngInject */
  10. constructor(
  11. private $rootScope,
  12. private $modal,
  13. private $location,
  14. private contextSrv,
  15. private $timeout) {
  16. // clear out all shortcuts on route change
  17. $rootScope.$on('$routeChangeSuccess', () => {
  18. Mousetrap.reset();
  19. // rebind global shortcuts
  20. this.setupGlobal();
  21. });
  22. this.setupGlobal();
  23. }
  24. setupGlobal() {
  25. this.bind(['?', 'h'], this.showHelpModal);
  26. this.bind("g h", this.goToHome);
  27. this.bind("g a", this.openAlerting);
  28. this.bind("g p", this.goToProfile);
  29. this.bind("s s", this.openSearchStarred);
  30. this.bind('f', this.openSearch);
  31. }
  32. openSearchStarred() {
  33. this.$rootScope.appEvent('show-dash-search', {starred: true});
  34. }
  35. openSearch() {
  36. this.$rootScope.appEvent('show-dash-search');
  37. }
  38. openAlerting() {
  39. this.$location.url("/alerting");
  40. }
  41. goToHome() {
  42. this.$location.url("/");
  43. }
  44. goToProfile() {
  45. this.$location.url("/profile");
  46. }
  47. showHelpModal() {
  48. appEvents.emit('show-modal', {templateHtml: '<help-modal></help-modal>'});
  49. }
  50. bind(keyArg, fn) {
  51. Mousetrap.bind(keyArg, evt => {
  52. evt.preventDefault();
  53. evt.stopPropagation();
  54. evt.returnValue = false;
  55. return this.$rootScope.$apply(fn.bind(this));
  56. });
  57. }
  58. showDashEditView(view) {
  59. var search = _.extend(this.$location.search(), {editview: view});
  60. this.$location.search(search);
  61. }
  62. setupDashboardBindings(scope, dashboard) {
  63. // this.bind('b', () => {
  64. // dashboard.toggleEditMode();
  65. // });
  66. this.bind('mod+o', () => {
  67. dashboard.sharedCrosshair = !dashboard.sharedCrosshair;
  68. scope.broadcastRefresh();
  69. });
  70. this.bind('mod+h', () => {
  71. dashboard.hideControls = !dashboard.hideControls;
  72. });
  73. this.bind('mod+s', e => {
  74. scope.appEvent('save-dashboard');
  75. });
  76. this.bind('t z', () => {
  77. scope.appEvent('zoom-out');
  78. });
  79. this.bind('t left', () => {
  80. scope.appEvent('shift-time-backward');
  81. });
  82. this.bind('t right', () => {
  83. scope.appEvent('shift-time-forward');
  84. });
  85. this.bind('mod+i', () => {
  86. scope.appEvent('quick-snapshot');
  87. });
  88. // edit panel
  89. this.bind('e', () => {
  90. if (dashboard.meta.focusPanelId && dashboard.meta.canEdit) {
  91. this.$rootScope.appEvent('panel-change-view', {
  92. fullscreen: true,
  93. edit: true,
  94. panelId: dashboard.meta.focusPanelId,
  95. toggle: true
  96. });
  97. }
  98. });
  99. // view panel
  100. this.bind('v', () => {
  101. if (dashboard.meta.focusPanelId) {
  102. this.$rootScope.appEvent('panel-change-view', {
  103. fullscreen: true,
  104. edit: null,
  105. panelId: dashboard.meta.focusPanelId,
  106. toggle: true,
  107. });
  108. }
  109. });
  110. // delete panel
  111. this.bind('p r', () => {
  112. if (dashboard.meta.focusPanelId && dashboard.meta.canEdit) {
  113. var panelInfo = dashboard.getPanelInfoById(dashboard.meta.focusPanelId);
  114. panelInfo.row.removePanel(panelInfo.panel);
  115. dashboard.meta.focusPanelId = 0;
  116. }
  117. });
  118. // delete row
  119. this.bind('r r', () => {
  120. if (dashboard.meta.focusPanelId && dashboard.meta.canEdit) {
  121. var panelInfo = dashboard.getPanelInfoById(dashboard.meta.focusPanelId);
  122. dashboard.removeRow(panelInfo.row);
  123. dashboard.meta.focusPanelId = 0;
  124. }
  125. });
  126. // collapse row
  127. this.bind('r c', () => {
  128. if (dashboard.meta.focusPanelId) {
  129. var panelInfo = dashboard.getPanelInfoById(dashboard.meta.focusPanelId);
  130. panelInfo.row.toggleCollapse();
  131. dashboard.meta.focusPanelId = 0;
  132. }
  133. });
  134. // share panel
  135. this.bind('p s', () => {
  136. if (dashboard.meta.focusPanelId) {
  137. var shareScope = scope.$new();
  138. var panelInfo = dashboard.getPanelInfoById(dashboard.meta.focusPanelId);
  139. shareScope.panel = panelInfo.panel;
  140. shareScope.dashboard = dashboard;
  141. appEvents.emit('show-modal', {
  142. src: 'public/app/features/dashboard/partials/shareModal.html',
  143. scope: shareScope
  144. });
  145. }
  146. });
  147. this.bind('d r', () => {
  148. scope.broadcastRefresh();
  149. });
  150. this.bind('d s', () => {
  151. this.showDashEditView('settings');
  152. });
  153. this.bind('esc', () => {
  154. var popups = $('.popover.in');
  155. if (popups.length > 0) {
  156. return;
  157. }
  158. // close modals
  159. var modalData = $(".modal").data();
  160. if (modalData && modalData.$scope && modalData.$scope.dismiss) {
  161. modalData.$scope.dismiss();
  162. }
  163. scope.appEvent('hide-dash-editor');
  164. scope.exitFullscreen();
  165. });
  166. }
  167. }
  168. coreModule.service('keybindingSrv', KeybindingSrv);