Skip to content

N
nexpie-grafana-theme
Commit dafc9553 by kay delaney Committed by GitHub
Options

Chore: Converts HelpModal from angular to react (#19474)

parent b0b306a1
Showing with 95 additions and 103 deletions
public/app/core/angular_wrappers.ts
......@@ -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, []);
......
public/app/core/components/help/help.ts → public/app/core/components/help/HelpModal.tsx
import coreModule from '../../core_module';
import appEvents from 'app/core/app_events';
import React from 'react';
import { appEvents } from 'app/core/core';
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',
},
],
};
}
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');
}
}
export function helpModal() {
return {
restrict: 'E',
templateUrl: 'public/app/core/components/help/help.html',
controller: HelpCtrl,
bindToController: true,
transclude: true,
controllerAs: 'ctrl',
scope: {},
};
}
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>
))}
coreModule.directive('helpModal', helpModal);
<div className="clearfix" />
</div>
</div>
);
}
}
public/app/core/components/help/help.html deleted 100644 → 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>
public/app/core/core.ts
......@@ -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,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment