public/grafana
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

More work on dashboards links

Browse Source
This commit is contained in:
Torkel Ödegaard
2015-05-07 09:35:39 +02:00
parent 15137422a6
commit 85e65e61d3
4 changed files with 82 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/app/features/dashboard/dashboardCtrl.js
+2 -1
View File
@@ -41,6 +41,7 @@ function (angular, $, config) {
$rootScope.performance.panelsRendered = 0;
var dashboard = dashboardSrv.create(data.dashboard, data.meta);
dashboardSrv.setCurrent(dashboard);
// init services
timeSrv.init(dashboard);
@@ -63,7 +64,7 @@ function (angular, $, config) {
$scope.appEvent("dashboard-loaded", $scope.dashboard);
}).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]);
});
};
public/app/features/dashboard/dashboardSrv.js
+7 -2
View File
@@ -306,8 +306,13 @@ function (angular, $, kbn, _, moment) {
return {
create: function(dashboard, meta) {
return new DashboardModel(dashboard, meta);
}
},
setCurrent: function(dashboard) {
this.currentDashboard = dashboard;
},
getCurrent: function() {
return this.currentDashboard;
},
};
});
});
public/app/features/dashlinks/editor.html
+35 -17
View File
@@ -2,43 +2,61 @@
<div class="tight-form-section">
<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">
<li class="tight-form-item">
<i class="fa fa-remove pointer" ng-click="deleteLink(link)"></i>
<li class="tight-form-item" style="width: 20px">
<i class="fa fa-fw fa-unlink"></i>
</li>
<li class="tight-form-item">Type</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 class="tight-form-item" ng-show="link.type === 'dashboards'">With tag</li>
<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 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'">
<input type="text" ng-model="link.url" class="input-xlarge tight-form-input" ng-model-onblur ng-change="updated()">
</li>
<li class="tight-form-item" ng-show="link.type === 'link'">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 class="tight-form-item">
<i ng-click="moveLink($index,-1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i>
<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 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: 101px;" ng-model="link.icon" ng-options="f for f in ['dashboard','external','help']" ng-change="updated()"></select>
<li class="tight-form-item">
<i class="fa fa-remove pointer" ng-click="deleteLink(link)"></i>
</li>
</ul>
<div class="clearfix"></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"> -->
<!-- <ul class="tight&#45;form&#45;list" role="menu"> -->
<!-- <li class="tight&#45;form&#45;item"> -->
public/app/features/dashlinks/module.js
+38 -36
View File
@@ -7,6 +7,16 @@ function (angular, _) {
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() {
return {
scope: {
@@ -38,7 +48,6 @@ function (angular, _) {
link: "="
},
restrict: 'E',
controller: 'DashLinkCtrl',
templateUrl: 'app/features/dashlinks/module.html',
link: function(scope, elem) {
var anchor = elem.find('a');
@@ -52,7 +61,7 @@ function (angular, _) {
// tooltip
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();
scope.$on('refresh', update);
@@ -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) {
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 _.map(results.dashboards, function(dash) {
return {
title: dash.title,
url: 'dashboard/db/'+ dash.slug,
icon: 'fa fa-th-large'
};
});
return _.reduce(results.dashboards, function(memo, dash) {
// do not add current dashboard
if (dash.id !== currentDashId) {
memo.push({ title: dash.title, url: 'dashboard/db/'+ dash.slug, icon: 'fa fa-th-large' });
}
return memo;
}, []);
});
}
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([]);
@@ -94,40 +113,23 @@ function (angular, _) {
$rootScope.onAppEvent('dash-links-updated', updateDashLinks);
});
module.controller("DashLinkCtrl", function($scope) {
if ($scope.link.type === 'dashboards') {
$scope.searchHits = [];
}
});
module.controller('DashLinkEditorCtrl', function($scope, backendSrv, $rootScope) {
module.controller('DashLinkEditorCtrl', function($scope, $rootScope) {
$scope.iconMap = iconMap;
$scope.dashboard.links = $scope.dashboard.links || [];
$scope.addLink = function() {
$scope.dashboard.links.push({
type: 'dashboard',
name: 'Related dashboard'
});
$scope.dashboard.links.push({ type: 'dashboards', icon: 'external link' });
};
$scope.moveLink = function(index, dir) {
_.move($scope.dashboard.links, index, index+dir);
$scope.updated();
};
$scope.updated = function() {
$rootScope.appEvent('dash-links-updated');
};
$scope.searchDashboards = function(queryStr, callback) {
var query = {query: queryStr};
backendSrv.search(query).then(function(result) {
var dashboards = _.map(result.dashboards, function(dash) {
return dash.title;
});
callback(dashboards);
});
};
$scope.deleteLink = function(link) {
$scope.dashboard.links = _.without($scope.dashboard.links, link);
};