IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2024-11-29 20:24:18 -06:00
Code Issues Packages Projects Releases Wiki Activity

AngularMigration: Add migration button to old graph panel (#41600)

Browse Source 
* GraphOld: Mark old graph panel as deprecated so that it can no longer be picked in the UI

* Add migration button

* remove deprecation

* add timeseries to graph query

* update language

* Slight tweak

* Update public/app/plugins/panel/graph/tab_display.html

Co-authored-by: Leon Sorokin <leeoniya@gmail.com>

Co-authored-by: Ryan McKinley <ryantxu@gmail.com>
Co-authored-by: Leon Sorokin <leeoniya@gmail.com>
This commit is contained in:
Torkel Ödegaard 2021-11-15 19:31:03 +01:00 committed by GitHub
parent 51ef770c2b
commit 1f07d32666
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 34 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/app/features/panel/state/util.ts
View File

@ -27,6 +27,7 @@ export function filterPluginList(
const query = searchQuery.toLowerCase();
const first: PanelPluginMeta[] = [];
const match: PanelPluginMeta[] = [];
const isGraphQuery = 'graph'.startsWith(query);
for (const item of pluginsList) {
if (item.state === PluginState.deprecated && current.id !== item.id) {
@ -40,6 +41,8 @@ export function filterPluginList(
first.push(item);
} else if (idx > 0) {
match.push(item);
} else if (isGraphQuery && item.id === 'timeseries') {
first.push(item);
}
}

14
public/app/features/panel/state/utils.test.ts Normal file
View File

@ -0,0 +1,14 @@
import { PanelPluginMeta } from '@grafana/data';
import { filterPluginList } from './util';
describe('panel state utils', () => {
it('should include timeseries in a graph query', async () => {
const pluginsList: PanelPluginMeta[] = [
{ id: 'graph', name: 'Graph (old)' } as any,
{ id: 'timeseries', name: 'Graph (old)' },
{ id: 'timeline', name: 'Timeline' },
];
const found = filterPluginList(pluginsList, 'gra', { id: 'xyz' } as any);
expect(found.map((v) => v.id)).toEqual(['graph', 'timeseries']);
});
});

4
public/app/plugins/panel/graph/module.ts
View File

@ -356,6 +356,10 @@ export class GraphCtrl extends MetricsPanelCtrl {
getDataFrameByRefId = (refId: string) => {
return this.dataList.filter((dataFrame) => dataFrame.refId === refId)[0];
};
migrateToReact() {
this.onPluginTypeChange(config.panels['timeseries']);
}
}
// Use new react style configuration

13
public/app/plugins/panel/graph/tab_display.html
View File

@ -1,4 +1,17 @@
<div class="gf-form-group">
<div class="grafana-info-box">
<h5>Migration</h5>
<p>
Consider switching to the Time series visualization type. It is a more capable and performant version of this panel.
</p>
<p>
<button class="btn btn-primary" ng-click="ctrl.migrateToReact()">
Migrate
</button>
</p>
<p>Some features like colored time regions and negative transforms are not supported in the new panel yet.</p>
</div>
<gf-form-switch
class="gf-form"
label="Bars"