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

fix(UI): update-log-viewer-ui [EE-3522] (#7202) 

* fix update log viewer layout

* use por-switch in logs

Co-authored-by: Hao Zhang <hao.zhang@portainer.io>
pull/7250/head
sunportainer 2022-07-12 07:26:23 +08:00 committed by GitHub
parent 82fb5f7ac1
commit 4cc672f902
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 40 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -6,29 +6,28 @@
<form class="form-horizontal"> <form class="form-horizontal">
<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"> <por-switch-field
Auto-refresh logs label-class="'col-sm-2'"
<portainer-tooltip message="'Disabling this option allows you to pause the log collection process and the auto-scrolling.'"></portainer-tooltip> checked="$ctrl.state.logCollection"
</label> label="'Auto-refresh logs'"
<label class="switch" style="margin-left: 20px"> tooltip="'Disabling this option allows you to pause the log collection process and the auto-scrolling.'"
<input on-change="($ctrl.handleLogsCollectionChange)"
type="checkbox" ></por-switch-field>
ng-model="$ctrl.state.logCollection"
ng-change="$ctrl.state.autoScroll = $ctrl.state.logCollection; $ctrl.logCollectionChange($ctrl.state.logCollection)"
/><i></i>
</label>
</div> </div>
</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"> Wrap lines </label> <por-switch-field label-class="'col-sm-2'" checked="$ctrl.state.wrapLines" label="'Wrap lines'" on-change="($ctrl.handleLogsWrapLinesChange)"></por-switch-field>
<label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="$ctrl.state.wrapLines" /><i></i> </label>
</div> </div>
</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"> Display timestamps </label> <por-switch-field
<label class="switch" style="margin-left: 20px"> <input type="checkbox" ng-model="$ctrl.displayTimestamps" /><i></i> </label> label-class="'col-sm-2'"
checked="$ctrl.displayTimestamps"
label="'Display timestamps'"
on-change="($ctrl.handleDisplayTimestampsChange)"
></por-switch-field>
</div> </div>
</div> </div>
<div class="form-group"> <div class="form-group">

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

@ -3,10 +3,11 @@ import _ from 'lodash-es';
import { NEW_LINE_BREAKER } from '@/constants'; import { NEW_LINE_BREAKER } from '@/constants';
angular.module('portainer.docker').controller('LogViewerController', [ angular.module('portainer.docker').controller('LogViewerController', [
'$scope',
'clipboard', 'clipboard',
'Blob', 'Blob',
'FileSaver', 'FileSaver',
function (clipboard, Blob, FileSaver) { function ($scope, clipboard, Blob, FileSaver) {
this.state = { this.state = {
availableSinceDatetime: [ availableSinceDatetime: [
{ desc: 'Last day', value: moment().subtract(1, 'days').format() }, { desc: 'Last day', value: moment().subtract(1, 'days').format() },
@ -23,6 +24,30 @@ angular.module('portainer.docker').controller('LogViewerController', [
selectedLines: [], selectedLines: [],
}; };
this.handleLogsCollectionChange = handleLogsCollectionChange.bind(this);
this.handleLogsWrapLinesChange = handleLogsWrapLinesChange.bind(this);
this.handleDisplayTimestampsChange = handleDisplayTimestampsChange.bind(this);
function handleLogsCollectionChange(enabled) {
$scope.$evalAsync(() => {
this.state.logCollection = enabled;
this.state.autoScroll = enabled;
this.logCollectionChange(enabled);
});
}
function handleLogsWrapLinesChange(enabled) {
$scope.$evalAsync(() => {
this.state.wrapLines = enabled;
});
}
function handleDisplayTimestampsChange(enabled) {
$scope.$evalAsync(() => {
this.displayTimestamps = enabled;
});
}
this.copy = function () { this.copy = function () {
clipboard.copyText(this.state.filteredLogs.map((log) => log.line).join(NEW_LINE_BREAKER)); clipboard.copyText(this.state.filteredLogs.map((log) => log.line).join(NEW_LINE_BREAKER));
$('#refreshRateChange').show(); $('#refreshRateChange').show();