Merge pull request #4541 from hashicorp/f-ui-new-json-viewer

UI: New JSON viewer

ui/app/components/json-viewer.js

@@ -1,33 +1,11 @@
 import Component from '@ember/component';
 import { computed } from '@ember/object';
-import { run } from '@ember/runloop';
-import { copy } from '@ember/object/internals';
-import JSONFormatter from 'json-formatter-js';
 
 export default Component.extend({
   classNames: ['json-viewer'],
 
   json: null,
-  expandDepth: Infinity,
-
-  formatter: computed('json', 'expandDepth', function() {
-    return new JSONFormatter(copy(this.get('json'), true), this.get('expandDepth'), {
-      theme: 'nomad',
-    });
+  jsonStr: computed('json', function() {
+    return JSON.stringify(this.get('json'), null, 2);
   }),
-
-  didReceiveAttrs() {
-    const json = this.get('json');
-    if (!json) {
-      return;
-    }
-
-    run.scheduleOnce('afterRender', this, embedViewer);
-  },
 });
-
-function embedViewer() {
-  this.$()
-    .empty()
-    .append(this.get('formatter').render());
-}

ui/app/styles/components.scss

@@ -1,6 +1,7 @@
 @import './components/accordion';
 @import './components/badge';
 @import './components/boxed-section';
+@import './components/codemirror';
 @import './components/cli-window';
 @import './components/dropdown';
 @import './components/ember-power-select';
@@ -10,7 +11,6 @@
 @import './components/gutter-toggle';
 @import './components/inline-definitions';
 @import './components/job-diff';
-@import './components/json-viewer';
 @import './components/loading-spinner';
 @import './components/metrics';
 @import './components/node-status-light';

ui/app/styles/components/boxed-section.scss

@@ -65,7 +65,7 @@
     }
 
     &.is-dark {
-      background: darken($dark, 5%);
+      background: $dark-2;
       border-color: lighten($dark, 30%);
       color: $white;
     }

ui/app/styles/components/codemirror.scss

@@ -0,0 +1,127 @@
+$dark-bright: lighten($dark, 15%);
+
+.CodeMirror {
+  height: auto;
+}
+
+.cm-s-hashi,
+.cm-s-hashi-read-only {
+  &.CodeMirror {
+    background-color: $dark-3;
+    color: $grey-blue;
+    border: none;
+    font-family: $family-monospace;
+    -webkit-font-smoothing: auto;
+    line-height: 1.4;
+  }
+
+  .CodeMirror-gutters {
+    background-color: $dark-2;
+    border: none;
+  }
+
+  .CodeMirror-cursor {
+    border-left: solid thin $white-ter;
+  }
+
+  .CodeMirror-linenumber {
+    color: $dark-bright;
+  }
+
+  &.CodeMirror-focused div.CodeMirror-selected {
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  .CodeMirror-line::selection,
+  .CodeMirror-line > span::selection,
+  .CodeMirror-line > span > span::selection {
+    background: rgba(255, 255, 255, 0.1);
+  }
+
+  span.cm-comment {
+    color: $grey-light;
+  }
+
+  span.cm-string,
+  span.cm-string-2 {
+    color: $nomad-green;
+  }
+
+  span.cm-number {
+    color: $serf-red;
+  }
+
+  span.cm-variable {
+    color: $packer-blue;
+  }
+
+  span.cm-variable-2 {
+    color: $packer-blue;
+  }
+
+  span.cm-def {
+    color: $nomad-green;
+  }
+
+  span.cm-operator {
+    color: $grey;
+  }
+  span.cm-keyword {
+    color: $yellow;
+  }
+
+  span.cm-atom {
+    color: $terraform-purple-bright;
+  }
+
+  span.cm-meta {
+    color: $nomad-green;
+  }
+
+  span.cm-tag {
+    color: $nomad-green;
+  }
+
+  span.cm-attribute {
+    color: $consul-pink;
+  }
+
+  span.cm-qualifier {
+    color: $consul-pink;
+  }
+
+  span.cm-property {
+    color: $nomad-green;
+  }
+
+  span.cm-variable-3 {
+    color: $consul-pink;
+  }
+
+  span.cm-builtin {
+    color: $consul-pink;
+  }
+
+  .CodeMirror-activeline-background {
+    background: $black-ter;
+  }
+
+  .CodeMirror-matchingbracket {
+    text-decoration: underline;
+    color: $white;
+  }
+}
+
+.cm-s-auto-height.CodeMirror {
+  height: auto;
+}
+
+.cm-s-hashi-read-only {
+  &.CodeMirror {
+    background-color: $dark-2;
+  }
+
+  .CodeMirror-gutters {
+    background-color: $dark-2;
+  }
+}

ui/app/styles/core/variables.scss

@@ -11,6 +11,8 @@ $warning-invert: $white;
 $danger: $red;
 $info: $blue;
 $dark: #234;
+$dark-2: darken($dark, 5%);
+$dark-3: darken($dark, 10%);
 
 $radius: 2px;
 

ui/app/styles/utils/product-colors.scss

@@ -4,6 +4,7 @@ $consul-pink-dark: #c62a71;
 $packer-blue: #1daeff;
 $packer-blue-dark: #1d94dd;
 
+$terraform-purple-bright: #807dea;
 $terraform-purple: #5c4ee5;
 $terraform-purple-dark: #4040b2;
 
@@ -13,3 +14,5 @@ $vagrant-blue-dark: #104eb2;
 $nomad-green: #25ba81;
 $nomad-green-dark: #1d9467;
 $nomad-green-darker: #16704d;
+
+$serf-red: #dd4e58;

ui/app/templates/components/freestyle/sg-json-viewer.hbs

@@ -13,19 +13,3 @@
     </div>
   </div>
 {{/freestyle-usage}}
-
-{{#freestyle-collection defaultKey=0 as |collection|}}
-  {{#each (array 0 1 2 3 4 5) as |depth|}}
-    {{#collection.variant key=depth}}
-      {{#freestyle-usage
-        (concat "json-viewer-truncated-" depth)
-        title=(concat "JSON Viewer Expand Depth " depth)}}
-        <div class="boxed-section">
-          <div class="boxed-section-body is-dark">
-            {{json-viewer json=jsonLarge expandDepth=depth}}
-          </div>
-        </div>
-      {{/freestyle-usage}}
-    {{/collection.variant}}
-  {{/each}}
-{{/freestyle-collection}}

ui/app/templates/components/json-viewer.hbs

@@ -0,0 +1,9 @@
+{{ivy-codemirror
+  value=jsonStr
+  options=(hash
+    mode="javascript"
+    theme="hashi-read-only"
+    tabSize=2
+    lineNumbers=true
+    readOnly=true
+  )}}

ui/app/templates/jobs/job/definition.hbs

@@ -1,7 +1,7 @@
 {{partial "jobs/job/subnav"}}
 <section class="section">
   <div class="boxed-section">
-    <div class="boxed-section-body is-dark">
+    <div class="boxed-section-body is-full-bleed">
       {{json-viewer data-test-definition-view json=model.definition}}
     </div>
   </div>