diff --git a/public/app/features/alerting/AlertTab.tsx b/public/app/features/alerting/AlertTab.tsx index 25744fe0652..538d9a88ebb 100644 --- a/public/app/features/alerting/AlertTab.tsx +++ b/public/app/features/alerting/AlertTab.tsx @@ -104,13 +104,15 @@ class UnConnectedAlertTab extends PureComponent { } stateHistory = (): EditorToolbarView => { + const { panel, dashboard } = this.props; + return { title: 'State history', render: () => { return ( ); diff --git a/public/app/features/annotations/annotations_srv.ts b/public/app/features/annotations/annotations_srv.ts index 55d39136bb5..9ebb35241cb 100644 --- a/public/app/features/annotations/annotations_srv.ts +++ b/public/app/features/annotations/annotations_srv.ts @@ -7,8 +7,8 @@ import coreModule from 'app/core/core_module'; // Utils & Services import { dedupAnnotations } from './events_processing'; // Types -import { DashboardModel } from '../dashboard/state/DashboardModel'; -import { AnnotationEvent, AppEvents, DataSourceApi, PanelEvents, PanelModel, TimeRange } from '@grafana/data'; +import { DashboardModel, PanelModel } from '../dashboard/state'; +import { AnnotationEvent, AppEvents, DataSourceApi, PanelEvents, TimeRange } from '@grafana/data'; import { getBackendSrv, getDataSourceSrv } from '@grafana/runtime'; import { appEvents } from 'app/core/core'; import { getTimeSrv } from '../dashboard/services/TimeSrv'; @@ -36,12 +36,14 @@ export class AnnotationsSrv { .then(results => { // combine the annotations and flatten results let annotations: AnnotationEvent[] = flattenDeep(results[0]); + // when in edit mode we need to use editSourceId + let panelFilterId = options.panel.editSourceId ?? options.panel.id; // filter out annotations that do not belong to requesting panel annotations = annotations.filter(item => { // if event has panel id and query is of type dashboard then panel and requesting panel id must match if (item.panelId && item.source.type === 'dashboard') { - return item.panelId === options.panel.id; + return item.panelId === panelFilterId; } return true; }); @@ -49,7 +51,7 @@ export class AnnotationsSrv { annotations = dedupAnnotations(annotations); // look for alert state for this panel - const alertState: any = results[1].find((res: any) => res.panelId === options.panel.id); + const alertState: any = results[1].find((res: any) => res.panelId === panelFilterId); return { annotations: annotations, diff --git a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx index d000ee3f8ea..502b4d94aa5 100644 --- a/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx +++ b/public/app/features/dashboard/components/PanelEditor/PanelEditor.tsx @@ -14,7 +14,6 @@ import { StoreState } from '../../../../types/store'; import { connect, MapDispatchToProps, MapStateToProps } from 'react-redux'; import { updateLocation } from '../../../../core/reducers/location'; import { Unsubscribable } from 'rxjs'; -import { PanelTitle } from './PanelTitle'; import { DisplayMode, displayModes, PanelEditorTab } from './types'; import { PanelEditorTabs } from './PanelEditorTabs'; import { DashNavTimeControls } from '../DashNav/DashNavTimeControls'; @@ -187,14 +186,14 @@ export class PanelEditorUnconnected extends PureComponent { } renderToolbar() { - const { dashboard, location, uiState, panel } = this.props; + const { dashboard, location, uiState } = this.props; const styles = getStyles(config.theme); return (
- + {dashboard.title} / Edit Panel
@@ -403,5 +402,9 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => { justify-content: center; align-items: center; `, + editorTitle: css` + font-size: ${theme.typography.size.lg}; + padding-left: ${theme.spacing.md}; + `, }; }); diff --git a/public/app/features/dashboard/components/PanelEditor/PanelTitle.tsx b/public/app/features/dashboard/components/PanelEditor/PanelTitle.tsx deleted file mode 100644 index 03d6ca29a30..00000000000 --- a/public/app/features/dashboard/components/PanelEditor/PanelTitle.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import React, { useState } from 'react'; -import { css } from 'emotion'; -import { Forms, useTheme, stylesFactory } from '@grafana/ui'; -import { GrafanaTheme } from '@grafana/data'; - -interface PanelTitleProps { - value: string; - onChange: (value: string) => void; -} - -export const PanelTitle: React.FC = ({ value, onChange }) => { - const [isEditing, setIsEditing] = useState(false); - const theme = useTheme(); - const styles = getStyles(theme); - - return ( -
- {isEditing ? ( - elem && elem.focus()} - onChange={e => onChange(e.currentTarget.value)} - onBlur={() => setIsEditing(false)} - placeholder="Panel Title" - /> - ) : ( - setIsEditing(true)}>{value} - )} -
- ); -}; - -const getStyles = stylesFactory((theme: GrafanaTheme) => { - return { - wrapper: css` - font-size: ${theme.typography.size.lg}; - padding-left: ${theme.spacing.md}; - `, - }; -}); diff --git a/public/app/features/dashboard/state/PanelModel.ts b/public/app/features/dashboard/state/PanelModel.ts index d9ecb4fc6c1..5c2ad580604 100644 --- a/public/app/features/dashboard/state/PanelModel.ts +++ b/public/app/features/dashboard/state/PanelModel.ts @@ -45,6 +45,7 @@ const notPersistedProperties: { [str: string]: boolean } = { plugin: true, queryRunner: true, replaceVariables: true, + editSourceId: true, }; // For angular panels we need to clean up properties when changing type @@ -96,6 +97,7 @@ const defaults: any = { export class PanelModel implements DataConfigSource { /* persisted id, used in URL to identify a panel */ id: number; + editSourceId: number; gridPos: GridPos; type: string; title: string; @@ -389,6 +391,7 @@ export class PanelModel implements DataConfigSource { // Temporary id for the clone, restored later in redux action when changes are saved sourceModel.id = EDIT_PANEL_ID; + sourceModel.editSourceId = this.id; const clone = new PanelModel(sourceModel); const sourceQueryRunner = this.getQueryRunner();