mirror of https://github.com/portainer/portainer
				
				
				
			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]pull/2034/head
							parent
							
								
									85d50d7566
								
							
						
					
					
						commit
						a94f2ee7b8
					
				| 
						 | 
				
			
			@ -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>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -7,6 +7,7 @@ function (clipboard) {
 | 
			
		|||
    copySupported: clipboard.supported,
 | 
			
		||||
    logCollection: true,
 | 
			
		||||
    autoScroll: true,
 | 
			
		||||
    wrapLines: true,
 | 
			
		||||
    search: '',
 | 
			
		||||
    filteredLogs: [],
 | 
			
		||||
    selectedLines: []
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -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;
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in New Issue