功能

• 【日志搜索】支持日志搜索，并在输入框实时显示搜索结果；
• 【日志搜索】支持回车/快捷按钮滚动定位到某一行日志；
• 【日志搜索】支持变更搜索命中高亮样式；
• 【日志交互】支持日志置顶，置底；
• 【日志交互】支持运行中日志自动滚动到底部；
• 【日志交互】支持选中高亮行，并支持变更高亮样式；
• 【日志渲染】支持全屏显示；
• 【日志渲染】支持多种日志组件渲染模式，如自定义关键词高亮渲染，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"/>

修复已知问题

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

TODO

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

API

| 属性名 | 描述 | 类型 | 默认值 | | --- | --- | --- | --- | | fit | 是否自动拉伸填充容器宽高 | boolean | true | | autoScroll | 是否开启自动滚动到底部 | boolean | true | | scrollToRow | 自动滚动到某一行，开启后自动滚动到底部失效 | number | -- | | logAfter 设置日志后置标签，仅在开启虚拟 DOM 生效 | FunctionComponent 或 ComponentClass<LogAfterProps, any> | -- | | refreshable | 是否支持刷新 | boolean | true | | searchPlaceholder | 搜索框 placeholder | string | -- | | header | 自定义日志头部, null 为不显示默认头部 | ReactNode | -- | | inputAddonBefore | 搜索框前的内容 | ReactNode | -- | | inputAddonAfter | 搜索框后的内容 | ReactNode | -- | | empty | 自定义空文本显示 | ReactNode | -- | | icons | 自定义图标 | { search?: ReactNode; up?: ReactNode; down?: ReactNode; clear?: ReactNode; top?: ReactNode; bottom?: ReactNode; fullScreen?: ReactNode; fullScreenExit?: ReactNode; refresh?: ReactNode; loading?: ReactNode; } | -- | | toolbar | 自定义工具栏 | ReactNode | -- | | showFullScreen | 是否显示全屏图标 | boolean | true | | className | 外层样式类名 | string | -- | | style | 可用于设置外层容器样式 | object | -- | | defaultFullScreen | 默认全屏显示 | boolean | false | | defaultData | 用于渲染日志的默认数据，如 "echo 1\r\necho2" | string | '' | | defaultTabIndex | 默认打开的标签 | number | 0 | | activeTabIndex | 激活的标签, 如果同时设置了 defaultTabIndex 则以此属性为准 | number | 0 | | tabs | 多标签配置选项 | { key: string|number; title?: ReactNode; defaultData?: string; remoteOptions?: IRemoteOptions; cacheOptions?: ICacheOptions; }[] | -- | | webLinksSupport | 是否支持渲染超链接 | boolean | true | | canvasSupport | 是否使用 canvas 渲染, 开启 canvas 会有更好的性能但可能会遇到更多的问题 | boolean | false | | virtualDomSupport | 是否使用自研虚拟 DOM 内核，开启后 terminalOptions, canvasSupport, webLinksSupport 不可用 | boolean | false | | workerPath | 日志 web worker 路径, 需配合 CopyPlugin 使用且仅在开启 virtualDomSupport 为 true 时有效 | string | /worker | | remoteOptions | 远程加载配置 | IRemoteOptions | -- | | cacheOptions | 缓存全局配置，仅在配置远程加载后有效，如 expires: 60 * 1000 表示自动清理已过期一分钟的缓存 | ICacheOptions | -- | | searchOptions | xterm 搜索选项 | ISearchOptions | -- | | highlightOptions | 高亮选项 | IHighlightOptions[] | -- | | terminalOptions | xtem.js 配置, https://github.com/xtermjs/xterm.js | ITerminalOptions | -- | | extraOptions | 额外的功能选项 { showLineNumber 仅 虚拟 DOM 模式支持} | ExtraOptions | -- | | getContainer | 指定 TerminalViewer 挂载的节点，并在容器内展现，开启全屏后无效， false 为挂载在当前位置 | string | HTMLElement | (() => HTMLElement) | 当前节点 | | onLoading | 加载状态变更回调函数 | (bool: boolean) => void | -- | | onTitleChange | 点击 tab 标题后回调函数 | (index: number) => void | -- | | onRefresh | 刷新后的回调函数 | ()=>void | -- |