From 080d611004a10e21418f69d3e317911075fbbd34 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Wed, 14 Nov 2018 13:20:19 +0100 Subject: [PATCH] minor changes to react panels --- public/app/core/constants.ts | 3 ++ .../features/dashboard/dashgrid/DataPanel.tsx | 27 ++++++++++++----- .../dashboard/dashgrid/PanelChrome.tsx | 27 +++++++++-------- public/app/features/panel/panel_ctrl.ts | 14 ++++----- public/app/plugins/panel/gauge/module.tsx | 6 ++-- public/app/types/series.ts | 1 + public/app/viz/Gauge.tsx | 29 +++++++++++++------ 7 files changed, 66 insertions(+), 41 deletions(-) diff --git a/public/app/core/constants.ts b/public/app/core/constants.ts index 00981156614..d51c4cf83d6 100644 --- 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; diff --git a/public/app/features/dashboard/dashgrid/DataPanel.tsx b/public/app/features/dashboard/dashgrid/DataPanel.tsx index ecff4a7fabf..77523d9e242 100644 --- 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 { - 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 { this.issueQueries(); } + componentWillUnmount() { + this.isUnmounted = true; + } + async componentDidUpdate(prevProps: Props) { if (!this.hasPropsChanged(prevProps)) { return; @@ -72,7 +77,7 @@ export class DataPanel extends Component { 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 { 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 { }; 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 { ); } - private get loadingSpinner(): JSX.Element { + private renderLoadingSpinner(): JSX.Element { const { loading } = this.state; if (loading === LoadingState.Loading) { diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.tsx index 99b44e6ff72..7bf2bac42c5 100644 --- 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 { return (
+ { > {({ loading, timeSeries }) => { return ( - <> - -
- -
- +
+ +
); }} diff --git a/public/app/features/panel/panel_ctrl.ts b/public/app/features/panel/panel_ctrl.ts index 92932142690..420210be380 100644 --- a/public/app/features/panel/panel_ctrl.ts +++ b/public/app/features/panel/panel_ctrl.ts @@ -1,20 +1,18 @@ -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?) { diff --git a/public/app/plugins/panel/gauge/module.tsx b/public/app/plugins/panel/gauge/module.tsx index 056c9d734bb..2b536691453 100644 --- a/public/app/plugins/panel/gauge/module.tsx +++ b/public/app/plugins/panel/gauge/module.tsx @@ -10,14 +10,16 @@ interface Props extends PanelProps {} export class GaugePanel extends PureComponent { render() { - const { timeSeries } = this.props; + const { timeSeries, width, height } = this.props; const vmSeries = getTimeSeriesVMs({ timeSeries: timeSeries, nullValueMode: NullValueMode.Ignore, }); - return ; + return ( + + ); } } diff --git a/public/app/types/series.ts b/public/app/types/series.ts index 1feba9a3b53..62b64c2e832 100644 --- 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 { diff --git a/public/app/viz/Gauge.tsx b/public/app/viz/Gauge.tsx index 5e90fd870db..49e7dbad978 100644 --- a/public/app/viz/Gauge.tsx +++ b/public/app/viz/Gauge.tsx @@ -1,6 +1,5 @@ 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 { } 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 { }, }; + 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 { } render() { - const { height, width } = this.props.size; + const { height, width } = this.props; return (
(this.parentElement = element)}> @@ -130,4 +141,4 @@ export class Gauge extends PureComponent { } } -export default withSize({ monitorHeight: true })(Gauge); +export default Gauge;