diff --git a/public/app/core/components/Select/DashboardPicker.tsx b/public/app/core/components/Select/DashboardPicker.tsx new file mode 100644 index 00000000000..ffb4eece11c --- /dev/null +++ b/public/app/core/components/Select/DashboardPicker.tsx @@ -0,0 +1,71 @@ +import React, { PureComponent } from 'react'; +import { AsyncSelect } from '@grafana/ui'; +import { debounce } from 'lodash'; +import { getBackendSrv } from 'app/core/services/backend_srv'; +import { DashboardSearchHit, DashboardDTO } from 'app/types'; + +export interface Props { + className?: string; + onSelected: (dashboard: DashboardDTO) => void; +} + +export interface State { + isLoading: boolean; +} + +export class DashboardPicker extends PureComponent { + debouncedSearch: any; + + constructor(props: Props) { + super(props); + + this.state = { + isLoading: false, + }; + + this.debouncedSearch = debounce(this.getDashboards, 300, { + leading: true, + trailing: true, + }); + } + + getDashboards = (query = '') => { + this.setState({ isLoading: true }); + return getBackendSrv() + .search({ type: 'dash-db', query }) + .then((result: DashboardSearchHit[]) => { + const dashboards = result.map((item: DashboardSearchHit) => { + return { + id: item.uid, + value: item.id, + label: `${item.folderTitle ? item.folderTitle : 'General'}/${item.title}`, + }; + }); + + this.setState({ isLoading: false }); + return dashboards; + }); + }; + + render() { + const { className, onSelected } = this.props; + const { isLoading } = this.state; + + return ( +
+
+ 'No dashboards found'} + /> +
+
+ ); + } +}