Skip to content

Commit

Permalink
Merge pull request #8344 from spadgett/log-message-1.2
Browse files Browse the repository at this point in the history 
Merged by openshift-bot
  • Loading branch information
OpenShift Bot committed Apr 5, 2016
2 parents 84434f4 + 4288c12 commit ef1caba
Show file tree
Hide file tree
Showing 7 changed files with 249 additions and 192 deletions.
23 changes: 22 additions & 1 deletion assets/app/scripts/directives/logViewer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,9 +148,29 @@ angular.module('openshiftConsole')
}
};

var fillHeight = function(animate) {
var content = $('.log-view-output');
var contentTop = content.offset().top;
if (contentTop < 0) {
// Content top is off the page already.
return;
}

var fill = Math.floor($(window).height() - contentTop);
if (!$scope.chromeless) {
// Add some bottom margin if not chromeless.
fill = fill - 35;
}
if (animate) {
content.animate({ 'min-height': fill +'px' }, 'fast');
} else {
content.css('min-height', fill + 'px');
}
};

// roll up & debounce the various fns to call on resize
var onResize = _.debounce(function() {
fillHeight(true);
// update scroll handlers
detectScrollableNode();
attachScrollEvents();
Expand All @@ -160,7 +180,6 @@ angular.module('openshiftConsole')
onScroll();
}, 100);


$win.on('resize', onResize);


Expand Down Expand Up @@ -259,6 +278,8 @@ angular.module('openshiftConsole')
$scope.empty = false;
if($scope.state !== 'logs') {
$scope.state = 'logs';
// setTimeout so that the log content is visible to correctly calculate fill height.
setTimeout(fillHeight);
}
});

Expand Down
72 changes: 63 additions & 9 deletions assets/app/styles/_log.less
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,50 @@
.log-title {
margin-top: 0;
}
.log-timestamp, .log-size-warning {
margin-bottom: 10px;
.log-header {
margin-bottom: 3px;
label {
margin-bottom: 0;
}
.dash {
.text-muted();
margin: 0 2px;
}
.log-actions {
form {
display: inline-block;
}
.btn-link {
padding: 0;
}
}
.log-timestamps {
.text-muted();
display: block;
}
@media (min-width: @screen-sm-min) {
.log-status {
display: inline-block;
}
.log-timestamps {
.small();
display: inline-block;
margin-left: 3px;
}
.log-actions {
.pull-right();
margin-left: 5px;
}
}
}
.log-size-warning {
margin: 0;
}
.log-view {
background-color: @log-bg-color;
// Make sure log-actions are not hidden behind log if they wrap.
clear: both;
font-family: @font-family-monospace;
min-height: 60px;
padding: 0;
position: relative;
pre, pre code {
Expand Down Expand Up @@ -75,18 +112,36 @@
@media (min-width: @screen-sm-min) {
font-size: 12px;
}
padding: 30px 0 30px;
.ellipsis-loader {
// Give space between log output and loader
margin-top: 30px;
padding: 40px 0;
@media only screen and (max-device-width: 736px) and (-webkit-min-device-pixel-ratio: 0) {
// On an iPhone, add additional margin so that following logs is never obscured
// by the bottom buttons that are displayed and hidden.
padding-bottom: 70px;
}
table {
table-layout: fixed;
width: 100%;
}
.ellipsis-loader {
// Show the loading dots at the bottom, even when the log content doesn't fill the page.
position: absolute;
bottom: 10px;
// Center the dots.
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
}
}
}

.log-end-msg {
font-family: @font-family-base;
font-size: @font-size-base - 1;
color: #72767b;
position: absolute;
bottom: 5px;
left: 10px;
}
// TODO: need to encapsulate this better
.chromeless .log-scroll-top.affix {
right: 0px; // override
Expand Down Expand Up @@ -140,7 +195,6 @@
background: lighten(#d1d1d1, 8%);
}
}

.table-log-pods {
> tbody + tbody {
border-top-width: 1px;
Expand Down
20 changes: 8 additions & 12 deletions assets/app/views/browse/build.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -107,19 +107,15 @@ <h1>
empty="logEmpty"
run="logCanRun">

<div row cross-axis="center">
<div>
Build status:
<status-icon status="build.status.phase"></status-icon>
<span class="space-after">{{build.status.phase}}</span>
<label>Status:</label>
<status-icon status="build.status.phase"></status-icon>
<span class="space-after">{{build.status.phase}}</span>

<span ng-if="build.status.startTimestamp && !logEmpty">
&mdash; Log from {{build.status.startTimestamp | date : 'short'}}
<span ng-if="build.status.completionTimestamp">
to {{build.status.completionTimestamp | date : 'short'}}
</span>
</span>
</div>
<div ng-if="build.status.startTimestamp && !logEmpty" class="log-timestamps">
Log from {{build.status.startTimestamp | date : 'short'}}
<span ng-if="build.status.completionTimestamp">
to {{build.status.completionTimestamp | date : 'short'}}
</span>
</div>

</log-viewer>
Expand Down
20 changes: 8 additions & 12 deletions assets/app/views/browse/deployment.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,18 +93,14 @@ <h3>Container {{container.name}}</h3>
empty="logEmpty"
run="logCanRun">

<div row cross-axis="center">
<div row>
<div ng-if="deployment | deploymentStatus">
Deployment status:
<status-icon status="deployment | deploymentStatus"></status-icon>
{{deployment | deploymentStatus}}
</div>
<div ng-if="deployment.metadata.creationTimestamp && !logEmpty">
<div ng-if="(deployment | deploymentStatus) !== 'Deployed'">
&mdash; Log from {{deployment.metadata.creationTimestamp | date : 'short'}}
</div>
</div>
<span ng-if="deployment | deploymentStatus">
<label>Status:</label>
<status-icon status="deployment | deploymentStatus"></status-icon>
{{deployment | deploymentStatus}}
</span>
<div ng-if="deployment.metadata.creationTimestamp && !logEmpty" class="log-timestamps">
<div ng-if="(deployment | deploymentStatus) !== 'Deployed'">
Log from {{deployment.metadata.creationTimestamp | date : 'short'}}
</div>
</div>

Expand Down
53 changes: 23 additions & 30 deletions assets/app/views/browse/pod.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,20 +81,6 @@ <h3>Container {{container.name}}</h3>
<uib-tab active="selectedTab.logs">
<uib-tab-heading>Logs</uib-tab-heading>

<label for="selectLogContainer">Container:</label>

<span ng-if="pod.spec.containers.length === 1">
{{pod.spec.containers[0].name}}
</span>

<select
id="selectLogContainer"
ng-if="pod.spec.containers.length > 1"
ng-model="logOptions.container"
ng-options="container.name as container.name for container in pod.spec.containers"
ng-init="logOptions.container = pod.spec.containers[0].name">
</select>

<log-viewer
ng-if="selectedTab.logs"
follow-affix-top="390"
Expand All @@ -106,22 +92,29 @@ <h3>Container {{container.name}}</h3>
empty="logEmpty"
run="logCanRun">

<div row mobile="column" tablet="column">
<div class="nowrap">
Container status:
<status-icon status="containerStateReason || containerStatusKey"></status-icon>
<span class="space-after">{{containerStateReason || containerStatusKey | sentenceCase}}</span>
</div>
<div ng-if="containerStartTime && !logEmpty">
&mdash;
<span ng-if="lasStatusKey">
Last {{lasStatusKey}} log
</span>
<span ng-if="(!lasStatusKey)">Log</span>
from {{containerStartTime | date : 'short'}}
<span ng-if="containerEndTime">to {{containerEndTime | date : 'short'}}</span>
</div>
</div>
<label for="selectLogContainer">Container:</label>

<span ng-if="pod.spec.containers.length === 1">
{{pod.spec.containers[0].name}}
</span>

<select
id="selectLogContainer"
ng-if="pod.spec.containers.length > 1"
ng-model="logOptions.container"
ng-options="container.name as container.name for container in pod.spec.containers"
ng-init="logOptions.container = pod.spec.containers[0].name">
</select>

<span ng-if="containerStateReason || containerStatusKey">
<span class="dash">&mdash;</span>
<status-icon status="containerStateReason || (containerStatusKey | capitalize)"></status-icon>
<span>{{containerStateReason || containerStatusKey | sentenceCase}}</span>
</span>

<span ng-if="containerStartTime && !logEmpty">
<span class="log-timestamps">Log from {{containerStartTime | date : 'short'}} <span ng-if="containerEndTime">to {{containerEndTime | date : 'short'}}</span></span>
</span>

</log-viewer>
</uib-tab>
Expand Down
55 changes: 23 additions & 32 deletions assets/app/views/directives/logs/_log-viewer.html
View file
Original file line number Diff line number Diff line change
@@ -1,43 +1,38 @@
<div
row
mobile="column"
tablet="column"
ng-if="(!chromeless)"
style="margin-bottom: 10px;">
<div ng-transclude flex><!-- expect start time, end time, status details --></div>
<div row class="text-right text-xs-left">
<a ng-if="state !== 'empty'"
href=""
ng-click="goChromeless(options)"
style="margin-right: 10px;">
Open full view of log <i class="fa fa-external-link"></i>
</a>
<div ng-if="kibanaAuthUrl">
<div class="log-header" ng-if="!chromeless">
<div ng-transclude class="log-status"><!-- expect start time, end time, status details --></div>
<div class="log-actions">
<span ng-if="kibanaAuthUrl">
<form
action="{{kibanaAuthUrl}}"
method="POST">
<input type="hidden" name="redirect" value="{{kibanaArchiveUrl}}">
<input type="hidden" name="access_token" value="{{access_token}}">
<button class="btn btn-sm btn-primary">View Archive</button>
<button class="btn btn-link">View archive</button>
</form>
</div>
<span ng-if="state !== 'empty'" class="action-divider">|</span>
</span>
<a ng-if="state !== 'empty'"
href=""
ng-click="goChromeless(options)"
role="button">
Expand
<i class="fa fa-external-link"></i>
</a>
</div>
</div>


<div ng-if="largeLog" class="log-size-warning">
<div ng-if="largeLog" class="alert alert-info log-size-warning">
<span class="pficon pficon-info" aria-hidden="true"></span>
Only the previous {{options.tailLines || 1000}} log lines and new log
messages will be displayed because of the large log size.
</div>


<!-- show this spinner until the log viewer starts. important for pending state, etc -->
<div row main-axis="center" ng-if="(!state)">
<ellipsis-loader ng-show="loading"></ellipsis-loader>
<div class="text-center gutter-top" ng-if="(!state)">
<ellipsis-loader></ellipsis-loader>
</div>


<div class="empty-state-message text-center" ng-if="state=='empty'">
<h2>Logs are not available.</h2>

Expand All @@ -60,12 +55,12 @@ <h2>Logs are not available.</h2>


<!-- must be ng-show rather than ng-if, else DOM is not rendered in time to cache nodes -->
<div flex height-max ng-show="state=='logs'">
<div ng-show="state=='logs'">
<a
name="logTop"
id="logTop"></a>

<div flex height-max class="log-view">
<div class="log-view">
<div
ng-show="showScrollLinks"
id="affixedFollow"
Expand All @@ -78,13 +73,14 @@ <h2>Logs are not available.</h2>
Go to end
</a>
</div>
<div flex column height-max class="log-view-output">
<div class="log-view-output">
<table>
<tbody id="logContent"></tbody>
</table>
<!-- show this spinner indicating logs are still streaming -->
<div row main-axis="center">
<ellipsis-loader ng-show="loading"></ellipsis-loader>
<ellipsis-loader ng-show="loading"></ellipsis-loader>
<div ng-if="(!loading) && (!limitReached) && (!errorWhileRunning) && state=='logs'" class="log-end-msg">
End of log
</div>
</div>
<div
Expand All @@ -98,17 +94,12 @@ <h2>Logs are not available.</h2>
name="logBottom"></a>
</div>


<!-- Show a different messsage if the log might have stopped because we reached the byte limit -->
<div ng-if="limitReached" class="text-muted">
The maximum web console log size has been reached. Use the command-line interface or
<a href="" ng-click="restartLogs()">reload</a> the log to see new messages.
</div>

<div ng-if="(!loading) && (!limitReached) && (!errorWhileRunning) && state=='logs'" class="text-muted">
End of log
</div>


<div ng-if="errorWhileRunning" class="text-muted">
An error occurred loading the log.
Expand Down
Loading

0 comments on commit ef1caba

Please sign in to comment.