mirror of
https://github.com/grafana/grafana.git
synced 2025-02-20 11:48:34 -06:00
Core: Adding DashboardPicker component (#18811)
* Adding DashboardPicker component * fix prop names * fix prop names pt2
This commit is contained in:
parent
1782d68137
commit
6912ed572c
71
public/app/core/components/Select/DashboardPicker.tsx
Normal file
71
public/app/core/components/Select/DashboardPicker.tsx
Normal file
@ -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<Props, State> {
|
||||||
|
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 (
|
||||||
|
<div className="gf-form-inline">
|
||||||
|
<div className="gf-form">
|
||||||
|
<AsyncSelect
|
||||||
|
className={className}
|
||||||
|
isLoading={isLoading}
|
||||||
|
isClearable={true}
|
||||||
|
defaultOptions={true}
|
||||||
|
loadOptions={this.debouncedSearch}
|
||||||
|
onChange={onSelected}
|
||||||
|
placeholder="Select dashboard"
|
||||||
|
noOptionsMessage={() => 'No dashboards found'}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
Loading…
Reference in New Issue
Block a user