Merge pull request #80 from draftedus/pre-tag-format

Styling and formatting fixes for jobDetails view
bee-queue · Jan 4, 2018 · be866d3 · be866d3
2 parents f5ea23d + 72c89c1
commit be866d3
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 10 deletions.
diff --git a/public/dashboard.css b/public/dashboard.css
@@ -133,3 +133,8 @@ body {
 .select-all-text {
   font-weight: 400;
 }
+
+pre {
+  max-height: 250px;
+  overflow-y: auto;
+}
diff --git a/src/server/views/dashboard/templates/queueJobsByState.hbs b/src/server/views/dashboard/templates/queueJobsByState.hbs
@@ -101,7 +101,7 @@
               </h4>
             </a>
             <div id="collapse{{encodeIdAttr this.id}}" class="collapse">
-              {{> dashboard/jobDetails this basePath=../basePath displayJobInline=true queueName=../queueName queueHost=../queueHost jobState=../state }}
+              {{~> dashboard/jobDetails this basePath=../basePath displayJobInline=true queueName=../queueName queueHost=../queueHost jobState=../state }}
             </div>
           </li>
         {{/each}}

diff --git a/src/server/views/helpers/handlebars.js b/src/server/views/helpers/handlebars.js
@@ -1,12 +1,15 @@
 const _ = require('lodash');
+const Handlerbars = require('handlebars');
 
 const helpers = {
   json(obj, pretty = false) {
+    var d;
     if (pretty) {
-      var d = JSON.stringify(obj, null, 2);
-      return d;
+      d = JSON.stringify(obj, null, 2);
+    } else {
+      d = JSON.stringify(obj);
     }
-    return JSON.stringify(obj);
+    return new Handlerbars.SafeString(d);
   },
 
   adjustedPage(currentPage, pageSize, newPageSize) {
@@ -25,7 +28,7 @@ const helpers = {
         block = blocks[name] || (blocks[name] = []);
     block.push(options.fn(this));
   },
-  
+
   encodeIdAttr: function (id) {
       return id.replace(/:| /g, "");
   }

diff --git a/src/server/views/layout.hbs b/src/server/views/layout.hbs
@@ -9,6 +9,12 @@
     <!-- Bootstrap core CSS -->
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.7/css/bootstrap.min.css">
     <link rel="stylesheet" href="{{ basePath }}/dashboard.css">
+
+    <!-- JSON Viewer -->
+    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/styles/default.min.css">
+    <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.12.0/highlight.min.js"></script>
+    <script>hljs.initHighlightingOnLoad();</script>
+
   </head>
   <body>
     <nav class="navbar navbar-inverse navbar-fixed-top">

diff --git a/src/server/views/partials/dashboard/jobDetails.hbs b/src/server/views/partials/dashboard/jobDetails.hbs
@@ -37,8 +37,9 @@
       {{length this.options.stacktraces}}
     {{/if}}
   </div>
-
-  <div class="col-sm-3">
+</div>
+<div class="row">
+  <div class="col-sm-4">
     <h5>Permalinks</h5>
     <a href="{{ basePath }}/{{ encodeURI queueHost }}/{{ encodeURI queueName }}/{{ this.id }}" class="btn btn-info">Job {{ this.id }}</a>
     <a href="{{ basePath }}/{{ encodeURI queueHost }}/{{ encodeURI queueName }}/{{ this.id }}?json=true" class="btn btn-info">JSON</a>
@@ -63,12 +64,13 @@
 {{/unless}}
 
 {{#if this.returnvalue}}
-<pre>{{ this.returnvalue }}</pre>
+<h5>Return Value</h5>
+<pre><code class="json">{{json this.returnvalue true}}</code></pre>
 {{/if}}
 
 {{#if this.failedReason}}
 <h5>Reason for failure</h5>
-<pre>{{ this.failedReason }}</pre>
+<pre><code>{{this.failedReason}}</code></pre>
 {{/if}}
 
 {{#eq jobState 'failed'}}
@@ -87,4 +89,4 @@
 {{/eq}}
 
 <h5>Data</h5>
-<pre>{{ json this.data }}</pre>
+<pre><code class="json">{{json this.data true}}</code></pre>