IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

worked on tags in search and dashboards

Browse Source
This commit is contained in:
Torkel Ödegaard 2015-05-27 11:16:15 +02:00
parent 7b972926ae
commit e76d2ec9c2
8 changed files with 214 additions and 219 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
public/app/controllers/search.js
View File

@ -13,7 +13,7 @@ function (angular, _, config) {
$scope.init = function() {
$scope.giveSearchFocus = 0;
$scope.selectedIndex = -1;
$scope.results = {dashboards: [], tags: [], metrics: []};
$scope.results = [];
$scope.query = { query: '', tag: '', starred: false };
$scope.currentSearchId = 0;
@ -26,7 +26,6 @@ function (angular, _, config) {
$scope.query.query = '';
$scope.search();
}, 100);
};
$scope.keyDown = function (evt) {

4
public/app/directives/all.js
View File

@ -5,11 +5,11 @@ define([
'./ngBlur',
'./dashEditLink',
'./ngModelOnBlur',
'./tip',
'./misc',
'./confirmClick',
'./configModal',
'./spectrumPicker',
'./bootstrap-tagsinput',
'./tags',
'./bodyClass',
'./variableValueSelect',
'./metric.segment',

134
public/app/directives/bootstrap-tagsinput.js vendored
View File

@ -1,134 +0,0 @@
define([
'angular',
'jquery',
'bootstrap-tagsinput'
],
function (angular, $) {
'use strict';
angular
.module('grafana.directives')
.directive('bootstrapTagsinput', function() {
function getItemProperty(scope, property) {
if (!property) {
return undefined;
}
if (angular.isFunction(scope.$parent[property])) {
return scope.$parent[property];
}
return function(item) {
return item[property];
};
}
return {
restrict: 'EA',
scope: {
model: '=ngModel'
},
template: '<select multiple></select>',
replace: false,
link: function(scope, element, attrs) {
if (!angular.isArray(scope.model)) {
scope.model = [];
}
var select = $('select', element);
if (attrs.placeholder) {
select.attr('placeholder', attrs.placeholder);
}
select.tagsinput({
typeahead : {
source : angular.isFunction(scope.$parent[attrs.typeaheadSource]) ? scope.$parent[attrs.typeaheadSource] : null
},
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);
}
});
select.on('itemRemoved', function(event) {
var idx = scope.model.indexOf(event.item);
if (idx !== -1) {
scope.model.splice(idx, 1);
}
});
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);
}
};
});
angular
.module('grafana.directives')
.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.configModal ? ' dash-editor-link="' + item.configModal + '"' : "") +
'>' + (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');
}
};
});
});

78
public/app/directives/tip.js → public/app/directives/misc.js
View File

@ -80,41 +80,51 @@ function (angular, kbn) {
angular
.module('grafana.directives')
.directive('tagColorFromName', function() {
.directive('gfDropdown', function ($parse, $compile, $timeout) {
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 {
scope: { tagColorFromName: "=" },
link: function (scope, element) {
var hash = djb2(scope.tagColorFromName.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",
function buildTemplate(items, placement) {
var upclass = placement === 'top' ? 'dropup' : '';
var ul = [
'<ul class="dropdown-menu ' + upclass + '" role="menu" aria-labelledby="drop1">',
'</ul>'
];
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);
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.configModal ? ' dash-editor-link="' + item.configModal + '"' : "") +
'>' + (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');
}
};
});
});

131
public/app/directives/tags.js Normal file
View File

@ -0,0 +1,131 @@
define([
'angular',
'jquery',
'bootstrap-tagsinput'
],
function (angular, $) {
'use strict';
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;
}
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);
}
angular
.module('grafana.directives')
.directive('tagColorFromName', function() {
return {
scope: { tagColorFromName: "=" },
link: function (scope, element) {
setColor(scope.tagColorFromName, element);
}
};
});
angular
.module('grafana.directives')
.directive('bootstrapTagsinput', function() {
function getItemProperty(scope, property) {
if (!property) {
return undefined;
}
if (angular.isFunction(scope.$parent[property])) {
return scope.$parent[property];
}
return function(item) {
return item[property];
};
}
return {
restrict: 'EA',
scope: {
model: '=ngModel'
},
template: '<select multiple></select>',
replace: false,
link: function(scope, element, attrs) {
if (!angular.isArray(scope.model)) {
scope.model = [];
}
var select = $('select', element);
if (attrs.placeholder) {
select.attr('placeholder', attrs.placeholder);
}
select.tagsinput({
typeahead: {
source: angular.isFunction(scope.$parent[attrs.typeaheadSource]) ? scope.$parent[attrs.typeaheadSource] : null
},
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);
}
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);
}
});
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);
}
};
});
});

5
public/app/directives/variableValueSelect.js
View File

@ -9,7 +9,7 @@ function (angular, app, _) {
angular
.module('grafana.directives')
.directive('variableValueSelect', function($compile, $window, $timeout, datasourceSrv) {
.directive('variableValueSelect', function($compile, $window, $timeout) {
return {
scope: {
variable: "=",
@ -132,9 +132,6 @@ function (angular, app, _) {
}
};
scope.selectTag = function(tag) {
};
scope.hide = function() {
scope.selectorOpen = false;
bodyEl.off('click', scope.bodyOnClick);

8
public/app/features/templating/editorCtrl.js
View File

@ -82,14 +82,6 @@ function (angular, _) {
};
$scope.update = function() {
$scope.current.tags = {
"Europe": ["backend_03", "backend_04"],
"USA": ["backend_01", "backend_02"],
"Asia": ["backend_01"],
"South America": ["backend_02"],
"Africa": ["backend_03"],
};
if ($scope.isValid()) {
$scope.runQuery().then(function() {
$scope.reset();

70
public/app/features/templating/partials/editor.html
View File

@ -226,41 +226,41 @@
</div>
</div>
<div class="editor-row" ng-if="current.type === 'query'">
<div class="tight-form-section">
<h5>Value Groups/Tags</h5>
<div class="tight-form" ng-if="current.useTags">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 115px">
Tags query
</li>
<li>
<input type="text" style="width: 588px" class="input-xxlarge tight-form-input last" ng-model='current.tagsQuery' placeholder="metric name or tags query" ng-model-onblur ng-change="runQuery()"></input>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form" ng-if="current.useTags">
<ul class="tight-form-list">
<li class="tight-form-item" style="width: 115px;">
Tags values query
</li>
<li>
<input type="text" style="width: 588px" class="input tight-form-input last" ng-model='current.tagValuesQuery' placeholder="apps.$__tag.*" ng-model-onblur ng-change="runQuery()"></input>
</li>
</ul>
<div class="clearfix"></div>
</div>
<div class="tight-form">
<ul class="tight-form-list">
<li class="tight-form-item last">
<editor-checkbox text="Enable" model="current.useTags" change="runQuery()"></editor-checkbox>
</li>
</ul>
<div class="clearfix"></div>
</div>
</div>
</div>
<!-- <div class="editor&#45;row" ng&#45;if="current.type === 'query'"> -->
<!-- <div class="tight&#45;form&#45;section"> -->
<!-- <h5>Value Groups/Tags</h5> -->
<!-- <div class="tight&#45;form" ng&#45;if="current.useTags"> -->
<!-- <ul class="tight&#45;form&#45;list"> -->
<!-- <li class="tight&#45;form&#45;item" style="width: 115px"> -->
<!-- Tags query -->
<!-- </li> -->
<!-- <li> -->
<!-- <input type="text" style="width: 588px" class="input&#45;xxlarge tight&#45;form&#45;input last" ng&#45;model='current.tagsQuery' placeholder="metric name or tags query" ng&#45;model&#45;onblur ng&#45;change="runQuery()"></input> -->
<!-- </li> -->
<!-- </ul> -->
<!-- <div class="clearfix"></div> -->
<!-- </div> -->
<!-- <div class="tight&#45;form" ng&#45;if="current.useTags"> -->
<!-- <ul class="tight&#45;form&#45;list"> -->
<!-- <li class="tight&#45;form&#45;item" style="width: 115px;"> -->
<!-- Tags values query -->
<!-- </li> -->
<!-- <li> -->
<!-- <input type="text" style="width: 588px" class="input tight&#45;form&#45;input last" ng&#45;model='current.tagValuesQuery' placeholder="apps.$__tag.*" ng&#45;model&#45;onblur ng&#45;change="runQuery()"></input> -->
<!-- </li> -->
<!-- </ul> -->
<!-- <div class="clearfix"></div> -->
<!-- </div> -->
<!-- <div class="tight&#45;form"> -->
<!-- <ul class="tight&#45;form&#45;list"> -->
<!-- <li class="tight&#45;form&#45;item last"> -->
<!-- <editor&#45;checkbox text="Enable" model="current.useTags" change="runQuery()"></editor&#45;checkbox> -->
<!-- </li> -->
<!-- </ul> -->
<!-- <div class="clearfix"></div> -->
<!-- </div> -->
<!-- </div> -->
<!-- </div> -->
<div class="editor-row">
<div class="tight-form-section">