diff --git a/server.js b/server.js

index f092e85..549f3c7 100644

--- a/server.js

+++ b/server.js

@@ -11,12 +11,36 @@ let api = new Hyper()

app.use(express.static('build'))

+let activeRequest = null

io.on('connection', function (socket) {

- socket.emit('news', { hello: 'world' });

- socket.on('my other event', function (data) {

- console.log(data);

- });

-});

+ socket.on('startlogs', function (data) {

+ startLogs(socket, data.container)

+ })

+ socket.on('stoplogs', () => {

+ activeRequest.abort()

+ })

+ socket.on('disconnect', () => {

+ if(activeRequest) {

+ activeRequest.abort()

+ }

+ })

+})

+

+function startLogs(socket, containerId) {

+ let fetchOptions = api.sign('POST', `/containers/${containerId}/attach?logs=1&stream=0&stdout=1`)

+ var request = require('request')

+ let through2 = require('through2')

+ activeRequest = request.post({

+ url: fetchOptions.fullUrl,

+ headers: fetchOptions.headers

+ })

+ activeRequest.pipe(through2((chunk, enc, callback) => {

+ let logLine = chunk.slice(8, chunk.length).toString()

+ console.log('log emitted', logLine)

+ socket.emit('logs', logLine)

+ callback(null, chunk.slice(8, chunk.length))

+ }))

+}

app.use((req, res, next) => {

res.header('Access-Control-Allow-Origin', '*');

diff --git a/src/components/Sidebar/index.js b/src/components/Sidebar/index.js

index 620f0a9..aaf461b 100644

--- a/src/components/Sidebar/index.js

+++ b/src/components/Sidebar/index.js

@@ -1,10 +1,35 @@

import React, { Component } from 'react'

+let io = window.io

export default class Sidebar extends Component {

+ constructor() {

+ super()

+ this.state = {

+ logs: []

+ }

+ }

+ componentDidMount() {

+ this.socket = io.connect('http://localhost:9000');

+ this.socket.emit('startlogs', { container: this.props.activeContainer })

+ this.socket.on('logs', (data) => {

+ let oldLogs = this.state.logs.slice()

+ oldLogs.push(data)

+ this.setState({

+ logs: oldLogs

+ })

+ })

+ }

+ componentWillUnmount() {

+ this.socket.emit('stoplogs')

+ this.socket.close()

+ }

render() {

return (

<div className='App_Sidebar'>

<h1>Logs for {this.props.activeContainer}</h1>

+ <pre>

+ {this.state.logs.map((l, key) => <div key={key}>{l}</div>)}

+ </pre>

</div>

)

}