suzanne.soy/travis-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

make dashboard more dynamic

Browse Source
This commit is contained in:
Lisa Passing 2015-01-16 16:57:56 +01:00
parent 974861adda
commit bf4bb17996
3 changed files with 81 additions and 132 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
assets/scripts/app/routes/dashboard.coffee
View File

@ -11,4 +11,16 @@ Route = TravisRoute.extend
@get('stylesheetsManager').enable('main')
@get('stylesheetsManager').disable('dashboard')
model: ->
apiEndpoint = @get('config').api_endpoint
$.ajax(apiEndpoint + '/repos?member=lislis', {
beforeSend: (xhr) ->
xhr.setRequestHeader('accept', 'application/json; version=2')
}).then (response) ->
response.repos.map (elem) ->
[owner, name] = elem.slug.split('/')
elem.owner = owner
elem.name = name
Ember.Object.create(elem)
Travis.DashboardRoute = Route

63
assets/scripts/app/templates/dashboard.hbs
View File

@ -1,66 +1,21 @@
<div class="tiles">
<div class="row">
{{#each repo in model}}
<div class="large-4 medium-6 columns">
<div class="tile">
<div class="build-failed">
<div {{bind-attr class=":tile repo.last_build_state"}}>
<div class="build-bar">
</div>
<div class="build-information">
<p class="org failed">travis-ci</p>
<p class="repo failed">travisbot</p>
<div class="duration">56 sec</div>
<div class="finished">1 day ago</div>
<p class="build-status failed">#3286 Failed</p>
</div>
<div class="star-feature">
</div>
</div>
</div>
<div class="large-4 medium-6 columns">
<div class="tile">
<div class="build-pending">
</div>
<div class="build-information">
<p class="org pending">travis-ci</p>
<p class="repo pending">travis-cookbooks</p>
<div class="if_private">Private</div>
<div class="duration"> 27 sec</div>
<div class="finished"> 3 min ago</div>
<p class="build-status pending">#3286 Started</p>
</div>
<div class="star-feature">
</div>
</div>
</div>
<div class="large-4 medium-6 columns">
<div class="tile">
<div class="build-passed">
</div>
<div class="build-information">
<p class="org passed">travis-ci</p>
<p class="repo passed">docs-travis-ci-com</p>
<div class="duration">4 min 5 sec</div>
<div class="finished">1 day ago</div>
<p class="build-status passed">#3286 Passed</p>
</div>
<div class="star-feature">
</div>
</div>
</div>
<div class="large-4 medium-6 columns end">
<div class="tile">
<div class="build-passed">
</div>
<div class="build-information">
<p class="org passed">travis-ci</p>
<p class="repo passed">travis-worker</p>
<div class="duration">11 min 12 sec</div>
<div class="finished">2 days ago</div>
<p class="build-status passed">#3286 Passed</p>
<p class="org">{{repo.owner}}</p>
<p class="repo">{{repo.name}}</p>
<div class="duration">{{formatDuration repo.last_build_duration}}</div>
<div class="finished">{{formatTime repo.last_build_finished_at}}</div>
<p class="build-status">#{{repo.last_build_number}} {{repo.last_build_state}}</p>
</div>
<div class="star-feature">
</div>
</div>
</div>
{{/each}}
</div>
</div>

138
assets/styles/dashboard/dashboard.scss
View File

@ -391,40 +391,73 @@ a {
-moz-border-radius : 4px;
}
.build-passed {
.build-bar {
position : absolute;
background : #3ba85d url('/images/dashboard/status-passed.svg') no-repeat 7px 10px;
background-size : 20px 20px;
background: {
repeat: no-repeat;
position: 7px 10px;
size: 20px 20px;
}
min-height : 125px;
width : 33px;
border-radius : 4px 0 0 4px;
}
.build-failed {
position : absolute;
background : #d04729 url('/images/dashboard/status-failed.svg') no-repeat 7px 10px;
background-size : 20px 20px;
min-height : 125px;
width : 33px;
border-radius : 4px 0 0 4px;
.passed {
.build-bar {
background: {
color: #3ba85d;
image: url('/images/dashboard/status-passed.svg');
}
}
.org,
.repo,
.build-status {
color: #3ba85d;
}
}
.build-pending {
position : absolute;
background : #d2ca28 url('/images/dashboard/status-pending.svg') no-repeat 7px 10px;
background-size : 20px 20px;
min-height : 125px;
width : 33px;
border-radius : 4px 0 0 4px;
.failed {
.build-bar {
background: {
color: #d04729;
image: url('/images/dashboard/status-failed.svg');
}
}
.org,
.repo,
.build-status {
color: #d04729;
}
}
.build-errored {
position : absolute;
background : #bec0c2 url('/images/dashboard/status-errored.svg') no-repeat 7px 10px;
background-size : 20px 20px;
min-height : 125px;
width : 33px;
border-radius : 4px 0 0 4px;
.started {
.build-bar {
background: {
color: #848032;
image: url('/images/dashboard/status-pending.svg');
}
}
.org,
.repo,
.build-status {
color: #848032;
}
}
.errored {
.build-bar {
background: {
color: #999999;
image: url('/images/dashboard/status-errored.svg');
}
}
.org,
.repo,
.build-status {
color: #999999;
}
}
.tile .build-information {
@ -446,59 +479,6 @@ a {
text-overflow : ellipsis;
}
p.org.passed {
color : #3ba85d;
}
p.org.failed {
color : #d04729;
}
p.org.pending {
color : #848032;
}
p.org.errored {
color : #999999;
}
p.repo.passed {
color : #3ba85d;
}
p.repo.failed {
color : #d04729;
}
p.repo.pending {
color : #848032;
}
p.repo.errored {
color : #999999;
}
p.build-status {
position : absolute;
bottom : 25px;
}
p.build-status.passed {
color : #3ba85d;
}
p.build-status.failed {
color : #d04729;
}
p.build-status.pending {
color : #848032;
}
p.repo.errored {
color : #999999;
}
.duration, .finished {
margin-top : 8px;
background-repeat: no-repeat;
@ -520,7 +500,9 @@ p.repo.errored {
}
.build-status {
margin-bottom : 0;
position: absolute;
bottom: 25px;
margin-bottom: 0;
}
.tile .star-feature {