github
/
portainer
mirror of https://github.com/portainer/portainer
1
0
Fork 0
Code Issues Releases Wiki Activity

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
Hasnat 2018-07-10 20:06:45 +01:00 committed by Anthony Lapenna
parent 85d50d7566
commit a94f2ee7b8
3 changed files with 16 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
app/docker/components/log-viewer/logViewer.html
View File

@ -15,6 +15,16 @@
</label> </label>
</div> </div>
</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="form-group">
<div class="col-sm-12"> <div class="col-sm-12">
<label for="tls" class="control-label text-left"> <label for="tls" class="control-label text-left">
@ -62,7 +72,7 @@
<div class="row" style="height:54%;"> <div class="row" style="height:54%;">
<div class="col-sm-12" style="height:100%;"> <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-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" 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> <div ng-if="$ctrl.state.filteredLogs.length === 1 && !$ctrl.state.filteredLogs[0]" class="line"><p class="inner_line">No logs available</p></div>

1
app/docker/components/log-viewer/logViewerController.js
View File

@ -7,6 +7,7 @@ function (clipboard) {
copySupported: clipboard.supported, copySupported: clipboard.supported,
logCollection: true, logCollection: true,
autoScroll: true, autoScroll: true,
wrapLines: true,
search: '', search: '',
filteredLogs: [], filteredLogs: [],
selectedLines: [] selectedLines: []

5
assets/css/app.css
View File

@ -715,12 +715,15 @@ ul.sidebar .sidebar-list .sidebar-sublist a.active {
.log_viewer { .log_viewer {
height:100%; height:100%;
overflow-y: scroll; overflow-y: scroll;
white-space: pre-wrap;
color: black; color: black;
font-size: .85em; font-size: .85em;
background-color: white; background-color: white;
} }
.log_viewer.wrap_lines {
white-space: pre-wrap;
}
.log_viewer .inner_line { .log_viewer .inner_line {
padding: 0 15px; padding: 0 15px;
cursor: pointer; cursor: pointer;