mirror of
https://github.com/grafana/grafana.git
synced 2025-02-25 18:55:37 -06:00
Chore: Converts HelpModal from angular to react (#19474)
This commit is contained in:
kay delaney
GitHub
@@ -13,8 +13,10 @@ import { SearchField } from './components/search/SearchField';
|
||||
import { GraphContextMenu } from 'app/plugins/panel/graph/GraphContextMenu';
|
||||
import ReactProfileWrapper from 'app/features/profile/ReactProfileWrapper';
|
||||
import { LokiAnnotationsQueryEditor } from '../plugins/datasource/loki/components/AnnotationsQueryEditor';
|
||||
import { HelpModal } from './components/help/HelpModal';
|
||||
|
||||
export function registerAngularDirectives() {
|
||||
react2AngularDirective('helpModal', HelpModal, []);
|
||||
react2AngularDirective('sidemenu', SideMenu, []);
|
||||
react2AngularDirective('functionEditor', FunctionEditor, ['func', 'onRemove', 'onMoveLeft', 'onMoveRight']);
|
||||
react2AngularDirective('appNotificationsList', AppNotificationList, []);
|
||||
|
||||
100
public/app/core/components/help/HelpModal.tsx
Normal file
100
public/app/core/components/help/HelpModal.tsx
Normal file
@@ -0,0 +1,100 @@
|
||||
import React from 'react';
|
||||
import { appEvents } from 'app/core/core';
|
||||
|
||||
export class HelpModal extends React.PureComponent {
|
||||
static tabIndex = 0;
|
||||
static shortcuts = {
|
||||
Global: [
|
||||
{ keys: ['g', 'h'], description: 'Go to Home Dashboard' },
|
||||
{ keys: ['g', 'p'], description: 'Go to Profile' },
|
||||
{ keys: ['s', 'o'], description: 'Open search' },
|
||||
{ keys: ['esc'], description: 'Exit edit/setting views' },
|
||||
],
|
||||
Dashboard: [
|
||||
{ keys: ['mod+s'], description: 'Save dashboard' },
|
||||
{ keys: ['d', 'r'], description: 'Refresh all panels' },
|
||||
{ keys: ['d', 's'], description: 'Dashboard settings' },
|
||||
{ keys: ['d', 'v'], description: 'Toggle in-active / view mode' },
|
||||
{ keys: ['d', 'k'], description: 'Toggle kiosk mode (hides top nav)' },
|
||||
{ keys: ['d', 'E'], description: 'Expand all rows' },
|
||||
{ keys: ['d', 'C'], description: 'Collapse all rows' },
|
||||
{ keys: ['d', 'a'], description: 'Toggle auto fit panels (experimental feature)' },
|
||||
{ keys: ['mod+o'], description: 'Toggle shared graph crosshair' },
|
||||
{ keys: ['d', 'l'], description: 'Toggle all panel legends' },
|
||||
],
|
||||
'Focused Panel': [
|
||||
{ keys: ['e'], description: 'Toggle panel edit view' },
|
||||
{ keys: ['v'], description: 'Toggle panel fullscreen view' },
|
||||
{ keys: ['p', 's'], description: 'Open Panel Share Modal' },
|
||||
{ keys: ['p', 'd'], description: 'Duplicate Panel' },
|
||||
{ keys: ['p', 'r'], description: 'Remove Panel' },
|
||||
{ keys: ['p', 'l'], description: 'Toggle panel legend' },
|
||||
],
|
||||
'Time Range': [
|
||||
{ keys: ['t', 'z'], description: 'Zoom out time range' },
|
||||
{
|
||||
keys: ['t', <i className="fa fa-long-arrow-left" />],
|
||||
description: 'Move time range back',
|
||||
},
|
||||
{
|
||||
keys: ['t', <i className="fa fa-long-arrow-right" />],
|
||||
description: 'Move time range forward',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
dismiss() {
|
||||
appEvents.emit('hide-modal');
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<div className="modal-body">
|
||||
<div className="modal-header">
|
||||
<h2 className="modal-header-title">
|
||||
<i className="fa fa-keyboard-o" />
|
||||
<span className="p-l-1">Shortcuts</span>
|
||||
</h2>
|
||||
<a className="modal-header-close" onClick={this.dismiss}>
|
||||
<i className="fa fa-remove" />
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div className="modal-content help-modal">
|
||||
<p className="small" style={{ position: 'absolute', top: '13px', right: '44px' }}>
|
||||
<span className="shortcut-table-key">mod</span> =
|
||||
<span className="muted"> CTRL on windows or linux and CMD key on Mac</span>
|
||||
</p>
|
||||
|
||||
{Object.entries(HelpModal.shortcuts).map(([category, shortcuts], i) => (
|
||||
<div className="shortcut-category" key={i}>
|
||||
<table className="shortcut-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th className="shortcut-table-category-header" colSpan={2}>
|
||||
{category}
|
||||
</th>
|
||||
</tr>
|
||||
{shortcuts.map((shortcut, j) => (
|
||||
<tr key={`${i}-${j}`}>
|
||||
<td className="shortcut-table-keys">
|
||||
{shortcut.keys.map((key, k) => (
|
||||
<span className="shortcut-table-key" key={`${i}-${j}-${k}`}>
|
||||
{key}
|
||||
</span>
|
||||
))}
|
||||
</td>
|
||||
<td className="shortcut-table-description">{shortcut.description}</td>
|
||||
</tr>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<div className="clearfix" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -1,39 +0,0 @@
|
||||
<div class="modal-body">
|
||||
<div class="modal-header">
|
||||
<h2 class="modal-header-title">
|
||||
<i class="fa fa-keyboard-o"></i>
|
||||
<span class="p-l-1">Shortcuts</span>
|
||||
</h2>
|
||||
<a class="modal-header-close" ng-click="ctrl.dismiss();">
|
||||
<i class="fa fa-remove"></i>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="modal-content help-modal">
|
||||
|
||||
<p class="small" style="position: absolute; top: 13px; right: 44px">
|
||||
<span class="shortcut-table-key">mod</span> =
|
||||
<span class="muted">CTRL on windows or linux and CMD key on Mac</span>
|
||||
</p>
|
||||
|
||||
<div ng-repeat="(category, shortcuts) in ctrl.shortcuts" class="shortcut-category">
|
||||
<table class="shortcut-table">
|
||||
<tbody>
|
||||
<tr>
|
||||
<th class="shortcut-table-category-header" colspan="2">{{category}}</th>
|
||||
</tr>
|
||||
<tr ng-repeat="shortcut in shortcuts">
|
||||
<td class="shortcut-table-keys">
|
||||
<span class="shortcut-table-key" ng-repeat="key in shortcut.keys track by $index" ng-bind-html="key">
|
||||
</span>
|
||||
</td>
|
||||
<td class="shortcut-table-description">{{shortcut.description}}</td>
|
||||
</tr>
|
||||
<tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<div class="clearfix"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
@@ -1,69 +0,0 @@
|
||||
import coreModule from '../../core_module';
|
||||
import appEvents from 'app/core/app_events';
|
||||
|
||||
export class HelpCtrl {
|
||||
tabIndex: any;
|
||||
shortcuts: any;
|
||||
|
||||
/** @ngInject */
|
||||
constructor() {
|
||||
this.tabIndex = 0;
|
||||
this.shortcuts = {
|
||||
Global: [
|
||||
{ keys: ['g', 'h'], description: 'Go to Home Dashboard' },
|
||||
{ keys: ['g', 'p'], description: 'Go to Profile' },
|
||||
{ keys: ['s', 'o'], description: 'Open search' },
|
||||
{ keys: ['esc'], description: 'Exit edit/setting views' },
|
||||
],
|
||||
Dashboard: [
|
||||
{ keys: ['mod+s'], description: 'Save dashboard' },
|
||||
{ keys: ['d', 'r'], description: 'Refresh all panels' },
|
||||
{ keys: ['d', 's'], description: 'Dashboard settings' },
|
||||
{ keys: ['d', 'v'], description: 'Toggle in-active / view mode' },
|
||||
{ keys: ['d', 'k'], description: 'Toggle kiosk mode (hides top nav)' },
|
||||
{ keys: ['d', 'E'], description: 'Expand all rows' },
|
||||
{ keys: ['d', 'C'], description: 'Collapse all rows' },
|
||||
{ keys: ['d', 'a'], description: 'Toggle auto fit panels (experimental feature)' },
|
||||
{ keys: ['mod+o'], description: 'Toggle shared graph crosshair' },
|
||||
{ keys: ['d', 'l'], description: 'Toggle all panel legends' },
|
||||
],
|
||||
'Focused Panel': [
|
||||
{ keys: ['e'], description: 'Toggle panel edit view' },
|
||||
{ keys: ['v'], description: 'Toggle panel fullscreen view' },
|
||||
{ keys: ['p', 's'], description: 'Open Panel Share Modal' },
|
||||
{ keys: ['p', 'd'], description: 'Duplicate Panel' },
|
||||
{ keys: ['p', 'r'], description: 'Remove Panel' },
|
||||
{ keys: ['p', 'l'], description: 'Toggle panel legend' },
|
||||
],
|
||||
'Time Range': [
|
||||
{ keys: ['t', 'z'], description: 'Zoom out time range' },
|
||||
{
|
||||
keys: ['t', '<i class="fa fa-long-arrow-left"></i>'],
|
||||
description: 'Move time range back',
|
||||
},
|
||||
{
|
||||
keys: ['t', '<i class="fa fa-long-arrow-right"></i>'],
|
||||
description: 'Move time range forward',
|
||||
},
|
||||
],
|
||||
};
|
||||
}
|
||||
|
||||
dismiss() {
|
||||
appEvents.emit('hide-modal');
|
||||
}
|
||||
}
|
||||
|
||||
export function helpModal() {
|
||||
return {
|
||||
restrict: 'E',
|
||||
templateUrl: 'public/app/core/components/help/help.html',
|
||||
controller: HelpCtrl,
|
||||
bindToController: true,
|
||||
transclude: true,
|
||||
controllerAs: 'ctrl',
|
||||
scope: {},
|
||||
};
|
||||
}
|
||||
|
||||
coreModule.directive('helpModal', helpModal);
|
||||
@@ -37,7 +37,6 @@ import appEvents from './app_events';
|
||||
import { assignModelProperties } from './utils/model_utils';
|
||||
import { contextSrv } from './services/context_srv';
|
||||
import { KeybindingSrv } from './services/keybindingSrv';
|
||||
import { helpModal } from './components/help/help';
|
||||
import { NavModelSrv } from './nav_model_srv';
|
||||
import { geminiScrollbar } from './components/scroll/scroll';
|
||||
import { orgSwitcher } from './components/org_switcher';
|
||||
@@ -69,7 +68,6 @@ export {
|
||||
assignModelProperties,
|
||||
contextSrv,
|
||||
KeybindingSrv,
|
||||
helpModal,
|
||||
JsonExplorer,
|
||||
NavModelSrv,
|
||||
NavModel,
|
||||
|
||||
Reference in New Issue
Block a user