';
if (panel.prefix) {
body += getSpan('singlestat-panel-prefix', panel.prefixFontSize, panel.colorPrefix, panel.prefix);
}
- body += getSpan('singlestat-panel-value', panel.valueFontSize, panel.colorValue, data.valueFormatted);
+ body += getSpan('singlestat-panel-value', panel.valueFontSize, panel.colorValue, data.display.text);
if (panel.postfix) {
body += getSpan('singlestat-panel-postfix', panel.postfixFontSize, panel.colorPostfix, panel.postfix);
@@ -434,14 +369,16 @@ class SingleStatCtrl extends MetricsPanelCtrl {
}
function getValueText() {
+ const data: ShowData = ctrl.data;
let result = panel.prefix ? templateSrv.replace(panel.prefix, data.scopedVars) : '';
- result += data.valueFormatted;
+ result += data.display.text;
result += panel.postfix ? templateSrv.replace(panel.postfix, data.scopedVars) : '';
return result;
}
function addGauge() {
+ const data: ShowData = ctrl.data;
const width = elem.width();
const height = elem.height();
// Allow to use a bit more space for wide gauges
@@ -513,7 +450,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
width: thresholdMarkersWidth,
},
value: {
- color: panel.colorValue ? getColorForValue(data, data.valueRounded) : null,
+ color: panel.colorValue ? getColorForValue(data, data.display.numeric) : null,
formatter: () => {
return getValueText();
},
@@ -537,6 +474,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
}
function addSparkline() {
+ const data: ShowData = ctrl.data;
const width = elem.width();
if (width < 30) {
// element has not gotten it's width yet
@@ -544,6 +482,10 @@ class SingleStatCtrl extends MetricsPanelCtrl {
setTimeout(addSparkline, 30);
return;
}
+ if (!data.sparkline || !data.sparkline.length) {
+ // no sparkline data
+ return;
+ }
const height = ctrl.height;
const plotCanvas = $('
');
@@ -592,7 +534,7 @@ class SingleStatCtrl extends MetricsPanelCtrl {
elem.append(plotCanvas);
const plotSeries = {
- data: data.flotpairs,
+ data: data.sparkline,
color: getColorFromHexRgbOrName(panel.sparkline.lineColor, config.theme.type),
};
@@ -603,26 +545,24 @@ class SingleStatCtrl extends MetricsPanelCtrl {
if (!ctrl.data) {
return;
}
- data = ctrl.data;
+ const { data, panel } = ctrl;
// get thresholds
- data.thresholds = panel.thresholds.split(',').map((strVale: string) => {
- return Number(strVale.trim());
- });
+ data.thresholds = panel.thresholds
+ ? panel.thresholds.split(',').map((strVale: string) => {
+ return Number(strVale.trim());
+ })
+ : [];
// Map panel colors to hex or rgb/a values
- data.colorMap = panel.colors.map((color: string) =>
- getColorFromHexRgbOrName(
- color,
- config.bootData.user.lightTheme ? GrafanaThemeType.Light : GrafanaThemeType.Dark
- )
- );
+ if (panel.colors) {
+ data.colorMap = panel.colors.map((color: string) => getColorFromHexRgbOrName(color, config.theme.type));
+ }
const body = panel.gauge.show ? '' : getBigValueHtml();
if (panel.colorBackground) {
- const color = getColorForValue(data, data.value);
- console.log(color);
+ const color = getColorForValue(data, data.display.numeric);
if (color) {
$panelContainer.css('background-color', color);
if (scope.fullscreen) {
@@ -729,4 +669,59 @@ function getColorForValue(data: any, value: number) {
return _.first(data.colorMap);
}
+//------------------------------------------------
+// Private utility functions
+// Somethign like this should be avaliable in a
+// DataFrame[] abstraction helper
+//------------------------------------------------
+
+interface FrameInfo {
+ firstTimeField?: Field;
+ frame: DataFrame;
+}
+
+interface FieldInfo {
+ field: Field;
+ frame: FrameInfo;
+}
+
+interface DistinctFieldsInfo {
+ first?: FieldInfo;
+ byName: KeyValue
;
+ names: string[];
+}
+
+function getDistinctNames(data: DataFrame[]): DistinctFieldsInfo {
+ const distinct: DistinctFieldsInfo = {
+ byName: {},
+ names: [],
+ };
+ for (const frame of data) {
+ const info: FrameInfo = { frame };
+ for (const field of frame.fields) {
+ if (field.type === FieldType.time) {
+ if (!info.firstTimeField) {
+ info.firstTimeField = field;
+ }
+ } else {
+ const f = { field, frame: info };
+ if (!distinct.first) {
+ distinct.first = f;
+ }
+ let t = field.config.title;
+ if (t && !distinct.byName[t]) {
+ distinct.byName[t] = f;
+ distinct.names.push(t);
+ }
+ t = field.name;
+ if (t && !distinct.byName[t]) {
+ distinct.byName[t] = f;
+ distinct.names.push(t);
+ }
+ }
+ }
+ }
+ return distinct;
+}
+
export { SingleStatCtrl, SingleStatCtrl as PanelCtrl, getColorForValue };
diff --git a/public/app/plugins/panel/singlestat/specs/singlestat.test.ts b/public/app/plugins/panel/singlestat/specs/singlestat.test.ts
index a604c08504e..17dcdcdb9e6 100644
--- a/public/app/plugins/panel/singlestat/specs/singlestat.test.ts
+++ b/public/app/plugins/panel/singlestat/specs/singlestat.test.ts
@@ -1,9 +1,17 @@
-import { SingleStatCtrl } from '../module';
-import { dateTime } from '@grafana/data';
+import { SingleStatCtrl, ShowData } from '../module';
+import { dateTime, ReducerID } from '@grafana/data';
import { LinkSrv } from 'app/features/panel/panellinks/link_srv';
+import { LegacyResponseData } from '@grafana/ui';
+
+interface TestContext {
+ ctrl: SingleStatCtrl;
+ input: LegacyResponseData[];
+ data: Partial;
+ setup: (setupFunc: any) => void;
+}
describe('SingleStatCtrl', () => {
- const ctx = {} as any;
+ const ctx: TestContext = {} as TestContext;
const epoch = 1505826363746;
Date.now = () => epoch;
@@ -37,7 +45,7 @@ describe('SingleStatCtrl', () => {
// @ts-ignore
ctx.ctrl = new SingleStatCtrl($scope, $injector, {} as LinkSrv, $sanitize);
setupFunc();
- ctx.ctrl.onDataReceived(ctx.data);
+ ctx.ctrl.onDataReceived(ctx.input);
ctx.data = ctx.ctrl.data;
});
};
@@ -46,40 +54,38 @@ describe('SingleStatCtrl', () => {
});
}
- singleStatScenario('with defaults', (ctx: any) => {
+ singleStatScenario('with defaults', (ctx: TestContext) => {
ctx.setup(() => {
- ctx.data = [{ target: 'test.cpu1', datapoints: [[10, 1], [20, 2]] }];
+ ctx.input = [{ target: 'test.cpu1', datapoints: [[10, 1], [20, 2]] }];
});
it('Should use series avg as default main value', () => {
expect(ctx.data.value).toBe(15);
- expect(ctx.data.valueRounded).toBe(15);
});
it('should set formatted falue', () => {
- expect(ctx.data.valueFormatted).toBe('15');
+ expect(ctx.data.display.text).toBe('15');
});
});
- singleStatScenario('showing serie name instead of value', (ctx: any) => {
+ singleStatScenario('showing serie name instead of value', (ctx: TestContext) => {
ctx.setup(() => {
- ctx.data = [{ target: 'test.cpu1', datapoints: [[10, 1], [20, 2]] }];
+ ctx.input = [{ target: 'test.cpu1', datapoints: [[10, 1], [20, 2]] }];
ctx.ctrl.panel.valueName = 'name';
});
it('Should use series avg as default main value', () => {
- expect(ctx.data.value).toBe(0);
- expect(ctx.data.valueRounded).toBe(0);
+ expect(ctx.data.value).toBe('test.cpu1');
});
it('should set formatted value', () => {
- expect(ctx.data.valueFormatted).toBe('test.cpu1');
+ expect(ctx.data.display.text).toBe('test.cpu1');
});
});
- singleStatScenario('showing last iso time instead of value', (ctx: any) => {
+ singleStatScenario('showing last iso time instead of value', (ctx: TestContext) => {
ctx.setup(() => {
- ctx.data = [{ target: 'test.cpu1', datapoints: [[10, 12], [20, 1505634997920]] }];
+ ctx.input = [{ target: 'test.cpu1', datapoints: [[10, 12], [20, 1505634997920]] }];
ctx.ctrl.panel.valueName = 'last_time';
ctx.ctrl.panel.format = 'dateTimeAsIso';
ctx.ctrl.dashboard.isTimezoneUtc = () => false;
@@ -87,30 +93,29 @@ describe('SingleStatCtrl', () => {
it('Should use time instead of value', () => {
expect(ctx.data.value).toBe(1505634997920);
- expect(ctx.data.valueRounded).toBe(1505634997920);
});
it('should set formatted value', () => {
- expect(dateTime(ctx.data.valueFormatted).valueOf()).toBe(1505634997000);
+ expect(dateTime(ctx.data.display.text).valueOf()).toBe(1505634997000);
});
});
- singleStatScenario('showing last iso time instead of value (in UTC)', (ctx: any) => {
+ singleStatScenario('showing last iso time instead of value (in UTC)', (ctx: TestContext) => {
ctx.setup(() => {
- ctx.data = [{ target: 'test.cpu1', datapoints: [[10, 12], [20, 5000]] }];
+ ctx.input = [{ target: 'test.cpu1', datapoints: [[10, 12], [20, 5000]] }];
ctx.ctrl.panel.valueName = 'last_time';
ctx.ctrl.panel.format = 'dateTimeAsIso';
ctx.ctrl.dashboard.isTimezoneUtc = () => true;
});
it('should set value', () => {
- expect(ctx.data.valueFormatted).toBe('1970-01-01 00:00:05');
+ expect(ctx.data.display.text).toBe('1970-01-01 00:00:05');
});
});
- singleStatScenario('showing last us time instead of value', (ctx: any) => {
+ singleStatScenario('showing last us time instead of value', (ctx: TestContext) => {
ctx.setup(() => {
- ctx.data = [{ target: 'test.cpu1', datapoints: [[10, 12], [20, 1505634997920]] }];
+ ctx.input = [{ target: 'test.cpu1', datapoints: [[10, 12], [20, 1505634997920]] }];
ctx.ctrl.panel.valueName = 'last_time';
ctx.ctrl.panel.format = 'dateTimeAsUS';
ctx.ctrl.dashboard.isTimezoneUtc = () => false;
@@ -118,79 +123,76 @@ describe('SingleStatCtrl', () => {
it('Should use time instead of value', () => {
expect(ctx.data.value).toBe(1505634997920);
- expect(ctx.data.valueRounded).toBe(1505634997920);
});
it('should set formatted value', () => {
- expect(ctx.data.valueFormatted).toBe(dateTime(1505634997920).format('MM/DD/YYYY h:mm:ss a'));
+ expect(ctx.data.display.text).toBe(dateTime(1505634997920).format('MM/DD/YYYY h:mm:ss a'));
});
});
- singleStatScenario('showing last us time instead of value (in UTC)', (ctx: any) => {
+ singleStatScenario('showing last us time instead of value (in UTC)', (ctx: TestContext) => {
ctx.setup(() => {
- ctx.data = [{ target: 'test.cpu1', datapoints: [[10, 12], [20, 5000]] }];
+ ctx.input = [{ target: 'test.cpu1', datapoints: [[10, 12], [20, 5000]] }];
ctx.ctrl.panel.valueName = 'last_time';
ctx.ctrl.panel.format = 'dateTimeAsUS';
ctx.ctrl.dashboard.isTimezoneUtc = () => true;
});
it('should set formatted value', () => {
- expect(ctx.data.valueFormatted).toBe('01/01/1970 12:00:05 am');
+ expect(ctx.data.display.text).toBe('01/01/1970 12:00:05 am');
});
});
- singleStatScenario('showing last time from now instead of value', (ctx: any) => {
+ singleStatScenario('showing last time from now instead of value', (ctx: TestContext) => {
ctx.setup(() => {
- ctx.data = [{ target: 'test.cpu1', datapoints: [[10, 12], [20, 1505634997920]] }];
+ ctx.input = [{ target: 'test.cpu1', datapoints: [[10, 12], [20, 1505634997920]] }];
ctx.ctrl.panel.valueName = 'last_time';
ctx.ctrl.panel.format = 'dateTimeFromNow';
});
it('Should use time instead of value', () => {
expect(ctx.data.value).toBe(1505634997920);
- expect(ctx.data.valueRounded).toBe(1505634997920);
});
it('should set formatted value', () => {
- expect(ctx.data.valueFormatted).toBe('2 days ago');
+ expect(ctx.data.display.text).toBe('2 days ago');
});
});
- singleStatScenario('showing last time from now instead of value (in UTC)', (ctx: any) => {
+ singleStatScenario('showing last time from now instead of value (in UTC)', (ctx: TestContext) => {
ctx.setup(() => {
- ctx.data = [{ target: 'test.cpu1', datapoints: [[10, 12], [20, 1505634997920]] }];
+ ctx.input = [{ target: 'test.cpu1', datapoints: [[10, 12], [20, 1505634997920]] }];
ctx.ctrl.panel.valueName = 'last_time';
ctx.ctrl.panel.format = 'dateTimeFromNow';
});
it('should set formatted value', () => {
- expect(ctx.data.valueFormatted).toBe('2 days ago');
+ expect(ctx.data.display.text).toBe('2 days ago');
});
});
singleStatScenario(
'MainValue should use same number for decimals as displayed when checking thresholds',
- (ctx: any) => {
+ (ctx: TestContext) => {
ctx.setup(() => {
- ctx.data = [{ target: 'test.cpu1', datapoints: [[99.999, 1], [99.99999, 2]] }];
+ ctx.input = [{ target: 'test.cpu1', datapoints: [[99.999, 1], [99.99999, 2]] }];
ctx.ctrl.panel.valueName = 'avg';
ctx.ctrl.panel.format = 'none';
});
it('Should be rounded', () => {
expect(ctx.data.value).toBe(99.999495);
- expect(ctx.data.valueRounded).toBe(100);
});
it('should set formatted value', () => {
- expect(ctx.data.valueFormatted).toBe('100');
+ expect(ctx.data.display.text).toBe('100');
});
}
);
- singleStatScenario('When value to text mapping is specified', (ctx: any) => {
+ singleStatScenario('When value to text mapping is specified', (ctx: TestContext) => {
ctx.setup(() => {
- ctx.data = [{ target: 'test.cpu1', datapoints: [[9.9, 1]] }];
+ ctx.input = [{ target: 'test.cpu1', datapoints: [[9.9, 1]] }];
ctx.ctrl.panel.valueMaps = [{ value: '10', text: 'OK' }];
});
@@ -198,36 +200,32 @@ describe('SingleStatCtrl', () => {
expect(ctx.data.value).toBe(9.9);
});
- it('round should be rounded up', () => {
- expect(ctx.data.valueRounded).toBe(10);
- });
-
it('Should replace value with text', () => {
- expect(ctx.data.valueFormatted).toBe('OK');
+ expect(ctx.data.display.text).toBe('OK');
});
});
- singleStatScenario('When range to text mapping is specified for first range', (ctx: any) => {
+ singleStatScenario('When range to text mapping is specified for first range', (ctx: TestContext) => {
ctx.setup(() => {
- ctx.data = [{ target: 'test.cpu1', datapoints: [[41, 50]] }];
+ ctx.input = [{ target: 'test.cpu1', datapoints: [[41, 50]] }];
ctx.ctrl.panel.mappingType = 2;
ctx.ctrl.panel.rangeMaps = [{ from: '10', to: '50', text: 'OK' }, { from: '51', to: '100', text: 'NOT OK' }];
});
it('Should replace value with text OK', () => {
- expect(ctx.data.valueFormatted).toBe('OK');
+ expect(ctx.data.display.text).toBe('OK');
});
});
- singleStatScenario('When range to text mapping is specified for other ranges', (ctx: any) => {
+ singleStatScenario('When range to text mapping is specified for other ranges', (ctx: TestContext) => {
ctx.setup(() => {
- ctx.data = [{ target: 'test.cpu1', datapoints: [[65, 75]] }];
+ ctx.input = [{ target: 'test.cpu1', datapoints: [[65, 75]] }];
ctx.ctrl.panel.mappingType = 2;
ctx.ctrl.panel.rangeMaps = [{ from: '10', to: '50', text: 'OK' }, { from: '51', to: '100', text: 'NOT OK' }];
});
it('Should replace value with text NOT OK', () => {
- expect(ctx.data.valueFormatted).toBe('NOT OK');
+ expect(ctx.data.display.text).toBe('NOT OK');
});
});
@@ -240,9 +238,9 @@ describe('SingleStatCtrl', () => {
},
];
- singleStatScenario('with default values', (ctx: any) => {
+ singleStatScenario('with default values', (ctx: TestContext) => {
ctx.setup(() => {
- ctx.data = tableData;
+ ctx.input = tableData;
ctx.ctrl.panel = {
emit: () => {},
};
@@ -252,17 +250,16 @@ describe('SingleStatCtrl', () => {
it('Should use first rows value as default main value', () => {
expect(ctx.data.value).toBe(15);
- expect(ctx.data.valueRounded).toBe(15);
});
it('should set formatted value', () => {
- expect(ctx.data.valueFormatted).toBe('15');
+ expect(ctx.data.display.text).toBe('15');
});
});
- singleStatScenario('When table data has multiple columns', (ctx: any) => {
+ singleStatScenario('When table data has multiple columns', (ctx: TestContext) => {
ctx.setup(() => {
- ctx.data = tableData;
+ ctx.input = tableData;
ctx.ctrl.panel.tableColumn = '';
});
@@ -273,29 +270,28 @@ describe('SingleStatCtrl', () => {
singleStatScenario(
'MainValue should use same number for decimals as displayed when checking thresholds',
- (ctx: any) => {
+ (ctx: TestContext) => {
ctx.setup(() => {
- ctx.data = tableData;
- ctx.data[0].rows[0] = [1492759673649, 'ignore1', 99.99999, 'ignore2'];
+ ctx.input = tableData;
+ ctx.input[0].rows[0] = [1492759673649, 'ignore1', 99.99999, 'ignore2'];
ctx.ctrl.panel.mappingType = 0;
ctx.ctrl.panel.tableColumn = 'mean';
});
it('Should be rounded', () => {
expect(ctx.data.value).toBe(99.99999);
- expect(ctx.data.valueRounded).toBe(100);
});
it('should set formatted falue', () => {
- expect(ctx.data.valueFormatted).toBe('100');
+ expect(ctx.data.display.text).toBe('100');
});
}
);
- singleStatScenario('When value to text mapping is specified', (ctx: any) => {
+ singleStatScenario('When value to text mapping is specified', (ctx: TestContext) => {
ctx.setup(() => {
- ctx.data = tableData;
- ctx.data[0].rows[0] = [1492759673649, 'ignore1', 9.9, 'ignore2'];
+ ctx.input = tableData;
+ ctx.input[0].rows[0] = [1492759673649, 'ignore1', 9.9, 'ignore2'];
ctx.ctrl.panel.mappingType = 2;
ctx.ctrl.panel.tableColumn = 'mean';
ctx.ctrl.panel.valueMaps = [{ value: '10', text: 'OK' }];
@@ -305,59 +301,60 @@ describe('SingleStatCtrl', () => {
expect(ctx.data.value).toBe(9.9);
});
- it('round should be rounded up', () => {
- expect(ctx.data.valueRounded).toBe(10);
- });
+ // it('round should be rounded up', () => {
+ // expect(ctx.data.valueRounded).toBe(10);
+ // });
it('Should replace value with text', () => {
- expect(ctx.data.valueFormatted).toBe('OK');
+ expect(ctx.data.display.text).toBe('OK');
});
});
- singleStatScenario('When range to text mapping is specified for first range', (ctx: any) => {
+ singleStatScenario('When range to text mapping is specified for first range', (ctx: TestContext) => {
ctx.setup(() => {
- ctx.data = tableData;
- ctx.data[0].rows[0] = [1492759673649, 'ignore1', 41, 'ignore2'];
+ ctx.input = tableData;
+ ctx.input[0].rows[0] = [1492759673649, 'ignore1', 41, 'ignore2'];
ctx.ctrl.panel.tableColumn = 'mean';
ctx.ctrl.panel.mappingType = 2;
ctx.ctrl.panel.rangeMaps = [{ from: '10', to: '50', text: 'OK' }, { from: '51', to: '100', text: 'NOT OK' }];
});
it('Should replace value with text OK', () => {
- expect(ctx.data.valueFormatted).toBe('OK');
+ expect(ctx.data.display.text).toBe('OK');
});
});
- singleStatScenario('When range to text mapping is specified for other ranges', (ctx: any) => {
+ singleStatScenario('When range to text mapping is specified for other ranges', (ctx: TestContext) => {
ctx.setup(() => {
- ctx.data = tableData;
- ctx.data[0].rows[0] = [1492759673649, 'ignore1', 65, 'ignore2'];
+ ctx.input = tableData;
+ ctx.input[0].rows[0] = [1492759673649, 'ignore1', 65, 'ignore2'];
ctx.ctrl.panel.tableColumn = 'mean';
ctx.ctrl.panel.mappingType = 2;
ctx.ctrl.panel.rangeMaps = [{ from: '10', to: '50', text: 'OK' }, { from: '51', to: '100', text: 'NOT OK' }];
});
it('Should replace value with text NOT OK', () => {
- expect(ctx.data.valueFormatted).toBe('NOT OK');
+ expect(ctx.data.display.text).toBe('NOT OK');
});
});
- singleStatScenario('When value is string', (ctx: any) => {
+ singleStatScenario('When value is string', (ctx: TestContext) => {
ctx.setup(() => {
- ctx.data = tableData;
- ctx.data[0].rows[0] = [1492759673649, 'ignore1', 65, 'ignore2'];
+ ctx.input = tableData;
+ ctx.input[0].rows[0] = [1492759673649, 'ignore1', 65, 'ignore2'];
ctx.ctrl.panel.tableColumn = 'test1';
+ ctx.ctrl.panel.valueName = ReducerID.first;
});
it('Should replace value with text NOT OK', () => {
- expect(ctx.data.valueFormatted).toBe('ignore1');
+ expect(ctx.data.display.text).toBe('ignore1');
});
});
- singleStatScenario('When value is zero', (ctx: any) => {
+ singleStatScenario('When value is zero', (ctx: TestContext) => {
ctx.setup(() => {
- ctx.data = tableData;
- ctx.data[0].rows[0] = [1492759673649, 'ignore1', 0, 'ignore2'];
+ ctx.input = tableData;
+ ctx.input[0].rows[0] = [1492759673649, 'ignore1', 0, 'ignore2'];
ctx.ctrl.panel.tableColumn = 'mean';
});