Skip to content

N
nexpie-grafana-theme
Commit 15137422 by Torkel Ödegaard
Options

More work on dashboards links

parent 1f48c073
Showing with 145 additions and 107 deletions
public/app/features/dashlinks/editor.html
......@@ -10,27 +10,32 @@
<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 ['dashboard','absolute']" ng-change="updated()"></select>
<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>
</li>
<li class="tight-form-item" ng-show="link.type === 'dashboard'">Dashboard</li>
<li ng-show="link.type === 'dashboard'">
<input type="text" ng-model="link.dashboard" bs-typeahead="searchDashboards" class="input-xlarge tight-form-input" ng-model-onblur ng-change="updated()">
<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()">
</li>
<li class="tight-form-item" ng-show="link.type === 'absolute'" style="width: 69px">Url</li>
<li ng-show="link.type === 'absolute'">
<li class="tight-form-item" ng-show="link.type === 'link'" style="width: 69px">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">Title</li>
<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>
<li class="tight-form-item">Tooltip</li>
<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>
</ul>
<div class="clearfix"></div>
</div>
......
public/app/features/dashlinks/module.html
<a class="pointer dash-nav-link" href="/asd" data-placement="bottom">
<i class="fa fa-th-large"></i>
<span></span>
</a>
<div class="submenu-item">
<a class="pointer dash-nav-link" href="/asd" data-placement="bottom">
<i class="fa fa-th-large"></i>
<span></span>
</a>
</div>
public/app/features/dashlinks/module.js
......@@ -5,100 +5,132 @@ define([
function (angular, _) {
'use strict';
angular
.module('grafana.directives')
.directive('dashLinksEditor', function() {
return {
scope: {
dashboard: "="
},
restrict: 'E',
controller: 'DashLinkEditorCtrl',
templateUrl: 'app/features/dashlinks/editor.html',
link: function() {
}
};
}).directive('dashLink', function(linkSrv, $rootScope) {
return {
scope: {
link: "="
},
restrict: 'E',
controller: 'DashLinkCtrl',
templateUrl: 'app/features/dashlinks/module.html',
link: function(scope, elem) {
var linkInfo;
var anchor = elem.find('a');
var icon = elem.find('i');
var span = elem.find('span');
function update() {
linkInfo = linkSrv.getPanelLinkAnchorInfo(scope.link);
span.text(linkInfo.title);
anchor.attr("href", linkInfo.href);
if (scope.link.type === 'absolute') {
icon.attr('class', 'fa fw fa-external-link');
anchor.attr('target', '_blank');
} else {
icon.attr('class', 'fa fw fa-th-large');
anchor.attr('target', '');
}
}
// tooltip
elem.find('a').tooltip({
title: function () {
if (scope.link.tooltip) {
return scope.link.tooltip;
}
else if (scope.link.type === 'dashboard') {
return 'Open dashboard';
} else if (scope.link.type === 'absolute') {
return 'Open external page';
}
},
html: true,
container: 'body', // Grafana change
});
var module = angular.module('grafana.directives');
module.directive('dashLinksEditor', function() {
return {
scope: {
dashboard: "="
},
restrict: 'E',
controller: 'DashLinkEditorCtrl',
templateUrl: 'app/features/dashlinks/editor.html',
link: function() {
}
};
});
update();
scope.$on('refresh', update);
$rootScope.onAppEvent('dash-links-updated', update);
module.directive('dashLinksContainer', function() {
return {
scope: {
links: "="
},
restrict: 'E',
controller: 'DashLinksContainerCtrl',
template: '<dash-link ng-repeat="link in generatedLinks" link="link"></dash-link>',
link: function() { }
};
});
module.directive('dashLink', function(templateSrv) {
return {
scope: {
link: "="
},
restrict: 'E',
controller: 'DashLinkCtrl',
templateUrl: 'app/features/dashlinks/module.html',
link: function(scope, elem) {
var anchor = elem.find('a');
var icon = elem.find('i');
var span = elem.find('span');
function update() {
span.text(templateSrv.replace(scope.link.title));
anchor.attr("href", templateSrv.replace(scope.link.url));
}
};
})
.controller("DashLinkCtrl", function() {
})
.controller('DashLinkEditorCtrl', function($scope, backendSrv, $rootScope) {
$scope.dashboard.links = $scope.dashboard.links || [];
$scope.addLink = function() {
$scope.dashboard.links.push({
type: 'dashboard',
name: 'Related dashboard'
});
};
$scope.updated = function() {
$rootScope.appEvent('dash-links-updated');
};
// tooltip
elem.find('a').tooltip({ title: scope.link.tooltip, html: true, container: 'body' });
icon.attr('class', scope.link.icon);
$scope.searchDashboards = function(queryStr, callback) {
var query = {query: queryStr};
update();
scope.$on('refresh', update);
}
};
});
backendSrv.search(query).then(function(result) {
var dashboards = _.map(result.dashboards, function(dash) {
return dash.title;
module.controller("DashLinksContainerCtrl", function($scope, $rootScope, $q, backendSrv) {
function buildLinks(linkDef) {
if (linkDef.type === 'dashboards') {
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'
};
});
});
}
if (linkDef.type === 'link') {
return $q.when([{ url: linkDef.url, title: linkDef.title, icon: 'fa fa-external-link', }]);
}
return $q.when([]);
}
function updateDashLinks() {
var promises = _.map($scope.links, buildLinks);
callback(dashboards);
$q.all(promises).then(function(results) {
$scope.generatedLinks = _.flatten(results);
});
}
updateDashLinks();
$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) {
$scope.dashboard.links = $scope.dashboard.links || [];
$scope.addLink = function() {
$scope.dashboard.links.push({
type: 'dashboard',
name: 'Related dashboard'
});
};
$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;
});
};
$scope.deleteLink = function(link) {
$scope.dashboard.links = _.without($scope.dashboard.links, link);
};
callback(dashboards);
});
};
$scope.deleteLink = function(link) {
$scope.dashboard.links = _.without($scope.dashboard.links, link);
};
});
});
});
public/app/partials/submenu.html
......@@ -19,7 +19,7 @@
</ul>
<ul class="tight-form-list pull-right" ng-if="dashboard.links.length > 0">
<dash-link ng-repeat="link in dashboard.links" link="link" class="submenu-item"></dash-link>
<dash-links-container links="dashboard.links"></dash-links-container>
</ul>
<div class="clearfix"></div>
......
public/css/less/navbar.less
......@@ -64,11 +64,10 @@
border-radius: 3px;
font-size: 1.4em;
color: #a2a2a2;
border: 1px solid @grafanaTargetFuncHightlight;
border: @grafanaTriggerBorder;
a {
background-color: @btnInverseBackgroundHighlight;
background-color: @grafanaTargetFuncBackground;
display: inline-block;
//background: @btnInverseBackground;
padding: 5px 15px 5px 10px;
border-radius: 3px;
color: #a2a2a2;
......
public/css/less/submenu.less
......@@ -5,7 +5,7 @@
}
.submenu-controls {
margin: 10px 10px 8px 14px;
margin: 15px 10px 8px 14px;
font-size: 16px;
}
......
public/css/less/variables.dark.less
......@@ -213,8 +213,8 @@
@navbarCollapseDesktopWidth: @navbarCollapseWidth + 1;
@navbarHeight: 52px;
@navbarBackgroundHighlight: @bodyBackground;
@navbarBackground: @bodyBackground;
@navbarBackgroundHighlight: @grayDark;
@navbarBackground: @grayDark;
@navbarBorder: none;
@navbarText: @grayLight;
......
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