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

Core: DashboardPicker improvements (#22619)

Browse Source 
* Refactor the picker to FC

* Remove redundant variable

* currentDashboardId => currentDashboard

* Make isClearable configurable

* Use useAsyncFn for options loading

* Move getDashboards outside of component
This commit is contained in:
Alex Khomenko 2020-03-10 11:16:56 +02:00 committed by GitHub
parent 385be77687
commit 5aeb367322
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 33 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

89
public/app/core/components/Select/DashboardPicker.tsx
View File

@ -1,5 +1,6 @@
import React, { PureComponent } from 'react'; import React, { FC } from 'react';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import { useAsyncFn } from 'react-use';
import { SelectableValue } from '@grafana/data'; import { SelectableValue } from '@grafana/data';
import { Forms } from '@grafana/ui'; import { Forms } from '@grafana/ui';
import { FormInputSize } from '@grafana/ui/src/components/Forms/types'; import { FormInputSize } from '@grafana/ui/src/components/Forms/types';
@ -8,64 +9,40 @@ import { DashboardSearchHit, DashboardDTO } from 'app/types';
export interface Props { export interface Props {
onSelected: (dashboard: DashboardDTO) => void; onSelected: (dashboard: DashboardDTO) => void;
currentDashboardId?: SelectableValue<number>; currentDashboard?: SelectableValue<number>;
size?: FormInputSize; size?: FormInputSize;
isClearable?: boolean;
} }
export interface State { const getDashboards = (query = '') => {
isLoading: boolean; return backendSrv.search({ type: 'dash-db', query }).then((result: DashboardSearchHit[]) => {
} return result.map((item: DashboardSearchHit) => ({
id: item.id,
value: item.id,
label: `${item.folderTitle ? item.folderTitle : 'General'}/${item.title}`,
}));
});
};
export class DashboardPicker extends PureComponent<Props, State> { export const DashboardPicker: FC<Props> = ({ onSelected, currentDashboard, size = 'md', isClearable = false }) => {
debouncedSearch: any; const debouncedSearch = debounce(getDashboards, 300, {
leading: true,
trailing: true,
});
static defaultProps = { const [state, searchDashboards] = useAsyncFn(debouncedSearch, []);
size: 'md',
};
constructor(props: Props) { return (
super(props); <Forms.AsyncSelect
size={size}
this.state = { isLoading={state.loading}
isLoading: false, isClearable={isClearable}
}; defaultOptions={true}
loadOptions={searchDashboards}
this.debouncedSearch = debounce(this.getDashboards, 300, { onChange={onSelected}
leading: true, placeholder="Select dashboard"
trailing: true, noOptionsMessage="No dashboards found"
}); value={currentDashboard}
} />
);
getDashboards = (query = '') => { };
this.setState({ isLoading: true });
return backendSrv.search({ type: 'dash-db', query }).then((result: DashboardSearchHit[]) => {
const dashboards = result.map((item: DashboardSearchHit) => ({
id: item.id,
value: item.id,
label: `${item.folderTitle ? item.folderTitle : 'General'}/${item.title}`,
}));
this.setState({ isLoading: false });
return dashboards;
});
};
render() {
const { size, onSelected, currentDashboardId } = this.props;
const { isLoading } = this.state;
return (
<Forms.AsyncSelect
size={size}
isLoading={isLoading}
isClearable={true}
defaultOptions={true}
loadOptions={this.debouncedSearch}
onChange={onSelected}
placeholder="Select dashboard"
noOptionsMessage={'No dashboards found'}
value={currentDashboardId}
/>
);
}
}