hooked up actions

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

@@ -9,6 +9,8 @@ import {
   DashboardAclUpdateDTO,
   NewDashboardAclItem,
 } from 'app/types/acl';
+import appEvents from '../../../core/app_events';
+import { loadPluginDashboards } from '../../plugins/state/actions';
 
 export enum ActionTypes {
   LoadDashboardPermissions = 'LOAD_DASHBOARD_PERMISSIONS',
@@ -113,3 +115,18 @@ export function addDashboardPermission(dashboardId: number, newItem: NewDashboar
     await dispatch(getDashboardPermissions(dashboardId));
   };
 }
+
+export function importDashboard(data, dashboardTitle: string): ThunkResult<void> {
+  return async dispatch => {
+    await getBackendSrv().post('/api/dashboards/import', data);
+    appEvents.emit('alert-success', ['Dashboard Imported', dashboardTitle]);
+    dispatch(loadPluginDashboards());
+  };
+}
+
+export function removeDashboard(uri: string): ThunkResult<void> {
+  return async dispatch => {
+    await getBackendSrv().delete(`/api/dashboards/${uri}`);
+    dispatch(loadPluginDashboards());
+  };
+}

public/app/features/datasources/DataSourceDashboards.tsx

@@ -3,18 +3,23 @@ import { hot } from 'react-hot-loader';
 import { connect } from 'react-redux';
 import PageHeader from 'app/core/components/PageHeader/PageHeader';
 import DashboardTable from './DashboardsTable';
-import { NavModel, PluginDashboard } from 'app/types';
+import { DataSource, NavModel, PluginDashboard } from 'app/types';
 import { getNavModel } from 'app/core/selectors/navModel';
 import { getRouteParamsId } from 'app/core/selectors/location';
 import { loadDataSource } from './state/actions';
 import { loadPluginDashboards } from '../plugins/state/actions';
+import { importDashboard, removeDashboard } from '../dashboard/state/actions';
+import { getDataSource } from './state/selectors';
 
 export interface Props {
   navModel: NavModel;
   dashboards: PluginDashboard[];
+  dataSource: DataSource;
   pageId: number;
+  importDashboard: typeof importDashboard;
   loadDataSource: typeof loadDataSource;
   loadPluginDashboards: typeof loadPluginDashboards;
+  removeDashboard: typeof removeDashboard;
 }
 
 export class DataSourceDashboards extends PureComponent<Props> {
@@ -25,9 +30,30 @@ export class DataSourceDashboards extends PureComponent<Props> {
     this.props.loadPluginDashboards();
   }
 
-  onImport = (dashboard, state) => {};
+  onImport = (dashboard: PluginDashboard, overwrite: boolean) => {
+    const { dataSource, importDashboard } = this.props;
+    const data = {
+      pluginId: dashboard.pluginId,
+      path: dashboard.path,
+      overwrite: overwrite,
+      inputs: [],
+    };
 
-  onRemove = dashboard => {};
+    if (dataSource) {
+      data.inputs.push({
+        name: '*',
+        type: 'datasource',
+        pluginId: dataSource.type,
+        value: dataSource.name,
+      });
+    }
+
+    importDashboard(data, dashboard.title);
+  };
+
+  onRemove = (dashboard: PluginDashboard) => {
+    this.props.removeDashboard(dashboard.importedUri);
+  };
 
   render() {
     const { dashboards, navModel } = this.props;
@@ -53,12 +79,15 @@ function mapStateToProps(state) {
     navModel: getNavModel(state.navIndex, `datasource-dashboards-${pageId}`),
     pageId: pageId,
     dashboards: state.plugins.dashboards,
+    dataSource: getDataSource(state.dataSources, pageId),
   };
 }
 
 const mapDispatchToProps = {
+  importDashboard,
   loadDataSource,
   loadPluginDashboards,
+  removeDashboard,
 };
 
 export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(DataSourceDashboards));