apitech
/
grafana
mirror of https://github.com/grafana/grafana
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat(alerting): test results look better

Browse Source
pull/5890/head
Torkel Ödegaard 10 years ago
parent f6a160b270
commit 3ad38eefd2
9 changed files with 469 additions and 8 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 200
      '
  2. 4
      pkg/api/dtos/alerting.go
  3. 4
      pkg/tsdb/models.go
  4. 200
      public/app/core/components/jsontree/jsontree.ts
  5. 1
      public/app/core/core.ts
  6. 2
      public/app/plugins/panel/graph/alert_tab_ctrl.ts
  7. 4
      public/app/plugins/panel/graph/partials/tab_alerting.html
  8. 1
      public/sass/_grafana.scss
  9. 61
      public/sass/components/_jsontree.scss

200
'
Unescape View File

@ -0,0 +1,200 @@
/** Created by: Alex Wendland (me@alexwendland.com), 2014-08-06
*
* angular-json-tree
*
* Directive for creating a tree-view out of a JS Object. Only loads
* sub-nodes on demand in order to improve performance of rendering large
* objects.
*
* Attributes:
* - object (Object, 2-way): JS object to build the tree from
* - start-expanded (Boolean, 1-way, ?=true): should the tree default to expanded
*
* Usage:
* // In the controller
* scope.someObject = {
* test: 'hello',
* array: [1,1,2,3,5,8]
* };
* // In the html
* <json-tree object="someObject"></json-tree>
*
* Dependencies:
* - utils (json-tree.js)
* - ajsRecursiveDirectiveHelper (json-tree.js)
*
* Test: json-tree-test.js
*/
import angular from 'angular';
import coreModule from 'app/core/core_module';
var utils = {
/* See link for possible type values to check against.
* http://stackoverflow.com/questions/4622952/json-object-containing-array
*
* Value Class Type
* -------------------------------------
* "foo" String string
* new String("foo") String object
* 1.2 Number number
* new Number(1.2) Number object
* true Boolean boolean
* new Boolean(true) Boolean object
* new Date() Date object
* new Error() Error object
* [1,2,3] Array object
* new Array(1, 2, 3) Array object
* new Function("") Function function
* /abc/g RegExp object (function in Nitro/V8)
* new RegExp("meow") RegExp object (function in Nitro/V8)
* {} Object object
* new Object() Object object
*/
is: function is(obj, clazz) {
return Object.prototype.toString.call(obj).slice(8, -1) === clazz;
},
// See above for possible values
whatClass: function whatClass(obj) {
return Object.prototype.toString.call(obj).slice(8, -1);
},
// Iterate over an objects keyset
forKeys: function forKeys(obj, f) {
for (var key in obj) {
if (obj.hasOwnProperty(key) && typeof obj[key] !== 'function') {
if (f(key, obj[key])) {
break;
}
}
}
}
};
coreModule.directive('jsonTree', [function jsonTreeDirective() {
return {
restrict: 'E',
scope: {
object: '=',
startExpanded: '=',
rootName: '@',
},
template: '<json-node key="rootName" value="object" start-expanded="startExpanded"></json-node>'
};
}]);
coreModule.directive('jsonNode', ['ajsRecursiveDirectiveHelper', function jsonNodeDirective(ajsRecursiveDirectiveHelper) {
return {
restrict: 'E',
scope: {
key: '=',
value: '=',
startExpanded: '='
},
compile: function jsonNodeDirectiveCompile(elem) {
return ajsRecursiveDirectiveHelper.compile(elem, this);
},
template: ' <span class="json-tree-key" ng-click="toggleExpanded()">{{key}}</span>' +
' <span class="json-tree-leaf-value" ng-if="!isExpandable">{{value}}</span>' +
' <span class="json-tree-branch-preview" ng-if="isExpandable" ng-show="!isExpanded" ng-click="toggleExpanded()">' +
' {preview}}</span>' +
' <ul class="json-tree-branch-value" ng-if="isExpandable && shouldRender" ng-show="isExpanded">' +
' <li ng-repeat="(subkey,subval) in value">' +
' <json-node key="subkey" value="subval"></json-node>' +
' </li>' +
' </ul>',
pre: function jsonNodeDirectiveLink(scope, elem, attrs) {
// Set value's type as Class for CSS styling
elem.addClass(utils.whatClass(scope.value).toLowerCase());
// If the value is an Array or Object, use expandable view type
if (utils.is(scope.value, 'Object') || utils.is(scope.value, 'Array')) {
scope.isExpandable = true;
// Add expandable class for CSS usage
elem.addClass('expandable');
// Setup preview text
var isArray = utils.is(scope.value, 'Array');
scope.preview = isArray ? '[ ' : '{ ';
utils.forKeys(scope.value, function jsonNodeDirectiveLinkForKeys(key, value) {
if (isArray) {
scope.preview += value + ', ';
} else {
scope.preview += key + ': ' + value + ', ';
}
});
scope.preview = scope.preview.substring(0, scope.preview.length - (scope.preview.length > 2 ? 2 : 0)) + (isArray ? ' ]' : ' }');
// If directive initially has isExpanded set, also set shouldRender to true
if (scope.startExpanded) {
scope.shouldRender = true;
elem.addClass('expanded');
}
// Setup isExpanded state handling
scope.isExpanded = scope.startExpanded ? scope.startExpanded() : false;
scope.toggleExpanded = function jsonNodeDirectiveToggleExpanded() {
scope.isExpanded = !scope.isExpanded;
if (scope.isExpanded) {
elem.addClass('expanded');
} else {
elem.removeClass('expanded');
}
// For delaying subnode render until requested
scope.shouldRender = true;
};
} else {
scope.isExpandable = false;
// Add expandable class for CSS usage
elem.addClass('not-expandable');
}
}
};
}]);
/** Added by: Alex Wendland (me@alexwendland.com), 2014-08-09
* Source: http://stackoverflow.com/questions/14430655/recursion-in-angular-directives
*
* Used to allow for recursion within directives
*/
coreModule.factory('ajsRecursiveDirectiveHelper', ['$compile', function RecursiveDirectiveHelper($compile) {
return {
/**
* Manually compiles the element, fixing the recursion loop.
* @param element
* @param [link] A post-link function, or an object with function(s) registered via pre and post properties.
* @returns An object containing the linking functions.
*/
compile: function RecursiveDirectiveHelperCompile(element, link) {
// Normalize the link parameter
if (angular.isFunction(link)) {
link = {
post: link
};
}
// Break the recursion loop by removing the contents
var contents = element.contents().remove();
var compiledContents;
return {
pre: (link && link.pre) ? link.pre : null,
/**
* Compiles and re-adds the contents
*/
post: function RecursiveDirectiveHelperCompilePost(scope, element) {
// Compile the contents
if (!compiledContents) {
compiledContents = $compile(contents);
}
// Re-add the compiled contents to the element
compiledContents(scope, function (clone) {
element.append(clone);
});
// Call the post-linking function, if any
if (link && link.post) {
link.post.apply(null, arguments);
}
}
};
}
};
}]);

4
pkg/api/dtos/alerting.go
Unescape View File

@ -42,8 +42,8 @@ type AlertTestCommand struct {
type AlertTestResult struct { type AlertTestResult struct {
Triggered bool `json:"triggerd"` Triggered bool `json:"triggerd"`
Timing string `json:"timing"` Timing string `json:"timing"`
Error string `json:"error"` Error string `json:"error,omitempty"`
Logs []*AlertTestResultLog `json:"logs"` Logs []*AlertTestResultLog `json:"logs,omitempty"`
} }
type AlertTestResultLog struct { type AlertTestResultLog struct {

4
pkg/tsdb/models.go
Unescape View File

@ -46,8 +46,8 @@ type QueryResult struct {
} }
type TimeSeries struct { type TimeSeries struct {
Name string Name string `json:"name"`
Points [][2]float64 Points [][2]float64 `json:"points"`
} }
type TimeSeriesSlice []*TimeSeries type TimeSeriesSlice []*TimeSeries

200
public/app/core/components/jsontree/jsontree.ts
Unescape View File

@ -0,0 +1,200 @@
/** Created by: Alex Wendland (me@alexwendland.com), 2014-08-06
*
* angular-json-tree
*
* Directive for creating a tree-view out of a JS Object. Only loads
* sub-nodes on demand in order to improve performance of rendering large
* objects.
*
* Attributes:
* - object (Object, 2-way): JS object to build the tree from
* - start-expanded (Boolean, 1-way, ?=true): should the tree default to expanded
*
* Usage:
* // In the controller
* scope.someObject = {
* test: 'hello',
* array: [1,1,2,3,5,8]
* };
* // In the html
* <json-tree object="someObject"></json-tree>
*
* Dependencies:
* - utils (json-tree.js)
* - ajsRecursiveDirectiveHelper (json-tree.js)
*
* Test: json-tree-test.js
*/
import angular from 'angular';
import coreModule from 'app/core/core_module';
var utils = {
/* See link for possible type values to check against.
* http://stackoverflow.com/questions/4622952/json-object-containing-array
*
* Value Class Type
* -------------------------------------
* "foo" String string
* new String("foo") String object
* 1.2 Number number
* new Number(1.2) Number object
* true Boolean boolean
* new Boolean(true) Boolean object
* new Date() Date object
* new Error() Error object
* [1,2,3] Array object
* new Array(1, 2, 3) Array object
* new Function("") Function function
* /abc/g RegExp object (function in Nitro/V8)
* new RegExp("meow") RegExp object (function in Nitro/V8)
* {} Object object
* new Object() Object object
*/
is: function is(obj, clazz) {
return Object.prototype.toString.call(obj).slice(8, -1) === clazz;
},
// See above for possible values
whatClass: function whatClass(obj) {
return Object.prototype.toString.call(obj).slice(8, -1);
},
// Iterate over an objects keyset
forKeys: function forKeys(obj, f) {
for (var key in obj) {
if (obj.hasOwnProperty(key) && typeof obj[key] !== 'function') {
if (f(key, obj[key])) {
break;
}
}
}
}
};
coreModule.directive('jsonTree', [function jsonTreeDirective() {
return {
restrict: 'E',
scope: {
object: '=',
startExpanded: '@',
rootName: '@',
},
template: '<json-node key="rootName" value="object" start-expanded="startExpanded"></json-node>'
};
}]);
coreModule.directive('jsonNode', ['ajsRecursiveDirectiveHelper', function jsonNodeDirective(ajsRecursiveDirectiveHelper) {
return {
restrict: 'E',
scope: {
key: '=',
value: '=',
startExpanded: '@'
},
compile: function jsonNodeDirectiveCompile(elem) {
return ajsRecursiveDirectiveHelper.compile(elem, this);
},
template: ' <span class="json-tree-key" ng-click="toggleExpanded()">{{key}}</span>' +
' <span class="json-tree-leaf-value" ng-if="!isExpandable">{{value}}</span>' +
' <span class="json-tree-branch-preview" ng-if="isExpandable" ng-show="!isExpanded" ng-click="toggleExpanded()">' +
' {{preview}}</span>' +
' <ul class="json-tree-branch-value" ng-if="isExpandable && shouldRender" ng-show="isExpanded">' +
' <li ng-repeat="(subkey,subval) in value">' +
' <json-node key="subkey" value="subval"></json-node>' +
' </li>' +
' </ul>',
pre: function jsonNodeDirectiveLink(scope, elem, attrs) {
// Set value's type as Class for CSS styling
elem.addClass(utils.whatClass(scope.value).toLowerCase());
// If the value is an Array or Object, use expandable view type
if (utils.is(scope.value, 'Object') || utils.is(scope.value, 'Array')) {
scope.isExpandable = true;
// Add expandable class for CSS usage
elem.addClass('expandable');
// Setup preview text
var isArray = utils.is(scope.value, 'Array');
scope.preview = isArray ? '[ ' : '{ ';
utils.forKeys(scope.value, function jsonNodeDirectiveLinkForKeys(key, value) {
if (isArray) {
scope.preview += value + ', ';
} else {
scope.preview += key + ': ' + value + ', ';
}
});
scope.preview = scope.preview.substring(0, scope.preview.length - (scope.preview.length > 2 ? 2 : 0)) + (isArray ? ' ]' : ' }');
// If directive initially has isExpanded set, also set shouldRender to true
if (scope.startExpanded) {
scope.shouldRender = true;
elem.addClass('expanded');
}
// Setup isExpanded state handling
scope.isExpanded = scope.startExpanded;
scope.toggleExpanded = function jsonNodeDirectiveToggleExpanded() {
scope.isExpanded = !scope.isExpanded;
if (scope.isExpanded) {
elem.addClass('expanded');
} else {
elem.removeClass('expanded');
}
// For delaying subnode render until requested
scope.shouldRender = true;
};
} else {
scope.isExpandable = false;
// Add expandable class for CSS usage
elem.addClass('not-expandable');
}
}
};
}]);
/** Added by: Alex Wendland (me@alexwendland.com), 2014-08-09
* Source: http://stackoverflow.com/questions/14430655/recursion-in-angular-directives
*
* Used to allow for recursion within directives
*/
coreModule.factory('ajsRecursiveDirectiveHelper', ['$compile', function RecursiveDirectiveHelper($compile) {
return {
/**
* Manually compiles the element, fixing the recursion loop.
* @param element
* @param [link] A post-link function, or an object with function(s) registered via pre and post properties.
* @returns An object containing the linking functions.
*/
compile: function RecursiveDirectiveHelperCompile(element, link) {
// Normalize the link parameter
if (angular.isFunction(link)) {
link = {
post: link
};
}
// Break the recursion loop by removing the contents
var contents = element.contents().remove();
var compiledContents;
return {
pre: (link && link.pre) ? link.pre : null,
/**
* Compiles and re-adds the contents
*/
post: function RecursiveDirectiveHelperCompilePost(scope, element) {
// Compile the contents
if (!compiledContents) {
compiledContents = $compile(contents);
}
// Re-add the compiled contents to the element
compiledContents(scope, function (clone) {
element.append(clone);
});
// Call the post-linking function, if any
if (link && link.post) {
link.post.apply(null, arguments);
}
}
};
}
};
}]);

1
public/app/core/core.ts
Unescape View File

@ -19,6 +19,7 @@ import "./directives/rebuild_on_change";
import "./directives/give_focus"; import "./directives/give_focus";
import './jquery_extended'; import './jquery_extended';
import './partials'; import './partials';
import './components/jsontree/jsontree';
import {grafanaAppDirective} from './components/grafana_app'; import {grafanaAppDirective} from './components/grafana_app';
import {sideMenuDirective} from './components/sidemenu/sidemenu'; import {sideMenuDirective} from './components/sidemenu/sidemenu';

2
public/app/plugins/panel/graph/alert_tab_ctrl.ts
Unescape View File

@ -150,7 +150,7 @@ export class AlertTabCtrl {
}; };
return this.backendSrv.post('/api/alerts/test', payload).then(res => { return this.backendSrv.post('/api/alerts/test', payload).then(res => {
this.testResult = angular.toJson(res, true); this.testResult = res;
this.testing = false; this.testing = false;
}); });
} }

4
public/app/plugins/panel/graph/partials/tab_alerting.html
Unescape View File

@ -132,9 +132,7 @@
</div> </div>
<div class="gf-form-group" ng-if="ctrl.testResult"> <div class="gf-form-group" ng-if="ctrl.testResult">
<pre> <json-tree root-name="result" object="ctrl.testResult" start-expanded="true"></json-tree>
{{ctrl.testResult}}
</pre>
</div> </div>
<div class="gf-form-group" ng-if="!ctrl.alert.enabled"> <div class="gf-form-group" ng-if="!ctrl.alert.enabled">

1
public/sass/_grafana.scss
Unescape View File

@ -71,6 +71,7 @@
@import "components/query_editor"; @import "components/query_editor";
@import "components/tabbed_view"; @import "components/tabbed_view";
@import "components/query_part"; @import "components/query_part";
@import "components/jsontree";
// PAGES // PAGES
@import "pages/login"; @import "pages/login";

61
public/sass/components/_jsontree.scss
Unescape View File

@ -0,0 +1,61 @@
/* Structure */
json-tree {
.json-tree-key {
vertical-align: middle;
}
.expandable {
position: relative;
&::before {
pointer-events: none;
}
&::before, & > .key {
cursor: pointer;
}
}
.json-tree-branch-preview {
display: inline-block;
vertical-align: middle;
}
}
/* Looks */
json-tree {
ul {
padding-left: $spacer;
}
li, ul {
list-style: none;
}
li {
line-height: 1.3rem;
}
.json-tree-key {
color: $variable;
padding: 5px 10px 5px 15px;
&::after {
content: ':';
}
}
json-node.expandable {
&::before {
content: '\25b6';
position: absolute;
left: 0px;
font-size: 10px;
transition: transform .1s ease;
}
&.expanded::before {
transform: rotate(90deg);
}
}
.json-tree-leaf-value, .json-tree-branch-preview {
word-break: break-all;
}
.json-tree-branch-preview {
overflow: hidden;
font-style: italic;
max-width: 40%;
height: 1.5em;
opacity: .7;
}
}
Write Preview
Loading…
Cancel
Save