diff --git a/app/ContainerDetails.react.js b/app/ContainerDetails.react.js index 63c0e733c8..b8c93ae509 100644 --- a/app/ContainerDetails.react.js +++ b/app/ContainerDetails.react.js @@ -8,8 +8,8 @@ var Link = Router.Link; var RouteHandler = Router.RouteHandler; var Convert = require('ansi-to-html'); var convert = new Convert(); -var ContainerStore = require('./ContainerStore.js'); -var docker = require('./docker.js'); +var ContainerStore = require('./ContainerStore'); +var docker = require('./docker'); var ContainerDetails = React.createClass({ mixins: [Router.State], @@ -18,12 +18,12 @@ var ContainerDetails = React.createClass({ logs: [] }; }, - componentWillMount: function () { + componentWillReceiveProps: function () { this.update(); var self = this; var logs = []; var index = 0; - docker.client().getContainer(this.getParams().Id).logs({ + docker.client().getContainer(this.getParams().name).logs({ follow: false, stdout: true, timestamps: true @@ -40,7 +40,50 @@ var ContainerDetails = React.createClass({ }); stream.on('end', function (buf) { self.setState({logs: logs}); - docker.client().getContainer(self.getParams().Id).logs({ + docker.client().getContainer(self.getParams().name).logs({ + follow: true, + stdout: true, + timestamps: true, + tail: 0 + }, function (err, stream) { + stream.setEncoding('utf8'); + stream.on('data', function (buf) { + // Every other message is a header + if (index % 2 === 1) { + var time = buf.substr(0,buf.indexOf(' ')); + var msg = buf.substr(buf.indexOf(' ')+1); + logs.push(convert.toHtml(self._escapeHTML(msg))); + self.setState({logs: logs}); + } + index += 1; + }); + }); + }); + }); + }, + componentWillMount: function () { + this.update(); + var self = this; + var logs = []; + var index = 0; + docker.client().getContainer(this.getParams().name).logs({ + follow: false, + stdout: true, + timestamps: true + }, function (err, stream) { + stream.setEncoding('utf8'); + stream.on('data', function (buf) { + // Every other message is a header + if (index % 2 === 1) { + var time = buf.substr(0,buf.indexOf(' ')); + var msg = buf.substr(buf.indexOf(' ')+1); + logs.push(convert.toHtml(self._escapeHTML(msg))); + } + index += 1; + }); + stream.on('end', function (buf) { + self.setState({logs: logs}); + docker.client().getContainer(self.getParams().name).logs({ follow: true, stdout: true, timestamps: true, @@ -68,9 +111,9 @@ var ContainerDetails = React.createClass({ ContainerStore.removeChangeListener(this.update); }, update: function () { - var containerId = this.getParams().Id; + var containerName = this.getParams().name; this.setState({ - container: ContainerStore.containers()[containerId] + container: ContainerStore.containers()[containerName] }); }, _escapeHTML: function (html) { diff --git a/app/ContainerModal.react.js b/app/ContainerModal.react.js index aa37a2e846..9da1b4e8df 100644 --- a/app/ContainerModal.react.js +++ b/app/ContainerModal.react.js @@ -3,7 +3,7 @@ var Router = require('react-router'); var Modal = require('react-bootstrap/Modal'); var RetinaImage = require('react-retina-image'); var $ = require('jquery'); -var ContainerStore = require('./ContainerStore.js'); +var ContainerStore = require('./ContainerStore'); var ContainerModal = React.createClass({ getInitialState: function () { @@ -28,7 +28,6 @@ var ContainerModal = React.createClass({ if (query === this.state.query) { return; } - clearTimeout(this.timeout); var self = this; this.timeout = setTimeout(function () { @@ -37,7 +36,8 @@ var ContainerModal = React.createClass({ }, handleClick: function (event) { var name = event.target.getAttribute('name'); - ContainerStore.create(name); + ContainerStore.create(name, 'latest', function (err, containerName) { + }); }, render: function () { var top = this.state.results.splice(0, 7); diff --git a/app/ContainerStore.js b/app/ContainerStore.js index 3c0dc93ed9..3e0fb0e03a 100644 --- a/app/ContainerStore.js +++ b/app/ContainerStore.js @@ -42,6 +42,7 @@ var ContainerStore = assign(EventEmitter.prototype, { docker.client().getEvents(function (err, stream) { stream.setEncoding('utf8'); stream.on('data', function (data) { + console.log(data); // TODO: Make self.update(function (err) { @@ -69,10 +70,9 @@ var ContainerStore = assign(EventEmitter.prototype, { } var containers = {}; results.map(function (r) { - containers[r.Id] = r; + containers[r.Name.replace('/', '')] = r; }); self._containers = containers; - console.log(containers); self.emit('change'); callback(null); }); @@ -157,6 +157,10 @@ var ContainerStore = assign(EventEmitter.prototype, { } } }, + // Returns all shoes + containers: function() { + return this._containers; + }, create: function (repository, tag, callback) { console.log('create', repository, tag); @@ -182,6 +186,8 @@ var ContainerStore = assign(EventEmitter.prototype, { } console.log('Placeholder container created.'); docker.client().pull(imageName, function (err, stream) { + console.log(containerName); + callback(null, containerName); stream.setEncoding('utf8'); stream.on('data', function (data) { console.log(data); @@ -197,6 +203,7 @@ var ContainerStore = assign(EventEmitter.prototype, { } else { // If not then directly create the container self._createContainer(imageName, containerName, function () { + callback(null, containerName); console.log('done'); }); } @@ -205,19 +212,15 @@ var ContainerStore = assign(EventEmitter.prototype, { // Pull image // When image is done pulling then }, - - // Returns all shoes - containers: function() { - return this._containers; + logs: function (containerName) { + return logs[containerId]; }, - addChangeListener: function(callback) { this.on('change', callback); }, - removeChangeListener: function(callback) { this.removeListener('change', callback); - } + }, }); module.exports = ContainerStore; diff --git a/app/Containers.react.js b/app/Containers.react.js index c9a562e43e..b5df11c4c0 100644 --- a/app/Containers.react.js +++ b/app/Containers.react.js @@ -1,20 +1,18 @@ -var React = require('react'); +var React = require('react/addons'); var Router = require('react-router'); var Modal = require('react-bootstrap/Modal'); var RetinaImage = require('react-retina-image'); var ModalTrigger = require('react-bootstrap/ModalTrigger'); -var ContainerModal = require('./ContainerModal.react.js'); -var ContainerStore = require('./ContainerStore.js'); -var Route = Router.Route; -var NotFoundRoute = Router.NotFoundRoute; -var DefaultRoute = Router.DefaultRoute; +var ContainerModal = require('./ContainerModal.react'); +var ContainerStore = require('./ContainerStore'); +var Header = require('./Header.react'); +var async = require('async'); +var _ = require('underscore'); +var docker = require('./docker'); + var Link = Router.Link; var RouteHandler = Router.RouteHandler; var Navigation= Router.Navigation; -var Header = require('./Header.react.js'); -var async = require('async'); -var _ = require('underscore'); -var docker = require('./docker.js'); var ContainerList = React.createClass({ mixins: [Navigation], @@ -22,15 +20,12 @@ var ContainerList = React.createClass({ return { containers: [] }; - }, - handleClick: function () { - }, componentDidMount: function () { this.update(); ContainerStore.addChangeListener(this.update); - if (this.state.containers.length > 0) { - this.transitionTo('container', {Id: this.state.containers[0].Id}); + if (this.state.active) { + this.transitionTo('container', {name: this.state.active}); } }, componentWillMount: function () { @@ -43,8 +38,16 @@ var ContainerList = React.createClass({ var containers = _.values(ContainerStore.containers()).sort(function (a, b) { return a.Name.localeCompare(b.Name); }); + var state = {}; + if (!this.state.active && containers.length > 0) { + state.active = containers[0].Name.replace('/', ''); + } + state.containers = containers; + this.setState(state); + }, + handleClick: function (containerId) { this.setState({ - containers: containers + active: containerId }); }, render: function () { @@ -85,8 +88,9 @@ var ContainerList = React.createClass({ } else { state =
; } + return ( - +