Commit 44f2041c by Peter Holmberg

added data source type type

parent a381db32
...@@ -3,33 +3,34 @@ import { connect } from 'react-redux'; ...@@ -3,33 +3,34 @@ import { connect } from 'react-redux';
import { hot } from 'react-hot-loader'; import { hot } from 'react-hot-loader';
import Select from 'react-select'; import Select from 'react-select';
import PageHeader from 'app/core/components/PageHeader/PageHeader'; import PageHeader from 'app/core/components/PageHeader/PageHeader';
import { NavModel } from 'app/types'; import { DataSourceType, NavModel } from 'app/types';
import { addDataSource } from './state/actions'; import { addDataSource, loadDataSourceTypes } from './state/actions';
import { updateLocation } from '../../core/actions';
import { getNavModel } from 'app/core/selectors/navModel'; import { getNavModel } from 'app/core/selectors/navModel';
export interface Props { export interface Props {
navModel: NavModel; navModel: NavModel;
dataSourceTypes: DataSourceType[];
addDataSource: typeof addDataSource; addDataSource: typeof addDataSource;
loadDataSourceTypes: typeof loadDataSourceTypes;
updateLocation: typeof updateLocation;
} }
export interface State { export interface State {
name: string; name: string;
type: { value: string; label: string }; type: { value: string; label: string };
dataSourceOptions: Array<{ value: string; label: string }>;
} }
class NewDataSourcePage extends PureComponent<Props, State> { class NewDataSourcePage extends PureComponent<Props, State> {
state = { state = {
name: '', name: '',
type: null, type: null,
dataSourceOptions: [
{ value: 'prometheus', label: 'Prometheus' },
{ value: 'graphite', label: 'Graphite' },
{ value: 'mysql', label: 'MySql' },
{ value: 'influxdb', label: 'InfluxDB' },
],
}; };
componentDidMount() {
this.props.loadDataSourceTypes();
}
onChangeName = event => { onChangeName = event => {
this.setState({ this.setState({
name: event.target.value, name: event.target.value,
...@@ -42,12 +43,18 @@ class NewDataSourcePage extends PureComponent<Props, State> { ...@@ -42,12 +43,18 @@ class NewDataSourcePage extends PureComponent<Props, State> {
}); });
}; };
submitForm = () => { submitForm = event => {
event.preventDefault();
if (!this.isFieldsEmpty()) { if (!this.isFieldsEmpty()) {
// post this.props.addDataSource(this.state.name, this.state.type.value);
} }
}; };
goBack = () => {
this.props.updateLocation({ path: '/datasources' });
};
isFieldsEmpty = () => { isFieldsEmpty = () => {
const { name, type } = this.state; const { name, type } = this.state;
...@@ -61,8 +68,8 @@ class NewDataSourcePage extends PureComponent<Props, State> { ...@@ -61,8 +68,8 @@ class NewDataSourcePage extends PureComponent<Props, State> {
}; };
render() { render() {
const { navModel } = this.props; const { navModel, dataSourceTypes } = this.props;
const { dataSourceOptions, name, type } = this.state; const { name, type } = this.state;
return ( return (
<div> <div>
...@@ -83,7 +90,9 @@ class NewDataSourcePage extends PureComponent<Props, State> { ...@@ -83,7 +90,9 @@ class NewDataSourcePage extends PureComponent<Props, State> {
<div className="gf-form max-width-30"> <div className="gf-form max-width-30">
<span className="gf-form-label width-7">Type</span> <span className="gf-form-label width-7">Type</span>
<Select <Select
options={dataSourceOptions} valueKey="type"
labelKey="name"
options={dataSourceTypes}
value={type} value={type}
onChange={this.onTypeChanged} onChange={this.onTypeChanged}
autoSize={true} autoSize={true}
...@@ -95,7 +104,9 @@ class NewDataSourcePage extends PureComponent<Props, State> { ...@@ -95,7 +104,9 @@ class NewDataSourcePage extends PureComponent<Props, State> {
<i className="fa fa-save" /> <i className="fa fa-save" />
{` Create`} {` Create`}
</button> </button>
<button className="btn btn-danger">Cancel</button> <button className="btn btn-danger" onClick={this.goBack}>
Cancel
</button>
</div> </div>
</form> </form>
</div> </div>
...@@ -107,11 +118,14 @@ class NewDataSourcePage extends PureComponent<Props, State> { ...@@ -107,11 +118,14 @@ class NewDataSourcePage extends PureComponent<Props, State> {
function mapStateToProps(state) { function mapStateToProps(state) {
return { return {
navModel: getNavModel(state.navIndex, 'datasources'), navModel: getNavModel(state.navIndex, 'datasources'),
dataSourceTypes: state.dataSources.dataSourceTypes,
}; };
} }
const mapDispatchToProps = { const mapDispatchToProps = {
addDataSource, addDataSource,
loadDataSourceTypes,
updateLocation,
}; };
export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(NewDataSourcePage)); export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(NewDataSourcePage));
import { ThunkAction } from 'redux-thunk'; import { ThunkAction } from 'redux-thunk';
import { DataSource, StoreState } from 'app/types'; import { DataSource, DataSourceType, StoreState } from 'app/types';
import { getBackendSrv } from '../../../core/services/backend_srv'; import { getBackendSrv } from '../../../core/services/backend_srv';
import { LayoutMode } from '../../../core/components/LayoutSelector/LayoutSelector'; import { LayoutMode } from '../../../core/components/LayoutSelector/LayoutSelector';
import { updateLocation } from '../../../core/actions';
import { UpdateLocationAction } from '../../../core/actions/location';
export enum ActionTypes { export enum ActionTypes {
LoadDataSources = 'LOAD_DATA_SOURCES', LoadDataSources = 'LOAD_DATA_SOURCES',
LoadDataSourceTypes = 'LOAD_DATA_SOURCE_TYPES',
SetDataSourcesSearchQuery = 'SET_DATA_SOURCES_SEARCH_QUERY', SetDataSourcesSearchQuery = 'SET_DATA_SOURCES_SEARCH_QUERY',
SetDataSourcesLayoutMode = 'SET_DATA_SOURCES_LAYOUT_MODE', SetDataSourcesLayoutMode = 'SET_DATA_SOURCES_LAYOUT_MODE',
} }
...@@ -24,11 +27,21 @@ export interface SetDataSourcesLayoutModeAction { ...@@ -24,11 +27,21 @@ export interface SetDataSourcesLayoutModeAction {
payload: LayoutMode; payload: LayoutMode;
} }
export interface LoadDataSourceTypesAction {
type: ActionTypes.LoadDataSourceTypes;
payload: DataSourceType[];
}
const dataSourcesLoaded = (dataSources: DataSource[]): LoadDataSourcesAction => ({ const dataSourcesLoaded = (dataSources: DataSource[]): LoadDataSourcesAction => ({
type: ActionTypes.LoadDataSources, type: ActionTypes.LoadDataSources,
payload: dataSources, payload: dataSources,
}); });
const dataSourceTypesLoaded = (dataSourceTypes: DataSourceType[]): LoadDataSourceTypesAction => ({
type: ActionTypes.LoadDataSourceTypes,
payload: dataSourceTypes,
});
export const setDataSourcesSearchQuery = (searchQuery: string): SetDataSourcesSearchQueryAction => ({ export const setDataSourcesSearchQuery = (searchQuery: string): SetDataSourcesSearchQueryAction => ({
type: ActionTypes.SetDataSourcesSearchQuery, type: ActionTypes.SetDataSourcesSearchQuery,
payload: searchQuery, payload: searchQuery,
...@@ -39,7 +52,12 @@ export const setDataSourcesLayoutMode = (layoutMode: LayoutMode): SetDataSources ...@@ -39,7 +52,12 @@ export const setDataSourcesLayoutMode = (layoutMode: LayoutMode): SetDataSources
payload: layoutMode, payload: layoutMode,
}); });
export type Action = LoadDataSourcesAction | SetDataSourcesSearchQueryAction | SetDataSourcesLayoutModeAction; export type Action =
| LoadDataSourcesAction
| SetDataSourcesSearchQueryAction
| SetDataSourcesLayoutModeAction
| UpdateLocationAction
| LoadDataSourceTypesAction;
type ThunkResult<R> = ThunkAction<R, StoreState, undefined, Action>; type ThunkResult<R> = ThunkAction<R, StoreState, undefined, Action>;
...@@ -52,6 +70,14 @@ export function loadDataSources(): ThunkResult<void> { ...@@ -52,6 +70,14 @@ export function loadDataSources(): ThunkResult<void> {
export function addDataSource(name: string, type: string): ThunkResult<void> { export function addDataSource(name: string, type: string): ThunkResult<void> {
return async dispatch => { return async dispatch => {
await getBackendSrv().post('/api/datasources', { name, type }); const result = await getBackendSrv().post('/api/datasources', { name: name, type: type, access: 'proxy' });
dispatch(updateLocation({ path: `/datasources/edit/${result.id}` }));
};
}
export function loadDataSourceTypes(): ThunkResult<void> {
return async dispatch => {
const result = await getBackendSrv().get('/api/plugins', { enabled: 1, type: 'datasource' });
dispatch(dataSourceTypesLoaded(result));
}; };
} }
import { DataSource, DataSourcesState } from 'app/types'; import { DataSource, DataSourcesState, DataSourceType } from 'app/types';
import { Action, ActionTypes } from './actions'; import { Action, ActionTypes } from './actions';
import { LayoutModes } from '../../../core/components/LayoutSelector/LayoutSelector'; import { LayoutModes } from '../../../core/components/LayoutSelector/LayoutSelector';
...@@ -7,6 +7,7 @@ const initialState: DataSourcesState = { ...@@ -7,6 +7,7 @@ const initialState: DataSourcesState = {
layoutMode: LayoutModes.Grid, layoutMode: LayoutModes.Grid,
searchQuery: '', searchQuery: '',
dataSourcesCount: 0, dataSourcesCount: 0,
dataSourceTypes: [] as DataSourceType[],
}; };
export const dataSourcesReducer = (state = initialState, action: Action): DataSourcesState => { export const dataSourcesReducer = (state = initialState, action: Action): DataSourcesState => {
...@@ -19,6 +20,9 @@ export const dataSourcesReducer = (state = initialState, action: Action): DataSo ...@@ -19,6 +20,9 @@ export const dataSourcesReducer = (state = initialState, action: Action): DataSo
case ActionTypes.SetDataSourcesLayoutMode: case ActionTypes.SetDataSourcesLayoutMode:
return { ...state, layoutMode: action.payload }; return { ...state, layoutMode: action.payload };
case ActionTypes.LoadDataSourceTypes:
return { ...state, dataSourceTypes: action.payload };
} }
return state; return state;
......
...@@ -17,9 +17,15 @@ export interface DataSource { ...@@ -17,9 +17,15 @@ export interface DataSource {
readOnly: false; readOnly: false;
} }
export interface DataSourceType {
name: string;
type: string;
}
export interface DataSourcesState { export interface DataSourcesState {
dataSources: DataSource[]; dataSources: DataSource[];
searchQuery: string; searchQuery: string;
layoutMode: LayoutMode; layoutMode: LayoutMode;
dataSourcesCount: number; dataSourcesCount: number;
dataSourceTypes: DataSourceType[];
} }
...@@ -7,7 +7,7 @@ import { DashboardState } from './dashboard'; ...@@ -7,7 +7,7 @@ import { DashboardState } from './dashboard';
import { DashboardAcl, OrgRole, PermissionLevel } from './acl'; import { DashboardAcl, OrgRole, PermissionLevel } from './acl';
import { ApiKey, ApiKeysState, NewApiKey } from './apiKeys'; import { ApiKey, ApiKeysState, NewApiKey } from './apiKeys';
import { User } from './user'; import { User } from './user';
import { DataSource, DataSourcesState } from './datasources'; import { DataSource, DataSourcesState, DataSourceType } from './datasources';
import { PluginMeta, Plugin, PluginsState } from './plugins'; import { PluginMeta, Plugin, PluginsState } from './plugins';
export { export {
...@@ -42,6 +42,7 @@ export { ...@@ -42,6 +42,7 @@ export {
Plugin, Plugin,
PluginsState, PluginsState,
DataSourcesState, DataSourcesState,
DataSourceType,
}; };
export interface StoreState { export interface StoreState {
......
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