From e0b576fff4ab1fa7d548f13531164238d544ce92 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Tue, 5 Oct 2021 08:07:57 +0200 Subject: [PATCH] PanelContext: Adds app property of type CoreApp enum to inform panel about what the outer container/app is (#39952) * PanelContext: Adds a container enum / string to inform panel about what the outer container/app state is * Changing to use existing CoreApp * fixing unified alerting type errors --- packages/grafana-data/src/types/app.ts | 8 +++- .../components/PanelChrome/PanelContext.ts | 5 +++ .../dashboard/dashgrid/PanelChrome.tsx | 37 ++++++++++++------- .../query/components/QueryEditorRow.tsx | 3 +- public/app/plugins/panel/debug/StateView.tsx | 8 ++-- 5 files changed, 43 insertions(+), 18 deletions(-) diff --git a/packages/grafana-data/src/types/app.ts b/packages/grafana-data/src/types/app.ts index cebc1712465..252393230fa 100644 --- a/packages/grafana-data/src/types/app.ts +++ b/packages/grafana-data/src/types/app.ts @@ -3,11 +3,17 @@ import { KeyValue } from './data'; import { NavModel } from './navModel'; import { PluginMeta, GrafanaPlugin, PluginIncludeType } from './plugin'; +/** + * @public + * The app container that is loading another plugin (panel or query editor) + * */ export enum CoreApp { + CloudAlerting = 'cloud-alerting', Dashboard = 'dashboard', Explore = 'explore', Unknown = 'unknown', - CloudAlerting = 'cloud-alerting', + PanelEditor = 'panel-editor', + PanelViewer = 'panel-viewer', } export interface AppRootProps { diff --git a/packages/grafana-ui/src/components/PanelChrome/PanelContext.ts b/packages/grafana-ui/src/components/PanelChrome/PanelContext.ts index 4bb689f6782..583552046ea 100644 --- a/packages/grafana-ui/src/components/PanelChrome/PanelContext.ts +++ b/packages/grafana-ui/src/components/PanelChrome/PanelContext.ts @@ -5,6 +5,7 @@ import { AnnotationEventUIModel, ThresholdsConfig, SplitOpen, + CoreApp, } from '@grafana/data'; import React from 'react'; import { SeriesVisibilityChangeMode } from '.'; @@ -16,6 +17,9 @@ export interface PanelContext { /** Dashboard panels sync */ sync?: DashboardCursorSync; + /** Information on what the outer container is */ + app?: CoreApp | 'string'; + /** * Called when a component wants to change the color for a series * @@ -43,6 +47,7 @@ export interface PanelContext { * @alpha -- experimental */ onThresholdsChange?: (thresholds: ThresholdsConfig) => void; + /** * onSplitOpen is used in Explore to open the split view. It can be used in panels which has intercations and used in Explore as well. * For example TimeSeries panel. diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.tsx index 54709a3d3f9..456f607d783 100644 --- a/public/app/features/dashboard/dashgrid/PanelChrome.tsx +++ b/public/app/features/dashboard/dashgrid/PanelChrome.tsx @@ -6,6 +6,7 @@ import { AbsoluteTimeRange, AnnotationChangeEvent, AnnotationEventUIModel, + CoreApp, DashboardCursorSync, EventFilterOptions, FieldConfigSource, @@ -78,8 +79,9 @@ export class PanelChrome extends Component { renderCounter: 0, refreshWhenInView: false, context: { - sync: props.isEditing ? DashboardCursorSync.Off : props.dashboard.graphTooltip, eventBus, + sync: props.isEditing ? DashboardCursorSync.Off : props.dashboard.graphTooltip, + app: this.getPanelContextApp(), onSeriesColorChange: this.onSeriesColorChange, onToggleSeriesVisibility: this.onSeriesVisibilityChange, onAnnotationCreate: this.onAnnotationCreate, @@ -104,6 +106,17 @@ export class PanelChrome extends Component { store.dispatch(setPanelInstanceState({ panelId: this.props.panel.id, value })); }; + getPanelContextApp() { + if (this.props.isEditing) { + return CoreApp.PanelEditor; + } + if (this.props.isViewing) { + return CoreApp.PanelViewer; + } + + return CoreApp.Dashboard; + } + onSeriesColorChange = (label: string, color: string) => { this.onFieldConfigChange(changeSeriesColorConfigFactory(label, color, this.props.panel.fieldConfig)); }; @@ -177,20 +190,18 @@ export class PanelChrome extends Component { componentDidUpdate(prevProps: Props) { const { isInView, isEditing, width } = this.props; + const { context } = this.state; - if (prevProps.dashboard.graphTooltip !== this.props.dashboard.graphTooltip) { - this.setState((s) => { - return { - context: { ...s.context, sync: isEditing ? DashboardCursorSync.Off : this.props.dashboard.graphTooltip }, - }; - }); - } + const app = this.getPanelContextApp(); + const sync = isEditing ? DashboardCursorSync.Off : this.props.dashboard.graphTooltip; - if (isEditing !== prevProps.isEditing) { - this.setState((s) => { - return { - context: { ...s.context, sync: isEditing ? DashboardCursorSync.Off : this.props.dashboard.graphTooltip }, - }; + if (context.sync !== sync || context.app !== app) { + this.setState({ + context: { + ...context, + sync, + app, + }, }); } diff --git a/public/app/features/query/components/QueryEditorRow.tsx b/public/app/features/query/components/QueryEditorRow.tsx index a4b610fcbab..a113be8d292 100644 --- a/public/app/features/query/components/QueryEditorRow.tsx +++ b/public/app/features/query/components/QueryEditorRow.tsx @@ -212,6 +212,7 @@ export class QueryEditorRow extends PureComponent extends PureComponent { - const { query, onChange, queries, onRunQuery, app = CoreApp.Dashboard, history } = this.props; + const { query, onChange, queries, onRunQuery, app = CoreApp.PanelEditor, history } = this.props; const { datasource, data } = this.state; if (datasource?.components?.QueryCtrl) { diff --git a/public/app/plugins/panel/debug/StateView.tsx b/public/app/plugins/panel/debug/StateView.tsx index bc199be3b10..76746e25a08 100644 --- a/public/app/plugins/panel/debug/StateView.tsx +++ b/public/app/plugins/panel/debug/StateView.tsx @@ -13,9 +13,11 @@ export function StateView(props: PanelProps) { }; return ( - - - + <> + + + + ); }