added data source type type

public/app/features/datasources/NewDataSourcePage.tsx

@@ -3,33 +3,34 @@ import { connect } from 'react-redux';
 import { hot } from 'react-hot-loader';
 import Select from 'react-select';
 import PageHeader from 'app/core/components/PageHeader/PageHeader';
-import { NavModel } from 'app/types';
-import { addDataSource } from './state/actions';
+import { DataSourceType, NavModel } from 'app/types';
+import { addDataSource, loadDataSourceTypes } from './state/actions';
+import { updateLocation } from '../../core/actions';
 import { getNavModel } from 'app/core/selectors/navModel';
 
 export interface Props {
   navModel: NavModel;
+  dataSourceTypes: DataSourceType[];
   addDataSource: typeof addDataSource;
+  loadDataSourceTypes: typeof loadDataSourceTypes;
+  updateLocation: typeof updateLocation;
 }
 
 export interface State {
   name: string;
   type: { value: string; label: string };
-  dataSourceOptions: Array<{ value: string; label: string }>;
 }
 
 class NewDataSourcePage extends PureComponent<Props, State> {
   state = {
     name: '',
     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 => {
     this.setState({
       name: event.target.value,
@@ -42,12 +43,18 @@ class NewDataSourcePage extends PureComponent<Props, State> {
     });
   };
 
-  submitForm = () => {
+  submitForm = event => {
+    event.preventDefault();
+
     if (!this.isFieldsEmpty()) {
-      // post
+      this.props.addDataSource(this.state.name, this.state.type.value);
     }
   };
 
+  goBack = () => {
+    this.props.updateLocation({ path: '/datasources' });
+  };
+
   isFieldsEmpty = () => {
     const { name, type } = this.state;
 
@@ -61,8 +68,8 @@ class NewDataSourcePage extends PureComponent<Props, State> {
   };
 
   render() {
-    const { navModel } = this.props;
-    const { dataSourceOptions, name, type } = this.state;
+    const { navModel, dataSourceTypes } = this.props;
+    const { name, type } = this.state;
 
     return (
       <div>
@@ -83,7 +90,9 @@ class NewDataSourcePage extends PureComponent<Props, State> {
             <div className="gf-form max-width-30">
               <span className="gf-form-label width-7">Type</span>
               <Select
-                options={dataSourceOptions}
+                valueKey="type"
+                labelKey="name"
+                options={dataSourceTypes}
                 value={type}
                 onChange={this.onTypeChanged}
                 autoSize={true}
@@ -95,7 +104,9 @@ class NewDataSourcePage extends PureComponent<Props, State> {
                 <i className="fa fa-save" />
                 {` Create`}
               </button>
-              <button className="btn btn-danger">Cancel</button>
+              <button className="btn btn-danger" onClick={this.goBack}>
+                Cancel
+              </button>
             </div>
           </form>
         </div>
@@ -107,11 +118,14 @@ class NewDataSourcePage extends PureComponent<Props, State> {
 function mapStateToProps(state) {
   return {
     navModel: getNavModel(state.navIndex, 'datasources'),
+    dataSourceTypes: state.dataSources.dataSourceTypes,
   };
 }
 
 const mapDispatchToProps = {
   addDataSource,
+  loadDataSourceTypes,
+  updateLocation,
 };
 
 export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(NewDataSourcePage));

public/app/features/datasources/state/actions.ts

 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 { LayoutMode } from '../../../core/components/LayoutSelector/LayoutSelector';
+import { updateLocation } from '../../../core/actions';
+import { UpdateLocationAction } from '../../../core/actions/location';
 
 export enum ActionTypes {
   LoadDataSources = 'LOAD_DATA_SOURCES',
+  LoadDataSourceTypes = 'LOAD_DATA_SOURCE_TYPES',
   SetDataSourcesSearchQuery = 'SET_DATA_SOURCES_SEARCH_QUERY',
   SetDataSourcesLayoutMode = 'SET_DATA_SOURCES_LAYOUT_MODE',
 }
@@ -24,11 +27,21 @@ export interface SetDataSourcesLayoutModeAction {
   payload: LayoutMode;
 }
 
+export interface LoadDataSourceTypesAction {
+  type: ActionTypes.LoadDataSourceTypes;
+  payload: DataSourceType[];
+}
+
 const dataSourcesLoaded = (dataSources: DataSource[]): LoadDataSourcesAction => ({
   type: ActionTypes.LoadDataSources,
   payload: dataSources,
 });
 
+const dataSourceTypesLoaded = (dataSourceTypes: DataSourceType[]): LoadDataSourceTypesAction => ({
+  type: ActionTypes.LoadDataSourceTypes,
+  payload: dataSourceTypes,
+});
+
 export const setDataSourcesSearchQuery = (searchQuery: string): SetDataSourcesSearchQueryAction => ({
   type: ActionTypes.SetDataSourcesSearchQuery,
   payload: searchQuery,
@@ -39,7 +52,12 @@ export const setDataSourcesLayoutMode = (layoutMode: LayoutMode): SetDataSources
   payload: layoutMode,
 });
 
-export type Action = LoadDataSourcesAction | SetDataSourcesSearchQueryAction | SetDataSourcesLayoutModeAction;
+export type Action =
+  | LoadDataSourcesAction
+  | SetDataSourcesSearchQueryAction
+  | SetDataSourcesLayoutModeAction
+  | UpdateLocationAction
+  | LoadDataSourceTypesAction;
 
 type ThunkResult<R> = ThunkAction<R, StoreState, undefined, Action>;
 
@@ -52,6 +70,14 @@ export function loadDataSources(): ThunkResult<void> {
 
 export function addDataSource(name: string, type: string): ThunkResult<void> {
   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));
   };
 }

public/app/features/datasources/state/reducers.ts

-import { DataSource, DataSourcesState } from 'app/types';
+import { DataSource, DataSourcesState, DataSourceType } from 'app/types';
 import { Action, ActionTypes } from './actions';
 import { LayoutModes } from '../../../core/components/LayoutSelector/LayoutSelector';
 
@@ -7,6 +7,7 @@ const initialState: DataSourcesState = {
   layoutMode: LayoutModes.Grid,
   searchQuery: '',
   dataSourcesCount: 0,
+  dataSourceTypes: [] as DataSourceType[],
 };
 
 export const dataSourcesReducer = (state = initialState, action: Action): DataSourcesState => {
@@ -19,6 +20,9 @@ export const dataSourcesReducer = (state = initialState, action: Action): DataSo
 
     case ActionTypes.SetDataSourcesLayoutMode:
       return { ...state, layoutMode: action.payload };
+
+    case ActionTypes.LoadDataSourceTypes:
+      return { ...state, dataSourceTypes: action.payload };
   }
 
   return state;

public/app/types/datasources.ts

@@ -17,9 +17,15 @@ export interface DataSource {
   readOnly: false;
 }
 
+export interface DataSourceType {
+  name: string;
+  type: string;
+}
+
 export interface DataSourcesState {
   dataSources: DataSource[];
   searchQuery: string;
   layoutMode: LayoutMode;
   dataSourcesCount: number;
+  dataSourceTypes: DataSourceType[];
 }

public/app/types/index.ts

@@ -7,7 +7,7 @@ import { DashboardState } from './dashboard';
 import { DashboardAcl, OrgRole, PermissionLevel } from './acl';
 import { ApiKey, ApiKeysState, NewApiKey } from './apiKeys';
 import { User } from './user';
-import { DataSource, DataSourcesState } from './datasources';
+import { DataSource, DataSourcesState, DataSourceType } from './datasources';
 import { PluginMeta, Plugin, PluginsState } from './plugins';
 
 export {
@@ -42,6 +42,7 @@ export {
   Plugin,
   PluginsState,
   DataSourcesState,
+  DataSourceType,
 };
 
 export interface StoreState {