Docker/portainer
Docker/portainer
1
0
Fork 0
mirror of https://github.com/portainer/portainer.git synced 2025-07-19 13:29:41 +02:00
Code Issues Releases Activity

feat(log-viewer): introduce the log viewer component (#1666)

Browse source
This commit is contained in:
Anthony Lapenna 2018-02-28 07:19:28 +01:00 • committed by GitHub
parent 81de2a5afb
commit 0c5152fb5f
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
36 changed files with 458 additions and 304 deletions
Download patch file Download diff file Expand all files Collapse all files

8
app/docker/components/log-viewer/log-viewer.js Normal file
View file

@ -0,0 +1,8 @@
angular.module('portainer.docker').component('logViewer', {
templateUrl: 'app/docker/components/log-viewer/logViewer.html',
controller: 'LogViewerController',
bindings: {
data: '=',
logCollectionChange: '<'
}
});

62
app/docker/components/log-viewer/logViewer.html Normal file
View file

@ -0,0 +1,62 @@
<div class="row">
<div class="col-sm-12">
<rd-widget>
<rd-widget-header icon="fa-file-text-o" title="Log viewer settings"></rd-widget-header>
<rd-widget-body>
<form class="form-horizontal">
<div class="form-group">
<div class="col-sm-12">
<label for="tls" class="control-label text-left">
Log collection
<portainer-tooltip position="bottom" message="Disabling this option allows you to pause the log collection process."></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>
</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>
<div class="form-group">
<label for="logs_search" class="col-sm-1 control-label text-left">
Search
</label>
<div class="col-sm-11">
<input class="form-control" type="text" name="logs_search" ng-model="$ctrl.state.search" ng-change="$ctrl.state.selectedLines.length = 0;" placeholder="Filter...">
</div>
</div>
<div class="form-group" ng-if="$ctrl.state.copySupported">
<label class="col-sm-1 control-label text-left">
Actions
</label>
<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>
<span>
<i id="refreshRateChange" class="fa fa-check green-icon" aria-hidden="true" style="margin-left: 7px; display: none;"></i>
</span>
</div>
</div>
</form>
</rd-widget-body>
</rd-widget>
</div>
</div>
<div class="row" style="height:54%;">
<div class="col-sm-12" style="height:100%;">
<pre class="log_viewer" scroll-glue="$ctrl.state.autoScroll">
<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-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>
</div>
</div>

35
app/docker/components/log-viewer/logViewerController.js Normal file
View file

@ -0,0 +1,35 @@
angular.module('portainer.docker')
.controller('LogViewerController', ['clipboard',
function (clipboard) {
var ctrl = this;
this.state = {
copySupported: clipboard.supported,
logCollection: true,
autoScroll: true,
search: '',
filteredLogs: [],
selectedLines: []
};
this.copy = function() {
clipboard.copyText(this.state.filteredLogs);
$('#refreshRateChange').show();
$('#refreshRateChange').fadeOut(1500);
};
this.copySelection = function() {
clipboard.copyText(this.state.selectedLines);
$('#refreshRateChange').show();
$('#refreshRateChange').fadeOut(1500);
};
this.selectLine = function(line) {
var idx = this.state.selectedLines.indexOf(line);
if (idx === -1) {
this.state.selectedLines.push(line);
} else {
this.state.selectedLines.splice(idx, 1);
}
};
}]);