Skip to content

N
nexpie-grafana-theme
Commit f28a4345 by Patrick O'Carroll
Options

updated dashlink editor, now has list

parent 9b9ac452
Showing with 135 additions and 101 deletions
public/app/features/dashlinks/editor.html
......@@ -4,15 +4,13 @@
<span ng-show="ctrl.mode === 'edit'">&gt; Edit</span>
</h3>
<div ng-if="ctrl.mode == 'list'">
<div ng-if="ctrl.dashboard.links.length === 0">
<div class="empty-list-cta">
<div class="empty-list-cta__title">
There are no dashboard links added yet
</div>
<a ng-click="ctrl.addLink()" class="empty-list-cta__button btn btn-xlarge btn-success">
<a ng-click="ctrl.setupNew()" class="empty-list-cta__button btn btn-xlarge btn-success">
<i class="gicon gicon-dashboard-new"></i>
Add Dashboard Link
</a>
......@@ -33,22 +31,34 @@
<div ng-if="ctrl.dashboard.links.length > 0">
<div class="page-action-bar">
<div class="page-action-bar__spacer"></div>
<a type="button" class="btn btn-success" ng-click="ctrl.addLink()">
<a type="button" class="btn btn-success" ng-click="ctrl.setupNew()">
<i class="fa fa-plus"></i> New</a>
</div>
<table class="filter-table filter-table--hover">
<thead>
<tr>
<th>Type</th>
<th>Info</th>
<th colspan="3"></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="link in ctrl.dashboard.links">
<td style="width:90%" class="pointer" ng-click="ctrl.editLinkMode(link)">
<td class="pointer" ng-click="ctrl.editLink(link)">
<i class="fa fa-fw fa-external-link"></i>
{{link.type}}
</td>
<td>
<div ng-if="link.title">
{{link.title}}
</div>
<div ng-if="!link.title && link.url">
{{link.url}}
</div>
<span ng-if="!link.title && link.tags" ng-repeat="tag in link.tags" tag-color-from-name="tag" class="label label-tag" style="margin-right: 6px">
{{tag}}
</span>
</td>
<td style="width: 1%">
<i ng-click="ctrl.moveLink($index, -1)" ng-hide="$first" class="pointer fa fa-arrow-up"></i>
</td>
......@@ -66,66 +76,65 @@
</div>
</div>
<div ng-if="ctrl.mode == 'edit' || ctrl.mode == 'new'">
<div class="gf-form-group gf-form-inline">
<div class="section">
<div class="gf-form-group">
<div class="gf-form-group">
<div class="gf-form">
<span class="gf-form-label width-8">Type</span>
<div class="gf-form-select-wrapper width-10">
<select class="gf-form-input" ng-model="link.type" ng-options="f for f in ['dashboards','link']" ng-change="updated()"></select>
<select class="gf-form-input" ng-model="ctrl.link.type" ng-options="f for f in ['dashboards','link']"></select>
</div>
</div>
<div class="gf-form" ng-show="link.type === 'dashboards'">
<div class="gf-form" ng-show="ctrl.link.type === 'dashboards'">
<span class="gf-form-label width-8">With tags</span>
<bootstrap-tagsinput ng-model="link.tags" tagclass="label label-tag" placeholder="add tags" style="margin-right: .25rem"></bootstrap-tagsinput>
<bootstrap-tagsinput ng-model="ctrl.link.tags" tagclass="label label-tag" placeholder="add tags" style="margin-right: .25rem"></bootstrap-tagsinput>
</div>
<gf-form-switch ng-show="link.type === 'dashboards'" class="gf-form" label="As dropdown" checked="link.asDropdown" switch-class="max-width-4"
label-class="width-8" on-change="updated()"></gf-form-switch>
<div class="gf-form" ng-show="link.type === 'dashboards' && link.asDropdown">
<gf-form-switch ng-show="ctrl.link.type === 'dashboards'" class="gf-form" label="As dropdown" checked="ctrl.link.asDropdown"
switch-class="max-width-4" label-class="width-8"></gf-form-switch>
<div class="gf-form" ng-show="ctrl.link.type === 'dashboards' && ctrl.link.asDropdown">
<span class="gf-form-label width-8">Title</span>
<input type="text" ng-model="link.title" class="gf-form-input max-width-10" ng-model-onblur ng-change="updated()">
<input type="text" ng-model="ctrl.link.title" class="gf-form-input max-width-10" ng-model-onblur>
</div>
<div ng-show="link.type === 'link'">
<div ng-show="ctrl.link.type === 'link'">
<div class="gf-form">
<li class="gf-form-label width-8">Url</li>
<input type="text" ng-model="link.url" class="gf-form-input width-20" ng-model-onblur ng-change="updated()">
<input type="text" ng-model="ctrl.link.url" class="gf-form-input width-20" ng-model-onblur>
</div>
<div class="gf-form">
<span class="gf-form-label width-8">Title</span>
<input type="text" ng-model="link.title" class="gf-form-input width-20" ng-model-onblur ng-change="updated()">
<input type="text" ng-model="ctrl.link.title" class="gf-form-input width-20" ng-model-onblur>
</div>
<div class="gf-form">
<span class="gf-form-label width-8">Tooltip</span>
<input type="text" ng-model="link.tooltip" class="gf-form-input width-20" placeholder="Open dashboard" ng-model-onblur ng-change="updated()">
<input type="text" ng-model="ctrl.link.tooltip" class="gf-form-input width-20" placeholder="Open dashboard" ng-model-onblur>
</div>
<div class="gf-form">
<span class="gf-form-label width-8">Icon</span>
<div class="gf-form-select-wrapper width-20">
<select class="gf-form-input" ng-model="link.icon" ng-options="k as k for (k, v) in iconMap" ng-change="updated()"></select>
<select class="gf-form-input" ng-model="ctrl.link.icon" ng-options="k as k for (k, v) in ctrl.iconMap"></select>
</div>
</div>
</div>
</div>
<div class="section gf-form-inline" style="display: flex">
<div>
<div class="gf-form">
<span class="gf-form-label width-6">Include</span>
</div>
</div>
<div class="gf-form-group">
<h5 class="section-heading">Include</h5>
<div>
<gf-form-switch class="gf-form" label="Time range" checked="link.keepTime" switch-class="max-width-6" label-class="width-9"></gf-form-switch>
<gf-form-switch class="gf-form" label="Variable values" checked="link.includeVars" switch-class="max-width-6" label-class="width-9"></gf-form-switch>
<gf-form-switch class="gf-form" label="Open in new tab" checked="link.targetBlank" switch-class="max-width-6" label-class="width-9"></gf-form-switch>
<gf-form-switch class="gf-form" label="Time range" checked="ctrl.link.keepTime" switch-class="max-width-6" label-class="width-9"></gf-form-switch>
<gf-form-switch class="gf-form" label="Variable values" checked="ctrl.link.includeVars" switch-class="max-width-6" label-class="width-9"></gf-form-switch>
<gf-form-switch class="gf-form" label="Open in new tab" checked="ctrl.link.targetBlank" switch-class="max-width-6" label-class="width-9"></gf-form-switch>
</div>
</div>
</div>
<button class="btn btn-success" ng-click="ctrl.saveLink()">
<i class="fa fa-plus"></i>Save</button>
<button class="btn btn-success" ng-if="ctrl.mode == 'new'" ng-click="ctrl.addLink()">
Add
</button>
<button class="btn btn-success" ng-if="ctrl.mode == 'edit'" ng-click="ctrl.saveLink()">
Update
</button>
</div>
public/app/features/dashlinks/editor.ts
import angular from 'angular';
import _ from 'lodash';
import appEvents from 'app/core/app_events';
import angular from "angular";
import _ from "lodash";
import appEvents from "app/core/app_events";
export 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",
dashboard: "fa-th-large",
question: "fa-question",
info: "fa-info",
bolt: "fa-bolt",
doc: "fa-file-text-o",
cloud: "fa-cloud"
};
export class DashLinkEditorCtrl {
......@@ -17,62 +17,65 @@ export class DashLinkEditorCtrl {
iconMap: any;
mode: any;
link: any;
currentLink: any;
/** @ngInject */
constructor($scope, $rootScope) {
this.iconMap = iconMap;
this.dashboard.links = this.dashboard.links || [];
this.mode = 'list';
this.mode = "list";
$scope.$on("$destroy", () => {
$rootScope.appEvent("dash-links-updated");
});
}
backToList() {
this.mode = 'list';
this.mode = "list";
}
addLink() {
this.dashboard.links.push({ type: 'dashboard', icon: 'external link' });
this.dashboard.updateSubmenuVisibility();
this.updated();
this.mode = 'new';
setupNew() {
this.mode = "new";
this.link = { type: "dashboards", icon: "external link" };
}
editLink(index) {
addLink() {
this.dashboard.links.push(this.link);
this.mode = "list";
}
editLink(link) {
this.link = link;
this.mode = "edit";
console.log(this.link);
}
saveLink() {
this.updated();
this.backToList();
}
moveLink(index, dir) {
_.move(this.dashboard.links, index, index+dir);
this.updated();
}
updated() {
appEvents.emit('dash-links-updated');
_.move(this.dashboard.links, index, index + dir);
}
deleteLink(index) {
this.dashboard.links.splice(index, 1);
//this.dashboard.updateSubmenuVisibility();
this.updated();
this.dashboard.updateSubmenuVisibility();
}
}
function dashLinksEditor() {
return {
restrict: 'E',
restrict: "E",
controller: DashLinkEditorCtrl,
templateUrl: 'public/app/features/dashlinks/editor.html',
templateUrl: "public/app/features/dashlinks/editor.html",
bindToController: true,
controllerAs: 'ctrl',
controllerAs: "ctrl",
scope: {
dashboard: "="
}
};
}
angular.module('grafana.directives').directive('dashLinksEditor', dashLinksEditor);
angular
.module("grafana.directives")
.directive("dashLinksEditor", dashLinksEditor);
public/app/features/dashlinks/module.ts
import angular from 'angular';
import _ from 'lodash';
import {iconMap} from './editor';
import angular from "angular";
import _ from "lodash";
import { iconMap } from "./editor";
function dashLinksContainer() {
return {
scope: {
links: "="
},
restrict: 'E',
controller: 'DashLinksContainerCtrl',
template: '<dash-link ng-repeat="link in generatedLinks" link="link"></dash-link>',
link: function() { }
restrict: "E",
controller: "DashLinksContainerCtrl",
template:
'<dash-link ng-repeat="link in generatedLinks" link="link"></dash-link>',
link: function() {}
};
}
/** @ngInject */
function dashLink($compile, linkSrv) {
return {
restrict: 'E',
restrict: "E",
link: function(scope, elem) {
var link = scope.link;
var template = '<div class="gf-form">' +
var template =
'<div class="gf-form">' +
'<a class="pointer gf-form-label" data-placement="bottom"' +
(link.asDropdown ? ' ng-click="fillDropdown(link)" data-toggle="dropdown"' : "") + '>' +
'<i></i> <span></span></a>';
(link.asDropdown
? ' ng-click="fillDropdown(link)" data-toggle="dropdown"'
: "") +
">" +
"<i></i> <span></span></a>";
if (link.asDropdown) {
template += '<ul class="dropdown-menu" role="menu">' +
template +=
'<ul class="dropdown-menu" role="menu">' +
'<li ng-repeat="dash in link.searchHits"><a href="{{dash.url}}">{{dash.title}}</a></li>' +
'</ul>';
"</ul>";
}
template += '</div>';
template += "</div>";
elem.html(template);
$compile(elem.contents())(scope);
var anchor = elem.find('a');
var icon = elem.find('i');
var span = elem.find('span');
var anchor = elem.find("a");
var icon = elem.find("i");
var span = elem.find("span");
function update() {
var linkInfo = linkSrv.getAnchorInfo(link);
......@@ -47,17 +53,19 @@ function dashLink($compile, linkSrv) {
}
// tooltip
elem.find('a').tooltip({ title: scope.link.tooltip, html: true, container: 'body' });
icon.attr('class', 'fa fa-fw ' + scope.link.icon);
anchor.attr('target', scope.link.target);
elem
.find("a")
.tooltip({ title: scope.link.tooltip, html: true, container: "body" });
icon.attr("class", "fa fa-fw " + scope.link.icon);
anchor.attr("target", scope.link.target);
// fix for menus on the far right
if (link.asDropdown && scope.$last) {
elem.find('.dropdown-menu').addClass('pull-right');
elem.find(".dropdown-menu").addClass("pull-right");
}
update();
scope.$on('refresh', update);
scope.$on("refresh", update);
}
};
}
......@@ -68,36 +76,40 @@ export class DashLinksContainerCtrl {
var currentDashId = dashboardSrv.getCurrent().id;
function buildLinks(linkDef) {
if (linkDef.type === 'dashboards') {
if (linkDef.type === "dashboards") {
if (!linkDef.tags) {
console.log('Dashboard link missing tag');
console.log("Dashboard link missing tag");
return $q.when([]);
}
if (linkDef.asDropdown) {
return $q.when([{
return $q.when([
{
title: linkDef.title,
tags: linkDef.tags,
keepTime: linkDef.keepTime,
includeVars: linkDef.includeVars,
icon: "fa fa-bars",
asDropdown: true
}]);
}
]);
}
return $scope.searchDashboards(linkDef, 7);
}
if (linkDef.type === 'link') {
return $q.when([{
if (linkDef.type === "link") {
return $q.when([
{
url: linkDef.url,
title: linkDef.title,
icon: iconMap[linkDef.icon],
tooltip: linkDef.tooltip,
target: linkDef.targetBlank ? "_blank" : "_self",
keepTime: linkDef.keepTime,
includeVars: linkDef.includeVars,
}]);
includeVars: linkDef.includeVars
}
]);
}
return $q.when([]);
......@@ -112,20 +124,26 @@ export class DashLinksContainerCtrl {
}
$scope.searchDashboards = function(link, limit) {
return backendSrv.search({tag: link.tags, limit: limit}).then(function(results) {
return _.reduce(results, function(memo, dash) {
return backendSrv
.search({ tag: link.tags, limit: limit })
.then(function(results) {
return _.reduce(
results,
function(memo, dash) {
// do not add current dashboard
if (dash.id !== currentDashId) {
memo.push({
title: dash.title,
url: 'dashboard/' + dash.uri,
icon: 'fa fa-th-large',
url: "dashboard/" + dash.uri,
icon: "fa fa-th-large",
keepTime: link.keepTime,
includeVars: link.includeVars
});
}
return memo;
}, []);
},
[]
);
});
};
......@@ -139,10 +157,14 @@ export class DashLinksContainerCtrl {
};
updateDashLinks();
$rootScope.onAppEvent('dash-links-updated', updateDashLinks, $scope);
$rootScope.onAppEvent("dash-links-updated", updateDashLinks, $scope);
}
}
angular.module('grafana.directives').directive('dashLinksContainer', dashLinksContainer);
angular.module('grafana.directives').directive('dashLink', dashLink);
angular.module('grafana.directives').controller("DashLinksContainerCtrl", DashLinksContainerCtrl);
angular
.module("grafana.directives")
.directive("dashLinksContainer", dashLinksContainer);
angular.module("grafana.directives").directive("dashLink", dashLink);
angular
.module("grafana.directives")
.controller("DashLinksContainerCtrl", DashLinksContainerCtrl);
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