mirror of https://github.com/grafana/grafana
DataSourcePicker: Refactor and collapse the DataSourceDropdown components (#66820)
* clean up the components and convert to functional components * Create hooks for getting DS * remove focus style override from input --------- Co-authored-by: Ivan Ortega <ivanortegaalba@gmail.com>pull/66977/head
Oscar Kilhed
2 years ago
committed by
GitHub
parent
9ff221098d
commit
a7e74f6d6d
@ -1,96 +0,0 @@ |
|||||||
import React, { PureComponent } from 'react'; |
|
||||||
|
|
||||||
// Components
|
|
||||||
|
|
||||||
import { DataSourceInstanceSettings, DataSourceRef, getDataSourceUID } from '@grafana/data'; |
|
||||||
import { getDataSourceSrv } from '@grafana/runtime'; |
|
||||||
import { DataSourceJsonData } from '@grafana/schema'; |
|
||||||
|
|
||||||
import { DataSourceDropdown } from './DataSourceDropdown'; |
|
||||||
import { DataSourcePickerProps } from './types'; |
|
||||||
|
|
||||||
/** |
|
||||||
* Component state description for the {@link DataSourcePicker} |
|
||||||
* |
|
||||||
* @internal |
|
||||||
*/ |
|
||||||
export interface DataSourcePickerState { |
|
||||||
error?: string; |
|
||||||
} |
|
||||||
|
|
||||||
/** |
|
||||||
* Component to be able to select a datasource from the list of installed and enabled |
|
||||||
* datasources in the current Grafana instance. |
|
||||||
* |
|
||||||
* @internal |
|
||||||
*/ |
|
||||||
export class DataSourcePicker extends PureComponent<DataSourcePickerProps, DataSourcePickerState> { |
|
||||||
dataSourceSrv = getDataSourceSrv(); |
|
||||||
|
|
||||||
state: DataSourcePickerState = {}; |
|
||||||
|
|
||||||
componentDidMount() { |
|
||||||
const { current } = this.props; |
|
||||||
const dsSettings = this.dataSourceSrv.getInstanceSettings(current); |
|
||||||
if (!dsSettings) { |
|
||||||
this.setState({ error: 'Could not find data source ' + current }); |
|
||||||
} |
|
||||||
} |
|
||||||
|
|
||||||
onChange = (ds: DataSourceInstanceSettings<DataSourceJsonData>) => { |
|
||||||
this.props.onChange(ds); |
|
||||||
this.setState({ error: undefined }); |
|
||||||
}; |
|
||||||
|
|
||||||
private getCurrentDs(): DataSourceInstanceSettings<DataSourceJsonData> | string | DataSourceRef | null | undefined { |
|
||||||
const { current, noDefault } = this.props; |
|
||||||
if (!current && noDefault) { |
|
||||||
return; |
|
||||||
} |
|
||||||
|
|
||||||
const ds = this.dataSourceSrv.getInstanceSettings(current); |
|
||||||
if (ds) { |
|
||||||
return ds; |
|
||||||
} |
|
||||||
|
|
||||||
return getDataSourceUID(current); |
|
||||||
} |
|
||||||
|
|
||||||
getDatasources() { |
|
||||||
const { alerting, tracing, metrics, mixed, dashboard, variables, annotations, pluginId, type, filter, logs } = |
|
||||||
this.props; |
|
||||||
|
|
||||||
return this.dataSourceSrv.getList({ |
|
||||||
alerting, |
|
||||||
tracing, |
|
||||||
metrics, |
|
||||||
logs, |
|
||||||
dashboard, |
|
||||||
mixed, |
|
||||||
variables, |
|
||||||
annotations, |
|
||||||
pluginId, |
|
||||||
filter, |
|
||||||
type, |
|
||||||
}); |
|
||||||
} |
|
||||||
|
|
||||||
render() { |
|
||||||
const { recentlyUsed, fileUploadOptions, enableFileUpload, onClickAddCSV } = this.props; |
|
||||||
|
|
||||||
return ( |
|
||||||
<div> |
|
||||||
<DataSourceDropdown |
|
||||||
{...this.props} |
|
||||||
datasources={this.getDatasources()} |
|
||||||
onChange={this.onChange} |
|
||||||
recentlyUsed={recentlyUsed} |
|
||||||
current={this.getCurrentDs()} |
|
||||||
fileUploadOptions={fileUploadOptions} |
|
||||||
enableFileUpload={enableFileUpload} |
|
||||||
onClickAddCSV={onClickAddCSV} |
|
||||||
/> |
|
||||||
</div> |
|
||||||
); |
|
||||||
} |
|
||||||
} |
|
||||||
@ -1,27 +0,0 @@ |
|||||||
import { updateHistory } from './DataSourcePickerWithHistory'; |
|
||||||
|
|
||||||
describe('DataSourcePickerWithHistory', () => { |
|
||||||
describe('updateHistory', () => { |
|
||||||
const early = { uid: 'b', lastUse: '2023-02-27T13:39:08.318Z' }; |
|
||||||
const later = { uid: 'a', lastUse: '2023-02-28T13:39:08.318Z' }; |
|
||||||
|
|
||||||
it('should add an item to the history', () => { |
|
||||||
expect(updateHistory([], early)).toEqual([early]); |
|
||||||
}); |
|
||||||
|
|
||||||
it('should sort later entries first', () => { |
|
||||||
expect(updateHistory([early], later)).toEqual([later, early]); |
|
||||||
}); |
|
||||||
|
|
||||||
it('should update an already existing history item with the new lastUsed date', () => { |
|
||||||
const laterB = { uid: early.uid, lastUse: later.lastUse }; |
|
||||||
expect(updateHistory([early], laterB)).toEqual([laterB]); |
|
||||||
}); |
|
||||||
|
|
||||||
it('should keep the three latest items in history', () => { |
|
||||||
const evenLater = { uid: 'c', lastUse: '2023-03-01T13:39:08.318Z' }; |
|
||||||
const latest = { uid: 'd', lastUse: '2023-03-02T13:39:08.318Z' }; |
|
||||||
expect(updateHistory([early, later, evenLater], latest)).toEqual([latest, evenLater, later]); |
|
||||||
}); |
|
||||||
}); |
|
||||||
}); |
|
||||||
@ -1,55 +0,0 @@ |
|||||||
import React from 'react'; |
|
||||||
|
|
||||||
import { dateTime } from '@grafana/data'; |
|
||||||
import { LocalStorageValueProvider } from 'app/core/components/LocalStorageValueProvider'; |
|
||||||
|
|
||||||
import { DataSourcePicker } from './DataSourcePickerNG'; |
|
||||||
import { DataSourcePickerHistoryItem, DataSourcePickerWithHistoryProps } from './types'; |
|
||||||
|
|
||||||
const DS_PICKER_STORAGE_KEY = 'DATASOURCE_PICKER'; |
|
||||||
|
|
||||||
export const DataSourcePickerWithHistory = (props: DataSourcePickerWithHistoryProps) => { |
|
||||||
return ( |
|
||||||
<LocalStorageValueProvider<DataSourcePickerHistoryItem[]> |
|
||||||
defaultValue={[]} |
|
||||||
storageKey={props.localStorageKey ?? DS_PICKER_STORAGE_KEY} |
|
||||||
> |
|
||||||
{(rawValues, onSaveToStore) => { |
|
||||||
return ( |
|
||||||
<DataSourcePicker |
|
||||||
{...props} |
|
||||||
recentlyUsed={rawValues.map((dsi) => dsi.uid)} //Filter recently to have a time cutoff
|
|
||||||
onChange={(ds) => { |
|
||||||
onSaveToStore(updateHistory(rawValues, { uid: ds.uid, lastUse: dateTime(new Date()).toISOString() })); |
|
||||||
props.onChange(ds); |
|
||||||
}} |
|
||||||
></DataSourcePicker> |
|
||||||
); |
|
||||||
}} |
|
||||||
</LocalStorageValueProvider> |
|
||||||
); |
|
||||||
}; |
|
||||||
|
|
||||||
export function updateHistory(values: DataSourcePickerHistoryItem[], newValue: DataSourcePickerHistoryItem) { |
|
||||||
const newHistory = values; |
|
||||||
const existingIndex = newHistory.findIndex((dpi) => dpi.uid === newValue.uid); |
|
||||||
if (existingIndex !== -1) { |
|
||||||
newHistory[existingIndex] = newValue; |
|
||||||
} else { |
|
||||||
newHistory.push(newValue); |
|
||||||
} |
|
||||||
|
|
||||||
newHistory.sort((a, b) => { |
|
||||||
const al = dateTime(a.lastUse); |
|
||||||
const bl = dateTime(b.lastUse); |
|
||||||
if (al.isBefore(bl)) { |
|
||||||
return 1; |
|
||||||
} else if (bl.isBefore(al)) { |
|
||||||
return -1; |
|
||||||
} else { |
|
||||||
return 0; |
|
||||||
} |
|
||||||
}); |
|
||||||
|
|
||||||
return newHistory.slice(0, 3); |
|
||||||
} |
|
||||||
Loading…
Reference in new issue