You are viewing a plain text version of this content. The canonical link for it is here.
Posted to commits@dolphinscheduler.apache.org by zh...@apache.org on 2022/05/11 04:02:57 UTC
[dolphinscheduler] 06/07: [doc] Update the document picture to new UI (#9953)
This is an automated email from the ASF dual-hosted git repository.
zhongjiajie pushed a commit to branch 3.0.0-beta-prepare
in repository https://gitbox.apache.org/repos/asf/dolphinscheduler.git
commit 346767c97db5433e98a3bebf95f95daf22ffab35
Author: QuakeWang <45...@users.noreply.github.com>
AuthorDate: Wed May 11 11:38:15 2022 +0800
[doc] Update the document picture to new UI (#9953)
(cherry picked from commit f790bc25fd76b47e076ea19945e8e43cc3219a7a)
---
docs/docs/en/guide/project/task-instance.md | 10 +--
docs/docs/en/guide/project/workflow-definition.md | 71 +++++++--------
docs/docs/en/guide/project/workflow-instance.md | 42 ++++-----
docs/docs/zh/guide/project/task-instance.md | 10 +--
docs/docs/zh/guide/project/workflow-definition.md | 99 ++++++++++-----------
docs/docs/zh/guide/project/workflow-instance.md | 52 +++++------
docs/img/complement.png | Bin 17723 -> 0 bytes
docs/img/complement_en1.png | Bin 197427 -> 0 bytes
docs/img/dag0.png | Bin 47362 -> 0 bytes
docs/img/dag2.png | Bin 98406 -> 0 bytes
docs/img/dag3.png | Bin 96804 -> 0 bytes
docs/img/dag4.png | Bin 28703 -> 0 bytes
docs/img/dag5.png | Bin 508254 -> 0 bytes
docs/img/dag6.png | Bin 564481 -> 0 bytes
docs/img/dag7.png | Bin 566175 -> 0 bytes
docs/img/dag8.png | Bin 79398 -> 0 bytes
docs/img/gant-pic.png | Bin 98130 -> 0 bytes
docs/img/gantt-en.png | Bin 108572 -> 0 bytes
docs/img/instance-detail.png | Bin 98607 -> 0 bytes
docs/img/instance-list-en.png | Bin 199051 -> 0 bytes
docs/img/instance-list.png | Bin 163111 -> 0 bytes
docs/img/instance-runs-en.png | Bin 117716 -> 0 bytes
docs/img/instanceViewLog-en.png | Bin 582387 -> 0 bytes
docs/img/instanceViewLog.png | Bin 39591 -> 0 bytes
docs/img/line.png | Bin 883 -> 0 bytes
docs/img/new_ui/dev/project/instance-gantt.png | Bin 0 -> 69896 bytes
docs/img/new_ui/dev/project/instance-history.png | Bin 0 -> 169052 bytes
docs/img/new_ui/dev/project/instance-log01.png | Bin 0 -> 169131 bytes
docs/img/new_ui/dev/project/instance-log02.png | Bin 0 -> 277710 bytes
docs/img/new_ui/dev/project/instance-parameter.png | Bin 0 -> 160599 bytes
docs/img/new_ui/dev/project/instance-state.png | Bin 0 -> 126428 bytes
docs/img/new_ui/dev/project/task-instance.png | Bin 0 -> 84196 bytes
docs/img/new_ui/dev/project/task-log.png | Bin 0 -> 314466 bytes
docs/img/new_ui/dev/project/workflow-dag.png | Bin 0 -> 103183 bytes
docs/img/new_ui/dev/project/workflow-date.png | Bin 0 -> 1182739 bytes
docs/img/new_ui/dev/project/workflow-delete.png | Bin 0 -> 123739 bytes
docs/img/new_ui/dev/project/workflow-dependent.png | Bin 0 -> 118509 bytes
docs/img/new_ui/dev/project/workflow-instance.png | Bin 0 -> 73652 bytes
docs/img/new_ui/dev/project/workflow-list.png | Bin 0 -> 143361 bytes
docs/img/new_ui/dev/project/workflow-online.png | Bin 0 -> 144081 bytes
docs/img/new_ui/dev/project/workflow-run.png | Bin 0 -> 173230 bytes
docs/img/new_ui/dev/project/workflow-save.png | Bin 0 -> 137709 bytes
docs/img/new_ui/dev/project/workflow-time01.png | Bin 0 -> 1161281 bytes
docs/img/new_ui/dev/project/workflow-time02.png | Bin 0 -> 172669 bytes
docs/img/new_ui/dev/project/workflow-time03.png | Bin 0 -> 62574 bytes
docs/img/new_ui/dev/project/workflow-tree.png | Bin 0 -> 77237 bytes
docs/img/run-work.png | Bin 12746 -> 0 bytes
docs/img/run_params.png | Bin 37494 -> 0 bytes
docs/img/run_params_en.png | Bin 468680 -> 0 bytes
docs/img/run_work_en.png | Bin 130884 -> 0 bytes
docs/img/task-list-en.png | Bin 279528 -> 0 bytes
docs/img/task-list.png | Bin 147963 -> 0 bytes
docs/img/task-log-en.png | Bin 385429 -> 0 bytes
docs/img/task-log2-en.png | Bin 239927 -> 0 bytes
docs/img/task-log2.png | Bin 117016 -> 0 bytes
docs/img/task_history.png | Bin 56128 -> 0 bytes
docs/img/task_history_en.png | Bin 593365 -> 0 bytes
docs/img/time-manage-list-en.png | Bin 165932 -> 0 bytes
docs/img/time-schedule.png | Bin 16987 -> 0 bytes
docs/img/time-schedule2.png | Bin 13113 -> 0 bytes
docs/img/time-schedule3.png | Bin 12950 -> 0 bytes
docs/img/time_schedule_en.png | Bin 172406 -> 0 bytes
docs/img/timer-en.png | Bin 39738 -> 0 bytes
docs/img/tree.png | Bin 35173 -> 0 bytes
docs/img/tree_en.png | Bin 453382 -> 0 bytes
docs/img/work_list.png | Bin 27577 -> 0 bytes
docs/img/work_list_en.png | Bin 428834 -> 0 bytes
67 files changed, 128 insertions(+), 156 deletions(-)
diff --git a/docs/docs/en/guide/project/task-instance.md b/docs/docs/en/guide/project/task-instance.md
index bafa5888b1..6ae52923a3 100644
--- a/docs/docs/en/guide/project/task-instance.md
+++ b/docs/docs/en/guide/project/task-instance.md
@@ -1,11 +1,9 @@
## Task Instance
- Click Project Management -> Workflow -> Task Instance. Enter the task instance page, as shown in the figure below, click workflow instance name, you can jump to the workflow instance DAG chart to view the task status.
- <p align="center">
- <img src="/img/task-list-en.png" width="80%" />
- </p>
+
+
- View log：Click the "view log" button in the operation column to view task execution log.
- <p align="center">
- <img src="/img/task-log2-en.png" width="80%" />
- </p>
+
+
diff --git a/docs/docs/en/guide/project/workflow-definition.md b/docs/docs/en/guide/project/workflow-definition.md
index 400c17ea7f..f06965c1eb 100644
--- a/docs/docs/en/guide/project/workflow-definition.md
+++ b/docs/docs/en/guide/project/workflow-definition.md
@@ -3,9 +3,9 @@
## Create workflow definition
- Click Project Management -> Workflow -> Workflow Definition, enter the workflow definition page, and click the "Create Workflow" button to enter the **workflow DAG edit** page, as shown in the following figure:
- <p align="center">
- <img src="/img/dag5.png" width="80%" />
- </p>
+
+ 
+
- Drag from the toolbar <img src="/img/tasks/icons/shell.png" width="15"/> to the canvas, to add a shell task to the canvas, as shown in the figure below:
@@ -20,30 +20,26 @@
6. Customize parameters (optional);
7. Click the "Confirm Add" button to save the task settings.
-- **Set dependencies between tasks:** Click the icon in the upper right corner <img src="/img/line.png" width="35"/> to connect the task; as shown in the figure below, task 2 and task 3 execute in parallel, When task 1 finished execution, tasks 2 and 3 will execute simultaneously.
+- **Set dependencies between tasks:** Click the plus sign on the right of the task node to connect the task; as shown in the figure below, task Node_B and task Node_C execute in parallel, When task Node_A finished execution, tasks Node_B and Node_C will execute simultaneously.
- <p align="center">
- <img src="/img/dag6.png" width="80%" />
- </p>
+ 
- **Delete dependencies:** Click the "arrow" icon in the upper right corner <img src="/img/arrow.png" width="35"/>, select the connection line, and click the "Delete" icon in the upper right corner <img src= "/img/delete.png" width="35"/>, delete dependencies between tasks.
- <p align="center">
- <img src="/img/dag7.png" width="80%" />
- </p>
+
+ 
- **Save workflow definition:** Click the "Save" button, and the "Set DAG chart name" window pops up, as shown in the figure below. Enter the workflow definition name, workflow definition description, and set global parameters (optional, refer to [global parameters](../parameter/global.md)), click the "Add" button to finish workflow definition creation.
- <p align="center">
- <img src="/img/dag8.png" width="80%" />
- </p>
+
+ 
+
> For other types of tasks, please refer to [Task Node Type and Parameter Settings](#TaskParamers). <!-- markdown-link-check-disable-line -->
## Workflow Definition Operation Function
Click Project Management -> Workflow -> Workflow Definition to enter the workflow definition page, as shown below:
-<p align="center">
-<img src="/img/work_list_en.png" width="80%" />
-</p>
+
+
The following are the operation functions of the workflow definition list:
- **Edit:** Only "Offline" workflow definitions can be edited. Workflow DAG editing is the same as [Create Workflow Definition](#creatDag) <!-- markdown-link-check-disable-line -->
@@ -55,21 +51,19 @@ The following are the operation functions of the workflow definition list:
- **Delete:** Delete the workflow definition
- **Download:** Download workflow definition to local
- **Tree Diagram:** Display the task node type and task status in a tree structure, as shown in the figure below:
- <p align="center">
- <img src="/img/tree_en.png" width="80%" />
- </p>
+
+
## Run the Workflow
- Click Project Management -> Workflow -> Workflow Definition to enter the workflow definition page, as shown in the figure below, click the "Go Online" button <img src="/img/online.png" width="35"/>to make workflow online.
- <p align="center">
- <img src="/img/work_list_en.png" width="80%" />
- </p>
+
+
- Click the "Run" button to pop up the startup parameter setting window, as shown in the figure below, set the startup parameters, click the "Run" button in the pop-up box, the workflow starts running, and the workflow instance page generates a workflow instance.
- <p align="center">
- <img src="/img/run_work_en.png" width="80%" />
- </p>
+
+
+
Description of workflow operating parameters:
* Failure strategy: When a task node fails to execute, other parallel task nodes need to execute this strategy. "Continue" means: after a certain task fails, other task nodes execute normally; "End" means: terminate all tasks execution, and terminate the entire process
@@ -83,31 +77,28 @@ The following are the operation functions of the workflow definition list:
* Complement: two modes including serial complement and parallel complement. Serial complement: within the specified time range, the complements are executed from the start date to the end date and N process instances are generated in turn; parallel complement: within the specified time range, multiple days are complemented at the same time to generate N process instances.
* You can select complement time range (only support continuous date) when executing a timing workflow definition. For example, need to fill in the data from 1st May to 10th May, as shown in the figure below:
- <p align="center">
- <img src="/img/complement_en1.png" width="80%" />
- </p>
+ 
- > Serial mode: the complement execute sequentially from 1st May to 10th May, and the process instance page generates 10 process instances;
+ > Serial mode: the complement execute sequentially from 9th May to 10th May, and the process instance page generates 10 process instances;
- > Parallel mode: The tasks from 1st May to 10th May execute simultaneously, and the process instance page generates 10 process instances;
+ > Parallel mode: The tasks from 9th May to 10th May execute simultaneously, and the process instance page generates 10 process instances;
## Workflow Timing
- Create timing: Click Project Management->Workflow->Workflow Definition, enter the workflow definition page, make the workflow online, click the "timing" button <img src="/img/timing.png" width="35"/> , the timing parameter setting dialog box pops up, as shown in the figure below:
- <p align="center">
- <img src="/img/time_schedule_en.png" width="80%" />
- </p>
+
+ 
+
- Choose the start and end time. In the time range, the workflow runs at regular intervals; If not in the time range, no regular workflow instances generate.
-- Add a timing that execute once a day at 5 AM, as shown in the following figure:
- <p align="center">
- <img src="/img/timer-en.png" width="80%" />
- </p>
+- Add a timing that execute 5 minutes once, as shown in the following figure:
+
+ 
+
- Failure strategy, notification strategy, process priority, worker group, notification group, recipient, and CC are the same as workflow running parameters.
- Click the "Create" button to create the timing. Now the timing status is "**Offline**" and the timing needs to be **Online** to make effect.
- Timing online: Click the "Timing Management" button <img src="/img/timeManagement.png" width="35"/>, enter the timing management page, click the "online" button, the timing status will change to "online", as shown in the below figure, the workflow makes effect regularly.
- <p align="center">
- <img src="/img/time-manage-list-en.png" width="80%" />
- </p>
+
+ 
## Import Workflow
diff --git a/docs/docs/en/guide/project/workflow-instance.md b/docs/docs/en/guide/project/workflow-instance.md
index 51670a3c82..bba65b9692 100644
--- a/docs/docs/en/guide/project/workflow-instance.md
+++ b/docs/docs/en/guide/project/workflow-instance.md
@@ -3,48 +3,42 @@
## View Workflow Instance
- Click Project Management -> Workflow -> Workflow Instance, enter the Workflow Instance page, as shown in the figure below:
- <p align="center">
- <img src="/img/instance-list-en.png" width="80%" />
- </p>
+
+
+
- Click the workflow name to enter the DAG view page, and check the task execution status, as shown in the figure below:
- <p align="center">
- <img src="/img/instance-runs-en.png" width="80%" />
- </p>
+
+
## View Task Log
- Enter the workflow instance page, click the workflow name, enter the DAG view page, double-click the task node, as shown in the figure below:
- <p align="center">
- <img src="/img/instanceViewLog-en.png" width="80%" />
- </p>
+
+
+
- Click "View Log", a log window pops up, as shown in the figure below, you can also view the task log on the task instance page, refer to [Task View Log](./task-instance.md)
- <p align="center">
- <img src="/img/task-log-en.png" width="80%" />
- </p>
+
+
## View Task History
- Click Project Management -> Workflow -> Workflow Instance, enter the workflow instance page, and click the workflow name to enter the workflow DAG page;
- Double-click the task node, as shown in the figure below, click "View History" to jump to the task instance page, and display a list of task instances running by the workflow instance
- <p align="center">
- <img src="/img/task_history_en.png" width="80%" />
- </p>
+
+
## View Operation Parameters
- Click Project Management -> Workflow -> Workflow Instance, enter the workflow instance page, and click the workflow name to enter the workflow DAG page;
- Click the icon in the upper left corner <img src="/img/run_params_button.png" width="35"/>，View the startup parameters of the workflow instance; click the icon <img src="/img/global_param.png" width="35"/>，View the global and local parameters of the workflow instance, as shown in the following figure:
- <p align="center">
- <img src="/img/run_params_en.png" width="80%" />
- </p>
+
+
## Workflow Instance Operation Function
Click Project Management -> Workflow -> Workflow Instance, enter the workflow instance page, as shown in the figure below:
- <p align="center">
- <img src="/img/instance-list-en.png" width="80%" />
- </p>
+
- **Edit：** only can edit terminated processes. Click the "Edit" button or the workflow instance name to enter the DAG edit page. After the edit, click the "Save" button to confirm, as shown in the figure below. In the pop-up box, check "Whether to update to workflow definition" to update the workflow definition; if not checked, no effect on the workflow definition
<p align="center">
@@ -57,6 +51,6 @@ Click Project Management -> Workflow -> Workflow Instance, enter the workflow in
- **Resume pause:** to resume the paused process, start running directly from the **paused node**
- **Delete:** delete the workflow instance and the task instance under the workflow instance
- **Gantt chart:** the vertical axis of the Gantt chart is the topological sorting of task instances of the workflow instance, and the horizontal axis is the running time of the task instances, as shown in the figure below:
- <p align="center">
- <img src="/img/gantt-en.png" width="80%" />
- </p>
+
+
+
diff --git a/docs/docs/zh/guide/project/task-instance.md b/docs/docs/zh/guide/project/task-instance.md
index 8a9b5adf01..b814dce567 100644
--- a/docs/docs/zh/guide/project/task-instance.md
+++ b/docs/docs/zh/guide/project/task-instance.md
@@ -1,11 +1,9 @@
# 任务实例
- 点击项目管理->工作流->任务实例，进入任务实例页面，如下图所示，点击工作流实例名称，可跳转到工作流实例DAG图查看任务状态。
- <p align="center">
- <img src="/img/task-list.png" width="80%" />
- </p>
+
+
- 查看日志：点击操作列中的“查看日志”按钮，可以查看任务执行的日志情况。
- <p align="center">
- <img src="/img/task-log2.png" width="80%" />
- </p>
\ No newline at end of file
+
+
diff --git a/docs/docs/zh/guide/project/workflow-definition.md b/docs/docs/zh/guide/project/workflow-definition.md
index 643d166b2e..a14decf10b 100644
--- a/docs/docs/zh/guide/project/workflow-definition.md
+++ b/docs/docs/zh/guide/project/workflow-definition.md
@@ -1,45 +1,45 @@
# 工作流定义
-## <span id=creatDag>创建工作流定义</span>
+## 创建工作流定义
- 点击项目管理->工作流->工作流定义，进入工作流定义页面，点击“创建工作流”按钮，进入**工作流DAG编辑**页面，如下图所示：
- <p align="center">
- <img src="/img/dag0.png" width="80%" />
- </p>
+
+ 
+
- 工具栏中拖拽 <img src="/img/tasks/icons/shell.png" width="15"/> 到画板中，新增一个Shell任务,如下图所示：
+
-- **添加shell任务的参数设置：**
+
+- **添加 Shell 任务的参数设置：**
+
1. 填写“节点名称”，“描述”，“脚本”字段；
1. “运行标志”勾选“正常”，若勾选“禁止执行”，运行工作流不会执行该任务；
- 1. 选择“任务优先级”：当worker线程数不足时，级别高的任务在执行队列中会优先执行，相同优先级的任务按照先进先出的顺序执行；
+ 1. 选择“任务优先级”：当 worker 线程数不足时，级别高的任务在执行队列中会优先执行，相同优先级的任务按照先进先出的顺序执行；
1. 超时告警（非必选）：勾选超时告警、超时失败，填写“超时时长”，当任务执行时间超过**超时时长**，会发送告警邮件并且任务超时失败；
- 1. 资源（非必选）。资源文件是资源中心->文件管理页面创建或上传的文件，如文件名为`test.sh`，脚本中调用资源命令为`sh test.sh`；
+ 1. 资源（非必选）。资源文件是资源中心->文件管理页面创建或上传的文件，如文件名为 `test.sh`，脚本中调用资源命令为 `sh test.sh`；
1. 自定义参数（非必填）；
1. 点击"确认添加"按钮，保存任务设置。
-- **配置任务之间的依赖关系：** 点击右上角图标<img src="/img/line.png" width="35"/>连接任务；如下图所示，任务2和任务3并行执行，当任务1执行完，任务2、3会同时执行。
+- **配置任务之间的依赖关系：** 点击任务节点的右侧加号连接任务；如下图所示，任务 Node_B 和任务 Node_C 并行执行，当任务 Node_A 执行完，任务 Node_B、Node_C 会同时执行。
- <p align="center">
- <img src="/img/dag2.png" width="80%" />
- </p>
+ 
- **删除依赖关系：** 点击右上角"箭头"图标<img src="/img/arrow.png" width="35"/>，选中连接线，点击右上角"删除"图标<img src="/img/delete.png" width="35"/>，删除任务间的依赖关系。
- <p align="center">
- <img src="/img/dag3.png" width="80%" />
- </p>
+
+ 
- **保存工作流定义：** 点击”保存“按钮，弹出"设置DAG图名称"弹框，如下图所示，输入工作流定义名称，工作流定义描述，设置全局参数（选填，参考[全局参数](../parameter/global.md)），点击"添加"按钮，工作流定义创建成功。
- <p align="center">
- <img src="/img/dag4.png" width="80%" />
- </p>
+
+ 
+
> 其他类型任务，请参考 [任务节点类型和参数设置](#TaskParamers)。 <!-- markdown-link-check-disable-line -->
## 工作流定义操作功能
点击项目管理->工作流->工作流定义，进入工作流定义页面，如下图所示:
- <p align="center">
- <img src="/img/work_list.png" width="80%" />
- </p>
+
+
+
工作流定义列表的操作功能如下：
- **编辑：** 只能编辑"下线"的工作流定义。工作流DAG编辑同创建工作流定义。
@@ -51,59 +51,56 @@
- **删除：** 删除工作流定义。
- **下载：** 下载工作流定义到本地。
- **树形图：** 以树形结构展示任务节点的类型及任务状态，如下图所示：
- <p align="center">
- <img src="/img/tree.png" width="80%" />
- </p>
+
+
## 运行工作流
- 点击项目管理->工作流->工作流定义，进入工作流定义页面，如下图所示，点击"上线"按钮<img src="/img/online.png" width="35"/>，上线工作流。
- <p align="center">
- <img src="/img/work_list.png" width="80%" />
- </p>
+
+
+
- 点击”运行“按钮，弹出启动参数设置弹框，如下图所示，设置启动参数，点击弹框中的"运行"按钮，工作流开始运行，工作流实例页面生成一条工作流实例。
- <p align="center">
- <img src="/img/run-work.png" width="80%" />
- </p>
+
+
+
工作流运行参数说明：
* 失败策略：当某一个任务节点执行失败时，其他并行的任务节点需要执行的策略。”继续“表示：某一任务失败后，其他任务节点正常执行；”结束“表示：终止所有正在执行的任务，并终止整个流程。
* 通知策略：当流程结束，根据流程状态发送流程执行信息通知邮件，包含任何状态都不发，成功发，失败发，成功或失败都发。
- * 流程优先级：流程运行的优先级，分五个等级：最高（HIGHEST），高(HIGH),中（MEDIUM）,低（LOW），最低（LOWEST）。当master线程数不足时，级别高的流程在执行队列中会优先执行，相同优先级的流程按照先进先出的顺序执行。
- * worker分组：该流程只能在指定的worker机器组里执行。默认是Default，可以在任一worker上执行。
+ * 流程优先级：流程运行的优先级，分五个等级：最高（HIGHEST），高(HIGH),中（MEDIUM）,低（LOW），最低（LOWEST）。当 master 线程数不足时，级别高的流程在执行队列中会优先执行，相同优先级的流程按照先进先出的顺序执行。
+ * Worker 分组：该流程只能在指定的 worker 机器组里执行。默认是 Default，可以在任一 worker 上执行。
* 通知组：选择通知策略||超时报警||发生容错时，会发送流程信息或邮件到通知组里的所有成员。
* 收件人：选择通知策略||超时报警||发生容错时，会发送流程信息或告警邮件到收件人列表。
* 抄送人：选择通知策略||超时报警||发生容错时，会抄送流程信息或告警邮件到抄送人列表。
* 启动参数: 在启动新的流程实例时，设置或覆盖全局参数的值。
- * 补数：包括串行补数、并行补数2种模式。串行补数：指定时间范围内，从开始日期至结束日期依次执行补数，依次生成N条流程实例；并行补数：指定时间范围内，多天同时进行补数，同时生成N条流程实例。
- * 补数： 执行指定日期的工作流定义，可以选择补数时间范围（目前只支持针对连续的天进行补数)，比如需要补5月1号到5月10号的数据，如下图所示：
- <p align="center">
- <img src="/img/complement.png" width="80%" />
- </p>
+ * 补数：包括串行补数、并行补数 2 种模式。串行补数：指定时间范围内，从开始日期至结束日期依次执行补数，依次生成N条流程实例；并行补数：指定时间范围内，多天同时进行补数，同时生成 N 条流程实例。
+ * 补数： 执行指定日期的工作流定义，可以选择补数时间范围（目前只支持针对连续的天进行补数)，比如需要补 5 月 9 号到 5 月 10 号的数据，如下图所示：
- > 串行模式：补数从5月1号到5月10号依次执行，依次在流程实例页面生成十条流程实例；
+ 
- > 并行模式：同时执行5月1号到5月10号的任务，同时在流程实例页面生成十条流程实例。
+ > 串行模式：补数从 5 月 9 号到 5 月 10 号依次执行，依次在流程实例页面生成十条流程实例；
-## <span id=creatTiming>工作流定时</span>
+ > 并行模式：同时执行 5 月 9 号到 5 月 10 号的任务，同时在流程实例页面生成十条流程实例。
+
+## 工作流定时
- 创建定时：点击项目管理->工作流->工作流定义，进入工作流定义页面，上线工作流，点击"定时"按钮<img src="/img/timing.png" width="35"/>,弹出定时参数设置弹框，如下图所示：
- <p align="center">
- <img src="/img/time-schedule.png" width="80%" />
- </p>
+
+ 
+
- 选择起止时间。在起止时间范围内，定时运行工作流；不在起止时间范围内，不再产生定时工作流实例。
-- 添加一个每天凌晨5点执行一次的定时，如下图所示：
- <p align="center">
- <img src="/img/time-schedule2.png" width="80%" />
- </p>
-- 失败策略、通知策略、流程优先级、Worker分组、通知组、收件人、抄送人同工作流运行参数。
+- 添加一个每隔 5 分钟执行一次的定时，如下图所示：
+
+ 
+
+- 失败策略、通知策略、流程优先级、Worker 分组、通知组、收件人、抄送人同工作流运行参数。
- 点击"创建"按钮，创建定时成功，此时定时状态为"**下线**"，定时需**上线**才生效。
- 定时上线：点击"定时管理"按钮<img src="/img/timeManagement.png" width="35"/>，进入定时管理页面，点击"上线"按钮，定时状态变为"上线"，如下图所示，工作流定时生效。
- <p align="center">
- <img src="/img/time-schedule3.png" width="80%" />
- </p>
+
+ 
## 导入工作流
-点击项目管理->工作流->工作流定义，进入工作流定义页面，点击"导入工作流"按钮，导入本地工作流文件，工作流定义列表显示导入的工作流，状态为下线。
\ No newline at end of file
+点击项目管理->工作流->工作流定义，进入工作流定义页面，点击"导入工作流"按钮，导入本地工作流文件，工作流定义列表显示导入的工作流，状态为下线。
diff --git a/docs/docs/zh/guide/project/workflow-instance.md b/docs/docs/zh/guide/project/workflow-instance.md
index e8f2f7605b..4f4d0a5dca 100644
--- a/docs/docs/zh/guide/project/workflow-instance.md
+++ b/docs/docs/zh/guide/project/workflow-instance.md
@@ -3,59 +3,53 @@
## 查看工作流实例
- 点击项目管理->工作流->工作流实例，进入工作流实例页面，如下图所示：
- <p align="center">
- <img src="/img/instance-list.png" width="80%" />
- </p>
+
+
+
- 点击工作流名称，进入DAG查看页面，查看任务执行状态，如下图所示。
- <p align="center">
- <img src="/img/instance-detail.png" width="80%" />
- </p>
+
+
## 查看任务日志
- 进入工作流实例页面，点击工作流名称，进入DAG查看页面，双击任务节点，如下图所示：
- <p align="center">
- <img src="/img/instanceViewLog.png" width="80%" />
- </p>
+
+
+
- 点击"查看日志"，弹出日志弹框，如下图所示,任务实例页面也可查看任务日志，参考[任务查看日志](./task-instance.md)。
- <p align="center">
- <img src="/img/task-log.png" width="80%" />
- </p>
+
+
## 查看任务历史记录
-- 点击项目管理->工作流->工作流实例，进入工作流实例页面，点击工作流名称，进入工作流DAG页面;
+- 点击项目管理->工作流->工作流实例，进入工作流实例页面，点击工作流名称，进入工作流 DAG 页面;
- 双击任务节点，如下图所示，点击"查看历史"，跳转到任务实例页面，并展示该工作流实例运行的任务实例列表
- <p align="center">
- <img src="/img/task_history.png" width="80%" />
- </p>
+
+
## 查看运行参数
-- 点击项目管理->工作流->工作流实例，进入工作流实例页面，点击工作流名称，进入工作流DAG页面;
+- 点击项目管理->工作流->工作流实例，进入工作流实例页面，点击工作流名称，进入工作流 DAG 页面;
- 点击左上角图标<img src="/img/run_params_button.png" width="35"/>，查看工作流实例的启动参数；点击图标<img src="/img/global_param.png" width="35"/>，查看工作流实例的全局参数和局部参数，如下图所示：
- <p align="center">
- <img src="/img/run_params.png" width="80%" />
- </p>
+
+
## 工作流实例操作功能
点击项目管理->工作流->工作流实例，进入工作流实例页面，如下图所示：
- <p align="center">
- <img src="/img/instance-list.png" width="80%" />
- </p>
-- **编辑：** 只能编辑已终止的流程。点击"编辑"按钮或工作流实例名称进入DAG编辑页面，编辑后点击"保存"按钮，弹出保存DAG弹框，如下图所示，在弹框中勾选"是否更新到工作流定义"，保存后则更新工作流定义；若不勾选，则不更新工作流定义。
+
+
+- **编辑：** 只能编辑已终止的流程。点击"编辑"按钮或工作流实例名称进入 DAG 编辑页面，编辑后点击"保存"按钮，弹出保存 DAG 弹框，如下图所示，在弹框中勾选"是否更新到工作流定义"，保存后则更新工作流定义；若不勾选，则不更新工作流定义。
<p align="center">
<img src="/img/editDag.png" width="80%" />
</p>
- **重跑：** 重新执行已经终止的流程。
- **恢复失败：** 针对失败的流程，可以执行恢复失败操作，从失败的节点开始执行。
-- **停止：** 对正在运行的流程进行**停止**操作，后台会先`kill`worker进程,再执行`kill -9`操作
+- **停止：** 对正在运行的流程进行**停止**操作，后台会先 `kill` worker 进程,再执行 `kill -9` 操作
- **暂停：** 对正在运行的流程进行**暂停**操作，系统状态变为**等待执行**，会等待正在执行的任务结束，暂停下一个要执行的任务。
- **恢复暂停：** 对暂停的流程恢复，直接从**暂停的节点**开始运行
- **删除：** 删除工作流实例及工作流实例下的任务实例
-- **甘特图：** Gantt图纵轴是某个工作流实例下的任务实例的拓扑排序，横轴是任务实例的运行时间,如图示：
- <p align="center">
- <img src="/img/gant-pic.png" width="80%" />
- </p>
+- **甘特图：** Gantt 图纵轴是某个工作流实例下的任务实例的拓扑排序，横轴是任务实例的运行时间,如图示：
+
+
diff --git a/docs/img/complement.png b/docs/img/complement.png
deleted file mode 100644
index e132108033..0000000000
Binary files a/docs/img/complement.png and /dev/null differ
diff --git a/docs/img/complement_en1.png b/docs/img/complement_en1.png
deleted file mode 100644
index 8d706aae86..0000000000
Binary files a/docs/img/complement_en1.png and /dev/null differ
diff --git a/docs/img/dag0.png b/docs/img/dag0.png
deleted file mode 100644
index 02dea133fc..0000000000
Binary files a/docs/img/dag0.png and /dev/null differ
diff --git a/docs/img/dag2.png b/docs/img/dag2.png
deleted file mode 100644
index ebd1671d69..0000000000
Binary files a/docs/img/dag2.png and /dev/null differ
diff --git a/docs/img/dag3.png b/docs/img/dag3.png
deleted file mode 100644
index b23b82804a..0000000000
Binary files a/docs/img/dag3.png and /dev/null differ
diff --git a/docs/img/dag4.png b/docs/img/dag4.png
deleted file mode 100644
index 224ddb5b88..0000000000
Binary files a/docs/img/dag4.png and /dev/null differ
diff --git a/docs/img/dag5.png b/docs/img/dag5.png
deleted file mode 100644
index d4058332aa..0000000000
Binary files a/docs/img/dag5.png and /dev/null differ
diff --git a/docs/img/dag6.png b/docs/img/dag6.png
deleted file mode 100644
index 9b874785b1..0000000000
Binary files a/docs/img/dag6.png and /dev/null differ
diff --git a/docs/img/dag7.png b/docs/img/dag7.png
deleted file mode 100644
index 063acf5e0f..0000000000
Binary files a/docs/img/dag7.png and /dev/null differ
diff --git a/docs/img/dag8.png b/docs/img/dag8.png
deleted file mode 100644
index fb63e652c2..0000000000
Binary files a/docs/img/dag8.png and /dev/null differ
diff --git a/docs/img/gant-pic.png b/docs/img/gant-pic.png
deleted file mode 100644
index 1d17ee263b..0000000000
Binary files a/docs/img/gant-pic.png and /dev/null differ
diff --git a/docs/img/gantt-en.png b/docs/img/gantt-en.png
deleted file mode 100644
index 27335878fb..0000000000
Binary files a/docs/img/gantt-en.png and /dev/null differ
diff --git a/docs/img/instance-detail.png b/docs/img/instance-detail.png
deleted file mode 100644
index ccd0dfd1b9..0000000000
Binary files a/docs/img/instance-detail.png and /dev/null differ
diff --git a/docs/img/instance-list-en.png b/docs/img/instance-list-en.png
deleted file mode 100644
index a8b177a582..0000000000
Binary files a/docs/img/instance-list-en.png and /dev/null differ
diff --git a/docs/img/instance-list.png b/docs/img/instance-list.png
deleted file mode 100644
index 6360e63586..0000000000
Binary files a/docs/img/instance-list.png and /dev/null differ
diff --git a/docs/img/instance-runs-en.png b/docs/img/instance-runs-en.png
deleted file mode 100644
index 9d84133ae4..0000000000
Binary files a/docs/img/instance-runs-en.png and /dev/null differ
diff --git a/docs/img/instanceViewLog-en.png b/docs/img/instanceViewLog-en.png
deleted file mode 100644
index 3b5fab502c..0000000000
Binary files a/docs/img/instanceViewLog-en.png and /dev/null differ
diff --git a/docs/img/instanceViewLog.png b/docs/img/instanceViewLog.png
deleted file mode 100644
index 85ade8049d..0000000000
Binary files a/docs/img/instanceViewLog.png and /dev/null differ
diff --git a/docs/img/line.png b/docs/img/line.png
deleted file mode 100644
index 8a7e60a916..0000000000
Binary files a/docs/img/line.png and /dev/null differ
diff --git a/docs/img/new_ui/dev/project/instance-gantt.png b/docs/img/new_ui/dev/project/instance-gantt.png
new file mode 100644
index 0000000000..c5431eaba7
Binary files /dev/null and b/docs/img/new_ui/dev/project/instance-gantt.png differ
diff --git a/docs/img/new_ui/dev/project/instance-history.png b/docs/img/new_ui/dev/project/instance-history.png
new file mode 100644
index 0000000000..29b1f98d51
Binary files /dev/null and b/docs/img/new_ui/dev/project/instance-history.png differ
diff --git a/docs/img/new_ui/dev/project/instance-log01.png b/docs/img/new_ui/dev/project/instance-log01.png
new file mode 100644
index 0000000000..82e252f4c1
Binary files /dev/null and b/docs/img/new_ui/dev/project/instance-log01.png differ
diff --git a/docs/img/new_ui/dev/project/instance-log02.png b/docs/img/new_ui/dev/project/instance-log02.png
new file mode 100644
index 0000000000..4e3a6c19e1
Binary files /dev/null and b/docs/img/new_ui/dev/project/instance-log02.png differ
diff --git a/docs/img/new_ui/dev/project/instance-parameter.png b/docs/img/new_ui/dev/project/instance-parameter.png
new file mode 100644
index 0000000000..f078d9cbc1
Binary files /dev/null and b/docs/img/new_ui/dev/project/instance-parameter.png differ
diff --git a/docs/img/new_ui/dev/project/instance-state.png b/docs/img/new_ui/dev/project/instance-state.png
new file mode 100644
index 0000000000..3d5021326b
Binary files /dev/null and b/docs/img/new_ui/dev/project/instance-state.png differ
diff --git a/docs/img/new_ui/dev/project/task-instance.png b/docs/img/new_ui/dev/project/task-instance.png
new file mode 100644
index 0000000000..4026736573
Binary files /dev/null and b/docs/img/new_ui/dev/project/task-instance.png differ
diff --git a/docs/img/new_ui/dev/project/task-log.png b/docs/img/new_ui/dev/project/task-log.png
new file mode 100644
index 0000000000..7cb5c5505d
Binary files /dev/null and b/docs/img/new_ui/dev/project/task-log.png differ
diff --git a/docs/img/new_ui/dev/project/workflow-dag.png b/docs/img/new_ui/dev/project/workflow-dag.png
new file mode 100644
index 0000000000..907f6f995b
Binary files /dev/null and b/docs/img/new_ui/dev/project/workflow-dag.png differ
diff --git a/docs/img/new_ui/dev/project/workflow-date.png b/docs/img/new_ui/dev/project/workflow-date.png
new file mode 100644
index 0000000000..629274ef8a
Binary files /dev/null and b/docs/img/new_ui/dev/project/workflow-date.png differ
diff --git a/docs/img/new_ui/dev/project/workflow-delete.png b/docs/img/new_ui/dev/project/workflow-delete.png
new file mode 100644
index 0000000000..d68cc08af0
Binary files /dev/null and b/docs/img/new_ui/dev/project/workflow-delete.png differ
diff --git a/docs/img/new_ui/dev/project/workflow-dependent.png b/docs/img/new_ui/dev/project/workflow-dependent.png
new file mode 100644
index 0000000000..cd6e01bfb6
Binary files /dev/null and b/docs/img/new_ui/dev/project/workflow-dependent.png differ
diff --git a/docs/img/new_ui/dev/project/workflow-instance.png b/docs/img/new_ui/dev/project/workflow-instance.png
new file mode 100644
index 0000000000..15dbdf1913
Binary files /dev/null and b/docs/img/new_ui/dev/project/workflow-instance.png differ
diff --git a/docs/img/new_ui/dev/project/workflow-list.png b/docs/img/new_ui/dev/project/workflow-list.png
new file mode 100644
index 0000000000..e43fc38c07
Binary files /dev/null and b/docs/img/new_ui/dev/project/workflow-list.png differ
diff --git a/docs/img/new_ui/dev/project/workflow-online.png b/docs/img/new_ui/dev/project/workflow-online.png
new file mode 100644
index 0000000000..9022d4156a
Binary files /dev/null and b/docs/img/new_ui/dev/project/workflow-online.png differ
diff --git a/docs/img/new_ui/dev/project/workflow-run.png b/docs/img/new_ui/dev/project/workflow-run.png
new file mode 100644
index 0000000000..467af342fe
Binary files /dev/null and b/docs/img/new_ui/dev/project/workflow-run.png differ
diff --git a/docs/img/new_ui/dev/project/workflow-save.png b/docs/img/new_ui/dev/project/workflow-save.png
new file mode 100644
index 0000000000..0cf4aadb9d
Binary files /dev/null and b/docs/img/new_ui/dev/project/workflow-save.png differ
diff --git a/docs/img/new_ui/dev/project/workflow-time01.png b/docs/img/new_ui/dev/project/workflow-time01.png
new file mode 100644
index 0000000000..d690c91c8e
Binary files /dev/null and b/docs/img/new_ui/dev/project/workflow-time01.png differ
diff --git a/docs/img/new_ui/dev/project/workflow-time02.png b/docs/img/new_ui/dev/project/workflow-time02.png
new file mode 100644
index 0000000000..557511f702
Binary files /dev/null and b/docs/img/new_ui/dev/project/workflow-time02.png differ
diff --git a/docs/img/new_ui/dev/project/workflow-time03.png b/docs/img/new_ui/dev/project/workflow-time03.png
new file mode 100644
index 0000000000..0369d786a0
Binary files /dev/null and b/docs/img/new_ui/dev/project/workflow-time03.png differ
diff --git a/docs/img/new_ui/dev/project/workflow-tree.png b/docs/img/new_ui/dev/project/workflow-tree.png
new file mode 100644
index 0000000000..ad83939ac9
Binary files /dev/null and b/docs/img/new_ui/dev/project/workflow-tree.png differ
diff --git a/docs/img/run-work.png b/docs/img/run-work.png
deleted file mode 100644
index 03029812ac..0000000000
Binary files a/docs/img/run-work.png and /dev/null differ
diff --git a/docs/img/run_params.png b/docs/img/run_params.png
deleted file mode 100644
index 7685d8cfe6..0000000000
Binary files a/docs/img/run_params.png and /dev/null differ
diff --git a/docs/img/run_params_en.png b/docs/img/run_params_en.png
deleted file mode 100644
index acb3c24f5a..0000000000
Binary files a/docs/img/run_params_en.png and /dev/null differ
diff --git a/docs/img/run_work_en.png b/docs/img/run_work_en.png
deleted file mode 100644
index 1c2c28b94e..0000000000
Binary files a/docs/img/run_work_en.png and /dev/null differ
diff --git a/docs/img/task-list-en.png b/docs/img/task-list-en.png
deleted file mode 100644
index ba5da67fa9..0000000000
Binary files a/docs/img/task-list-en.png and /dev/null differ
diff --git a/docs/img/task-list.png b/docs/img/task-list.png
deleted file mode 100644
index b8f1115d03..0000000000
Binary files a/docs/img/task-list.png and /dev/null differ
diff --git a/docs/img/task-log-en.png b/docs/img/task-log-en.png
deleted file mode 100644
index 12680efb29..0000000000
Binary files a/docs/img/task-log-en.png and /dev/null differ
diff --git a/docs/img/task-log2-en.png b/docs/img/task-log2-en.png
deleted file mode 100644
index 013f58f3a1..0000000000
Binary files a/docs/img/task-log2-en.png and /dev/null differ
diff --git a/docs/img/task-log2.png b/docs/img/task-log2.png
deleted file mode 100644
index ff26d7a570..0000000000
Binary files a/docs/img/task-log2.png and /dev/null differ
diff --git a/docs/img/task_history.png b/docs/img/task_history.png
deleted file mode 100644
index d20c831186..0000000000
Binary files a/docs/img/task_history.png and /dev/null differ
diff --git a/docs/img/task_history_en.png b/docs/img/task_history_en.png
deleted file mode 100644
index c6b5e9a60b..0000000000
Binary files a/docs/img/task_history_en.png and /dev/null differ
diff --git a/docs/img/time-manage-list-en.png b/docs/img/time-manage-list-en.png
deleted file mode 100644
index 99e4c424e3..0000000000
Binary files a/docs/img/time-manage-list-en.png and /dev/null differ
diff --git a/docs/img/time-schedule.png b/docs/img/time-schedule.png
deleted file mode 100644
index d87325b9d3..0000000000
Binary files a/docs/img/time-schedule.png and /dev/null differ
diff --git a/docs/img/time-schedule2.png b/docs/img/time-schedule2.png
deleted file mode 100644
index 1d5fdc058b..0000000000
Binary files a/docs/img/time-schedule2.png and /dev/null differ
diff --git a/docs/img/time-schedule3.png b/docs/img/time-schedule3.png
deleted file mode 100644
index 47aeaacaa6..0000000000
Binary files a/docs/img/time-schedule3.png and /dev/null differ
diff --git a/docs/img/time_schedule_en.png b/docs/img/time_schedule_en.png
deleted file mode 100644
index 6a830d1e30..0000000000
Binary files a/docs/img/time_schedule_en.png and /dev/null differ
diff --git a/docs/img/timer-en.png b/docs/img/timer-en.png
deleted file mode 100644
index f83c856dc0..0000000000
Binary files a/docs/img/timer-en.png and /dev/null differ
diff --git a/docs/img/tree.png b/docs/img/tree.png
deleted file mode 100644
index a474b262ef..0000000000
Binary files a/docs/img/tree.png and /dev/null differ
diff --git a/docs/img/tree_en.png b/docs/img/tree_en.png
deleted file mode 100644
index 3486bbc64f..0000000000
Binary files a/docs/img/tree_en.png and /dev/null differ
diff --git a/docs/img/work_list.png b/docs/img/work_list.png
deleted file mode 100644
index 79a7a03590..0000000000
Binary files a/docs/img/work_list.png and /dev/null differ
diff --git a/docs/img/work_list_en.png b/docs/img/work_list_en.png
deleted file mode 100644
index b1d6bd40b1..0000000000
Binary files a/docs/img/work_list_en.png and /dev/null differ