Commit 7df00747 by Johannes Schill

chore: Fix typings and add Page-component to NewDataSourcePage #14762

parent 98fa17f0
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import { hot } from 'react-hot-loader'; import { hot } from 'react-hot-loader';
import PageHeader from 'app/core/components/PageHeader/PageHeader'; import Page from 'app/core/components/Page/Page';
import { NavModel, Plugin } from 'app/types'; import { NavModel, Plugin, StoreState } from 'app/types';
import { addDataSource, loadDataSourceTypes, setDataSourceTypeSearchQuery } from './state/actions'; import { addDataSource, loadDataSourceTypes, setDataSourceTypeSearchQuery } from './state/actions';
import { getNavModel } from 'app/core/selectors/navModel'; import { getNavModel } from 'app/core/selectors/navModel';
import { getDataSourceTypes } from './state/selectors'; import { getDataSourceTypes } from './state/selectors';
...@@ -10,6 +10,7 @@ import { getDataSourceTypes } from './state/selectors'; ...@@ -10,6 +10,7 @@ import { getDataSourceTypes } from './state/selectors';
export interface Props { export interface Props {
navModel: NavModel; navModel: NavModel;
dataSourceTypes: Plugin[]; dataSourceTypes: Plugin[];
isLoading: boolean;
addDataSource: typeof addDataSource; addDataSource: typeof addDataSource;
loadDataSourceTypes: typeof loadDataSourceTypes; loadDataSourceTypes: typeof loadDataSourceTypes;
dataSourceTypeSearchQuery: string; dataSourceTypeSearchQuery: string;
...@@ -21,20 +22,19 @@ class NewDataSourcePage extends PureComponent<Props> { ...@@ -21,20 +22,19 @@ class NewDataSourcePage extends PureComponent<Props> {
this.props.loadDataSourceTypes(); this.props.loadDataSourceTypes();
} }
onDataSourceTypeClicked = type => { onDataSourceTypeClicked = (plugin: Plugin) => {
this.props.addDataSource(type); this.props.addDataSource(plugin);
}; };
onSearchQueryChange = event => { onSearchQueryChange = (event: React.ChangeEvent<HTMLInputElement>) => {
this.props.setDataSourceTypeSearchQuery(event.target.value); this.props.setDataSourceTypeSearchQuery(event.target.value);
}; };
render() { render() {
const { navModel, dataSourceTypes, dataSourceTypeSearchQuery } = this.props; const { navModel, dataSourceTypes, dataSourceTypeSearchQuery, isLoading } = this.props;
return ( return (
<div> <Page navModel={navModel}>
<PageHeader model={navModel} /> <Page.Contents isLoading={isLoading}>
<div className="page-container page-body"> <div className="page-container page-body">
<h2 className="add-data-source-header">Choose data source type</h2> <h2 className="add-data-source-header">Choose data source type</h2>
<div className="add-data-source-search"> <div className="add-data-source-search">
...@@ -50,29 +50,31 @@ class NewDataSourcePage extends PureComponent<Props> { ...@@ -50,29 +50,31 @@ class NewDataSourcePage extends PureComponent<Props> {
</label> </label>
</div> </div>
<div className="add-data-source-grid"> <div className="add-data-source-grid">
{dataSourceTypes.map((type, index) => { {dataSourceTypes.map((plugin, index) => {
return ( return (
<div <div
onClick={() => this.onDataSourceTypeClicked(type)} onClick={() => this.onDataSourceTypeClicked(plugin)}
className="add-data-source-grid-item" className="add-data-source-grid-item"
key={`${type.id}-${index}`} key={`${plugin.id}-${index}`}
> >
<img className="add-data-source-grid-item-logo" src={type.info.logos.small} /> <img className="add-data-source-grid-item-logo" src={plugin.info.logos.small} />
<span className="add-data-source-grid-item-text">{type.name}</span> <span className="add-data-source-grid-item-text">{plugin.name}</span>
</div> </div>
); );
})} })}
</div> </div>
</div> </div>
</div> </Page.Contents>
</Page>
); );
} }
} }
function mapStateToProps(state) { function mapStateToProps(state: StoreState) {
return { return {
navModel: getNavModel(state.navIndex, 'datasources'), navModel: getNavModel(state.navIndex, 'datasources'),
dataSourceTypes: getDataSourceTypes(state.dataSources), dataSourceTypes: getDataSourceTypes(state.dataSources),
isLoading: state.dataSources.isLoadingDataSources
}; };
} }
......
...@@ -12,6 +12,7 @@ import { Plugin, StoreState } from 'app/types'; ...@@ -12,6 +12,7 @@ import { Plugin, StoreState } from 'app/types';
export enum ActionTypes { export enum ActionTypes {
LoadDataSources = 'LOAD_DATA_SOURCES', LoadDataSources = 'LOAD_DATA_SOURCES',
LoadDataSourceTypes = 'LOAD_DATA_SOURCE_TYPES', LoadDataSourceTypes = 'LOAD_DATA_SOURCE_TYPES',
LoadedDataSourceTypes = 'LOADED_DATA_SOURCE_TYPES',
LoadDataSource = 'LOAD_DATA_SOURCE', LoadDataSource = 'LOAD_DATA_SOURCE',
LoadDataSourceMeta = 'LOAD_DATA_SOURCE_META', LoadDataSourceMeta = 'LOAD_DATA_SOURCE_META',
SetDataSourcesSearchQuery = 'SET_DATA_SOURCES_SEARCH_QUERY', SetDataSourcesSearchQuery = 'SET_DATA_SOURCES_SEARCH_QUERY',
...@@ -38,6 +39,10 @@ interface SetDataSourcesLayoutModeAction { ...@@ -38,6 +39,10 @@ interface SetDataSourcesLayoutModeAction {
interface LoadDataSourceTypesAction { interface LoadDataSourceTypesAction {
type: ActionTypes.LoadDataSourceTypes; type: ActionTypes.LoadDataSourceTypes;
}
interface LoadedDataSourceTypesAction {
type: ActionTypes.LoadedDataSourceTypes;
payload: Plugin[]; payload: Plugin[];
} }
...@@ -81,8 +86,12 @@ const dataSourceMetaLoaded = (dataSourceMeta: Plugin): LoadDataSourceMetaAction ...@@ -81,8 +86,12 @@ const dataSourceMetaLoaded = (dataSourceMeta: Plugin): LoadDataSourceMetaAction
payload: dataSourceMeta, payload: dataSourceMeta,
}); });
const dataSourceTypesLoaded = (dataSourceTypes: Plugin[]): LoadDataSourceTypesAction => ({ const dataSourceTypesLoad = (): LoadDataSourceTypesAction => ({
type: ActionTypes.LoadDataSourceTypes, type: ActionTypes.LoadDataSourceTypes,
});
const dataSourceTypesLoaded = (dataSourceTypes: Plugin[]): LoadedDataSourceTypesAction => ({
type: ActionTypes.LoadedDataSourceTypes,
payload: dataSourceTypes, payload: dataSourceTypes,
}); });
...@@ -117,6 +126,7 @@ export type Action = ...@@ -117,6 +126,7 @@ export type Action =
| SetDataSourcesLayoutModeAction | SetDataSourcesLayoutModeAction
| UpdateLocationAction | UpdateLocationAction
| LoadDataSourceTypesAction | LoadDataSourceTypesAction
| LoadedDataSourceTypesAction
| SetDataSourceTypeSearchQueryAction | SetDataSourceTypeSearchQueryAction
| LoadDataSourceAction | LoadDataSourceAction
| UpdateNavIndexAction | UpdateNavIndexAction
...@@ -167,6 +177,7 @@ export function addDataSource(plugin: Plugin): ThunkResult<void> { ...@@ -167,6 +177,7 @@ export function addDataSource(plugin: Plugin): ThunkResult<void> {
export function loadDataSourceTypes(): ThunkResult<void> { export function loadDataSourceTypes(): ThunkResult<void> {
return async dispatch => { return async dispatch => {
dispatch(dataSourceTypesLoad());
const result = await getBackendSrv().get('/api/plugins', { enabled: 1, type: 'datasource' }); const result = await getBackendSrv().get('/api/plugins', { enabled: 1, type: 'datasource' });
dispatch(dataSourceTypesLoaded(result)); dispatch(dataSourceTypesLoaded(result));
}; };
......
...@@ -12,6 +12,7 @@ const initialState: DataSourcesState = { ...@@ -12,6 +12,7 @@ const initialState: DataSourcesState = {
dataSourceTypes: [] as Plugin[], dataSourceTypes: [] as Plugin[],
dataSourceTypeSearchQuery: '', dataSourceTypeSearchQuery: '',
hasFetched: false, hasFetched: false,
isLoadingDataSources: false,
dataSourceMeta: {} as Plugin, dataSourceMeta: {} as Plugin,
}; };
...@@ -30,7 +31,10 @@ export const dataSourcesReducer = (state = initialState, action: Action): DataSo ...@@ -30,7 +31,10 @@ export const dataSourcesReducer = (state = initialState, action: Action): DataSo
return { ...state, layoutMode: action.payload }; return { ...state, layoutMode: action.payload };
case ActionTypes.LoadDataSourceTypes: case ActionTypes.LoadDataSourceTypes:
return { ...state, dataSourceTypes: action.payload }; return { ...state, dataSourceTypes: [], isLoadingDataSources: true };
case ActionTypes.LoadedDataSourceTypes:
return { ...state, dataSourceTypes: action.payload, isLoadingDataSources: false };
case ActionTypes.SetDataSourceTypeSearchQuery: case ActionTypes.SetDataSourceTypeSearchQuery:
return { ...state, dataSourceTypeSearchQuery: action.payload }; return { ...state, dataSourceTypeSearchQuery: action.payload };
......
...@@ -12,4 +12,5 @@ export interface DataSourcesState { ...@@ -12,4 +12,5 @@ export interface DataSourcesState {
dataSource: DataSourceSettings; dataSource: DataSourceSettings;
dataSourceMeta: Plugin; dataSourceMeta: Plugin;
hasFetched: boolean; hasFetched: boolean;
isLoadingDataSources: boolean;
} }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment