mirror of
https://github.com/grafana/grafana.git
synced 2025-07-31 03:22:14 +08:00
feat(alerting): test results look better
This commit is contained in:
Torkel Ödegaard
200
'
Normal file
200
'
Normal 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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}]);
|
||||||
@ -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 {
|
||||||
|
|||||||
@ -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
Normal file
200
public/app/core/components/jsontree/jsontree.ts
Normal 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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}]);
|
||||||
@ -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';
|
||||||
|
|||||||
@ -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;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|||||||
@ -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">
|
||||||
|
|||||||
@ -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
Normal file
61
public/sass/components/_jsontree.scss
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user