Skip to content

N
nexpie-grafana-theme
Commit b7956ef4 by Patrick O'Carroll Committed by Torkel Ödegaard
Options

More js to ts (#9966) 

* four files js to ts, fixed ng_model_on_blur

* added /** @ngInject */
parent c3699d82
Showing with 526 additions and 469 deletions
public/app/core/directives/misc.js deleted 100644 → 0
define([
'angular',
'require',
'../core_module',
'app/core/utils/kbn',
],
function (angular, require, coreModule, kbn) {
'use strict';
kbn = kbn.default;
coreModule.default.directive('tip', function($compile) {
return {
restrict: 'E',
link: function(scope, elem, attrs) {
var _t = '<i class="grafana-tip fa fa-'+(attrs.icon||'question-circle')+'" bs-tooltip="\''+
kbn.addslashes(elem.text())+'\'"></i>';
_t = _t.replace(/{/g, '\\{').replace(/}/g, '\\}');
elem.replaceWith($compile(angular.element(_t))(scope));
}
};
});
coreModule.default.directive('clipboardButton', function() {
return {
scope: {
getText: '&clipboardButton'
},
link: function(scope, elem) {
require(['clipboard'], function(Clipboard) {
scope.clipboard = new Clipboard(elem[0], {
text: function() {
return scope.getText();
}
});
});
scope.$on('$destroy', function() {
if (scope.clipboard) {
scope.clipboard.destroy();
}
});
}
};
});
coreModule.default.directive('compile', function($compile) {
return {
restrict: 'A',
link: function(scope, element, attrs) {
scope.$watch(function(scope) {
return scope.$eval(attrs.compile);
}, function(value) {
element.html(value);
$compile(element.contents())(scope);
});
}
};
});
coreModule.default.directive('watchChange', function() {
return {
scope: { onchange: '&watchChange' },
link: function(scope, element) {
element.on('input', function() {
scope.$apply(function () {
scope.onchange({ inputValue: element.val() });
});
});
}
};
});
coreModule.default.directive('editorOptBool', function($compile) {
return {
restrict: 'E',
link: function(scope, elem, attrs) {
var ngchange = attrs.change ? (' ng-change="' + attrs.change + '"') : '';
var tip = attrs.tip ? (' <tip>' + attrs.tip + '</tip>') : '';
var showIf = attrs.showIf ? (' ng-show="' + attrs.showIf + '" ') : '';
var template = '<div class="editor-option gf-form-checkbox text-center"' + showIf + '>' +
' <label for="' + attrs.model + '" class="small">' +
attrs.text + tip + '</label>' +
'<input class="cr1" id="' + attrs.model + '" type="checkbox" ' +
' ng-model="' + attrs.model + '"' + ngchange +
' ng-checked="' + attrs.model + '"></input>' +
' <label for="' + attrs.model + '" class="cr1"></label>';
elem.replaceWith($compile(angular.element(template))(scope));
}
};
});
coreModule.default.directive('editorCheckbox', function($compile, $interpolate) {
return {
restrict: 'E',
link: function(scope, elem, attrs) {
var text = $interpolate(attrs.text)(scope);
var model = $interpolate(attrs.model)(scope);
var ngchange = attrs.change ? (' ng-change="' + attrs.change + '"') : '';
var tip = attrs.tip ? (' <tip>' + attrs.tip + '</tip>') : '';
var label = '<label for="' + scope.$id + model + '" class="checkbox-label">' +
text + tip + '</label>';
var template =
'<input class="cr1" id="' + scope.$id + model + '" type="checkbox" ' +
' ng-model="' + model + '"' + ngchange +
' ng-checked="' + model + '"></input>' +
' <label for="' + scope.$id + model + '" class="cr1"></label>';
template = template + label;
elem.addClass('gf-form-checkbox');
elem.html($compile(angular.element(template))(scope));
}
};
});
coreModule.default.directive('gfDropdown', function ($parse, $compile, $timeout) {
function buildTemplate(items, placement) {
var upclass = placement === 'top' ? 'dropup' : '';
var ul = [
'<ul class="dropdown-menu ' + upclass + '" role="menu" aria-labelledby="drop1">',
'</ul>'
];
angular.forEach(items, function (item, index) {
if (item.divider) {
return ul.splice(index + 1, 0, '<li class="divider"></li>');
}
var li = '<li' + (item.submenu && item.submenu.length ? ' class="dropdown-submenu"' : '') + '>' +
'<a tabindex="-1" ng-href="' + (item.href || '') + '"' + (item.click ? ' ng-click="' + item.click + '"' : '') +
(item.target ? ' target="' + item.target + '"' : '') + (item.method ? ' data-method="' + item.method + '"' : '') +
'>' + (item.text || '') + '</a>';
if (item.submenu && item.submenu.length) {
li += buildTemplate(item.submenu).join('\n');
}
li += '</li>';
ul.splice(index + 1, 0, li);
});
return ul;
}
return {
restrict: 'EA',
scope: true,
link: function postLink(scope, iElement, iAttrs) {
var getter = $parse(iAttrs.gfDropdown), items = getter(scope);
$timeout(function () {
var placement = iElement.data('placement');
var dropdown = angular.element(buildTemplate(items, placement).join(''));
dropdown.insertAfter(iElement);
$compile(iElement.next('ul.dropdown-menu'))(scope);
});
iElement.addClass('dropdown-toggle').attr('data-toggle', 'dropdown');
}
};
});
});
public/app/core/directives/misc.ts 0 → 100644
import angular from "angular";
import Clipboard from "clipboard";
import coreModule from "../core_module";
import kbn from "app/core/utils/kbn";
/** @ngInject */
function tip($compile) {
return {
restrict: "E",
link: function(scope, elem, attrs) {
var _t =
'<i class="grafana-tip fa fa-' +
(attrs.icon || "question-circle") +
'" bs-tooltip="\'' +
kbn.addslashes(elem.text()) +
"'\"></i>";
_t = _t.replace(/{/g, "\\{").replace(/}/g, "\\}");
elem.replaceWith($compile(angular.element(_t))(scope));
}
};
}
function clipboardButton() {
return {
scope: {
getText: "&clipboardButton"
},
link: function(scope, elem) {
scope.clipboard = new Clipboard(elem[0], {
text: function() {
return scope.getText();
}
});
scope.$on("$destroy", function() {
if (scope.clipboard) {
scope.clipboard.destroy();
}
});
}
};
}
/** @ngInject */
function compile($compile) {
return {
restrict: "A",
link: function(scope, element, attrs) {
scope.$watch(
function(scope) {
return scope.$eval(attrs.compile);
},
function(value) {
element.html(value);
$compile(element.contents())(scope);
}
);
}
};
}
function watchChange() {
return {
scope: { onchange: "&watchChange" },
link: function(scope, element) {
element.on("input", function() {
scope.$apply(function() {
scope.onchange({ inputValue: element.val() });
});
});
}
};
}
/** @ngInject */
function editorOptBool($compile) {
return {
restrict: "E",
link: function(scope, elem, attrs) {
var ngchange = attrs.change ? ' ng-change="' + attrs.change + '"' : "";
var tip = attrs.tip ? " <tip>" + attrs.tip + "</tip>" : "";
var showIf = attrs.showIf ? ' ng-show="' + attrs.showIf + '" ' : "";
var template =
'<div class="editor-option gf-form-checkbox text-center"' +
showIf +
">" +
' <label for="' +
attrs.model +
'" class="small">' +
attrs.text +
tip +
"</label>" +
'<input class="cr1" id="' +
attrs.model +
'" type="checkbox" ' +
' ng-model="' +
attrs.model +
'"' +
ngchange +
' ng-checked="' +
attrs.model +
'"></input>' +
' <label for="' +
attrs.model +
'" class="cr1"></label>';
elem.replaceWith($compile(angular.element(template))(scope));
}
};
}
/** @ngInject */
function editorCheckbox($compile, $interpolate) {
return {
restrict: "E",
link: function(scope, elem, attrs) {
var text = $interpolate(attrs.text)(scope);
var model = $interpolate(attrs.model)(scope);
var ngchange = attrs.change ? ' ng-change="' + attrs.change + '"' : "";
var tip = attrs.tip ? " <tip>" + attrs.tip + "</tip>" : "";
var label =
'<label for="' +
scope.$id +
model +
'" class="checkbox-label">' +
text +
tip +
"</label>";
var template =
'<input class="cr1" id="' +
scope.$id +
model +
'" type="checkbox" ' +
' ng-model="' +
model +
'"' +
ngchange +
' ng-checked="' +
model +
'"></input>' +
' <label for="' +
scope.$id +
model +
'" class="cr1"></label>';
template = template + label;
elem.addClass("gf-form-checkbox");
elem.html($compile(angular.element(template))(scope));
}
};
}
/** @ngInject */
function gfDropdown($parse, $compile, $timeout) {
function buildTemplate(items, placement?) {
var upclass = placement === "top" ? "dropup" : "";
var ul = [
'<ul class="dropdown-menu ' +
upclass +
'" role="menu" aria-labelledby="drop1">',
"</ul>"
];
for (let index = 0; index < items.length; index++) {
let item = items[index];
if (item.divider) {
ul.splice(index + 1, 0, '<li class="divider"></li>');
continue;
}
var li =
"<li" +
(item.submenu && item.submenu.length
? ' class="dropdown-submenu"'
: "") +
">" +
'<a tabindex="-1" ng-href="' +
(item.href || "") +
'"' +
(item.click ? ' ng-click="' + item.click + '"' : "") +
(item.target ? ' target="' + item.target + '"' : "") +
(item.method ? ' data-method="' + item.method + '"' : "") +
">" +
(item.text || "") +
"</a>";
if (item.submenu && item.submenu.length) {
li += buildTemplate(item.submenu).join("\n");
}
li += "</li>";
ul.splice(index + 1, 0, li);
}
return ul;
}
return {
restrict: "EA",
scope: true,
link: function postLink(scope, iElement, iAttrs) {
var getter = $parse(iAttrs.gfDropdown),
items = getter(scope);
$timeout(function() {
var placement = iElement.data("placement");
var dropdown = angular.element(
buildTemplate(items, placement).join("")
);
dropdown.insertAfter(iElement);
$compile(iElement.next("ul.dropdown-menu"))(scope);
});
iElement.addClass("dropdown-toggle").attr("data-toggle", "dropdown");
}
};
}
coreModule.directive("tip", tip);
coreModule.directive("clipboardButton", clipboardButton);
coreModule.directive("compile", compile);
coreModule.directive("watchChange", watchChange);
coreModule.directive("editorOptBool", editorOptBool);
coreModule.directive("editorCheckbox", editorCheckbox);
coreModule.directive("gfDropdown", gfDropdown);
public/app/core/directives/ng_model_on_blur.ts
import coreModule from '../core_module'; import coreModule from '../core_module';
import * as rangeUtil from 'app/core/utils/rangeutil'; import * as rangeUtil from 'app/core/utils/rangeutil';
export class NgModelOnBlur { function ngModelOnBlur() {
constructor() { return {
return { restrict: 'A',
restrict: 'A', priority: 1,
priority: 1, require: 'ngModel',
require: 'ngModel', link: function(scope, elm, attr, ngModelCtrl) {
link: function(scope, elm, attr, ngModelCtrl) { if (attr.type === 'radio' || attr.type === 'checkbox') {
if (attr.type === 'radio' || attr.type === 'checkbox') { return;
return; }
}
elm.off('input keydown change'); elm.off('input keydown change');
elm.bind('blur', function() { elm.bind('blur', function() {
scope.$apply(function() { scope.$apply(function() {
ngModelCtrl.$setViewValue(elm.val()); ngModelCtrl.$setViewValue(elm.val());
});
}); });
} });
}; }
} };
} }
function emptyToNull() {
export class EmptyToNull { return {
constructor() { restrict: 'A',
return { require: 'ngModel',
restrict: 'A', link: function (scope, elm, attrs, ctrl) {
require: 'ngModel', ctrl.$parsers.push(function (viewValue) {
link: function (scope, elm, attrs, ctrl) { if (viewValue === "") { return null; }
ctrl.$parsers.push(function (viewValue) { return viewValue;
if (viewValue === "") { return null; } });
return viewValue; }
}); };
}
};
}
} }
export class ValidTimeSpan { function validTimeSpan() {
constructor() { return {
return { require: 'ngModel',
require: 'ngModel', link: function(scope, elm, attrs, ctrl) {
link: function(scope, elm, attrs, ctrl) { ctrl.$validators.integer = function(modelValue, viewValue) {
ctrl.$validators.integer = function(modelValue, viewValue) { if (ctrl.$isEmpty(modelValue)) {
if (ctrl.$isEmpty(modelValue)) { return true;
return true; }
} if (viewValue.indexOf('$') === 0 || viewValue.indexOf('+$') === 0) {
if (viewValue.indexOf('$') === 0 || viewValue.indexOf('+$') === 0) { return true; // allow template variable
return true; // allow template variable }
} var info = rangeUtil.describeTextRange(viewValue);
var info = rangeUtil.describeTextRange(viewValue); return info.invalid !== true;
return info.invalid !== true; };
}; }
} };
};
}
} }
coreModule.directive('ngModelOnblur', NgModelOnBlur); coreModule.directive('ngModelOnblur', ngModelOnBlur);
coreModule.directive('emptyToNull', EmptyToNull); coreModule.directive('emptyToNull', emptyToNull);
coreModule.directive('validTimeSpan', ValidTimeSpan); coreModule.directive('validTimeSpan', validTimeSpan);
public/app/core/directives/tags.js → public/app/core/directives/tags.ts
define([ import angular from 'angular';
'angular', import $ from 'jquery';
'jquery', import coreModule from '../core_module';
'../core_module', import 'vendor/tagsinput/bootstrap-tagsinput.js';
'vendor/tagsinput/bootstrap-tagsinput.js',
], function djb2(str) {
function (angular, $, coreModule) { var hash = 5381;
'use strict'; for (var i = 0; i < str.length; i++) {
hash = ((hash << 5) + hash) + str.charCodeAt(i); /* hash * 33 + c */
function djb2(str) {
var hash = 5381;
for (var i = 0; i < str.length; i++) {
hash = ((hash << 5) + hash) + str.charCodeAt(i); /* hash * 33 + c */
}
return hash;
} }
return hash;
}
function setColor(name, element) {
var hash = djb2(name.toLowerCase());
var colors = [
"#E24D42","#1F78C1","#BA43A9","#705DA0","#466803",
"#508642","#447EBC","#C15C17","#890F02","#757575",
"#0A437C","#6D1F62","#584477","#629E51","#2F4F4F",
"#BF1B00","#806EB7","#8a2eb8", "#699e00","#000000",
"#3F6833","#2F575E","#99440A","#E0752D","#0E4AB4",
"#58140C","#052B51","#511749","#3F2B5B",
];
var borderColors = [
"#FF7368","#459EE7","#E069CF","#9683C6","#6C8E29",
"#76AC68","#6AA4E2","#E7823D","#AF3528","#9B9B9B",
"#3069A2","#934588","#7E6A9D","#88C477","#557575",
"#E54126","#A694DD","#B054DE", "#8FC426","#262626",
"#658E59","#557D84","#BF6A30","#FF9B53","#3470DA",
"#7E3A32","#2B5177","#773D6F","#655181",
];
var color = colors[Math.abs(hash % colors.length)];
var borderColor = borderColors[Math.abs(hash % borderColors.length)];
element.css("background-color", color);
element.css("border-color", borderColor);
}
function tagColorFromName() {
return {
scope: { tagColorFromName: "=" },
link: function (scope, element) {
setColor(scope.tagColorFromName, element);
}
};
}
function setColor(name, element) { function bootstrapTagsinput() {
var hash = djb2(name.toLowerCase()); function getItemProperty(scope, property) {
var colors = [ if (!property) {
"#E24D42","#1F78C1","#BA43A9","#705DA0","#466803", return undefined;
"#508642","#447EBC","#C15C17","#890F02","#757575", }
"#0A437C","#6D1F62","#584477","#629E51","#2F4F4F",
"#BF1B00","#806EB7","#8a2eb8", "#699e00","#000000",
"#3F6833","#2F575E","#99440A","#E0752D","#0E4AB4",
"#58140C","#052B51","#511749","#3F2B5B",
];
var borderColors = [
"#FF7368","#459EE7","#E069CF","#9683C6","#6C8E29",
"#76AC68","#6AA4E2","#E7823D","#AF3528","#9B9B9B",
"#3069A2","#934588","#7E6A9D","#88C477","#557575",
"#E54126","#A694DD","#B054DE", "#8FC426","#262626",
"#658E59","#557D84","#BF6A30","#FF9B53","#3470DA",
"#7E3A32","#2B5177","#773D6F","#655181",
];
var color = colors[Math.abs(hash % colors.length)];
var borderColor = borderColors[Math.abs(hash % borderColors.length)];
element.css("background-color", color);
element.css("border-color", borderColor);
}
coreModule.default.directive('tagColorFromName', function() { if (angular.isFunction(scope.$parent[property])) {
return { return scope.$parent[property];
scope: { tagColorFromName: "=" }, }
link: function (scope, element) {
setColor(scope.tagColorFromName, element);
}
};
});
coreModule.default.directive('bootstrapTagsinput', function() { return function(item) {
return item[property];
};
}
function getItemProperty(scope, property) { return {
if (!property) { restrict: 'EA',
return undefined; scope: {
model: '=ngModel',
onTagsUpdated: "&",
},
template: '<select multiple></select>',
replace: false,
link: function(scope, element, attrs) {
if (!angular.isArray(scope.model)) {
scope.model = [];
} }
if (angular.isFunction(scope.$parent[property])) { var select = $('select', element);
return scope.$parent[property];
}
return function(item) { if (attrs.placeholder) {
return item[property]; select.attr('placeholder', attrs.placeholder);
}; }
}
return { select.tagsinput({
restrict: 'EA', typeahead: {
scope: { source: angular.isFunction(scope.$parent[attrs.typeaheadSource]) ? scope.$parent[attrs.typeaheadSource] : null
model: '=ngModel', },
onTagsUpdated: "&", widthClass: attrs.widthClass,
}, itemValue: getItemProperty(scope, attrs.itemvalue),
template: '<select multiple></select>', itemText : getItemProperty(scope, attrs.itemtext),
replace: false, tagClass : angular.isFunction(scope.$parent[attrs.tagclass]) ?
link: function(scope, element, attrs) { scope.$parent[attrs.tagclass] : function() { return attrs.tagclass; }
});
select.on('itemAdded', function(event) {
if (scope.model.indexOf(event.item) === -1) {
scope.model.push(event.item);
if (scope.onTagsUpdated) {
scope.onTagsUpdated();
}
}
var tagElement = select.next().children("span").filter(function() { return $(this).text() === event.item; });
setColor(event.item, tagElement);
});
select.on('itemRemoved', function(event) {
var idx = scope.model.indexOf(event.item);
if (idx !== -1) {
scope.model.splice(idx, 1);
if (scope.onTagsUpdated) {
scope.onTagsUpdated();
}
}
});
scope.$watch("model", function() {
if (!angular.isArray(scope.model)) { if (!angular.isArray(scope.model)) {
scope.model = []; scope.model = [];
} }
var select = $('select', element); select.tagsinput('removeAll');
if (attrs.placeholder) { for (var i = 0; i < scope.model.length; i++) {
select.attr('placeholder', attrs.placeholder); select.tagsinput('add', scope.model[i]);
} }
select.tagsinput({ }, true);
typeahead: { }
source: angular.isFunction(scope.$parent[attrs.typeaheadSource]) ? scope.$parent[attrs.typeaheadSource] : null };
}, }
widthClass: attrs.widthClass,
itemValue: getItemProperty(scope, attrs.itemvalue),
itemText : getItemProperty(scope, attrs.itemtext),
tagClass : angular.isFunction(scope.$parent[attrs.tagclass]) ?
scope.$parent[attrs.tagclass] : function() { return attrs.tagclass; }
});
select.on('itemAdded', function(event) {
if (scope.model.indexOf(event.item) === -1) {
scope.model.push(event.item);
if (scope.onTagsUpdated) {
scope.onTagsUpdated();
}
}
var tagElement = select.next().children("span").filter(function() { return $(this).text() === event.item; });
setColor(event.item, tagElement);
});
select.on('itemRemoved', function(event) {
var idx = scope.model.indexOf(event.item);
if (idx !== -1) {
scope.model.splice(idx, 1);
if (scope.onTagsUpdated) {
scope.onTagsUpdated();
}
}
});
scope.$watch("model", function() {
if (!angular.isArray(scope.model)) {
scope.model = [];
}
select.tagsinput('removeAll');
for (var i = 0; i < scope.model.length; i++) {
select.tagsinput('add', scope.model[i]);
}
}, true);
}
};
});
}); coreModule.directive('tagColorFromName', tagColorFromName);
coreModule.directive('bootstrapTagsinput', bootstrapTagsinput);
public/app/features/dashlinks/module.js → public/app/features/dashlinks/module.ts
define([ import angular from 'angular';
'angular', import _ from 'lodash';
'lodash',
], var iconMap = {
function (angular, _) { "external link": "fa-external-link",
'use strict'; "dashboard": "fa-th-large",
"question": "fa-question",
var module = angular.module('grafana.directives'); "info": "fa-info",
"bolt": "fa-bolt",
var iconMap = { "doc": "fa-file-text-o",
"external link": "fa-external-link", "cloud": "fa-cloud",
"dashboard": "fa-th-large", };
"question": "fa-question",
"info": "fa-info", function dashLinksEditor() {
"bolt": "fa-bolt", return {
"doc": "fa-file-text-o", restrict: 'E',
"cloud": "fa-cloud", controller: 'DashLinkEditorCtrl',
templateUrl: 'public/app/features/dashlinks/editor.html',
link: function() {
}
}; };
}
module.directive('dashLinksEditor', function() {
return { function dashLinksContainer() {
restrict: 'E', return {
controller: 'DashLinkEditorCtrl', scope: {
templateUrl: 'public/app/features/dashlinks/editor.html', links: "="
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',
link: function(scope, elem) {
var link = scope.link;
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>';
if (link.asDropdown) {
template += '<ul class="dropdown-menu" role="menu">' +
'<li ng-repeat="dash in link.searchHits"><a href="{{dash.url}}">{{dash.title}}</a></li>' +
'</ul>';
} }
};
});
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($compile, linkSrv) {
return {
restrict: 'E',
link: function(scope, elem) {
var link = scope.link;
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>';
if (link.asDropdown) {
template += '<ul class="dropdown-menu" role="menu">' +
'<li ng-repeat="dash in link.searchHits"><a href="{{dash.url}}">{{dash.title}}</a></li>' +
'</ul>';
}
template += '</div>'; template += '</div>';
elem.html(template); elem.html(template);
$compile(elem.contents())(scope); $compile(elem.contents())(scope);
var anchor = elem.find('a'); var anchor = elem.find('a');
var icon = elem.find('i'); var icon = elem.find('i');
var span = elem.find('span'); var span = elem.find('span');
function update() {
var linkInfo = linkSrv.getAnchorInfo(link);
span.text(linkInfo.title);
anchor.attr("href", linkInfo.href);
}
// tooltip function update() {
elem.find('a').tooltip({ title: scope.link.tooltip, html: true, container: 'body' }); var linkInfo = linkSrv.getAnchorInfo(link);
icon.attr('class', 'fa fa-fw ' + scope.link.icon); span.text(linkInfo.title);
anchor.attr('target', scope.link.target); anchor.attr("href", linkInfo.href);
}
// fix for menus on the far right // tooltip
if (link.asDropdown && scope.$last) { elem.find('a').tooltip({ title: scope.link.tooltip, html: true, container: 'body' });
elem.find('.dropdown-menu').addClass('pull-right'); icon.attr('class', 'fa fa-fw ' + scope.link.icon);
} anchor.attr('target', scope.link.target);
update(); // fix for menus on the far right
scope.$on('refresh', update); if (link.asDropdown && scope.$last) {
elem.find('.dropdown-menu').addClass('pull-right');
} }
};
});
module.controller("DashLinksContainerCtrl", function($scope, $rootScope, $q, backendSrv, dashboardSrv, linkSrv) { update();
scope.$on('refresh', update);
}
};
}
export class DashLinksContainerCtrl {
/** @ngInject */
constructor($scope, $rootScope, $q, backendSrv, dashboardSrv, linkSrv) {
var currentDashId = dashboardSrv.getCurrent().id; var currentDashId = dashboardSrv.getCurrent().id;
function buildLinks(linkDef) { function buildLinks(linkDef) {
...@@ -162,10 +159,12 @@ function (angular, _) { ...@@ -162,10 +159,12 @@ function (angular, _) {
updateDashLinks(); updateDashLinks();
$rootScope.onAppEvent('dash-links-updated', updateDashLinks, $scope); $rootScope.onAppEvent('dash-links-updated', updateDashLinks, $scope);
}); }
}
module.controller('DashLinkEditorCtrl', function($scope, $rootScope) {
export class DashLinkEditorCtrl {
/** @ngInject */
constructor($scope, $rootScope) {
$scope.iconMap = iconMap; $scope.iconMap = iconMap;
$scope.dashboard.links = $scope.dashboard.links || []; $scope.dashboard.links = $scope.dashboard.links || [];
...@@ -189,6 +188,11 @@ function (angular, _) { ...@@ -189,6 +188,11 @@ function (angular, _) {
$scope.dashboard.updateSubmenuVisibility(); $scope.dashboard.updateSubmenuVisibility();
$scope.updated(); $scope.updated();
}; };
}
}); }
});
angular.module('grafana.directives').directive('dashLinksEditor', dashLinksEditor);
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').controller('DashLinkEditorCtrl', DashLinkEditorCtrl);
public/app/features/panellinks/module.js → public/app/features/panellinks/module.ts
define([ import angular from 'angular';
'angular', import _ from 'lodash';
'lodash', import './link_srv';
'./link_srv',
],
function (angular, _) {
'use strict';
angular
.module('grafana.directives')
.directive('panelLinksEditor', function() {
return {
scope: {
panel: "="
},
restrict: 'E',
controller: 'PanelLinksEditorCtrl',
templateUrl: 'public/app/features/panellinks/module.html',
link: function() {
}
};
}).controller('PanelLinksEditorCtrl', function($scope, backendSrv) {
$scope.panel.links = $scope.panel.links || []; function panelLinksEditor() {
return {
scope: {
panel: "="
},
restrict: 'E',
controller: 'PanelLinksEditorCtrl',
templateUrl: 'public/app/features/panellinks/module.html',
link: function() {
}
};
}
$scope.addLink = function() { export class PanelLinksEditorCtrl {
$scope.panel.links.push({ /** @ngInject */
type: 'dashboard', constructor($scope, backendSrv) {
}); $scope.panel.links = $scope.panel.links || [];
};
$scope.searchDashboards = function(queryStr, callback) { $scope.addLink = function() {
backendSrv.search({query: queryStr}).then(function(hits) { $scope.panel.links.push({
var dashboards = _.map(hits, function(dash) { type: 'dashboard',
return dash.title; });
}); };
callback(dashboards); $scope.searchDashboards = function(queryStr, callback) {
backendSrv.search({query: queryStr}).then(function(hits) {
var dashboards = _.map(hits, function(dash) {
return dash.title;
}); });
};
$scope.dashboardChanged = function(link) {
backendSrv.search({query: link.dashboard}).then(function(hits) {
var dashboard = _.find(hits, {title: link.dashboard});
if (dashboard) {
link.dashUri = dashboard.uri;
link.title = dashboard.title;
}
});
};
$scope.deleteLink = function(link) { callback(dashboards);
$scope.panel.links = _.without($scope.panel.links, link); });
}; };
});
}); $scope.dashboardChanged = function(link) {
backendSrv.search({query: link.dashboard}).then(function(hits) {
var dashboard = _.find(hits, {title: link.dashboard});
if (dashboard) {
link.dashUri = dashboard.uri;
link.title = dashboard.title;
}
});
};
$scope.deleteLink = function(link) {
$scope.panel.links = _.without($scope.panel.links, link);
};
}
}
angular.module('grafana.directives').directive('panelLinksEditor', panelLinksEditor)
.controller('PanelLinksEditorCtrl', PanelLinksEditorCtrl);
tslint.json
...@@ -17,7 +17,7 @@ ...@@ -17,7 +17,7 @@
"max-line-length": [true, 140], "max-line-length": [true, 140],
"member-access": false, "member-access": false,
"no-arg": true, "no-arg": true,
"no-bitwise": true, "no-bitwise": false,
"no-console": [true, "no-console": [true,
"debug", "debug",
"info", "info",
......
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