diff --git a/static/css/sources/components/builds.less b/static/css/sources/components/builds.less index 1dbc797..afaf332 100644 --- a/static/css/sources/components/builds.less +++ b/static/css/sources/components/builds.less @@ -29,4 +29,7 @@ font-size: inherit; } } + &_terminal { + margin-top: 10px; + } } diff --git a/static/js/app/actions/build.js b/static/js/app/actions/build.js index 4c99c9e..65912b7 100644 --- a/static/js/app/actions/build.js +++ b/static/js/app/actions/build.js @@ -2,7 +2,7 @@ define(['reflux'], function(Reflux) { var Actions = Reflux.createActions([ - 'readConsoleOutput', + 'readTerminalOutput', 'readAll' ]); diff --git a/static/js/app/app.js b/static/js/app/app.js index d9485a2..998adee 100644 --- a/static/js/app/app.js +++ b/static/js/app/app.js @@ -21,7 +21,6 @@ define([ ); Router.run(routes, Router.HistoryLocation, function(Handler) { - console.log(Handler); React.render(template({ Component: Handler }), document.getElementById('content')); diff --git a/static/js/app/components/app.js b/static/js/app/components/app.js index eec75ae..b742398 100644 --- a/static/js/app/components/app.js +++ b/static/js/app/components/app.js @@ -4,15 +4,14 @@ define([ 'react', 'app/components/projects/index', 'app/components/builds/index', - 'app/components/console/index', + 'app/components/terminal/index', 'templates/app/components/app' ], function(React, Projects, Builds, Console, template) { var Component = React.createClass({ render: function() { return template({ ProjectsList: Projects.List, - BuildsList: Builds.List, - Console: Console.Console + BuildsList: Builds.List }); } }); diff --git a/static/js/app/components/builds/item.jade b/static/js/app/components/builds/item.jade index ba6b89c..09a621d 100644 --- a/static/js/app/components/builds/item.jade +++ b/static/js/app/components/builds/item.jade @@ -13,7 +13,10 @@ mixin statusText(build) .build(class="build__#{build.status}") .build_controls.pull-right a(href="javascript:void(0);", onClick=this.onBuildSelect(build.id)) - i.fa.fa-2x.fa-repeat(title="Rebuild", style={marginTop: '5px'}, onClick=this.onRebuildProject(build.project.name)) + i.fa.fa-2x.fa-repeat(title="Rebuild", style={marginRight: '15px'}, onClick=this.onRebuildProject(build.project.name)) + a(href="javascript:void(0);", onClick=this.onShowTerminal) + i.fa.fa-2x.fa-terminal(title="Rebuild") + .build_header span # span= build.id @@ -34,7 +37,7 @@ mixin statusText(build) span.build_info i.fa.fa-fw.fa-clock-o | builded at - DateTime(date=new Date(build.createDate)) + DateTime(date=new Date(build.endDate)) else if build.startDate span.build_info @@ -45,4 +48,8 @@ mixin statusText(build) span.build_info i.fa.fa-fw.fa-clock-o | queued at - DateTime(date=new Date(build.endDate)) + DateTime(date=new Date(build.createDate)) + + if this.state.showTerminal + .build_terminal + Terminal(build=build) diff --git a/static/js/app/components/builds/item.js b/static/js/app/components/builds/item.js index 374d2e6..91fd821 100644 --- a/static/js/app/components/builds/item.js +++ b/static/js/app/components/builds/item.js @@ -3,20 +3,32 @@ define([ 'react', 'app/actions/project', 'app/actions/build', 'templates/app/components/builds/item', + 'app/components/terminal/terminal', 'app/components/common/index' -], function(React, ProjectActions, BuildActions, template, CommonComponents) { +], function( + React, ProjectActions, BuildActions, template, + TerminalComponent, CommonComponents +) { template = template.locals({ - DateTime: CommonComponents.DateTime + DateTime: CommonComponents.DateTime, + Terminal: TerminalComponent }); - console.log(CommonComponents.DateTime); var Component = React.createClass({ + getInitialState: function() { + return { + showTerminal: false + }; + }, onRebuildProject: function(projectName) { ProjectActions.run(projectName) }, + onShowTerminal: function(build) { + this.setState({showTerminal: !this.state.showTerminal}); + BuildActions.readTerminalOutput(this.props.build.id); + }, onBuildSelect: function(buildId) { console.log('on build select'); - BuildActions.readConsoleOutput(buildId); }, render: template }); diff --git a/static/js/app/components/console/console.jade b/static/js/app/components/console/console.jade deleted file mode 100644 index 04a9757..0000000 --- a/static/js/app/components/console/console.jade +++ /dev/null @@ -1,3 +0,0 @@ -if name - h2= name - pre= data diff --git a/static/js/app/components/console/index.js b/static/js/app/components/terminal/index.js similarity index 69% rename from static/js/app/components/console/index.js rename to static/js/app/components/terminal/index.js index a8f6baf..c8f9765 100644 --- a/static/js/app/components/console/index.js +++ b/static/js/app/components/terminal/index.js @@ -1,7 +1,7 @@ 'use strict'; define([ - 'app/components/console/console', + 'app/components/terminal/terminal', ], function(Console) { return { Console: Console diff --git a/static/js/app/components/terminal/terminal.jade b/static/js/app/components/terminal/terminal.jade new file mode 100644 index 0000000..aaabda9 --- /dev/null +++ b/static/js/app/components/terminal/terminal.jade @@ -0,0 +1 @@ +pre= data diff --git a/static/js/app/components/console/console.js b/static/js/app/components/terminal/terminal.js similarity index 55% rename from static/js/app/components/console/console.js rename to static/js/app/components/terminal/terminal.js index e58750a..d41d782 100644 --- a/static/js/app/components/console/console.js +++ b/static/js/app/components/terminal/terminal.js @@ -3,16 +3,19 @@ define([ 'react', 'reflux', - 'app/stores/console', - 'templates/app/components/console/console' -], function(React, Reflux, consoleStore, template) { + 'app/stores/terminal', + 'templates/app/components/terminal/terminal' +], function(React, Reflux, terminalStore, template) { var Component = React.createClass({ mixins: [Reflux.ListenerMixin], componentDidMount: function() { - this.listenTo(consoleStore, this.updateItems); + this.listenTo(terminalStore, this.updateItems); }, updateItems: function(data) { - this.setState({data: data}); + // listen just our console update + if (data.buildId === this.props.build.id) { + this.setState({data: data}); + } }, render: function() { return template(this.state.data); diff --git a/static/js/app/stores/console.js b/static/js/app/stores/terminal.js similarity index 91% rename from static/js/app/stores/console.js rename to static/js/app/stores/terminal.js index a29d2f6..a550514 100644 --- a/static/js/app/stores/console.js +++ b/static/js/app/stores/terminal.js @@ -13,7 +13,7 @@ define([ console.log('init builds console output'); }, - onReadConsoleOutput: function(buildId) { + onReadTerminalOutput: function(buildId) { var self = this; self.output = ''; @@ -27,6 +27,7 @@ define([ if (!/\n$/.test(self.output)) self.output += '\n'; self.trigger({ + buildId: buildId, name: 'Console for build #' + buildId, data: self.output });