Merge branch 'pluginlist' of github.com:grafana/grafana into pluginlist

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

@@ -1,18 +1,31 @@
-<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">
-				{{plugin.name}}
+<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="dashlist-update" ng-show="plugin.hasUpdate">
-        <i class="fa fa-exclamation"></i>
-        Update available
-			</span>
-      <span class="dashlist-update" ng-show="!plugin.enabled">
-        <i class="fa fa-exclamation"></i>
+      <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>
 </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,60 @@
+.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-emphasis {
+  font-weight: 600;
+}
+
+.pluginlist-none-installed {
+  color: $text-color-weak;
+  font-size: $font-size-sm;
+}