[doc] Upgrade screenshot to latest version in dev document (#10242)

* fix issue-9898
* delete no use pictures

docs/docs/en/about/glossary.md

@@ -9,12 +9,7 @@ scheduling system
 form of a directed acyclic graph, and topological traversal is performed from nodes with zero degrees of entry until
 there are no subsequent nodes. Examples are as follows:
 
-<p align="center">
-  <img src="/img/dag_examples_cn.jpg" alt="dag example"  width="60%" />
-  <p align="center">
-        <em>dag example</em>
-  </p>
-</p>
+![about-glossary](/img/new_ui/dev/about/glossary.png)
 
 **Process definition**: Visualization formed by dragging task nodes and establishing task node associations**DAG**
 

docs/docs/en/guide/alert/alert_plugin_user_guide.md

@@ -12,7 +12,7 @@ First, go to the Security Center page. Select Alarm Group Management, click Alar
 
 Then select Alarm Group Management, create an alarm group, and choose the corresponding alarm instance.
 
-<img src="/img/alert/alert_step_1.png">
-<img src="/img/alert/alert_step_2.png">
-<img src="/img/alert/alert_step_3.png">
-<img src="/img/alert/alert_step_4.png">
+![alert-instance01](/img/new_ui/dev/alert/alert_instance01.png)
+![alert-instance02](/img/new_ui/dev/alert/alert_instance02.png)
+![alert-instance03](/img/new_ui/dev/alert/alert_instance03.png)
+![alert-instance04](/img/new_ui/dev/alert/alert_instance04.png)

docs/docs/en/guide/alert/dingtalk.md

@@ -3,7 +3,7 @@
 If you need to use `DingTalk` for alerting, create an alert instance in the alert instance management and select the DingTalk plugin. 
 The following shows the `DingTalk` configuration example:
 
-![dingtalk-plugin](/img/alert/dingtalk-plugin.png)
+![alert-dingtalk](/img/new_ui/dev/alert/alert_dingtalk.png)
 
 ## Parameter Configuration
 

docs/docs/en/guide/alert/telegram.md

@@ -3,7 +3,7 @@
 If you need `Telegram` to alert, create an alert instance in the alert instance management, and choose the `Telegram` plugin.
 The following shows the `Telegram` configuration example:
 
-![telegram-plugin](/img/alert/telegram-plugin.png)
+![alert-telegram](/img/new_ui/dev/alert/alert_telegram.png)
 
 ## Parameter Configuration
 

docs/docs/en/guide/parameter/priority.md

@@ -19,21 +19,21 @@ Followings are examples shows task parameters priority problems:#############
 
 1: Use shell nodes to explain the first case.
 
-![png01](/img/globalParam/image-20210723102938239.png)
+![priority-parameter01](/img/new_ui/dev/parameter/priority_parameter01.png)
 
 The [useParam] node can use the parameters which are set in the [createParam] node. The [useParam] node cannot obtain the parameters from the [noUseParam] node due to there is no dependency between them. Other task node types have the same usage rules with the Shell example here.
 
-![png02](/img/globalParam/image-20210723103316896.png)
+![priority-parameter02](/img/new_ui/dev/parameter/priority_parameter02.png)
 
 The [createParam] node can use parameters directly. In addition, the node creates two parameters named "key" and "key1", and "key1" has the same name as the one passed by the upstream node and assign value "12". However, due to the priority rules, the value assignment will assign "12" and the value from the upstream node is discarded.
 
 2: Use SQL nodes to explain another case.
 
-![png03](/img/globalParam/image-20210723103937052.png)
+![priority-parameter03](/img/new_ui/dev/parameter/priority_parameter03.png)
 
 The following shows the definition of the [use_create] node:
 
-![png04](/img/globalParam/image-20210723104411489.png)
+![priority-parameter04](/img/new_ui/dev/parameter/priority_parameter04.png)
 
 "status" is the own parameters of the node set by the current node. However, the user also sets the "status" parameter (global parameter) when saving the process definition and assign its value to -1. Then the value of status will be 2 with higher priority when the SQL executes. The global parameter value is discarded.
 

docs/docs/zh/about/glossary.md

@@ -6,12 +6,7 @@
 
 **DAG：** 全称 Directed Acyclic Graph，简称 DAG。工作流中的 Task 任务以有向无环图的形式组装起来，从入度为零的节点进行拓扑遍历，直到无后继节点为止。举例如下图：
 
-<p align="center">
-  <img src="/img/dag_examples_cn.jpg" alt="dag示例"  width="60%" />
-  <p align="center">
-        <em>dag示例</em>
-  </p>
-</p>
+![about-glossary](/img/new_ui/dev/about/glossary.png)
 
 **流程定义**：通过拖拽任务节点并建立任务节点的关联所形成的可视化**DAG**
 
@@ -19,7 +14,7 @@
 
 **任务实例**：任务实例是流程定义中任务节点的实例化，标识着具体的任务执行状态
 
-**任务类型**：目前支持有SHELL、SQL、SUB_PROCESS(子流程)、PROCEDURE、MR、SPARK、PYTHON、DEPENDENT(依赖)、，同时计划支持动态插件扩展，注意：其中子 **SUB_PROCESS**
+**任务类型**：目前支持有 SHELL、SQL、SUB_PROCESS(子流程)、PROCEDURE、MR、SPARK、PYTHON、DEPENDENT(依赖)，同时计划支持动态插件扩展，注意：其中子 **SUB_PROCESS**
 也是一个单独的流程定义，是可以单独启动执行的
 
 **调度方式**：系统支持基于 cron 表达式的定时调度和手动调度。命令类型支持：启动工作流、从当前节点开始执行、恢复被容错的工作流、恢复暂停流程、从失败节点开始执行、补数、定时、重跑、暂停、停止、恢复等待线程。

docs/docs/zh/guide/alert/alert_plugin_user_guide.md

@@ -10,7 +10,7 @@
 
 然后选择告警组管理，创建告警组，选择相应的告警实例即可。
 
-<img src="/img/alert/alert_step_1.png">
-<img src="/img/alert/alert_step_2.png">
-<img src="/img/alert/alert_step_3.png">
-<img src="/img/alert/alert_step_4.png">
+![alert-instance01](/img/new_ui/dev/alert/alert_instance01.png)
+![alert-instance02](/img/new_ui/dev/alert/alert_instance02.png)
+![alert-instance03](/img/new_ui/dev/alert/alert_instance03.png)
+![alert-instance04](/img/new_ui/dev/alert/alert_instance04.png)

docs/docs/zh/guide/alert/dingtalk.md

@@ -2,7 +2,7 @@
 
 如果您需要使用到钉钉进行告警，请在告警实例管理里创建告警实例，选择 DingTalk 插件。钉钉的配置样例如下:
 
-![dingtalk-plugin](/img/alert/dingtalk-plugin.png)
+![alert-dingtalk](/img/new_ui/dev/alert/alert_dingtalk.png)
 
 参数配置
 

docs/docs/zh/guide/alert/telegram.md

@@ -4,7 +4,7 @@
 
 `Telegram` 的配置样例如下:
 
-![telegram-plugin](/img/alert/telegram-plugin.png)
+![alert-telegram](/img/new_ui/dev/alert/alert_telegram.png)
 
 参数配置:
 * WebHook:

docs/docs/zh/guide/parameter/priority.md

@@ -19,21 +19,21 @@ DolphinScheduler 中所涉及的参数值的定义可能来自三种类型：
 
 1：先以 shell 节点解释第一种情况
 
-<img src="/img/globalParam/image-20210723102938239.png" alt="image-20210723102938239" style="zoom:50%;" />
+![priority-parameter01](/img/new_ui/dev/parameter/priority_parameter01.png)
 
 节点 【useParam】可以使用到节点【createParam】中设置的变量。而节点 【useParam】与节点【noUseParam】中并没有依赖关系，所以并不会获取到节点【noUseParam】的变量。上图中只是以 shell 节点作为例子，其他类型节点具有相同的使用规则。
 
-<img src="/img/globalParam/image-20210723103316896.png" alt="image-20210723103316896" style="zoom:50%;" />
+![priority-parameter02](/img/new_ui/dev/parameter/priority_parameter02.png)
 
 其中节点【createParam】在使用变量时直接使用即可。另外该节点设置了 "key" 和 "key1" 两个变量，这里用户用定义了一个与上游节点传递的变量名相同的变量 key1，并且赋值为 "12"，但是由于我们设置的优先级的关系，这里的值 "12" 会被使用，最终上游节点设置的变量值会被抛弃。
 
 2：我们再以 sql 节点来解释另外一种情况
 
-<img src="/img/globalParam/image-20210723103937052.png" alt="image-20210723103937052" style="zoom:50%;" />
+![priority-parameter03](/img/new_ui/dev/parameter/priority_parameter03.png)
 
 节点【use_create】的定义如下：
 
-![image-20210723104411489](/img/globalParam/image-20210723104411489.png)
+![priority-parameter04](/img/new_ui/dev/parameter/priority_parameter04.png)
 
 "status" 是当前节点设置的节点的自有变量。但是用户在保存工作流时也同样设置了 "status" 变量（全局参数），并且赋值为 -1。那在该 SQL 执行时，status 的值为优先级更高的 2。抛弃了全局变量中的值。