mirror of https://github.com/grafana/grafana
AngularMigrate: Auto migrate graph to multiple panels (#83992)
* AngularMigrate: Auto migrate graph to multiple panels
* add unit test, and histogram migration
* add new cases to existing angular migration gdev dashboard
* fix stat feature toggle handling so all panels dont turn into stat panels 😅; fix betterer
* Use same function when clicking manual migrate button
* Update
---------
Co-authored-by: nmarrs <nathanielmarrs@gmail.com>
pull/84072/head
Torkel Ödegaard
1 year ago
committed by
GitHub
parent
9c520acf9c
commit
edd1864439
@ -0,0 +1,51 @@ |
||||
import config from 'app/core/config'; |
||||
|
||||
import { autoMigrateRemovedPanelPlugins, autoMigrateAngular } from './PanelModel'; |
||||
|
||||
export function getPanelPluginToMigrateTo(panel: any, forceMigration?: boolean): string | undefined { |
||||
if (autoMigrateRemovedPanelPlugins[panel.type]) { |
||||
return autoMigrateRemovedPanelPlugins[panel.type]; |
||||
} |
||||
|
||||
// Auto-migrate old angular panels
|
||||
const shouldMigrateAllAngularPanels = |
||||
forceMigration || !config.angularSupportEnabled || config.featureToggles.autoMigrateOldPanels; |
||||
|
||||
// Graph needs special logic as it can be migrated to multiple panels
|
||||
if (panel.type === 'graph' && (shouldMigrateAllAngularPanels || config.featureToggles.autoMigrateGraphPanel)) { |
||||
if (panel.xaxis?.mode === 'series') { |
||||
return 'barchart'; |
||||
} |
||||
|
||||
if (panel.xaxis?.mode === 'histogram') { |
||||
return 'histogram'; |
||||
} |
||||
|
||||
return 'timeseries'; |
||||
} |
||||
|
||||
if (shouldMigrateAllAngularPanels) { |
||||
return autoMigrateAngular[panel.type]; |
||||
} |
||||
|
||||
if (panel.type === 'table-old' && config.featureToggles.autoMigrateTablePanel) { |
||||
return 'table'; |
||||
} |
||||
|
||||
if (panel.type === 'grafana-piechart-panel' && config.featureToggles.autoMigratePiechartPanel) { |
||||
return 'piechart'; |
||||
} |
||||
|
||||
if (panel.type === 'grafana-worldmap-panel' && config.featureToggles.autoMigrateWorldmapPanel) { |
||||
return 'geomap'; |
||||
} |
||||
|
||||
if ( |
||||
(panel.type === 'singlestat' || panel.type === 'grafana-singlestat-panel') && |
||||
config.featureToggles.autoMigrateStatPanel |
||||
) { |
||||
return 'stat'; |
||||
} |
||||
|
||||
return undefined; |
||||
} |
||||
@ -0,0 +1,32 @@ |
||||
import { FieldConfigSource, PanelModel } from '@grafana/data'; |
||||
|
||||
import { changeToBarChartPanelMigrationHandler } from './migrations'; |
||||
|
||||
describe('Bar chart Migrations', () => { |
||||
let prevFieldConfig: FieldConfigSource; |
||||
|
||||
beforeEach(() => { |
||||
prevFieldConfig = { |
||||
defaults: {}, |
||||
overrides: [], |
||||
}; |
||||
}); |
||||
|
||||
it('From old graph', () => { |
||||
const old = { |
||||
angular: { |
||||
xaxis: { |
||||
mode: 'series', |
||||
values: 'avg', |
||||
}, |
||||
}, |
||||
}; |
||||
|
||||
const panel = {} as PanelModel; |
||||
panel.options = changeToBarChartPanelMigrationHandler(panel, 'graph', old, prevFieldConfig); |
||||
|
||||
const transform = panel.transformations![0]; |
||||
expect(transform.id).toBe('reduce'); |
||||
expect(transform.options.reducers).toBe('avg'); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,36 @@ |
||||
import { PanelTypeChangedHandler } from '@grafana/data'; |
||||
|
||||
/* |
||||
* This is called when the panel changes from another panel |
||||
*/ |
||||
export const changeToBarChartPanelMigrationHandler: PanelTypeChangedHandler = ( |
||||
panel, |
||||
prevPluginId, |
||||
prevOptions, |
||||
prevFieldConfig |
||||
) => { |
||||
if (prevPluginId === 'graph') { |
||||
const graphOptions: GraphOptions = prevOptions.angular; |
||||
|
||||
if (graphOptions.xaxis?.mode === 'series') { |
||||
const tranformations = panel.transformations || []; |
||||
tranformations.push({ |
||||
id: 'reduce', |
||||
options: { |
||||
reducers: graphOptions.xaxis?.values ?? ['sum'], |
||||
}, |
||||
}); |
||||
|
||||
panel.transformations = tranformations; |
||||
} |
||||
} |
||||
|
||||
return {}; |
||||
}; |
||||
|
||||
interface GraphOptions { |
||||
xaxis: { |
||||
mode: 'series' | 'time' | 'histogram'; |
||||
values?: string[]; |
||||
}; |
||||
} |
||||
@ -0,0 +1,28 @@ |
||||
import { FieldConfigSource, PanelModel } from '@grafana/data'; |
||||
|
||||
import { changeToHistogramPanelMigrationHandler } from './migrations'; |
||||
|
||||
describe('Histogram migrations', () => { |
||||
let prevFieldConfig: FieldConfigSource; |
||||
|
||||
beforeEach(() => { |
||||
prevFieldConfig = { |
||||
defaults: {}, |
||||
overrides: [], |
||||
}; |
||||
}); |
||||
|
||||
it('From old graph', () => { |
||||
const old = { |
||||
angular: { |
||||
xaxis: { |
||||
mode: 'histogram', |
||||
}, |
||||
}, |
||||
}; |
||||
|
||||
const panel = {} as PanelModel; |
||||
panel.options = changeToHistogramPanelMigrationHandler(panel, 'graph', old, prevFieldConfig); |
||||
expect(panel.options.combine).toBe(true); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,30 @@ |
||||
import { PanelTypeChangedHandler } from '@grafana/data'; |
||||
|
||||
/* |
||||
* This is called when the panel changes from another panel |
||||
*/ |
||||
export const changeToHistogramPanelMigrationHandler: PanelTypeChangedHandler = ( |
||||
panel, |
||||
prevPluginId, |
||||
prevOptions, |
||||
prevFieldConfig |
||||
) => { |
||||
if (prevPluginId === 'graph') { |
||||
const graphOptions: GraphOptions = prevOptions.angular; |
||||
|
||||
if (graphOptions.xaxis?.mode === 'histogram') { |
||||
return { |
||||
combine: true, |
||||
}; |
||||
} |
||||
} |
||||
|
||||
return {}; |
||||
}; |
||||
|
||||
interface GraphOptions { |
||||
xaxis: { |
||||
mode: 'series' | 'time' | 'histogram'; |
||||
values?: string[]; |
||||
}; |
||||
} |
||||
Loading…
Reference in new issue