From 57596462a4c180d46dfbc247bf4925ce463b398b Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Fri, 1 Feb 2019 10:53:58 +0100 Subject: [PATCH] sending paneldata to component, gauge can handle table data --- .../src/components/Gauge/Gauge.test.tsx | 3 +-- .../grafana-ui/src/components/Gauge/Gauge.tsx | 26 +++--------------- packages/grafana-ui/src/types/panel.ts | 2 +- .../dashboard/dashgrid/PanelChrome.tsx | 6 ++--- public/app/plugins/panel/gauge/GaugePanel.tsx | 27 +++++++++++++------ .../app/plugins/panel/graph2/GraphPanel.tsx | 13 +++++---- 6 files changed, 36 insertions(+), 41 deletions(-) diff --git a/packages/grafana-ui/src/components/Gauge/Gauge.test.tsx b/packages/grafana-ui/src/components/Gauge/Gauge.test.tsx index 1d2151a0627..e210b0995ff 100644 --- a/packages/grafana-ui/src/components/Gauge/Gauge.test.tsx +++ b/packages/grafana-ui/src/components/Gauge/Gauge.test.tsx @@ -2,7 +2,6 @@ import React from 'react'; import { shallow } from 'enzyme'; import { Gauge, Props } from './Gauge'; -import { TimeSeriesVMs } from '../../types/data'; import { ValueMapping, MappingType } from '../../types'; jest.mock('jquery', () => ({ @@ -23,7 +22,7 @@ const setup = (propOverrides?: object) => { stat: 'avg', height: 300, width: 300, - timeSeries: {} as TimeSeriesVMs, + value: 25, decimals: 0, }; diff --git a/packages/grafana-ui/src/components/Gauge/Gauge.tsx b/packages/grafana-ui/src/components/Gauge/Gauge.tsx index d4d8442593e..04d89bf3f57 100644 --- a/packages/grafana-ui/src/components/Gauge/Gauge.tsx +++ b/packages/grafana-ui/src/components/Gauge/Gauge.tsx @@ -1,7 +1,7 @@ import React, { PureComponent } from 'react'; import $ from 'jquery'; -import { ValueMapping, Threshold, BasicGaugeColor, TimeSeriesVMs, GrafanaTheme } from '../../types'; +import { ValueMapping, Threshold, BasicGaugeColor, GrafanaTheme } from '../../types'; import { getMappedValue } from '../../utils/valueMappings'; import { getColorFromHexRgbOrName, getValueFormat } from '../../utils'; @@ -14,7 +14,6 @@ export interface Props { maxValue: number; minValue: number; prefix: string; - timeSeries: TimeSeriesVMs; thresholds: Threshold[]; showThresholdMarkers: boolean; showThresholdLabels: boolean; @@ -22,6 +21,7 @@ export interface Props { suffix: string; unit: string; width: number; + value: number; theme?: GrafanaTheme; } @@ -122,25 +122,7 @@ export class Gauge extends PureComponent { } draw() { - const { - maxValue, - minValue, - timeSeries, - showThresholdLabels, - showThresholdMarkers, - width, - height, - stat, - theme, - } = this.props; - - let value: TimeSeriesValue = ''; - - if (timeSeries[0]) { - value = timeSeries[0].stats[stat]; - } else { - value = null; - } + const { maxValue, minValue, showThresholdLabels, showThresholdMarkers, width, height, theme, value } = this.props; const formattedValue = this.formatValue(value) as string; const dimension = Math.min(width, height * 1.3); @@ -194,7 +176,7 @@ export class Gauge extends PureComponent { try { $.plot(this.canvasElement, [plotSeries], options); } catch (err) { - console.log('Gauge rendering error', err, options, timeSeries); + console.log('Gauge rendering error', err, options, value); } } diff --git a/packages/grafana-ui/src/types/panel.ts b/packages/grafana-ui/src/types/panel.ts index ad09b3aba9f..4eda85f9a28 100644 --- a/packages/grafana-ui/src/types/panel.ts +++ b/packages/grafana-ui/src/types/panel.ts @@ -4,7 +4,7 @@ import { TimeRange } from './time'; export type InterpolateFunction = (value: string, format?: string | Function) => string; export interface PanelProps { - timeSeries: TimeSeries[]; + panelData: PanelData; timeRange: TimeRange; loading: LoadingState; options: T; diff --git a/public/app/features/dashboard/dashgrid/PanelChrome.tsx b/public/app/features/dashboard/dashgrid/PanelChrome.tsx index 68b53714504..eae177233a6 100644 --- a/public/app/features/dashboard/dashgrid/PanelChrome.tsx +++ b/public/app/features/dashboard/dashgrid/PanelChrome.tsx @@ -93,7 +93,7 @@ export class PanelChrome extends PureComponent { return !this.props.dashboard.otherPanelInFullscreen(this.props.panel); } - renderPanel(loading, timeSeries, width, height): JSX.Element { + renderPanel(loading, panelData, width, height): JSX.Element { const { panel, plugin } = this.props; const { timeRange, renderCounter } = this.state; const PanelComponent = plugin.exports.Panel; @@ -102,7 +102,7 @@ export class PanelChrome extends PureComponent {
{ onDataResponse={this.onDataResponse} > {({ loading, panelData }) => { - return this.renderPanel(loading, panelData.timeSeries, width, height); + return this.renderPanel(loading, panelData, width, height); }} )} diff --git a/public/app/plugins/panel/gauge/GaugePanel.tsx b/public/app/plugins/panel/gauge/GaugePanel.tsx index a525886b809..b6f37dde94f 100644 --- a/public/app/plugins/panel/gauge/GaugePanel.tsx +++ b/public/app/plugins/panel/gauge/GaugePanel.tsx @@ -9,28 +9,39 @@ import { Gauge } from '@grafana/ui'; // Types import { GaugeOptions } from './types'; -import { PanelProps, NullValueMode } from '@grafana/ui/src/types'; +import { PanelProps, NullValueMode, TimeSeriesValue } from '@grafana/ui/src/types'; import { ThemeProvider } from 'app/core/utils/ConfigProvider'; interface Props extends PanelProps {} export class GaugePanel extends PureComponent { render() { - const { timeSeries, width, height, onInterpolate, options } = this.props; + const { panelData, width, height, onInterpolate, options } = this.props; const prefix = onInterpolate(options.prefix); const suffix = onInterpolate(options.suffix); + let value: TimeSeriesValue; - const vmSeries = processTimeSeries({ - timeSeries: timeSeries, - nullValueMode: NullValueMode.Null, - }); + if (panelData.timeSeries) { + const vmSeries = processTimeSeries({ + timeSeries: panelData.timeSeries, + nullValueMode: NullValueMode.Null, + }); + + if (vmSeries[0]) { + value = vmSeries[0].stats[options.stat]; + } else { + value = null; + } + } else if (panelData.tableData) { + value = panelData.tableData.rows[0].find(prop => prop > 0); + } return ( - {(theme) => ( + {theme => ( {} export class GraphPanel extends PureComponent { render() { - const { timeSeries, timeRange, width, height } = this.props; + const { panelData, timeRange, width, height } = this.props; const { showLines, showBars, showPoints } = this.props.options; - const vmSeries = processTimeSeries({ - timeSeries: timeSeries, - nullValueMode: NullValueMode.Ignore, - }); + let vmSeries; + if (panelData.timeSeries) { + vmSeries = processTimeSeries({ + timeSeries: panelData.timeSeries, + nullValueMode: NullValueMode.Ignore, + }); + } return (