55.5. heatmap 组件

流程

1. 使用以下步骤创建新的 KIE Server 数据集：

   1. 在 Business Central 中，前往 Admin Data Sets。

      Data Set Explorer 页面将打开。

   2. 单击 New Data Set，再选择 Execution Server 供应商类型。

      Data Set Creation Wizard 页面将打开。

   3. 输入 dataset 的名称。
   4. 选择服务器配置。如果部署了项目，则可以使用服务器配置。
   5. 从列表中选择 CUSTOM 查询目标。

   6. 在 Query 字段中，输入以下自定义 SQL 查询。

      select
         pil.externalId,
         pil.processId,
          nid,
          nodetype,
          nodename,
          count(nid) as total_hits,
          avg(execution_time) as averageExecutionTime,
          min(execution_time) as minExecutionTime,
          max(execution_time) as maxExecutionTime
      from(
              select
                      max(log_date) as lastLog,
                      processinstanceid as piid,
                      nodeinstanceid as niid,
                      nodeid as nid,
                      nodetype,
                      nodename,
                      DATEDIFF(SECOND, min(log_date), max(log_date)) as execution_time
              from
                      NodeInstanceLog
              group by
                    processinstanceid,
                     nodeinstanceid,
                    nid
             order by lastLog
      )
      inner join
           ProcessInstanceLog pil on pil.processInstanceId = piid
      group by
           pil.externalId,
           nid,
           nodename

      Copy to Clipboard Toggle word wrap
   7. 完成 Data Set Creation 向导，再点 Test。
   8. 点击 Save。
2. 在 Business Central 中，进入 Menu Design Pages。
3. 在 Pages 面板中，单击 New。
4. 在 New Page 对话框中，在 Name 字段中输入一个值，然后选择所需的样式。

5. 点击 OK。

   新页面在 Page Editor 中打开，您可以看到 Heatmaps 组件在 Components 面板下可用。

6. 在 组件 面板中，展开 Heatmaps 组件，并将 Process Heatmap 组件类型拖到 Page Editor 中。
7. 在 Displayer 编辑器 向导中，点 Data 选项卡并选择新创建的 KIE Server 数据集。
8. 在 Data 选项卡中，从 Columns 字段中选择 NID 和 AVERAGEEXECUTIONTIME。

9. 点 Component Editor 选项卡，在 Component Properties 字段中输入强制字段的值，包括 Server Template、Container ID 和 Process Definition ID。

   注意

   要访问 Server Template 的值，请转至 Deploy Execution Servers Server Configuration。对于 Container ID 的值，请转至 Manage Process Instances，您可以点要使用的进程实例，在 Deployment 中对应于容器 ID，定义 ID 是进程 定义 ID。

10. 点 Display 选项卡，并根据您的要求编辑 Chart、Carigins、Filter、Refresh 和 Columns 的值。

11. 单击 +OK。

    图 55.2. 进程热图组件示例

    

    View larger image

    

流程

1. 使用以下步骤创建新的 KIE Server 数据集：

   1. 在 Business Central 中，前往 Admin Data Sets。

      Data Set Explorer 页面将打开。

   2. 单击 New Data Set，再选择 Execution Server 供应商类型。

      Data Set Creation Wizard 页面将打开。

   3. 输入 dataset 的名称。
   4. 选择服务器配置。如果部署了项目，则可以使用服务器配置。
   5. 从列表中选择 CUSTOM 查询目标。

   6. 在 Query 字段中，输入以下自定义 SQL 查询。

      select
         pil.externalId,
         pil.processId,
          nid,
          nodetype,
          nodename,
          count(nid) as total_hits,
          avg(execution_time) as averageExecutionTime,
          min(execution_time) as minExecutionTime,
          max(execution_time) as maxExecutionTime
      from(
              select
                      max(log_date) as lastLog,
                      processinstanceid as piid,
                      nodeinstanceid as niid,
                      nodeid as nid,
                      nodetype,
                      nodename,
                      DATEDIFF(SECOND, min(log_date), max(log_date)) as execution_time
              from
                      NodeInstanceLog
              group by
                    processinstanceid,
                     nodeinstanceid,
                    nid
             order by lastLog
      )
      inner join
           ProcessInstanceLog pil on pil.processInstanceId = piid
      group by
           pil.externalId,
           nid,
           nodename

      Copy to Clipboard Toggle word wrap
   7. 完成 Data Set Creation 向导，再点 Test。
   8. 点击 Save。
2. 在 Business Central 中，进入 Menu Design Pages。
3. 在 Pages 面板中，单击 New。
4. 在 New Page 对话框中，在 Name 字段中输入一个值，然后选择所需的样式。

5. 点击 OK。

   新页面在 Page Editor 中打开，您可以看到 Heatmaps 组件在 Components 面板下可用。

6. 在 组件 面板中，展开 Heatmaps 组件，并将所有进程 Heatmaps 组件类型拖到 canvas。
7. 在 Displayer 编辑器 向导中，点 Data 选项卡并选择新创建的 KIE Server 数据集。
8. 在 Data 选项卡中，从 Columns 字段中选择 EXTERNAL ID、PROCESSID、NID 和 AVERAGEEXECUTIONTIME。
9. 在 Process Selector 框中，根据您的要求选择 Container and Process 值。

10. 点 Component Editor 选项卡，然后在 Server Template （必需）字段中输入值。

    注意

    要访问 Server Template 的值，请转至 Deploy Execution Servers Server Configuration。

11. 点 Display 选项卡，并根据您的要求编辑 Chart、Carigins、Filter、Refresh 和 Columns 的值。

12. 单击 +OK。

    图 55.3. 多个进程热图组件示例

    

    View larger image

    

流程

1. 进入 appformer/dashbuilder/dashbuilder-shared/dashbuilder-js 目录。

2. 在 dashbuilder-js 目录中打开终端，并输入以下命令：

   yarn run init && yarn run build:fast

   Copy to Clipboard Toggle word wrap

   您可以查看 dashbuilder-js/packages 目录中存在以下组件：

   • processes-heatmaps-component
   • process-heatmap-component
   • logo-component
   • heatmap-component

3. 进入 dashbuilder-js/packages 目录，打开所需的 heatmap 组件，并在终端中输入以下命令：

   yarn run start

   Copy to Clipboard Toggle word wrap

4. 要访问组件，请在网页浏览器中输入 http://localhost:9001/。

   所选组件显示在网页浏览器中。