Commit 7df00747 by Johannes Schill

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

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