refactoring repeater and code in gauge and bar gauge to reuse more code

packages/grafana-ui/src/components/VizRepeater/VizRepeater.tsx

@@ -1,35 +1,37 @@
 import React, { PureComponent } from 'react';
-import { TimeSeriesVMs } from '../../types';
+import { SingleStatValueInfo } from '../../types';
 
 interface RenderProps {
   vizWidth: number;
   vizHeight: number;
-  vizContainerStyle: React.CSSProperties;
+  valueInfo: SingleStatValueInfo;
 }
 
 interface Props {
   children: (renderProps: RenderProps) => JSX.Element | JSX.Element[];
   height: number;
   width: number;
-  timeSeries: TimeSeriesVMs;
+  values: SingleStatValueInfo[];
   orientation?: string;
 }
 
 export class VizRepeater extends PureComponent<Props> {
   render() {
-    const { children, orientation, height, timeSeries, width } = this.props;
+    const { children, orientation, height, values, width } = this.props;
 
-    const vizContainerWidth = (1 / timeSeries.length) * 100;
-    const vizContainerHeight = (1 / timeSeries.length) * 100;
-    const repeatingVizWidth = Math.floor(width / timeSeries.length) - 10; // make Gauge slightly smaller than panel.
-    const repeatingVizHeight = Math.floor(height / timeSeries.length) - 10;
+    const vizContainerWidth = (1 / values.length) * 100;
+    const vizContainerHeight = (1 / values.length) * 100;
+    const repeatingVizWidth = Math.floor(width / values.length) - 10; // make Gauge slightly smaller than panel.
+    const repeatingVizHeight = Math.floor(height / values.length) - 10;
 
     const horizontalVisualization = {
+      display: 'flex',
       height: height,
       width: `${vizContainerWidth}%`,
     };
 
     const verticalVisualization = {
+      display: 'flex',
       width: width,
       height: `${vizContainerHeight}%`,
     };
@@ -55,10 +57,12 @@ export class VizRepeater extends PureComponent<Props> {
 
     return (
       <div style={repeaterStyle}>
-        {children({
-          vizHeight,
-          vizWidth,
-          vizContainerStyle,
+        {values.map((valueInfo, index) => {
+          return (
+            <div key={index} style={vizContainerStyle}>
+              {children({ vizHeight, vizWidth, valueInfo })}
+            </div>
+          );
         })}
       </div>
     );

packages/grafana-ui/src/types/data.ts

@@ -66,3 +66,12 @@ export interface TableData {
   type: string;
   columnMap: any;
 }
+
+export type SingleStatValue = number | string | null;
+
+/*
+ * So we can add meta info like tags & series name
+ */
+export interface SingleStatValueInfo {
+  value: SingleStatValue;
+}

packages/grafana-ui/src/utils/index.ts

@@ -1,4 +1,5 @@
 export * from './processTimeSeries';
+export * from './singlestat';
 export * from './valueFormats/valueFormats';
 export * from './colors';
 export * from './namedColorsPalette';

public/app/plugins/panel/bargauge/BarGaugePanel.tsx

@@ -2,7 +2,7 @@
 import React, { PureComponent } from 'react';
 
 // Services & Utils
-import { processTimeSeries } from '@grafana/ui';
+import { processSingleStatPanelData } from '@grafana/ui';
 import { config } from 'app/core/config';
 
 // Components
@@ -10,7 +10,7 @@ import { BarGauge, VizRepeater } from '@grafana/ui';
 
 // Types
 import { BarGaugeOptions } from './types';
-import { PanelProps, NullValueMode } from '@grafana/ui/src/types';
+import { PanelProps } from '@grafana/ui/src/types';
 
 interface Props extends PanelProps<BarGaugeOptions> {}
 
@@ -40,40 +40,16 @@ export class BarGaugePanel extends PureComponent<Props> {
 
   render() {
     const { panelData, options, width, height } = this.props;
-    const { stat } = options.valueOptions;
 
-    if (panelData.timeSeries) {
-      const timeSeries = processTimeSeries({
-        timeSeries: panelData.timeSeries,
-        nullValueMode: NullValueMode.Null,
-      });
+    const values = processSingleStatPanelData({
+      panelData: panelData,
+      stat: options.valueOptions.stat,
+    });
 
-      if (timeSeries.length > 1) {
-        return (
-          <VizRepeater height={height} width={width} timeSeries={timeSeries} orientation={options.orientation}>
-            {({ vizHeight, vizWidth, vizContainerStyle }) => {
-              return timeSeries.map((series, index) => {
-                const value = stat !== 'name' ? series.stats[stat] : series.label;
-
-                return (
-                  <div key={index} style={vizContainerStyle}>
-                    {this.renderBarGauge(value, vizWidth, vizHeight)}
-                  </div>
-                );
-              });
-            }}
-          </VizRepeater>
-        );
-      } else if (timeSeries.length > 0) {
-        const value = timeSeries[0].stats[options.valueOptions.stat];
-        return this.renderBarGauge(value, width, height);
-      }
-    } else if (panelData.tableData) {
-      const value = panelData.tableData.rows[0].find(prop => prop > 0);
-
-      return this.renderBarGauge(value, width, height);
-    }
-
-    return <div className="singlestat-panel">No time series data available</div>;
+    return (
+      <VizRepeater height={height} width={width} values={values} orientation={options.orientation}>
+        {({ vizHeight, vizWidth, valueInfo }) => this.renderBarGauge(valueInfo.value, vizWidth, vizHeight)}
+      </VizRepeater>
+    );
   }
 }

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

@@ -2,7 +2,7 @@
 import React, { PureComponent } from 'react';
 
 // Services & Utils
-import { processTimeSeries } from '@grafana/ui';
+import { processSingleStatPanelData } from '@grafana/ui';
 import { config } from 'app/core/config';
 
 // Components
@@ -10,7 +10,7 @@ import { Gauge, VizRepeater } from '@grafana/ui';
 
 // Types
 import { GaugeOptions } from './types';
-import { PanelProps, NullValueMode } from '@grafana/ui/src/types';
+import { PanelProps } from '@grafana/ui/src/types';
 
 interface Props extends PanelProps<GaugeOptions> {}
 
@@ -41,55 +41,18 @@ export class GaugePanel extends PureComponent<Props> {
     );
   }
 
-  renderSingleGauge(timeSeries) {
-    const { options, width, height } = this.props;
-    const value = timeSeries[0].stats[options.valueOptions.stat];
-
-    return <div style={{ display: 'flex' }}>{this.renderGauge(value, width, height)}</div>;
-  }
-
-  renderGaugeWithTableData(panelData) {
-    const { width, height } = this.props;
-    const firstTableDataValue = panelData.tableData.rows[0].find(prop => prop > 0);
-
-    return <div style={{ display: 'flex' }}>{this.renderGauge(firstTableDataValue, width, height)}</div>;
-  }
-
   render() {
     const { panelData, options, height, width } = this.props;
-    const { stat } = options.valueOptions;
-
-    if (panelData.timeSeries) {
-      const timeSeries = processTimeSeries({
-        timeSeries: panelData.timeSeries,
-        nullValueMode: NullValueMode.Null,
-      });
 
-      if (timeSeries.length > 1) {
-        return (
-          <VizRepeater timeSeries={timeSeries} width={width} height={height}>
-            {({ vizHeight, vizWidth, vizContainerStyle }) => {
-              return timeSeries.map((series, index) => {
-                const value = stat !== 'name' ? series.stats[stat] : series.label;
+    const values = processSingleStatPanelData({
+      panelData: panelData,
+      stat: options.valueOptions.stat,
+    });
 
-                return (
-                  <div key={`${series.label}-${index}`} style={Object.assign(vizContainerStyle, { display: 'flex' })}>
-                    {this.renderGauge(value, vizWidth, vizHeight)}
-                  </div>
-                );
-              });
-            }}
-          </VizRepeater>
-        );
-      } else if (timeSeries.length > 0) {
-        return this.renderSingleGauge(timeSeries);
-      } else {
-        return null;
-      }
-    } else if (panelData.tableData) {
-      return this.renderGaugeWithTableData(panelData);
-    } else {
-      return <div className="singlestat-panel">No time series data available</div>;
-    }
+    return (
+      <VizRepeater height={height} width={width} values={values} orientation="horizontal">
+        {({ vizHeight, vizWidth, valueInfo }) => this.renderGauge(valueInfo.value, vizWidth, vizHeight)}
+      </VizRepeater>
+    );
   }
 }