IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-14 01:23:32 -06:00
Code Issues Packages Projects Releases Wiki Activity

DashboardPickerByID: add optionLabel prop (#47556)

Browse Source 
* DashboardPicker: add optionLabel prop

* DashboardPicker: fix label prop

* Update picker type
This commit is contained in:
Alex Khomenko 2022-05-06 14:08:13 +03:00 committed by GitHub
parent 25b4aa8d86
commit 529fddf502
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 10 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
public/app/core/components/editors/DashboardPickerByID.tsx
View File

@ -11,7 +11,7 @@ import { backendSrv } from 'app/core/services/backend_srv';
export interface DashboardPickerItem {
id: number;
uid: string;
label: string;
[key: string]: string | number;
}
interface Props {
@ -22,6 +22,7 @@ interface Props {
invalid?: boolean;
disabled?: boolean;
id?: string;
optionLabel?: string;
}
/**
@ -35,9 +36,10 @@ export const DashboardPickerByID: FC<Props> = ({
invalid,
disabled,
id,
optionLabel = 'label',
}) => {
const debouncedSearch = debounce(getDashboards, 300);
const option = value ? { value, label: value.label } : undefined;
const debouncedSearch = debounce((query: string) => getDashboards(query || '', optionLabel), 300);
const option = value ? { value, [optionLabel]: value[optionLabel] } : undefined;
const onChange = (item: SelectableValue<DashboardPickerItem>) => {
propsOnChange(item?.value);
};
@ -55,19 +57,20 @@ export const DashboardPickerByID: FC<Props> = ({
value={option}
invalid={invalid}
disabled={disabled}
getOptionLabel={(option) => option[optionLabel]}
/>
);
};
async function getDashboards(query = ''): Promise<Array<SelectableValue<DashboardPickerItem>>> {
async function getDashboards(query: string, label: string): Promise<Array<SelectableValue<DashboardPickerItem>>> {
const result = await backendSrv.search({ type: 'dash-db', query, limit: 100 });
return result.map(({ id, uid = '', title, folderTitle }) => {
const value: DashboardPickerItem = {
id,
uid,
label: `${folderTitle ?? 'General'}/${title}`,
[label]: `${folderTitle ?? 'General'}/${title}`,
};
return { value, label: value.label };
return { value, [label]: value[label] };
});
}

2
public/app/features/playlist/usePlaylistItems.tsx
View File

@ -15,7 +15,7 @@ export function usePlaylistItems(playlistItems?: PlaylistItem[]) {
const newItem: PlaylistItem = {
id: dashboard.id,
title: dashboard.label,
title: dashboard.label as string,
type: 'dashboard_by_id',
value: dashboard.id.toString(10),
order: items.length + 1,