grafana/public/app/core/components/jsontree/jsontree.ts

/** 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);
          }
        }
      };
    }
  };
}]);