text: import { next } from '@ember/runloop';
  import { get } from '@ember/object';
  import { inject as service } from '@ember/service';
  import Component from '@ember/component';
  import Util from 'ui/utils/util';
  import { alternateLabel } from 'ui/utils/platform';
  import layout from './template';
  import AnsiUp from 'npm:ansi_up';
  
  const LINES = 500;
  
  export default Component.extend({
    scope: service(),
  
    layout,
    instance: null,
    alternateLabel: alternateLabel,
    showProtip: true,
  
    status: 'connecting',
    socket: null,
  
    actions: {
      cancel: function () {
        this.disconnect();
        this.sendAction('dismiss');
      },
  
      clear: function () {
        var body = this.$('.log-body')[0];
        body.innerHTML = '';
        body.scrollTop = 0;
      },
  
      scrollToTop: function () {
        this.$('.log-body').animate({ scrollTop: '0px' });
      },
  
      scrollToBottom: function () {
        var body = this.$('.log-body');
        body.stop().animate({ scrollTop: (body[0].scrollHeight + 1000) + 'px' });
      },
    },
  
    didInsertElement: function () {
      this._super();
      next(this, 'exec');
    },
  
    exec: function () {
      var instance = this.get('instance');
      const clusterId = get(this, 'scope.currentCluster.id');
      const namespaceId = get(instance, 'namespaceId');
      const podName = get(instance, 'name');
      const containerName = get(instance, 'containers.firstObject.name');
      const scheme = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
      let url = `${scheme}${window.location.host}/k8s/clusters/${clusterId}/api/v1/namespaces/${namespaceId}/pods/${podName}/log`;
      url += `?container=${encodeURIComponent(containerName)}&tailLines=${LINES}&follow=true&timestamps=true`;
  
      this.connect(url);
    },
  
    connect: function (url) {
      var socket = new WebSocket(url, 'base64.binary.k8s.io');
      this.set('socket', socket);
  
      var body = this.$('.log-body')[0];
      var $body = $(body);
  
      this.set('status', 'initializing');
  
      socket.onopen = () => {
        this.set('status', 'connected');
      };
  
      socket.onmessage = (message) => {
        let ansiup = new AnsiUp.default;
        this.set('status', 'connected');
        var isFollow = ($body.scrollTop() + $body.outerHeight() + 10) >= body.scrollHeight;
        const data = decodeURIComponent(window.escape(AWS.util.base64.decode(message.data)));
  
        data.trim().split(/\n/).filter(line => line).forEach((line) => {
          var match = line.match(/^\[?([^ \]]+)\]?\s?/);
          var dateStr = '';
          var msg = '';
          if (match && this.isDate(new Date(match[1]))) {
            var date = new Date(match[1]);
            msg = line.substr(match[0].length);
            dateStr = '<span class="log-date">' + Util.escapeHtml(date.toLocaleDateString()) + ' ' + Util.escapeHtml(date.toLocaleTimeString()) + ' </span>';
          }
          else {
            msg = line;
          }
  
          // @@TODO@@ - 10-13-17 - needed to remove the escaping here because it was being double escaped but double verify that its acutally being escaped
          body.insertAdjacentHTML('beforeend',
            '<div class="log-msg log-combined">' +
            dateStr +
            ansiup.ansi_to_html(msg) +
            '</div>'
          );
        });
  
        if (isFollow) {
          next(() => {
            this.send('scrollToBottom');
          });
        }
      };
  
      socket.onclose = () => {
        if (this.isDestroyed || this.isDestroying) {
          return;
        }
  
        this.set('status', 'disconnected');
      };
    },
  
    disconnect: function () {
      this.set('status', 'closed');
  
      var socket = this.get('socket');
      if (socket) {
        socket.close();
        this.set('socket', null);
      }
    },
  
    willDestroyElement: function () {
      this.disconnect();
      this._super();
    },
  
    isDate(date) {
      return new Date(date) !== "Invalid Date" && !isNaN(new Date(date))
    }
  });
  