rancher 容器日志组件分析

\app\components\container-logs\template.hbs

使用的websock

template.hbs

  

   

    

     

    
    

     

      <h2>
     
    
   

    

     

    
    

     
  <i class="icon icon-file"></i> {{t 'containerLogs.title'}}
     
    
   

    

     

    
    

     

        {{#if displayName}}
     
    
   

    

     

    
    

     

          {{displayName}}
     
    
   

    

     

    
    

     

        {{else if (gt instance.containers.length 1)}}
     
    
   

    

     

    
    

     
    <div class="container-select">
     
    
   

    

     

    
    

     

            {{new-select
     
    
   

    

     

    
    

     

              classNames="form-control"
     
    
   

    

     

    
    

     

              optionValuePath="name"
     
    
   

    

     

    
    

     

              optionLabelPath="name"
     
    
   

    

     

    
    

     

              content=instance.containers
     
    
   

    

     

    
    

     

              value=containerName
     
    
   

    

     

    
    

     

            }}
     
    
   

    

     

    
    

     
    </div>
     
    
   

    

     

    
    

     

        {{else}}
     
    
   

    

     

    
    

     

           {{containerName}}
     
    
   

    

     

    
    

     

        {{/if}}
     
    
   

    

     

    
    

     
  <div class="console-status text-muted pull-right">{{t (concat 'containerLogs.status.' status)}}</div>
     
    
   

    

     

    
    

     

      </h2>
     
    
   

    

     

    
    

     

      {{#if showProtip}}
     
    
   

    

     

    
    

     
  <div class="protip">
     
    
   

    

     

    
    

     

            {{t 'containerLogs.protip' key=alternateLabel}}
     
    
   

    

     

    
    

     
  </div>
     
    
   

    

     

    
    

     

      {{/if}}
     
    
   

    

     

    
    

     

      <pre class="log-body {{if wrapLines 'wrap-lines'}}">
     
    
   

    

     

    
    

     

      </pre>
     
    
   

    

     

    
    

     

      {{yield}}
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      <div class="footer-actions">
     
    
   

    

     

    
    

     
  <div class="checkbox pt-10 text-left" style="position: absolute; top: -2px">
     
    
   

    

     

    
    

     
    <label class="block">
     
    
   

    

     

    
    

     

            {{input type="checkbox" checked=wrapLines}}
     
    
   

    

     

    
    

     

            {{t 'containerLogs.wrapLines'}}
     
    
   

    

     

    
    

     
    </label>
     
    
   

    

     

    
    

     
    <label class="block">
     
    
   

    

     

    
    

     

            {{input type="checkbox" checked=isPrevious}}
     
    
   

    

     

    
    

     

            {{t 'containerLogs.previous'}}
     
    
   

    

     

    
    

     
    </label>
     
    
   

    

     

    
    

     
  </div>
     
    
   

    

     

    
    

     
  <button {{action "scrollToTop"}} class="btn bg-default">{{t 'containerLogs.scrollTop'}}</button>
     
    
   

    

     

    
    

     
  <button {{action "followLog"}} class="btn bg-default scroll-bottom">{{t 'containerLogs.scrollBottom'}}</button>
     
    
   

    

     

    
    

     
  <button {{action "download"}} class="btn bg-default">{{t 'containerLogs.download'}}</button>
     
    
   

    

     

    
    

     
  <button {{action "clear"}} class="btn bg-default">{{t 'containerLogs.clear'}}</button>
     
    
   

    

     

    
    

     
  <button {{action "cancel"}} class="btn bg-primary">{{t 'generic.closeModal'}}</button>
     
    
   

    

     

    
    

     

      </div>
     
    
  
 

  
 
 

component.js

  

   

    

     

    
    

     

      import { next } from '@ember/runloop';
     
    
   

    

     

    
    

     

      import { set, setProperties, get, observer } 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 C from 'ui/utils/constants';
     
    
   

    

     

    
    

     

      import { downloadFile } from 'shared/utils/download-files';
     
    
   

    

     

    
    

     

      import $ from 'jquery';
     
    
   

    

     

    
    

     

      import { on } from '@ember/object/evented';
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      const LINES = 500;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      var AnsiUp = null;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      export default Component.extend({
     
    
   

    

     

    
    

     
  scope: service(),
     
    
   

    

     

    
    

     
  prefs: service(),
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

        layout,
     
    
   

    

     

    
    

     
  instance:       null,
     
    
   

    

     

    
    

     

        alternateLabel,
     
    
   

    

     

    
    

     
  showProtip:     true,
     
    
   

    

     

    
    

     
  classNames:    'container-log',
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
  status:         'connecting',
     
    
   

    

     

    
    

     
  containerName:  null,
     
    
   

    

     

    
    

     
  socket:         null,
     
    
   

    

     

    
    

     
  wrapLines:      null,
     
    
   

    

     

    
    

     
  isFollow:       true,
     
    
   

    

     

    
    

     
  followTimer:    null,
     
    
   

    

     

    
    

     
  isPrevious:     false,
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
  init() {
     
    
   

    

     

    
    

     
    this._super(...arguments);
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    if (AnsiUp) {
     
    
   

    

     

    
    

     
      this._bootstrap();
     
    
   

    

     

    
    

     

          } else {
     
    
   

    

     

    
    

     
      import('ansi_up').then( (module) => {
     
    
   

    

     

    
    

     
        AnsiUp = module.default;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
        this._bootstrap();
     
    
   

    

     

    
    

     

            });
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
  didInsertElement() {
     
    
   

    

     

    
    

     
    this._super();
     
    
   

    

     

    
    

     
    next(this, () => {
     
    
   

    

     

    
    

     
      const body = $('.log-body');
     
    
   

    

     

    
    

     
      let lastScrollTop = 0;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

            body.scroll(() => {
     
    
   

    

     

    
    

     
        const scrollTop = body[0].scrollTop;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
        if ( lastScrollTop >  scrollTop ) {
     
    
   

    

     

    
    

     
          set(this, 'isFollow', false);
     
    
   

    

     

    
    

     

              }
     
    
   

    

     

    
    

     

              lastScrollTop = scrollTop;
     
    
   

    

     

    
    

     

            });
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
      var btn = $('.scroll-bottom')[0]; // eslint-disable-line
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
      if ( btn ) {
     
    
   

    

     

    
    

     

              btn.focus();
     
    
   

    

     

    
    

     

            }
     
    
   

    

     

    
    

     

          });
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
  willDestroyElement() {
     
    
   

    

     

    
    

     
    clearInterval(get(this, 'followTimer'));
     
    
   

    

     

    
    

     
    this.disconnect();
     
    
   

    

     

    
    

     
    this._super();
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
  actions: {
     
    
   

    

     

    
    

     
    download() {
     
    
   

    

     

    
    

     
      const ignore = function(el, sel){
     
    
   

    

     

    
    

     
        return el.clone().find( sel || '>*' ).remove().end();
     
    
   

    

     

    
    

     

            };
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
      const log    = $('.log-body').children('.log-msg');
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
      let stripped = '';
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

            log.each((i, e) => {
     
    
   

    

     

    
    

     

              stripped += `${ ignore($(e), 'span').text() } \n`;
     
    
   

    

     

    
    

     

            });
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
      downloadFile('container.log', stripped);
     
    
   

    

     

    
    

     

          },
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    cancel() {
     
    
   

    

     

    
    

     
      this.disconnect();
     
    
   

    

     

    
    

     
      if (this.dismiss) {
     
    
   

    

     

    
    

     
        this.dismiss();
     
    
   

    

     

    
    

     

            }
     
    
   

    

     

    
    

     

          },
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    clear() {
     
    
   

    

     

    
    

     
      var body = $('.log-body')[0];
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
      if (body) {
     
    
   

    

     

    
    

     

              body.innerHTML = '';
     
    
   

    

     

    
    

     

              body.scrollTop = 0;
     
    
   

    

     

    
    

     

            }
     
    
   

    

     

    
    

     

          },
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    scrollToTop() {
     
    
   

    

     

    
    

     

            $('.log-body').animate({ scrollTop: '0px' });
     
    
   

    

     

    
    

     

          },
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    followLog() {
     
    
   

    

     

    
    

     
      set(this, 'isFollow', true);
     
    
   

    

     

    
    

     
      this.send('scrollToBottom');
     
    
   

    

     

    
    

     

          },
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    scrollToBottom() {
     
    
   

    

     

    
    

     
      var body = $('.log-body');
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

            body.stop().animate({ scrollTop: `${ body[0].scrollHeight + 1000 }px` });
     
    
   

    

     

    
    

     

          },
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
  wrapLinesDidChange: observer('wrapLines', function() {
     
    
   

    

     

    
    

     
    set(this, `prefs.${ C.PREFS.WRAP_LINES }`, get(this, 'wrapLines'));
     
    
   

    

     

    
    

     

        }),
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
  watchReconnect: on('init', observer('containerName', 'isPrevious', function() {
     
    
   

    

     

    
    

     
    this.disconnect();
     
    
   

    

     

    
    

     
    this.send('clear');
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    if (this.containerName) {
     
    
   

    

     

    
    

     
      this.exec();
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     

        })),
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
  _bootstrap() {
     
    
   

    

     

    
    

     
    setProperties(this, {
     
    
   

    

     

    
    

     
      wrapLines:     !!get(this, `prefs.${ C.PREFS.WRAP_LINES }`),
     
    
   

    

     

    
    

     
      containerName: get(this, 'containerName') || get(this, 'instance.containers.firstObject.name'),
     
    
   

    

     

    
    

     

          });
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    this._initTimer();
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
  _initTimer() {
     
    
   

    

     

    
    

     
    const followTimer = setInterval(() => {
     
    
   

    

     

    
    

     
      if ( get(this, 'isFollow') ) {
     
    
   

    

     

    
    

     
        this.send('scrollToBottom');
     
    
   

    

     

    
    

     

            }
     
    
   

    

     

    
    

     

          }, 1000);
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    set(this, 'followTimer', followTimer);
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
  exec() {
     
    
   

    

     

    
    

     
    var instance = get(this, 'instance');
     
    
   

    

     

    
    

     
    const clusterId = get(this, 'scope.currentCluster.id');
     
    
   

    

     

    
    

     
    const namespaceId = get(instance, 'namespaceId');
     
    
   

    

     

    
    

     
    const podName = get(instance, 'name');
     
    
   

    

     

    
    

     
    const containerName = get(this, 'containerName');
     
    
   

    

     

    
    

     
    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&previous=${ get(this, 'isPrevious') }`;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    this.connect(url);
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
  connect(url) {
     
    
   

    

     

    
    

     
    var socket = new WebSocket(url, 'base64.binary.k8s.io');
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    set(this, 'socket', socket);
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    var body = null;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    set(this, 'status', 'initializing');
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

          socket.onopen = () => {
     
    
   

    

     

    
    

     
      set(this, 'status', 'connected');
     
    
   

    

     

    
    

     

          };
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

          socket.onmessage = (message) => {
     
    
   

    

     

    
    

     

            body = $('.log-body')[0];
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
      let ansiup = new AnsiUp;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
      set(this, 'status', 'connected');
     
    
   

    

     

    
    

     
      const data = AWS.util.base64.decode(message.data).toString();
     
    
   

    

     

    
    

     
      let html = '';
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

            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
     
    
   

    

     

    
    

     

                html += `<div class="log-msg log-combined">${
     
    
   

    

     

    
    

     

       dateStr
     
    
   

    

     

    
    

     

       }${ ansiup.ansi_to_html(msg)
     
    
   

    

     

    
    

     

       }</div>`
     
    
   

    

     

    
    

     

              });
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

            body.insertAdjacentHTML('beforeend', html);
     
    
   

    

     

    
    

     

          };
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

          socket.onclose = () => {
     
    
   

    

     

    
    

     
      if (this.isDestroyed || this.isDestroying) {
     
    
   

    

     

    
    

     
        return;
     
    
   

    

     

    
    

     

            }
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
      set(this, 'status', 'disconnected');
     
    
   

    

     

    
    

     

          };
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
  disconnect() {
     
    
   

    

     

    
    

     
    set(this, 'status', 'closed');
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    var socket = get(this, 'socket');
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
    if (socket) {
     
    
   

    

     

    
    

     

            socket.close();
     
    
   

    

     

    
    

     
      set(this, 'socket', null);
     
    
   

    

     

    
    

     

          }
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
  isDate(date) {
     
    
   

    

     

    
    

     
    return new Date(date) !== 'Invalid Date' && !isNaN(new Date(date))
     
    
   

    

     

    
    

     

        },
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      });
     
    
  
 

  
 
 

文章来源: fizzz.blog.csdn.net，作者：拿我格子衫来，版权归原作者所有，如需转载，请联系作者。

原文链接：fizzz.blog.csdn.net/article/details/108662784