56.5. Heatmap コンポーネント

Business Central では、heatmap コンポーネントをページに追加できます。heatmap コンポーネントは、プロセスのダイアグラムに heat 情報を表示するのに使用されます。プロセスダイアグラムノードの色は、各ノードに割り当てる値に関連し、割り当てられた値に基づいて、プロセスダイアグラムの色が異なります。割り当てられた値が最大の場合には heat が強まり、最小値が割り当てられている場合は、プロセスダイアグラムに heat が表示されません。

heatmap コンポーネントを Dashbuilder Runtime または Dashbuilder Standalone にエクスポートして、KIE Server データセットから heat 情報を取得できます。heatmap コンポーネントを使用してダッシュボードを作成、編集、およびビルドすることも可能です。

56.5.1. プロセス用の heatmap コンポーネントの作成

Business Central で特定のプロセス用に heatmap コンポーネントを作成できます。

前提条件

  • KIE Server がデプロイされて Business Central に接続されている。
  • Business Central に、1 つ以上のビジネスプロセスアセットが含まれるプロジェクトを作成している。
  • Business Central に、プロセス定義が設定されたプロジェクトがデプロイされている。
  • サンプルプロセスインスタンスが作成されている。

手順

  1. 以下の手順を使用して、新規の KIE Server データセットを作成します。

    1. Business Central で、AdminData Sets に移動します。

      Data Set Explorer ページが開きます。

    2. New Data Set をクリックして、Execution Server プロバイダータイプを選択します。

      Data Set Creation Wizard ページが開きます。

    3. データセットの名前を入力します。
    4. サーバー設定を選択します。プロジェクトがデプロイされる場合は、サーバー設定を使用できます。
    5. 一覧から CUSTOM クエリーターゲットを選択します。
    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
      注記

      必要に応じて、データベースに合わせて SQL クエリーを変更できます。

    7. Data Set Creation Wizard を完了し、Test をクリックします。
    8. Save をクリックします。
  2. Business Central で、MenuDesignPages に移動します。
  3. Pages パネルで、New をクリックします。
  4. New Page ダイアログボックスでの Name フィールドに値を入力し、必要なスタイルを選択します。
  5. OK をクリックします。

    Page Editor で新しいページが開き、Heatmaps コンポーネントが Components パネルで利用可能なことを確認できます。

  6. Components パネルで Heatmaps コンポーネントを展開し、Process Heatmap コンポーネントタイプを Page Editor にドラッグします。
  7. Displayer エディター ウィザードで Data タブをクリックして、新たに作成した KIE Server データセットを選択します。
  8. Data タブで、Columns フィールドから NODEID および TOTAL_HITS を選択します。
  9. Component Editor タブをクリックし、Server TemplateContainer IDProcess Definition ID などの必須フィールドの値を Component Properties タブに入力します。

    注記

    Server Template の値にアクセスするには、DeployExecution ServersServer Configurations の順に移動します。Container ID の値については、ManageProcess Instances に移動し、使用するプロセスインスタンスをクリックします。DeploymentContainer ID に対応し、Definition IDProcess Definition ID になります。

  10. Display タブをクリックし、要件に応じて ChartMarginsFilterRefresh、および Columns の値を編集します。
  11. OK をクリックします。

    図56.3 プロセス heatmap コンポーネントの例

    プロセス heatmap コンポーネント

プロセスダイアグラムの heat 情報が表示されます。

56.5.2. 複数プロセス用の heatmap コンポーネントの作成

Business Central では、複数のプロセス用に heatmap コンポーネントを作成できます。

前提条件

  • KIE Server がデプロイされて Business Central に接続されている。
  • Business Central に複数のプロジェクトを作成しており、ビジネスプロセスアセットが 1 つ以上含まれます。
  • Business Central に、プロセス定義が設定されたプロジェクトがデプロイされている。
  • サンプルプロセスインスタンスが作成されている。

手順

  1. 以下の手順を使用して、新規の KIE Server データセットを作成します。

    1. Business Central で、AdminData Sets に移動します。

      Data Set Explorer ページが開きます。

    2. New Data Set をクリックして、Execution Server プロバイダータイプを選択します。

      Data Set Creation Wizard ページが開きます。

    3. データセットの名前を入力します。
    4. サーバー設定を選択します。プロジェクトがデプロイされる場合は、サーバー設定を使用できます。
    5. 一覧から CUSTOM クエリーターゲットを選択します。
    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
      注記

      必要に応じて、データベースに合わせて SQL クエリーを変更できます。

    7. Data Set Creation Wizard を完了し、Test をクリックします。
    8. Save をクリックします。
  2. Business Central で、MenuDesignPages に移動します。
  3. Pages パネルで、New をクリックします。
  4. New Page ダイアログボックスでの Name フィールドに値を入力し、必要なスタイルを選択します。
  5. OK をクリックします。

    Page Editor で新しいページが開き、Heatmaps コンポーネントが Components パネルで利用可能なことを確認できます。

  6. Components パネルで Heatmaps コンポーネントを展開し、All Processes Heatmaps コンポーネントタイプをキャンバスにドラッグします。
  7. Displayer エディター ウィザードで Data タブをクリックして、新たに作成した KIE Server データセットを選択します。
  8. Data タブで、Columns フィールドから、EXTERNALIDPROCESSIDNODEID、および TOTAL_HITS を選択します。
  9. Process Selector ボックスで、要件に応じて Container および Process の値を選択します。
  10. Component Editor タブをクリックし、Server Template (必須) フィールドに値を入力します。

    注記

    Server Template の値にアクセスするには、DeployExecution ServersServer Configurations の順に移動します。

  11. Display タブをクリックし、要件に応じて ChartMarginsFilterRefresh、および Columns の値を編集します。
  12. +OK をクリックします。

    図56.4 複数プロセスの heatmap コンポーネントの例

    すべてのプロセス heatmap コンポーネント

プロセスダイアグラムの heat 情報が表示されます。

56.5.3. heatmap コンポーネントの実行

テスト目的のみで、Business Central 外で、内部 heatmap コンポーネントをローカルで実行できます。この API は、独自のコンポーネントをビルドするために使用できる外部コンポーネントの作成に使用されます。外部コンポーネントの詳細は、「外部コンポーネント」 を参照してください。

特定の heatmap コンポーネントを実行するには、以下の手順を実施します。

前提条件

  • システムに npm がインストールされている。npm のインストールの詳細は、Downloading and installing Node.js and npm を参照してください。
  • システムに Yarn がインストールされている。Yarn のインストールに関する詳細は、Yarn Installation を参照してください。
  • Appformer リポジトリー をクローンして Business Central 外のコンポーネントを実行している。

手順

  1. appformer/dashbuilder/dashbuilder-shared/dashbuilder-js ディレクトリーに移動します。
  2. dashbuilder-js ディレクトリーでターミナルを開き、以下のコマンドを入力します。

    yarn run init && yarn run build:fast

    dashbuilder-js/packages ディレクトリーには、以下のコンポーネントが存在することがわかります。

    • processes-heatmaps-component
    • process-heatmap-component
    • logo-component
    • heatmap-component
  3. dashbuilder-js/packages ディレクトリーに移動し、必要な heatmap コンポーネントを開き、ターミナルで以下のコマンドを入力します。

    yarn run start
  4. コンポーネントにアクセスするには、Web ブラウザーに http://localhost:9001/ と入力します。

    選択したコンポーネントが Web ブラウザーに表示されます。