目次:

はじめに

Extension Designer ライブラリにある Endpoint ノード、Component ノード、および Parameters ノードを使ってフローを作成できます。Component ノードと Parameters ノードにウィジェット定義が組み込まれており、Endpoint ノードはどのウィジェットを作成するかを選択できます。Component ノードとParameters ノードをインポートするには、Extension Designer メニューの [読み込み] > [ライブラリ] を選択し、 [Components] または [Parameters] からノードを選択します。

Extension Designer がウィジェットとデータの定義をすべて提供できるよう、エンドポイント ノードはウィジェットのデータを提供します。そのため、ユーザーは特定のエンドポイントや設定を記録する必要なく、スムーズにデータをダッシュボードで確認できます。 

各ノードの詳細については「ノードの使用」を参照してください。

Component ノードの設定

Component ノードは、カスタム ウィジェットおよびレポートの構造と定義を格納します。このノードは以下の 3 種類の定義から構成されます。

• HTML テンプレート 
• Javascript Controller
• CSS スタイル

HTML テンプレート

[HTML Template] タブでは、ダッシュボードまたはカスタム レポートでのコンポーネントの表示方法を定義します。このテンプレートは、$scope オブジェクトの下に Javascript Controller がどのプロパティを持つべきかを定義します。

JavaScript Controller

[JavaScript Controller] タブでは、HTML に従ってグラフをどのように表示するかを実装します。グラフの色とドリルダウン操作をコントロールします。

CSS スタイル

[CSS Styles] タブでは、コンポーネントに固有の CSS スタイルを定義します。CSS をカスタマイズする場合、一意な接頭辞を付けることを強く推奨します。そうしない場合、同じダッシュボードの他のウィジェットとスタイル定義が競合する可能性があります。

Parameter ノードの設定

Parameters ノードは、ウィジェットの追加ダイアログでウィジェットが含めることができるオプションを定義します。Parameters ノードには [Parameters] タブと [Labels] タブがあります。Parameter Values Endpoint を使って、どのオプションを利用可能にするかを制御できます (「カスタム パラメーターの作成」を参照)。また、ドロップダウン メニューに表示されるビルドをフィルタリングできます (「ターゲット/ベースライン ビルド設定のフィルタリング」を参照)。

[Parameters] タブ

[Parameters] タブでは、パラメーターのリストとそのデータ ソースを定義します。一部のパラメーターは、依存関係にリンクすることもでき、ビルド ID などのフィルターを設定できます。

[Labels] タブ

[Labels] タブでは、[ウィジェットの追加] または [ウィジェットの編集] ページでのパラメーター ラベルの表示方法を定義します。

パラメーターは DTP ダッシュボードで厳密に定義されています。必要に応じて、フィルター、期間、ベースライン/ターゲット ビルドといった既知のパラメーターを組み合わせて使用できますが、定義できるのはテキスト ボックス パラメーターだけです。Marketplace アーティファクトで定義された一部のパラメーター ノードには、プロファイル パラメーター定義があります (「モデル プロファイルの使用」を参照)。

ビルトインの Component と Parameters

Extension Designer には、ユーザー独自のカスタム ウィジェットを定義するためにすぐに使用できる Component と Parameters が用意されています。

ウィジェットとレポートごとに同じパラメーターのセットが定義されています。その理由は、ドリルダウン レポートのために異なるパラメーター セットが必要だからです。

各 Component ノードは、グラフを描画するために特定のペイロードを取るよう設定されています。すべての定義は [読み込み] > [ライブラリ] > [Sample Widgets] にあります。詳細についてはサンプル ウィジェットをインポートし、Sample Data ノードを確認してください。

ウィジェットまたはレポート フローをデプロイするたびに、更新を反映するためにダッシュボード ブラウザーを完全にリフレッシュする必要があります。コンポーネントとパラメーターの定義は、ダッシュボードがロードされるときにだけ更新されます。ウィジェットをリフレッシュしても、コンポーネントやパラメーターに変更は反映されません。ただし、データ フローで作業している場合、ウィジェットだけをリフレッシュして変更を確認できます。

Pie Chart ウィジェットの新規作成

このセクションでは、Pie Chart サンプル ウィジェットを使って新規にチャート ウィジェットを作成する方法について説明します。 

1. Extension Designer メニューから [読み込み] > [ライブラリ] > [Sample Widgets] > [Pie Chart] サンプルを選択して、任意のサービスの新しい [フロー] タブにインポートします。

2. Example Pie Chart エンドポイント ノードをダブルクリックして、その設定を確認します。このノードはウィジェットの実装を定義します。  
   
    
   
   以下のフィールドを変更してこのサンプルウィジェットを設定できます。 

   Name	DTP ダッシュボードに表示されるウィジェット名。
   UUID	エンドポイントの固有の識別子。フローにエンドポイント ノードをドロップしたときに自動生成されます。
   Type	[Type] ドロップダウン メニューからエンドポイントの種類を選択します。 Widget: DTP ダッシュボード ウィジェットを指定します。この値を選択すると、[size]、[category]、[component]、および [parameter] フィールドが表示されます。ウィジェットのサイズの詳細については「ダッシュボード グリッド」を参照してください。 Report: DTP ダッシュボードのカスタム レポートを指定します。この値を選択すると、[component] および [parameter] フィールドが表示されます。 Practice: Practice: Policy Center のプラクティスを指定します (「ポリシーの定義」を参照)。この値を選択すると、[component] および [parameter] フィールドが表示されます。 General: 一般的な REST エンドポイントを指定します。エンドポイントで GET 操作と POST 操作の両方を使用できます。エンドポイントの URL を取得するには、[サービス カテゴリ] ページ を開いて URLを コピーします。
   Category	DTP ダッシュボード ウィジェットのカテゴリを定義します。一般的に、値は "custom" または "process intelligence" にします。新しい名前を入力して新規にカテゴリを作成できます。独自のカテゴリ名を作成した場合、ウィジェットのヘッダーの色は灰色になります。
   Component:	提供するコンポーネントを指定します。同一のタブにデプロイされたコンポーネントがドロップダウン メニューに表示されます。
   Parameter	DTP ダッシュボードに提供するパラメーター セットを指定します。同一のタブにデプロイされたすべてのパラメーターがドロップダウン メニューに表示されます。
   Description	エンドポイントの説明を指定します。この説明は DTP ダッシュボード、[ウィジェットの追加] ページ (「ウィジェットの追加」を参照)、および Extension Designer のカテゴリ ページでエンドポイントの説明として使用されます。

3. [UUID] フィールドのリフレッシュ ボタンをクリックします。この操作は、新しいウィジェットが他のエンドポイントと競合しないようにします。
4. ウィジェットをデプロイします。
5. 新しい Endpoint ノードをフローにドロップし、以下の画像に従って設定します。
   
6. 新しい My Own Widget Endpoint ノードを Sample Data function ノードと連結します。
    
7. フローをデプロイします。
8. Report Center でダッシュボードが開いている場合はダッシュボードをリフレッシュし、[ウィジェットの追加] をクリックします。[ウィジェットの追加] オーバーレイに [My Own Category] カテゴリと My own Widget が表示されます。
   
9. ウィジェットの追加を完了して My own Widget をダッシュボードに表示します。
   

Endpoint の出力リンク

Endpoint のノードの出力リンクは、ウィジェットのデータソースにリンクします。出力として [出力] カテゴリの http response ノードを使用してください。

Widget Error Messages ノード

このノードは、エンドポイントへの出力として、構造化された msg.payload を提供します。DTP ダッシュボードはウィジェットのデータとしてレスポンスを使用します。すべてのサンプル ウィジェットに、実際のデータを持った Sample Data function ノードとペイロード スキーマ用の No Data functionノードが用意されています。No Data ノードは、ウィジェットが適切にメッセージを表示できるよう、ウィジェットにエラー メッセージを送る方法を実演します。

ダッシュボードにウィジェットを追加した後にエンドポイントを削除した場合、DTP はウィジェット定義が失われたことを検出し、以下のメッセージを表示します。

同じ UUID で Endpoint ノードを元に戻し、ダッシュボードをリフレッシュします。元のウィジェットが表示されます。

エラー メッセージの設定

エラー メッセージは、以下の Standard Error Object の書式を使用します。これはウィジェットに適用されるほか、ウィジェットとやり取りするすべてのフローに適用されます。

msg.payload = {
    error: {
        title: "error message title",
       message: "detailed error message"
    }
} 

このエラー オブジェクトをカスタム ウィジェットまたはレポートに戻す場合は、以下を msg オブジェクトに追加してください。

msg.statusCode = 400;

円グラフ カスタム レポートの作成

レポートの概念はウィジェットと同じですが、レポートのエンドポイントの種類にはサイズ制限がないため、ウィジェットよりも多くの情報を格納できます。複数のコンポーネントを組み合わせて 1 つの Report コンポーネントを作成し、複雑なレポートを生成できます。

すべてのコンポーネントはこのチュートリアルのウィジェットのために最適化されています。 ここでは、レポート用の新しいコンポーネントを追加し、円グラフを使用したカスタム レポートを作成する方法について説明します。

新しいカスタム レポートを作成するために、サービスにさらに部品を追加する必要があります。

1. [読み込み] > [ライブラリ] > [Parameters] > [Build Delta - Report] を選択し、新規に Build Delta - Report Parameters ノードを作成します。この Parameters ノードは使用しませんが、後で内容の違いを確認してください。
2. Ctrl + C キーで Pie Chart component ノードをコピーし、Ctrl + V キーでフローに貼り付けます。ノードの名前を "Pie Chart Component for Report" に変更します。
3. My own Widget endpoint ノードをコピーして貼り付け、名前を "My Own Report" に変更します。
4. Sample Data ノードをコピーして貼り付け、My Own Widget ノードと My Own Report ノードの両方に Sample Data ノードが存在するようにします。
   
5. My Own Report ノードをダブルクリックし、[Component ] ドロップダウン メニューから [Pie Chart Component for Report] を選択します。  
6. [Parameter] ドロップダウン メニューから [Build Delta - Report] を選択します。
   
7. Endpoint ノードの UUID をコピーします。これはレポートの URL の一部です。
   
   <DTP URL>/grs/dtp/dashboards/reports/<Report Endpoint UUID>
   
   この URL を詳細レポートに使用できます。
8. My Own Widget に連結した Sample Data ノードをダブルクリックし、SOAtest カテゴリの drilldownUrl をエンドポイントの URL で更新します。
   

ユーザーが円グラフの SOAtest セクションをクリックすると、カスタム レポートが表示されます。 必要に応じて、この URL に独自のパラメーター リストを使用できます。この時点でレポートをテストした場合、Controller 例外がスローされます。なぜなら、コンポーネントの一部がウィジェット用に設計されているからです。この問題は簡単に解決できます。

1. レポートの Pie Chart Component ノードをダブルクリックします。
2. [JavaScript Controller] タブをクリックします。
   エラーは 23 行目で発生しています。
   $scope.options.legend
   コンポーネントはウィジェットのサイズを探しています。 ウィジェットのロジックは、X 軸が Y 軸よりも大きい場合に凡例を追加することです。これはレポートなので、スペースの制限なく凡例を表示できます。 
3. 23 行目を legend に変更します。
   { visible: true}
4. [Done] をクリックして [デプロイ] をクリックします。

カスタム レポートは以下のようになるはずです。

Pie Chart Component for Report にさらに情報を追加できます。複雑なカスタム レポートの作成については、Change Based Testing、DTP File Based Licensing Report、Modified Coverage、および Test Failures by Build アーティファクトのエンドポイントを参照してください。

カスタム パラメーターの作成

Parameter Values Endpoint を使用するフローを作成して、Widget エンドポイントに送ることができるパラメーターを拡張できます。Parameter Values Endpoint の出力はさまざまな方法で制御できます。このチュートリアルでは、値の静的なリストを生成します。

1. フローに Endpoint ノードを追加し、設定を行うためにダブルクリックします。
2. [Type] ドロップダウン メニューから [Parameter Values] を選択します。
   
   
   
   
3. フローに Function ノードを追加し、Parameter Values Endpoint に連結します。
4. Function ノードをダブルクリックしてその内容を編集します。以下の画面では、エンドポイントから返す Parasoft 製品の配列を作成しています。
   
   
   
   リターン ペイロードの形式は配列でなければなりません。各要素は、パラメーター label および value の値を持つオブジェクトです。パラメーター label は、ウィジェットの構成でドロップダウン メニューに表示される内容を決定します。パラメーター value は、ウィジェット エンドポイントに返されるドロップダウン オプションの実際の値を決定します。

5. Function ノードを作成した後に HTTP Response ノードを追加します。 

   API ノードを使って、Parameter Values Endpoint の値を動的に生成します。

   たとえば、異なるたくさんのプロファイルを持つモデルがある場合、モデルのすべてのプロファイルを検索するよう Parameter Values Endpoint を設定できます。 

6. サンプルの Component および Parameters ノードをインポートしてウィジェットを作成します (「Component ノードの設定」を参照)。Parameter Values Endpoint を使用するために、Component ノードでの操作はこれ以上必要ありません。 

7. Parameters ノードを開き、[Parameters] タブで次の JSON オブジェクトを追加します。
   
   

   [
   	{
   		"apiParameter":"processIntelligence",
   		"type":"dropdown",
   		"title":"Product",
   		"name":"product",
   		"uuid":< ステップ 2 で作成した Parameter Values Endpoint の UUID >
   	}
   ]

    apiParameter に割り当てられた processIntelligence の値は、カスタム パラメーター ドロップダウンの使用を意味します。エンドポイント ノードを開くことで、uuid の値を取得できます。正しい UUID がない場合、ウィジェットはパラメーター値のリストを取得できません。

8. DTP にフローをデプロイします。

カスタム パラメーター値のサンプルの使用

Extension Designer には、Parameter Values Endpoint を使用するウィジェットのサンプルが同梱されています。サンプルを使って動作を試すことができます。

1. ライブラリから [読み込み] > [ライブラリ] > [Examples] > [Custom Parameter Values Example] を選択し、フローにサンプルをインポートします。
   
   
   
   
2. [デプロイ] をクリックして DTP ダッシュボードをリフレッシュします。 
3. Custom カテゴリからダッシュボードに Custom Parameter Values Widget を追加します。設定を見ると、静的に生成された Parasoft 製品のリストが [Product ] ドロップダウン メニューに表示されることが分かります。
   
    

ターゲット/ベースライン ビルド設定のフィルタリング

ターゲット ビルドとベースライン ビルドの設定をフィルタリングするようにカスタム ウィジェットを構成できます。そうすることで、ダッシュボードにウィジェットを追加するときに、より簡潔なオプションを表示できます。ビルド設定をフィルタリングするには、DTP プロジェクトに少なくとも 2 つのビルドが必要です。１ つはターゲット用、１つはベースライン用です。さらに、ビルドのデータがアーカイブされていなければなりません (詳細については「ビルドのロックとアーカイブ」を参照)。DTP はデフォルトで最新の 2 つのビルドをアーカイブしますが、設定に含めるビルドは手動でアーカイブするべきです。 

フローに Parameters ノードを追加し、[Parameters] タブで、type に targetBuildDropdown および/または baselineBuildDropdown を設定した JSON オブジェクトを含めます。 

さらに詳細なフィルタリングを可能にするオプションを使って、targetBuildDropdown と baselineBuildDropdown パラメーターを設定できます。

フィルター ビルド パラメーターのサンプルの使用

Extension Designer には、ビルドをフィルタリングするウィジェットのサンプルが同梱されています。サンプルを使って動作を試すことができます。

1. ライブラリから [読み込み] > [ライブラリ] > [Examples] > [Filter Build Example] を選択し、フローにサンプルをインポートします。
   
    
   
   
2. 「ターゲット/ベースライン ビルド設定のフィルタリング」で説明するように、アーカイブしたビルドが少なくとも 2 つプロジェクトにあることを確認します。
3. Filter Builds - Widget Parameters ノードをダブルクリックし、[Parameters] タブで JSON オブジェクトに変更を加えます。
4. サンプルをデプロイします。 
5. ダッシュボードにウィジェットを追加します。Parameters ノードの設定に一致するビルドだけがウィジェットの設定に表示されます。