feat(plugins): more work on plugin dashboard install, #4298

pkg/api/dtos/plugins.go

@@ -29,5 +29,6 @@ type PluginListItem struct {
 type InstallPluginDashboardCmd struct {
 	PluginId  string                 `json:"pluginId"`
 	Path      string                 `json:"path"`
+	Reinstall bool                   `json:"reinstall"`
 	Inputs    map[string]interface{} `json:"inputs"`
 }

pkg/plugins/dashboard_installer.go

@@ -48,8 +48,9 @@ func InstallPluginDashboard(cmd *InstallPluginDashboardCommand) error {
 		Title:             dashboard.Title,
 		Path:              cmd.Path,
 		Revision:          dashboard.GetString("revision", "1.0"),
-		InstalledURI:      "db/" + saveCmd.Result.Slug,
+		InstalledUri:      "db/" + saveCmd.Result.Slug,
 		InstalledRevision: dashboard.GetString("revision", "1.0"),
+		Installed:         true,
 	}
 
 	return nil

pkg/plugins/dashboards.go

@@ -12,7 +12,8 @@ import (
 type PluginDashboardInfoDTO struct {
 	PluginId          string `json:"pluginId"`
 	Title             string `json:"title"`
-	InstalledURI      string `json:"installedURI"`
+	Installed         bool   `json:"installed"`
+	InstalledUri      string `json:"installedUri"`
 	InstalledRevision string `json:"installedRevision"`
 	Revision          string `json:"revision"`
 	Description       string `json:"description"`
@@ -83,7 +84,8 @@ func getDashboardImportStatus(orgId int64, plugin *PluginBase, path string) (*Pl
 			return nil, err
 		}
 	} else {
-		res.InstalledURI = "db/" + query.Result.Slug
+		res.Installed = true
+		res.InstalledUri = "db/" + query.Result.Slug
 		res.InstalledRevision = query.Result.GetString("revision", "1.0")
 	}
 

public/app/core/routes/routes.ts

@@ -52,19 +52,19 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
     templateUrl: 'public/app/features/datasources/partials/list.html',
     controller : 'DataSourcesCtrl',
     controllerAs: 'ctrl',
-    resolve: loadOrgBundle,
+    resolve: loadPluginsBundle,
   })
   .when('/datasources/edit/:id', {
     templateUrl: 'public/app/features/datasources/partials/edit.html',
     controller : 'DataSourceEditCtrl',
     controllerAs: 'ctrl',
-    resolve: loadOrgBundle,
+    resolve: loadPluginsBundle,
   })
   .when('/datasources/new', {
     templateUrl: 'public/app/features/datasources/partials/edit.html',
     controller : 'DataSourceEditCtrl',
     controllerAs: 'ctrl',
-    resolve: loadOrgBundle,
+    resolve: loadPluginsBundle,
   })
   .when('/org', {
     templateUrl: 'public/app/features/org/partials/orgDetails.html',

public/app/features/dashboard/all.js

@@ -13,7 +13,6 @@ define([
   './timeSrv',
   './unsavedChangesSrv',
   './timepicker/timepicker',
-  './import_list/import_list',
   './graphiteImportCtrl',
   './dynamicDashboardSrv',
   './importCtrl',

public/app/features/datasources/all.js

-define([
-  './list_ctrl',
-  './edit_ctrl',
-], function () {});

public/app/features/org/all.js

@@ -4,5 +4,4 @@ define([
   './userInviteCtrl',
   './orgApiKeysCtrl',
   './orgDetailsCtrl',
-  '../datasources/all',
 ], function () {});

public/app/features/plugins/all.ts

-import './edit_ctrl';
-import './page_ctrl';
-import './list_ctrl';
+import './plugin_edit_ctrl';
+import './plugin_page_ctrl';
+import './plugin_list_ctrl';
+import './import_list/import_list';
+import './ds_edit_ctrl';
+import './ds_list_ctrl';

public/app/features/datasources/edit_ctrl.ts → public/app/features/plugins/ds_edit_ctrl.ts

@@ -140,6 +140,6 @@ coreModule.controller('DataSourceEditCtrl', DataSourceEditCtrl);
 coreModule.directive('datasourceHttpSettings', function() {
   return {
     scope: {current: "="},
-    templateUrl: 'public/app/features/datasources/partials/http_settings.html'
+    templateUrl: 'public/app/features/plugins/partials/ds_http_settings.html'
   };
 });

public/app/features/plugins/import_list/import_list.html

+<div class="gf-form-group" ng-if="ctrl.dashboards.length">
+	<table class="filter-table">
+		<tbody>
+			<tr ng-repeat="dash in ctrl.dashboards">
+				<td class="width-1">
+					<i class="icon-gf icon-gf-dashboard"></i>
+				</td>
+				<td>
+					<a href="dashboard/{{dash.installedUri}}" ng-show="dash.installed">
+						{{dash.title}}
+					</a>
+					<span ng-show="!dash.installed">
+						{{dash.title}}
+					</span>
+				</td>
+				<td>
+					v{{dash.revision}}
+				</td>
+				<td ng-if="dash.installed">
+					Installed v{{dash.installedRevision}}
+				</td>
+				<td style="text-align: right">
+					<button class="btn btn-secondary" ng-click="ctrl.import(dash, false)" ng-show="!dash.installed">
+						Install
+					</button>
+					<button class="btn btn-secondary" ng-click="ctrl.import(dash, true)" ng-show="dash.installed">
+						Re-Install
+					</button>
+					<button class="btn btn-danger" ng-click="ctrl.remove(dash)" ng-show="dash.installed">
+						Un-install
+					</button>
+				</td>
+			</tr>
+		</tbody>
+	</table>
+</div>
+

public/app/features/dashboard/import_list/import_list.ts → public/app/features/plugins/import_list/import_list.ts

@@ -4,9 +4,6 @@ import angular from 'angular';
 import _ from 'lodash';
 import coreModule from 'app/core/core_module';
 
-class DashboardScriptLoader {
-}
-
 export class DashImportListCtrl {
   dashboards: any[];
   plugin: any;
@@ -19,50 +16,32 @@ export class DashImportListCtrl {
     });
   }
 
-  import(dash) {
+  import(dash, reinstall) {
     var installCmd = {
       pluginId: this.plugin.id,
       path: dash.path,
+      reinstall: reinstall,
       inputs: {}
     };
 
     this.backendSrv.post(`/api/plugins/dashboards/install`, installCmd).then(res => {
-      console.log(res);
+      this.$rootScope.appEvent('alert-success', ['Dashboard Installed', dash.title]);
+      _.extend(dash, res);
     });
   }
 
+  remove(dash) {
+    this.backendSrv.delete('/api/dashboards/' + dash.installedUri).then(() => {
+      this.$rootScope.appEvent('alert-success', ['Dashboard Deleted', dash.title]);
+      dash.installed = false;
+    });
+  }
 }
 
-var template = `
-<div class="gf-form-group" ng-if="ctrl.dashboards.length">
-  <table class="filter-table">
-    <tbody>
-      <tr ng-repeat="dash in ctrl.dashboards">
-        <td class="width-1">
-          <i class="icon-gf icon-gf-dashboard"></i>
-        </td>
-        <td>
-          {{dash.title}}
-        </td>
-        <td>
-          {{dash.revision}}
-        </td>
-        <td>
-          {{dash.installedRevision}}
-        </td>
-        <td class="width-2">
-          <button class="btn btn-secondary" ng-click="ctrl.import(dash)">Install</button>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-`;
-
 export function dashboardImportList() {
   return {
     restrict: 'E',
-    template: template,
+    templateUrl: 'public/app/features/plugins/import_list/import_list.html',
     controller: DashImportListCtrl,
     bindToController: true,
     controllerAs: 'ctrl',
@@ -72,7 +51,6 @@ export function dashboardImportList() {
   };
 }
 
-
 coreModule.directive('dashboardImportList', dashboardImportList);
 
 

public/app/plugins/datasource/graphite/dashboards/carbon_stats.json

@@ -6,7 +6,7 @@
     }
   },
 
-  "title": "Carbon stats",
+  "title": "Carbon Cache Stats",
   "version": 1,
   "rows": [
     {

public/app/plugins/datasource/graphite/plugin.json

@@ -4,8 +4,7 @@
   "id": "graphite",
 
   "includes": [
-    {"type": "dashboard", "name": "Carbon Overview", "path": "dashboards/carbon_stats.json"},
-    {"type": "dashboard", "name": "Carbon Agent Details", "path": "dashboards/carbon_stats.json"}
+    {"type": "dashboard", "name": "Carbon Cache Stats", "path": "dashboards/carbon_stats.json"}
   ],
 
   "metrics": true,