feat(pluginlist panel): updates to pluginlist panel, hooked up plugin type categories

public/app/plugins/panel/pluginlist/module.html

@@ -1,31 +1,29 @@
 <div class="pluginlist">
-	<h5 class="pluginlist-section-header pluginlist-section-header--first"><i class="icon-gf icon-gf-apps pluginlist-icon"></i>Installed Apps</h5>
-	<div class="pluginlist-item" ng-repeat="plugin in ctrl.pluginList">
-		<a class="pluginlist-link pluginlist-link-{{plugin.state}}" href="plugins/{{plugin.id}}/edit">
-      <img ng-src="{{plugin.info.logos.small}}" class="pluginlist-image">
-			<span class="pluginlist-title">{{plugin.name}}</span>
-			<span class="pluginlist-version">v{{plugin.info.version}}</span>
-      <span class="pluginlist-message pluginlist-message--update" ng-show="plugin.hasUpdate">
-        Update available!
-			</span>
-      <span class="pluginlist-message pluginlist-message--enable" ng-show="!plugin.enabled">
-        Enable now
-			</span>
-			<span class="pluginlist-message pluginlist-message--no-update" ng-show="plugin.enabled && !plugin.hasUpdate">
-        Up to date
-			</span>
-		</a>
-	</div>
-	<h5 class="pluginlist-section-header"><i class="icon-gf icon-gf-panel pluginlist-icon"></i>Installed Panels</h5>
-	<div class="pluginlist-item">
-		<a class="pluginlist-link pluginlist-link-{{plugin.state}}" href="http://grafana/net/plugins/">
-			<span class="pluginlist-none-installed">No additional panels installed. <span class="pluginlist-emphasis">Browse Grafana.net</span></span>
-		</a>
-	</div>
-	<h5 class="pluginlist-section-header"><i class="icon-gf icon-gf-datasources pluginlist-icon"></i>Installed Data Sources</h5>
-	<div class="pluginlist-item">
-		<a class="pluginlist-link pluginlist-link-{{plugin.state}}" href="http://grafana/net/plugins/">
-			<span class="pluginlist-none-installed">No additional data sources installed. <span class="pluginlist-emphasis">Browse Grafana.net</span></span>
-		</a>
+	<div class="pluginlist-section" ng-repeat="category in ctrl.viewModel">
+		<h5 class="pluginlist-section-header">
+			<i class="icon-gf icon-gf-{{category.type}} pluginlist-icon"></i>
+			{{category.header}}
+		</h5>
+		<div class="pluginlist-item" ng-repeat="plugin in category.list">
+			<a class="pluginlist-link pluginlist-link-{{plugin.state}}" href="plugins/{{plugin.id}}/edit">
+				<img ng-src="{{plugin.info.logos.small}}" class="pluginlist-image">
+				<span class="pluginlist-title">{{plugin.name}}</span>
+				<span class="pluginlist-version">v{{plugin.info.version}}</span>
+				<span class="pluginlist-message pluginlist-message--update" ng-show="plugin.hasUpdate">
+					Update available!
+				</span>
+				<span class="pluginlist-message pluginlist-message--enable" ng-show="!plugin.enabled">
+					Enable now
+				</span>
+				<span class="pluginlist-message pluginlist-message--no-update" ng-show="plugin.enabled && !plugin.hasUpdate">
+					Up to date
+				</span>
+			</a>
+		</div>
+		<div class="pluginlist-item" ng-show="category.list.length === 0">
+			<a class="pluginlist-link pluginlist-link-{{plugin.state}}" href="http://grafana/net/plugins/">
+				<span class="pluginlist-none-installed">No additional panels installed. <span class="pluginlist-emphasis">Browse Grafana.net</span></span>
+			</a>
+		</div>
 	</div>
 </div>

public/app/plugins/panel/pluginlist/module.ts

@@ -12,6 +12,7 @@ class DashListCtrl extends PanelCtrl {
   static templateUrl = 'module.html';
 
   pluginList: any[];
+  viewModel: any;
 
   /** @ngInject */
   constructor($scope, $injector, private backendSrv) {
@@ -20,6 +21,11 @@ class DashListCtrl extends PanelCtrl {
 
     this.events.on('init-edit-mode', this.onInitEditMode.bind(this));
     this.pluginList = [];
+    this.viewModel = [
+      {header: "Installed Apps", list: [], type: 'app'},
+      {header: "Installed Panels", list: [], type: 'panel'},
+      {header: "Installed Datasources", list: [], type: 'datasource'},
+    ];
     this.update();
   }
 
@@ -31,6 +37,9 @@ class DashListCtrl extends PanelCtrl {
   update() {
     this.backendSrv.get('api/plugins', {embedded: 0, core: 0}).then(plugins => {
       this.pluginList = plugins;
+      this.viewModel[0].list = _.filter(plugins, {type: 'app'});
+      this.viewModel[1].list = _.filter(plugins, {type: 'panel'});
+      this.viewModel[2].list = _.filter(plugins, {type: 'datasource'});
 
       for (let plugin of this.pluginList) {
         if (!plugin.enabled) {

public/sass/components/_panel_pluginlist.scss

@@ -1,10 +1,10 @@
 .pluginlist-section-header {
-  margin: ($spacer * 2) 0 $spacer 0;
+  margin-bottom: $spacer;
   color: $text-color-weak;
 }
 
-.pluginlist-section-header--first {
-  margin-top: $spacer /2;
+.pluginlist-section {
+  margin-bottom: $spacer;
 }
 
 .pluginlist-link {