rancher 容器日志组件分析

╰半夏微凉° 2022-12-08 05:20 174阅读 0赞

[\\app\\components\\container-logs\\template.hbs][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))
      },
    
    });

[app_components_container-logs_template.hbs]: https://github.com/rancher/ui/blob/master/app/components/container-logs/template.hbs