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 289 additions and 232 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,
...@@ -20,12 +19,9 @@ export class NgModelOnBlur { ...@@ -20,12 +19,9 @@ export class NgModelOnBlur {
}); });
} }
}; };
}
} }
function emptyToNull() {
export class EmptyToNull {
constructor() {
return { return {
restrict: 'A', restrict: 'A',
require: 'ngModel', require: 'ngModel',
...@@ -36,11 +32,9 @@ export class EmptyToNull { ...@@ -36,11 +32,9 @@ export class EmptyToNull {
}); });
} }
}; };
}
} }
export class ValidTimeSpan { function validTimeSpan() {
constructor() {
return { return {
require: 'ngModel', require: 'ngModel',
link: function(scope, elm, attrs, ctrl) { link: function(scope, elm, attrs, ctrl) {
...@@ -56,9 +50,8 @@ export class ValidTimeSpan { ...@@ -56,9 +50,8 @@ export class ValidTimeSpan {
}; };
} }
}; };
}
} }
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) {
'use strict';
function djb2(str) {
var hash = 5381; var hash = 5381;
for (var i = 0; i < str.length; i++) { for (var i = 0; i < str.length; i++) {
hash = ((hash << 5) + hash) + str.charCodeAt(i); /* hash * 33 + c */ hash = ((hash << 5) + hash) + str.charCodeAt(i); /* hash * 33 + c */
} }
return hash; return hash;
} }
function setColor(name, element) { function setColor(name, element) {
var hash = djb2(name.toLowerCase()); var hash = djb2(name.toLowerCase());
var colors = [ var colors = [
"#E24D42","#1F78C1","#BA43A9","#705DA0","#466803", "#E24D42","#1F78C1","#BA43A9","#705DA0","#466803",
...@@ -37,19 +33,18 @@ function (angular, $, coreModule) { ...@@ -37,19 +33,18 @@ function (angular, $, coreModule) {
var borderColor = borderColors[Math.abs(hash % borderColors.length)]; var borderColor = borderColors[Math.abs(hash % borderColors.length)];
element.css("background-color", color); element.css("background-color", color);
element.css("border-color", borderColor); element.css("border-color", borderColor);
} }
coreModule.default.directive('tagColorFromName', function() { function tagColorFromName() {
return { return {
scope: { tagColorFromName: "=" }, scope: { tagColorFromName: "=" },
link: function (scope, element) { link: function (scope, element) {
setColor(scope.tagColorFromName, element); setColor(scope.tagColorFromName, element);
} }
}; };
}); }
coreModule.default.directive('bootstrapTagsinput', function() {
function bootstrapTagsinput() {
function getItemProperty(scope, property) { function getItemProperty(scope, property) {
if (!property) { if (!property) {
return undefined; return undefined;
...@@ -130,6 +125,7 @@ function (angular, $, coreModule) { ...@@ -130,6 +125,7 @@ function (angular, $, coreModule) {
}, true); }, 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',
],
function (angular, _) {
'use strict';
var module = angular.module('grafana.directives'); var iconMap = {
var iconMap = {
"external link": "fa-external-link", "external link": "fa-external-link",
"dashboard": "fa-th-large", "dashboard": "fa-th-large",
"question": "fa-question", "question": "fa-question",
...@@ -15,9 +9,9 @@ function (angular, _) { ...@@ -15,9 +9,9 @@ function (angular, _) {
"bolt": "fa-bolt", "bolt": "fa-bolt",
"doc": "fa-file-text-o", "doc": "fa-file-text-o",
"cloud": "fa-cloud", "cloud": "fa-cloud",
}; };
module.directive('dashLinksEditor', function() { function dashLinksEditor() {
return { return {
restrict: 'E', restrict: 'E',
controller: 'DashLinkEditorCtrl', controller: 'DashLinkEditorCtrl',
...@@ -25,9 +19,9 @@ function (angular, _) { ...@@ -25,9 +19,9 @@ function (angular, _) {
link: function() { link: function() {
} }
}; };
}); }
module.directive('dashLinksContainer', function() { function dashLinksContainer() {
return { return {
scope: { scope: {
links: "=" links: "="
...@@ -37,9 +31,10 @@ function (angular, _) { ...@@ -37,9 +31,10 @@ function (angular, _) {
template: '<dash-link ng-repeat="link in generatedLinks" link="link"></dash-link>', template: '<dash-link ng-repeat="link in generatedLinks" link="link"></dash-link>',
link: function() { } link: function() { }
}; };
}); }
module.directive('dashLink', function($compile, linkSrv) { /** @ngInject */
function dashLink($compile, linkSrv) {
return { return {
restrict: 'E', restrict: 'E',
link: function(scope, elem) { link: function(scope, elem) {
...@@ -84,9 +79,11 @@ function (angular, _) { ...@@ -84,9 +79,11 @@ function (angular, _) {
scope.$on('refresh', update); scope.$on('refresh', update);
} }
}; };
}); }
module.controller("DashLinksContainerCtrl", function($scope, $rootScope, $q, backendSrv, dashboardSrv, linkSrv) { 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 panelLinksEditor() {
function (angular, _) {
'use strict';
angular
.module('grafana.directives')
.directive('panelLinksEditor', function() {
return { return {
scope: { scope: {
panel: "=" panel: "="
...@@ -19,8 +13,11 @@ function (angular, _) { ...@@ -19,8 +13,11 @@ function (angular, _) {
link: function() { link: function() {
} }
}; };
}).controller('PanelLinksEditorCtrl', function($scope, backendSrv) { }
export class PanelLinksEditorCtrl {
/** @ngInject */
constructor($scope, backendSrv) {
$scope.panel.links = $scope.panel.links || []; $scope.panel.links = $scope.panel.links || [];
$scope.addLink = function() { $scope.addLink = function() {
...@@ -52,5 +49,9 @@ function (angular, _) { ...@@ -52,5 +49,9 @@ function (angular, _) {
$scope.deleteLink = function(link) { $scope.deleteLink = function(link) {
$scope.panel.links = _.without($scope.panel.links, 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