ux(): initial pass at new card / list design, #4364

pkg/plugins/frontend_plugin.go

@@ -24,14 +24,22 @@ func (fp *FrontendPluginBase) initFrontendPlugin() {
 
 	fp.handleModuleDefaults()
 
-	fp.Info.Logos.Small = evalRelativePluginUrlPath(fp.Info.Logos.Small, fp.BaseUrl)
-	fp.Info.Logos.Large = evalRelativePluginUrlPath(fp.Info.Logos.Large, fp.BaseUrl)
+	fp.Info.Logos.Small = getPluginLogoUrl(fp.Info.Logos.Small, fp.BaseUrl)
+	fp.Info.Logos.Large = getPluginLogoUrl(fp.Info.Logos.Large, fp.BaseUrl)
 
 	for i := 0; i < len(fp.Info.Screenshots); i++ {
 		fp.Info.Screenshots[i].Path = evalRelativePluginUrlPath(fp.Info.Screenshots[i].Path, fp.BaseUrl)
 	}
 }
 
+func getPluginLogoUrl(path, baseUrl string) string {
+	if path == "" {
+		return "public/img/plugin-default-logo_dark.svg"
+	}
+
+	return evalRelativePluginUrlPath(path, baseUrl)
+}
+
 func (fp *FrontendPluginBase) setPathsBasedOnApp(app *AppPlugin) {
 	appSubPath := strings.Replace(fp.PluginDir, app.StaticRootAbs, "", 1)
 	fp.IncludedInAppId = app.Id

public/app/features/plugins/partials/plugin_list.html

@@ -26,37 +26,26 @@
 		</div>
 	</div>
 
-	<table class="filter-table">
-		<thead>
-			<tr>
-				<th><strong>Name</strong></th>
-				<th><strong>Type</strong></th>
-				<th style="width: 60px;"></th>
-				<th style="width: 80px;"></th>
-			</tr>
-		</thead>
-		<tbody>
-			<tr ng-repeat="plugin in ctrl.plugins">
-				<td>
-					<a href="plugins/{{plugin.id}}/edit">
-						{{plugin.name}}
-					</a>
-				</td>
-				<td>
-					{{plugin.type}}
-				</td>
-				<td>
-					<span class="label label-secondary" ng-if="plugin.enabled">Enabled</span>
-					<span class="label label-secondary" ng-if="plugin.pinned">Pinned</span>
-				</td>
-				<td class="text-right">
-					<a href="plugins/{{plugin.id}}/edit" class="btn btn-inverse btn-small">
-						<i class="fa fa-edit"></i>
-						Edit
-					</a>
-				</td>
-			</tr>
-		</tbody>
-	</table>
-</div>
+	<section class="card-section">
+		<ol class="card-list">
+			<li class="card-item-wrapper" ng-repeat="plugin in ctrl.plugins">
+				<a class="card-item" href="plugins/{{plugin.id}}/edit">
+					<div class="card-item-header">
+						<i class="icon-gf icon-gf-{{plugin.type}}"></i>
+						{{plugin.type}}
+					</div>
+					<div class="card-item-body">
+						<figure class="card-item-figure">
+							<img src="{{plugin.info.logos.small}}">
+						</figure>
+						<div class="card-item-details">
+							<div class="card-item-name" href="plugins/{{plugin.id}}/edit">{{plugin.name}}</div>
+							<div class="card-item-sub-name">By {{plugin.info.author.name}}</div>
+						</div>
+					</div>
+				</a>
+			</li>
+		</ol>
+	</section>
+
 </div>

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

@@ -4,5 +4,16 @@
   "id": "cloudwatch",
 
   "metrics": true,
-  "annotations": true
+  "annotations": true,
+
+  "info": {
+    "author": {
+      "name": "Grafana Project",
+      "url": "http://grafana.org"
+    },
+    "logos": {
+      "small": "img/amazon-web-services.png",
+      "large": "img/amazon-web-services.png"
+    }
+  }
 }

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

@@ -6,7 +6,7 @@
   "info": {
     "description": "Elasticsearch Data Source for Grafana",
     "author": {
-      "name": "Grafana Core",
+      "name": "Grafana Project",
       "url": "http://grafana.org"
     },
     "keywords": ["elasticsearch"],

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

@@ -8,5 +8,12 @@
   ],
 
   "metrics": true,
-  "annotations": true
+  "annotations": true,
+
+  "info": {
+    "author": {
+      "name": "Grafana Project",
+      "url": "http://grafana.org"
+    }
+  }
 }

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

@@ -5,5 +5,16 @@
 
   "defaultMatchFormat": "regex values",
   "metrics": true,
-  "annotations": true
+  "annotations": true,
+
+  "info": {
+    "author": {
+      "name": "Grafana Project",
+      "url": "http://grafana.org"
+    },
+    "logos": {
+      "small": "img/influxdb_logo.svg",
+      "large": "img/influxdb_logo.svg"
+    }
+  }
 }

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

@@ -5,5 +5,16 @@
 
   "metrics": true,
   "defaultMatchFormat": "pipe",
-  "annotations": true
+  "annotations": true,
+
+  "info": {
+    "author": {
+      "name": "Grafana Project",
+      "url": "http://grafana.org"
+    },
+    "logos": {
+      "small": "img/opentsdb_logo.png",
+      "large": "img/opentsdb_logo.png"
+    }
+  }
 }

public/app/plugins/datasource/prometheus/img/prometheus_logo.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="115.333px" height="114px" viewBox="0 0 115.333 114" enable-background="new 0 0 115.333 114" xml:space="preserve">
+<g id="Layer_2">
+</g>
+<g>
+	<path fill="#FFFFFF" d="M56.667,0.667C25.372,0.667,0,26.036,0,57.332c0,31.295,25.372,56.666,56.667,56.666
+		s56.666-25.371,56.666-56.666C113.333,26.036,87.961,0.667,56.667,0.667z M56.667,106.722c-8.904,0-16.123-5.948-16.123-13.283
+		H72.79C72.79,100.773,65.571,106.722,56.667,106.722z M83.297,89.04H30.034v-9.658h53.264V89.04z M83.106,74.411h-52.92
+		c-0.176-0.203-0.356-0.403-0.526-0.609c-5.452-6.62-6.736-10.076-7.983-13.598c-0.021-0.116,6.611,1.355,11.314,2.413
+		c0,0,2.42,0.56,5.958,1.205c-3.397-3.982-5.414-9.044-5.414-14.218c0-11.359,8.712-21.285,5.569-29.308
+		c3.059,0.249,6.331,6.456,6.552,16.161c3.252-4.494,4.613-12.701,4.613-17.733c0-5.21,3.433-11.262,6.867-11.469
+		c-3.061,5.045,0.793,9.37,4.219,20.099c1.285,4.03,1.121,10.812,2.113,15.113C63.797,33.534,65.333,20.5,71,16
+		c-2.5,5.667,0.37,12.758,2.333,16.167c3.167,5.5,5.087,9.667,5.087,17.548c0,5.284-1.951,10.259-5.242,14.148
+		c3.742-0.702,6.326-1.335,6.326-1.335l12.152-2.371C91.657,60.156,89.891,67.418,83.106,74.411z"/>
+</g>
+</svg>

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

@@ -8,5 +8,16 @@
   ],
 
   "metrics": true,
-  "annotations": true
+  "annotations": true,
+
+  "info": {
+    "author": {
+      "name": "Grafana Project",
+      "url": "http://grafana.org"
+    },
+    "logos": {
+      "small": "img/prometheus_logo.svg",
+      "large": "img/prometheus_logo.svg"
+    }
+  }
 }

public/app/plugins/panel/dashlist/plugin.json

@@ -1,5 +1,12 @@
 {
   "type": "panel",
   "name": "Dashboard list",
-  "id": "dashlist"
+  "id": "dashlist",
+
+  "info": {
+    "author": {
+      "name": "Grafana Project",
+      "url": "http://grafana.org"
+    }
+  }
 }

public/app/plugins/panel/graph/plugin.json

@@ -1,5 +1,12 @@
 {
   "type": "panel",
   "name": "Graph",
-  "id": "graph"
+  "id": "graph",
+
+  "info": {
+    "author": {
+      "name": "Grafana Project",
+      "url": "http://grafana.org"
+    }
+  }
 }

public/app/plugins/panel/singlestat/plugin.json

@@ -1,5 +1,12 @@
 {
   "type": "panel",
   "name": "Singlestat",
-  "id": "singlestat"
+  "id": "singlestat",
+
+  "info": {
+    "author": {
+      "name": "Grafana Project",
+      "url": "http://grafana.org"
+    }
+  }
 }

public/app/plugins/panel/table/plugin.json

@@ -1,5 +1,12 @@
 {
   "type": "panel",
   "name": "Table",
-  "id": "table"
+  "id": "table",
+
+  "info": {
+    "author": {
+      "name": "Grafana Project",
+      "url": "http://grafana.org"
+    }
+  }
 }

public/app/plugins/panel/text/plugin.json

@@ -1,5 +1,12 @@
 {
   "type": "panel",
   "name": "Text",
-  "id": "text"
+  "id": "text",
+
+  "info": {
+    "author": {
+      "name": "Grafana Project",
+      "url": "http://grafana.org"
+    }
+  }
 }

public/img/plugin-default-logo_dark.svg

@@ -0,0 +1,26 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="150px" height="150px" viewBox="0 0 150 150" style="enable-background:new 0 0 150 150;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#040707;}
+</style>
+<g>
+	<polygon class="st0" points="44,0 150,106 150,99.9 50.1,0 	"/>
+	<polygon class="st0" points="0,10.6 139.4,150 140.8,150 0,9.2 	"/>
+	<polygon class="st0" points="26.6,0 150,123.4 150,119.6 30.4,0 	"/>
+	<polygon class="st0" points="0,30.4 119.6,150 123.4,150 0,26.6 	"/>
+	<polygon class="st0" points="9.2,0 150,140.8 150,139.4 10.6,0 	"/>
+	<polygon class="st0" points="0,109.5 40.5,150 53.7,150 0,96.3 	"/>
+	<polygon class="st0" points="0,129.3 20.7,150 36.3,150 0,113.7 	"/>
+	<polygon class="st0" points="0,89.8 60.2,150 71.1,150 0,78.9 	"/>
+	<polygon class="st0" points="0,70 80,150 88.6,150 0,61.4 	"/>
+	<polygon class="st0" points="0,50.2 99.8,150 106,150 0,44 	"/>
+	<polygon class="st0" points="0,150 18.9,150 0,131.1 	"/>
+	<polygon class="st0" points="150,0 131.1,0 150,18.9 	"/>
+	<polygon class="st0" points="129.3,0 113.6,0 150,36.4 150,20.7 	"/>
+	<polygon class="st0" points="78.8,0 150,71.2 150,60.3 89.7,0 	"/>
+	<polygon class="st0" points="61.4,0 150,88.6 150,80.1 69.9,0 	"/>
+	<polygon class="st0" points="96.2,0 150,53.8 150,40.5 109.5,0 	"/>
+</g>
+</svg>

public/img/plugin-default-logo_light.svg

@@ -0,0 +1,24 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 width="150px" height="150px" viewBox="0 0 150 150" style="enable-background:new 0 0 150 150;" xml:space="preserve">
+<style type="text/css">
+	.st0{fill:#666666;}
+</style>
+<polygon class="st0" points="44,0 150,106 150,99.9 50.1,0 "/>
+<polygon class="st0" points="0,10.6 139.4,150 140.8,150 0,9.2 "/>
+<polygon class="st0" points="26.6,0 150,123.4 150,119.6 30.4,0 "/>
+<polygon class="st0" points="0,30.4 119.6,150 123.4,150 0,26.6 "/>
+<polygon class="st0" points="9.2,0 150,140.8 150,139.4 10.6,0 "/>
+<polygon class="st0" points="0,109.5 40.5,150 53.7,150 0,96.3 "/>
+<polygon class="st0" points="0,129.3 20.7,150 36.3,150 0,113.7 "/>
+<polygon class="st0" points="0,89.8 60.2,150 71.1,150 0,78.9 "/>
+<polygon class="st0" points="0,70 80,150 88.6,150 0,61.4 "/>
+<polygon class="st0" points="0,50.2 99.8,150 106,150 0,44 "/>
+<polygon class="st0" points="0,150 18.9,150 0,131.1 "/>
+<polygon class="st0" points="150,0 131.1,0 150,18.9 "/>
+<polygon class="st0" points="129.3,0 113.6,0 150,36.4 150,20.7 "/>
+<polygon class="st0" points="78.8,0 150,71.2 150,60.3 89.7,0 "/>
+<polygon class="st0" points="61.4,0 150,88.6 150,80.1 69.9,0 "/>
+<polygon class="st0" points="96.2,0 150,53.8 150,40.5 109.5,0 "/>
+</svg>

public/sass/_grafana.scss

@@ -30,6 +30,7 @@
 @import "layout/page";
 
 // COMPONENTS
+@import "components/cards";
 @import "components/buttons";
 @import "components/navs";
 @import "components/tabs";

public/sass/_variables.dark.scss

@@ -67,9 +67,9 @@ $link-hover-color:        $white;
 
 // Typography
 // -------------------------
-$headings-color:          darken($white,11%);
-$abbr-border-color: 	  $gray-3 !default;
-$text-muted: 			  darken($link-color,30%);
+$headings-color:       darken($white,11%);
+$abbr-border-color: 	 $gray-3 !default;
+$text-muted: 			     darken($link-color,30%);
 
 $blockquote-small-color:  $gray-3 !default;
 $blockquote-border-color: $gray-4 !default;
@@ -252,3 +252,10 @@ $popover-help-color:      $text-color;
 
 // images
 $checkboxImageUrl: '../img/checkbox.png';
+
+// cards
+$card-background: linear-gradient(135deg, #2f2f2f, #262626);
+$card-background-hover: linear-gradient(135deg, #343434, #262626);
+$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .3);
+
+

public/sass/_variables.light.scss

@@ -279,3 +279,9 @@ $popover-help-color:      $gray-6;
 
 // images
 $checkboxImageUrl: '../img/checkbox_white.png';
+
+// cards
+$card-background: linear-gradient(135deg, $gray-5, $gray-6);
+$card-background-hover: linear-gradient(135deg, $gray-6, $gray-7);
+$card-shadow: -1px -1px 0 0 hsla(0, 0%, 100%, .1), 1px 1px 0 0 rgba(0, 0, 0, .1);
+

public/sass/_variables.scss

@@ -4,7 +4,7 @@
 //
 // Quickly modify global styling by enabling or disabling optional features.
 
-$enable-flex:               false !default;
+$enable-flex:               true !default;
 $enable-rounded:            true !default;
 $enable-shadows:            false !default;
 $enable-gradients:          false !default;

public/sass/base/_fonts.scss

@@ -176,3 +176,10 @@
     content: "\e903";
 }
 
+.icon-gf-app:before {
+  content: "\e902";
+}
+.icon-gf-datasource:before {
+  content: "\e607";
+}
+

public/sass/components/_cards.scss

@@ -0,0 +1,73 @@
+
+
+.card-section {
+  margin-bottom: $spacer*2;
+}
+
+.card-list {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  list-style-type: none;
+}
+
+.card-item-wrapper {
+  width: 100%;
+  padding: 0 1.5rem 1.5rem 0rem;
+}
+
+.card-item {
+  display: block;
+  height: 100%;
+  min-height: 12rem;
+  background: $card-background;
+  box-shadow: $card-shadow;
+  padding: 1rem;
+  border-radius: 4px;
+
+  &:hover {
+    background: $card-background-hover;
+  }
+}
+
+.card-item-figure {
+  margin: 0 $spacer $spacer 0;
+  img {
+    width: 6rem;
+  }
+}
+
+.card-item-body {
+  display: flex;
+}
+
+.card-item-details {
+}
+
+.card-item-header {
+  color: $text-color-weak;
+  margin-bottom: $spacer;
+}
+
+.card-item-name {
+  color: $headings-color;
+  font-size: $font-size-h3;
+}
+
+.card-item-sub-name {
+  color: $text-color-weak;
+}
+
+@include media-breakpoint-up(md) {
+  .card-item-wrapper {
+    width: 50%;
+  }
+}
+
+@include media-breakpoint-up(lg) {
+  .card-item-wrapper {
+    width: 33%;
+  }
+}
+
+