[Issue-83] Add overflow scroll (#84)

Author: Crim

CHANGELOG.md

@@ -7,7 +7,8 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 - [Issue#72](https://github.com/SourceLabOrg/kafka-webview/issues/72) Bugfix User role input not displayed when creating new user.
 - [Issue#81](https://github.com/SourceLabOrg/kafka-webview/issues/81) Bugfix Handle NoClassDefFoundError exceptions gracefully.
 - [Issue#74](https://github.com/SourceLabOrg/kafka-webview/issues/74) Improvement UI Tweak to display large number of partitions in datatable views.
-- [Issue#71](https://github.com/SourceLabOrg/kafka-webview/issues/71) Improvement Topics sorted in select boxes. 
+- [Issue#71](https://github.com/SourceLabOrg/kafka-webview/issues/71) Improvement Topics sorted in select boxes.
+- [Issue#83](https://github.com/SourceLabOrg/kafka-webview/issues/83) Improvement Wrap key and message values in <pre></pre> tags. 
 
 ## 1.0.4 (06/11/2018)
 - Update NPM dependencies for [CVE-2017-18214](https://nvd.nist.gov/vuln/detail/CVE-2017-18214).

kafka-webview-ui/src/main/frontend/css/style.css

@@ -8814,3 +8814,7 @@ hr.transparent {
   top: 0;
   width: 20px;
   height: 20px; }
+
+.overflow-scroll {
+    overflow: scroll;
+}

kafka-webview-ui/src/main/resources/templates/stream/index.html

@@ -26,7 +26,7 @@
                             </a>
                         </div>
                     </div>
-                    <div class="card-body">
+                    <div class="card-body overflow-scroll">
 
                         <!-- Stream Controls -->
                         <div class="row">
@@ -320,8 +320,8 @@ <h4 class="alert-heading">Stream Disconnected</h4>
                 <span class="timestamp" title="{{date}}">{{timestamp}}</span>
                 {{/if}}
             </td>
-            <td>{{key}}</td>
-            <td>{{value}}</td>
+            <td><pre>{{key}}</pre></td>
+            <td><pre>{{value}}</pre></td>
         </tr>
     </script>
 </section>

kafka-webview-ui/src/main/resources/templates/view/consume.html

@@ -300,7 +300,7 @@
                             </a>
                         </div>
                     </div>
-                    <div class="card-body">
+                    <div class="card-body overflow-scroll">
 
                         <!-- Display Loader First -->
                         <div class="alert alert-light" role="alert" id="loader" style="display: block;">
@@ -393,8 +393,8 @@ <h4 class="alert-heading">No Results Found</h4>
                     <span class="timestamp" title="{{date}}">{{timestamp}}</span>
                     {{/if}}
                 </td>
-                <td>{{key}}</td>
-                <td>{{value}}</td>
+                <td><pre>{{key}}</pre></td>
+                <td><pre>{{value}}</pre></td>
             </tr>
         </script>
     </div>