added actions

public/app/features/datasources/settings/ButtonRow.tsx

@@ -2,7 +2,7 @@ import React, { SFC } from 'react';
 
 
 export interface Props {
 export interface Props {
   isReadOnly: boolean;
   isReadOnly: boolean;
-  onDelete: (event) => void;
+  onDelete: () => void;
   onSubmit: (event) => void;
   onSubmit: (event) => void;
 }
 }
 
 
@@ -12,7 +12,7 @@ const ButtonRow: SFC<Props> = ({ isReadOnly, onDelete, onSubmit }) => {
       <button type="submit" className="btn btn-success" disabled={isReadOnly} onClick={event => onSubmit(event)}>
       <button type="submit" className="btn btn-success" disabled={isReadOnly} onClick={event => onSubmit(event)}>
         Save &amp; Test
         Save &amp; Test
       </button>
       </button>
-      <button type="submit" className="btn btn-danger" disabled={isReadOnly} onClick={event => onDelete(event)}>
+      <button type="submit" className="btn btn-danger" disabled={isReadOnly} onClick={onDelete}>
         Delete
         Delete
       </button>
       </button>
       <a className="btn btn-inverse" href="/datasources">
       <a className="btn btn-inverse" href="/datasources">

public/app/features/datasources/settings/DataSourceSettings.tsx

@@ -7,18 +7,21 @@ import PageLoader from '../../../core/components/PageLoader/PageLoader';
 import PluginSettings from './PluginSettings';
 import PluginSettings from './PluginSettings';
 import BasicSettings from './BasicSettings';
 import BasicSettings from './BasicSettings';
 import ButtonRow from './ButtonRow';
 import ButtonRow from './ButtonRow';
-import { loadDataSource, setDataSourceName } from '../state/actions';
+import { deleteDataSource, loadDataSource, setDataSourceName, updateDataSource } from '../state/actions';
 import { getNavModel } from '../../../core/selectors/navModel';
 import { getNavModel } from '../../../core/selectors/navModel';
 import { getRouteParamsId } from '../../../core/selectors/location';
 import { getRouteParamsId } from '../../../core/selectors/location';
 import { getDataSource, getDataSourceMeta } from '../state/selectors';
 import { getDataSource, getDataSourceMeta } from '../state/selectors';
+import appEvents from '../../../core/app_events';
 
 
 export interface Props {
 export interface Props {
   navModel: NavModel;
   navModel: NavModel;
   dataSource: DataSource;
   dataSource: DataSource;
   dataSourceMeta: Plugin;
   dataSourceMeta: Plugin;
   pageId: number;
   pageId: number;
+  deleteDataSource: typeof deleteDataSource;
   loadDataSource: typeof loadDataSource;
   loadDataSource: typeof loadDataSource;
   setDataSourceName: typeof setDataSourceName;
   setDataSourceName: typeof setDataSourceName;
+  updateDataSource: typeof updateDataSource;
 }
 }
 interface State {
 interface State {
   name: string;
   name: string;
@@ -39,11 +42,24 @@ export class DataSourceSettings extends PureComponent<Props, State> {
 
 
   onSubmit = event => {
   onSubmit = event => {
     event.preventDefault();
     event.preventDefault();
-    console.log(event);
+
+    this.props.updateDataSource();
+  };
+
+  onDelete = () => {
+    appEvents.emit('confirm-modal', {
+      title: 'Delete',
+      text: 'Are you sure you want to delete this data source?',
+      yesText: 'Delete',
+      icon: 'fa-trash',
+      onConfirm: () => {
+        this.confirmDelete();
+      },
+    });
   };
   };
 
 
-  onDelete = event => {
-    console.log(event);
+  confirmDelete = () => {
+    this.props.deleteDataSource();
   };
   };
 
 
   isReadOnly() {
   isReadOnly() {
@@ -111,7 +127,7 @@ export class DataSourceSettings extends PureComponent<Props, State> {
                 <ButtonRow
                 <ButtonRow
                   onSubmit={event => this.onSubmit(event)}
                   onSubmit={event => this.onSubmit(event)}
                   isReadOnly={this.isReadOnly()}
                   isReadOnly={this.isReadOnly()}
-                  onDelete={event => this.onDelete(event)}
+                  onDelete={this.onDelete}
                 />
                 />
               </form>
               </form>
             </div>
             </div>
@@ -135,8 +151,10 @@ function mapStateToProps(state) {
 }
 }
 
 
 const mapDispatchToProps = {
 const mapDispatchToProps = {
+  deleteDataSource,
   loadDataSource,
   loadDataSource,
   setDataSourceName,
   setDataSourceName,
+  updateDataSource,
 };
 };
 
 
 export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(DataSourceSettings));
 export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(DataSourceSettings));

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

@@ -157,6 +157,24 @@ export function loadDataSourceTypes(): ThunkResult<void> {
   };
   };
 }
 }
 
 
+export function updateDataSource(): ThunkResult<void> {
+  return async (dispatch, getStore) => {
+    const dataSource = getStore().dataSources.dataSource;
+
+    await getBackendSrv().put(`/api/datasources/${dataSource.id}`, dataSource);
+    dispatch(loadDataSource(dataSource.id));
+  };
+}
+
+export function deleteDataSource(): ThunkResult<void> {
+  return async (dispatch, getStore) => {
+    const dataSource = getStore().dataSources.dataSource;
+
+    await getBackendSrv().delete(`/api/datasources/${dataSource.id}`);
+    dispatch(updateLocation({ path: '/datasources' }));
+  };
+}
+
 export function nameExits(dataSources, name) {
 export function nameExits(dataSources, name) {
   return (
   return (
     dataSources.filter(dataSource => {
     dataSources.filter(dataSource => {

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

@@ -36,6 +36,9 @@ export const dataSourcesReducer = (state = initialState, action: Action): DataSo
 
 
     case ActionTypes.LoadDataSourceMeta:
     case ActionTypes.LoadDataSourceMeta:
       return { ...state, dataSourceMeta: action.payload };
       return { ...state, dataSourceMeta: action.payload };
+
+    case ActionTypes.SetDataSourceName:
+      return { ...state, dataSource: { ...state.dataSource, name: action.payload } };
   }
   }
 
 
   return state;
   return state;