Merge pull request #335 from travis-ci/anchor-btn-to-log

Move log related buttons to the log area
This commit is contained in:
Piotr Sarnacki 2015-02-26 09:56:32 +01:00
commit cf946d5da5
16 changed files with 268 additions and 168 deletions

View File

@ -51,7 +51,7 @@ Build = Model.extend DurationCalculations,
).property('state') ).property('state')
notStarted: (-> notStarted: (->
@get('state') in ['queued', 'created'] @get('state') in ['queued', 'created', 'received']
).property('state') ).property('state')
startedAt: (-> startedAt: (->

View File

@ -62,7 +62,7 @@ Job = Model.extend DurationCalculations,
).property('state') ).property('state')
notStarted: (-> notStarted: (->
@get('state') in ['queued', 'created'] @get('state') in ['queued', 'created', 'received']
).property('state') ).property('state')
clearLog: -> clearLog: ->

View File

@ -25,3 +25,26 @@
@mixin border-bottom-radius($radius) @mixin border-bottom-radius($radius)
border-bottom-left-radius: $radius border-bottom-left-radius: $radius
border-bottom-right-radius: $radius border-bottom-right-radius: $radius
@mixin border-top-radius($radius)
border-top-left-radius: $radius
border-top-right-radius: $radius
%border-radius-4px
border-radius: 4px
%border-top-4px
border-top-left-radius: 4px
border-top-right-radius: 4px
%border-bottom-4px
border-bottom-left-radius: 4px
border-bottom-right-radius: 4px
%absolute-center
position: absolute
top: 0
right: 0
left: 0
bottom: 0
margin: auto

View File

@ -52,3 +52,6 @@ $error-sand: #dcc682
$tab-nav-inactive-bg: #f8f8f8 $tab-nav-inactive-bg: #f8f8f8
$tab-nav-inactive-bg-hover: $white $tab-nav-inactive-bg-hover: $white
$tab-active-bg: $blue-grey-light $tab-active-bg: $blue-grey-light
// log
$log-header-bg: #444444

View File

@ -83,3 +83,17 @@ $button-border-color: #d4d4d4
#auth #navigation .button--signin #auth #navigation .button--signin
display: none display: none
.button--grey
height: 22px
padding: 0 10px 0 10px
background-color: #696867
color: #f2f2f2
// line-height: 1.45
font-size: $font-size-small
border: none
@extend %border-radius-4px
&:hover,
&:active
background-color: lighten(#696867, 10)
&:focus
background-color: #696867

View File

@ -1,20 +1,112 @@
pre#log .log
position: relative position: relative
clear: left margin-top: 35px
min-height: 42px
margin-top: 25px .log-tail
margin-top: 1em z-index: 99
padding: 15px 0 position: absolute
color: $color-text-log display: block
font-family: monospace top: 0
font-size: $font-size-log right: 0
line-height: $line-height-log margin: 10px 10px 0 0
white-space: pre-wrap
word-wrap: break-word .tail-label
background-color: #2a2a2a display: none
border-radius: 4px cursor: pointer
counter-reset: line-numbering
&:hover
.tail-label
display: inline-block
.tail-status
display: none
&.scrolling
position: fixed
right: 32px
&.bottom
bottom: 45px
top: inherit
.tail-status
position: relative
display: inline-block
height: 20px;
width: 20px;
vertical-align: middle
background-color: #696867;
border-radius: 50%;
&:after
content: ""
display: block
height: 10px;
width: 10px;
background: #F2F2F2;
border-radius: 50%;
@extend %absolute-center
&.active .tail-status
background-color: #6b0
.to-top
z-index: 99
position: absolute
display: block
bottom: 2px
right: 2px
margin-right: 2px
padding-right: 16px
text-align: right
color: #999
background: inline-image('ui/workers-close.svg') no-repeat right 6px
.log-header
height: 44px
margin: 0
padding: .9em .8em .6em
text-align: right
background-color: $log-header-bg
@extend %border-top-4px
a
margin-left: .4em
.icon
display: inline-block
background:
size: 100%
repeat: no-repeat
width: 1.3em
height: 1.1em
margin-right: 6px
vertical-align: middle
.icon--downloadLog
background-image: inline-image('icons/download-log-icon.svg')
.icon--removeLog
background-image: inline-image('icons/remove-log-icon.svg')
.icon--down
width: 0.7em
height: 0.9em
margin-right: 4px
background-image: inline-image('icons/end-of-log-icon.svg')
.log-body
position: relative
pre
clear: left
min-height: 42px
padding: 15px 0
color: $color-text-log
font-family: monospace
font-size: $font-size-log
line-height: $line-height-log
white-space: pre-wrap
word-wrap: break-word
background-color: #2a2a2a
counter-reset: line-numbering
margin-top: 0
@extend %border-bottom-4px
.cut .cut
padding: 20px 15px 0 55px padding: 20px 15px 0 55px
@ -95,74 +187,16 @@ pre#log
border-radius: 6px border-radius: 6px
color: #bbb color: #bbb
.loading
padding: 25px 0 0 10px
#log.loading .log-notice
padding: 25px 0 0 10px background-color: #A6ADAD
color: $white
#log-container min-height: 70px
position: relative line-height: 35px
margin-top: 35px text-align: center
@extend %border-radius-4px
#log-container @media #{$medium-up}
#tail height: 70px
z-index: 99 line-height: 70px
position: absolute
display: block
top: 0
right: 2px
margin: 13px 10px 0 0
padding: 0 2px 0 3px
color: #666
text-shadow: 0px 1px 0px #fff
font-family: "Source Sans Pro", Helvetica, sans-serif
font-size: $font-size-tiny
line-height: 14px
text-decoration: none
white-space: nowrap
border: 1px solid #bbb
border-top-color: #ddd
border-bottom-color: #bbb
border-radius: 8px
background: linear-gradient(#fff, #e0e0e0)
label
display: none
cursor: pointer
&:hover
padding: 1px 4px 1px 6px
label
display: inline
&.scrolling
position: fixed
right: 32px
&.bottom
bottom: 45px
top: inherit
.status
display: inline-block
margin-right: 1px
width: 8px
height: 8px
background-color: #aaa
border-radius: 4px
box-shadow: $white 1px 1px 2px
&.active .status
background-color: #6b0
.to-top
z-index: 99
position: absolute
display: block
bottom: 2px
right: 2px
margin-right: 2px
padding-right: 16px
text-align: right
color: #999
background: inline-image('ui/workers-close.svg') no-repeat right 6px

View File

@ -88,12 +88,6 @@
li.cancel-build a, li.cancel-job a li.cancel-build a, li.cancel-job a
background-image: inline-image('icons/off.svg') background-image: inline-image('icons/off.svg')
li.download-log a
background-image: inline-image('icons/download-log.svg')
li.remove-log a
background-image: inline-image('icons/delete-log.svg')
li.code-climate a li.code-climate a
background-image: inline-image('icons/code-climate-icon.svg') background-image: inline-image('icons/code-climate-icon.svg')

View File

@ -1,25 +1,37 @@
<div id="log-container"> <section id="log-container" class="log">
<a href="#" id="tail" {{action "toggleTailing" target=view}}> {{#if view.job.notStarted}}
<span class="status"></span> <div class="log-notice">Hang tight, the log cannot be shown until the build has started.</div>
{{/if}}
<label> <div {{bind-attr class="view.job.notStarted:hidden"}}>
{{#if view.job.isFinished}} <menu class="log-header">
Scroll to End of Log {{#if view.canRemoveLog}}
{{else}} <a href="#" class="button button--grey open-popup" {{action "removeLogPopup" target=view}}><span class="icon icon--removeLog"></span> Remove Log</a>
Follow Log
{{/if}} {{/if}}
</label> <a class="button button--grey" {{bind-attr href="view.plainTextLogUrl"}}><span class="icon icon--downloadLog"></span> Download Log</a>
</a> </menu>
<pre id="log" class="ansi"></pre> <div class="log-body">
<a href="#" id="tail" class="log-tail" {{action "toggleTailing" target=view}}>
<span class="tail-status"></span>
<span class="tail-label button button--grey"><span class="icon icon--down"></span>
{{#if view.job.isFinished}}
Scroll to End of Log
{{else}}
Follow Log
{{/if}}
</span>
</a>
<pre id="log" class="ainsi"></pre>
{{#if view.log.hasContent}} {{#if view.log.hasContent}}
<a href='#' class="to-top" {{action "toTop" target=view}}>Top</a> <a href='#' class="to-top" {{action "toTop" target=view}}>Top</a>
{{/if}} {{/if}}
{{#if view.limited}} {{#if view.limited}}
<p class="warning"> <p class="warning">
This log is too long to be displayed. Please reduce the verbosity of your This log is too long to be displayed. Please reduce the verbosity of your
build or download the <a {{bind-attr href="view.plainTextLogUrl"}}>raw log</a>. build or download the <a {{bind-attr href="view.plainTextLogUrl"}}>raw log</a>.
</p> </p>
{{/if}} {{/if}}
</div> </div>
</div>
</section>

View File

@ -32,22 +32,6 @@
{{/if}} {{/if}}
</li> </li>
{{/if}} {{/if}}
{{#if view.jobIdForLog}}
{{#if view.showDownloadLog}}
<li class="icon download-log" title="Download Log">
<a class="download-log" {{bind-attr href="view.plainTextLogUrl"}}></a>
</li>
{{/if}}
{{/if}}
{{! the next if is a hack for refreshing displayRemoveLog when we change
views, it sometimes doesn't work properly }}
{{#if view.jobIdForLog}}
{{#if view.displayRemoveLog}}
<li class="icon remove-log" title="Remove Log">
<a href="#" name="remove-log-popup" class="open-popup" {{action "removeLogPopup" target=view}}></a>
</li>
{{/if}}
{{/if}}
{{#if view.displayCodeClimate}} {{#if view.displayCodeClimate}}
<li class="icon code-climate" title="Test Coverage with Code Climate"> <li class="icon code-climate" title="Test Coverage with Code Climate">
<a href="#" name="code-climate" <a href="#" name="code-climate"

View File

@ -2,6 +2,7 @@
`import LogFolder from 'travis/utils/log-folder'` `import LogFolder from 'travis/utils/log-folder'`
`import config from 'travis/config/environment'` `import config from 'travis/config/environment'`
`import { plainTextLog as plainTextLogUrl } from 'travis/utils/urls'` `import { plainTextLog as plainTextLogUrl } from 'travis/utils/urls'`
`import BasicView from 'travis/views/basic'`
Log.DEBUG = false Log.DEBUG = false
Log.LIMIT = 10000 Log.LIMIT = 10000
@ -22,8 +23,9 @@ Log.Scroll.prototype = $.extend new Log.Listener,
$('#main').scrollTop(0) $('#main').scrollTop(0)
$('html, body').scrollTop(element.offset()?.top - (window.innerHeight / 3)) # weird, html works in chrome, body in firefox $('html, body').scrollTop(element.offset()?.top - (window.innerHeight / 3)) # weird, html works in chrome, body in firefox
View = Ember.View.extend View = BasicView.extend
templateName: 'jobs/pre' templateName: 'jobs/pre'
currentUserBinding: 'controller.currentUser'
logWillChange: (-> logWillChange: (->
console.log 'log view: log will change' if Log.DEBUG console.log 'log view: log will change' if Log.DEBUG
@ -99,6 +101,16 @@ View = Ember.View.extend
url url
).property('job.log.id', 'job.log.token') ).property('job.log.id', 'job.log.token')
hasPermission: (->
if permissions = @get('currentUser.permissions')
permissions.contains parseInt(@get('job.repo.id'))
).property('currentUser.permissions.length', 'job.repo.id')
canRemoveLog: (->
if job = @get('job')
job.get('canRemoveLog') && @get('hasPermission')
).property('job.canRemoveLog', 'hasPermission')
actions: actions:
toTop: () -> toTop: () ->
$(window).scrollTop(0) $(window).scrollTop(0)
@ -108,6 +120,26 @@ View = Ember.View.extend
@engine.autoCloseFold = !Travis.tailing.isActive() @engine.autoCloseFold = !Travis.tailing.isActive()
event.preventDefault() event.preventDefault()
removeLog: ->
@popupCloseAll()
if @get('canRemoveLog')
job = @get('_job') || @get('build.jobs.firstObject')
job.removeLog().then ->
Travis.flash(success: 'Log has been successfully removed.')
, (xhr) ->
if xhr.status == 409
Travis.flash(error: 'Log can\'t be removed')
else if xhr.status == 401
Travis.flash(error: 'You don\'t have sufficient access to remove the log')
else
Travis.flash(error: 'An error occured when removing the log')
removeLogPopup: ->
if @get('canRemoveLog')
@set('active', true)
@popup('remove-log-popup')
return false
noop: -> # TODO required? noop: -> # TODO required?
`export default View` `export default View`

View File

@ -68,12 +68,6 @@ View = BasicView.extend
@popup('code-climate') @popup('code-climate')
return false return false
removeLogPopup: ->
if @get('canRemoveLog')
@set('active', true)
@popup('remove-log-popup')
return false
hasPermission: (-> hasPermission: (->
if permissions = @get('currentUser.permissions') if permissions = @get('currentUser.permissions')
permissions.contains parseInt(@get('repo.id')) permissions.contains parseInt(@get('repo.id'))

View File

@ -1,14 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="154px" height="152px" viewBox="0 0 154 152" enable-background="new 0 0 154 152" xml:space="preserve">
<g>
<polygon fill="#FFFFFF" points="130.351,34.261 130.351,16.789 86.292,16.789 101.697,34.261 "/>
<polygon fill="#FFFFFF" points="154.008,67.817 154.008,50.348 98.743,50.348 83.337,67.817 "/>
<polygon fill="#FFFFFF" points="144.88,101.377 144.88,83.927 87.781,83.927 103.165,101.377 "/>
<polygon fill="#FFFFFF" points="109.396,134.958 109.396,117.485 97.266,117.485 81.873,134.958 "/>
</g>
<polygon fill="#FFFFFF" points="60.836,73.358 89.697,40.631 73.842,22.652 44.968,55.389 16.096,22.652 0.239,40.631
29.102,73.358 0.239,106.083 16.096,124.075 44.968,91.338 73.842,124.075 89.697,106.083 "/>
</svg>

Before

Width:  |  Height:  |  Size: 1.1 KiB

View File

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="11.731px" height="9.999px" viewBox="0 0 11.731 9.999" enable-background="new 0 0 11.731 9.999" xml:space="preserve">
<g>
<g>
<rect x="5.763" y="0.068" fill="#F2F2F2" width="3.981" height="1.468"/>
<rect x="5.763" y="2.888" fill="#F2F2F2" width="5.969" height="1.469"/>
<polygon fill="#F2F2F2" points="10.965,7.175 10.965,5.71 8.565,5.71 7.352,7.175 "/>
<polygon fill="#F2F2F2" points="7.982,9.997 7.982,8.529 6.229,8.529 5.012,9.997 "/>
</g>
<polygon fill="#F2F2F2" points="4.361,5.749 4.361,0 2.421,0 2.421,5.849 0,5.841 3.341,9.999 6.847,5.77 "/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 960 B

View File

@ -1,14 +0,0 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="154px" height="152px" viewBox="0 0 154 152" enable-background="new 0 0 154 152" xml:space="preserve">
<g>
<rect x="75.688" y="12.894" fill="#FFFFFF" width="51.308" height="18.926"/>
<rect x="75.688" y="49.244" fill="#FFFFFF" width="76.933" height="18.926"/>
<polygon fill="#FFFFFF" points="142.733,104.521 142.733,85.62 111.813,85.62 96.149,104.521 "/>
<polygon fill="#FFFFFF" points="104.296,140.896 104.296,121.97 81.688,121.97 66,140.896 "/>
</g>
<polygon fill="#FFFFFF" points="57.609,86.132 57.609,12.021 32.608,12.021 32.608,87.408 1.408,87.307 44.471,140.921
89.659,86.396 "/>
</svg>

Before

Width:  |  Height:  |  Size: 967 B

View File

@ -0,0 +1,7 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="6.752px" height="7.997px" viewBox="0 0 6.752 7.997" enable-background="new 0 0 6.752 7.997" xml:space="preserve">
<polyline fill="#F2F2F2" points="2.263,4.63 2.263,0 4.515,0 4.515,4.63 6.751,4.63 3.378,7.997 0,4.63 2.263,4.63 "/>
</svg>

After

Width:  |  Height:  |  Size: 612 B

View File

@ -0,0 +1,16 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.4, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="13.012px" height="10px" viewBox="0 0 13.012 10" enable-background="new 0 0 13.012 10" xml:space="preserve">
<g>
<g>
<polygon fill="#F2F2F2" points="11.01,1.479 11.01,0 7.281,0 8.586,1.479 "/>
<polygon fill="#F2F2F2" points="13.012,4.319 13.012,2.84 8.335,2.84 7.032,4.319 "/>
<polygon fill="#F2F2F2" points="12.239,7.158 12.239,5.681 7.407,5.681 8.709,7.158 "/>
<polygon fill="#F2F2F2" points="9.236,10 9.236,8.521 8.21,8.521 6.908,10 "/>
</g>
<polygon fill="#F2F2F2" points="5.128,4.788 7.569,2.018 6.228,0.496 3.784,3.267 1.342,0.496 0,2.018 2.441,4.788 0,7.556
1.342,9.08 3.784,6.308 6.228,9.08 7.569,7.556 "/>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.0 KiB