Skip to content

N
nexpie-grafana-theme
Commit e0a58dd1 by Torkel Ödegaard
Options

More work on template editor

parent 7d6e04ac
Showing with 155 additions and 102 deletions
src/app/controllers/annotationsEditorCtrl.js
......@@ -60,7 +60,6 @@ function (angular, _, $) {
};
$scope.add = function() {
$scope.currentAnnotation.datasource = $scope.currentDatasource.name;
$scope.annotations.push($scope.currentAnnotation);
$scope.reset();
$scope.editor.index = 0;
......
src/app/controllers/templateEditorCtrl.js
......@@ -23,6 +23,10 @@ function (angular, _) {
$scope.currentDatasource = _.findWhere($scope.datasources, { default: true });
$scope.templateParameters = $scope.filter.templateParameters;
$scope.reset();
$scope.$watch('editor.index', function(newVal) {
if (newVal !== 2) { $scope.reset(); }
});
};
$scope.add = function() {
......@@ -31,6 +35,18 @@ function (angular, _) {
$scope.reset();
};
$scope.edit = function(param) {
$scope.current = param;
$scope.currentIsNew = false;
$scope.currentDatasource = _.findWhere($scope.datasources, { name: param.datasource });
if (!$scope.currentDatasource) {
$scope.currentDatasource = $scope.datasources[0];
}
$scope.editor.index = 2;
};
$scope.reset = function() {
$scope.currentIsNew = true;
$scope.current = angular.copy(replacementDefaults);
......@@ -42,9 +58,6 @@ function (angular, _) {
$scope.templateParameters.splice(index, 1);
};
$scope.setDatasource = function() {
};
});
});
src/app/directives/grafanaVersionCheck.js
......@@ -11,7 +11,7 @@ function (angular) {
restrict: 'A',
link: function(scope, elem) {
if (grafanaVersion[0] === '@') {
// return;
return;
}
$http({ method: 'GET', url: 'https://grafanarel.s3.amazonaws.com/latest.json' })
......
src/app/partials/annotations_editor.html
......@@ -14,7 +14,6 @@
</div>
<div class="dashboard-editor-body">
<div class="editor-row" ng-if="editor.index == 0">
<table class="table table-striped annotation-editor-table" style="width: 700px">
<tr ng-repeat="annotation in annotations">
......
src/app/partials/search.html
......@@ -49,8 +49,7 @@
<h6 ng-hide="results.dashboards.length">No dashboards matching your query were found.</h6>
<div class="search-results-container" ng-if="tagsOnly">
<div ng-repeat="tag in results.tags"
class="search-result-item pointer"
<div ng-repeat="tag in results.tags" class="pointer" style="width: 180px; float: left;"
ng-class="{'selected': $index === selectedIndex }"
ng-click="filterByTag(tag.term, $event)">
<a class="search-result-tag label label-tag" tag-color-from-name>
......
src/app/partials/submenu.html
......@@ -36,8 +36,10 @@
</li>
<li ng-repeat="annotation in dashboard.annotations.list" class="grafana-target-segment annotation-segment" ng-class="{'annotation-disabled': !annotation.enable}">
<i class="annotation-color-icon icon-bolt"></i>
<a ng-click="disableAnnotation(annotation)">{{annotation.name}}</a>
<a ng-click="disableAnnotation(annotation)">
<i class="annotation-color-icon icon-bolt"></i>
{{annotation.name}}
</a>
</li>
</ul>
......
src/app/partials/templating_editor.html
......@@ -15,23 +15,28 @@
<div ng-if="editor.index == 0">
<div class="editor-row">
<div class="span4">
<div class="editor-row row">
<div class="span8">
<div ng-if="templateParameters.length === 0">
<em>No replacements defined</em>
</div>
<table class="table table-striped">
<table class="grafana-options-table">
<tr ng-repeat="templateParam in templateParameters">
<td>{{templateParam.name}}</td>
<td>{{templateParam.query}}</td>
<td>
<a ng-click="asd">
{{templateParam.name}}
</td>
<td class="max-width" style="max-width: 200px;">
{{templateParam.query}}
</td>
<td style="width: 1%">
<a ng-click="edit(templateParam)" class="btn btn-success btn-mini">
<i class="icon-edit"></i>
Edit
</a>
</td>
<td>
<a ng-click="removeTemplateParam(templateParam)">
Remove
<td style="width: 1%">
<a ng-click="removeTemplateParam(templateParam)" class="btn btn-danger btn-mini">
<i class="icon-remove"></i>
</a>
</td>
</tr>
......@@ -41,7 +46,7 @@
</div>
<div ng-if="editor.index == 1">
<div ng-if="editor.index == 1 || (editor.index == 2 && !currentIsNew)">
<div class="editor-row">
<div class="editor-option">
<label class="small">Replacement name</label>
......@@ -53,7 +58,7 @@
</div>
<div class="editor-option">
<label class="small">Datasource</label>
<select ng-model="currentDatasource" ng-options="f.name for f in datasources" ng-change="setDatasource()"></select>
<select ng-model="current.datasource" ng-options="f.value as f.name for f in datasources"></select>
</div>
</div>
......@@ -64,13 +69,14 @@
</div>
</div>
<button ng-show="currentIsNew" type="button" class="btn btn-success" ng-click="add()">Add template replacement</button>
</div>
</div>
<div class="dashboard-editor-footer">
<button type="button" class="btn btn-success pull-right" ng-click="editor.index=0;dismiss();">Close</button>
<button type="button" class="btn btn-success pull-left" ng-show="editor.index === 2" ng-click="dismiss();">Update</button>
<button type="button" class="btn btn-success pull-left" ng-show="editor.index === 1" ng-click="dismiss();">Add</button>
<button type="button" class="btn btn-success pull-right" ng-click="dismiss();">Close</button>
</div>
</div>
......
src/css/less/grafana.less
......@@ -2,6 +2,8 @@
@import "graph.less";
@import "console.less";
@import "bootstrap-tagsinput.less";
@import "tables_lists.less";
@import "search.less";
.hide-controls {
padding: 0;
......@@ -32,85 +34,6 @@
}
}
// Search
.grafana-search-panel {
.search-field-wrapper {
padding: 6px 10px;
input {
width: 100%;
}
button {
margin: 0 4px 0 0;
}
> span {
display: block;
overflow: hidden;
padding-right: 25px;
}
}
}
.search-results-container {
height: 500px;
overflow: auto;
display: block;
line-height: 28px;
.search-result-item:hover, .search-result-item.selected {
.search-result-link, .search-result-link > .icon {
color: @grafanaListHighlight;
}
.search-result-tag {
opacity: 0.70;
color: white;
}
}
.search-result-link {
color: @grafanaListMainLinkColor;
.icon {
padding-right: 10px;
color: @grafanaListHighlightContrast;
}
}
.search-result-item:nth-child(odd) {
background-color: lighten(@grayDarker, 2%);
}
.search-result-item {
padding: 0px 10px;
white-space: nowrap;
border-bottom: 1px solid @grafanaListBorderBottom;
border-top: 1px solid @grafanaListBorderTop;
border-left: 1px solid @grafanaListBorderBottom;
}
.search-result-tags {
float: right;
.label-tag {
margin-left: 6px;
font-size: 11px;
padding: 2px 6px;
}
}
.search-result-actions {
float: right;
padding-left: 20px;
}
}
.search-tagview-switch {
position: absolute;
top: 6px;
right: 24px;
color: darken(@linkColor, 30%);
&.active {
color: @linkColor;
}
}
.row-button {
width: 24px;
}
......
src/css/less/search.less 0 → 100644
// Search
.grafana-search-panel {
.search-field-wrapper {
padding: 6px 10px;
input {
width: 100%;
}
button {
margin: 0 4px 0 0;
}
> span {
display: block;
overflow: hidden;
padding-right: 25px;
}
}
}
.search-results-container {
height: 500px;
overflow: auto;
display: block;
line-height: 28px;
.search-result-item:hover, .search-result-item.selected {
.search-result-link, .search-result-link > .icon {
color: @grafanaListHighlight;
}
}
.selected {
.search-result-tag {
opacity: 0.70;
color: white;
}
}
.search-result-link {
color: @grafanaListMainLinkColor;
.icon {
padding-right: 10px;
color: @grafanaListHighlightContrast;
}
}
.search-result-item:nth-child(odd) {
background-color: lighten(@grayDarker, 2%);
}
.search-result-item {
padding: 0px 10px;
white-space: nowrap;
border-bottom: 1px solid @grafanaListBorderBottom;
border-top: 1px solid @grafanaListBorderTop;
border-left: 1px solid @grafanaListBorderBottom;
}
.search-result-tags {
float: right;
.label-tag {
margin-left: 6px;
font-size: 11px;
padding: 2px 6px;
}
}
.search-result-actions {
float: right;
padding-left: 20px;
}
}
.search-tagview-switch {
position: absolute;
top: 6px;
right: 24px;
color: darken(@linkColor, 30%);
&.active {
color: @linkColor;
}
}
src/css/less/tables_lists.less 0 → 100644
.grafana-options-table {
width: 100%;
tr:nth-child(odd) td {
background-color: lighten(@grayDarker, 2%);
}
td {
padding: 5px 10px;
white-space: nowrap;
border-bottom: 1px solid @grafanaListBorderBottom;
border-top: 1px solid @grafanaListBorderTop;
}
td:first-child {
border-left: 1px solid @grafanaListBorderBottom;
}
td:last-child {
border-right: 1px solid @grafanaListBorderBottom;
}
.max-width {
overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
}
}
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