mirror of https://github.com/grafana/grafana
Dashlist: Use new nested folder picker (#74011)
* Add new folderUID property * Add nested folder picker + migration to UID * fix folderUID * commentpull/74530/head
Josh Hunt
2 years ago
committed by
GitHub
parent
ebe13a53f7
commit
44e51ffe8b
@ -0,0 +1,77 @@ |
||||
import { wellFormedPanelModel } from 'test/fixtures/panelModel.fixture'; |
||||
|
||||
import { PanelModel } from '@grafana/data'; |
||||
import { mockFolderDTO } from 'app/features/browse-dashboards/fixtures/folder.fixture'; |
||||
|
||||
import { dashlistMigrationHandler, AngularModel } from './migrations'; |
||||
|
||||
const getMock = jest.fn(); |
||||
|
||||
jest.mock('@grafana/runtime', () => ({ |
||||
...jest.requireActual('@grafana/runtime'), |
||||
getBackendSrv: () => ({ |
||||
get: getMock, |
||||
}), |
||||
})); |
||||
|
||||
describe('dashlist migrations', () => { |
||||
it('migrates angular panel model to react model', async () => { |
||||
const basePanelModel = wellFormedPanelModel({}); |
||||
basePanelModel.pluginVersion = '5.1'; |
||||
|
||||
const angularPanel: PanelModel<any> & AngularModel = { |
||||
...basePanelModel, |
||||
// pluginVersion: '5.1',
|
||||
starred: true, |
||||
recent: true, |
||||
search: true, |
||||
headings: true, |
||||
limit: 7, |
||||
query: 'hello, query', |
||||
}; |
||||
|
||||
const newOptions = await dashlistMigrationHandler(angularPanel); |
||||
expect(newOptions).toEqual({ |
||||
showStarred: true, |
||||
showRecentlyViewed: true, |
||||
showSearch: true, |
||||
showHeadings: true, |
||||
maxItems: 7, |
||||
query: 'hello, query', |
||||
includeVars: undefined, |
||||
keepTime: undefined, |
||||
}); |
||||
expect(angularPanel).toStrictEqual(basePanelModel); |
||||
}); |
||||
|
||||
it('migrates folder id to folder UID', async () => { |
||||
const folderDTO = mockFolderDTO(1, { |
||||
id: 77, |
||||
uid: 'abc-124', |
||||
}); |
||||
getMock.mockResolvedValue(folderDTO); |
||||
|
||||
const basePanelOptions = { |
||||
showStarred: true, |
||||
showRecentlyViewed: true, |
||||
showSearch: true, |
||||
showHeadings: true, |
||||
maxItems: 7, |
||||
query: 'hello, query', |
||||
includeVars: false, |
||||
keepTime: false, |
||||
tags: [], |
||||
}; |
||||
const panelModel = wellFormedPanelModel({ |
||||
...basePanelOptions, |
||||
folderId: 77, |
||||
}); |
||||
|
||||
const newOptions = await dashlistMigrationHandler(panelModel); |
||||
|
||||
expect(newOptions).toStrictEqual({ |
||||
...basePanelOptions, |
||||
folderUID: 'abc-124', |
||||
}); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,60 @@ |
||||
import { PanelModel } from '@grafana/data'; |
||||
import { getBackendSrv } from '@grafana/runtime'; |
||||
import { FolderDTO } from 'app/types'; |
||||
|
||||
import { Options } from './panelcfg.gen'; |
||||
|
||||
function getFolderByID(folderID: number) { |
||||
return getBackendSrv().get<FolderDTO>(`/api/folders/id/${folderID}`); |
||||
} |
||||
|
||||
export interface AngularModel { |
||||
/** @deprecated */ |
||||
starred?: boolean; |
||||
/** @deprecated */ |
||||
recent?: boolean; |
||||
/** @deprecated */ |
||||
search?: boolean; |
||||
/** @deprecated */ |
||||
headings?: boolean; |
||||
/** @deprecated */ |
||||
limit?: number; |
||||
/** @deprecated */ |
||||
query?: string; |
||||
/** @deprecated */ |
||||
folderId?: number; |
||||
/** @deprecated */ |
||||
tags?: string[]; |
||||
} |
||||
|
||||
export async function dashlistMigrationHandler(panel: PanelModel<Options> & AngularModel) { |
||||
// Convert old angular model to new react model
|
||||
const newOptions: Options = { |
||||
...panel.options, |
||||
showStarred: panel.options.showStarred ?? panel.starred, |
||||
showRecentlyViewed: panel.options.showRecentlyViewed ?? panel.recent, |
||||
showSearch: panel.options.showSearch ?? panel.search, |
||||
showHeadings: panel.options.showHeadings ?? panel.headings, |
||||
maxItems: panel.options.maxItems ?? panel.limit, |
||||
query: panel.options.query ?? panel.query, |
||||
folderId: panel.options.folderId ?? panel.folderId, |
||||
tags: panel.options.tags ?? panel.tags, |
||||
}; |
||||
|
||||
// Delete old angular properties
|
||||
const previousVersion = parseFloat(panel.pluginVersion || '6.1'); |
||||
if (previousVersion < 6.3) { |
||||
const oldProps = ['starred', 'recent', 'search', 'headings', 'limit', 'query', 'folderId'] as const; |
||||
oldProps.forEach((prop) => delete panel[prop]); |
||||
} |
||||
|
||||
// Convert the folderId to folderUID. Uses the API to do the conversion.
|
||||
if (newOptions.folderId !== undefined) { |
||||
const folderId = newOptions.folderId; |
||||
const folderResp = await getFolderByID(folderId); |
||||
newOptions.folderUID = folderResp.uid; |
||||
delete newOptions.folderId; |
||||
} |
||||
|
||||
return newOptions; |
||||
} |
||||
@ -0,0 +1,21 @@ |
||||
import { Chance } from 'chance'; |
||||
|
||||
import { PanelModel } from '@grafana/data'; |
||||
|
||||
export function wellFormedPanelModel<T extends object>(panelOptions: T, seed = 1): PanelModel<T> { |
||||
const random = Chance(seed); |
||||
|
||||
return { |
||||
id: random.integer(), |
||||
type: random.word(), |
||||
title: random.sentence({ words: 3 }), |
||||
description: random.sentence({ words: 10 }), |
||||
options: panelOptions, |
||||
fieldConfig: { |
||||
defaults: {}, |
||||
overrides: [], |
||||
}, |
||||
pluginVersion: '9.5.0', |
||||
targets: [], |
||||
}; |
||||
} |
||||
Loading…
Reference in new issue