diff --git a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx index 8dab06dba43..7606d327405 100644 --- a/public/app/features/dashboard/dashgrid/EditorTabBody.tsx +++ b/public/app/features/dashboard/dashgrid/EditorTabBody.tsx @@ -1,6 +1,10 @@ +// Libraries import React, { PureComponent } from 'react'; + +// Components import CustomScrollbar from 'app/core/components/CustomScrollbar/CustomScrollbar'; import { FadeIn } from 'app/core/components/Animations/FadeIn'; +import { PanelOptionSection } from './PanelOptionSection'; interface Props { children: JSX.Element; @@ -89,15 +93,9 @@ export class EditorTabBody extends PureComponent { renderOpenView(view: EditorToolBarView) { return ( -
-
- {view.title || view.heading} - -
-
{view.render(this.onCloseOpenView)}
-
+ + {view.render()} + ); } diff --git a/public/app/features/dashboard/dashgrid/PanelOptionSection.tsx b/public/app/features/dashboard/dashgrid/PanelOptionSection.tsx new file mode 100644 index 00000000000..f38d99d2237 --- /dev/null +++ b/public/app/features/dashboard/dashgrid/PanelOptionSection.tsx @@ -0,0 +1,26 @@ +// Libraries +import React, { SFC } from 'react'; + +interface Props { + title?: string; + onClose?: () => void; + children: JSX.Element | JSX.Element[]; +} + +export const PanelOptionSection: SFC = props => { + return ( +
+ {props.title && ( +
+ {props.title} + {props.onClose && ( + + )} +
+ )} +
{props.children}
+
+ ); +}; diff --git a/public/app/features/dashboard/dashgrid/QueriesTab.tsx b/public/app/features/dashboard/dashgrid/QueriesTab.tsx index 03ae9a97777..cd26defbed3 100644 --- a/public/app/features/dashboard/dashgrid/QueriesTab.tsx +++ b/public/app/features/dashboard/dashgrid/QueriesTab.tsx @@ -10,6 +10,7 @@ import { DataSourcePicker } from './DataSourcePicker'; import { QueryInspector } from './QueryInspector'; import { QueryOptions } from './QueryOptions'; import { AngularQueryComponentScope } from 'app/features/panel/metrics_tab'; +import { PanelOptionSection } from './PanelOptionSection'; // Services import { getDatasourceSrv } from 'app/features/plugins/datasource_srv'; @@ -256,37 +257,31 @@ export class QueriesTab extends PureComponent { return ( <> -
- {/*
Queries
*/} -
-
-
(this.element = element)} /> + +
+
(this.element = element)} /> -
-
- - {!isAddingMixed && ( - - )} - {isAddingMixed && this.renderMixedPicker()} -
+
+
+ + {!isAddingMixed && ( + + )} + {isAddingMixed && this.renderMixedPicker()}
-
-
- {/*
Options
*/} -
- -
-
+ + + + ); diff --git a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx index 6015ad25e21..b6287bafdac 100644 --- a/public/app/features/dashboard/dashgrid/VisualizationTab.tsx +++ b/public/app/features/dashboard/dashgrid/VisualizationTab.tsx @@ -8,6 +8,7 @@ import { getAngularLoader, AngularComponent } from 'app/core/services/AngularLoa import { EditorTabBody } from './EditorTabBody'; import { VizTypePicker } from './VizTypePicker'; import { FadeIn } from 'app/core/components/Animations/FadeIn'; +import { PanelOptionSection } from './PanelOptionSection'; // Types import { PanelModel } from '../panel_model'; @@ -59,11 +60,15 @@ export class VisualizationTab extends PureComponent { return
(this.element = element)} />; } - if (PanelOptions) { - return ; - } else { - return

Visualization has no options

; - } + return ( + + {PanelOptions ? ( + + ) : ( +

Visualization has no options

+ )} +
+ ); } componentDidMount() { diff --git a/public/app/features/datasources/settings/__snapshots__/DataSourceSettings.test.tsx.snap b/public/app/features/datasources/settings/__snapshots__/DataSourceSettings.test.tsx.snap index dafff91a6f5..9da5904d1ae 100644 --- a/public/app/features/datasources/settings/__snapshots__/DataSourceSettings.test.tsx.snap +++ b/public/app/features/datasources/settings/__snapshots__/DataSourceSettings.test.tsx.snap @@ -12,17 +12,17 @@ exports[`Render should render alpha info text 1`] = `
+
+ This plugin is marked as being in alpha state, which means it is in early development phase and updates will include breaking changes. +
-
- This plugin is marked as being in alpha state, which means it is in early development phase and updates will include breaking changes. -
+
+ This plugin is marked as being in a beta development state. This means it is in currently in active development and could be missing important features. +
-
- This plugin is marked as being in a beta development state. This means it is in currently in active development and could be missing important features. -
+
+ This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource. +
-
- This datasource was added by config and cannot be modified using the UI. Please contact your server admin to update this datasource. -