IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -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
2 changed files with 10 additions and 7 deletions
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 { export interface DashboardPickerItem {
id: number; id: number;
uid: string; uid: string;
label: string; [key: string]: string | number;
} }
interface Props { interface Props {
@@ -22,6 +22,7 @@ interface Props {
invalid?: boolean; invalid?: boolean;
disabled?: boolean; disabled?: boolean;
id?: string; id?: string;
optionLabel?: string;
} }
/** /**
@@ -35,9 +36,10 @@ export const DashboardPickerByID: FC<Props> = ({
invalid, invalid,
disabled, disabled,
id, id,
optionLabel = 'label',
}) => { }) => {
const debouncedSearch = debounce(getDashboards, 300); const debouncedSearch = debounce((query: string) => getDashboards(query || '', optionLabel), 300);
const option = value ? { value, label: value.label } : undefined; const option = value ? { value, [optionLabel]: value[optionLabel] } : undefined;
const onChange = (item: SelectableValue<DashboardPickerItem>) => { const onChange = (item: SelectableValue<DashboardPickerItem>) => {
propsOnChange(item?.value); propsOnChange(item?.value);
}; };
@@ -55,19 +57,20 @@ export const DashboardPickerByID: FC<Props> = ({
value={option} value={option}
invalid={invalid} invalid={invalid}
disabled={disabled} 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 }); const result = await backendSrv.search({ type: 'dash-db', query, limit: 100 });
return result.map(({ id, uid = '', title, folderTitle }) => { return result.map(({ id, uid = '', title, folderTitle }) => {
const value: DashboardPickerItem = { const value: DashboardPickerItem = {
id, id,
uid, 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 = { const newItem: PlaylistItem = {
id: dashboard.id, id: dashboard.id,
title: dashboard.label, title: dashboard.label as string,
type: 'dashboard_by_id', type: 'dashboard_by_id',
value: dashboard.id.toString(10), value: dashboard.id.toString(10),
order: items.length + 1, order: items.length + 1,