New styles almost ready

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

@@ -1,18 +1,41 @@
-<div class="dashlist">
-	<div class="dashlist-item" ng-repeat="plugin in ctrl.pluginList">
-		<a class="dashlist-link dashlist-link-{{plugin.state}}" href="plugins/{{plugin.id}}/edit">
-      <img ng-src="{{plugin.info.logos.small}}" style="width: 24px">
-			<span class="dashlist-title">
+<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>
+		<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="dashlist-update" ng-show="plugin.hasUpdate">
-        <i class="fa fa-exclamation"></i>
+      <span class="pluginlist-message pluginlist-message--update">
         Update available
 			</span>
-      <span class="dashlist-update" ng-show="!plugin.enabled">
-        <i class="fa fa-exclamation"></i>
+		</a>
+		<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-message pluginlist-message--enable">
         Enable now
 			</span>
 		</a>
 	</div>
+	<h5 class="pluginlist-section-header"><i class="icon-gf icon-gf-panel pluginlist-icon"></i>Installed Panels</h5>
+
+	<h5 class="pluginlist-section-header"><i class="icon-gf icon-gf-datasources pluginlist-icon"></i>Installed Data Sources</h5>
+
 </div>

public/dashboards/home.json

@@ -39,7 +39,7 @@
           "limit": 10,
           "mode": "starred",
           "query": "",
-          "span": 6,
+          "span": 3.75,
           "tags": [],
           "title": "Starred dashboards",
           "type": "dashlist"
@@ -49,10 +49,20 @@
           "limit": 10,
           "mode": "recently viewed",
           "query": "",
-          "span": 6,
+          "span": 3.75,
           "tags": [],
           "title": "Recently viewed dashboards",
           "type": "dashlist"
+        },
+        {
+          "title": "",
+          "error": false,
+          "span": 4.5,
+          "editable": true,
+          "type": "pluginlist",
+          "isNew": true,
+          "id": 4,
+          "links": []
         }
       ],
       "title": "Row"

public/sass/_grafana.scss

@@ -42,6 +42,7 @@
 @import "components/panel_graph";
 @import "components/submenu";
 @import "components/panel_dashlist";
+@import "components/panel_pluginlist";
 @import "components/panel_singlestat";
 @import "components/panel_table";
 @import "components/panel_text";

public/sass/components/_cards.scss

@@ -116,6 +116,10 @@
     padding: 0 1.5rem 1.5rem 0rem;
   }
 
+  .card-item-wrapper--clickable {
+    cursor: pointer;
+  }
+
   .card-item-figure {
     margin: 0 $spacer $spacer 0;
     height: 6rem;
@@ -157,6 +161,10 @@
     width: 100%;
   }
 
+  .card-item-wrapper--clickable {
+    cursor: pointer;
+  }
+
   .card-item {
     border-bottom: .2rem solid $page-bg;
     border-radius: 0;
@@ -186,4 +194,3 @@
     margin-right: 0;
   }
 }
-

public/sass/components/_panel_pluginlist.scss

@@ -0,0 +1,54 @@
+.pluginlist-section-header {
+  margin: ($spacer * 2) 0 $spacer 0;
+  color: $text-color-weak;
+}
+
+.pluginlist-section-header--first {
+  margin-top: $spacer /2;
+}
+
+.pluginlist-link {
+  display: block;
+  margin: 5px;
+  padding: 7px;
+  background-color: $tight-form-bg;
+
+  &:hover {
+    background-color: $tight-form-func-bg;
+  }
+}
+
+.pluginlist-icon {
+  vertical-align: sub;
+  font-size: $font-size-h1;
+  margin-right: $spacer / 2;
+}
+
+.pluginlist-image {
+  width: 20px;
+}
+
+.pluginlist-title {
+    margin-right: $spacer / 3;
+}
+
+.pluginlist-version {
+  font-size: $font-size-sm;
+  color: $text-color-weak;
+}
+
+.pluginlist-message {
+  float: right;
+  font-size: $font-size-sm;
+}
+
+.pluginlist-message--enable{
+  color: $brand-success;
+}
+
+.pluginlist-message--no-update {
+  color: $text-color-weak;
+}
+
+.pluginlist-message--update {
+}