react-terminal-viewer

基于 xterm.js 内核的 React 日志组件

功能

• 【日志搜索】支持日志搜索，并在输入框实时显示搜索结果；
• 【日志搜索】支持回车/快捷按钮滚动定位到某一行日志；
• 【日志搜索】支持变更搜索命中高亮样式；
• 【日志交互】支持日志置顶，置底；
• 【日志交互】支持运行中日志自动滚动到底部；
• 【日志交互】支持选中高亮行，并支持变更高亮样式；
• 【日志渲染】支持全屏显示；
• 【日志渲染】支持多种日志组件渲染模式，如自定义关键词高亮渲染，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
onLoading	加载状态变更回调函数	(bool: boolean) => void	--
onTitleChange	点击 tab 标题后回调函数	(index: number) => void	--
onRefresh	刷新后的回调函数	()=>void	--