feat(log-viewer): use only one switch to manage collection/autoscroll (#1713)

* feat(log-viewer): use only one switch to manage collection/autoscroll

* feat(log-viewer): add the ability to clear selection

* style(log-viewer): update unselect button design

app/docker/components/log-viewer/logViewer.html

@@ -7,21 +7,11 @@
           <div class="form-group">
             <div class="col-sm-12">
               <label for="tls" class="control-label text-left">
-                Log collection
+                Auto-refresh logs
-                <portainer-tooltip position="bottom" message="Disabling this option allows you to pause the log collection process."></portainer-tooltip>
+                <portainer-tooltip position="bottom" message="Disabling this option allows you to pause the log collection process and the auto-scrolling."></portainer-tooltip>
               </label>
               <label class="switch" style="margin-left: 20px;">
-                <input type="checkbox" ng-model="$ctrl.state.logCollection" ng-change="$ctrl.logCollectionChange($ctrl.state.logCollection)"><i></i>
+                <input type="checkbox" ng-model="$ctrl.state.logCollection" ng-change="$ctrl.state.autoScroll = $ctrl.state.logCollection; $ctrl.logCollectionChange($ctrl.state.logCollection)"><i></i>
-              </label>
-            </div>
-          </div>
-          <div class="form-group">
-            <div class="col-sm-12">
-              <label for="tls" class="control-label text-left">
-                Auto-scrolling
-              </label>
-              <label class="switch" style="margin-left: 20px;">
-                <input type="checkbox" ng-model="$ctrl.state.autoScroll"><i></i>
               </label>
             </div>
           </div>
@@ -40,6 +30,7 @@
             <div class="col-sm-11">
               <button class="btn btn-primary btn-sm" ng-click="$ctrl.copy()" ng-disabled="($ctrl.state.filteredLogs.length === 1 && !$ctrl.state.filteredLogs[0]) || !$ctrl.state.filteredLogs.length"><i class="fa fa-copy space-right" aria-hidden="true"></i>Copy</button>
               <button class="btn btn-primary btn-sm" ng-click="$ctrl.copySelection()" ng-disabled="($ctrl.state.filteredLogs.length === 1 && !$ctrl.state.filteredLogs[0]) || !$ctrl.state.filteredLogs.length || !$ctrl.state.selectedLines.length"><i class="fa fa-copy space-right" aria-hidden="true"></i>Copy selected lines</button>
+              <button class="btn btn-primary btn-sm" ng-click="$ctrl.clearSelection()" ng-disabled="$ctrl.state.selectedLines.length === 0"><i class="fa fa-times space-right" aria-hidden="true"></i>Unselect</button>
               <span>
                 <i id="refreshRateChange" class="fa fa-check green-icon" aria-hidden="true" style="margin-left: 7px; display: none;"></i>
               </span>
@@ -53,8 +44,8 @@
 
 <div class="row" style="height:54%;">
   <div class="col-sm-12" style="height:100%;">
-    <pre class="log_viewer" scroll-glue="$ctrl.state.autoScroll">
+    <pre 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="active=!active; $ctrl.selectLine(line)" ng-class="{'line_selected': active}">{{ line }}</p></div>
+      <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>
     </pre>

app/docker/components/log-viewer/logViewerController.js

@@ -15,13 +15,17 @@ function (clipboard) {
   this.copy = function() {
     clipboard.copyText(this.state.filteredLogs);
     $('#refreshRateChange').show();
-    $('#refreshRateChange').fadeOut(1500);
+    $('#refreshRateChange').fadeOut(2000);
   };
 
   this.copySelection = function() {
     clipboard.copyText(this.state.selectedLines);
     $('#refreshRateChange').show();
-    $('#refreshRateChange').fadeOut(1500);
+    $('#refreshRateChange').fadeOut(2000);
+  };
+
+  this.clearSelection = function() {
+    this.state.selectedLines = [];
   };
 
   this.selectLine = function(line) {