react-terminal-viewer-cicd v2.0.4

功能

• 【日志搜索】支持日志搜索，并在输入框实时显示搜索结果；
• 【日志搜索】支持回车/快捷按钮滚动定位到某一行日志；
• 【日志搜索】支持变更搜索命中高亮样式；
• 【日志交互】支持日志置顶，置底；
• 【日志交互】支持运行中日志自动滚动到底部；
• 【日志交互】支持选中高亮行，并支持变更高亮样式；
• 【日志渲染】支持全屏显示；
• 【日志渲染】支持多种日志组件渲染模式，如自定义关键词高亮渲染，ANSI_escape_code 渲染；
• 【日志渲染】支持 http 轮询获取日志,支持接口调用重试；
• 【日志渲染】支持 10W 行以内日志渲染不卡顿；
• 【日志组件】支持头部组件，实现日志分类的功能；
• 【日志组件】支持变更组件，如替换置顶，置底图标组件，加载日志组件等；
• 【日志组件】支持选项可配置式，如请求间隔，高亮模式等；
• 【日志缓存】使用 localforage 缓存已下载的日志，以解决无法查看全量日志的问题；
• 【日志缓存】支持缓存过期策略的特性，以解决本地缓存可能溢出的问题；
• 【日志缓存】支持清除缓存，从头开始加载远程日志；
• 【日志缓存】支持重建缓存时分批写入解决一次行写入过多日志导致崩溃的问题；
• 【大数据日志】 支持基于 Web Worker 与虚拟 DOM 模式以支持更大的日志数据渲染

安装

使用 npm 或 yarn 把这个 package 安装到你的项目依赖中:

npm install react-terminal-viewer

或

yarn add react-terminal-viewer

使用

import React, { useRef } from 'react';
import TerminalViewer from 'react-terminal-viewer';
export default () => {
  const ref = useRef();
  const data = 'echo success';
  return (
    <div style={{ width: '100%', height: '300px' }}>
      <TerminalViewer ref={ref} defaultData={data} />
    </div>
  );
};

开发

$ yarn

启动开发服务

$ yarn start

构建文档

$ yarn docs:build

执行测试

$ yarn test

构建可发布的包

$ yarn build

开启基于 Web Worker 与 虚拟 DOM 的日志组件配置

webpack 配置：

  new CopyPlugin({
      patterns: [
        {
          from: path.resolve(__dirname, 'node_modules/react-terminal-viewer/dist/worker'),
          to: path.resolve(__dirname, 'dist/scripts/worker'),
          filter: (file) => file.includes('worker'),
        },
      ],
    }),

组件使用：

  <TerminalViewer virtualDomSupport workerPath="/scripts/worker"/>

发布

打标签后使用流水线发布或使用常规方式手动发布：

npm version patch && npm publish

更新在线地址

合并代码后与打标签后使用流水线发布，使用常规方式合并代码与构建后，手动推送至deploy

修复已知问题

• 使用 DOM 模式渲染修复搜索命中关键字时无法修改字体前景的问题
• 使用 1000+ 的提示修复 搜索结果超过 1000+ 时搜索卡顿的问题

TODO

• 【日志交互】支持 hover 复制行锚点(由于无法直接获取可视区域行在全文中的唯一位置，导致锚点难以取到）
• 【日志交互】支持锚点定位行日志(由于无法直接获取可视区域行在全文中的唯一位置，导致锚点难以取到）
• 【日志交互】支持 hover 复制行日志
• 【日志渲染】支持高亮超链接;
• 【Shell 连接】通过 websocket 连接到运行进程的服务器

API