mirror of https://github.com/grafana/grafana
Table: migrate old-table config to new table config (#30142)
* feat(tablepanel): add migration button to old table panel config * feat(tablepanel): migrate old table transformations * feat(tablepanel): migrate old styles to config overrides * feat(tablepanel): migrate catch all style override to panel defaults * refactor(tablepanel): clean up typings * refactor(tablepanel): base threshold as -Infinity * feat(tablepanel): migrate align to new table config overrides * feat(tablepanel): migrate links to new table overrides * refactor(tabelpanel): clean up threshold migrations * feat(tablepanel): introduce table transform to merge * feat(tablepanel): add note informing user to manually update links with cell valuespull/30302/head
Jack Westbrook
5 years ago
committed by
GitHub
parent
5088e2044a
commit
c14c7b6874
@ -0,0 +1,219 @@ |
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP |
||||
|
||||
exports[`Table Migrations migrates styles to field config overrides and defaults 1`] = ` |
||||
Object { |
||||
"fieldConfig": Object { |
||||
"defaults": Object { |
||||
"custom": Object { |
||||
"align": "right", |
||||
"displayMode": undefined, |
||||
}, |
||||
"decimals": 2, |
||||
"displayName": "", |
||||
"unit": "short", |
||||
}, |
||||
"overrides": Array [ |
||||
Object { |
||||
"matcher": Object { |
||||
"id": "byName", |
||||
"options": "Time", |
||||
}, |
||||
"properties": Array [ |
||||
Object { |
||||
"id": "displayName", |
||||
"value": "Time", |
||||
}, |
||||
Object { |
||||
"id": "unit", |
||||
"value": "time: YYYY-MM-DD HH:mm:ss", |
||||
}, |
||||
Object { |
||||
"id": "custom.align", |
||||
"value": null, |
||||
}, |
||||
], |
||||
}, |
||||
Object { |
||||
"matcher": Object { |
||||
"id": "byName", |
||||
"options": "ColorCell", |
||||
}, |
||||
"properties": Array [ |
||||
Object { |
||||
"id": "unit", |
||||
"value": "currencyUSD", |
||||
}, |
||||
Object { |
||||
"id": "decimals", |
||||
"value": 2, |
||||
}, |
||||
Object { |
||||
"id": "custom.displayMode", |
||||
"value": "color-background", |
||||
}, |
||||
Object { |
||||
"id": "custom.align", |
||||
"value": "left", |
||||
}, |
||||
Object { |
||||
"id": "thresholds", |
||||
"value": Object { |
||||
"mode": "absolute", |
||||
"steps": Array [ |
||||
Object { |
||||
"color": "rgba(245, 54, 54, 0.9)", |
||||
"value": -Infinity, |
||||
}, |
||||
Object { |
||||
"color": "rgba(237, 129, 40, 0.89)", |
||||
"value": 5, |
||||
}, |
||||
Object { |
||||
"color": "rgba(50, 172, 45, 0.97)", |
||||
"value": 10, |
||||
}, |
||||
], |
||||
}, |
||||
}, |
||||
], |
||||
}, |
||||
Object { |
||||
"matcher": Object { |
||||
"id": "byName", |
||||
"options": "ColorValue", |
||||
}, |
||||
"properties": Array [ |
||||
Object { |
||||
"id": "unit", |
||||
"value": "Bps", |
||||
}, |
||||
Object { |
||||
"id": "decimals", |
||||
"value": 2, |
||||
}, |
||||
Object { |
||||
"id": "links", |
||||
"value": Array [ |
||||
Object { |
||||
"targetBlank": true, |
||||
"title": "", |
||||
"url": "http://www.grafana.com", |
||||
}, |
||||
], |
||||
}, |
||||
Object { |
||||
"id": "custom.displayMode", |
||||
"value": "color-text", |
||||
}, |
||||
Object { |
||||
"id": "custom.align", |
||||
"value": null, |
||||
}, |
||||
Object { |
||||
"id": "thresholds", |
||||
"value": Object { |
||||
"mode": "absolute", |
||||
"steps": Array [ |
||||
Object { |
||||
"color": "rgba(245, 54, 54, 0.9)", |
||||
"value": -Infinity, |
||||
}, |
||||
Object { |
||||
"color": "rgba(237, 129, 40, 0.89)", |
||||
"value": 5, |
||||
}, |
||||
Object { |
||||
"color": "rgba(50, 172, 45, 0.97)", |
||||
"value": 10, |
||||
}, |
||||
], |
||||
}, |
||||
}, |
||||
], |
||||
}, |
||||
], |
||||
}, |
||||
"transformations": Array [], |
||||
} |
||||
`; |
||||
|
||||
exports[`Table Migrations migrates transform out to core transforms 1`] = ` |
||||
Object { |
||||
"fieldConfig": Object { |
||||
"defaults": Object { |
||||
"custom": Object {}, |
||||
}, |
||||
"overrides": Array [], |
||||
}, |
||||
"transformations": Array [ |
||||
Object { |
||||
"id": "seriesToColumns", |
||||
"options": Object { |
||||
"reducers": Array [], |
||||
}, |
||||
}, |
||||
], |
||||
} |
||||
`; |
||||
|
||||
exports[`Table Migrations migrates transform out to core transforms 2`] = ` |
||||
Object { |
||||
"fieldConfig": Object { |
||||
"defaults": Object { |
||||
"custom": Object {}, |
||||
}, |
||||
"overrides": Array [], |
||||
}, |
||||
"transformations": Array [ |
||||
Object { |
||||
"id": "seriesToRows", |
||||
"options": Object { |
||||
"reducers": Array [], |
||||
}, |
||||
}, |
||||
], |
||||
} |
||||
`; |
||||
|
||||
exports[`Table Migrations migrates transform out to core transforms 3`] = ` |
||||
Object { |
||||
"fieldConfig": Object { |
||||
"defaults": Object { |
||||
"custom": Object {}, |
||||
}, |
||||
"overrides": Array [], |
||||
}, |
||||
"transformations": Array [ |
||||
Object { |
||||
"id": "reduce", |
||||
"options": Object { |
||||
"includeTimeField": false, |
||||
"reducers": Array [ |
||||
"mean", |
||||
"max", |
||||
"last", |
||||
], |
||||
}, |
||||
}, |
||||
], |
||||
} |
||||
`; |
||||
|
||||
exports[`Table Migrations migrates transform out to core transforms 4`] = ` |
||||
Object { |
||||
"fieldConfig": Object { |
||||
"defaults": Object { |
||||
"custom": Object {}, |
||||
}, |
||||
"overrides": Array [], |
||||
}, |
||||
"transformations": Array [ |
||||
Object { |
||||
"id": "merge", |
||||
"options": Object { |
||||
"reducers": Array [], |
||||
}, |
||||
}, |
||||
], |
||||
} |
||||
`; |
||||
@ -0,0 +1,132 @@ |
||||
import { PanelModel } from '@grafana/data'; |
||||
import { tablePanelChangedHandler } from './migrations'; |
||||
|
||||
describe('Table Migrations', () => { |
||||
it('migrates transform out to core transforms', () => { |
||||
const toColumns = { |
||||
angular: { |
||||
columns: [], |
||||
styles: [], |
||||
transform: 'timeseries_to_columns', |
||||
options: {}, |
||||
}, |
||||
}; |
||||
const toRows = { |
||||
angular: { |
||||
columns: [], |
||||
styles: [], |
||||
transform: 'timeseries_to_rows', |
||||
options: {}, |
||||
}, |
||||
}; |
||||
const aggregations = { |
||||
angular: { |
||||
columns: [ |
||||
{ |
||||
text: 'Avg', |
||||
value: 'avg', |
||||
$$hashKey: 'object:82', |
||||
}, |
||||
{ |
||||
text: 'Max', |
||||
value: 'max', |
||||
$$hashKey: 'object:83', |
||||
}, |
||||
{ |
||||
text: 'Current', |
||||
value: 'current', |
||||
$$hashKey: 'object:84', |
||||
}, |
||||
], |
||||
styles: [], |
||||
transform: 'timeseries_aggregations', |
||||
options: {}, |
||||
}, |
||||
}; |
||||
const table = { |
||||
angular: { |
||||
columns: [], |
||||
styles: [], |
||||
transform: 'table', |
||||
options: {}, |
||||
}, |
||||
}; |
||||
|
||||
const columnsPanel = {} as PanelModel; |
||||
tablePanelChangedHandler(columnsPanel, 'table-old', toColumns); |
||||
expect(columnsPanel).toMatchSnapshot(); |
||||
const rowsPanel = {} as PanelModel; |
||||
tablePanelChangedHandler(rowsPanel, 'table-old', toRows); |
||||
expect(rowsPanel).toMatchSnapshot(); |
||||
const aggregationsPanel = {} as PanelModel; |
||||
tablePanelChangedHandler(aggregationsPanel, 'table-old', aggregations); |
||||
expect(aggregationsPanel).toMatchSnapshot(); |
||||
const tablePanel = {} as PanelModel; |
||||
tablePanelChangedHandler(tablePanel, 'table-old', table); |
||||
expect(tablePanel).toMatchSnapshot(); |
||||
}); |
||||
|
||||
it('migrates styles to field config overrides and defaults', () => { |
||||
const oldStyles = { |
||||
angular: { |
||||
columns: [], |
||||
styles: [ |
||||
{ |
||||
alias: 'Time', |
||||
align: 'auto', |
||||
dateFormat: 'YYYY-MM-DD HH:mm:ss', |
||||
pattern: 'Time', |
||||
type: 'date', |
||||
$$hashKey: 'object:195', |
||||
}, |
||||
{ |
||||
alias: '', |
||||
align: 'left', |
||||
colorMode: 'cell', |
||||
colors: ['rgba(245, 54, 54, 0.9)', 'rgba(237, 129, 40, 0.89)', 'rgba(50, 172, 45, 0.97)'], |
||||
dateFormat: 'YYYY-MM-DD HH:mm:ss', |
||||
decimals: 2, |
||||
mappingType: 1, |
||||
pattern: 'ColorCell', |
||||
thresholds: ['5', '10'], |
||||
type: 'number', |
||||
unit: 'currencyUSD', |
||||
$$hashKey: 'object:196', |
||||
}, |
||||
{ |
||||
alias: '', |
||||
align: 'auto', |
||||
colorMode: 'value', |
||||
colors: ['rgba(245, 54, 54, 0.9)', 'rgba(237, 129, 40, 0.89)', 'rgba(50, 172, 45, 0.97)'], |
||||
dateFormat: 'YYYY-MM-DD HH:mm:ss', |
||||
decimals: 2, |
||||
link: true, |
||||
linkTargetBlank: true, |
||||
linkTooltip: '', |
||||
linkUrl: 'http://www.grafana.com', |
||||
mappingType: 1, |
||||
pattern: 'ColorValue', |
||||
thresholds: ['5', '10'], |
||||
type: 'number', |
||||
unit: 'Bps', |
||||
$$hashKey: 'object:197', |
||||
}, |
||||
{ |
||||
unit: 'short', |
||||
type: 'number', |
||||
alias: '', |
||||
decimals: 2, |
||||
colors: ['rgba(245, 54, 54, 0.9)', 'rgba(237, 129, 40, 0.89)', 'rgba(50, 172, 45, 0.97)'], |
||||
colorMode: null, |
||||
pattern: '/.*/', |
||||
thresholds: [], |
||||
align: 'right', |
||||
}, |
||||
], |
||||
}, |
||||
}; |
||||
const panel = {} as PanelModel; |
||||
tablePanelChangedHandler(panel, 'table-old', oldStyles); |
||||
expect(panel).toMatchSnapshot(); |
||||
}); |
||||
}); |
||||
Loading…
Reference in new issue