Skip to content

N
nexpie-grafana-theme
Commit 5dfac9a7 by Torkel Ödegaard
Options

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

parent b06d8093
Showing with 41 additions and 15 deletions
public/app/core/components/navbar/navbar.html
...@@ -9,7 +9,8 @@ ...@@ -9,7 +9,8 @@
</a> </a>
<a href="{{ctrl.titleUrl}}" class="navbar-page-btn" ng-show="ctrl.title"> <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}} {{ctrl.title}}
</a> </a>
......
public/app/core/components/navbar/navbar.ts
...@@ -22,6 +22,7 @@ export function navbarDirective() { ...@@ -22,6 +22,7 @@ export function navbarDirective() {
scope: { scope: {
title: "@", title: "@",
titleUrl: "@", titleUrl: "@",
iconUrl: "@",
}, },
link: function(scope, elem, attrs, ctrl) { link: function(scope, elem, attrs, ctrl) {
ctrl.icon = attrs.icon; ctrl.icon = attrs.icon;
......
public/app/features/panel/metrics_panel_ctrl.ts
...@@ -62,7 +62,13 @@ class MetricsPanelCtrl extends PanelCtrl { ...@@ -62,7 +62,13 @@ class MetricsPanelCtrl extends PanelCtrl {
// if we have snapshot data use that // if we have snapshot data use that
if (this.panel.snapshotData) { if (this.panel.snapshotData) {
this.updateTimeRange(); 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; return;
} }
...@@ -191,7 +197,7 @@ class MetricsPanelCtrl extends PanelCtrl { ...@@ -191,7 +197,7 @@ class MetricsPanelCtrl extends PanelCtrl {
} }
if (this.dashboard.snapshot) { if (this.dashboard.snapshot) {
this.panel.snapshotData = result; this.panel.snapshotData = result.data;
} }
return this.events.emit('data-received', 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> </navbar>
<div class="page-container" > <div class="page-container" >
......
public/app/features/plugins/plugin_page_ctrl.ts
...@@ -3,18 +3,32 @@ ...@@ -3,18 +3,32 @@
import angular from 'angular'; import angular from 'angular';
import _ from 'lodash'; import _ from 'lodash';
var pluginInfoCache = {};
export class AppPageCtrl { export class AppPageCtrl {
page: any; page: any;
pluginId: any; pluginId: any;
appModel: any; appModel: any;
appLogoUrl: any;
/** @ngInject */ /** @ngInject */
constructor(private backendSrv, private $routeParams: any, private $rootScope) { constructor(private backendSrv, private $routeParams: any, private $rootScope) {
this.pluginId = $routeParams.pluginId; 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.backendSrv.get(`/api/plugins/${this.pluginId}/settings`).then(app => {
this.appModel = app; this.appModel = app;
this.page = _.findWhere(app.includes, {slug: this.$routeParams.slug}); this.page = _.findWhere(app.includes, {slug: this.$routeParams.slug});
this.appLogoUrl = app.info.logos.small;
pluginInfoCache[this.pluginId] = app;
if (!this.page) { if (!this.page) {
this.$rootScope.appEvent('alert-error', ['App Page Not Found', '']); 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 ...@@ -27,7 +27,7 @@ export function GraphiteDatasource(instanceSettings, $q, backendSrv, templateSrv
var params = this.buildGraphiteParams(graphOptions, options.scopedVars); var params = this.buildGraphiteParams(graphOptions, options.scopedVars);
if (params.length === 0) { if (params.length === 0) {
return $q.when([]); return $q.when({data: []});
} }
if (options.format === 'png') { if (options.format === 'png') {
......
public/app/plugins/datasource/graphite/partials/query.options.html
<section class="grafana-metric-options gf-form-group"> <section class="grafana-metric-options gf-form-group">
<div class="gf-form-inline"> <div class="gf-form-inline">
<div class="gf-form"> <div class="gf-form max-width-15">
<span class="gf-form-label"> <span class="gf-form-label width-8">
<i class="fa fa-wrench"></i> Cache timeout
</span> </span>
<span class="gf-form-label width-8">Cache timeout</span>
<input type="text" <input type="text"
class="gf-form-input" class="gf-form-input"
ng-model="ctrl.panelCtrl.panel.cacheTimeout" ng-model="ctrl.panelCtrl.panel.cacheTimeout"
...@@ -14,8 +13,8 @@ ...@@ -14,8 +13,8 @@
placeholder="60"> placeholder="60">
</input> </input>
</div> </div>
<div class="gf-form"> <div class="gf-form max-width-15">
<span class="gf-form-label width-10">Max data points</span> <span class="gf-form-label">Max data points</span>
<input type="text" <input type="text"
class="gf-form-input" class="gf-form-input"
ng-model="ctrl.panelCtrl.panel.maxDataPoints" ng-model="ctrl.panelCtrl.panel.maxDataPoints"
...@@ -32,25 +31,25 @@ ...@@ -32,25 +31,25 @@
<span class="gf-form-label width-12"> <span class="gf-form-label width-12">
<i class="fa fa-info-circle"></i> <i class="fa fa-info-circle"></i>
<a ng-click="ctrl.panelCtrl.toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom"> <a ng-click="ctrl.panelCtrl.toggleEditorHelp(1);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
shorter legend names Shorter legend names
</a> </a>
</span> </span>
<span class="gf-form-label width-12"> <span class="gf-form-label width-12">
<i class="fa fa-info-circle"></i> <i class="fa fa-info-circle"></i>
<a ng-click="ctrl.panelCtrl.toggleEditorHelp(2);" bs-tooltip="'click to show helpful info'" data-placement="bottom"> <a ng-click="ctrl.panelCtrl.toggleEditorHelp(2);" bs-tooltip="'click to show helpful info'" data-placement="bottom">
series as parameters Series as parameters
</a> </a>
</span> </span>
<span class="gf-form-label width-7"> <span class="gf-form-label width-7">
<i class="fa fa-info-circle"></i> <i class="fa fa-info-circle"></i>
<a ng-click="ctrl.panelCtrl.toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom"> <a ng-click="ctrl.panelCtrl.toggleEditorHelp(3)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
stacking Stacking
</a> </a>
</span> </span>
<span class="gf-form-label width-8"> <span class="gf-form-label width-8">
<i class="fa fa-info-circle"></i> <i class="fa fa-info-circle"></i>
<a ng-click="ctrl.panelCtrl.toggleEditorHelp(4)" bs-tooltip="'click to show helpful info'" data-placement="bottom"> <a ng-click="ctrl.panelCtrl.toggleEditorHelp(4)" bs-tooltip="'click to show helpful info'" data-placement="bottom">
templating Templating
</a> </a>
</span> </span>
<span class="gf-form-label width-10"> <span class="gf-form-label width-10">
......
public/sass/components/_navbar.scss
...@@ -131,6 +131,11 @@ ...@@ -131,6 +131,11 @@
font-size: 20px; font-size: 20px;
line-height: 8px; line-height: 8px;
} }
> img {
max-width: 27px;
max-height: 27px;
}
} }
.sidemenu-pinned { .sidemenu-pinned {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment