diff --git a/public/app/features/dashboard/containers/DashboardPage.test.tsx b/public/app/features/dashboard/containers/DashboardPage.test.tsx index ea351148142..713fde3457f 100644 --- a/public/app/features/dashboard/containers/DashboardPage.test.tsx +++ b/public/app/features/dashboard/containers/DashboardPage.test.tsx @@ -273,7 +273,7 @@ describe('DashboardPage', () => { }, panelEditorNew: {}, dashboard: { - getModel: () => null as DashboardModel, + getModel: () => ({} as DashboardModel), }, } as any); @@ -292,7 +292,7 @@ describe('DashboardPage', () => { }, panelEditorNew: {}, dashboard: { - getModel: () => null as DashboardModel, + getModel: () => ({} as DashboardModel), }, } as any); diff --git a/public/app/features/dashboard/containers/SoloPanelPage.tsx b/public/app/features/dashboard/containers/SoloPanelPage.tsx index 9410503e1b3..6653a7dc540 100644 --- a/public/app/features/dashboard/containers/SoloPanelPage.tsx +++ b/public/app/features/dashboard/containers/SoloPanelPage.tsx @@ -83,7 +83,7 @@ export class SoloPanelPage extends Component { return
Panel with id {urlPanelId} not found
; } - if (!panel) { + if (!panel || !dashboard) { return
Loading & initializing dashboard
; } diff --git a/public/app/features/dashboard/dashgrid/DashboardGrid.test.tsx b/public/app/features/dashboard/dashgrid/DashboardGrid.test.tsx index 9b8c3940005..63e7ae03af5 100644 --- a/public/app/features/dashboard/dashgrid/DashboardGrid.test.tsx +++ b/public/app/features/dashboard/dashgrid/DashboardGrid.test.tsx @@ -6,7 +6,7 @@ import { DashboardModel } from '../state'; interface ScenarioContext { props: Props; wrapper?: ShallowWrapper; - setup?: (fn: () => void) => void; + setup: (fn: () => void) => void; setProps: (props: Partial) => void; } @@ -59,7 +59,7 @@ function dashboardGridScenario(description: string, scenarioFn: (ctx: ScenarioCo props: { isEditing: false, isFullscreen: false, - scrollTop: null, + scrollTop: 0, dashboard: getTestDashboard(), }, setProps: (props: Partial) => { diff --git a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx index cbad2520268..0f0ba9db0a5 100644 --- a/public/app/features/dashboard/dashgrid/DashboardGrid.tsx +++ b/public/app/features/dashboard/dashgrid/DashboardGrid.tsx @@ -162,7 +162,7 @@ export class DashboardGrid extends PureComponent { onLayoutChange = (newLayout: ReactGridLayout.Layout[]) => { for (const newPos of newLayout) { - this.panelMap[newPos.i].updateGridPos(newPos); + this.panelMap[newPos.i!].updateGridPos(newPos); } this.props.dashboard.sortPanelsByGridPos(); @@ -186,7 +186,7 @@ export class DashboardGrid extends PureComponent { }; updateGridPos = (item: ReactGridLayout.Layout, layout: ReactGridLayout.Layout[]) => { - this.panelMap[item.i].updateGridPos(item); + this.panelMap[item.i!].updateGridPos(item); // react-grid-layout has a bug (#670), and onLayoutChange() is only called when the component is mounted. // So it's required to call it explicitly when panel resized or moved to save layout changes. @@ -194,12 +194,12 @@ export class DashboardGrid extends PureComponent { }; onResize: ItemCallback = (layout, oldItem, newItem) => { - this.panelMap[newItem.i].updateGridPos(newItem); + this.panelMap[newItem.i!].updateGridPos(newItem); }; onResizeStop: ItemCallback = (layout, oldItem, newItem) => { this.updateGridPos(newItem, layout); - this.panelMap[newItem.i].resizeDone(); + this.panelMap[newItem.i!].resizeDone(); }; onDragStop: ItemCallback = (layout, oldItem, newItem) => { @@ -253,14 +253,7 @@ export class DashboardGrid extends PureComponent { panel.isInView = this.isInView(panel); panelElements.push( -
{ - this.panelRef[id] = elem; - }} - > +
elem && (this.panelRef[id] = elem)}> {this.renderPanel(panel)}
); diff --git a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx index a3be8d81bfd..4402e360cc5 100644 --- a/public/app/features/dashboard/dashgrid/DashboardPanel.tsx +++ b/public/app/features/dashboard/dashgrid/DashboardPanel.tsx @@ -71,8 +71,8 @@ export class DashboardPanelUnconnected extends PureComponent { this.props.dashboard.setPanelFocus(0); }; - renderPanel() { - const { dashboard, panel, isFullscreen, isInView, isInEditMode, plugin } = this.props; + renderPanel(plugin: PanelPlugin) { + const { dashboard, panel, isFullscreen, isInView, isInEditMode } = this.props; return ( @@ -149,7 +149,7 @@ export class DashboardPanelUnconnected extends PureComponent { onMouseLeave={this.onMouseLeave} style={styles} > - {this.renderPanel()} + {this.renderPanel(plugin)}
)} /> diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.tsx index 4ca022858e3..2eca35e1162 100644 --- a/public/app/features/dashboard/dashgrid/PanelChrome.tsx +++ b/public/app/features/dashboard/dashgrid/PanelChrome.tsx @@ -43,7 +43,7 @@ export interface Props { export interface State { isFirstLoad: boolean; renderCounter: number; - errorMessage: string | null; + errorMessage?: string; refreshWhenInView: boolean; // Current state of all events @@ -56,10 +56,10 @@ export class PanelChrome extends PureComponent { constructor(props: Props) { super(props); + this.state = { isFirstLoad: true, renderCounter: 0, - errorMessage: null, refreshWhenInView: false, data: { state: LoadingState.NotStarted, @@ -107,7 +107,6 @@ export class PanelChrome extends PureComponent { if (this.querySubscription) { this.querySubscription.unsubscribe(); - this.querySubscription = null; } } @@ -121,9 +120,6 @@ export class PanelChrome extends PureComponent { if (this.state.refreshWhenInView) { this.onRefresh(); } - } else if (this.querySubscription) { - this.querySubscription.unsubscribe(); - this.querySubscription = null; } } } @@ -139,7 +135,7 @@ export class PanelChrome extends PureComponent { } let { isFirstLoad } = this.state; - let errorMessage: string | null = null; + let errorMessage: string | undefined; switch (data.state) { case LoadingState.Loading: @@ -258,7 +254,7 @@ export class PanelChrome extends PureComponent { }); }; - renderPanel(width: number, height: number): JSX.Element { + renderPanel(width: number, height: number) { const { panel, plugin } = this.props; const { renderCounter, data, isFirstLoad } = this.state; const { theme } = config; @@ -344,7 +340,7 @@ export class PanelChrome extends PureComponent { { isLoading={data.state === LoadingState.Loading} /> - {({ error, errorInfo }) => { - if (errorInfo) { + {({ error }) => { + if (error) { this.onPanelError(error.message || DEFAULT_PLUGIN_ERROR); return null; } diff --git a/public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx b/public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx index 7f2920f13a7..8d4a7de7c28 100644 --- a/public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx +++ b/public/app/features/dashboard/dashgrid/PanelChromeAngular.tsx @@ -37,7 +37,7 @@ interface AngularScopeProps { } export class PanelChromeAngular extends PureComponent { - element?: HTMLElement; + element: HTMLElement | null = null; timeSrv: TimeSrv = getTimeSrv(); scopeProps?: AngularScopeProps; querySubscription: Unsubscribable; @@ -85,7 +85,7 @@ export class PanelChromeAngular extends PureComponent { }; onPanelDataUpdate(data: PanelData) { - let errorMessage: string | null = null; + let errorMessage: string | undefined; if (data.state === LoadingState.Error) { const { error } = data; @@ -104,7 +104,6 @@ export class PanelChromeAngular extends PureComponent { if (this.querySubscription) { this.querySubscription.unsubscribe(); - this.querySubscription = null; } this.props.panel.events.off(PanelEvents.render, this.onPanelRenderEvent); @@ -192,7 +191,7 @@ export class PanelChromeAngular extends PureComponent { { } render() { + const { error } = this.props; const infoMode: InfoMode | undefined = this.getInfoMode(); if (!infoMode) { return null; } - if (infoMode === InfoMode.Error) { - return this.renderCornerType(infoMode, this.props.error, this.onClickError); + if (infoMode === InfoMode.Error && error) { + return this.renderCornerType(infoMode, error, this.onClickError); } if (infoMode === InfoMode.Info || infoMode === InfoMode.Links) { diff --git a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem.tsx b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem.tsx index 99e54465a4d..5682217df96 100644 --- a/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem.tsx +++ b/public/app/features/dashboard/dashgrid/PanelHeader/PanelHeaderMenuItem.tsx @@ -12,7 +12,7 @@ export const PanelHeaderMenuItem: FC = props => { return isDivider ? (
  • ) : ( -
  • +
  • {props.iconClassName && }