feat: moved json-formatter-js into core grafana to be able to make changes

package.json

@@ -68,7 +68,6 @@
     "grunt-jscs": "3.0.1",
     "grunt-sass-lint": "^0.2.2",
     "grunt-sync": "^0.6.2",
-    "json-formatter-js": "^2.2.0",
     "karma-sinon": "^1.0.5",
     "lodash": "^4.17.2",
     "mousetrap": "^1.6.0",

public/app/core/components/json_explorer/helpers.ts

+// Based on work https://github.com/mohsen1/json-formatter-js
+// Licence MIT, Copyright (c) 2015 Mohsen Azimi
+
+/*
+ * Escapes `"` charachters from string
+*/
+function escapeString(str: string): string {
+  return str.replace('"', '\"');
+}
+
+/*
+ * Determines if a value is an object
+*/
+export function isObject(value: any): boolean {
+  var type = typeof value;
+  return !!value && (type === 'object');
+}
+
+/*
+ * Gets constructor name of an object.
+ * From http://stackoverflow.com/a/332429
+ *
+*/
+export function getObjectName(object: Object): string {
+  if (object === undefined) {
+    return '';
+  }
+  if (object === null) {
+    return 'Object';
+  }
+  if (typeof object === 'object' && !object.constructor) {
+      return 'Object';
+  }
+
+  const funcNameRegex = /function ([^(]*)/;
+  const results = (funcNameRegex).exec((object).constructor.toString());
+  if (results && results.length > 1) {
+    return results[1];
+  } else {
+    return '';
+  }
+}
+
+/*
+ * Gets type of an object. Returns "null" for null objects
+*/
+export function getType(object: Object): string {
+  if (object === null) { return 'null'; }
+  return typeof object;
+}
+
+/*
+ * Generates inline preview for a JavaScript object based on a value
+*/
+export function getValuePreview (object: Object, value: string): string {
+  var type = getType(object);
+
+  if (type === 'null' || type === 'undefined') { return type; }
+
+  if (type === 'string') {
+    value = '"' + escapeString(value) + '"';
+  }
+  if (type === 'function'){
+
+    // Remove content of the function
+    return object.toString()
+        .replace(/[\r\n]/g, '')
+        .replace(/\{.*\}/, '') + '{…}';
+  }
+  return value;
+}
+
+/*
+ * Generates inline preview for a JavaScript object
+*/
+export function getPreview(object: string): string {
+  let value = '';
+  if (isObject(object)) {
+    value = getObjectName(object);
+    if (Array.isArray(object)) {
+      value += '[' + object.length + ']';
+    }
+  } else {
+    value = getValuePreview(object, object);
+  }
+  return value;
+}
+
+/*
+ * Generates a prefixed CSS class name
+*/
+export function cssClass(className: string): string {
+  return `json-formatter-${className}`;
+}
+
+/*
+  * Creates a new DOM element wiht given type and class
+  * TODO: move me to helpers
+*/
+export function createElement(type: string, className?: string, content?: Element|string): Element {
+  const el = document.createElement(type);
+  if (className) {
+    el.classList.add(cssClass(className));
+  }
+  if (content !== undefined) {
+    if (content instanceof Node) {
+      el.appendChild(content);
+    } else {
+      el.appendChild(document.createTextNode(String(content)));
+    }
+  }
+  return el;
+}

public/app/core/components/jsonview/helpers.ts

-// #<{(|
-//  * Escapes `"` charachters from string
-// |)}>#
-// function escapeString(str: string): string {
-//   return str.replace('"', '\"');
-// }
-//
-// #<{(|
-//  * Determines if a value is an object
-// |)}>#
-// export function isObject(value: any): boolean {
-//   var type = typeof value;
-//   return !!value && (type === 'object');
-// }
-//
-// #<{(|
-//  * Gets constructor name of an object.
-//  * From http://stackoverflow.com/a/332429
-//  *
-// |)}>#
-// export function getObjectName(object: Object): string {
-//   if (object === undefined) {
-//     return '';
-//   }
-//   if (object === null) {
-//     return 'Object';
-//   }
-//   if (typeof object === 'object' && !object.constructor) {
-//       return 'Object';
-//   }
-//
-//   const funcNameRegex = /function ([^(]*)/;
-//   const results = (funcNameRegex).exec((object).constructor.toString());
-//   if (results && results.length > 1) {
-//     return results[1];
-//   } else {
-//     return '';
-//   }
-// }
-//
-// #<{(|
-//  * Gets type of an object. Returns "null" for null objects
-// |)}>#
-// export function getType(object: Object): string {
-//   if (object === null) { return 'null'; }
-//   return typeof object;
-// }
-//
-// #<{(|
-//  * Generates inline preview for a JavaScript object based on a value
-// |)}>#
-// export function getValuePreview (object: Object, value: string): string {
-//   var type = getType(object);
-//
-//   if (type === 'null' || type === 'undefined') { return type; }
-//
-//   if (type === 'string') {
-//     value = '"' + escapeString(value) + '"';
-//   }
-//   if (type === 'function'){
-//
-//     // Remove content of the function
-//     return object.toString()
-//         .replace(/[\r\n]/g, '')
-//         .replace(/\{.*\}/, '') + '{…}';
-//   }
-//   return value;
-// }
-//
-// #<{(|
-//  * Generates inline preview for a JavaScript object
-// |)}>#
-// export function getPreview(object: string): string {
-//   let value = '';
-//   if (isObject(object)) {
-//     value = getObjectName(object);
-//     if (Array.isArray(object)) {
-//       value += '[' + object.length + ']';
-//     }
-//   } else {
-//     value = getValuePreview(object, object);
-//   }
-//   return value;
-// }
-//
-// #<{(|
-//  * Generates a prefixed CSS class name
-// |)}>#
-// export function cssClass(className: string): string {
-//   return `json-formatter-${className}`;
-// }
-//
-// #<{(|
-//   * Creates a new DOM element wiht given type and class
-//   * TODO: move me to helpers
-// |)}>#
-// export function createElement(type: string, className?: string, content?: Element|string): Element {
-//   const el = document.createElement(type);
-//   if (className) {
-//     el.classList.add(cssClass(className));
-//   }
-//   if (content !== undefined) {
-//     if (content instanceof Node) {
-//       el.appendChild(content);
-//     } else {
-//       el.appendChild(document.createTextNode(String(content)));
-//     }
-//   }
-//   return el;
-// }

public/app/core/components/response_viewer.ts

 ///<reference path="../../headers/common.d.ts" />
 
 import coreModule from 'app/core/core_module';
-import JsonFormatter from 'json-formatter-js';
+import JsonExplorer from './json_explorer/json_explorer';
 
 
 const template = `
@@ -48,7 +48,7 @@ export function responseViewer() {
         }
 
 
-        const formatter =  new JsonFormatter(scope.response, 2, {
+        const formatter =  new JsonExplorer(scope.response, 2, {
           theme: 'dark',
         });
 

public/app/system.conf.js

@@ -33,7 +33,6 @@ System.config({
     "jquery.flot.gauge": "vendor/flot/jquery.flot.gauge",
     "d3": "vendor/d3/d3.js",
     "jquery.flot.dashes": "vendor/flot/jquery.flot.dashes",
-    "json-formatter-js": "vendor/npm/json-formatter-js/dist/json-formatter"
   },
 
   packages: {

public/sass/_grafana.scss

@@ -76,6 +76,7 @@
 @import "components/edit_sidemenu.scss";
 @import "components/row.scss";
 @import "components/response_viewer.scss";
+@import "components/json_explorer.scss";
 
 // PAGES
 @import "pages/login";

public/sass/components/_json_explorer.scss

+@mixin json-explorer-theme(
+  $default-color: black,
+  $string-color: green,
+  $number-color: blue,
+  $boolean-color: red,
+  $null-color: #855A00,
+  $undefined-color: rgb(202, 11, 105),
+  $function-color: #FF20ED,
+  $rotate-time: 100ms,
+  $toggler-opacity: 0.6,
+  $toggler-color: #45376F,
+  $bracket-color: blue,
+  $key-color: #00008B,
+  $url-color: blue) {
+
+  font-family: monospace;
+  &, a, a:hover {
+    color: $default-color;
+    text-decoration: none;
+  }
+
+  .json-formatter-row {
+    margin-left: 1rem;
+  }
+
+  .json-formatter-children {
+    &.json-formatter-empty {
+      opacity: 0.5;
+      margin-left: 1rem;
+
+      &::after { display: none; }
+      &.json-formatter-object::after { content: "No properties"; }
+      &.json-formatter-array::after { content: "[]"; }
+    }
+  }
+
+  .json-formatter-string {
+    color: $string-color;
+    white-space: pre;
+    word-wrap: break-word;
+  }
+  .json-formatter-number { color: $number-color; }
+  .json-formatter-boolean { color: $boolean-color; }
+  .json-formatter-null { color: $null-color; }
+  .json-formatter-undefined { color: $undefined-color; }
+  .json-formatter-function { color: $function-color; }
+  .json-formatter-date { background-color: fade($default-color, 5%); }
+  .json-formatter-url {
+    text-decoration: underline;
+    color: $url-color;
+    cursor: pointer;
+  }
+
+  .json-formatter-bracket { color: $bracket-color; }
+  .json-formatter-key {
+    color: $key-color;
+    cursor: pointer;
+    padding-right: 0.2rem;
+  }
+  .json-formatter-constructor-name {
+    cursor: pointer;
+  }
+
+  .json-formatter-toggler {
+    line-height: 1.2rem;
+    font-size: 0.7rem;
+    vertical-align: middle;
+    opacity: $toggler-opacity;
+    cursor: pointer;
+    padding-right: 0.2rem;
+
+    &::after {
+      display: inline-block;
+      transition: transform $rotate-time ease-in;
+      content: "►";
+    }
+  }
+
+  // Inline preview on hover (optional)
+  > a > .json-formatter-preview-text {
+    opacity: 0;
+    transition: opacity .15s ease-in;
+    font-style: italic;
+  }
+
+  &:hover > a > .json-formatter-preview-text {
+    opacity: 0.6;
+  }
+
+  // Open state
+  &.json-formatter-open {
+    > .json-formatter-toggler-link .json-formatter-toggler::after{
+      transform: rotate(90deg);
+    }
+    > .json-formatter-children::after {
+      display: inline-block;
+    }
+    > a > .json-formatter-preview-text {
+      display: none;
+    }
+    &.json-formatter-empty::after {
+      display: block;
+    }
+  }
+}
+
+
+.json-formatter-row {
+  @include json-explorer-theme();
+}
+
+// Dark theme
+.json-formatter-dark.json-formatter-row {
+  @include json-explorer-theme(
+    $default-color: white,
+    $string-color: #31F031,
+    $number-color: #66C2FF,
+    $boolean-color: #EC4242,
+    $null-color: #EEC97D,
+    $undefined-color: rgb(239, 143, 190),
+    $function-color: #FD48CB,
+    $rotate-time: 100ms,
+    $toggler-opacity: 0.6,
+    $toggler-color: #45376F,
+    $bracket-color: #9494FF,
+    $key-color: #23A0DB,
+    $url-color: #027BFF);
+}

public/test/test-main.js

@@ -41,7 +41,6 @@
       "jquery.flot.gauge": "vendor/flot/jquery.flot.gauge",
       "d3": "vendor/d3/d3.js",
       "jquery.flot.dashes": "vendor/flot/jquery.flot.dashes",
-      "json-formatter-js": "vendor/npm/json-formatter-js/dist/json-formatter"
     },
 
     packages: {

tasks/options/copy.js

@@ -34,7 +34,6 @@ module.exports = function(config) {
         'remarkable/dist/*',
         'virtual-scroll/**/*',
         'mousetrap/**/*',
-        'json-formatter-js/dist/*.js',
       ],
       dest: '<%= srcDir %>/vendor/npm'
     }

yarn.lock

@@ -2561,10 +2561,6 @@ jshint@~2.9.4:
     shelljs "0.3.x"
     strip-json-comments "1.0.x"
 
-json-formatter-js@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/json-formatter-js/-/json-formatter-js-2.2.0.tgz#1ed987223ef2f1d945304597faae78b580a8212b"
-
 json-schema@0.2.3:
   version "0.2.3"
   resolved "https://registry.yarnpkg.com/json-schema/-/json-schema-0.2.3.tgz#b480c892e59a2f05954ce727bd3f2a4e882f9e13"