зеркало из https://github.com/mozilla/treeherder.git
Bug 1183872 - Improve logviewer layout with a navbar
This commit is contained in:
Jonathan French
Родитель
903a7805a6
Коммит
77cac455df
|
|
@ -9,17 +9,57 @@ body {
|
|||
bottom: 0;
|
||||
left: 0;
|
||||
min-width: 240px;
|
||||
padding-top: 10px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
/* Boostrap navbar overrides for logviewer */
|
||||
.navbar {
|
||||
flex: none;
|
||||
min-height: 41px; /* 40 for contained elements + lower bootstrap border */
|
||||
border-top: 0; /* Shut off the top border */
|
||||
border-radius: 0; /* Straight navbar */
|
||||
margin-bottom: 10px; /* Breathing space for run-data */
|
||||
}
|
||||
|
||||
.navbar-nav > li > a {
|
||||
padding: 10px 15px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.navbar-nav > li > div {
|
||||
padding: 10px 15px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.navbar-nav > li > span {
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.container-fluid {
|
||||
padding-left: 5px; /* Align logo vertically to run-data table */
|
||||
}
|
||||
|
||||
/* Suppress selected angular templates until they compile */
|
||||
[ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak {
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
/*Log Viewer*/
|
||||
/* Log Viewer */
|
||||
|
||||
#lv-logo {
|
||||
padding: 10px 15px;
|
||||
border: none;
|
||||
background: #f8f8f8;
|
||||
}
|
||||
|
||||
#lv-successful-steps {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
#lv-successful-steps > input {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.lv-line-no {
|
||||
width: 3em;
|
||||
|
|
@ -81,6 +121,7 @@ body {
|
|||
hyphens: auto;
|
||||
}
|
||||
.run-data .steps-data {
|
||||
margin-bottom: 10px;
|
||||
max-height: 210px;
|
||||
min-width: 400px;
|
||||
overflow: auto;
|
||||
|
|
@ -114,17 +155,6 @@ body {
|
|||
border-color: #d58512;
|
||||
}
|
||||
|
||||
.logviewer-actionbar {
|
||||
min-width: 410px;
|
||||
}
|
||||
|
||||
.logviewer-actionbtn {
|
||||
display: inline-block;
|
||||
margin: 8px 8px 8px 0px;
|
||||
padding: 6px 8px;
|
||||
border: 1px solid #dddddd;
|
||||
}
|
||||
|
||||
.logviewer-actionbtn span {
|
||||
color: #9fa3a5;
|
||||
}
|
||||
|
|
@ -138,10 +168,6 @@ body {
|
|||
padding-right: 5px;
|
||||
}
|
||||
|
||||
.logviewer-actionbtn input[type="checkbox"] {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.lv-line-no.label {
|
||||
border-radius: 0px;
|
||||
margin: 0em 0.6em 0em 0em;
|
||||
|
|
|
|||
|
|
@ -27,7 +27,8 @@ treeherder.directive('lvLogSteps', ['$timeout', '$q', function ($timeout, $q) {
|
|||
$timeout(function () {
|
||||
var raw = $('.lv-log-container')[0];
|
||||
var line = $('.lv-log-line[line="' + linenumber + '"]');
|
||||
raw.scrollTop += line.offset().top - $('.run-data').outerHeight() - 15 ;
|
||||
raw.scrollTop += line.offset().top - $('.run-data').outerHeight() -
|
||||
$('.navbar').outerHeight() - 9;
|
||||
});
|
||||
}, function () {
|
||||
// there is an error so bomb out
|
||||
|
|
@ -66,7 +67,8 @@ treeherder.directive('lvLogSteps', ['$timeout', '$q', function ($timeout, $q) {
|
|||
$timeout(function () {
|
||||
var raw = $('.lv-log-container')[0];
|
||||
var line = $('.lv-log-line[line="' + step.started_linenumber + '"]');
|
||||
raw.scrollTop += line.offset().top - $('.run-data').outerHeight() - 15 ;
|
||||
raw.scrollTop += line.offset().top - $('.run-data').outerHeight() -
|
||||
$('.navbar').outerHeight() - 9;
|
||||
});
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -12,40 +12,99 @@
|
|||
<link id="favicon" type="image/png" rel="shortcut icon" href="img/logviewerIcon.png">
|
||||
</head>
|
||||
<body class="body-logviewer">
|
||||
<div class="run-data">
|
||||
<div class="col-md-6" >
|
||||
<div class="job-header">
|
||||
<table class="table table-condensed" >
|
||||
<tr class="{{::resultStatusShading}}">
|
||||
<th ng-cloak>{{result.label}}</th>
|
||||
<td ng-cloak class="break-word">{{result.value}}</td>
|
||||
</tr>
|
||||
<tr ng-repeat="property in logProperties">
|
||||
<th ng-cloak>{{property.label}}</th>
|
||||
<td ng-if="property.label == 'Revision'" class="break-word">
|
||||
<a href="{{::logRevisionFilterUrl}}"
|
||||
title="Open resultset"
|
||||
class="repo-link"
|
||||
ng-cloak>{{property.value}}</a>
|
||||
</td>
|
||||
<td ng-if="property.label != 'Revision'"
|
||||
ng-cloak class="break-word">{{property.value}}</td>
|
||||
</tr>
|
||||
<tr ng-repeat="line in job_details | orderBy:'title'">
|
||||
<th>{{line.title}}:</th>
|
||||
<td ng-switch on="line.content_type">
|
||||
<a ng-switch-when="link" title="{{line.value}}"
|
||||
href="{{line.url}}" target="_blank">{{line.value}}</a>
|
||||
<span ng-switch-when="raw_html" ng-bind-html="line.value"></span>
|
||||
<td/>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Logviewer navbar -->
|
||||
<nav class="navbar navbar-default" role="navigation">
|
||||
<div class="container-fluid">
|
||||
<ul class="nav navbar-nav">
|
||||
|
||||
<div class="col-md-6" lv-log-steps></div>
|
||||
<!-- Logo menu button -->
|
||||
<li>
|
||||
<span class="dropdown">
|
||||
<button id="lv-logo" title="Treeherder services" role="button"
|
||||
href="#" data-toggle="dropdown" data-target="#">Logviewer
|
||||
<span class="fa fa-angle-down"></span>
|
||||
</button>
|
||||
<ul class="dropdown-menu" role="menu" aria-labelledby="lv-logo">
|
||||
<li><a href="/">Treeherder</a></li>
|
||||
<li><a href="perf.html">Perfherder</a></li>
|
||||
</ul>
|
||||
</span>
|
||||
</li>
|
||||
|
||||
<!-- Job status -->
|
||||
<li class="{{::resultStatusShading}}">
|
||||
<div>
|
||||
<span ng-cloak><strong>{{result.label}}: </strong></span>
|
||||
<span ng-cloak class="break-word">{{result.value}}</span>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<!-- Raw log button -->
|
||||
<li class="logviewer-actionbtn">
|
||||
<a title="Open the raw log in a new window"
|
||||
target="_blank"
|
||||
href="{{::artifact.logurl}}">
|
||||
<span class="fa fa-file-text-o actionbtn-icon"></span>
|
||||
<span>open raw log</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- Ref test button -->
|
||||
<li ng-if="isReftest()"
|
||||
class="logviewer-actionbtn">
|
||||
<a title="Open the Reftest Analyser in a new window"
|
||||
target="_blank"
|
||||
href="http://hg.mozilla.org/mozilla-central/raw-file/tip/layout/tools/reftest/reftest-analyzer.xhtml#logurl={{::artifact.logurl}}&only_show_unexpected=1">
|
||||
<span class="fa fa-bar-chart-o actionbtn-icon"></span>
|
||||
<span>open analyser</span>
|
||||
</a>
|
||||
</li>
|
||||
|
||||
<!-- Show successful steps button -->
|
||||
<li ng-if="artifact && hasFailedSteps()"
|
||||
class="logviewer-actionbtn">
|
||||
<div id="lv-successful-steps">
|
||||
<input type="checkbox"
|
||||
ng-model="showSuccessful"
|
||||
ng-change="toggleSuccessfulSteps()" />
|
||||
<span>show successful steps</span>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Job header and steps navigation -->
|
||||
<div class="run-data">
|
||||
<div class="col-md-6" >
|
||||
<div class="job-header">
|
||||
<table class="table table-condensed" >
|
||||
<tr ng-repeat="property in logProperties">
|
||||
<th ng-cloak>{{property.label}}</th>
|
||||
<td ng-if="property.label == 'Revision'" class="break-word">
|
||||
<a href="{{::logRevisionFilterUrl}}"
|
||||
title="Open resultset"
|
||||
class="repo-link"
|
||||
ng-cloak>{{property.value}}</a>
|
||||
</td>
|
||||
<td ng-if="property.label != 'Revision'"
|
||||
ng-cloak class="break-word">{{property.value}}</td>
|
||||
</tr>
|
||||
<tr ng-repeat="line in job_details | orderBy:'title'">
|
||||
<th>{{line.title}}:</th>
|
||||
<td ng-switch on="line.content_type">
|
||||
<a ng-switch-when="link" title="{{line.value}}"
|
||||
href="{{line.url}}" target="_blank">{{line.value}}</a>
|
||||
<span ng-switch-when="raw_html" ng-bind-html="line.value"></span>
|
||||
<td/>
|
||||
</tr>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-6" lv-log-steps></div>
|
||||
</div>
|
||||
|
||||
<!-- Log lines -->
|
||||
<div class="lv-log-container"
|
||||
lv-infinite-scroll
|
||||
lv-log-lines="displayedLogLines">
|
||||
|
|
|
|||
|
|
@ -34,33 +34,3 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="logviewer-actionbar">
|
||||
<!-- Raw log button -->
|
||||
<div class="logviewer-actionbtn">
|
||||
<a href="{{::artifact.logurl}}">
|
||||
<span class="glyphicon glyphicon-align-left actionbtn-icon"></span>
|
||||
<span>open raw log</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Ref test button -->
|
||||
<div ng-if="isReftest()"
|
||||
class="logviewer-actionbtn">
|
||||
<a title="Launch the Reftest Analyser in a new window"
|
||||
target="_blank"
|
||||
href="http://hg.mozilla.org/mozilla-central/raw-file/tip/layout/tools/reftest/reftest-analyzer.xhtml#logurl={{::artifact.logurl}}&only_show_unexpected=1">
|
||||
<span class="fa fa-bar-chart-o actionbtn-icon"></span>
|
||||
<span>open analyser</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<!-- Show successful steps button -->
|
||||
<div ng-if="artifact && hasFailedSteps()"
|
||||
class="logviewer-actionbtn">
|
||||
<input type="checkbox"
|
||||
ng-model="showSuccessful"
|
||||
ng-change="toggleSuccessfulSteps()" />
|
||||
<span>show successful steps</span>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче