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, _, $) { ...@@ -60,7 +60,6 @@ function (angular, _, $) {
}; };
$scope.add = function() { $scope.add = function() {
$scope.currentAnnotation.datasource = $scope.currentDatasource.name;
$scope.annotations.push($scope.currentAnnotation); $scope.annotations.push($scope.currentAnnotation);
$scope.reset(); $scope.reset();
$scope.editor.index = 0; $scope.editor.index = 0;
......
src/app/controllers/templateEditorCtrl.js
...@@ -23,6 +23,10 @@ function (angular, _) { ...@@ -23,6 +23,10 @@ function (angular, _) {
$scope.currentDatasource = _.findWhere($scope.datasources, { default: true }); $scope.currentDatasource = _.findWhere($scope.datasources, { default: true });
$scope.templateParameters = $scope.filter.templateParameters; $scope.templateParameters = $scope.filter.templateParameters;
$scope.reset(); $scope.reset();
$scope.$watch('editor.index', function(newVal) {
if (newVal !== 2) { $scope.reset(); }
});
}; };
$scope.add = function() { $scope.add = function() {
...@@ -31,6 +35,18 @@ function (angular, _) { ...@@ -31,6 +35,18 @@ function (angular, _) {
$scope.reset(); $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.reset = function() {
$scope.currentIsNew = true; $scope.currentIsNew = true;
$scope.current = angular.copy(replacementDefaults); $scope.current = angular.copy(replacementDefaults);
...@@ -42,9 +58,6 @@ function (angular, _) { ...@@ -42,9 +58,6 @@ function (angular, _) {
$scope.templateParameters.splice(index, 1); $scope.templateParameters.splice(index, 1);
}; };
$scope.setDatasource = function() {
};
}); });
}); });
src/app/directives/grafanaVersionCheck.js
...@@ -11,7 +11,7 @@ function (angular) { ...@@ -11,7 +11,7 @@ function (angular) {
restrict: 'A', restrict: 'A',
link: function(scope, elem) { link: function(scope, elem) {
if (grafanaVersion[0] === '@') { if (grafanaVersion[0] === '@') {
// return; return;
} }
$http({ method: 'GET', url: 'https://grafanarel.s3.amazonaws.com/latest.json' }) $http({ method: 'GET', url: 'https://grafanarel.s3.amazonaws.com/latest.json' })
......
src/app/partials/annotations_editor.html
...@@ -14,7 +14,6 @@ ...@@ -14,7 +14,6 @@
</div> </div>
<div class="dashboard-editor-body"> <div class="dashboard-editor-body">
<div class="editor-row" ng-if="editor.index == 0"> <div class="editor-row" ng-if="editor.index == 0">
<table class="table table-striped annotation-editor-table" style="width: 700px"> <table class="table table-striped annotation-editor-table" style="width: 700px">
<tr ng-repeat="annotation in annotations"> <tr ng-repeat="annotation in annotations">
......
src/app/partials/search.html
...@@ -49,8 +49,7 @@ ...@@ -49,8 +49,7 @@
<h6 ng-hide="results.dashboards.length">No dashboards matching your query were found.</h6> <h6 ng-hide="results.dashboards.length">No dashboards matching your query were found.</h6>
<div class="search-results-container" ng-if="tagsOnly"> <div class="search-results-container" ng-if="tagsOnly">
<div ng-repeat="tag in results.tags" <div ng-repeat="tag in results.tags" class="pointer" style="width: 180px; float: left;"
class="search-result-item pointer"
ng-class="{'selected': $index === selectedIndex }" ng-class="{'selected': $index === selectedIndex }"
ng-click="filterByTag(tag.term, $event)"> ng-click="filterByTag(tag.term, $event)">
<a class="search-result-tag label label-tag" tag-color-from-name> <a class="search-result-tag label label-tag" tag-color-from-name>
......
src/app/partials/submenu.html
...@@ -36,8 +36,10 @@ ...@@ -36,8 +36,10 @@
</li> </li>
<li ng-repeat="annotation in dashboard.annotations.list" class="grafana-target-segment annotation-segment" ng-class="{'annotation-disabled': !annotation.enable}"> <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)">
<a ng-click="disableAnnotation(annotation)">{{annotation.name}}</a> <i class="annotation-color-icon icon-bolt"></i>
{{annotation.name}}
</a>
</li> </li>
</ul> </ul>
......
src/app/partials/templating_editor.html
...@@ -15,23 +15,28 @@ ...@@ -15,23 +15,28 @@
<div ng-if="editor.index == 0"> <div ng-if="editor.index == 0">
<div class="editor-row"> <div class="editor-row row">
<div class="span4"> <div class="span8">
<div ng-if="templateParameters.length === 0"> <div ng-if="templateParameters.length === 0">
<em>No replacements defined</em> <em>No replacements defined</em>
</div> </div>
<table class="table table-striped"> <table class="grafana-options-table">
<tr ng-repeat="templateParam in templateParameters"> <tr ng-repeat="templateParam in templateParameters">
<td>{{templateParam.name}}</td>
<td>{{templateParam.query}}</td>
<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 Edit
</a> </a>
</td> </td>
<td> <td style="width: 1%">
<a ng-click="removeTemplateParam(templateParam)"> <a ng-click="removeTemplateParam(templateParam)" class="btn btn-danger btn-mini">
Remove <i class="icon-remove"></i>
</a> </a>
</td> </td>
</tr> </tr>
...@@ -41,7 +46,7 @@ ...@@ -41,7 +46,7 @@
</div> </div>
<div ng-if="editor.index == 1"> <div ng-if="editor.index == 1 || (editor.index == 2 && !currentIsNew)">
<div class="editor-row"> <div class="editor-row">
<div class="editor-option"> <div class="editor-option">
<label class="small">Replacement name</label> <label class="small">Replacement name</label>
...@@ -53,7 +58,7 @@ ...@@ -53,7 +58,7 @@
</div> </div>
<div class="editor-option"> <div class="editor-option">
<label class="small">Datasource</label> <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>
</div> </div>
...@@ -64,13 +69,14 @@ ...@@ -64,13 +69,14 @@
</div> </div>
</div> </div>
<button ng-show="currentIsNew" type="button" class="btn btn-success" ng-click="add()">Add template replacement</button>
</div> </div>
</div> </div>
<div class="dashboard-editor-footer"> <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>
</div> </div>
......
src/css/less/grafana.less
...@@ -2,6 +2,8 @@ ...@@ -2,6 +2,8 @@
@import "graph.less"; @import "graph.less";
@import "console.less"; @import "console.less";
@import "bootstrap-tagsinput.less"; @import "bootstrap-tagsinput.less";
@import "tables_lists.less";
@import "search.less";
.hide-controls { .hide-controls {
padding: 0; padding: 0;
...@@ -32,85 +34,6 @@ ...@@ -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 { .row-button {
width: 24px; 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