feat(plugins): minor progress on dashboard imports

public/app/core/routes/routes.ts

@@ -63,6 +63,7 @@ function setupAngularRoutes($routeProvider, $locationProvider) {
   .when('/datasources/new', {
     templateUrl: 'public/app/features/datasources/partials/edit.html',
     controller : 'DataSourceEditCtrl',
+    controllerAs: 'ctrl',
     resolve: loadOrgBundle,
   })
   .when('/org', {

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

@@ -31,14 +31,21 @@ export class DashImportListCtrl {
 
 var template = `
 <div class="gf-form-group" ng-if="ctrl.dashboards.length">
-  <h3 class="page-heading">Dashboards</h3>
-  <div class="gf-form" ng-repeat="dash in ctrl.dashboards">
-    <label class="gf-form-label">
-        <i class="icon-gf icon-gf-dashboard"></i>
-    </label>
-    <label class="gf-form-label width-20">{{dash.name}}</label>
-    <button class="btn btn-inverse gf-form-btn" ng-click="ctrl.import(dash)">Import</button>
-  </div>
+  <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.name}}</span>
+        </td>
+        <td class="width-2">
+          <button class="btn btn-primary btn-small">Install</button>
+        </td
+      </tr>
+    </tbody>
+  </table>
 </div>
 `;
 

public/app/features/datasources/edit_ctrl.ts

@@ -22,6 +22,8 @@ export class DataSourceEditCtrl {
   types: any;
   testing: any;
   datasourceMeta: any;
+  tabIndex: number;
+  hasDashboards: boolean;
 
   /** @ngInject */
   constructor(
@@ -34,6 +36,7 @@ export class DataSourceEditCtrl {
 
       this.isNew = true;
       this.datasources = [];
+      this.tabIndex = 0;
 
       this.loadDatasourceTypes().then(() => {
         if (this.$routeParams.id) {
@@ -66,8 +69,10 @@ export class DataSourceEditCtrl {
     }
 
     typeChanged() {
+      this.hasDashboards = false;
       return this.backendSrv.get('/api/org/plugins/' + this.current.type + '/settings').then(pluginInfo => {
         this.datasourceMeta = pluginInfo;
+        this.hasDashboards = _.findWhere(pluginInfo.includes, {type: 'dashboard'});
       });
     }
 

public/app/features/datasources/partials/edit.html

@@ -11,12 +11,12 @@
 
 			<ul class="gf-tabs">
 				<li class="gf-tabs-item">
-					<a class="gf-tabs-link" ng-click="ctrl.editor.index = 0" ng-class="{active: ctrl.editor.index === 0}">
+					<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 0" ng-class="{active: ctrl.tabIndex === 0}">
 					  Config
 					</a>
 				</li>
 				<li class="gf-tabs-item" ng-show="ctrl.hasDashboards" ng-cloak>
-					<a class="gf-tabs-link" ng-click="ctrl.editor.index = 1" ng-class="{active: ctrl.editor.index === 1}">
+					<a class="gf-tabs-link" ng-click="ctrl.tabIndex = 1" ng-class="{active: ctrl.tabIndex === 1}">
 					  Dashboards
 					</a>
 				</li>
@@ -24,55 +24,60 @@
 		</div>
 	</div>
 
+  <div ng-if="ctrl.tabIndex === 0" class="tab-content">
 
-	<form name="editForm">
-		<div class="gf-form-group">
-			<div class="gf-form">
-				<span class="gf-form-label width-7">Name</span>
-				<input class="gf-form-input max-width-21" type="text" ng-model="ctrl.current.name" placeholder="My data source name" required>
-				<info-popover offset="0px -95px">
-					The name is used when you select the data source in panels.
-					The <code>Default</code> data source is preselected in new
-					panels.
-				</info-popover>
-
-				<editor-checkbox text="Default" model="ctrl.current.isDefault"></editor-checkbox>
-			</div>
-
-			<div class="gf-form">
-				<span class="gf-form-label width-7">Type</span>
-				<div class="gf-form-select-wrapper">
-					<select class="gf-form-input gf-size-auto" ng-model="ctrl.current.type" ng-options="v.id as v.name for v in ctrl.types" ng-change="ctrl.typeChanged()"></select>
-				</div>
-			</div>
-		</div>
+    <form name="editForm">
+      <div class="gf-form-group">
+        <div class="gf-form">
+          <span class="gf-form-label width-7">Name</span>
+          <input class="gf-form-input max-width-21" type="text" ng-model="ctrl.current.name" placeholder="My data source name" required>
+          <info-popover offset="0px -95px">
+            The name is used when you select the data source in panels.
+            The <code>Default</code> data source is preselected in new
+            panels.
+          </info-popover>
 
+          <editor-checkbox text="Default" model="ctrl.current.isDefault"></editor-checkbox>
+        </div>
 
-		<rebuild-on-change property="ctrl.datasourceMeta.id">
-			<plugin-component type="datasource-config-ctrl">
-			</plugin-component>
+        <div class="gf-form">
+          <span class="gf-form-label width-7">Type</span>
+          <div class="gf-form-select-wrapper">
+            <select class="gf-form-input gf-size-auto" ng-model="ctrl.current.type" ng-options="v.id as v.name for v in ctrl.types" ng-change="ctrl.typeChanged()"></select>
+          </div>
+        </div>
+      </div>
 
-			<dashboard-import-list plugin="ctrl.datasourceMeta"></dashboard-import-list>
-		</rebuild-on-change>
 
-		<div ng-if="testing" style="margin-top: 25px">
-			<h5 ng-show="!testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5>
-			<h5 ng-show="testing.done">Test results</h5>
-			<div class="alert-{{testing.status}} alert">
-				<div class="alert-title">{{testing.title}}</div>
-				<div ng-bind='testing.message'></div>
-			</div>
-		</div>
+      <rebuild-on-change property="ctrl.datasourceMeta.id">
+        <plugin-component type="datasource-config-ctrl">
+        </plugin-component>
+      </rebuild-on-change>
 
-		<div class="gf-form-button-row">
-			<button type="submit" class="btn btn-success" ng-show="ctrl.isNew" ng-click="ctrl.saveChanges()">Add</button>
-			<button type="submit" class="btn btn-success" ng-show="!ctrl.isNew" ng-click="ctrl.saveChanges()">Save</button>
-			<button type="submit" class="btn btn-secondary" ng-show="!ctrl.isNew" ng-click="ctrl.saveChanges(true)">
-				Test Connection
-			</button>
-			<a class="btn btn-link" href="datasources">Cancel</a>
-		</div>
+      <div ng-if="testing" style="margin-top: 25px">
+        <h5 ng-show="!testing.done">Testing.... <i class="fa fa-spiner fa-spin"></i></h5>
+        <h5 ng-show="testing.done">Test results</h5>
+        <div class="alert-{{testing.status}} alert">
+          <div class="alert-title">{{testing.title}}</div>
+          <div ng-bind='testing.message'></div>
+        </div>
+      </div>
+
+      <div class="gf-form-button-row">
+        <button type="submit" class="btn btn-success" ng-show="ctrl.isNew" ng-click="ctrl.saveChanges()">Add</button>
+        <button type="submit" class="btn btn-success" ng-show="!ctrl.isNew" ng-click="ctrl.saveChanges()">Save</button>
+        <button type="submit" class="btn btn-secondary" ng-show="!ctrl.isNew" ng-click="ctrl.saveChanges(true)">
+          Test Connection
+        </button>
+        <a class="btn btn-link" href="datasources">Cancel</a>
+      </div>
+
+    </form>
+  </div>
+
+  <div ng-if="ctrl.tabIndex === 1" class="tab-content">
+    <dashboard-import-list plugin="ctrl.datasourceMeta"></dashboard-import-list>
+  </div>
 
-	</form>
 </div>
 

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

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