chore: watch api

src/components/logs-viewer/index.less

@@ -0,0 +1,22 @@
+.logs-viewer-wrap-w2 {
+  .wrap {
+    padding: 5px 0 5px 10px;
+    overflow: auto;
+    background-color: var(--color-logs-bg);
+    border-radius: var(--border-radius-small);
+
+    .content {
+      word-wrap: break-word;
+
+      &.line-break {
+        word-wrap: break-word;
+      }
+
+      color: var(--color-logs-text);
+      font-size: var(--font-size-small);
+      line-height: 22px;
+      white-space: pre-wrap;
+      background-color: var(--color-logs-bg);
+    }
+  }
+}

src/components/logs-viewer/index.tsx

@@ -0,0 +1,63 @@
+import useSetChunkRequest from '@/hooks/use-chunk-request';
+import Convert from 'ansi-to-html';
+import classNames from 'classnames';
+import hasAnsi from 'has-ansi';
+import { useEffect, useRef, useState } from 'react';
+import './index.less';
+
+interface LogsViewerProps {
+  height: number;
+  content: string;
+  url: string;
+  params?: object;
+}
+const LogsViewer: React.FC<LogsViewerProps> = (props) => {
+  const { height, content, url } = props;
+  const [nowrap, setNowrap] = useState(false);
+  const [logsContent, setLogsContent] = useState(content);
+  const { setChunkRequest } = useSetChunkRequest();
+  const chunkRequedtRef = useRef<any>(null);
+
+  const convert = new Convert();
+
+  const updateContent = (newVal: string) => {
+    if (hasAnsi(newVal)) {
+      const htmlStr = `${convert.toHtml(newVal)}`;
+      setLogsContent(htmlStr);
+    } else {
+      setLogsContent(newVal);
+    }
+  };
+
+  const createChunkConnection = async () => {
+    chunkRequedtRef.current?.current?.cancel?.();
+    chunkRequedtRef.current = setChunkRequest({
+      url,
+      params: {
+        ...props.params,
+        watch: true
+      },
+      contentType: 'text',
+      handler: updateContent
+    });
+  };
+
+  useEffect(() => {
+    createChunkConnection();
+    return () => {
+      chunkRequedtRef.current?.current?.cancel?.();
+    };
+  }, [url, props.params]);
+
+  return (
+    <div className="logs-viewer-wrap-w2">
+      <div className="wrap" style={{ height: height }}>
+        <div className={classNames('content', { 'line-break': nowrap })}>
+          <div className="text">{logsContent}</div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LogsViewer;