Skip to content

N
nexpie-grafana-theme
Commit 85e65e61 by Torkel Ödegaard
Options

More work on dashboards links

parent 15137422
Showing with 82 additions and 56 deletions
public/app/features/dashboard/dashboardCtrl.js
...@@ -41,6 +41,7 @@ function (angular, $, config) { ...@@ -41,6 +41,7 @@ function (angular, $, config) {
$rootScope.performance.panelsRendered = 0; $rootScope.performance.panelsRendered = 0;
var dashboard = dashboardSrv.create(data.dashboard, data.meta); var dashboard = dashboardSrv.create(data.dashboard, data.meta);
dashboardSrv.setCurrent(dashboard);
// init services // init services
timeSrv.init(dashboard); timeSrv.init(dashboard);
...@@ -63,7 +64,7 @@ function (angular, $, config) { ...@@ -63,7 +64,7 @@ function (angular, $, config) {
$scope.appEvent("dashboard-loaded", $scope.dashboard); $scope.appEvent("dashboard-loaded", $scope.dashboard);
}).catch(function(err) { }).catch(function(err) {
console.log('Failed to initialize dashboard template variables, error: ', err); console.log('Failed to initialize dashboard', err);
$scope.appEvent("alert-error", ['Dashboard init failed', 'Template variables could not be initialized: ' + err.message]); $scope.appEvent("alert-error", ['Dashboard init failed', 'Template variables could not be initialized: ' + err.message]);
}); });
}; };
......
public/app/features/dashboard/dashboardSrv.js
...@@ -306,8 +306,13 @@ function (angular, $, kbn, _, moment) { ...@@ -306,8 +306,13 @@ function (angular, $, kbn, _, moment) {
return { return {
create: function(dashboard, meta) { create: function(dashboard, meta) {
return new DashboardModel(dashboard, meta); return new DashboardModel(dashboard, meta);
} },
setCurrent: function(dashboard) {
this.currentDashboard = dashboard;
},
getCurrent: function() {
return this.currentDashboard;
},
}; };
}); });
}); });
public/app/features/dashlinks/editor.html
...@@ -2,43 +2,61 @@ ...@@ -2,43 +2,61 @@
<div class="tight-form-section"> <div class="tight-form-section">
<h5>Links and Dash Navigation</h5> <h5>Links and Dash Navigation</h5>
<div class="tight-form" ng-repeat="link in dashboard.links"> <div class="tight-form" ng-repeat-start="link in dashboard.links" style="margin-top: 10px;">
<ul class="tight-form-list"> <ul class="tight-form-list">
<li class="tight-form-item"> <li class="tight-form-item" style="width: 20px">
<i class="fa fa-remove pointer" ng-click="deleteLink(link)"></i> <i class="fa fa-fw fa-unlink"></i>
</li> </li>
<li class="tight-form-item">Type</li> <li class="tight-form-item">Type</li>
<li> <li>
<select class="input-medium tight-form-input" style="width: 101px;" ng-model="link.type" ng-options="f for f in ['dashboards','link']" ng-change="updated()"></select> <select class="input-medium tight-form-input" style="width: 151px;" ng-model="link.type" ng-options="f for f in ['dashboards','link']" ng-change="updated()"></select>
</li> </li>
<li class="tight-form-item" ng-show="link.type === 'dashboards'">With tag</li> <li class="tight-form-item" ng-show="link.type === 'dashboards'">With tag</li>
<li ng-show="link.type === 'dashboards'"> <li ng-show="link.type === 'dashboards'">
<input type="text" ng-model="link.tag" class="input-small tight-form-input" ng-model-onblur ng-change="updated()"> <input type="text" ng-model="link.tag" class="input-small tight-form-input" style="width: 151px" ng-model-onblur ng-change="updated()">
</li> </li>
<li class="tight-form-item" ng-show="link.type === 'link'" style="width: 69px">Url</li> <li class="tight-form-item" ng-show="link.type === 'link'" style="width: 51px">Url</li>
<li ng-show="link.type === 'link'"> <li ng-show="link.type === 'link'">
<input type="text" ng-model="link.url" class="input-xlarge tight-form-input" ng-model-onblur ng-change="updated()"> <input type="text" ng-model="link.url" class="input-xlarge tight-form-input" ng-model-onblur ng-change="updated()">
</li> </li>
<li class="tight-form-item" ng-show="link.type === 'link'">Title</li> <li class="tight-form-item">
<li ng-show="link.type === 'link'"> <i ng-click="moveLink($index,-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i>
<input type="text" ng-model="link.title" class="input-medium tight-form-input" ng-model-onblur ng-change="updated()"> <i ng-click="moveLink($index,1)" ng-hide="$last" class="pointer fa fa-arrow-down"></i>
</li>
<li class="tight-form-item" ng-show="link.type === 'link'">Tooltip</li>
<li ng-show="link.type === 'link'">
<input type="text" ng-model="link.tooltip" class="input-medium tight-form-input" placeholder="Open dashbord" ng-model-onblur ng-change="updated()">
</li> </li>
<li class="tight-form-item">
<li class="tight-form-item" ng-show="link.type === 'link'">Icon</li> <i class="fa fa-remove pointer" ng-click="deleteLink(link)"></i>
<li ng-show="link.type === 'link'">
<select class="input-medium tight-form-input" style="width: 101px;" ng-model="link.icon" ng-options="f for f in ['dashboard','external','help']" ng-change="updated()"></select>
</li> </li>
</ul> </ul>
<div class="clearfix"></div> <div class="clearfix"></div>
</div> </div>
<div ng-repeat-end>
<div class="tight-form" ng-if="link.type === 'link'">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 20px">
<i class="fa fa-fw fa-unlink invisible"></i>
</li>
<li class="tight-form-item" ng-show="link.type === 'link'" style="width: 31px">Title</li>
<li ng-show="link.type === 'link'">
<input type="text" ng-model="link.title" class="input-medium tight-form-input" ng-model-onblur ng-change="updated()">
</li>
<li class="tight-form-item" ng-show="link.type === 'link'" style="width: 52px">Tooltip</li>
<li ng-show="link.type === 'link'">
<input type="text" ng-model="link.tooltip" class="input-medium tight-form-input" placeholder="Open dashbord" ng-model-onblur ng-change="updated()">
</li>
<li class="tight-form-item" ng-show="link.type === 'link'">Icon</li>
<li ng-show="link.type === 'link'">
<select class="input-medium tight-form-input" style="width: 110px;" ng-model="link.icon" ng-options="k as k for (k, v) in iconMap" ng-change="updated()"></select>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
<!-- <div class="tight&#45;form"> --> <!-- <div class="tight&#45;form"> -->
<!-- <ul class="tight&#45;form&#45;list" role="menu"> --> <!-- <ul class="tight&#45;form&#45;list" role="menu"> -->
<!-- <li class="tight&#45;form&#45;item"> --> <!-- <li class="tight&#45;form&#45;item"> -->
......
public/app/features/dashlinks/module.js
...@@ -7,6 +7,16 @@ function (angular, _) { ...@@ -7,6 +7,16 @@ function (angular, _) {
var module = angular.module('grafana.directives'); var module = angular.module('grafana.directives');
var iconMap = {
"external link": "fa-external-link",
"dashboard": "fa-th-large",
"question": "fa-question",
"info": "fa-info",
"bolt": "fa-bolt",
"doc": "fa-file-text-o",
"cloud": "fa-cloud",
};
module.directive('dashLinksEditor', function() { module.directive('dashLinksEditor', function() {
return { return {
scope: { scope: {
...@@ -38,7 +48,6 @@ function (angular, _) { ...@@ -38,7 +48,6 @@ function (angular, _) {
link: "=" link: "="
}, },
restrict: 'E', restrict: 'E',
controller: 'DashLinkCtrl',
templateUrl: 'app/features/dashlinks/module.html', templateUrl: 'app/features/dashlinks/module.html',
link: function(scope, elem) { link: function(scope, elem) {
var anchor = elem.find('a'); var anchor = elem.find('a');
...@@ -52,7 +61,7 @@ function (angular, _) { ...@@ -52,7 +61,7 @@ function (angular, _) {
// tooltip // tooltip
elem.find('a').tooltip({ title: scope.link.tooltip, html: true, container: 'body' }); elem.find('a').tooltip({ title: scope.link.tooltip, html: true, container: 'body' });
icon.attr('class', scope.link.icon); icon.attr('class', 'fa fa-fw ' + scope.link.icon);
update(); update();
scope.$on('refresh', update); scope.$on('refresh', update);
...@@ -60,23 +69,33 @@ function (angular, _) { ...@@ -60,23 +69,33 @@ function (angular, _) {
}; };
}); });
module.controller("DashLinksContainerCtrl", function($scope, $rootScope, $q, backendSrv) { module.controller("DashLinksContainerCtrl", function($scope, $rootScope, $q, backendSrv, dashboardSrv) {
var currentDashId = dashboardSrv.getCurrent().id;
function buildLinks(linkDef) { function buildLinks(linkDef) {
if (linkDef.type === 'dashboards') { if (linkDef.type === 'dashboards') {
if (!linkDef.tag) {
console.log('Dashboard link missing tag');
return $q.when([]);
}
return backendSrv.search({tag: linkDef.tag}).then(function(results) { return backendSrv.search({tag: linkDef.tag}).then(function(results) {
return _.map(results.dashboards, function(dash) { return _.reduce(results.dashboards, function(memo, dash) {
return { // do not add current dashboard
title: dash.title, if (dash.id !== currentDashId) {
url: 'dashboard/db/'+ dash.slug, memo.push({ title: dash.title, url: 'dashboard/db/'+ dash.slug, icon: 'fa fa-th-large' });
icon: 'fa fa-th-large' }
}; return memo;
}); }, []);
}); });
} }
if (linkDef.type === 'link') { if (linkDef.type === 'link') {
return $q.when([{ url: linkDef.url, title: linkDef.title, icon: 'fa fa-external-link', }]); return $q.when([{
url: linkDef.url,
title: linkDef.title,
icon: iconMap[linkDef.icon]
}]);
} }
return $q.when([]); return $q.when([]);
...@@ -94,38 +113,21 @@ function (angular, _) { ...@@ -94,38 +113,21 @@ function (angular, _) {
$rootScope.onAppEvent('dash-links-updated', updateDashLinks); $rootScope.onAppEvent('dash-links-updated', updateDashLinks);
}); });
module.controller("DashLinkCtrl", function($scope) { module.controller('DashLinkEditorCtrl', function($scope, $rootScope) {
if ($scope.link.type === 'dashboards') {
$scope.searchHits = [];
}
});
module.controller('DashLinkEditorCtrl', function($scope, backendSrv, $rootScope) {
$scope.iconMap = iconMap;
$scope.dashboard.links = $scope.dashboard.links || []; $scope.dashboard.links = $scope.dashboard.links || [];
$scope.addLink = function() { $scope.addLink = function() {
$scope.dashboard.links.push({ $scope.dashboard.links.push({ type: 'dashboards', icon: 'external link' });
type: 'dashboard',
name: 'Related dashboard'
});
}; };
$scope.updated = function() { $scope.moveLink = function(index, dir) {
$rootScope.appEvent('dash-links-updated'); _.move($scope.dashboard.links, index, index+dir);
$scope.updated();
}; };
$scope.searchDashboards = function(queryStr, callback) { $scope.updated = function() {
var query = {query: queryStr}; $rootScope.appEvent('dash-links-updated');
backendSrv.search(query).then(function(result) {
var dashboards = _.map(result.dashboards, function(dash) {
return dash.title;
});
callback(dashboards);
});
}; };
$scope.deleteLink = function(link) { $scope.deleteLink = function(link) {
......
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