Skip to content

N
nexpie-grafana-theme
Commit 7b972926 by Torkel Ödegaard
Options

Merge branch 'variable-tags'

parents 4a71a79c 2202094e
Showing with 148 additions and 49 deletions
public/app/controllers/search.js
......@@ -123,32 +123,4 @@ function (angular, _, config) {
});
module.directive('tagColorFromName', function() {
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: { tag: "=" },
link: function (scope, element) {
var name = scope.tag;
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 color = colors[Math.abs(hash % colors.length)];
element.css("background-color", color);
}
};
});
});
public/app/directives/tip.js
......@@ -78,4 +78,43 @@ function (angular, kbn) {
};
});
});
angular
.module('grafana.directives')
.directive('tagColorFromName', function() {
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",
];
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);
}
};
});});
public/app/directives/variableValueSelect.js
......@@ -9,7 +9,7 @@ function (angular, app, _) {
angular
.module('grafana.directives')
.directive('variableValueSelect', function($compile, $window, $timeout) {
.directive('variableValueSelect', function($compile, $window, $timeout, datasourceSrv) {
return {
scope: {
variable: "=",
......@@ -132,6 +132,9 @@ function (angular, app, _) {
}
};
scope.selectTag = function(tag) {
};
scope.hide = function() {
scope.selectorOpen = false;
bodyEl.off('click', scope.bodyOnClick);
......
public/app/features/dashboard/partials/variableValueSelect.html
......@@ -15,12 +15,21 @@
</span>
</div>
<div class="variable-options-container" ng-if="!query.tagcloud">
<div class="variable-options-wrapper">
<div class="variable-options-column">
<a class="variable-option pointer" bindonce ng-repeat="option in search.options"
ng-class="{'selected': option.selected, 'highlighted': $index === highlightIndex}" ng-click="optionSelected(option, $event)">
<span >{{option.text}}</label>
<span>{{option.text}}</span>
<span class="fa fa-fw variable-option-icon"></span>
</a>
</div>
<div class="variable-options-column" ng-if="variable.tags">
<!-- <div class="variable&#45;options&#45;column&#45;header">Tags</div> -->
<a class="variable-option-tag pointer" ng-repeat="tag in variable.tags" ng-click="selectTag(option, $event)">
<span class="label-tag" tag-color-from-name="tag">{{tag}}</span>
<span class="fa fa-fw variable-option-icon"></span>
</a>
</div>
</div>
</div>
</div>
public/app/features/templating/editorCtrl.js
......@@ -82,6 +82,14 @@ 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();
......
public/app/features/templating/partials/editor.html
......@@ -226,6 +226,42 @@
</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-row">
<div class="tight-form-section">
<h5>Preview of values (shows max 20)</h5>
......
public/app/features/templating/templateValuesSrv.js
......@@ -120,7 +120,7 @@ function (angular, _, kbn) {
}
return datasourceSrv.get(variable.datasource).then(function(datasource) {
return datasource.metricFindQuery(variable.query).then(function (results) {
var queryPromise = datasource.metricFindQuery(variable.query).then(function (results) {
variable.options = self.metricNamesToVariableValues(variable, results);
if (variable.includeAll) {
......@@ -138,6 +138,19 @@ function (angular, _, kbn) {
return self.setVariableValue(variable, variable.options[0]);
});
if (variable.useTags) {
return queryPromise.then(function() {
datasource.metricFindQuery(variable.tagsQuery).then(function (results) {
variable.tags = [];
for (var i = 0; i < results.length; i++) {
variable.tags.push(results[i].text);
}
});
});
} else {
return queryPromise;
}
});
};
......
public/app/partials/search.html
......@@ -46,7 +46,7 @@
ng-class="{'selected': $index == selectedIndex}" ng-href="{{row.url}}">
<span class="search-result-tags">
<span ng-click="filterByTag(tag, $event)" ng-repeat="tag in row.tags" tag-color-from-name tag="tag" class="label label-tag">
<span ng-click="filterByTag(tag, $event)" ng-repeat="tag in row.tags" tag-color-from-name="tag" class="label label-tag">
{{tag}}
</span>
<i class="fa" ng-class="{'fa-star': row.isStarred, 'fa-star-o': !row.isStarred}"></i>
......
public/css/less/overrides.less
......@@ -542,10 +542,13 @@ div.flot-text {
.label-tag {
background-color: @purple;
color: darken(@white, 5%);
white-space: nowrap;
border-radius: 2px;
text-shadow: none;
font-size: 13px;
padding: 4px 6px;
padding: 2px 6px;
border-width: 1px;
border-style: solid;
.icon-tag {
position: relative;
top: 1px;
......
public/css/less/sidemenu.less
......@@ -91,7 +91,6 @@
display: block;
padding: 8px 0 4px 22px;
background-color: @navbarBackground;
border-right: 3px solid @bodyBackground;
img {
border-radius: 50%;
background: @iconContainerBackground;
......
public/css/less/submenu.less
......@@ -55,31 +55,48 @@
border-radius: 3px 3px 0 0;
}
.variable-options-container {
.variable-options-wrapper {
display: table;
width: 100%;
}
.variable-options-column {
max-height: 350px;
overflow: auto;
display: block;
display: table-cell;
line-height: 26px;
&:nth-child(2) {
border-left: 1px solid @grafanaTargetFuncBackground;
}
}
.variable-option {
.variable-option-tag,
.variable-option,
.variable-options-column-header {
display: block;
padding: 0 8px;
padding: 0 27px 0 8px;
position: relative;
&:hover, &.highlighted {
background-color: @blueDark;
}
.fa {
line-height: 26px;
float: right;
padding-left: 4px;
}
.variable-option-icon { display: none }
&.selected {
.variable-option-icon:before {
content: "\f00c";
}
.variable-option-icon {
display: block;
padding-left: 4px;
line-height: 26px;
position: absolute;
right: 0;
top: 0;
}
}
}
.variable-option {
&:hover, &.highlighted {
background-color: @blueDark;
}
}
......
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