diff --git a/static/css/index.less b/static/css/index.less index 7920b76..94fd036 100644 --- a/static/css/index.less +++ b/static/css/index.less @@ -5,7 +5,7 @@ // bootstrap @import "@{bowerPath}/bootstrap/less/bootstrap.less"; -//flatly +/*//flatly*/ @import "./sources/common/variables-flatly.less"; //font-awesome diff --git a/static/css/sources/components/builds.less b/static/css/sources/components/builds.less index d86da6d..8c2e49b 100644 --- a/static/css/sources/components/builds.less +++ b/static/css/sources/components/builds.less @@ -14,7 +14,7 @@ .row(); padding: 15px 0; margin-bottom: 3px; - background: lighten(@well-bg, 3%); + background: @well-bg; &_status { float: left; @@ -41,6 +41,7 @@ &_progress { padding-top: 14px; .progress { + height: 18px; margin-bottom: 0; } } @@ -64,6 +65,28 @@ opacity: 1; } } + + &__small { + .build_status { + padding-top: 5px; + } + .build_header { + font-size: 14px; + } + .build_content { + .make-xs-column(7); + } + .build_controls { + .make-xs-column(5); + font-size: 12px; + &_progress { + padding-top: 4px; + .progress { + height: 12px; + } + } + } + } } @animation-duration: 1.5s; @@ -94,6 +117,11 @@ &__queued { background: @brand-primary; } + + &__small { + width: 10px; + height: 10px; + } } .pulsate-frames() { diff --git a/static/js/app/components/buildSidebar/index.jade b/static/js/app/components/buildSidebar/index.jade new file mode 100644 index 0000000..86eeca3 --- /dev/null +++ b/static/js/app/components/buildSidebar/index.jade @@ -0,0 +1,17 @@ +.builds(style={paddingTop: '20px'}) + each item in this.state.items + .build.build__small(key=item.id) + .build_content + .build_status + .status.status__small(class="status__#{item.status}") + .build_header + Link(to="build", params={id: item.id}) + span build # + span= item.number + .build_controls + if item.status === 'in-progress' + .build_controls_progress + if item.project.avgBuildDuration + Progress(build=item) + if item.endDate + DateTime(value=item.endDate) diff --git a/static/js/app/components/buildSidebar/index.js b/static/js/app/components/buildSidebar/index.js new file mode 100644 index 0000000..b271ecf --- /dev/null +++ b/static/js/app/components/buildSidebar/index.js @@ -0,0 +1,33 @@ +'use strict'; + +define([ + 'underscore', + 'react', 'react-router', + 'app/stores/builds', 'reflux', + 'templates/app/components/buildSidebar/index', 'app/components/common/index', +], function( + _, + React, Router, + buildsStore, Reflux, + template, CommonComponents +) { + template = template.locals(_({ + Link: Router.Link + }).extend(CommonComponents)); + + return React.createClass({ + mixins: [ + Reflux.connectFilter(buildsStore, 'items', function(items) { + var projectName = this.props.projectName; + if (projectName) { + return _(items).filter(function(item) { + return item.project && item.project.name === projectName; + }); + } else { + return items; + } + }) + ], + render: template + }); +}); diff --git a/static/js/app/components/builds/view.jade b/static/js/app/components/builds/view.jade index 7fce52e..ba4e0fa 100644 --- a/static/js/app/components/builds/view.jade +++ b/static/js/app/components/builds/view.jade @@ -11,9 +11,11 @@ mixin statusBadge(build) if build.status === 'error' span.label.label-danger error -div.row +.row if this.state.build - .col-md-8 + .col-sm-3.hidden-xs + BuildSidebar(projectName=this.state.build.project.name) + .col-sm-9 h1 .pull-right(style={fontSize: '22px'}) mixin statusBadge(this.state.build) @@ -114,14 +116,22 @@ div.row | | Console output .build-view_terminal - Terminal(build=this.state.build.id) + if this.state.showConsole + Terminal(build=this.state.build.id, showPreloader=true) - if this.state.build.completed - if this.state.build.error - .text-center.alert.alert-danger - | Build ended with error - Duration(value=(this.state.build.endDate - this.state.build.startDate), withSuffix=true) + if this.state.build.completed + if this.state.build.error + .text-center.alert.alert-danger + | Build ended with error + Duration(value=(this.state.build.endDate - this.state.build.startDate), withSuffix=true) + else + .text-center.alert.alert-success + | Build successfully completed + Duration(value=(this.state.build.endDate - this.state.build.startDate), withSuffix=true) else - .text-center.alert.alert-success - | Build successfully completed - Duration(value=(this.state.build.endDate - this.state.build.startDate), withSuffix=true) + .well.text-center + button.btn.btn-primary(onClick=this.toggleConsole) + i.fa.fa-fw.fa-refresh + | + | Load console output... + diff --git a/static/js/app/components/builds/view.js b/static/js/app/components/builds/view.js index 373e419..54bfb19 100644 --- a/static/js/app/components/builds/view.js +++ b/static/js/app/components/builds/view.js @@ -7,18 +7,20 @@ define([ 'app/actions/build', 'app/stores/build', 'app/components/terminal/terminal', + 'app/components/buildSidebar/index', 'templates/app/components/builds/view', 'app/components/common/index' ], function( - React, Router, Reflux, BuildActions, buildStore, TerminalComponent, template, - CommonComponents + React, Router, Reflux, BuildActions, buildStore, TerminalComponent, + BuildSidebar, template, CommonComponents ) { template = template.locals({ DateTime: CommonComponents.DateTime, Duration: CommonComponents.Duration, Scm: CommonComponents.Scm, Terminal: TerminalComponent, - Link: Router.Link + Link: Router.Link, + BuildSidebar: BuildSidebar }); var Component = React.createClass({ @@ -32,16 +34,24 @@ define([ this.listenTo(buildStore, this.updateBuild); }, updateBuild: function(build) { - if (!this.state.build && build) { - BuildActions.readTerminalOutput(build); + if (build) { + BuildActions.readAll({projectName: build.project.name}); } this.setState({build: build}); }, render: template, getInitialState: function() { return { - build: null + build: null, + showConsole: false }; + }, + toggleConsole: function() { + var consoleState = !this.state.showConsole; + if (consoleState) { + BuildActions.readTerminalOutput(this.state.build); + } + this.setState({showConsole: consoleState}); } }); diff --git a/static/js/app/components/dashboard/index.jade b/static/js/app/components/dashboard/index.jade index aff40eb..f680a21 100644 --- a/static/js/app/components/dashboard/index.jade +++ b/static/js/app/components/dashboard/index.jade @@ -1,5 +1,5 @@ .main-row .row - .col-md-8 - h2 Last builds + .col-md-8.col-sm-12 + h2 Builds history BuildsList()