feat(plugins): added plugin logo to navbar on plugin page, #4452

public/app/core/components/navbar/navbar.html

@@ -9,7 +9,8 @@
 	</a>
 
 	<a href="{{ctrl.titleUrl}}" class="navbar-page-btn" ng-show="ctrl.title">
-		<i class="{{ctrl.icon}}"></i>
+		<i class="{{ctrl.icon}}" ng-show="ctrl.icon"></i>
+		<img src="{{ctrl.iconUrl}}" ng-show="ctrl.iconUrl"></i>
 		{{ctrl.title}}
 	</a>
 

public/app/core/components/navbar/navbar.ts

@@ -22,6 +22,7 @@ export function navbarDirective() {
     scope: {
       title: "@",
       titleUrl: "@",
+      iconUrl: "@",
     },
     link: function(scope, elem, attrs, ctrl) {
       ctrl.icon = attrs.icon;

public/app/features/panel/metrics_panel_ctrl.ts

@@ -62,7 +62,13 @@ class MetricsPanelCtrl extends PanelCtrl {
     // if we have snapshot data use that
     if (this.panel.snapshotData) {
       this.updateTimeRange();
-      this.events.emit('data-snapshot-load', this.panel.snapshotData);
+      var data = this.panel.snapshotData;
+      // backward compatability
+      if (!_.isArray(data)) {
+        data = data;
+      }
+
+      this.events.emit('data-snapshot-load', data);
       return;
     }
 
@@ -191,7 +197,7 @@ class MetricsPanelCtrl extends PanelCtrl {
     }
 
     if (this.dashboard.snapshot) {
-      this.panel.snapshotData = result;
+      this.panel.snapshotData = result.data;
     }
 
     return this.events.emit('data-received', result.data);

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

-<navbar icon="icon-gf icon-gf-apps" title="{{ctrl.appModel.name}}" title-url="{{ctrl.appModel.defaultNavUrl}}">
+<navbar icon-url="{{ctrl.appLogoUrl}}" title="{{ctrl.appModel.name}}" title-url="{{ctrl.appModel.defaultNavUrl}}">
 </navbar>
 
 <div class="page-container" >

public/app/features/plugins/plugin_page_ctrl.ts

@@ -3,18 +3,32 @@
 import angular from 'angular';
 import _ from 'lodash';
 
+var pluginInfoCache = {};
+
 export class AppPageCtrl {
   page: any;
   pluginId: any;
   appModel: any;
+  appLogoUrl: any;
 
   /** @ngInject */
   constructor(private backendSrv, private $routeParams: any, private $rootScope) {
     this.pluginId = $routeParams.pluginId;
 
+    if (pluginInfoCache[this.pluginId]) {
+      this.appModel = pluginInfoCache[this.pluginId];
+    } else {
+      this.loadPluginInfo();
+    }
+  }
+
+  loadPluginInfo() {
     this.backendSrv.get(`/api/plugins/${this.pluginId}/settings`).then(app => {
       this.appModel = app;
       this.page = _.findWhere(app.includes, {slug: this.$routeParams.slug});
+      this.appLogoUrl = app.info.logos.small;
+
+      pluginInfoCache[this.pluginId] = app;
 
       if (!this.page) {
         this.$rootScope.appEvent('alert-error', ['App Page Not Found', '']);

public/app/plugins/datasource/graphite/datasource.ts

@@ -27,7 +27,7 @@ export function GraphiteDatasource(instanceSettings, $q, backendSrv, templateSrv
 
     var params = this.buildGraphiteParams(graphOptions, options.scopedVars);
     if (params.length === 0) {
-      return $q.when([]);
+      return $q.when({data: []});
     }
 
     if (options.format === 'png') {

public/app/plugins/datasource/graphite/partials/query.options.html

 <section class="grafana-metric-options gf-form-group">
 	<div class="gf-form-inline">
-		<div class="gf-form">
-			<span class="gf-form-label">
-				<i class="fa fa-wrench"></i>
+		<div class="gf-form max-width-15">
+			<span class="gf-form-label width-8">
+				Cache timeout
 			</span>
-			<span class="gf-form-label width-8">Cache timeout</span>
 			<input type="text"
 				class="gf-form-input"
 				ng-model="ctrl.panelCtrl.panel.cacheTimeout"
@@ -14,8 +13,8 @@
 				placeholder="60">
 			</input>
 		</div>
-		<div class="gf-form">
-			<span class="gf-form-label width-10">Max data points</span>
+		<div class="gf-form max-width-15">
+			<span class="gf-form-label">Max data points</span>
 			<input type="text"
 				class="gf-form-input"
 				ng-model="ctrl.panelCtrl.panel.maxDataPoints"
@@ -32,25 +31,25 @@
 			<span class="gf-form-label width-12">
 				<i class="fa fa-info-circle"></i>
 				<a ng-click="ctrl.panelCtrl.toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
-					shorter legend names
+					Shorter legend names
 				</a>
 			</span>
 			<span class="gf-form-label width-12">
 				<i class="fa fa-info-circle"></i>
 				<a ng-click="ctrl.panelCtrl.toggleEditorHelp(2);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
-					series as parameters
+					Series as parameters
 				</a>
 			</span>
 			<span class="gf-form-label width-7">
 				<i class="fa fa-info-circle"></i>
 				<a ng-click="ctrl.panelCtrl.toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
-					stacking
+					Stacking
 				</a>
 			</span>
 			<span class="gf-form-label width-8">
 				<i class="fa fa-info-circle"></i>
 				<a ng-click="ctrl.panelCtrl.toggleEditorHelp(4)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
-					templating
+					Templating
 				</a>
 			</span>
 			<span class="gf-form-label width-10">

public/sass/components/_navbar.scss

@@ -131,6 +131,11 @@
     font-size: 20px;
     line-height: 8px;
   }
+
+  > img {
+    max-width: 27px;
+    max-height: 27px;
+  }
 }
 
 .sidemenu-pinned {