From f16101101d2035f6e5ce1f06f4e40efe8748fae1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Torkel=20=C3=96degaard?= Date: Fri, 18 Jan 2019 11:58:29 +0100 Subject: [PATCH] Minor refactoring and name changes --- .../grafana-ui/src/components/Gauge/Gauge.tsx | 9 +- packages/grafana-ui/src/types/panel.ts | 4 +- .../grafana-ui/src/utils/processTimeSeries.ts | 9 +- public/app/core/services/context_srv.ts | 5 + public/app/plugins/panel/gauge/GaugePanel.tsx | 20 ++- public/app/plugins/panel/gauge/timeSeries.ts | 168 ------------------ .../app/plugins/panel/graph2/GraphPanel.tsx | 2 - 7 files changed, 29 insertions(+), 188 deletions(-) delete mode 100644 public/app/plugins/panel/gauge/timeSeries.ts diff --git a/packages/grafana-ui/src/components/Gauge/Gauge.tsx b/packages/grafana-ui/src/components/Gauge/Gauge.tsx index 8013387812a..63d875e9cd5 100644 --- a/packages/grafana-ui/src/components/Gauge/Gauge.tsx +++ b/packages/grafana-ui/src/components/Gauge/Gauge.tsx @@ -4,10 +4,10 @@ import $ from 'jquery'; import { ValueMapping, Threshold, - Theme, + ThemeName, MappingType, BasicGaugeColor, - Themes, + ThemeNames, ValueMap, RangeMap, } from '../../types/panel'; @@ -31,7 +31,7 @@ export interface Props { suffix: string; unit: string; width: number; - theme?: Theme; + theme?: ThemeName; } export class Gauge extends PureComponent { @@ -48,6 +48,7 @@ export class Gauge extends PureComponent { thresholds: [], unit: 'none', stat: 'avg', + theme: ThemeNames.Dark, }; componentDidMount() { @@ -207,7 +208,7 @@ export class Gauge extends PureComponent { } const dimension = Math.min(width, height * 1.3); - const backgroundColor = theme === Themes.Light ? 'rgb(230,230,230)' : 'rgb(38,38,38)'; + const backgroundColor = theme === ThemeNames.Light ? 'rgb(230,230,230)' : 'rgb(38,38,38)'; const fontScale = parseInt('80', 10) / 100; const fontSize = Math.min(dimension / 5, 100) * fontScale; const gaugeWidthReduceRatio = showThresholdLabels ? 1.5 : 1; diff --git a/packages/grafana-ui/src/types/panel.ts b/packages/grafana-ui/src/types/panel.ts index 340bec9d37b..881bf920c27 100644 --- a/packages/grafana-ui/src/types/panel.ts +++ b/packages/grafana-ui/src/types/panel.ts @@ -67,9 +67,9 @@ export interface RangeMap extends BaseMap { to: string; } -export type Theme = 'dark' | 'light'; +export type ThemeName = 'dark' | 'light'; -export enum Themes { +export enum ThemeNames { Dark = 'dark', Light = 'light', } diff --git a/packages/grafana-ui/src/utils/processTimeSeries.ts b/packages/grafana-ui/src/utils/processTimeSeries.ts index 7254354a21b..7b0c8e55239 100644 --- a/packages/grafana-ui/src/utils/processTimeSeries.ts +++ b/packages/grafana-ui/src/utils/processTimeSeries.ts @@ -1,18 +1,19 @@ // Libraries import _ from 'lodash'; +import { colors } from './colors'; + // Types import { TimeSeries, TimeSeriesVMs, NullValueMode, TimeSeriesValue } from '../types'; interface Options { timeSeries: TimeSeries[]; nullValueMode: NullValueMode; - colorPalette: string[]; } -export function processTimeSeries({ timeSeries, nullValueMode, colorPalette }: Options): TimeSeriesVMs { +export function processTimeSeries({ timeSeries, nullValueMode }: Options): TimeSeriesVMs { const vmSeries = timeSeries.map((item, index) => { - const colorIndex = index % colorPalette.length; + const colorIndex = index % colors.length; const label = item.target; const result = []; @@ -150,7 +151,7 @@ export function processTimeSeries({ timeSeries, nullValueMode, colorPalette }: O return { data: result, label: label, - color: colorPalette[colorIndex], + color: colors[colorIndex], allIsZero, allIsNull, stats: { diff --git a/public/app/core/services/context_srv.ts b/public/app/core/services/context_srv.ts index c4134598175..5353fb507cc 100644 --- a/public/app/core/services/context_srv.ts +++ b/public/app/core/services/context_srv.ts @@ -2,6 +2,7 @@ import config from 'app/core/config'; import _ from 'lodash'; import coreModule from 'app/core/core_module'; import store from 'app/core/store'; +import { ThemeNames, ThemeName } from '@grafana/ui'; export class User { isGrafanaAdmin: any; @@ -59,6 +60,10 @@ export class ContextSrv { this.sidemenu = !this.sidemenu; store.set('grafana.sidemenu', this.sidemenu); } + + getTheme(): ThemeName { + return this.user.lightTheme ? ThemeNames.Light : ThemeNames.Dark; + } } const contextSrv = new ContextSrv(); diff --git a/public/app/plugins/panel/gauge/GaugePanel.tsx b/public/app/plugins/panel/gauge/GaugePanel.tsx index 52ee273ef21..8b62171f31b 100644 --- a/public/app/plugins/panel/gauge/GaugePanel.tsx +++ b/public/app/plugins/panel/gauge/GaugePanel.tsx @@ -1,16 +1,20 @@ +// Libraries import React, { PureComponent } from 'react'; -import { PanelProps, NullValueMode, Gauge, Themes } from '@grafana/ui'; -import { getTimeSeriesVMs } from './timeSeries'; -import { GaugeOptions } from './types'; +// Services & Utils import { contextSrv } from 'app/core/core'; +import { processTimeSeries } from '@grafana/ui'; + +// Components +import { Gauge } from '@grafana/ui'; + +// Types +import { GaugeOptions } from './types'; +import { PanelProps, NullValueMode } from '@grafana/ui/src/types'; interface Props extends PanelProps {} export class GaugePanel extends PureComponent { - getTheme() { - return contextSrv.user.lightTheme ? Themes.Light : Themes.Dark; - } render() { const { timeSeries, width, height, onInterpolate, options } = this.props; @@ -18,7 +22,7 @@ export class GaugePanel extends PureComponent { const prefix = onInterpolate(options.prefix); const suffix = onInterpolate(options.suffix); - const vmSeries = getTimeSeriesVMs({ + const vmSeries = processTimeSeries({ timeSeries: timeSeries, nullValueMode: NullValueMode.Ignore, }); @@ -31,7 +35,7 @@ export class GaugePanel extends PureComponent { height={height} prefix={prefix} suffix={suffix} - theme={this.getTheme()} + theme={contextSrv.getTheme()} /> ); } diff --git a/public/app/plugins/panel/gauge/timeSeries.ts b/public/app/plugins/panel/gauge/timeSeries.ts deleted file mode 100644 index 18054fe0d5e..00000000000 --- a/public/app/plugins/panel/gauge/timeSeries.ts +++ /dev/null @@ -1,168 +0,0 @@ -// Libraries -import _ from 'lodash'; - -// Utils -import { colors } from '@grafana/ui'; - -// Types -import { TimeSeries, TimeSeriesVMs, NullValueMode } from '@grafana/ui'; - -interface Options { - timeSeries: TimeSeries[]; - nullValueMode: NullValueMode; -} - -export function getTimeSeriesVMs({ timeSeries, nullValueMode }: Options): TimeSeriesVMs { - const vmSeries = timeSeries.map((item, index) => { - const colorIndex = index % colors.length; - const label = item.target; - const result = []; - - // stat defaults - let total = 0; - let max = -Number.MAX_VALUE; - let min = Number.MAX_VALUE; - let logmin = Number.MAX_VALUE; - let avg = null; - let current = null; - let first = null; - let delta = 0; - let diff = null; - let range = null; - let timeStep = Number.MAX_VALUE; - let allIsNull = true; - let allIsZero = true; - - const ignoreNulls = nullValueMode === NullValueMode.Ignore; - const nullAsZero = nullValueMode === NullValueMode.AsZero; - - let currentTime; - let currentValue; - let nonNulls = 0; - let previousTime; - let previousValue = 0; - let previousDeltaUp = true; - - for (let i = 0; i < item.datapoints.length; i++) { - currentValue = item.datapoints[i][0]; - currentTime = item.datapoints[i][1]; - - // Due to missing values we could have different timeStep all along the series - // so we have to find the minimum one (could occur with aggregators such as ZimSum) - if (previousTime !== undefined) { - const currentStep = currentTime - previousTime; - if (currentStep < timeStep) { - timeStep = currentStep; - } - } - - previousTime = currentTime; - - if (currentValue === null) { - if (ignoreNulls) { - continue; - } - if (nullAsZero) { - currentValue = 0; - } - } - - if (currentValue !== null) { - if (_.isNumber(currentValue)) { - total += currentValue; - allIsNull = false; - nonNulls++; - } - - if (currentValue > max) { - max = currentValue; - } - - if (currentValue < min) { - min = currentValue; - } - - if (first === null) { - first = currentValue; - } else { - if (previousValue > currentValue) { - // counter reset - previousDeltaUp = false; - if (i === item.datapoints.length - 1) { - // reset on last - delta += currentValue; - } - } else { - if (previousDeltaUp) { - delta += currentValue - previousValue; // normal increment - } else { - delta += currentValue; // account for counter reset - } - previousDeltaUp = true; - } - } - previousValue = currentValue; - - if (currentValue < logmin && currentValue > 0) { - logmin = currentValue; - } - - if (currentValue !== 0) { - allIsZero = false; - } - } - - result.push([currentTime, currentValue]); - } - - if (max === -Number.MAX_VALUE) { - max = null; - } - - if (min === Number.MAX_VALUE) { - min = null; - } - - if (result.length && !allIsNull) { - avg = total / nonNulls; - current = result[result.length - 1][1]; - if (current === null && result.length > 1) { - current = result[result.length - 2][1]; - } - } - - if (max !== null && min !== null) { - range = max - min; - } - - if (current !== null && first !== null) { - diff = current - first; - } - - const count = result.length; - - return { - data: result, - label: label, - color: colors[colorIndex], - allIsZero, - allIsNull, - stats: { - total, - min, - max, - current, - logmin, - avg, - diff, - delta, - timeStep, - range, - count, - first, - }, - }; - }); - - return vmSeries; -} diff --git a/public/app/plugins/panel/graph2/GraphPanel.tsx b/public/app/plugins/panel/graph2/GraphPanel.tsx index 28c17dbad2c..2fef35b4f5f 100644 --- a/public/app/plugins/panel/graph2/GraphPanel.tsx +++ b/public/app/plugins/panel/graph2/GraphPanel.tsx @@ -1,7 +1,6 @@ // Libraries import _ from 'lodash'; import React, { PureComponent } from 'react'; -import { colors } from '@grafana/ui'; // Utils import { processTimeSeries } from '@grafana/ui/src/utils'; @@ -23,7 +22,6 @@ export class GraphPanel extends PureComponent { const vmSeries = processTimeSeries({ timeSeries: timeSeries, nullValueMode: NullValueMode.Ignore, - colorPalette: colors, }); return (