Styleguide entry for the JSON Viewer

ui/app/components/freestyle/sg-json-viewer.js

@@ -0,0 +1,148 @@
+import Component from '@ember/component';
+
+export default Component.extend({
+  jsonSmall: {
+    foo: 'bar',
+    number: 123456789,
+    products: ['Consul', 'Nomad', 'Packer', 'Terraform', 'Vagrant', 'Vault'],
+    currentTime: new Date().toISOString(),
+    nested: {
+      obj: 'ject',
+    },
+    nonexistent: null,
+    huh: undefined,
+    isTrue: false,
+  },
+
+  jsonLarge: {
+    Stop: false,
+    Region: 'global',
+    Namespace: 'default',
+    ID: 'syslog',
+    ParentID: '',
+    Name: 'syslog',
+    Type: 'system',
+    Priority: 50,
+    AllAtOnce: false,
+    Datacenters: ['dc1', 'dc2'],
+    Constraints: null,
+    TaskGroups: [
+      {
+        Name: 'syslog',
+        Count: 1,
+        Update: {
+          Stagger: 10000000000,
+          MaxParallel: 1,
+          HealthCheck: 'checks',
+          MinHealthyTime: 10000000000,
+          HealthyDeadline: 300000000000,
+          ProgressDeadline: 600000000000,
+          AutoRevert: false,
+          Canary: 0,
+        },
+        Migrate: null,
+        Constraints: [
+          {
+            LTarget: '',
+            RTarget: '',
+            Operand: 'distinct_hosts',
+          },
+        ],
+        RestartPolicy: {
+          Attempts: 10,
+          Interval: 300000000000,
+          Delay: 25000000000,
+          Mode: 'delay',
+        },
+        Tasks: [
+          {
+            Name: 'syslog',
+            Driver: 'docker',
+            User: '',
+            Config: {
+              port_map: [
+                {
+                  tcp: 601.0,
+                  udp: 514.0,
+                },
+              ],
+              image: 'balabit/syslog-ng:latest',
+            },
+            Env: null,
+            Services: null,
+            Vault: null,
+            Templates: null,
+            Constraints: null,
+            Resources: {
+              CPU: 500,
+              MemoryMB: 256,
+              DiskMB: 0,
+              IOPS: 0,
+              Networks: [
+                {
+                  Device: '',
+                  CIDR: '',
+                  IP: '',
+                  MBits: 10,
+                  ReservedPorts: [
+                    {
+                      Label: 'udp',
+                      Value: 514,
+                    },
+                    {
+                      Label: 'tcp',
+                      Value: 601,
+                    },
+                  ],
+                  DynamicPorts: null,
+                },
+              ],
+            },
+            DispatchPayload: null,
+            Meta: null,
+            KillTimeout: 5000000000,
+            LogConfig: {
+              MaxFiles: 10,
+              MaxFileSizeMB: 10,
+            },
+            Artifacts: null,
+            Leader: false,
+            ShutdownDelay: 0,
+            KillSignal: '',
+          },
+        ],
+        EphemeralDisk: {
+          Sticky: false,
+          SizeMB: 300,
+          Migrate: false,
+        },
+        Meta: null,
+        ReschedulePolicy: null,
+      },
+    ],
+    Update: {
+      Stagger: 10000000000,
+      MaxParallel: 1,
+      HealthCheck: '',
+      MinHealthyTime: 0,
+      HealthyDeadline: 0,
+      ProgressDeadline: 0,
+      AutoRevert: false,
+      Canary: 0,
+    },
+    Periodic: null,
+    ParameterizedJob: null,
+    Dispatched: false,
+    Payload: null,
+    Meta: null,
+    VaultToken: '',
+    Status: 'running',
+    StatusDescription: '',
+    Stable: false,
+    Version: 0,
+    SubmitTime: 1530052201331477665,
+    CreateIndex: 27,
+    ModifyIndex: 27,
+    JobModifyIndex: 27,
+  },
+});

ui/app/styles/styleguide.scss

@@ -6,7 +6,7 @@
 
     .mock-image,
     .mock-copy {
-      height: 100%;
+      min-height: 100%;
       width: 100%;
       margin: 1em;
     }

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

@@ -0,0 +1,31 @@
+{{#freestyle-usage "json-viewer" title="JSON Viewer"}}
+  <div class="boxed-section">
+    <div class="boxed-section-body is-dark">
+      {{json-viewer json=jsonSmall}}
+    </div>
+  </div>
+{{/freestyle-usage}}
+
+{{#freestyle-usage "json-viewer-full" title="JSON Viewer for Full Document"}}
+  <div class="boxed-section">
+    <div class="boxed-section-body is-dark">
+      {{json-viewer json=jsonLarge}}
+    </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/freestyle.hbs

@@ -47,8 +47,11 @@
       {{#section.subsection name="Inline definitions"}}
         {{freestyle/sg-inline-definitions}}
       {{/section.subsection}}
+
       {{#section.subsection name="JSON Viewer"}}
+        {{freestyle/sg-json-viewer}}
       {{/section.subsection}}
+
       {{#section.subsection name="Log Stream"}}
       {{/section.subsection}}
       {{#section.subsection name="Metric"}}