minor changes to react panels

public/app/core/constants.ts

@@ -11,3 +11,6 @@ export const LS_PANEL_COPY_KEY = 'panel-copy';
 
 export const DASHBOARD_TOOLBAR_HEIGHT = 55;
 export const DASHBOARD_TOP_PADDING = 20;
+
+export const PANEL_HEADER_HEIGHT = 27;
+export const PANEL_BORDER = 2;

public/app/features/dashboard/dashgrid/DataPanel.tsx

@@ -2,7 +2,7 @@
 import React, { Component } from 'react';
 
 // Services
-import { getDatasourceSrv } from 'app/features/plugins/datasource_srv';
+import { getDatasourceSrv, DatasourceSrv } from 'app/features/plugins/datasource_srv';
 
 // Utils
 import kbn from 'app/core/utils/kbn';
@@ -36,14 +36,15 @@ export interface State {
 }
 
 export class DataPanel extends Component<Props, State> {
-  dataSourceSrv = getDatasourceSrv();
-
   static defaultProps = {
     isVisible: true,
     panelId: 1,
     dashboardId: 1,
   };
 
+  dataSourceSrv: DatasourceSrv = getDatasourceSrv();
+  isUnmounted = false;
+
   constructor(props: Props) {
     super(props);
 
@@ -60,6 +61,10 @@ export class DataPanel extends Component<Props, State> {
     this.issueQueries();
   }
 
+  componentWillUnmount() {
+    this.isUnmounted = true;
+  }
+
   async componentDidUpdate(prevProps: Props) {
     if (!this.hasPropsChanged(prevProps)) {
       return;
@@ -72,7 +77,7 @@ export class DataPanel extends Component<Props, State> {
     return this.props.refreshCounter !== prevProps.refreshCounter;
   }
 
-  issueQueries = async () => {
+  private issueQueries = async () => {
     const { isVisible, queries, datasource, panelId, dashboardId, timeRange, widthPixels, maxDataPoints } = this.props;
 
     if (!isVisible) {
@@ -111,6 +116,10 @@ export class DataPanel extends Component<Props, State> {
       const resp = await ds.query(queryOptions);
       console.log('Issuing DataPanel query Resp', resp);
 
+      if (this.isUnmounted) {
+        return;
+      }
+
       this.setState({
         loading: LoadingState.Done,
         response: resp,
@@ -123,14 +132,16 @@ export class DataPanel extends Component<Props, State> {
   };
 
   render() {
-    const { response, loading } = this.state;
+    const { response, loading, isFirstLoad } = this.state;
     const timeSeries = response.data;
 
-    console.log('data panel render');
+    if (isFirstLoad && loading === LoadingState.Loading) {
+      return this.renderLoadingSpinner();
+    }
 
     return (
       <>
-        {this.loadingSpinner}
+        {this.renderLoadingSpinner()}
         {this.props.children({
           timeSeries,
           loading,
@@ -139,7 +150,7 @@ export class DataPanel extends Component<Props, State> {
     );
   }
 
-  private get loadingSpinner(): JSX.Element {
+  private renderLoadingSpinner(): JSX.Element {
     const { loading } = this.state;
 
     if (loading === LoadingState.Loading) {

public/app/features/dashboard/dashgrid/PanelChrome.tsx

@@ -11,6 +11,7 @@ import { DataPanel } from './DataPanel';
 
 // Utils
 import { applyPanelTimeOverrides } from 'app/features/dashboard/utils/panel';
+import { PANEL_HEADER_HEIGHT } from 'app/core/constants';
 
 // Types
 import { PanelModel } from '../panel_model';
@@ -96,6 +97,7 @@ export class PanelChrome extends PureComponent<Props, State> {
 
           return (
             <div className="panel-container panel-container--absolute">
+              <PanelHeader panel={panel} dashboard={dashboard} timeInfo={timeInfo} />
               <DataPanel
                 datasource={datasource}
                 queries={targets}
@@ -106,20 +108,17 @@ export class PanelChrome extends PureComponent<Props, State> {
               >
                 {({ loading, timeSeries }) => {
                   return (
-                    <>
-                      <PanelHeader panel={panel} dashboard={dashboard} timeInfo={timeInfo} />
-                      <div className="panel-content">
-                        <PanelComponent
-                          loading={loading}
-                          timeSeries={timeSeries}
-                          timeRange={timeRange}
-                          options={panel.getOptions()}
-                          width={width}
-                          height={height}
-                          renderCounter={renderCounter}
-                        />
-                      </div>
-                    </>
+                    <div className="panel-content">
+                      <PanelComponent
+                        loading={loading}
+                        timeSeries={timeSeries}
+                        timeRange={timeRange}
+                        options={panel.getOptions()}
+                        width={width}
+                        height={height - PANEL_HEADER_HEIGHT}
+                        renderCounter={renderCounter}
+                      />
+                    </div>
                   );
                 }}
               </DataPanel>

public/app/features/panel/panel_ctrl.ts

-import config from 'app/core/config';
 import _ from 'lodash';
 import $ from 'jquery';
+import Remarkable from 'remarkable';
+
+import config from 'app/core/config';
 import { profiler } from 'app/core/core';
+import { Emitter } from 'app/core/core';
 import {
   duplicatePanel,
   copyPanel as copyPanelUtil,
   editPanelJson as editPanelJsonUtil,
   sharePanel as sharePanelUtil,
 } from 'app/features/dashboard/utils/panel';
-import Remarkable from 'remarkable';
-import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN } from 'app/core/constants';
 
-const TITLE_HEIGHT = 27;
-const PANEL_BORDER = 2;
-
-import { Emitter } from 'app/core/core';
+import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, PANEL_HEADER_HEIGHT, PANEL_BORDER } from 'app/core/constants';
 
 export class PanelCtrl {
   panel: any;
@@ -236,7 +234,7 @@ export class PanelCtrl {
       this.initEditMode();
     }
 
-    this.height = this.containerHeight - (PANEL_BORDER + TITLE_HEIGHT);
+    this.height = this.containerHeight - (PANEL_BORDER + PANEL_HEADER_HEIGHT);
   }
 
   render(payload?) {

public/app/plugins/panel/gauge/module.tsx

@@ -10,14 +10,16 @@ interface Props extends PanelProps<Options> {}
 
 export class GaugePanel extends PureComponent<Props> {
   render() {
-    const { timeSeries } = this.props;
+    const { timeSeries, width, height } = this.props;
 
     const vmSeries = getTimeSeriesVMs({
       timeSeries: timeSeries,
       nullValueMode: NullValueMode.Ignore,
     });
 
-    return <Gauge maxValue={100} minValue={0} timeSeries={vmSeries} thresholds={[0, 100]} />;
+    return (
+      <Gauge maxValue={100} minValue={0} timeSeries={vmSeries} thresholds={[0, 100]} height={height} width={width} />
+    );
   }
 }
 

public/app/types/series.ts

@@ -62,6 +62,7 @@ export enum NullValueMode {
 /** View model projection of many time series */
 export interface TimeSeriesVMs {
   [index: number]: TimeSeriesVM;
+  length: number;
 }
 
 export interface DataQueryResponse {

public/app/viz/Gauge.tsx

 import React, { PureComponent } from 'react';
 import $ from 'jquery';
-import { withSize } from 'react-sizeme';
 import { TimeSeriesVMs } from 'app/types';
 import config from '../core/config';
 
@@ -11,7 +10,8 @@ interface Props {
   showThresholdMarkers?: boolean;
   thresholds?: number[];
   showThresholdLables?: boolean;
-  size?: { width: number; height: number };
+  width: number;
+  height: number;
 }
 
 const colors = ['rgba(50, 172, 45, 0.97)', 'rgba(237, 129, 40, 0.89)', 'rgba(245, 54, 54, 0.9)'];
@@ -37,12 +37,18 @@ export class Gauge extends PureComponent<Props> {
   }
 
   draw() {
-    const { maxValue, minValue, showThresholdLables, size, showThresholdMarkers, timeSeries, thresholds } = this.props;
+    const {
+      maxValue,
+      minValue,
+      showThresholdLables,
+      showThresholdMarkers,
+      timeSeries,
+      thresholds,
+      width,
+      height,
+    } = this.props;
 
-    const width = size.width;
-    const height = size.height;
     const dimension = Math.min(width, height * 1.3);
-
     const backgroundColor = config.bootData.user.lightTheme ? 'rgb(230,230,230)' : 'rgb(38,38,38)';
     const fontColor = config.bootData.user.lightTheme ? 'rgb(38,38,38)' : 'rgb(230,230,230)';
     const fontScale = parseInt('80', 10) / 100;
@@ -100,8 +106,13 @@ export class Gauge extends PureComponent<Props> {
       },
     };
 
+    let value: string | number = 'N/A';
+    if (timeSeries.length) {
+      value = timeSeries[0].stats.avg;
+    }
+
     const plotSeries = {
-      data: [[0, timeSeries[0].stats.avg]],
+      data: [[0, value]],
     };
 
     try {
@@ -112,7 +123,7 @@ export class Gauge extends PureComponent<Props> {
   }
 
   render() {
-    const { height, width } = this.props.size;
+    const { height, width } = this.props;
 
     return (
       <div className="singlestat-panel" ref={element => (this.parentElement = element)}>
@@ -130,4 +141,4 @@ export class Gauge extends PureComponent<Props> {
   }
 }
 
-export default withSize({ monitorHeight: true })(Gauge);
+export default Gauge;