55.5. heatmap 组件

流程

1. 使用以下步骤创建一个新的 KIE 服务器数据集：

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

      Data Set Explorer 页面将打开。

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

      Data Set Creation Wizard 页面将打开。

   3. 输入数据集的名称。
   4. 选择服务器配置。如果部署了项目，则服务器配置可用。
   5. 从列表中选择 CUSTOM query 目标。

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

      select
         pil.externalId,
         pil.processId,
         nil.nodeid,
         nil.nodetype,
         nil.nodename,
         count(nil.nodeid) as total_hits
      from
          NodeInstanceLog nil
      inner join
          ProcessInstanceLog pil on pil.processInstanceId = nil.processInstanceId
      where
          nil.type = 1
      group by
           pil.externalId,
           nil.nodeid,
           nil.nodename

      Copy to Clipboard Toggle word wrap
      注意

      如果需要，您可以根据数据库修改 SQL 查询。

   7. 完成 Data Set Creation Wizard 并点 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 字段中选择 NODEID 和 TOTAL_HITS。

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

   注意

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

10. 单击 Display 选项卡，再根据需要编辑 Chart、Margins、Filter、Refresh 和 Columns 的值。

11. 点击 OK。

    图 55.3. 进程 heatmap 组件示例

    

    View larger image

    

流程

1. 使用以下步骤创建一个新的 KIE 服务器数据集：

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

      Data Set Explorer 页面将打开。

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

      Data Set Creation Wizard 页面将打开。

   3. 输入数据集的名称。
   4. 选择服务器配置。如果部署了项目，则服务器配置可用。
   5. 从列表中选择 CUSTOM query 目标。

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

      select
         pil.externalId,
         pil.processId,
         nil.nodeid,
         nil.nodetype,
         nil.nodename,
         count(nil.nodeid) as total_hits
      from
          NodeInstanceLog nil
      inner join
          ProcessInstanceLog pil on pil.processInstanceId = nil.processInstanceId
      where
          nil.type = 1
      group by
           pil.externalId,
           nil.nodeid,
           nil.nodename

      Copy to Clipboard Toggle word wrap
      注意

      如果需要，您可以根据数据库修改 SQL 查询。

   7. 完成 Data Set Creation Wizard 并点 Test。
   8. 点击 Save。
2. 在 Business Central 中，前往 Menu Design Pages。
3. 在 Pages 面板中，单击 New。
4. 在 New Page 对话框中，在 Name 字段中输入一个值，然后选择所需的样式。

5. 点击 OK。

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

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

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

    注意

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

11. 单击 Display 选项卡，再根据需要编辑 Chart、Margins、Filter、Refresh 和 Columns 的值。

12. 单击 +OK。

    图 55.4. 多个进程 heatmap 组件示例

    

    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. 要访问组件，在 Web 浏览器中输入 http://localhost:9001/。

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