diff --git a/packages/grafana-ui/src/components/Monaco/CodeEditor.story.internal.tsx b/packages/grafana-ui/src/components/Monaco/CodeEditor.story.internal.tsx index 174f5ea9e71..868ddeaf055 100644 --- a/packages/grafana-ui/src/components/Monaco/CodeEditor.story.internal.tsx +++ b/packages/grafana-ui/src/components/Monaco/CodeEditor.story.internal.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { number, text } from '@storybook/addon-knobs'; +import { number, text, boolean } from '@storybook/addon-knobs'; import { action } from '@storybook/addon-actions'; import { withCenteredStory } from '../../utils/storybook/withCenteredStory'; import mdx from './CodeEditor.mdx'; @@ -24,6 +24,9 @@ const getKnobs = () => { containerWidth, text: text('Body', 'SELECT * FROM table LIMIT 10'), language: text('Language', 'sql'), + showLineNumbers: boolean('Show line numbers', false), + showMiniMap: boolean('Show mini map', false), + readOnly: boolean('readonly', false), }; }; @@ -39,7 +42,7 @@ export default { }; export const basic = () => { - const { containerWidth, text, language } = getKnobs(); + const { containerWidth, text, language, showLineNumbers, showMiniMap, readOnly } = getKnobs(); return ( { onSave={(text: string) => { action('code saved')(text); }} + showLineNumbers={showLineNumbers} + showMiniMap={showMiniMap} + readOnly={readOnly} /> ); }; diff --git a/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx b/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx index 4dc786c1492..766881ae51f 100644 --- a/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx +++ b/packages/grafana-ui/src/components/Monaco/CodeEditor.tsx @@ -12,6 +12,7 @@ export interface CodeEditorProps { readOnly?: boolean; showMiniMap?: boolean; + showLineNumbers?: boolean; /** * Callback after the editor has mounted that gives you raw access to monaco @@ -56,10 +57,31 @@ class UnthemedCodeEditor extends React.PureComponent { }; render() { - const { theme, language, width, height, showMiniMap, readOnly } = this.props; + const { theme, language, width, height, showMiniMap, showLineNumbers, readOnly } = this.props; const value = this.props.value ?? ''; const longText = value.length > 100; + const options: editor.IEditorConstructionOptions = { + wordWrap: 'off', + codeLens: false, // not included in the bundle + minimap: { + enabled: longText && showMiniMap, + renderCharacters: false, + }, + readOnly, + lineNumbersMinChars: 4, + lineDecorationsWidth: 0, + overviewRulerBorder: false, + automaticLayout: true, + }; + if (!showLineNumbers) { + options.glyphMargin = false; + options.folding = false; + options.lineNumbers = 'off'; + options.lineDecorationsWidth = 5; // left margin when not showing line numbers + options.lineNumbersMinChars = 0; + } + return (
{ language={language} theme={theme.isDark ? 'vs-dark' : 'vs-light'} value={value} - options={{ - wordWrap: 'off', - codeLens: false, // not included in the bundle - minimap: { - enabled: longText && showMiniMap, - renderCharacters: false, - }, - readOnly, - lineNumbersMinChars: 4, - lineDecorationsWidth: 0, - overviewRulerBorder: false, - automaticLayout: true, - }} + options={options} editorDidMount={this.editorDidMount} />
diff --git a/public/app/features/dashboard/components/Inspector/InspectJSONTab.tsx b/public/app/features/dashboard/components/Inspector/InspectJSONTab.tsx index 0e236b62b96..38e7a3ed8f3 100644 --- a/public/app/features/dashboard/components/Inspector/InspectJSONTab.tsx +++ b/public/app/features/dashboard/components/Inspector/InspectJSONTab.tsx @@ -116,7 +116,7 @@ export class InspectJSONTab extends PureComponent { render() { const { dashboard } = this.props; - const { show } = this.state; + const { show, text } = this.state; const selected = options.find(v => v.value === show); const isPanelJSON = show === ShowContent.PanelJSON; const canEdit = dashboard.meta.canEdit; @@ -141,7 +141,9 @@ export class InspectJSONTab extends PureComponent { width="100%" height={height} language="json" - value={this.state.text} + showLineNumbers={true} + showMiniMap={text && text.length > 100} + value={text || ''} readOnly={!isPanelJSON} onBlur={this.onTextChanged} /> diff --git a/public/app/plugins/panel/text/TextPanelEditor.tsx b/public/app/plugins/panel/text/TextPanelEditor.tsx index 39936acbbba..45882216fd3 100644 --- a/public/app/plugins/panel/text/TextPanelEditor.tsx +++ b/public/app/plugins/panel/text/TextPanelEditor.tsx @@ -26,6 +26,7 @@ export const TextPanelEditor: FC> language={language} width={width} showMiniMap={false} + showLineNumbers={false} height="200px" /> );