From a94f2ee7b82734f5e4c11e29de4606032d5b2577 Mon Sep 17 00:00:00 2001
From: Hasnat <hasnat.ullah@gmail.com>
Date: Tue, 10 Jul 2018 20:06:45 +0100
Subject: [PATCH] feat(log-viewer): add the ability to wrap lines (#1972)

* feat(log-viewer): Split auto scrolling & log refresh + adds wrap lines option

* feat(log-viewer): Get rid of scroll lock changes

* feat(log-viewer): remove function call in view [code review changes]
---
 app/docker/components/log-viewer/logViewer.html      | 12 +++++++++++-
 .../components/log-viewer/logViewerController.js     |  1 +
 assets/css/app.css                                   |  5 ++++-
 3 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/app/docker/components/log-viewer/logViewer.html b/app/docker/components/log-viewer/logViewer.html
index 8abda6ee5..9e1f95c02 100644
--- a/app/docker/components/log-viewer/logViewer.html
+++ b/app/docker/components/log-viewer/logViewer.html
@@ -15,6 +15,16 @@
               </label>
             </div>
           </div>
+          <div class="form-group">
+            <div class="col-sm-12">
+              <label for="tls" class="control-label text-left">
+                Wrap lines
+              </label>
+              <label class="switch" style="margin-left: 20px;">
+                <input type="checkbox" ng-model="$ctrl.state.wrapLines"><i></i>
+              </label>
+            </div>
+          </div>
           <div class="form-group">
             <div class="col-sm-12">
               <label for="tls" class="control-label text-left">
@@ -62,7 +72,7 @@
 
 <div class="row" style="height:54%;">
   <div class="col-sm-12" style="height:100%;">
-    <pre class="log_viewer" scroll-glue="$ctrl.state.autoScroll" force-glue>
+    <pre ng-class="{ 'wrap_lines': $ctrl.state.wrapLines }" class="log_viewer" scroll-glue="$ctrl.state.autoScroll" force-glue>
       <div ng-repeat="line in $ctrl.state.filteredLogs = ($ctrl.data | filter:$ctrl.state.search) track by $index" class="line" ng-if="line"><p class="inner_line" ng-click="$ctrl.selectLine(line)" ng-class="{ 'line_selected': $ctrl.state.selectedLines.indexOf(line) > -1 }">{{ line }}</p></div>
       <div ng-if="!$ctrl.state.filteredLogs.length" class="line"><p class="inner_line">No log line matching the '{{ $ctrl.state.search }}' filter</p></div>
       <div ng-if="$ctrl.state.filteredLogs.length === 1 && !$ctrl.state.filteredLogs[0]" class="line"><p class="inner_line">No logs available</p></div>
diff --git a/app/docker/components/log-viewer/logViewerController.js b/app/docker/components/log-viewer/logViewerController.js
index 98ec13721..f85c20852 100644
--- a/app/docker/components/log-viewer/logViewerController.js
+++ b/app/docker/components/log-viewer/logViewerController.js
@@ -7,6 +7,7 @@ function (clipboard) {
     copySupported: clipboard.supported,
     logCollection: true,
     autoScroll: true,
+    wrapLines: true,
     search: '',
     filteredLogs: [],
     selectedLines: []
diff --git a/assets/css/app.css b/assets/css/app.css
index 1f07a8f3d..0af066249 100644
--- a/assets/css/app.css
+++ b/assets/css/app.css
@@ -715,12 +715,15 @@ ul.sidebar .sidebar-list .sidebar-sublist a.active {
 .log_viewer {
   height:100%;
   overflow-y: scroll;
-  white-space: pre-wrap;
   color: black;
   font-size: .85em;
   background-color: white;
 }
 
+.log_viewer.wrap_lines {
+  white-space: pre-wrap;
+}
+
 .log_viewer .inner_line {
   padding: 0 15px;
   cursor: pointer;