From 9fc87e417447a280ea8dd02428124b213069fa4b Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Tue, 5 Feb 2019 15:12:04 +0100 Subject: [PATCH 01/95] first working draft --- .../grafana-ui/src/components/Gauge/Gauge.tsx | 20 ++++---- public/app/plugins/panel/gauge/GaugePanel.tsx | 49 +++++++++++++++---- 2 files changed, 48 insertions(+), 21 deletions(-) diff --git a/packages/grafana-ui/src/components/Gauge/Gauge.tsx b/packages/grafana-ui/src/components/Gauge/Gauge.tsx index 04d89bf3f57..9842903b394 100644 --- a/packages/grafana-ui/src/components/Gauge/Gauge.tsx +++ b/packages/grafana-ui/src/components/Gauge/Gauge.tsx @@ -184,17 +184,15 @@ export class Gauge extends PureComponent { const { height, width } = this.props; return ( -
-
(this.canvasElement = element)} - /> -
+
(this.canvasElement = element)} + /> ); } } diff --git a/public/app/plugins/panel/gauge/GaugePanel.tsx b/public/app/plugins/panel/gauge/GaugePanel.tsx index b6f37dde94f..928f9a43909 100644 --- a/public/app/plugins/panel/gauge/GaugePanel.tsx +++ b/public/app/plugins/panel/gauge/GaugePanel.tsx @@ -16,6 +16,7 @@ interface Props extends PanelProps {} export class GaugePanel extends PureComponent { render() { + console.log('renduru'); const { panelData, width, height, onInterpolate, options } = this.props; const prefix = onInterpolate(options.prefix); @@ -28,7 +29,33 @@ export class GaugePanel extends PureComponent { nullValueMode: NullValueMode.Null, }); - if (vmSeries[0]) { + const gauges = []; + if (vmSeries.length > 1) { + for (let i = 0; i < vmSeries.length; i++) { + gauges.push( + + {theme => ( +
+ +
Gauge {i}
+
+ )} + + ); + } + return [gauges]; + } else if (vmSeries.length > 0) { value = vmSeries[0].stats[options.stat]; } else { value = null; @@ -40,15 +67,17 @@ export class GaugePanel extends PureComponent { return ( {theme => ( - +
+ +
)} ); From 9d3d1bc669043f5a1e7228c35d9408436491dbe2 Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Tue, 5 Feb 2019 16:34:01 +0100 Subject: [PATCH 02/95] refactor panel --- public/app/core/utils/ConfigProvider.tsx | 2 +- public/app/plugins/panel/gauge/GaugePanel.tsx | 111 +++++++++--------- 2 files changed, 59 insertions(+), 54 deletions(-) diff --git a/public/app/core/utils/ConfigProvider.tsx b/public/app/core/utils/ConfigProvider.tsx index 6883401ad27..1a7c394434d 100644 --- a/public/app/core/utils/ConfigProvider.tsx +++ b/public/app/core/utils/ConfigProvider.tsx @@ -14,7 +14,7 @@ export const provideConfig = (component: React.ComponentType) => { }; interface ThemeProviderProps { - children: (theme: GrafanaTheme) => JSX.Element; + children: (theme: GrafanaTheme) => JSX.Element | JSX.Element[]; } export const ThemeProvider = ({ children }: ThemeProviderProps) => { diff --git a/public/app/plugins/panel/gauge/GaugePanel.tsx b/public/app/plugins/panel/gauge/GaugePanel.tsx index 928f9a43909..040a06eed5c 100644 --- a/public/app/plugins/panel/gauge/GaugePanel.tsx +++ b/public/app/plugins/panel/gauge/GaugePanel.tsx @@ -9,77 +9,82 @@ import { Gauge } from '@grafana/ui'; // Types import { GaugeOptions } from './types'; -import { PanelProps, NullValueMode, TimeSeriesValue } from '@grafana/ui/src/types'; +import { PanelProps, NullValueMode } from '@grafana/ui/src/types'; import { ThemeProvider } from 'app/core/utils/ConfigProvider'; interface Props extends PanelProps {} export class GaugePanel extends PureComponent { - render() { - console.log('renduru'); - const { panelData, width, height, onInterpolate, options } = this.props; + renderMultipleGauge(vmSeries, theme) { + const { options, width } = this.props; + const gauges = []; + + for (let i = 0; i < vmSeries.length; i++) { + const singleStatWidth = 1 / vmSeries.length * 100; + const gaugeWidth = Math.floor(width / vmSeries.length) - 10; // make Gauge slightly smaller than panel. + + gauges.push( +
+ {this.renderGauge(vmSeries[i].stats[options.stat], gaugeWidth, theme)} + +
Gauge {i}
+
+ ); + } + return gauges; + } + + renderGauge(value, width, theme) { + const { height, onInterpolate, options } = this.props; const prefix = onInterpolate(options.prefix); const suffix = onInterpolate(options.suffix); - let value: TimeSeriesValue; + return ( + + ); + } + + renderSingleGauge(timeSeries, theme) { + const { options, width } = this.props; + const timeSeriesValue = timeSeries[0].stats[options.stat]; + return
{this.renderGauge(timeSeriesValue, width, theme)}
; + } + + renderGaugeWithTableData(panelData, theme) { + const { width } = this.props; + + const firstTableDataValue = panelData.tableData.rows[0].find(prop => prop > 0); + return
{this.renderGauge(firstTableDataValue, width, theme)}
; + } + + renderPanel(theme) { + const { panelData } = this.props; if (panelData.timeSeries) { - const vmSeries = processTimeSeries({ + const timeSeries = processTimeSeries({ timeSeries: panelData.timeSeries, nullValueMode: NullValueMode.Null, }); - const gauges = []; - if (vmSeries.length > 1) { - for (let i = 0; i < vmSeries.length; i++) { - gauges.push( - - {theme => ( -
- -
Gauge {i}
-
- )} - - ); - } - return [gauges]; - } else if (vmSeries.length > 0) { - value = vmSeries[0].stats[options.stat]; + if (timeSeries.length > 1) { + return this.renderMultipleGauge(timeSeries, theme); + } else if (timeSeries.length > 0) { + return this.renderSingleGauge(timeSeries, theme); } else { - value = null; + return null; } } else if (panelData.tableData) { - value = panelData.tableData.rows[0].find(prop => prop > 0); + return this.renderGaugeWithTableData(panelData, theme); + } else { + return
No time series data available
; } + } - return ( - - {theme => ( -
- -
- )} - - ); + render() { + return {theme => this.renderPanel(theme)}; } } From 71cfcd58ba79e55bb483d37894a6e1e3c4a2f2e7 Mon Sep 17 00:00:00 2001 From: Peter Holmberg Date: Wed, 6 Feb 2019 15:38:51 +0100 Subject: [PATCH 03/95] combine mode with avg value --- .../src/components/Switch/Switch.tsx | 2 +- .../panel/gauge/GaugeOptionsEditor.tsx | 39 ++++++++++++++++--- public/app/plugins/panel/gauge/GaugePanel.tsx | 17 ++++++-- .../plugins/panel/gauge/GaugePanelOptions.tsx | 9 ++--- public/app/plugins/panel/gauge/types.ts | 1 + 5 files changed, 52 insertions(+), 16 deletions(-) diff --git a/packages/grafana-ui/src/components/Switch/Switch.tsx b/packages/grafana-ui/src/components/Switch/Switch.tsx index feee58386b8..8cdd7c481f2 100644 --- a/packages/grafana-ui/src/components/Switch/Switch.tsx +++ b/packages/grafana-ui/src/components/Switch/Switch.tsx @@ -34,7 +34,7 @@ export class Switch extends PureComponent { const switchClassName = `gf-form-switch ${switchClass} ${transparent ? 'gf-form-switch--transparent' : ''}`; return ( -