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">
+  <table class="filter-table">
+    <tbody>
+      <tr ng-repeat="dash in ctrl.dashboards">
+        <td class="width-1">
           <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>
+        </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,6 +24,7 @@
 		</div>
 	</div>
 
+  <div ng-if="ctrl.tabIndex === 0" class="tab-content">
 
     <form name="editForm">
       <div class="gf-form-group">
@@ -51,8 +52,6 @@
       <rebuild-on-change property="ctrl.datasourceMeta.id">
         <plugin-component type="datasource-config-ctrl">
         </plugin-component>
-
-			<dashboard-import-list plugin="ctrl.datasourceMeta"></dashboard-import-list>
       </rebuild-on-change>
 
       <div ng-if="testing" style="margin-top: 25px">
@@ -74,5 +73,11 @@
       </div>
 
     </form>
+  </div>
+
+  <div ng-if="ctrl.tabIndex === 1" class="tab-content">
+    <dashboard-import-list plugin="ctrl.datasourceMeta"></dashboard-import-list>
+  </div>
+
 </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,