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