IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Minor refactoring of new react text panel

Browse Source
This commit is contained in:
Torkel Ödegaard
2019-03-08 13:30:47 +01:00
parent 90f8179bd2
commit 48114edc86
2 changed files with 19 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
public/app/plugins/panel/text2/TextPanel.tsx
View File

@@ -1,9 +1,11 @@
// Libraries
import React, { PureComponent } from 'react';
import Remarkable from 'remarkable';
import { debounce } from 'lodash';
// Utils
import { sanitize } from 'app/core/utils/text';
import config from 'app/core/config';
import { debounce } from 'lodash';
// Types
import { TextOptions } from './types';
@@ -42,13 +44,8 @@ export class TextPanel extends PureComponent<Props, State> {
const { replaceVariables } = this.props;
html = config.disableSanitizeHtml ? html : sanitize(html);
try {
return replaceVariables(html);
} catch (e) {
// TODO -- put the error in the header window
console.log('Text panel error: ', e);
return html;
}
return replaceVariables(html);
}
prepareText(content: string): string {

20
public/app/plugins/panel/text2/TextPanelEditor.tsx
View File

@@ -1,6 +1,10 @@
import React, { PureComponent } from 'react';
// Libraries
import React, { PureComponent, ChangeEvent } from 'react';
// Components
import { PanelEditorProps, PanelOptionsGroup, Select, SelectOptionItem } from '@grafana/ui';
// Types
import { TextOptions } from './types';
export class TextPanelEditor extends PureComponent<PanelEditorProps<TextOptions>> {
@@ -12,19 +16,21 @@ export class TextPanelEditor extends PureComponent<PanelEditorProps<TextOptions>
onModeChange = (item: SelectOptionItem) => this.props.onOptionsChange({ ...this.props.options, mode: item.value });
onContentChange = evt => this.props.onOptionsChange({ ...this.props.options, content: (event.target as any).value });
onContentChange = (evt: ChangeEvent<HTMLTextAreaElement>) => {
this.props.onOptionsChange({ ...this.props.options, content: (event.target as any).value });
};
render() {
const { mode, content } = this.props.options;
return (
<PanelOptionsGroup title="Text">
<div className="gf-form">
<span className="gf-form-label">Mode</span>
<Select onChange={this.onModeChange} value={this.modes.find(e => mode === e.value)} options={this.modes} />
<div className="gf-form-inline">
<div className="gf-form">
<span className="gf-form-label">Mode</span>
<Select onChange={this.onModeChange} value={this.modes.find(e => mode === e.value)} options={this.modes} />
</div>
</div>
{/* TODO: <code-editor */}
<textarea value={content} onChange={this.onContentChange} className="gf-form-input" rows={10} />
</PanelOptionsGroup>
);