Hugging Face's logo

AbdulElahGwaith
/
x-render

Model card Files
xet
 Community
x-render
File size: 3,365 Bytes
c9d0005
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
---
order: 7
title: '节点日志和节点状态'
mobile: false
group: 
  title: 高级用法
  order: 2
---
# 节点日志和节点状态


## 节点状态
 可配置不同状态下节点的边框颜色。通过`data._status`属性配置，比如：
 ```js
   const nodes=[
     {
      id: 'w4be9edh4bhdlokm',
      type: 'Start',
      position: {
        x: -379.21875,
        y: 348.75,
      },
      data: {
        _status: "success" // 状态配置，可自定义，可使用内置状态
      },
    },
   ]
 ```
 - **内置状态**: 内置`success|error|warning`三种状态,对应颜色如下:
  ```js
  [
    { value: 'success', color: '#52c41a',name: '成功'},
    { value: 'error',color: '#ff4d4f',name: '失败'},
    {value: 'warning',color: '#faad14',name: '告警'}
  ]
  ```
 - **自定义状态**:可通过`globalConfig.nodeView.status`自定义节点状态，同名可覆盖内置状态颜色。
    ```js
      globalConfig={{
          nodeView: {
            status: [
              {
                value: 'custom-error',  // 状态标识
                color: 'red',   // 颜色值
                name: '自定义失败状态',  // 状态名称
              },
              {
                value: 'success',
                color: 'green',
                name: '自定义成功状态（覆盖内置成功状态）',
              },
            ],
          }
        }}
   ```

<code src="./demo/log/index.tsx"></code>


## 节点日志面板

点击有状态的节点，会出现两个面板，左边为节点配置面板，右边为节点日志面板。如果不想使用日志面板，可以设置`logPanel.enable`属性为`false`关闭全局日志面板，默认会开启日志面板。

日志面板全局配置参数如下：
```js
       <XFlow
        widgets={{ CustomLogPanel }}
        logPanel={{// 日志面板配置参数
          logList, // 日志面板数据
          loading, // 日志面板loading
          logWidget:'CustomLogPanel'// 自定义日志面板
          tabsProps,// 日志面板，详情和追踪选项卡切换组件,antd的tabs配置透传
          enable: true, // 是否启用日志面板，默认为true，设置为false时全局禁用日志面板
        }}
```
### 内置节点日志面板

内置节点日志面板的数据来源于`logPanel.logList`,`logList`需要遵守以下数据格式,日志面板的追踪tab页默认只展示所有有状态的节点，即：`data._status`值存在的节点。
```js
 Array< {
  statusPanel?: {
    status?: Array<{ label: string; value?: string; isBadge?: boolean }>; // isBadge是否为badge形式显示状态
    extra?: string | ReactNode;
  };
  codePanel?: Array<{ title: string; code: string }>;
  nodeId: string;// 节点ID
  groupTitle:string;// 当有多个相同的nodeId，每个板块的分组名称
  showDetailLogWidget:boolean;// 是否展示detailLogWidget组件
  _status:string|number;  // 当前log的状态，如果没有，则以data._status为准
}>; 
   
```
<code src="./demo/log/buildIn-log/index.tsx"></code>


### 自定义节点日志面板

自定义组件`logPanel?.logList`作为`logList`透传。

```js
const CustomLogPanel = ({ logList, node }) => {
  console.log('自定义组件', logList, node);
  return <p>自定义组件:{node?.id}</p>;
};

```

<code src="./demo/log/custom-log/index.tsx"></code>