feat: Log 的数据源支持更新 (#2835)

docs/zh-CN/components/log.md

@@ -82,6 +82,41 @@ public class StreamingResponseBodyController {
 
 通过 `autoScroll` 可以关闭此功能
 
+## source 支持变量
+
+> 1.4.2 及以上版本
+
+可以初始设置为空，这样初始不会加载，而等这个变量有值的时候再加载
+
+```json
+{
+  "type": "form",
+  "body": [
+    {
+      "label": "数据源",
+      "type": "select",
+      "name": "source",
+      "options": [
+        {
+          "label": "A",
+          "value": "http://localhost:3000/"
+        },
+        {
+          "label": "B",
+          "value": "http://localhost:4000/"
+        }
+      ]
+    },
+    {
+      "type": "log",
+      "height": 300,
+      "placeholder": "请点击上面的数据源",
+      "source": "${source | raw}"
+    }
+  ]
+}
+```
+
 ## 属性表
 
 | 属性名      | 类型      | 默认值 | 说明               |

src/renderers/Log.tsx

@@ -6,7 +6,7 @@ import {Renderer, RendererProps} from '../factory';
 import {BaseSchema, SchemaTpl} from '../Schema';
 import Ansi from 'ansi-to-react';
 import {filter} from '../utils/tpl';
-import {buildApi} from '../utils/api';
+import {buildApi, isApiOutdated} from '../utils/api';
 
 /**
  * 日志展示组件
@@ -14,7 +14,7 @@ import {buildApi} from '../utils/api';
  */
 export interface LogSchema extends BaseSchema {
   /**
-   * 指定为 link 链接展示控件
+   * 指定为 log 链接展示控件
    */
   type: 'log';
 
@@ -100,10 +100,20 @@ export class Log extends React.Component<LogProps, LogState> {
     }
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps: LogProps) {
     if (this.autoScroll && this.logRef && this.logRef.current) {
       this.logRef.current.scrollTop = this.logRef.current.scrollHeight;
     }
+    if (
+      isApiOutdated(
+        prevProps.source,
+        this.props.source,
+        prevProps.data,
+        this.props.data
+      )
+    ) {
+      this.loadLogs();
+    }
   }
 
   // 如果向上滚动就停止自动滚动，除非滚到底部
@@ -118,6 +128,9 @@ export class Log extends React.Component<LogProps, LogState> {
     const {source, data, env, translate: __, encoding} = this.props;
     // 因为这里返回结果是流式的，和普通 api 请求不一样，如果直接用 fetcher 经过 responseAdaptor 可能会导致出错，所以就直接 fetch 了
     const api = buildApi(source, data);
+    if (!api.url) {
+      return;
+    }
     const res = await fetch(api.url);
     if (res.status === 200) {
       const body = res.body;