IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2026-09-05 04:40:13 -05:00
Code Issues Packages Projects Releases Wiki Activity

Field: UI & Code consistency Title -> Display name (#24507)

Browse Source 
* Field: Change getFieldTitle to getFieldDisplayNamne and change the NAME of the title field config from Title to Display name

* Review feedback

* fixed unit tests

* Rename fieldConfig.title to displayName

* Fixed tests

* Added migration

* Renamed getFrameDisplayTitle to getFrameDisplayName
This commit is contained in:
Torkel Ödegaard
2020-05-12 13:52:53 +02:00
committed by GitHub
parent 125ba95686
commit 8de10a8b9f
51 changed files with 254 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/grafana-data/src/dataframe/processDataFrame.ts
+9 -8
View File
@@ -14,14 +14,15 @@ import {
TimeSeriesValue,
FieldDTO,
DataFrameDTO,
TIME_SERIES_FIELD_NAME,
TIME_SERIES_VALUE_FIELD_NAME,
TIME_SERIES_TIME_FIELD_NAME,
} from '../types/index';
import { isDateTime } from '../datetime/moment_wrapper';
import { ArrayVector } from '../vector/ArrayVector';
import { MutableDataFrame } from './MutableDataFrame';
import { SortedVector } from '../vector/SortedVector';
import { ArrayDataFrame } from './ArrayDataFrame';
import { getFieldTitle } from '../field/fieldState';
import { getFieldDisplayName } from '../field/fieldState';
function convertTableToDataFrame(table: TableData): DataFrame {
const fields = table.columns.map(c => {
@@ -71,13 +72,13 @@ function convertTimeSeriesToDataFrame(timeSeries: TimeSeries): DataFrame {
const fields = [
{
name: 'Time',
name: TIME_SERIES_TIME_FIELD_NAME,
type: FieldType.time,
config: {},
values: new ArrayVector<number>(times),
},
{
name: TIME_SERIES_FIELD_NAME,
name: TIME_SERIES_VALUE_FIELD_NAME,
type: FieldType.number,
config: {
unit: timeSeries.unit,
@@ -88,7 +89,7 @@ function convertTimeSeriesToDataFrame(timeSeries: TimeSeries): DataFrame {
];
if (timeSeries.title) {
(fields[1].config as FieldConfig).title = timeSeries.title;
(fields[1].config as FieldConfig).displayName = timeSeries.title;
}
return {
@@ -118,13 +119,13 @@ function convertGraphSeriesToDataFrame(graphSeries: GraphSeriesXY): DataFrame {
name: graphSeries.label,
fields: [
{
name: graphSeries.label || TIME_SERIES_FIELD_NAME,
name: graphSeries.label || TIME_SERIES_VALUE_FIELD_NAME,
type: FieldType.number,
config: {},
values: x,
},
{
name: 'Time',
name: TIME_SERIES_TIME_FIELD_NAME,
type: FieldType.time,
config: {
unit: 'dateTimeAsIso',
@@ -332,7 +333,7 @@ export const toLegacyResponseData = (frame: DataFrame): TimeSeries | TableData =
return {
alias: frame.name,
target: getFieldTitle(valueField, frame),
target: getFieldDisplayName(valueField, frame),
datapoints: rows,
unit: fields[0].config ? fields[0].config.unit : undefined,
refId: frame.refId,
packages/grafana-data/src/field/fieldDisplay.test.ts
+1 -1
View File
@@ -32,7 +32,7 @@ describe('FieldDisplay', () => {
fieldConfig: {
overrides: [],
defaults: {
title: '$__cell_0 * $__field_name * $__series_name',
displayName: '$__cell_0 * $__field_name * $__series_name',
},
},
});
packages/grafana-data/src/field/fieldDisplay.ts
+6 -6
View File
@@ -91,7 +91,7 @@ export const getFieldDisplayValues = (options: GetFieldDisplayValuesOptions): Fi
let hitLimit = false;
const limit = reduceOptions.limit ? reduceOptions.limit : DEFAULT_FIELD_DISPLAY_VALUES_LIMIT;
const scopedVars: ScopedVars = {};
const defaultTitle = getTitleTemplate(calcs);
const defaultDisplayName = getTitleTemplate(calcs);
for (let s = 0; s < data.length && !hitLimit; s++) {
const series = data[s]; // Name is already set
@@ -109,7 +109,7 @@ export const getFieldDisplayValues = (options: GetFieldDisplayValuesOptions): Fi
}
const config = field.config; // already set by the prepare task
const title = field.config.title ?? defaultTitle;
const displayName = field.config.displayName ?? defaultDisplayName;
const display =
field.display ??
@@ -121,7 +121,7 @@ export const getFieldDisplayValues = (options: GetFieldDisplayValuesOptions): Fi
// Show all rows
if (reduceOptions.values) {
const usesCellValues = title.indexOf(VAR_CELL_PREFIX) >= 0;
const usesCellValues = displayName.indexOf(VAR_CELL_PREFIX) >= 0;
for (let j = 0; j < field.values.length; j++) {
// Add all the row variables
@@ -137,7 +137,7 @@ export const getFieldDisplayValues = (options: GetFieldDisplayValuesOptions): Fi
}
const displayValue = display(field.values.get(j));
displayValue.title = replaceVariables(title, {
displayValue.title = replaceVariables(displayName, {
...field.state?.scopedVars, // series and field scoped vars
...scopedVars,
});
@@ -181,7 +181,7 @@ export const getFieldDisplayValues = (options: GetFieldDisplayValuesOptions): Fi
for (const calc of calcs) {
scopedVars[VAR_CALC] = { value: calc, text: calc };
const displayValue = display(results[calc]);
displayValue.title = replaceVariables(title, {
displayValue.title = replaceVariables(displayName, {
...field.state?.scopedVars, // series and field scoped vars
...scopedVars,
});
@@ -209,7 +209,7 @@ export const getFieldDisplayValues = (options: GetFieldDisplayValuesOptions): Fi
if (values.length === 0) {
values.push(createNoValuesFieldDisplay(options));
} else if (values.length === 1 && !fieldConfig.defaults.title) {
} else if (values.length === 1 && !fieldConfig.defaults.displayName) {
// Don't show title for single item
values[0].display.title = undefined;
}
packages/grafana-data/src/field/fieldOverrides.test.ts
+11 -11
View File
@@ -19,7 +19,7 @@ import { Registry } from '../utils';
import { mockStandardProperties } from '../utils/tests/mockStandardProperties';
import { FieldMatcherID } from '../transformations';
import { FieldConfigOptionsRegistry } from './FieldConfigOptionsRegistry';
import { getFieldTitle } from './fieldState';
import { getFieldDisplayName } from './fieldState';
const property1 = {
id: 'custom.property1', // Match field properties
@@ -84,7 +84,7 @@ describe('applyFieldOverrides', () => {
matcher: { id: FieldMatcherID.numeric },
properties: [
{ id: 'decimals', value: 1 }, // Numeric
{ id: 'title', value: 'Kittens' }, // Text
{ id: 'displayName', value: 'Kittens' }, // Text
],
},
],
@@ -163,7 +163,7 @@ describe('applyFieldOverrides', () => {
dateFormat: '', // should be ignored
max: parseFloat('NOPE'), // should be ignored
min: null, // should alo be ignored!
title: 'newTitle',
displayName: 'newTitle',
};
const f: DataFrame = toDataFrame({
@@ -186,7 +186,7 @@ describe('applyFieldOverrides', () => {
expect(outField.config.min).toEqual(0);
expect(outField.config.max).toEqual(100);
expect(outField.config.unit).toEqual('ms');
expect(getFieldTitle(outField, f)).toEqual('newTitle');
expect(getFieldDisplayName(outField, f)).toEqual('newTitle');
});
it('will apply field overrides', () => {
@@ -210,7 +210,7 @@ describe('applyFieldOverrides', () => {
expect(config.unit).toEqual('xyz');
// The default value applied
expect(config.title).toEqual('Kittens');
expect(config.displayName).toEqual('Kittens');
// The override applied
expect(config.decimals).toEqual(1);
@@ -309,13 +309,13 @@ describe('setFieldConfigDefaults', () => {
describe('setDynamicConfigValue', () => {
it('applies dynamic config values', () => {
const config = {
title: 'test',
displayName: 'test',
};
setDynamicConfigValue(
config,
{
id: 'title',
id: 'displayName',
value: 'applied',
},
{
@@ -326,7 +326,7 @@ describe('setDynamicConfigValue', () => {
}
);
expect(config.title).toEqual('applied');
expect(config.displayName).toEqual('applied');
});
it('applies custom dynamic config values', () => {
@@ -379,7 +379,7 @@ describe('setDynamicConfigValue', () => {
it('removes properties', () => {
const config = {
title: 'title',
displayName: 'title',
custom: {
property3: {
nested: 1,
@@ -403,7 +403,7 @@ describe('setDynamicConfigValue', () => {
setDynamicConfigValue(
config,
{
id: 'title',
id: 'displayName',
value: undefined,
},
{
@@ -415,6 +415,6 @@ describe('setDynamicConfigValue', () => {
);
expect(config.custom.property3).toEqual({});
expect(config.title).toBeUndefined();
expect(config.displayName).toBeUndefined();
});
});
packages/grafana-data/src/field/fieldOverrides.ts
+6 -6
View File
@@ -31,7 +31,7 @@ import { DataLinkBuiltInVars, locationUtil } from '../utils';
import { formattedValueToString } from '../valueFormats';
import { getFieldDisplayValuesProxy } from './getFieldDisplayValuesProxy';
import { formatLabels } from '../utils/labels';
import { getFrameDisplayTitle, getFieldTitle } from './fieldState';
import { getFrameDisplayName, getFieldDisplayName } from './fieldState';
import { getTimeField } from '../dataframe/processDataFrame';
interface OverrideProps {
@@ -100,18 +100,18 @@ export function applyFieldOverrides(options: ApplyFieldOverrideOptions): DataFra
return options.data.map((frame, index) => {
const scopedVars: ScopedVars = {
__series: { text: 'Series', value: { name: getFrameDisplayTitle(frame, index) } }, // might be missing
__series: { text: 'Series', value: { name: getFrameDisplayName(frame, index) } }, // might be missing
};
const fields: Field[] = frame.fields.map(field => {
// Config is mutable within this scope
const fieldScopedVars = { ...scopedVars };
const title = getFieldTitle(field, frame, options.data);
const displayName = getFieldDisplayName(field, frame, options.data);
fieldScopedVars['__field'] = {
text: 'Field',
value: {
name: title, // Generally appropriate (may include the series name if useful)
name: displayName, // Generally appropriate (may include the series name if useful)
labels: formatLabels(field.labels!),
label: field.labels,
},
@@ -119,8 +119,8 @@ export function applyFieldOverrides(options: ApplyFieldOverrideOptions): DataFra
field.state = {
...field.state,
title: title,
scopedVars: fieldScopedVars,
displayName,
};
const config: FieldConfig = { ...field.config };
@@ -194,7 +194,7 @@ export function applyFieldOverrides(options: ApplyFieldOverrideOptions): DataFra
type,
state: {
...field.state,
title: null,
displayName: null,
},
};
packages/grafana-data/src/field/fieldState.test.ts
+8 -8
View File
@@ -1,5 +1,5 @@
import { DataFrame, TIME_SERIES_FIELD_NAME, FieldType } from '../types';
import { getFieldTitle } from './fieldState';
import { DataFrame, TIME_SERIES_VALUE_FIELD_NAME, FieldType } from '../types';
import { getFieldDisplayName } from './fieldState';
import { toDataFrame } from '../dataframe';
interface TitleScenario {
@@ -11,10 +11,10 @@ interface TitleScenario {
function checkScenario(scenario: TitleScenario): string {
const frame = scenario.frames[scenario.frameIndex ?? 0];
const field = frame.fields[scenario.fieldIndex ?? 0];
return getFieldTitle(field, frame, scenario.frames);
return getFieldDisplayName(field, frame, scenario.frames);
}
describe('Check field state calculations (title and id)', () => {
describe('Check field state calculations (displayName and id)', () => {
it('should use field name if no frame name', () => {
const title = checkScenario({
frames: [
@@ -92,23 +92,23 @@ describe('Check field state calculations (title and id)', () => {
expect(title).toEqual('{mode="B", server="Server A"}');
});
it('should use field name even when it is TIME_SERIES_FIELD_NAME if there are no labels', () => {
it('should use field name even when it is TIME_SERIES_VALUE_FIELD_NAME if there are no labels', () => {
const title = checkScenario({
frames: [
toDataFrame({
fields: [{ name: TIME_SERIES_FIELD_NAME, labels: {} }],
fields: [{ name: TIME_SERIES_VALUE_FIELD_NAME, labels: {} }],
}),
],
});
expect(title).toEqual('Value');
});
it('should use series name when field name is TIME_SERIES_FIELD_NAME and there are no labels ', () => {
it('should use series name when field name is TIME_SERIES_VALUE_FIELD_NAME and there are no labels ', () => {
const title = checkScenario({
frames: [
toDataFrame({
name: 'Series A',
fields: [{ name: TIME_SERIES_FIELD_NAME, labels: {} }],
fields: [{ name: TIME_SERIES_VALUE_FIELD_NAME, labels: {} }],
}),
],
});
packages/grafana-data/src/field/fieldState.ts
+20 -20
View File
@@ -1,10 +1,10 @@
import { DataFrame, Field, TIME_SERIES_FIELD_NAME, FieldType } from '../types';
import { DataFrame, Field, TIME_SERIES_VALUE_FIELD_NAME, FieldType, TIME_SERIES_TIME_FIELD_NAME } from '../types';
import { formatLabels } from '../utils/labels';
/**
* Get an appropriate display title
*/
export function getFrameDisplayTitle(frame: DataFrame, index?: number) {
export function getFrameDisplayName(frame: DataFrame, index?: number) {
if (frame.name) {
return frame.name;
}
@@ -19,7 +19,7 @@ export function getFrameDisplayTitle(frame: DataFrame, index?: number) {
if (index === undefined) {
return frame.fields
.filter(f => f.type !== FieldType.time)
.map(f => getFieldTitle(f, frame))
.map(f => getFieldDisplayName(f, frame))
.join(', ');
}
@@ -30,39 +30,39 @@ export function getFrameDisplayTitle(frame: DataFrame, index?: number) {
return `Series (${index})`;
}
export function getFieldTitle(field: Field, frame?: DataFrame, allFrames?: DataFrame[]): string {
const existingTitle = field.state?.title;
export function getFieldDisplayName(field: Field, frame?: DataFrame, allFrames?: DataFrame[]): string {
const existingTitle = field.state?.displayName;
if (existingTitle) {
return existingTitle;
}
const title = calculateFieldTitle(field, frame, allFrames);
const displayName = calculateFieldDisplayName(field, frame, allFrames);
field.state = {
...field.state,
title,
displayName,
};
return title;
return displayName;
}
/**
* Get an appropriate display title. If the 'title' is set, use that
* Get an appropriate display name. If the 'title' is set, use that
*/
function calculateFieldTitle(field: Field, frame?: DataFrame, allFrames?: DataFrame[]): string {
const hasConfigTitle = field.config?.title && field.config?.title.length;
function calculateFieldDisplayName(field: Field, frame?: DataFrame, allFrames?: DataFrame[]): string {
const hasConfigTitle = field.config?.displayName && field.config?.displayName.length;
let title = hasConfigTitle ? field.config!.title! : field.name;
let displayName = hasConfigTitle ? field.config!.displayName! : field.name;
if (hasConfigTitle) {
return title;
return displayName;
}
// This is an ugly exception for time field
// For time series we should normally treat time field with same name
// But in case it has a join source we should handle it as normal field
if (field.type === FieldType.time && !field.labels) {
return title ?? 'Time';
return displayName ?? TIME_SERIES_TIME_FIELD_NAME;
}
let parts: string[] = [];
@@ -86,7 +86,7 @@ function calculateFieldTitle(field: Field, frame?: DataFrame, allFrames?: DataFr
frameNameAdded = true;
}
if (field.name && field.name !== TIME_SERIES_FIELD_NAME) {
if (field.name && field.name !== TIME_SERIES_VALUE_FIELD_NAME) {
parts.push(field.name);
}
@@ -106,7 +106,7 @@ function calculateFieldTitle(field: Field, frame?: DataFrame, allFrames?: DataFr
}
// if we have not added frame name and no labels, and field name = Value, we should add frame name
if (frame && !frameNameAdded && !labelsAdded && field.name === TIME_SERIES_FIELD_NAME) {
if (frame && !frameNameAdded && !labelsAdded && field.name === TIME_SERIES_VALUE_FIELD_NAME) {
if (frame.name && frame.name.length > 0) {
parts.push(frame.name);
frameNameAdded = true;
@@ -114,14 +114,14 @@ function calculateFieldTitle(field: Field, frame?: DataFrame, allFrames?: DataFr
}
if (parts.length) {
title = parts.join(' ');
displayName = parts.join(' ');
} else if (field.name) {
title = field.name;
displayName = field.name;
} else {
title = TIME_SERIES_FIELD_NAME;
displayName = TIME_SERIES_VALUE_FIELD_NAME;
}
return title;
return displayName;
}
/**
packages/grafana-data/src/field/getFieldDisplayValuesProxy.test.tsx
+2 -2
View File
@@ -13,7 +13,7 @@ describe('getFieldDisplayValuesProxy', () => {
name: 'power',
values: [100, 200, 300],
config: {
title: 'The Power',
displayName: 'The Power',
},
},
{
@@ -54,7 +54,7 @@ describe('getFieldDisplayValuesProxy', () => {
expect(time2.toString()).toEqual(time.toString());
});
it('Lookup by name, index, or title', () => {
it('Lookup by name, index, or displayName', () => {
const p = getFieldDisplayValuesProxy(data, 2, {
theme: {} as GrafanaTheme,
});
packages/grafana-data/src/field/getFieldDisplayValuesProxy.ts
+1 -1
View File
@@ -29,7 +29,7 @@ export function getFieldDisplayValuesProxy(
}
if (!field) {
// 3. Match the title
field = frame.fields.find(f => key === f.config.title);
field = frame.fields.find(f => key === f.config.displayName);
}
if (!field) {
return undefined;
packages/grafana-data/src/field/index.ts
+1 -1
View File
@@ -7,4 +7,4 @@ export { FieldConfigOptionsRegistry } from './FieldConfigOptionsRegistry';
export { applyFieldOverrides, validateFieldConfig } from './fieldOverrides';
export { getFieldDisplayValuesProxy } from './getFieldDisplayValuesProxy';
export { getFieldTitle, getFrameDisplayTitle } from './fieldState';
export { getFieldDisplayName, getFrameDisplayName } from './fieldState';
packages/grafana-data/src/transformations/matchers/nameMatcher.ts
+2 -2
View File
@@ -2,7 +2,7 @@ import { Field, DataFrame } from '../../types/dataFrame';
import { FieldMatcherID, FrameMatcherID } from './ids';
import { FieldMatcherInfo, FrameMatcherInfo } from '../../types/transformations';
import { stringToJsRegex } from '../../text/string';
import { getFieldTitle } from '../../field/fieldState';
import { getFieldDisplayName } from '../../field/fieldState';
// General Field matcher
const fieldNameMacher: FieldMatcherInfo<string> = {
@@ -19,7 +19,7 @@ const fieldNameMacher: FieldMatcherInfo<string> = {
console.error(e);
}
return (field: Field) => {
return regex.test(getFieldTitle(field) ?? '');
return regex.test(getFieldDisplayName(field) ?? '');
};
},
packages/grafana-data/src/transformations/transformers/organize.test.ts
+6 -6
View File
@@ -50,19 +50,19 @@ describe('OrganizeFields Transformer', () => {
labels: undefined,
name: 'temperature',
state: {
title: 'temperature',
displayName: 'temperature',
},
type: FieldType.number,
values: new ArrayVector([10.3, 10.4, 10.5, 10.6]),
},
{
config: {
title: 'renamed_humidity',
displayName: 'renamed_humidity',
},
labels: undefined,
name: 'humidity',
state: {
title: 'renamed_humidity',
displayName: 'renamed_humidity',
},
type: FieldType.number,
values: new ArrayVector([10000.3, 10000.4, 10000.5, 10000.6]),
@@ -105,11 +105,11 @@ describe('OrganizeFields Transformer', () => {
{
labels: undefined,
config: {
title: 'renamed_time',
displayName: 'renamed_time',
},
name: 'time',
state: {
title: 'renamed_time',
displayName: 'renamed_time',
},
type: FieldType.time,
values: new ArrayVector([3000, 4000, 5000, 6000]),
@@ -119,7 +119,7 @@ describe('OrganizeFields Transformer', () => {
labels: undefined,
name: 'pressure',
state: {
title: 'pressure',
displayName: 'pressure',
},
type: FieldType.number,
values: new ArrayVector([10.3, 10.4, 10.5, 10.6]),
packages/grafana-data/src/transformations/transformers/reduce.test.ts
+16 -16
View File
@@ -65,25 +65,25 @@ describe('Reducer Transformer', () => {
name: 'first',
type: FieldType.number,
values: new ArrayVector([3, 10000.3, 1, 11000.1]),
config: { title: 'First' },
config: { displayName: 'First' },
},
{
name: 'min',
type: FieldType.number,
values: new ArrayVector([3, 10000.3, 1, 11000.1]),
config: { title: 'Min' },
config: { displayName: 'Min' },
},
{
name: 'max',
type: FieldType.number,
values: new ArrayVector([6, 10000.6, 7, 11000.7]),
config: { title: 'Max' },
config: { displayName: 'Max' },
},
{
name: 'last',
type: FieldType.number,
values: new ArrayVector([6, 10000.6, 7, 11000.7]),
config: { title: 'Last' },
config: { displayName: 'Last' },
},
];
@@ -111,25 +111,25 @@ describe('Reducer Transformer', () => {
name: 'first',
type: FieldType.number,
values: new ArrayVector([3, 1]),
config: { title: 'First' },
config: { displayName: 'First' },
},
{
name: 'min',
type: FieldType.number,
values: new ArrayVector([3, 1]),
config: { title: 'Min' },
config: { displayName: 'Min' },
},
{
name: 'max',
type: FieldType.number,
values: new ArrayVector([6, 7]),
config: { title: 'Max' },
config: { displayName: 'Max' },
},
{
name: 'last',
type: FieldType.number,
values: new ArrayVector([6, 7]),
config: { title: 'Last' },
config: { displayName: 'Last' },
},
];
@@ -157,25 +157,25 @@ describe('Reducer Transformer', () => {
name: 'first',
type: FieldType.number,
values: new ArrayVector([3, 10000.3]),
config: { title: 'First' },
config: { displayName: 'First' },
},
{
name: 'min',
type: FieldType.number,
values: new ArrayVector([3, 10000.3]),
config: { title: 'Min' },
config: { displayName: 'Min' },
},
{
name: 'max',
type: FieldType.number,
values: new ArrayVector([6, 10000.6]),
config: { title: 'Max' },
config: { displayName: 'Max' },
},
{
name: 'last',
type: FieldType.number,
values: new ArrayVector([6, 10000.6]),
config: { title: 'Last' },
config: { displayName: 'Last' },
},
];
@@ -203,25 +203,25 @@ describe('Reducer Transformer', () => {
name: 'first',
type: FieldType.number,
values: new ArrayVector([3]),
config: { title: 'First' },
config: { displayName: 'First' },
},
{
name: 'min',
type: FieldType.number,
values: new ArrayVector([3]),
config: { title: 'Min' },
config: { displayName: 'Min' },
},
{
name: 'max',
type: FieldType.number,
values: new ArrayVector([6]),
config: { title: 'Max' },
config: { displayName: 'Max' },
},
{
name: 'last',
type: FieldType.number,
values: new ArrayVector([6]),
config: { title: 'Last' },
config: { displayName: 'Last' },
},
];
packages/grafana-data/src/transformations/transformers/reduce.ts
+1 -1
View File
@@ -59,7 +59,7 @@ export const reduceTransformer: DataTransformerInfo<ReduceTransformerOptions> =
type: FieldType.other, // UNKNOWN until after we call the functions
values: values[values.length - 1],
config: {
title: info.name,
displayName: info.name,
// UNIT from original field?
},
});
packages/grafana-data/src/transformations/transformers/rename.test.ts
+11 -11
View File
@@ -41,36 +41,36 @@ describe('Rename Transformer', () => {
expect(renamed.fields).toEqual([
{
config: {
title: 'Total time',
displayName: 'Total time',
},
labels: undefined,
name: 'time',
state: {
title: 'Total time',
displayName: 'Total time',
},
type: FieldType.time,
values: new ArrayVector([3000, 4000, 5000, 6000]),
},
{
config: {
title: 'how cold is it?',
displayName: 'how cold is it?',
},
labels: undefined,
name: 'temperature',
state: {
title: 'how cold is it?',
displayName: 'how cold is it?',
},
type: FieldType.number,
values: new ArrayVector([10.3, 10.4, 10.5, 10.6]),
},
{
config: {
title: 'Moistiness',
displayName: 'Moistiness',
},
name: 'humidity',
labels: undefined,
state: {
title: 'Moistiness',
displayName: 'Moistiness',
},
type: FieldType.number,
values: new ArrayVector([10000.3, 10000.4, 10000.5, 10000.6]),
@@ -106,12 +106,12 @@ describe('Rename Transformer', () => {
expect(renamed.fields).toEqual([
{
config: {
title: 'ttl',
displayName: 'ttl',
},
name: 'time',
labels: undefined,
state: {
title: 'ttl',
displayName: 'ttl',
},
type: FieldType.time,
values: new ArrayVector([3000, 4000, 5000, 6000]),
@@ -121,19 +121,19 @@ describe('Rename Transformer', () => {
labels: undefined,
name: 'pressure',
state: {
title: 'pressure',
displayName: 'pressure',
},
type: FieldType.number,
values: new ArrayVector([10.3, 10.4, 10.5, 10.6]),
},
{
config: {
title: 'hum',
displayName: 'hum',
},
labels: undefined,
name: 'humidity',
state: {
title: 'hum',
displayName: 'hum',
},
type: FieldType.number,
values: new ArrayVector([10000.3, 10000.4, 10000.5, 10000.6]),
packages/grafana-data/src/transformations/transformers/rename.ts
+5 -5
View File
@@ -1,7 +1,7 @@
import { DataTransformerID } from './ids';
import { DataTransformerInfo } from '../../types/transformations';
import { DataFrame, Field } from '../../types/dataFrame';
import { getFieldTitle } from '../../field/fieldState';
import { getFieldDisplayName } from '../../field/fieldState';
export interface RenameFieldsTransformerOptions {
renameByName: Record<string, string>;
@@ -41,8 +41,8 @@ const createRenamer = (renameByName: Record<string, string>) => (frame: DataFram
}
return frame.fields.map(field => {
const title = getFieldTitle(field, frame);
const renameTo = renameByName[title];
const displayName = getFieldDisplayName(field, frame);
const renameTo = renameByName[displayName];
if (typeof renameTo !== 'string' || renameTo.length === 0) {
return field;
@@ -52,11 +52,11 @@ const createRenamer = (renameByName: Record<string, string>) => (frame: DataFram
...field,
config: {
...field.config,
title: renameTo,
displayName: renameTo,
},
state: {
...field.state,
title: renameTo,
displayName: renameTo,
},
};
});
packages/grafana-data/src/transformations/transformers/seriesToColumns.test.ts
+18 -18
View File
@@ -46,7 +46,7 @@ describe('SeriesToColumns Transformer', () => {
{
name: 'time',
state: {
title: 'time',
displayName: 'time',
},
type: FieldType.time,
values: new ArrayVector([1000, 3000, 4000, 5000, 6000, 7000]),
@@ -56,7 +56,7 @@ describe('SeriesToColumns Transformer', () => {
{
name: 'temperature',
state: {
title: 'temperature even',
displayName: 'temperature even',
},
type: FieldType.number,
values: new ArrayVector([null, 10.3, 10.4, 10.5, 10.6, null]),
@@ -66,7 +66,7 @@ describe('SeriesToColumns Transformer', () => {
{
name: 'humidity',
state: {
title: 'humidity even',
displayName: 'humidity even',
},
type: FieldType.number,
values: new ArrayVector([null, 10000.3, 10000.4, 10000.5, 10000.6, null]),
@@ -76,7 +76,7 @@ describe('SeriesToColumns Transformer', () => {
{
name: 'temperature',
state: {
title: 'temperature odd',
displayName: 'temperature odd',
},
type: FieldType.number,
values: new ArrayVector([11.1, 11.3, null, 11.5, null, 11.7]),
@@ -86,7 +86,7 @@ describe('SeriesToColumns Transformer', () => {
{
name: 'humidity',
state: {
title: 'humidity odd',
displayName: 'humidity odd',
},
type: FieldType.number,
values: new ArrayVector([11000.1, 11000.3, null, 11000.5, null, 11000.7]),
@@ -109,7 +109,7 @@ describe('SeriesToColumns Transformer', () => {
{
name: 'temperature',
state: {
title: 'temperature',
displayName: 'temperature',
},
type: FieldType.number,
values: new ArrayVector([10.3, 10.4, 10.5, 10.6, 11.1, 11.3, 11.5, 11.7]),
@@ -119,7 +119,7 @@ describe('SeriesToColumns Transformer', () => {
{
name: 'time',
state: {
title: 'time even',
displayName: 'time even',
},
type: FieldType.time,
values: new ArrayVector([3000, 4000, 5000, 6000, null, null, null, null]),
@@ -129,7 +129,7 @@ describe('SeriesToColumns Transformer', () => {
{
name: 'humidity',
state: {
title: 'humidity even',
displayName: 'humidity even',
},
type: FieldType.number,
values: new ArrayVector([10000.3, 10000.4, 10000.5, 10000.6, null, null, null, null]),
@@ -139,7 +139,7 @@ describe('SeriesToColumns Transformer', () => {
{
name: 'time',
state: {
title: 'time odd',
displayName: 'time odd',
},
type: FieldType.time,
values: new ArrayVector([null, null, null, null, 1000, 3000, 5000, 7000]),
@@ -149,7 +149,7 @@ describe('SeriesToColumns Transformer', () => {
{
name: 'humidity',
state: {
title: 'humidity odd',
displayName: 'humidity odd',
},
type: FieldType.number,
values: new ArrayVector([null, null, null, null, 11000.1, 11000.3, 11000.5, 11000.7]),
@@ -176,7 +176,7 @@ describe('SeriesToColumns Transformer', () => {
{
name: 'time',
state: {
title: 'time',
displayName: 'time',
},
type: FieldType.time,
values: new ArrayVector([1000, 3000, 4000, 5000, 6000, 7000]),
@@ -186,7 +186,7 @@ describe('SeriesToColumns Transformer', () => {
{
name: 'temperature',
state: {
title: 'temperature even',
displayName: 'temperature even',
},
type: FieldType.number,
values: new ArrayVector([null, 10.3, 10.4, 10.5, 10.6, null]),
@@ -196,7 +196,7 @@ describe('SeriesToColumns Transformer', () => {
{
name: 'humidity',
state: {
title: 'humidity even',
displayName: 'humidity even',
},
type: FieldType.number,
values: new ArrayVector([null, 10000.3, 10000.4, 10000.5, 10000.6, null]),
@@ -206,7 +206,7 @@ describe('SeriesToColumns Transformer', () => {
{
name: 'temperature',
state: {
title: 'temperature odd',
displayName: 'temperature odd',
},
type: FieldType.number,
values: new ArrayVector([11.1, 11.3, null, 11.5, null, 11.7]),
@@ -216,7 +216,7 @@ describe('SeriesToColumns Transformer', () => {
{
name: 'humidity',
state: {
title: 'humidity odd',
displayName: 'humidity odd',
},
type: FieldType.number,
values: new ArrayVector([11000.1, 11000.3, null, 11000.5, null, 11000.7]),
@@ -256,7 +256,7 @@ describe('SeriesToColumns Transformer', () => {
{
name: 'time',
state: {
title: 'time',
displayName: 'time',
},
type: FieldType.time,
values: new ArrayVector([1000, 2000, 3000, 4000]),
@@ -269,14 +269,14 @@ describe('SeriesToColumns Transformer', () => {
values: new ArrayVector([1, 3, 5, 7]),
config: {},
state: {
title: 'temperature temperature',
displayName: 'temperature temperature',
},
labels: { name: 'temperature' },
},
{
name: 'temperature',
state: {
title: 'temperature B',
displayName: 'temperature B',
},
type: FieldType.number,
values: new ArrayVector([2, 4, 6, 8]),
packages/grafana-data/src/transformations/transformers/seriesToColumns.ts
+5 -5
View File
@@ -2,7 +2,7 @@ import { DataFrame, DataTransformerInfo, Field } from '../../types';
import { DataTransformerID } from './ids';
import { MutableDataFrame } from '../../dataframe';
import { ArrayVector } from '../../vector';
import { getFieldTitle } from '../../field/fieldState';
import { getFieldDisplayName } from '../../field/fieldState';
export interface SeriesToColumnsOptions {
byField?: string;
@@ -71,7 +71,7 @@ export const seriesToColumnsTransformer: DataTransformerInfo<SeriesToColumnsOpti
resultFrame.addField(item.newField);
}
const keyFieldTitle = getFieldTitle(resultFrame.fields[0], resultFrame);
const keyFieldTitle = getFieldDisplayName(resultFrame.fields[0], resultFrame);
const byKeyField: { [key: string]: { [key: string]: any } } = {};
/*
@@ -92,7 +92,7 @@ export const seriesToColumnsTransformer: DataTransformerInfo<SeriesToColumnsOpti
for (let fieldIndex = 0; fieldIndex < allFields.length; fieldIndex++) {
const { sourceField, keyField, newField } = allFields[fieldIndex];
const newFieldTitle = getFieldTitle(newField, resultFrame);
const newFieldTitle = getFieldDisplayName(newField, resultFrame);
for (let valueIndex = 0; valueIndex < sourceField.values.length; valueIndex++) {
const value = sourceField.values.get(valueIndex);
@@ -112,7 +112,7 @@ export const seriesToColumnsTransformer: DataTransformerInfo<SeriesToColumnsOpti
for (let fieldIndex = 0; fieldIndex < resultFrame.fields.length; fieldIndex++) {
const field = resultFrame.fields[fieldIndex];
const otherColumnName = getFieldTitle(field, resultFrame);
const otherColumnName = getFieldDisplayName(field, resultFrame);
const value = byKeyField[keyValueAsString][otherColumnName] ?? null;
field.values.add(value);
}
@@ -126,7 +126,7 @@ function findKeyField(frame: DataFrame, matchTitle: string): Field | null {
for (let fieldIndex = 0; fieldIndex < frame.fields.length; fieldIndex++) {
const field = frame.fields[fieldIndex];
if (matchTitle === getFieldTitle(field)) {
if (matchTitle === getFieldDisplayName(field)) {
return field;
}
}
packages/grafana-data/src/types/data.ts
+1 -1
View File
@@ -46,7 +46,7 @@ export interface QueryResultMeta {
}
export interface QueryResultMetaStat extends FieldConfig {
title: string;
displayName: string;
value: number;
}
packages/grafana-data/src/types/dataFrame.ts
+4 -3
View File
@@ -23,7 +23,7 @@ export enum FieldType {
* Plugins may extend this with additional properties. Something like series overrides
*/
export interface FieldConfig<TOptions extends object = any> {
title?: string; // The display value for this field. This supports template variables blank is auto
displayName?: string; // The display value for this field. This supports template variables blank is auto
filterable?: boolean;
// Numeric Options
@@ -106,7 +106,7 @@ export interface FieldState {
/**
* An appropriate name for the field (does not include frame info)
*/
title?: string | null;
displayName?: string | null;
/**
* Cache of reduced values
@@ -148,4 +148,5 @@ export interface DataFrameDTO extends QueryResultBase {
export interface FieldCalcs extends Record<string, any> {}
export const TIME_SERIES_FIELD_NAME = 'Value';
export const TIME_SERIES_VALUE_FIELD_NAME = 'Value';
export const TIME_SERIES_TIME_FIELD_NAME = 'Time';
packages/grafana-data/src/utils/tests/mockStandardProperties.ts
+4 -4
View File
@@ -3,10 +3,10 @@ import { ThresholdsMode } from '../../types';
export const mockStandardProperties = () => {
const title = {
id: 'title',
path: 'title',
name: 'Title',
description: "Field's title",
id: 'displayName',
path: 'displayName',
name: 'Display name',
description: "Field's display name",
editor: () => null,
override: () => null,
process: identityOverrideProcessor,
packages/grafana-ui/src/components/MatchersUI/FieldNameMatcherEditor.tsx
+2 -2
View File
@@ -1,6 +1,6 @@
import React from 'react';
import { MatcherUIProps, FieldMatcherUIRegistryItem } from './types';
import { FieldMatcherID, fieldMatchers, getFieldTitle } from '@grafana/data';
import { FieldMatcherID, fieldMatchers, getFieldDisplayName } from '@grafana/data';
import { Select } from '../Select/Select';
export class FieldNameMatcherEditor extends React.PureComponent<MatcherUIProps<string>> {
@@ -10,7 +10,7 @@ export class FieldNameMatcherEditor extends React.PureComponent<MatcherUIProps<s
for (const frame of data) {
for (const field of frame.fields) {
names.add(getFieldTitle(field, frame, data));
names.add(getFieldDisplayName(field, frame, data));
}
}
if (options) {
packages/grafana-ui/src/components/SingleStatShared/SingleStatBaseOptions.test.ts
+23
View File
@@ -156,6 +156,29 @@ describe('sharedSingleStatMigrationHandler', () => {
`);
});
it('Rename title to displayName', () => {
const panel = {
options: {
fieldOptions: {
stat: 'last',
decimals: 5,
defaults: {
title: 'newTitle',
min: 0,
max: 100,
mappings: [],
},
override: {},
},
},
title: 'Usage',
type: 'bargauge',
};
sharedSingleStatMigrationHandler(panel as any);
expect((panel as any).fieldConfig.defaults.displayName).toBe('newTitle');
});
it('change from angular singlestat with no enabled gauge', () => {
const old: any = {
angular: {
packages/grafana-ui/src/components/SingleStatShared/SingleStatBaseOptions.ts
+9
View File
@@ -202,6 +202,15 @@ export function sharedSingleStatMigrationHandler(panel: PanelModel<SingleStatBas
delete options.fieldOptions;
}
if (previousVersion < 7.1) {
// move title to displayName
const oldTitle = (panel.fieldConfig.defaults as any).title;
if (oldTitle !== undefined && oldTitle !== null) {
panel.fieldConfig.defaults.displayName = oldTitle;
delete (panel.fieldConfig.defaults as any).title;
}
}
return options as SingleStatBaseOptions;
}
packages/grafana-ui/src/components/Table/utils.ts
+2 -2
View File
@@ -1,5 +1,5 @@
import { TextAlignProperty } from 'csstype';
import { DataFrame, Field, FieldType, getFieldTitle } from '@grafana/data';
import { DataFrame, Field, FieldType, getFieldDisplayName } from '@grafana/data';
import { Column } from 'react-table';
import { DefaultCell } from './DefaultCell';
import { BarGaugeCell } from './BarGaugeCell';
@@ -51,7 +51,7 @@ export function getColumns(data: DataFrame, availableWidth: number, columnMinWid
columns.push({
Cell,
id: fieldIndex.toString(),
Header: getFieldTitle(field, data),
Header: getFieldDisplayName(field, data),
accessor: (row: any, i: number) => {
return field.values.get(i);
},
packages/grafana-ui/src/utils/standardEditors.tsx
+6 -6
View File
@@ -33,11 +33,11 @@ import { StatsPickerEditor } from '../components/OptionsUI/stats';
*/
export const getStandardFieldConfigs = () => {
const category = ['Standard options'];
const title: FieldConfigPropertyItem<any, string, StringFieldConfigSettings> = {
id: 'title',
path: 'title',
name: 'Title',
description: "Field's title",
const displayName: FieldConfigPropertyItem<any, string, StringFieldConfigSettings> = {
id: 'displayName',
path: 'displayName',
name: 'Display name',
description: 'Change the field or series name',
editor: standardEditorsRegistry.get('text').editor as any,
override: standardEditorsRegistry.get('text').editor as any,
process: stringOverrideProcessor,
@@ -206,7 +206,7 @@ export const getStandardFieldConfigs = () => {
// category: ['Color & thresholds'],
// };
return [unit, min, max, decimals, title, noValue, thresholds, mappings, links];
return [unit, min, max, decimals, displayName, noValue, thresholds, mappings, links];
};
/**