Merge pull request #14067 from grafana/react-panels-minor-changes

minor changes to react panels

Merge pull request #14067 from grafana/react-panels-minor-changes
minor changes to react panels
3ce7197c · Torkel Ödegaard · GitHub · 604add07 · 080d6110 · 3ce7197c
Commit 3ce7197c authored Nov 14, 2018 by Torkel Ödegaard Committed by GitHub Nov 14, 2018
7 changed files
--- a/public/app/core/constants.ts
+++ b/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;
--- a/public/app/features/dashboard/dashgrid/DataPanel.tsx
+++ b/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) {

--- a/public/app/features/dashboard/dashgrid/PanelChrome.tsx
+++ b/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,8 +108,6 @@ export class PanelChrome extends PureComponent<Props, State> {
              >
                {({ loading, timeSeries }) => {
                  return (
-                    <>
-                      <PanelHeader panel={panel} dashboard={dashboard} timeInfo={timeInfo} />
                    <div className="panel-content">
                      <PanelComponent
                        loading={loading}
@@ -115,11 +115,10 @@ export class PanelChrome extends PureComponent<Props, State> {
                        timeRange={timeRange}
                        options={panel.getOptions()}
                        width={width}
-                          height={height}
+                        height={height - PANEL_HEADER_HEIGHT}
                        renderCounter={renderCounter}
                      />
                    </div>
-                    </>
                  );
                }}
              </DataPanel>

--- a/public/app/features/panel/panel_ctrl.ts
+++ b/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;
+import { GRID_CELL_HEIGHT, GRID_CELL_VMARGIN, PANEL_HEADER_HEIGHT, PANEL_BORDER } from 'app/core/constants';
-const PANEL_BORDER = 2;
-import { Emitter } from 'app/core/core';
 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?) {

--- a/public/app/plugins/panel/gauge/module.tsx
+++ b/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} />
+    );
  }
 }

--- a/public/app/types/series.ts
+++ b/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 {

--- a/public/app/viz/Gauge.tsx
+++ b/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;