created view

public/app/features/datasources/DashboardsTable.tsx

+import React, { SFC } from 'react';
+import { PluginDashboard } from '../../types';
+
+interface Props {
+  dashboards: PluginDashboard[];
+  onImport: (dashboard, overwrite) => void;
+  onRemove: (dashboard) => void;
+}
+
+const DashboardsTable: SFC<Props> = ({ dashboards, onImport, onRemove }) => {
+  function buttonText(dashboard: PluginDashboard) {
+    return dashboard.revision !== dashboard.importedRevision ? 'Update' : 'Re-import';
+  }
+
+  return (
+    <table className="filter-table">
+      <tbody>
+        {dashboards.map((dashboard, index) => {
+          return (
+            <tr key={`${dashboard.dashboardId}-${index}`}>
+              <td className="width-1">
+                <i className="icon-gf icon-gf-dashboard" />
+              </td>
+              <td>
+                {dashboard.imported ? (
+                  <a href={dashboard.importedUrl}>{dashboard.title}</a>
+                ) : (
+                  <span>{dashboard.title}</span>
+                )}
+              </td>
+              <td style={{ textAlign: 'right' }}>
+                {!dashboard.imported ? (
+                  <button className="btn btn-secondary btn-small" onClick={() => onImport(dashboard, false)}>
+                    Import
+                  </button>
+                ) : (
+                  <button className="btn btn-secondary btn-small" onClick={() => onImport(dashboard, true)}>
+                    {buttonText(dashboard)}
+                  </button>
+                )}
+                {dashboard.imported && (
+                  <button className="btn btn-danger btn-small" onClick={() => onRemove(dashboard)}>
+                    <i className="fa fa-trash" />
+                  </button>
+                )}
+              </td>
+            </tr>
+          );
+        })}
+      </tbody>
+    </table>
+  );
+};
+
+export default DashboardsTable;

public/app/features/datasources/DataSourceDashboards.tsx

+import React, { PureComponent } from 'react';
+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 { getNavModel } from 'app/core/selectors/navModel';
+import { getRouteParamsId } from 'app/core/selectors/location';
+import { loadDataSource } from './state/actions';
+import { loadPluginDashboards } from '../plugins/state/actions';
+
+export interface Props {
+  navModel: NavModel;
+  dashboards: PluginDashboard[];
+  pageId: number;
+  loadDataSource: typeof loadDataSource;
+  loadPluginDashboards: typeof loadPluginDashboards;
+}
+
+export class DataSourceDashboards extends PureComponent<Props> {
+  async componentDidMount() {
+    const { loadDataSource, pageId } = this.props;
+
+    await loadDataSource(pageId);
+    this.props.loadPluginDashboards();
+  }
+
+  onImport = (dashboard, state) => {};
+
+  onRemove = dashboard => {};
+
+  render() {
+    const { dashboards, navModel } = this.props;
+    return (
+      <div>
+        <PageHeader model={navModel} />
+        <div className="page-container page-body">
+          <DashboardTable
+            dashboards={dashboards}
+            onImport={(dashboard, overwrite) => this.onImport(dashboard, overwrite)}
+            onRemove={dashboard => this.onRemove(dashboard)}
+          />
+        </div>
+      </div>
+    );
+  }
+}
+
+function mapStateToProps(state) {
+  const pageId = getRouteParamsId(state.location);
+
+  return {
+    navModel: getNavModel(state.navIndex, `datasource-dashboards-${pageId}`),
+    pageId: pageId,
+    dashboards: state.plugins.dashboards,
+  };
+}
+
+const mapDispatchToProps = {
+  loadDataSource,
+  loadPluginDashboards,
+};
+
+export default hot(module)(connect(mapStateToProps, mapDispatchToProps)(DataSourceDashboards));

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

@@ -2,9 +2,11 @@ import { Plugin, StoreState } from 'app/types';
 import { ThunkAction } from 'redux-thunk';
 import { getBackendSrv } from '../../../core/services/backend_srv';
 import { LayoutMode } from '../../../core/components/LayoutSelector/LayoutSelector';
+import { PluginDashboard } from '../../../types/plugins';
 
 export enum ActionTypes {
   LoadPlugins = 'LOAD_PLUGINS',
+  LoadPluginDashboards = 'LOAD_PLUGIN_DASHBOARDS',
   SetPluginsSearchQuery = 'SET_PLUGIN_SEARCH_QUERY',
   SetLayoutMode = 'SET_LAYOUT_MODE',
 }
@@ -14,6 +16,11 @@ export interface LoadPluginsAction {
   payload: Plugin[];
 }
 
+export interface LoadPluginDashboardsAction {
+  type: ActionTypes.LoadPluginDashboards;
+  payload: PluginDashboard[];
+}
+
 export interface SetPluginsSearchQueryAction {
   type: ActionTypes.SetPluginsSearchQuery;
   payload: string;
@@ -39,7 +46,12 @@ const pluginsLoaded = (plugins: Plugin[]): LoadPluginsAction => ({
   payload: plugins,
 });
 
-export type Action = LoadPluginsAction | SetPluginsSearchQueryAction | SetLayoutModeAction;
+const pluginDashboardsLoaded = (dashboards: PluginDashboard[]): LoadPluginDashboardsAction => ({
+  type: ActionTypes.LoadPluginDashboards,
+  payload: dashboards,
+});
+
+export type Action = LoadPluginsAction | LoadPluginDashboardsAction | SetPluginsSearchQueryAction | SetLayoutModeAction;
 
 type ThunkResult<R> = ThunkAction<R, StoreState, undefined, Action>;
 
@@ -49,3 +61,12 @@ export function loadPlugins(): ThunkResult<void> {
     dispatch(pluginsLoaded(result));
   };
 }
+
+export function loadPluginDashboards(): ThunkResult<void> {
+  return async (dispatch, getStore) => {
+    const dataSourceType = getStore().dataSources.dataSource.type;
+
+    const response = await getBackendSrv().get(`api/plugins/${dataSourceType}/dashboards`);
+    dispatch(pluginDashboardsLoaded(response));
+  };
+}

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

 import { Action, ActionTypes } from './actions';
 import { Plugin, PluginsState } from 'app/types';
 import { LayoutModes } from '../../../core/components/LayoutSelector/LayoutSelector';
+import { PluginDashboard } from '../../../types/plugins';
 
 export const initialState: PluginsState = {
   plugins: [] as Plugin[],
   searchQuery: '',
   layoutMode: LayoutModes.Grid,
   hasFetched: false,
+  dashboards: [] as PluginDashboard[],
 };
 
 export const pluginsReducer = (state = initialState, action: Action): PluginsState => {
@@ -19,6 +21,9 @@ export const pluginsReducer = (state = initialState, action: Action): PluginsSta
 
     case ActionTypes.SetLayoutMode:
       return { ...state, layoutMode: action.payload };
+
+    case ActionTypes.LoadPluginDashboards:
+      return { ...state, dashboards: action.payload };
   }
   return state;
 };

public/app/routes/routes.ts

@@ -13,6 +13,7 @@ import FolderPermissions from 'app/features/folders/FolderPermissions';
 import DataSourcesListPage from 'app/features/datasources/DataSourcesListPage';
 import NewDataSourcePage from '../features/datasources/NewDataSourcePage';
 import UsersListPage from 'app/features/users/UsersListPage';
+import DataSourceDashboards from 'app/features/datasources/DataSourceDashboards';
 
 /** @ngInject */
 export function setupAngularRoutes($routeProvider, $locationProvider) {
@@ -78,9 +79,10 @@ export function setupAngularRoutes($routeProvider, $locationProvider) {
       controllerAs: 'ctrl',
     })
     .when('/datasources/edit/:id/dashboards', {
-      templateUrl: 'public/app/features/plugins/partials/ds_dashboards.html',
-      controller: 'DataSourceDashboardsCtrl',
-      controllerAs: 'ctrl',
+      template: '<react-container />',
+      resolve: {
+        component: () => DataSourceDashboards,
+      },
     })
     .when('/datasources/new', {
       template: '<react-container />',

public/app/types/index.ts

@@ -8,7 +8,7 @@ import { DashboardAcl, OrgRole, PermissionLevel } from './acl';
 import { ApiKey, ApiKeysState, NewApiKey } from './apiKeys';
 import { Invitee, OrgUser, User, UsersState } from './user';
 import { DataSource, DataSourcesState } from './datasources';
-import { PluginMeta, Plugin, PluginsState } from './plugins';
+import { PluginDashboard, PluginMeta, Plugin, PluginsState } from './plugins';
 
 export {
   Team,
@@ -45,6 +45,7 @@ export {
   OrgUser,
   User,
   UsersState,
+  PluginDashboard,
 };
 
 export interface StoreState {

public/app/types/plugins.ts

@@ -40,9 +40,26 @@ export interface Plugin {
   type: string;
 }
 
+export interface PluginDashboard {
+  dashboardId: number;
+  description: string;
+  folderId: number;
+  imported: boolean;
+  importedRevision: number;
+  importedUri: string;
+  importedUrl: string;
+  path: string;
+  pluginId: string;
+  removed: boolean;
+  revision: number;
+  slug: string;
+  title: string;
+}
+
 export interface PluginsState {
   plugins: Plugin[];
   searchQuery: string;
   layoutMode: string;
   hasFetched: boolean;
+  dashboards: PluginDashboard[];
 }