import $ from 'jquery';
import React from 'react/addons';
import Router from 'react-router';
import containerActions from '../actions/ContainerActions';
import Convert from 'ansi-to-html';

let escape = function (html) {
  var text = document.createTextNode(html);
  var div = document.createElement('div');
  div.appendChild(text);
  return div.innerHTML;
};

let convert = new Convert();
let prevBottom = 0;

module.exports = React.createClass({

  componentDidUpdate: function () {
    var node = $('.logs').get()[0];
    node.scrollTop = node.scrollHeight;
  },

  componentWillReceiveProps: function (nextProps) {
    if (this.props.container && nextProps.container && this.props.container.Name !== nextProps.container.Name) {
      containerActions.active(nextProps.container.Name);
    }
  },

  componentDidMount: function () {
    containerActions.active(this.props.container.Name);
  },

  componentWillUnmount: function () {
    containerActions.active(null);
  },

  render: function () {
    let logs = this.props.container.Logs ?
        this.props.container.Logs.map((l) => <div key={l.substr(0,l.indexOf(' '))} dangerouslySetInnerHTML={{__html: convert.toHtml(escape(l.substr(l.indexOf(' ')+1)).replace(/ /g, '&nbsp;<wbr>'))}}></div>) :
        ['0 No logs for this container.'];
    return (
      <div className="mini-logs wrapper">
        <div className="widget">
          <div className="top-bar">
            <div className="text">Container Logs</div>
          </div>
          <div className="logs">
            {logs}
          </div>
        </div>
      </div>
    );
  }
});

@@ -1036,24 +1036,16 @@
 r.Logs ?
-%0A       
  this.pr
@@ -1073,49 +1073,111 @@
 p((l
-) =%3E %3Cdiv key=%7Bl.substr(0,l.indexOf(' '))
+, index) =%3E %7B%0A        const key = %60$%7Bthis.props.container.Name%7D-$%7Bindex%7D%60;%0A        return %3Cdiv key=%7Bkey
 %7D da
@@ -1300,19 +1300,20 @@
 div%3E
-) :
+;
 %0A      
- 
+%7D) :
  %5B'0
@@ -1344,16 +1344,17 @@
 ner.'%5D;%0A
+%0A
     retu

Fix duplicate react key issue