| Oracle® Enterprise Manager Cloud Control拡張プログラマーズ・リファレンス 13c リリース2 E92082-01 |
|
 前 |
 次 |
検出、監視および自動化の導入を介して、新規ドメインの管理サポートするように、Enterprise Managerを拡張できます。Enterprise Managerフレームワークがこれらの管理機能に関連する一連の強力な機能を提供する際には、ほとんどのプラグイン開発者は、ドメインに適した方法で、管理機能を公開する必要があります。Enterprise Managerのメタデータ・プラグイン・カスタム・ユーザー・インタフェース(MPCUI)機能によって、この機能が提供されます。
この章の構成は、次のとおりです。
プラグイン開発者は、ターゲット・タイプを管理するカスタム・ユーザー・インタフェースの定義について、次の手順に従う必要があります。
次のようなターゲットのモデルを決定します。
他のターゲットとのアソシエーション
パフォーマンス・メトリックおよび構成データ
ターゲットのサブコンポーネント
管理タスクおよび管理操作
次のような、MPCUIライブラリによって提供される機能を把握しておきます。
使用可能なUIコンポーネント(ページ、グラフなど)
使用可能なサービス(メトリック・データ、SQL問合せ、アソシエーション、タスク実行など)
サンプル実装およびその構築方法
次に基づいたUIを設計します。
重要なデータおよびタスク
MPCUIおよびJavaScript Extension Toolkit (JET)によって提供される機能
これには、ページの作成とそのコンテンツの説明、および、適切な管理機能を公開していることを確認するためのドメイン・エキスパートによるページのレビューが含まれます。
設計でのアイテム用のターゲット・メタデータを作成します(手順1を参照)。このメタデータは、後でUIを実装するために必要です。ターゲット・メタデータの詳細は、このガイドの関連する章を参照してください。
UIで表示される構成データを取得するために必要なSQL問合せを開発します。通常、これらの問合せは、構成CM$ビューを参照します。
構成データの詳細は、「ターゲット構成データの収集」を参照してください。
ページ、ウィザードおよびダイアログなどのUIを構成するアクティビティを特定および定義します。統合メタデータは、これらのアクティビティを定義します。
詳細は、「統合メタデータの定義」を参照してください。
MPCUIおよびJETを使用してカスタム・ユーザー・インタフェースを実装します。
詳細は、「Oracle JavaScript Extension Toolkit (Oracle JET)」を参照してください。
次の手順を実行します。
NetBeansまたは同等のIDEのコピーを取得します。
注意:
NetBeansは必須ではありませんが、サンプルは、サンプルとNetBeansプロジェクト作成フローを関連付ける形式(nbm)で使用可能です。別のIDEで使用する場合は、サンプル・ソースをzipファイルで入手することもできます。カスタムUIのソース・コードを保持するプロジェクトを作成します。EDKに含まれているサンプル・プロジェクトをテンプレートとして使用するか、MPCUI JSライブラリおよびすべてのJETライブラリが含まれている(ただし、サンプルの実装済ページはいずれも含まれていない) MPCUI Starterプロジェクトを使用できます。
詳細は、「NetBeansでのMPCUIの開発」を参照してください。
MPCUIメタデータ・ファイルを作成します。これは、カスタムUIに含まれる一連のアクティビティを定義します。
カスタムUIによって使用されたSQL文
UIで定義された別のページへのナビゲーションをサポートするために含めるメニュー項目
カスタムUI用に構築するJSライブラリへの参照。
UI内をナビゲートするためにMPCUIによって使用されるアクティビティ/ダイアログ/トレインの定義。
詳細は、「MPCUIメタデータ・ファイルの作成」または「アプリケーション・アクティビティの定義」を参照してください。
各アクティビティ(ページやダイアログなど)を開発します。通常、各ページには、ページ・クラス(HTMLファイル)およびコントローラ・クラス(JavaScriptで記述され、ActivityControllerクラスを拡張する)が含まれています。
詳細は、「ページの定義」、「ダイアログの定義」および「トレインおよびトレイン・ページの定義」を参照してください。
注意:
ビルドおよびテストの前に、少なくとも1つのプラグインのバージョンをデプロイする必要があります。デプロイされたプラグインには、ターゲット・メタデータ(メトリックおよび構成データなど)が含まれている必要があります。ただし、プラグインには、テスト用にMPCUIメタデータを含める必要はありません。構築したMPCUIメタデータ・ファイルおよびJSライブラリを含めるようプラグインを変更します。
プラグイン・ステージング領域のoms/metadata/mpcuiディレクトリに、これらのファイルを置きます。
詳細は、「プラグインとのMPCUI実装のパッケージ化」を参照してください。
Enterprise Managerコンソールからターゲットのホームページにアクセスすることによって、カスタムUIをテストします。
これにより、Enterprise ManagerアプリケーションのコンテキストにカスタムUIがロードされ、Enterprise Managerアプリケーションおよびターゲット・メニューが表示されます。
APIリファレンス: これはパートナEDKディレクトリのdoc/sdk_api_ref.htmlの下にあります。
HostSampleのプラグイン例: Oracleが提供するサンプル・プラグインが数多くのMPCUI機能の例を提供しています。これはEDKのsamples/plugins/HostSampleの下にあります
ベースHTML/JS/JETコンポーネント(ボタンやラベルなど)も含めることができます。OracleはJETライブラリを開発しています。次のリンクからオンラインのJETライブラリのドキュメントを確認できます。
http://www.oracle.com/technetwork/developer-tools/jet/overview/index.html
MPCUIフレームワークを使用する際に、理解しておく必要がある重要な概念がいくつかあります。これらの概念は、この項で簡単に定義し、以降の項で詳しく説明します。
MPCUIメタデータ・ファイルには、UIに含まれている一連のページ、ダイアログおよびトレインを定義するために使用される、UIのブートストラップが含まれます。MPCUIフレームワークはこの情報を使用して、UI要素間のナビゲーションの管理など、UIを駆動します。
これは、UIの構成を単純化し、より大規模なEnterprise Managerコンソールに必然的に適合するようにするためにMPCUIフレームワークによって提供される構造です。通常、これは、作成したHTMLファイルを参照します。
MPCUIフレームワークは、ページ間の単純なナビゲーションを提供し、ページをブラウザ履歴およびEnterprise Managerメニュー・システムに統合して、アプリケーション内でページを管理します。
MPCUIによって提供されるデータ・サービスには、メトリック・データ、アソシエーション、ターゲット・プロパティなどを取得するためのデータ・サービスが含まれます。これには、プラグイン内の名前付きSQL文を実行するために使用できるSQLDataServiceが含まれています。
MPCUIには、プラグイン・コードによって管理されたターゲットに対する管理アクションを実行するために使用できるジョブ・サービスおよびRemoteOpサービスが含まれています。
ジョブ・サービスは、プラグインにジョブ・タイプ定義を含める必要があります。
RemoteOpサービスは、プラグイン・フレームワークにスクリプトを登録する必要があります。
カスタム・プラグインUIは、HTML/JSを使用して作成できます。
プラグインを使用してカスタムUIを提供するには、表示するためのHTMLページおよびプログラム・コントローラ・ロジック用のJSを提供する必要があります。この実装で可能となる機能はJETで設定され、これは、ページやページのスイートの開発を容易にする様々な実装および標準を提供します。
MPCUIフレームワークの目標の1つは、これが実装されるHTML/JS/JETフレームワークの上に単純化された抽象のレイヤーを提供することですが、HTML/JS、JETフレームワークおよびJETが依存するJSライブラリをよく理解しておく必要があります。
データまたはイベントのより複雑な処理を必要とする場合は、JavaScriptを使用してUIの一部を開発する必要がある場合があります。すべてのコントローラ・ロジックは、JSを使用して実装されます。
注意:
通常の実行時用の縮小バージョンのJSライブラリ、およびデバッグ・バージョンのJSライブラリも提供できます。その使用は、ページの問合せパラメータの設定でトリガーできます。MPCUIが含まれる各プラグインは、MPCUIメタデータ・ファイルを含める必要があります。
メタデータ・ファイルの特徴は次のとおりです。
MPCUIで必要なSQL問合せを定義します。
MPCUIで必要なメニュー項目を定義します。
ターゲットUIのUIメタデータを格納します
検出のUIメタデータを格納します
ターゲット・アイコン、ターゲット・ナビゲータ、およびシステムのホームページのオプションを指定します。
このファイルの構文の詳細は、拡張開発キット(EDK)仕様にあるXSDファイルを参照してください。
次の例に、メタデータベースのUIのMPCUIメタデータ・ファイルの概要およびUIメタデータ・ファイルの概要を示します
例: MPCUIメタデータ・ファイル
<CustomUI target_type="demo_hostsample"
xmlns="http://www.oracle.com/EnterpriseGridControl/MpCui">
<!-- SqlStatements defines the individual SQL statements that are used by
the MPCUI code. Each statement is identified by a unique name and
can only be referenced by that name from the MPCUI code itself -->
<SqlStatements>
<Sql name="INSTANCE_INFO">
select * from...
</Sql>
</SqlStatements>
<UIMetadata>
<Integration>
.....
</Integration>
</UIMetadata>
<!-- MenuMetadata defines the set of menu items that should appear in the
target menu on the homepage and specifies which of the MPCUI pages
should be accessed from that menu item -->
<MenuMetadata>
<menu label="Host Sample">
<menuItem>
<command .. />
</menuItem>
</menu>
</MenuMetadata>
<EmuiConfig>
<context-pane-visible>true</context-pane-visible>
<large-icon>dhs_large.png</large-icon>
<small-icon>dhs_small.png</small-icon>
<use-framework-homepage>true</use-framework-homepage>
</EmuiConfig>
</CustomUI>
<Integration>タグ内はすべて、カスタムUIを実行するメタデータを定義します。
表9-1では、メタデータを定義する重要な要素について説明します。
表9-1 検出メタデータを定義するために使用する重要な要素
| 要素 | 説明 |
|---|---|
|
|
|
<UIMetadata>
<!-- The meta-data only definition must include an Integration element
which defines the set of activities (pages, dialogs, etc.) that make up
the application -->
<Integration>
...
</Integration>
</UIMetadata>
|
|
|
|
|
|
|
MPCUIメタデータ実装の完全な例は、拡張開発キット(EDK)で提供されるデモ・サンプル実装(data/metadata/stage/demo_hostsample_uimd.xml)を参照してください。
統合メタデータを使用して、一連のページを指定し、そのページ間のタスク・フロー(必要な場合)を定義します。
例: 統合メタデータ
<Integration>
<!--
The mpcuiLibVersion determines what UI technology stack your code
runs against. The mpcuiLibVersion is backed by a specific version
of MPCUI code, but it is also backed by a specific version of JET
and the libraries that support JET (knockout, jquery, etc.)
Setting this version guarantees that your code will perform correctly
against this version of MPCUI and the version of JET which backs it.
This defaults to MPCUI version 13.2.0.0.0 (backed by JET 2.3.0).
-->
<mp:Integration mpcuiLibVersion="13.2.0.0.0"
xmlns:mp="http://www.oracle.com/EnterpriseGridControl/MpCuiIntegration"
>
<!--
The sourceContext is the deploy time settings which help the MPCUI identify
where certain aspects of your UI are located so that they may be installed to
the Repository.
These settings are simply a utility to keep the notation in the rest of the
file more brief and closer to what was specified in the integration file from
the Flex implementation.
-->
<mp:sourceContext>
<!--
The jsRoot is used as a prefix to any of the jsLibraries or controller
classes you may specify. It is only used for controller classes in the
case of an exploded deploy (where each file goes in separately). This
is not recommended for performance reasons. It is much more efficient
to package all of your code, JS and HTML, as a library and deploy a single
file.
-->
<mp:jsRoot path="js"/>
<!--
The viewRoot is used as a prefix to any of the activities class files
(HTML, not controllers). Only used if broken out files are used instead
of a JS library for delivering a UI. It is much more preferable and
performant to specify a library, but this is an option as well.
eg: mp:viewRoot path="ui/view"
-->
<!-- The bundleRoot is used as the prefix to any path specified for a
resourceBundle -->
<mp:bundleRoot path="rsc"/>
<!-- The cssRoot is used as the prefix to any path specified for a cssFile
eg: mp:cssRoot path="ui/view/css"
-->
<mp:cssRoot path="css/dhs"/>
</mp:sourceContext>
<!--
Any css files deployed with the plug-in will be loaded in the index.html
file.
-->
<mp:cssFiles>
<mp:cssFile id="myCss" path="dhs.css" version="13.1.0.1.0"/>
</mp:cssFiles>
<!--
Any JS libraries used by the UI would be declared here. This includes any
libraries the UI may depend upon outside of the ones already required by
the MPCUI and JET (so if you used a 3rd party library). It also includes
the UI of the plug-in if it is packaged as a library.
The entries here are used to dynamically generate the main.js file used by
the UI at runtime. So any jsPath's listed here will be mapped to that
library in the paths at the top of the main.js file:
requirejs.config({
paths:
{
'knockout': 'libs/knockout/knockout-3.4.0',
'jquery': 'libs/jquery/jquery-2.1.3.min',
<jsPath.path>:<jsLibrary>
...
Any jsShims listed here will be added as so:
<jsShim.name>:
{
exports: '<jsShim.exports>',
deps: ['<jsShim.deps[0]', '<jsShim.deps[1]',...]
}
jsShim.deps is a simple comma-delimited list of strings, which is parsed
to produce the output above.
And any jsModules listed here will be added to the require clause which
instantiates the MPCUI application at the end of the main.js file.
There will be a default list of modules specified, but if you need any
additional ones you will have to list them here. They aren't all added
by default for runtime performance concerns.
require([
'ojs/ojcore',
'knockout',
'jquery',
'emx/intg/MpAppLoader',
'signals',
'ojs/ojmodel',
'ojs/ojknockout',
<jsModule.module>,
...
-->
<mp:jsLibraries>
<!--
When the main.js file is generated, each activity controller is put in the
paths property mapping either to the jsLibrary marked as the default or
to the library it is specifically noted for (jsPath.activityId)
-->
<mp:jsLibrary id="pluginLib" path="libs/dhs/demo_hostsample-min.js"
debugPath="libs/dhs/demo_hostsample-debug.js"
version="13.2.0.0.0" isDefault="true">
<mp:jsModule module="ojs/ojmodel"></mp:jsModule>
<mp:jsModule module="ojs/ojknockout"></mp:jsModule>
<mp:jsModule module="ojs/ojknockout-model"></mp:jsModule>
<mp:jsModule module="ojs/ojcomponents"></mp:jsModule>
<mp:jsModule module="ojs/ojarraytabledatasource"></mp:jsModule>
<mp:jsModule module="ojs/ojdatetimepicker"></mp:jsModule>
<mp:jsModule module="ojs/ojtable"></mp:jsModule>
<mp:jsModule module="ojs/ojdatagrid"></mp:jsModule>
<mp:jsModule module="ojs/ojchart"></mp:jsModule>
<mp:jsModule module="ojs/ojgauge"></mp:jsModule>
<mp:jsModule module="ojs/ojlegend"></mp:jsModule>
<mp:jsModule module="ojs/ojselectcombobox"></mp:jsModule>
<mp:jsModule module="ojs/ojsunburst"></mp:jsModule>
<mp:jsModule module="ojs/ojthematicmap"></mp:jsModule>
<mp:jsModule module="ojs/ojtreemap"></mp:jsModule>
<mp:jsModule module="ojs/ojvalidation"></mp:jsModule>
<mp:jsModule module="ojs/ojslider"></mp:jsModule>
<mp:jsModule module="ojs/ojpagingcontrol"></mp:jsModule>
</mp:jsLibrary>
<!--
There can be only 1 default library. Any classes that aren't attached to
another library will be attached to the default library.
If not the default, you can associate an activity with the library with:
mp:jsPath id="activityId"
and the appropriate path will be added for that activity or the explicit
path can be set:
mp:jsPath path="dhs/MyController"
Shims may also be specified:
mp:jsShim name="myshim" exports="myshim" deps="jquery, ojs/ojcore"
-->
</mp:jsLibraries>
<!--
Resource bundles used by this application. They can be declared
for the entire application or on a page-by-page basis as desired
-->
<mp:resourceBundles>
<mp:MpBundle name="demoUiMsg" path="oracle.samples.xohs.rsc" isDefault="true"/>
<mp:MpBundle name="demoJobMsg" path="oracle.samples.xohs.rsc"/>
</mp:resourceBundles>
<mp:activities>
<!--
Each page definition must have an id that is *different* than the page class,
and must have a pageClass that references the HTML file that lays out the
page. If the page includes a custom controller to do event handling then the
pageControllerClass is set to point to the JavaScript class that defines
the PageController extensions for this page. Finally, one of the pages in
the list should include the "isDefaultPage='true'" designation to indicate
the 1st page to be loaded.
-->
<!-- Pages -->
<mp:PageActivityDef id='homePg' label='Home' pageClass='dhs/HomePage'
pageControllerClass='dhs/HomePageController'
isDefaultPage="true" />
<mp:PageActivityDef id='perfPg' label='Performance' pageClass='dhs/PerfPage'
pageControllerClass='dhs/PerfPageController' />
<mp:PageActivityDef id='adminPg' label='Administration'
pageClass='dhs/CredentialsPage'
pageControllerClass='dhs/CredentialsPageController'/>
<mp:PageActivityDef id='filesystemsPg' label='Filesystems'
pageClass='dhs/FilesystemsPage'
pageControllerClass='dhs/FilesystemsPageController'/>
<mp:PageActivityDef id='processesPg' label='Processes'
pageClass='dhs/ProcessesPage'
pageControllerClass='dhs/ProcessesPageController' />
<mp:PageActivityDef id='collectionsPg' label='Collections'
pageClass='dhs/CollectItemPage'
pageControllerClass='dhs/CollectItemPageController' />
<mp:PageActivityDef id='homeExtModelPg' label='Home (Ext Model)'
pageClass='dhs/HomePageExtModel'
pageControllerClass='dhs/HomePageModelController' />
<!-- Trains -->
<mp:TrainActivityDef id='addNewUserEmbeddedTrain' label='Add New User'>
<mp:stepActivities>
<mp:TrainStepActivityDef id='anuStep1' label='User Info'
pageClass='dhs/user/UserInfo'
pageControllerClass='dhs/user/AddNewUserTrainStepController'/>
<mp:TrainStepActivityDef id='anuStep3' label='Credentials'
pageClass='dhs/user/Credentials'
pageControllerClass='dhs/user/AddNewUserTrainStepController'/>
<mp:TrainStepActivityDef id='anuStep2' label='Expiry'
pageClass='dhs/user/Expiry'
pageControllerClass='dhs/user/AddNewUserTrainStepController'/>
<mp:TrainStepActivityDef id='anuStep4' label='Schedule'
pageClass='dhs/user/Schedule'
pageControllerClass='dhs/user/AddNewUserTrainStepController'/>
<mp:TrainStepActivityDef id='anuStep5' label='Notifications'
pageClass='dhs/user/Notifications'
pageControllerClass='dhs/user/NotificationsTrainStepController'/>
<mp:TrainStepActivityDef id='anuStep6' label='Confirmation'
pageClass='dhs/user/Confirm'
pageControllerClass='dhs/user/AddNewUserTrainStepController'/>
</mp:stepActivities>
</mp:TrainActivityDef>
<!-- Add new filesystem train activity definition -->
<mp:TrainActivityDef id='addNewFSCreateTrain' label='Add New Filesystem'
trainControllerClass='dhs/filesystem/AddNewFilesystemTrainController'>
<mp:stepActivities>
<mp:TrainStepActivityDef id='anfStep1' label='Filesystem Info'
pageClass='dhs/filesystem/FilesystemInfo'
pageControllerClass='dhs/filesystem/AddNewFilesystemStepController'/>
<mp:TrainStepActivityDef id='anfStep2' label='Credentials'
pageClass='dhs/filesystem/Credentials'
pageControllerClass='dhs/filesystem/AddNewFilesystemStepController'/>
<mp:TrainStepActivityDef id='anfStep3' label='Confirmation'
pageClass='dhs/filesystem/Confirm'
pageControllerClass='dhs/filesystem/AddNewFilesystemStepController'/>
</mp:stepActivities>
</mp:TrainActivityDef>
<!--
Dialog activities are defined similar to pages and may also define parameters
that should be set when accessing the dialog through invokeActivity calls.
If these parameters are specified, then an input object can be provided and
the framework will attempt to retrieve the values for these properties from
the input. This is often done by calling the "bean()" method to construct
the context but any object that includes the required properties may be
passed
-->
<mp:DialogActivityDef id='metricHistExtModel' label='Metric History'
dialogClass='dhs/MetricHistoryExtModelDlg'
dialogControllerClass='dhs/MetricHistoryDlgModelController'>
<mp:inputParams>
<mp:InputParam name='targetName'/>
<mp:InputParam name='targetType'/>
<mp:InputParam name='metricName'/>
<mp:InputParam name='metricColumns'/>
<mp:InputParam name='timePeriod'/>
<mp:InputParam name='title'/>
</mp:inputParams>
</mp:DialogActivityDef>
<mp:DialogActivityDef id='metricHistory' label='Metric History'
dialogClass='dhs/MetricHistoryDialog'
dialogControllerClass='dhs/MetricHistoryDialogController'>
<mp:inputParams>
<mp:InputParam name='targetName'/>
<mp:InputParam name='targetType'/>
<mp:InputParam name='metricName'/>
<mp:InputParam name='metricColumns'/>
<mp:InputParam name='timePeriod'/>
<mp:InputParam name='title'/>
</mp:inputParams>
</mp:DialogActivityDef>
<mp:DialogActivityDef id='searchProcDialog' label='Search Processes'
dialogClass='dhs/SearchProcessDialog'
dialogControllerClass='dhs/SearchProcessDialogController'>
<mp:inputParams>
<mp:InputParam name="searchState" required="false" />
</mp:inputParams>
</mp:DialogActivityDef>
<mp:DialogActivityDef id='credentialsDialog' label='Credentials'
dialogClass='dhs/CredentialsDialog' >
<mp:inputParams>
<mp:InputParam name="credState" required="false" />
</mp:inputParams>
</mp:DialogActivityDef>
<mp:DialogActivityDef id='fsCreateTrainDialog' label='Add New Filesystem'
dialogClass='dhs/filesystem/FSCreateTrainDialog'
dialogControllerClass="dhs/filesystem/FSCreateTrainDialogController" />
<mp:DialogActivityDef id='rpmInfoDialog' label='RPM Info'
dialogClass='dhs/RPMInfoDialog'
dialogControllerClass="dhs/RPMInfoDialogController" />
</mp:activities>
</mp:Integration>
<Integration>
ページ実装への参照は前のセクションのメタデータで定義されていますが、XMLファイルのそのセクションに明確に追加されないかぎり、ターゲット・インスタンス固有のメニューには表示されません。
ページへのアクセスに使用できるメタデータでメニュー項目を定義
MenuMetadata項目には、MPCUIメタデータで定義されたアクティビティへのナビゲーションを定義するmenuItem要素が含まれます。たとえば、メタデータが次のページ定義を含む場合です。
<mp:PageActivityDef id='processesPg' label='Processes' …/>
MenuMetadata要素でmenuItemを指定して、前のページへのナビゲーションを許可します。
<menuItem>
<command id="processesPg" label="Processes"
class="oracle.sysman.emSDK.pagemodel.menu.EMNavigationMenuCommand
partialSubmit="true" >
<property name="actionOutcome" value="goto_core-mpcustom-nav" /><property name="paramsMap"><mapEntry name="pageid" value="processesPg" />
</property>
</command>
</menuItem>
menuItem要素のキー・プロパティは次のとおりです。
コマンド要素内のlabel。
labelは、ホームページ上のターゲット・メニューに表示されるラベルを指定します。前述の例では、メニュー項目Processesが含まれます。
actionOutcomeプロパティに指定された値。
actionOutcomeは、SWFファイルを含むページのビューIDを指定します。
MPCUIフレームワークを使用してビルドされたカスタムUIの基礎は、HTML/JSベースのアプリケーションで構築する必要があります。このプロセスを単純化するために、フレームワークは一連のベース・クラスおよび構造を提供します。
MPCUIメタデータの統合メタデータは、MPCUIアプリケーションの中核となります。MRSでは、これを使用してカスタムUIを正しくデプロイします。ランタイムMPCUIラッパー・ページでは、これを使用してページ間の関係を定義します。これは、MPCUIページのメニュー項目の移入に使用されます。(また、これらの最後の2つについては、IDE外で実行するときにスタンドアロン・コンソールで同じことを行うために使用します)。
MPCUIフレームワークは、アプリケーションの構造を理解するために統合メタデータと相互作用し、フレームワークが、アプリケーションを構成するUI要素の表示と、UI要素間のナビゲーションの背後のプライマリ・ドライバとなることを許可します。
アプリケーション・アクティビティは、MPCUI統合メタデータにのみ登録されます。
例: アプリケーション・アクティビティ
<Integration>
<mp:Integration mpcuiLibVersion="13.2.0.0.0"
xmlns:mp="http://www.oracle.com/EnterpriseGridControl/MpCuiIntegration"
>
...
<!-- The integration class defines the pages, dialogs
and trains included in the application -->
<mp:activities>
<!--
Each page definition must have an id that is *different* than the page class,
and must have a pageClass that references the HTML file that lays out the
page. If the page includes a custom controller to do event handling then the
pageControllerClass is set to point to the JavaScript class that defines
the PageController extensions for this page. Finally, one of the pages in
the list should include the "isDefaultPage='true'" designation to indicate
the 1st page to be loaded.
-->
<!-- Pages -->
<mp:PageActivityDef id='homePg' label='Home' pageClass='dhs/HomePage'
pageControllerClass='dhs/HomePageController'
isDefaultPage="true" />
<mp:PageActivityDef id='perfPg' label='Performance' pageClass='dhs/PerfPage'
pageControllerClass='dhs/PerfPageController' />
</mp:activities>
</mp:Integration>
各ページは、PageActivityDefを追加することによって、統合メタデータを介して、MPCUIフレームワークに登録する必要があります。PageActivityDefは、次によって定義されます。
ページ
ページは、レイアウトおよびコンテンツであるページの具体的な実装であり、HTMLファイルです。
ページ・コントローラ
ページ・コントローラは、ActivityControllerベース・クラスを拡張するクラスで、データを取得し、それをUIコンポーネントにバインドし、エンドユーザーのかわりにUIによって発行されたイベント(ボタンの押下やリンクのクリックなど)に応答するために、Enterprise Managerサービス・レイヤーとの相互作用をサポートする一連のハンドラをカプセル化します
各アプリケーションは、少なくとも1つのページ(1つのページ・アクティビティ)を含める必要があり、デフォルト・ページとしてページ・アクティビティの1つを特定する必要があります。
注意:
デフォルト・ページは、選択したターゲットのホームページとして、MPCUIフレームワークによって表示されます。
Pageは、アプリケーションの最上位のUI要素です。フレームワークは、次を行うことによって、Enterprise Managerコンソールにページの統合を指定します。
Enterprise Managerメニュー・システムとのページの統合
ページをブックマークできるように、ブラウザ履歴の更新の実行
ページ間の単純なナビゲーションの指定
HTMLでページを実装します。ページを記述するために使用するタグ言語には、レイアウトおよびデータ表示のための基本的HTML、JETコンポーネントとMPCUI提供のコンポーネントが混在しています。このドキュメントの以降の項で、これを使用するための各コンポーネントおよび例について説明しています。
ページ・クラスの例は、EDKのデモ・ホスト・サンプルのHomePage.htmlファイルおよびProcessesPage.htmlファイルを参照してください。
ページ内のコンポーネントは、Enterprise Managerサービス・レイヤーを介して取得された情報を表示し、通常、ページ・モデルを介してこのデータにバインドされます。ページ・モデルは、ページに関連付けられた一連のデータです。フレームワークは、ページの表示時にデータがロードされるように、このデータのライフサイクルを管理します。ページが削除されると、データはクリーンアップされます。
次を行うことによって、ページ・モデルに含めるデータを指定します。
データ・サービス・タグの使用
Enterprise Managerサービス・リクエストの結果ハンドラでのページ・モデルへのデータの直接追加
サービス・レイヤーの使用の説明、およびモデルへのデータの追加方法の詳細は、「タスク自動化の実行」を参照してください。
ページ・モデルは、KnockoutJSライブラリを介して実装され、HTMLページにバインドされたときにモデル・オブジェクトを動的にします。そのため、HTMLのコンポーネントからのページ・モデルのアイテムへの参照は、コントローラでこのモデルが変更されたときに動的に更新されます。ページ・コードは、ページを構成するUI要素のレイアウトに制限することをお薦めします。データ・バインディングおよびイベント処理をコントローラに委任します。これにより、MPCUIフレームワークは、各ページおよびそれに正しくバインドされたデータのライフサイクルを管理できることが確認されます。
ページ・コントローラは、PageControllerベース・クラスを拡張するクラスで、データを取得し、管理アクションを処理するために、Enterprise Managerサービス・レイヤーと相互作用するコードが含まれます。さらに、コントローラには、ページ・コンポーネントから発行されたイベントへの応答で呼び出される一連のイベント・ハンドラが含まれます。
注意:
ページに表示されるすべてのデータがcomponentタグまたはDataServiceタグを介して指定でき、カスタム・イベント処理が不要な場合、ページ・コントローラは不要です。
たとえば、ページが多くのチャート・コンポーネントのコンテナである場合、各コンポーネントは、チャートに表示するためのメトリックの指定をサポートします。コンポーネントは、データのライフサイクルを正しく管理するために、MPCUIフレームワークと相互作用します。
コントローラが必要な場合、init(page)メソッドは、ページUI要素にバインドされるデータをロードできるコード内の場所です。Enterprise Managerサービスとの相互作用、およびページ・モデルを使用したバインディングの例は、「タスク自動化の実行」を参照してください。
initメソッドに加えて、コントローラには、ページ内で元となるイベントに応答するメソッドが含まれます。イベント(ボタンの押下など)への応答で処理を実行する必要がある場合、そのイベントが発生したときに呼び出されるコントローラでメソッドを参照できます。
ページ内は、次のとおりです。
<mp-link id="showHistory" params="label: getString('SHOW_HISTORY'),
destination: cb(controller.showHistoryDialog,
bean('title', 'Title', 'metricName',
'CPUProcessorPerf', 'metricColumns',
['CPUIdle'], 'timePeriod', 'LAST_DAY'))”>
</mp-link>
コントローラ内は、次のとおりです。
HomePageController.prototype.showHistoryDialog = function(context, event) {
this.page.invokeActivity('metricHistory', context);
};
ページ・コードでは、ページ・コントローラに含まれるコードと相互作用するために必要なすべてのものは、controllerへの参照です。フレームワークは、ページのロード時にコントローラ・クラスの作成を管理し、アクションを実行するためにコントローラを介して呼び出す機能を提供します。
フレームワークは、コントローラで追加のイベント・ハンドラを必要とせずに、ページから直接呼び出すことができる便利な方法を提供することによって、アクションを実行するためのプロセスを単純化します。たとえば、別のアクティビティへのアクセスは、ほとんどの場合、追加のコントローラ・コードを必要とせずに実行できます。
次の例では、リンクをクリックすると、アプリケーションをprocessesPgアクティビティにリダイレクトします。
<mp-link id="procLink" params="label: ‘Show Process’,
destination: invokeActivityCb(‘processesPg’)">
</mp-link>
注意:
詳細は、デモ・サンプルのHomePageController.jsファイルおよびProcessesPageController.jsファイルを参照してください。
ダイアログは、表示される現在のページから移動せずにアプリケーションの上部に表示するポップアップ・ウィンドウです。ダイアログは、HTMLファイル内で定義され、別のコントローラ・クラスを持ちません(持つことはできます)。
<mp-dialog params="mpDialog : { height:360, width:450 }" >
<mp-row>
<mp-column>
<div style="width:100%;height:35px">
<select id="selMemChart" data-bind="ojComponent: {component: 'ojSelect',
options: model().timePeriodList, value: model().selectTimePeriod, optionChange: cb(controller.changeChart),
rootAttributes: {style:'max-width:20em'} }">
</select>
</div>
<mp-chart id="metDataCustBinding"
params="mpChart : { type: 'line',
dataSelection: 'multiple',
emptyText: 'No data',
legend: {rendered: false},
yAxis: {min: 0, max: 100},
styleDefaults: {colors: Colors.DEFAULT_COLORS},
animationOnDisplay: 'auto',
targetName: appModel.target.name,
targetType: appModel.target.type,
metricName: model().metricName,
metricColumns: model().metricColumns,
timePeriod: model().timePeriod}"
style="width:100%;height:calc(100% - 35px)" >
</mp-chart>
</mp-column>
<mp-row>
</mp-dialog>
前の例では、ダイアログは、UIコンポーネントで使用するプロパティのソースとしてmodelを参照します。
次のいずれかの方法で、ダイアログ・モデルを初期化します。
ダイアログに関連付けられたコントローラで
統合クラスのダイアログ定義が入力パラメータを指定する場合、MPCUIフレームワークによって
<mp:DialogActivityDef id='metricHistory' label='Metric History'
dialogClass='MetricHistoryDialog' >
<mp:inputParams>
<mp:InputParam name='targetName'/>
<mp:InputParam name='targetType'/>
<mp:InputParam name='metric'/>
<mp:InputParam name='columns'/>
<mp:InputParam name='period'/>
<mp:InputParam name='title'/>
</mp:inputParams>
</mp:DialogActivityDef>
注意:
この場合、ダイアログで必要な入力パラメータを含む入力として、beanを指定する必要があります。
<mp-link id="showHistory" params="label: getString('SHOW_HISTORY'),
destination: cb(controller.showHistoryDialog,
bean('title', 'Title', 'metricName',
'CPUProcessorPerf', 'metricColumns',
['CPUIdle'], 'timePeriod', 'LAST_DAY'))”>
</mp-link>
詳細な例は、デモ・サンプルのMetricHistoryDialog.htmlファイルおよびAvailabilityDialog.htmlファイルを参照してください。
トレイン・アクティビティでは、一連のページをつなげることによって、トレイン(ガイド付きワークフローまたはウィザード)を定義できます。
トレインを定義するには、トレイン自体(TrainActivityDef)および各ステップ(TrainStepActivityDef)の宣言を統合クラスに含めます。
<mp:TrainActivityDef id='addNewUserEmbeddedTrain' label='Add New User'>
<mp:stepActivities>
<mp:TrainStepActivityDef id='anuStep1' label='User Info'
pageClass='dhs/user/UserInfo'
pageControllerClass='dhs/user/AddNewUserTrainStepController'/>
<mp:TrainStepActivityDef id='anuStep3' label='Credentials'
pageClass='dhs/user/Credentials'
pageControllerClass='dhs/user/AddNewUserTrainStepController'/>
<mp:TrainStepActivityDef id='anuStep2' label='Expiry'
pageClass='dhs/user/Expiry'
pageControllerClass='dhs/user/AddNewUserTrainStepController'/>
<mp:TrainStepActivityDef id='anuStep4' label='Schedule'
pageClass='dhs/user/Schedule'
pageControllerClass='dhs/user/AddNewUserTrainStepController'/>
<mp:TrainStepActivityDef id='anuStep5' label='Notifications'
pageClass='dhs/user/Notifications'
pageControllerClass='dhs/user/NotificationsTrainStepController'/>
<mp:TrainStepActivityDef id='anuStep6' label='Confirmation'
pageClass='dhs/user/Confirm'
pageControllerClass='dhs/user/AddNewUserTrainStepController'/>
</mp:stepActivities>
</mp:TrainActivityDef>
TrainControllerには、次のメソッドがあります。
init(Train): トレインのロード時に呼び出されるメソッドで、トレインに関連付けられたモデルを制御できます。
trainDone: ユーザーがトレイン内で「終了」または「取消」ボタンをクリックした場合に呼び出されるメソッドです。その時点で、トレインの状態(トレイン・モデルに格納されているもの)を調べて、次のいずれかを行うことができます。
トレインを完了し、完了アクティビティを続行するかどうかを制御します。
train.setStepメソッドを使用してトレインを前のステップに戻すなど、別のアクションを実行するか、またはトレインを終了して別のアクティビティを起動します。
トレイン内の各トレイン・ステップHTMLは、mp-train-step-pageタグ(ページの特別なタイプ)で始まり、コントローラ(TrainStepController)に関連付けられます。この場合、コントローラはPageControllerの特別なタイプで、トレイン・ページのコンテンツを初期化できるinit(Page)メソッドのサポートを含みます。ページはトレイン内にあるため、トレインは独自のページ・モデル(model().propertyなど)またはトレイン・モデルに格納されたデータ(train.model().propertyなど)のいずれかを参照する可能性があります。
最後に、トレイン・ステップ・コントローラまたはトレイン・コントローラのいずれかで、コードは状態のチェックを行うことができ、トレインを完了できる場合、つまり、すべての必要な情報が入力された場合、コントローラ・コードはtrain.setMayFinish()を呼び出すことができます。
UrlActivityDefは、UIコンポーネント・クリック・ハンドラ(InfoItem、ImageLink、Buttonなど)からのinvokeActivityディレクティブを使用してアクセスできるURLを定義する能力をサポートしています。URLはすべてのリクエスト・パラメータを含む絶対URLとして表すことができ、パラメータは実行時に提供できます。実行時に置換される必要のあるURLパラメータを持つURLを定義するには、次のようにinputParamsを含むようにUrlActivityDefを定義します。
<mp:UrlActivityDef id='oracle' label='myExtApp' urlBase="http://www.extapp.com" >
<mp:inputParams>
<mp:InputParam name='pageId' />
</mp:inputParams>
</mp:UrlActivityDef>
URLを参照するには、invokeActivityディレクティブを使用して、UrlActivityDefのIDを指定し、パラメータと適切な値を含むbeanを渡します。提供されるパラメータは、リクエスト・パラメータとしてURLに追加されます。
<mp-info-item id="currentLoad" params=”label: ‘CPU Load’,
value: respData.result.getString('','Load'),
destination: function(){invokeActivity('extapp', bean('pageId','Load'));}”
></mp-info-item>
この例では、アクセスされるURLは、http://www.extapp.com&pageId=Loadです。
プラグイン・ステージ・ディレクトリの/mpcuiサブディレクトリにMPCUIのメタデータ定義を置くことによって、プラグインにMPCUI実装を含めます。プラグインの構造およびパッケージ化の詳細は、「プラグインの検証、パッケージ化およびデプロイ」を参照してください。
plugin_stage/oms/metadata/mpcui/my_mpcui_metadata.xml plugin_stage/oms/metadata/mpcui/js/libs/mylib/my_mpcui.js …
注意:
前の例では、プラグイン開発者として要件に応じてXML (my_mpcui_metadata.xml)および他のファイルの名前を設定します。
システム・ターゲットとして識別されるターゲット・タイプの場合、ホームページがシステム・ターゲットにレンダリングされる3つのオプションがあります。
このページは、システム・メンバーの可用性およびインシデントのサマリーを表示します。次のいずれかの方法で、このオプションを有効化します。
プラグインからMPCUIメタデータを省略します。
プラグインにMPCUIメタデータを含め、MPCUIメタデータ・ファイルに次の<EmuiConfig>要素を含めます。
例: デフォルトのシステムのホームページの使用
<CustomUI target_type="demo_hostsystem"xmlns="http://www.oracle.com/EnterpriseGridControl/MpCui">
<EmuiConfig>
<use-framework-homepage>true</use-framework-homepage>
</EmuiConfig>
</CustomUI>
ホームページは、カスタマイズされたレイアウトで、多くの事前パッケージ済のリージョンを表示できます。手順1の例に示すように、デフォルトのホームページの使用は、メタデータによって制御されます。
リージョンの選択、およびホームページ上でのそのレイアウトは、systemUiIntegrationメタデータをプラグインに含めることによって指定されます。詳細は、「systemUiIntegrationメタデータの定義」を参照してください。
ホームページは、HTML/JSおよびMPCUIを使用して構築されます。システムまたは複合ターゲット・タイプに固有のMPCUIによって提供される、複数のデータ・サービスおよびUIコンポーネントがあります。詳細は、「システム・リージョンの定義」を参照してください。
MPCUIフレームワークは、システム・ターゲットの情報を表示するためにビルドされたホームページの一部として使用できる多くのリージョンをサポートしています。
システム・ステータス・リージョンは、システム・ターゲットおよびそのすべてのメンバーの最近の高可用性を表示します。リージョンは、次のタグを使用して、システムのホームページに含まれます。
<mp-status-overview-region id="statusOverview" height="50%"></mp-status-overview-region>
システムの問題リージョンは、システム内のすべてのターゲットのインシデントのサマリー数を表示します。リージョンは、次のタグを使用して、システムのホームページに含まれます。
<mp-issues-overview-region id="issuesOverview" height="50%"></mp-issues-overview-region>
MPCUIアプリケーションでのナビゲーションは、次のいずれかになります。
アプリケーションで定義されたアクティビティ間。詳細は、「アクティビティへのナビゲーション」を参照してください。
URLがEnterprise Managerの他のページまたは外部のURLを参照する、他のURLに対して。次に例を示します。
http://www.example.com
詳細は、「URLおよびリンク」を参照してください。
「ナビゲーションの定義」では、アクティビティ間のナビゲートへのアプローチについて説明しています。これらの説明は、HTMLで定義されたメニューまたは別のアクティビティからのアクティビティへのナビゲートに適用されます。
この項では、コントローラ・コード、つまりアクティビティに関連付けられたJavaScriptコード内から別のアクティビティへのナビゲート方法について説明します。
MyController.prototype.showProcessorHistory = function(event) {
// show an example of invoking an activity (a dialog in this case) and
// getting information from the dialog when it returns (is closed)
// create the context to be passed to the dialog
var bean = new Bean('targetName',
TargetContext.getTargetName(), 'targetType',
TargetContext.getTargetType(),
'metric', 'CPUProcessorPerf', 'columns', ['CPUIdle'],
'period', 'LAST_DAY', 'title', 'Metric History');
this.page.invokeActivity('metricHistory', bean,
this.page.cb(this.processorHistoryDone));
};
前述の例は、page.invokeActivityメソッドを使用して別のアクティビティ(この場合はダイアログ)にリダイレクトするコントローラ・メソッドを示しています。
注意:
コールバック入力は、this.page.cb(this.processorHistoryDone)です。この表記法の目的は、コールバック内のコンテキストを維持することです。関数が呼び出される際に、クロージャを作成することによりthisの値を保証します。this.page.cbはヘルパー・ユーティリティで、現在のthisをコールバックにバインドするため、コードが最終的にthis.processorHistoryDoneになると、thisは同じ値(通常はコントローラ・クラス)になります。URLを介して、MPCUIアプリケーション内のコンポーネントから他の場所にナビゲートするには、多くの方法があります。mp-linkコンポーネントを使用して、ツールチップや場所など、HTML形式のリンクをレンダリングします。
絶対URL (Enterprise Managerの外部)
絶対URLへのリンクを指定するためにUrlAbsクラスを使用すると、このクラスのインスタンスは、Link宛先に関連付けられるか、invokeActivityメソッドを介してアクセスできます。
In the Page HTML:<mp-link id="gotoOracle" label="Oracle" destination="model().oracleUrl"> </mp-link>In the Controller Class:page.setModel(“oracleUrl", new UrlAbs("http://www.oracle.com", "Oracle"));
invokeActivityを使用した代替方法は、次のとおりです。
In the Page Class:<button label="Go To Oracle" click="function(){invokeActivity(model().oracleUrl)}" /> <button label="Go To Oracle" click="invokeActivityCb(model().oracleUrl, null)" />In the Controller Class:page.setModel(“oracleUrl", new UrlAbs("http://www.oracle.com", "Oracle"));
ページ定数を使用したEnterprise Managerページへのリンク
絶対URLに加えて、MPCUIフレームワークは、Link宛先から参照できるか、またはクリック・ハンドラの一部としてinvokeActivityメソッドに渡すことができる、UrlEmオブジェクトを構築することによって、既知のEnterprise Managerのページにリンクする機能をサポートしています。リファレンス・ガイドには、使用可能なすべてのページ定数のoracle.sysman.emx.Constantsクラス、およびURLを生成するために指定する必要がある対応するパラメータの完全なリストが記載されています。
// setup link to availability page
var availLink:UrlEm = new UrlEm(Constants.PAGE_AVAILABILITY,
[new InputParam(Constants.P_TARGET_NAME,
ApplicationContext.getTargetName()),
new InputParam(Constants.P_TARGET_TYPE,
ApplicationContext.getTargetType()),
new InputParam(Constants.P_PAGE_TYPE,
Constants.BY_DAY)]);
page.setModel("availPageLink", availLink);
定数が定義されていないEnterprise Managerページへのリンク
UrlEmは、oracle.sysman.emx.util.Constantsクラス内のページ定数を介してサポートされているページにアクセスするためにのみ使用できます。現在定数が定義されていないページの場合、ページにアクセスするには、ページのADFビューID値を含むUrlRelオブジェクトを作成します。
たとえば、Bare Metal Provisioningダッシュボードにアクセスするには、次のようにページのビューID (/faces/core-bmp-dashboard)を指定します。
var url:UrlRel = new UrlRel("/faces/core-bmp-dashboard", null);
ページURLで特定のADFページのビューIDを見つける最も簡単な方法は、http://<server:host>/em/に続く文字列です。
Enterprise Managerのターゲットのホームページへのリンク
Enterprise ManagerのターゲットのホームページへのURLを生成することは、特別な場合です。この場合、静的UrlEm.homepageUrlメソッドを使用します。
page.setModel("relatedHostLink", UrlEm.homepageUrl(host.name, host.type));
DIRECT_URLを使用した動的URL
実行時にデータ・サービスから動的にURLを作成する必要がある場合、次のオプションが必要になることがあります。DIRECT_URLというアクティビティIDは、特別な場合のために予約されており、フレームワークによって提供されます。この場合UrlActivityDefが宣言されていませんが、かわりにinvokeActivityディレクティブから、urlプロパティを指定するbeanが渡されます。このプロパティのために提供される値は、コンポーネントをクリックしたときに誘導されるURLとして使用されます。
次の例では、URLを取得するために、データ・サービスrespDataが問い合せられます。必要なURLを取得するために、これは、ページ内で使用されているどのようなデータ・サービスにも置換されます。これはMetricValuesDataServiceまたはSqlDataServiceにすることができます。
<mp-info-item id="currentLoad" params=”label: ‘CPU Load’,
value: respData.result.getString('','Load'),
destination: invokeActivity('DIRECT_URL',
bean('url',
respData.result.getString('','Load')))">
</mp-info-item>
MPCUIフレームワークは、Enterprise ManagerのWebサービス・レイヤーへのJavaScriptインタフェースを介して、Enterprise Managerのサービスにアクセスできます。必要な場合、これらのクライアント・サービスに直接アクセスできます。多くの場合、Enterprise Managerサーバーと相互作用して管理UIで表示する適切なデータを取得するためにサービスを利用するUIコンポーネントを介して、サービスはさらに抽象化されます。
次の各項では、MPCUIフレームワークに含まれる様々なサービスについて説明し、これらのサービスをコードから使用する方法の簡単な例を示します。
注意:
EDKでは、任意のWebサービスへのアクセスはサポートされていません。Webサービスにアクセスする適切な方法は、メトリック、ジョブ、またはfetchletによって起動されるリモート・コマンドとして、サービス・ホストに常駐する管理エージェントを介します。
MPCUIでは、リアルタイムまたは履歴のいずれかの形式でManagement Serverからメトリック・データを取得するための単純なサービスが提供されます。リアルタイム・データの場合、Oracle Management Serviceは管理エージェントにアクセスしてデータを取得するため、リアルタイムでメトリックを効率的に収集できる場合はこれを使用します。
通常、メトリック値サービスは、グラフに表示するメトリック(折れ線グラフの場合はデータの周期性)を指定することによって、グラフから透過的に使用されます。
<mp-chart id="cacheChart" style=”width:100%;height:100%”
params=”mpChart: {
type: ‘line’,
metricName: ’MSSQL_MemoryStatistics’,
metricColumns: ['cache_hit_ratio'],
timePeriod: ’REALTIME’,
interval: 15}" >
</mp-chart>
この場合、コール元はサービスと直接相互作用することはありません。MPCUIフレームワークは、サービスを使用して、グラフのデータを取得します。
表コンポーネントの場合、次のようにメトリックを直接指定することもできます。
<mp-table id="processesTable" style=”width:100%;height:100%"
params=”mpTable: {metricName: ’CPUProcessesPerf’,
metricColumns: ['ProcUser', 'ProcCPU', 'ProcCmd'],
timePeriod: ‘REALTIME’, interval: 30,
columns: [
{headerText: 'Key', field: 'key', id: 'key', headerStyle: 'width:50px'},
{headerText: 'User', field: 'ProcUser', id: 'ProcUser', headerStyle: 'width:100px'},
{headerText: 'CPU', field: 'ProcCPU', id: 'ProcCPU', headerStyle: 'width:80px'},
{headerText: 'Command', field: 'ProcCmd', id: 'ProcCmd', headerStyle: 'width:400px'}
]}"
>
</mp-table>
ページ(またはダイアログ)内でmp-metric-values-data-serviceタグを使用して、表コンポーネントにメトリック・データを表示します(表のdataService属性はデータ・サービスに設定されます)。その後、メトリック・サービスからのデータは表に表示され、サービスからのデータは複数のコンポーネント(たとえば、表とリンクまたはラベル)の間で共有されます。
例: MetricValueDataServiceタグの使用
<mp-data-services>
<mp-metric-values-data-service id="mv1" params=”flattenData: true
targetName: appModel.target.name,
targetType: appModel.target.type,
metricName: ‘Load’, columns: ['cpuUtil', 'cpuUser', 'cpuKernel'],
timePeriod: ‘LAST_DAY’"
> </mp-metric-values-data-service>
</mp-data-services>
<mp-table id="mvTable" params=”mpTable: { dataservice: ‘mv1’ }" > </mp-table>
コントローラ内からメトリック値サービスを呼び出すことができます。これは、サービスを使用する最も柔軟性のある方法で、UIで表示できるよう、最終結果のモデルへの追加前に、必要に応じてコール元はデータを操作できます。
メトリック・サービスからの個々の値の取得(HTML)
Label、InfoItemまたはそのような他のコンポーネントで表示するために、メトリック・サービスから個々の値を取得できます。
<mp-metric-values-data-service id="procData" params="flattenData:true,
targetName:appModel.target.name,
targetType:appModel.target.type,
metricName:'CPUProcessorPerf',
columns:['CPUIdle'],
timePeriod:'CURRENT',
interval:15">
</mp-metric-values-data-service>
値を表示するコンポーネントから、次のように記述します。
<mp-info-item params="label: ‘CPU(0) Idle %’,
value="procData.result.getString('0','CPUIdle')">
</mp-info-item>
例: コントローラからのメトリック・サービス
var cpuPerf =
TargetContext.getTargetContext().getMetric("CPUPerf");
var cpuPerfSel = procMetric.getSelector(
['system','idle', 'io_wait']);
cpuPerfSel.getData(page.cb(this.cpuDataHandler),
MetricCollectionTimePeriod.CURRENT, page.getBatchRequest());
特定のメトリックのMetricSelectorを作成することによってメトリック・サービスを使用し、そのセレクタでgetDataメソッドを呼び出します。getDataメソッドを呼び出すと、次の2つのパラメータが渡されます。
リクエストの結果を使用して呼び出されるハンドラのコールバック
選択の周期性
サービス・リクエストが完了すると、成功またはエラーのどちらの場合でも、ハンドラが呼び出され、リクエストの結果およびフォルトを渡します。データ結果の処理を続行する前に、コール元は、フォルトの存在を確認する必要があります。
例: メトリック・サービスの結果ハンドラ
MyController.prototype.cpuDataHandler = function(cpuData, fault) {
if (fault != null) return; // handle this better!
var dataPoint = cpuData.results[0];
var collectionTime = dataPoint.timestamp;
var idleTime = dataPoint.data[0]['idle'];
var systemTime = dataPoint.data[0]['system'];
var ioWaitTime = dataPoint.data[0]['io_wait'];
};
データにアクセスするには、dataService.result.getString(‘key','column')への参照が設定されている必要があります。メトリックが複数のキーをサポートする場合に、サンプルで返される行を識別するために、キーが必要です。メトリックにキー列が含まれていない場合、キー値は‘'またはnullとして渡す必要があります。列は、メトリック定義から取得されるデータ列です。
各データ・ポイント(TimestampMetricData)には、データ・ポイントが収集されたときに知らせるタイムスタンプ・メンバーがあり、そのメトリックの表を効率的にするデータ配列が含まれています。
メトリックに複数のキー(プロセス、ファイルシステムなど)がある場合、データ配列には、複数の行(各キーに1つ)があり、各行にはリクエストされたデータ列があります。前の例では、データ配列には、各プロセスに対して1つの行が含まれています。メトリックにキー列が含まれていない場合、データ配列には、単一の行のみが含まれています。
データ配列内の各行は、KeyMetricDataオブジェクトです。メトリックにキーがある場合、metricKeyプロパティは、行が適用するキーを示します。メトリックのキーがない場合、このプロパティは無視されます。KeyMetricDataは、列の値を取得するためにその列の名前を使用して索引付けできる動的オブジェクトです。
前の例では、コードはデータ配列の中の行を進み、各行(KeyMetricData)で、データから‘ProcUser'列を取得します。元のリクエストにも‘ProcCPU'および‘ProcCmd'列が含まれていたため、これらは、同じ方法、つまり、data[‘ProcCPU']またはdata[‘ProcCmd']でアクセスできます。
HTMLのmp-metric-values-data-serviceまたはJavaScriptのMetricSelectorを介してメトリック・データ・サービスを使用する場合、サービスによって返されるデータのセットを、いくつかの追加の選択基準に従ってフィルタ処理するようにリクエストすると便利な場合があります。これをコントローラ内で実行するには、カスタム・データソースを実装し、コントローラでメトリック・サービスの結果をフィルタ処理し、カスタム・データソースに結果を移入します。
サービス自体が結果をフィルタ処理し、フィルタ処理されたセットのみをクライアントに返して表示するようにするリクエストに適用できるメトリック・フィルタを定義することもできます。
メトリック・フィルタ(MetricPredicateと呼ぶ)は、個々の列フィルタ、フィルタ演算子、基準によるオプションの順序など、いくつかの要素で構成されています。各列フィルタには、フィルタ処理する列、フィルタ処理に使用する演算子、およびフィルタ処理での照合に使用する値を指定します。列フィルタは、GT、LT、GE、LEなど、数値データ用の標準的な演算子をサポートしています。
文字列データの場合、演算子には、EQ、NEおよびREGEXが含まれます。REGEX演算子は、各値とフィルタ入力値をパターンとして使用して、正規表現文字列一致を実行します。正規表現パターン一致はJava regexライブラリを使用して行うため、パターンは、Javaパターン一致の要件に従っている必要があります。
条件演算子は、列フィルタを組み合せて1つの式にし、AND (すべての列フィルタを満たす必要がある)またはOR (いずれかの列フィルタを満たせば十分)をサポートしています。条件による順序には、結果を順序付けする列、および制限する行数を指定します。これは、上位Nの結果を希望する場合に有用です。
メトリック・フィルタを作成する場合、列フィルタはオプションにでき、順序条件は指定したもののみにできます。あるいは、順位条件はオプションにでき、列フィルタは指定したもののみになります。メトリック・フィルタを作成する場合、列フィルタと順序条件に含まれるすべての列は、同じメトリックの一部である必要があり、このメトリックは、対応するメトリック・データ・サービス・リクエストで選択するメトリックである必要があります。複数のメトリックの列を組み合せて同じフィルタにすることは、サポートされていません。
次の例は、mp-metric-values-data-serviceタグ上でメトリック・フィルタを定義するプロセスを示しています。データ・サービス・タグには、次のように対応するメトリック・フィルタ(MetricPredicate)にバインドされる条件プロパティが含まれます。
<mp-metric-values-data-service
id="fsMetDs"
params=”metricName: ‘FilesystemPerf’,
columns: ['MountPoint','Utilization','FreeKB','UsedKB','TotalKB','FSType',
'FSName'],
targetName: appModel.target.name,
targetType: appModel.target.type,
timePeriod: ‘LAST_HOUR’,
predicate: model().fsFilter"
></mp-metric-values-data-service>
ページに関連付けられたコントローラでは、フィルタ列、演算子、および条件による順序を指定することで、フィルタが作成されます。次の例では、前述のサービスからのファイル・システム・メトリック・リクエストはフィルタ処理されて、TotalKBサイズが1000kbより大きく、.netのファイル・システム名(FSName)上の正規表現一致を備えたファイル・システムになります。最後に結果は、最初の5つのファイル・システムに制限されたFreeKB列(降順)によって順位が設定されます。
MyController.prototype.createFsFilter = function() {
var filters = [
new MetricFilter('TotalKB', MetricOperator.GT, 1000),
new MetricFilter('FSName', MetricOperator.REGEX, '(.*)net(.*)')
];
var orderBy = new MetricOrderBy('FreeKB', MetricOrderBy.DESC, 5);
var predicate = new MetricPredicate(filters, MetricOperator.AND, orderBy);
return predicate;
};
グラフのデータを取得するために使用できるメトリックとSQLデータソース(およびサービス・タグ)、表およびその他のコンポーネントに加えて、これらのコンポーネントの独自のカスタム・データソースを構築できます。他のMPCUIサービスからデータを取得し、表示前にそれを操作する場合に、これは役立ちます。たとえば、2つのメトリックのデータを結合するには、なんらかの方法でデータをフィルタ処理するか、データを集計します。
カスタム・データソースを作成するには、コントローラ・コードを使用して、ソース・データを取得してから、データソースを作成するようにそれを操作する必要があります。カスタム・データソースでは、次の重要な動作が実行されます。
データの表示時にUIコンポーネントで役立つように、データソースに含まれるデータの列記述子を設定します。記述子には、データ型、表示ラベルなどのプロパティが含まれています(凡例または列ヘッダー用)。
時系列グラフでデータの表示を可能にするための、複数のデータ・ポイントをサポートします。
データソースの基礎となる情報が変更されると、コンポーネントは更新されたデータを表示できるようになり、データソースのキャッシュおよび変更をサポートします。
通常、カスタム・データソース(oracle.sysman.emx.model.CustomDataSource)は、Page.setModelを使用して、ページ・モデルで構築および設定されます。データソースを構築する際には、次を示すフラグとともに、データソースを構成する列(またはデータ項目)を指定する必要があります。
キーが含まれているようにデータを処理する場合
データソースが棒グラフまたは列グラフなどのキーを適用するグラフで表示される場合のみ、キーを指定します。データが表形式のビューや非グラフ・コンポーネントで表示される場合、列の1つをキーとして特定する必要はありません。
複数のタイムスタンプ・サンプルが含まれているようにデータを処理する場合
データが時系列グラフ(LineChart)で表示され、MPCUIポーリング・メカニズムを使用して一定期間にデータソースに追加されるデータ・サンプルがある場合のみ、データがタイムスタンプを含めるよう指定します。
function CustomDataSource(columns, hasKey, isTimeSeries)
列の配列は、データソースに含まれるデータ項目を指定します。この配列は次のいずれかになります。
各文字列がデータ項目のラベルを指定する、文字列の配列
列記述子(QueryColumDescまたはCustomColumnDescのいずれか)の配列
列記述子を指定すると、列のラベルおよびデータ型を指定できSpecifying (QueryColumnDescの場合)、列がソート可能な場合など、列幅などの表形式の表示でデータを表示するための追加のプロパティを指定できます(CustomColumnDescの場合)。
次の例に、SqlQueryServiceへのリクエストから返されるデータを処理するために設定されるコントローラでの結果ハンドラを示します。
例: SQLQueryServiceへのリクエストから返されるデータの処理
// execute a SQL query and then massage the data for display
var query = new SqlQueryService('CPU_USAGE',
[SqlQueryInput.createParam("TARGET_GUID",
TargetContext.getTargetContext().guid)]);
query.execute(page.cb(this.cpuQueryHandler), page.getBatchRequest());
}
ProcessesPageController.prototype.cpuQueryHandler = function(result, fault) {
var page = this.page;
if (fault != null || result.getError() != null) {
MpLog.logError(fault, "Getting CPU Data via SQL Query");
return;
}
var cpuSqlData = page.getModel("cpuSqlData");
if (cpuSqlData == null) {
cpuSqlData = new CustomDataSource([
new QueryColumnDesc("Processor", QueryColumnType.STRING),
new QueryColumnDesc("Idle Percentage", QueryColumnType.DECIMAL),
new QueryColumnDesc("Used Percentage", QueryColumnType.DECIMAL)
], true);
page.setModel("cpuSqlData", cpuSqlData);
}
var rows = result.rows;
if (rows != null) {
for (var r=0; r<rows.length; r++) {
var id = result.getString(r, 'CPU Number');
var idle = result.getNumber(r, 'Idle %');
var used = result.getNumber(r, 'Used %');
cpuSqlData.setRow("Processor #"+id, idle, used);
}
}
};
前の例では、データソースは3つの列で構築され、データ型が指定されます。コンストラクタへの2番目のパラメータは、キーが含まれているようにデータを処理することを示すtrueとして渡されます。この場合、リストの最初の列は、常にキーとして処理されます。データ内の別の位置を指定できません。
最後に、SqlQueryResultSet (result.rows)の各行に対して、コードでは、カスタム・データソースに行を構築します。
注意:
処理の完全な例は、EDKのdemo_hostsample、ProcessesPageController.jsを参照してください。
ページ・レイアウト(ProcessesPage.htmlなど)で、データは、customDataSourceプロパティを使用して、UIコンポーネントにバインドされます。次の例では、cpuSqlTableに注意してください。これは、cpuSqlDataカスタム・データソースにロードされたデータを表示する表です。
例: UIコンポーネントへのデータソースのバインディング
<mp-table id="cpuSqlTable" params="mpTable: { customDataSource: model().cpuSqlData, rootAttributes: { style: 'width:100%;height:100%' } }">
</mp-table>
図9-7に、前の例によって表示される結果を示します。
Enterprise Managerメトリック収集フレームワークは、カウンタからの値を計算する能力をサポートしています。ただし、値が正確であると保証されるのは、エージェントが収集した履歴データから取得され、リポジトリに格納されている場合のみです。リアルタイム・リクエスト(たとえば、timePeriodがREALTIMEに設定されているMetricValuesDataService)からこれらの値を問い合せしようとすると、予期しない結果が生じることがあります。計算される値は、リアルタイム収集用に格納されたカウンタではなく、履歴収集時に格納された最後のカウンタを使用するためです。したがって、計算されたメトリックのリアルタイム表示を必要とする場合、計算されたデータソースの使用の検討が必要になることがあります。
計算されたデータソースは、2つのメトリックからのデータを組み合せて1つの表示にできます。これが有用なのは、表示するメトリックが、すでに説明した格納済のカウンタを使用した計算式に基づいている場合です。
このデータソースを使用するには、通常2つのメトリックを定義します。1つのメトリックは、収集されて履歴用にリポジトリに格納される値を計算します。このメトリックは、格納されているカウンタを使用する計算式を含んでいます。もう1つのメトリックは、カウンタ自体のみを収集する一時メトリックです。RAWカウンタ値は通常有用ではないため、このメトリックは履歴目的では収集されません。
UIコードで計算されたデータソースを作成する場合、両方のメトリック・セットが必要です。1番目のメトリックは、計算された形式でメトリックを指定し、ソース・メトリックと呼ばれます。データソースは、これらのメトリックを使用して、列のラベルなどのデータの表示属性を定義し、必要な履歴データも取得します。
/**
* Construct a data source that shows the CPU-System% and CPU-Idle% from historical
* data and then appends data to it from a real-time data source that acquires
* counter columns and derives the values from the counters. First declare the
* columns to be shown on the chart, the labels will be based on the metric-column * labels and will obtain the historical data that initially populates the chart.
*/
var srcCols = [
new ComputeColumnDesc( TargetContext.getTargetContext(), "CPUPerf",
"system"),
new ComputeColumnDesc( TargetContext.getTargetContext(), "CPUPerf",
"idle"),
];
/**
* These are the counter columns; they do not need to be from the same metric as
* the source columns, however the counter columns must be from the same metric as
* all other counters.
*/
var ctrCols = [
new ComputeColumnDesc( TargetContext.getTargetContext(), "CPUPerf",
"systemCounter"),
new ComputeColumnDesc( TargetContext.getTargetContext(), "CPUPerf",
"idleCounter"),
];
/**
* create the data source and pass the source columns, the counter columns and a
* pointer to the compute function. Finally pass the page the data source will be
* consumed on and the interval to be used to populate the data. The compute
* function will be called at each interval.
*/
var computedDataSource = new ComputeDataSource(srcCols, ctrCols,
page.cb(this.computeFunction),
page, PollingInterval.EVERY_15_SECONDS);
page.setModel("compDataSource", computedDataSource);
計算されたデータソースは、履歴データを求めるリクエストを送り、指定した間隔でカウンタのポーリングを行います。サンプルが取得されるたびに、計算関数が呼び出され、計算されたデータソースと、カウンタ・メトリック用の最新の値セットを含むデータ・ポイント(TimestampMetricData)に参照が渡されます。
計算関数は、カウンタを使用して値を計算でき、ソース列で特定されるメトリックと同じ名前を持ったメトリックを含むデータ・ポイントを返す必要があります。前の例では、カウンタ列はsystemCounterとidleCounterですが、計算関数から返されるデータ・ポイントは、ソース列systemとidleの値を含んでいる必要があります。
MyController.prototype.computeFunction = function(ds, dp) {
// retrieve the counter values from the data point passed; could also retreive
// any necessary context from the data source
var systemCounter = dp.data[0]["systemCounter"];
var idleCounter = dp.data[0]["idleCounter"];
// compute values; this is where you would replicate the logic in your
// computed metric
var systemValue = systemCounter+Math.floor(Math.random()*(50 - 20 + 1)) + 20;
var idleValue = idleCounter+Math.floor(Math.random()*(120 - 80 + 1)) + 80;
// you must now return a TimestampMetricData object. You can use the one passed and return
// it, but to do so you must add columns to the data point. The index reference [0] is
// a reference to the fact that the datapoint could have multiple rows, one for each key
// but the example does *NOT* support multiple keys. Also, if you created a new
// data point to return you would need to set the timestamp of the datapoint
// correctly, using the timestamp of the sourced datapoint
dp.data[0]["system"] = systemValue;
dp.data[0]["idle"] = idleValue;
return dp;
};
MPCUIフレームワークがUIコンポーネントまたは単純化されたサービス(メトリック・サービスなど)のいずれかを介して最も有用なデータにアクセスする場合、必然的に、より非構造化された形式で管理リポジトリに格納された他の情報にアクセスできる必要があります。MPCUIフレームワークは、このアクセスのためにSQL問合せサービスを提供します。
SQL問合せサービスによって、プラグインを使用してSQL文をパッケージ化し、その文をWebサービスを介して実行し、データをカスタムUIのUI要素にバインドすることができます。SQL問合せサービスでは、セキュリティ・リスクが発生する可能性があるため、無制限なAPIやスクリプト化可能なAPIを管理リポジトリに提供しません。
SQL問合せサービスは、Enterprise Managerの拡張フレームワークを介して管理リポジトリにデプロイされたSQL文のみを実行できます。これにより、文がEDKビューのみにアクセスできることを確認します。これにより、多くの柔軟性が提供され、Enterprise ManagerのパートナEDKビューとともに、独自のビュー(Enterprise Manager構成データから生成されたビューなど)からデータにアクセスする機能が提供されます。
mp-sql-data-serviceタグを使用して、ページ・コード内の問合せサービスを完全にカプセル化できます。 このタグによって、コール元がSQLを処理し、パラメータを渡すように指定できます。このデータ・サービス・オブジェクトは、表またはサポートする他のUIコンポーネントにバインドできます。
例: SQLDataServiceタグの使用
<mp-data-services>
<mp-sql-data-service id="dbSummaryDS" params=”queryID: ‘DATABASE_SUMMARY’,
properties: model().dbSummProp”>
</mp-sql-data-service>
</mp-data-services>
<mp-table id="dbSummaryTable" params=”mpTable: { dataservice: ‘dbSummaryDS’ }" > </mp-table>
SQL DataServiceからの個々の値の取得
コンポーネント(LinkやLabelなど)内で使用するためにSQLdataServiceから返される特定のセルを参照するには、次のタイプの参照が使用されます。
<mp-sql-data-service id="ids" params=”queryID: ‘INSTANCE_INFO’,
properties: props('TARGET_GUID',appModel.target.guid)" ></mp-sql-data-service>
...
<mp-info-item params=”label: ‘CPU Model’,
value: ids.result.getString(0,'CPU Model')"></mp-info-item>
データ・サービスへの参照は、dataService.result.getString(rowIndex,‘column')を介して行い、rowIndexは問合せから返される行で、columnは元のSQL問合せで指定される列の名前です。
問合せサービスは、コントローラ内から呼び出すこともでき、表示前のデータの操作方法の点で、より多くの柔軟性が提供されます。問合せサービスにアクセスする2つのAPIがあります。
SqlQueryインタフェースによって、単一のSQL問合せが処理を行い、バインド変数を渡し、返される結果セットを受け取ることができます。結果セットでは、JDBC ResultSetのインタフェースとかなり類似したインタフェースが提供されます。
例: SqlQuery APIの使用
var getInfoSvc = new SqlQuery("GET_TARGET_INFO",
[["TARGET", name],["TYPE", type]]); // bind variables
getInfoSvc.execute(page.cb(this.getTargetInfoHandler));
MyController.prototype.getTargetInfoHandler = function(resultSet, fault) {
var target;
if (fault != null) {
if (resultSet != null && resultSet.getError() == null) {
target.setGuid(resultSet.getBase64Binary(0, "TARGET_GUID"));
target.setTypeMetaVer(resultSet.getString(0, "TYPE_META_VER"));
var props = [];
for(var i=1; i<Target.NUM_PROPERTIES+1; i++)
props.push(resultSet.getString(0, "CATEGORY_PROP_"+i));
target.setCatProperties(props);
}
};
バインド変数は、名前によって参照され、パッケージ化されたSQL文で表される変数に対応します。
SELECT target_guid, type_meta_ver, category_prop_1, category_prop_2,
category_prop_3, category_prop_4, category_prop_5
FROM mgmt_targets
WHERE target_name = ?TARGET?
AND target_type = ?TYPE?
多くの問合せを単一のリクエストで処理できる場合、BulkSqlQueryインタフェースを使用できます。各問合せは、一括問合せに追加する必要があり、処理するすべての問合せが追加されると、BulkSqlQuery.executeメソッドが呼び出され、結果を使用して呼び出される結果ハンドラに渡されます。
SqlQueryの結果ハンドラが、処理された問合せの単一のSqlQueryResultSetに渡されると、BulkSqlQueryの結果ハンドラがBulkResultSetに渡されます。その後、問合せの追加時に指定されたリクエストIDを使用して、各問合せのSqlQueryResultSetを取得する必要があります。
同じ問合せを、同じ一括リクエストの一部として、異なるバインド変数で複数回処理できる場合をサポートするには、別のリクエストIDが必要です。
例: BulkSqlQuery APIの使用
var guidParam = [["TARGET_GUID", TargetContext.getTargetContext().guid]];
var bulkQuery = new BulkSqlQuery();
bulkQuery.addQuery("INSTANCE_INFO", "INSTANCE_INFO", guidParam);
bulkQuery.addQuery("PROCESS_STATES", "PROCESS_STATES", guidParam);
bulkQuery.addQuery("PROCESS_INFO", "PROCESS_INFO", guidParam);
bulkQuery.execute(page.cb(this.pageDataHandler), page.getBatchRequest());
MyController.prototype.pageDataHandler = function(bulkResult, fault) {
var info = bulkResult.getResultSet("INSTANCE_INFO");
MPCUI用にパッケージ化されたSQLを記述する際は、次のガイドラインに従ってください。
パッケージ化されたSQLは、パートナEDKの一部であるビューにのみアクセスできます。これには、構成メトリック定義の結果として生成されるビューが含まれます。
データの変更(更新または削除)を試行するSQLは、プラグイン・デプロイメントの際にMRSによってフィルタ処理されます。
データ定義言語(DDL)を試行するSQL文は、MRSによって除外され、許可されません。
PL/SQLプロシージャへのアクセスはパッケージ化されたSQLから許可されていないため、匿名PL/SQL (begin、endコンストラクトなど)は許可されません。
バインド変数は、テキスト識別子によって識別し、接頭辞および接尾辞に?を付ける必要があります。たとえば、?TARGET_TYPE?のようになります。
バインド変数は、大/小文字が区別されません。
問合せサービスでは、結果セットのサイズが1000行または100,000バイトに制限されるため、問合せで返される可能性がある結果セットのサイズを制限するよう注意してください。
MPCUIコードで使用されるSQL文は、SqlStatements要素を使用したMPCUIメタデータでパッケージ化されます。
MPCUIメタデータでのSQL文の場所の詳細は、「MPCUIメタデータ要素の概要」を参照してください。MPCUIメタデータXSDの詳細は、EDKメタデータのAPIリファレンスを参照してください。
プラグインUIが、表示名などの関連のターゲット・タイプに関する情報を必要とし、また、そのターゲット・タイプの特定のインスタンスに関する詳細を必要としない場合、TargetFactoryは、このサマリー情報を取得する関数を提供します。
TargetFactory.getTargetTypeInfo関数は、ターゲット・タイプの表示名を含むTargetTypeInfoオブジェクトを返します。この関数を呼び出すと、内部targetTypeが提供された(たとえば、oracle_database) TargetTypeInfoオブジェクトとハンドラ関数が渡されます。ハンドラは、TargetTypeInfoと、リクエストの処理中に発生した障害とともに呼び出されます。
var typeInfo = new TargetTypeInfo("oracle_database");
TargetFactory.getTargetTypeInfo(typeInfo, page.cb(this.getTypeInfoHandler));
}
MyController.prototype.getTypeInfoHandler = function(typeInfo, fault) {
if (fault != null) {
MpLog.logError(fault, "Getting Target Type Info");
return;
}
MpLog.info("Target Display Label for (oracle_database):"+
typeInfo.typeDisplayName);
};
以前に説明したサービスに加えて、MPCUIフレームワークでは、ターゲット・オブジェクト(oracle.sysman.emx.model.Target)の不可欠な部分である他の多くのサービスが提供されます。MPCUIアプリケーションの実行時に、TargetContext.getTargetContext()呼出しによって、プライマリ・ターゲットのターゲット・インスタンスが返されます。
関連するターゲットに対して、他のターゲット・インスタンスを構築できます。どちらの場合も、次の方法を使用して、MPCUIサービス・レイヤーを介してこれらのターゲットの追加情報を取得します。
ターゲット・クラスのインスタンスに対して、getTargetInfo()メソッドを呼び出して、そのターゲット・インスタンスに関連付けられたターゲット・プロパティを取得できます。返されるターゲット情報は、guid、catProperties、typeMetaVer、timezoneRegionなどのターゲット・インスタンスのプロパティを移入します。
これらのプロパティの詳細は、EDKのターゲット・クラスのドキュメント(/doc/partnersdk/mpcui/emcore/doc/oracle/sysman/emx/model/Target.html)を参照してください。
getTargetInfo()メソッドを呼び出す場合、ハンドラを指定する必要があります。このハンドラは、targetInfoサービスが返す際に呼び出されます。これは、完全に移入されたターゲット・インスタンス、および、ターゲット・プロパティを取得するためのリクエストの処理中に発生したエラーを含めるよう設定されたフォルト・オブジェクトに渡されます。
var target = TargetContext.getTargetContext();
target.getTargetInfo(page.cb(this.targetInfoHandler));
MyController.prototype.targetInfoHandler = function(target, fault)
注意:
TargetContext.getTargetContext()の場合、アプリケーションの起動時に、現在のターゲット情報がロードされ、ターゲット・プロパティが変更されたことを考慮しない場合、そのターゲット・インスタンスのgetTargetInfo()を呼び出す必要はありません。
target.getAssociatedTargets()メソッドを使用して、ターゲット・インスタンスに関連する一連のターゲットを取得します。このメソッドは、呼び出され、アソシエーション・タイプの配列および関連ターゲットのリストとともに呼び出されるハンドラに渡されます。このメソッドによって返されるオブジェクトのタイプの完全な説明は、APIドキュメントを参照してください。
// get associated host
var target = TargetContext.getTargetContext();
var assocTypes = [ AssociationDataService.HOSTED_BY ];
target.getAssociatedTargets(assocTypes, page.cb(this.assocHandler));
MyController.prototype.assocHandler = function(assocResult, fault) {
var host = assocResult.getAssoc(AssociationDataService.HOSTED_BY);
if(host != null)
page.setModel("relatedHost", host.name);
};
target.getMetricMetadata ()メソッドを使用して、ターゲット・インスタンスのメトリック定義情報を取得します。指定したメトリック名のメトリック・オブジェクトを返すTarget.getMetric()メソッドを呼び出すことによって、メトリック・メタデータ情報が取得されます。このメソッドによって返されるオブジェクトのタイプの完全な説明は、APIドキュメントを参照してください。
var target = TargetContext.getTargetContext();
target.getMetricMetadata(Util.createProxy(this, this.metadataHandler));
MyController.prototype.metadataHandler = function(target, fault)
注意:
TargetContext.getTargetContext()の場合、アプリケーションの起動時に、現在のターゲット・メトリック・メタデータがロードされ、ターゲット・メタデータが変更された(この可能性は低い)ことを考慮しない場合、そのターゲット・インスタンスのgetMetricMetadata()を呼び出す必要はありません。
target.getAvailability()メソッドを使用して、ターゲット・インスタンスの現在の可用性情報を取得します。可用性情報(AvailOverviewData)には、現在のステータス、過去24時間の稼働時間(%)などがあります。このメソッドによって返されるオブジェクトのタイプの完全な説明は、APIドキュメントを参照してください。
var target = TargetContext.getTargetContext();
target.getAvailability(page.cb(this.targetAvailHandler));
MyController.prototype.getTargetAvailHandler = function(availInfo, fault)
注意:
グラフ、表またはデータ・サービスに対するREALTIMEデータ選択の重要な使用方法は、指定した間隔でデータの自動ポーリングを開始することです。
MPCUIフレームワークでは、Management Serverへの膨大なリクエストを回避するため、リクエストをグループ化できるように、制限された間隔のサブセット(15、30、45、60秒)をサポートしています。
各ページまたはダイアログが表示されるか削除(スコープ外に移動)されると、MPCUIフレームワークは、これらのリクエストのポーリングを自動的に開始および停止します。
ページまたはダイアログのスコープを超えて永続的なポーリング・リクエストは開始できません。
ポーリング・リクエストのバッチ処理に加えて、MPCUIフレームワークでは、アクティビティ(ページまたはダイアログ)コントローラから実行時に作成されたリクエストを明示的にバッチ処理する機能が提供されています。UIメッセージのパフォーマンスを遅くするManagement Serverへの追加の往復を回避し、Management Serverにさらにオーバーヘッドを追加する場合に、リクエストのバッチ処理はよい方法です。
リクエストをバッチ処理する最も一般的な機会は、アクティビティの初期化の一部として行うときです。
ページ・レイアウト(HTMLファイル)で宣言されたデータ・サービスの場合、MPCUIフレームワークは、リクエストをバッチ処理します。
controller.init()メソッドから作成するサービス・リクエストの場合、ページのバッチ・リクエストをサービス・メソッドに渡すことができます。MPCUIフレームワークは、ページのロード後にinit()メソッドを呼び出します。
次の例は、デモ・サンプルのHomePageController.jsファイルから抽出されます。メソッド内のpage.getBatchRequest()のインスタンスに注意してください。この方法で作成されたすべてのリクエストは、Management Serverへの単一のパスで実行されます。
例: アクティビティの初期化の一部としてのリクエストのバッチ処理
MyController.prototype.init = function(pg) {
this.page = pg;
var target = TargetContext.getTargetContext();
var guidParam = [["TARGET_GUID", target.guid]];
var bulkQuery = new BulkSqlQuery();
bulkQuery.addQuery("INSTANCE_INFO", "INSTANCE_INFO", guidParam);
bulkQuery.addQuery("CPU_USAGE", "CPU_USAGE", guidParam);
bulkQuery.execute(this.page.cb(this.queryResultHandler),
this.page.getBatchRequest());
// get processes metric to get process summary information
var procMetric = target.getMetric("CPUProcessesPerf");
var procSelector = procMetric.getSelector(['ProcUser', 'ProcCPU', 'ProcCmd']);
procSelector.getData(this.page.cb(this.processesHandler),
MetricCollectionTimePeriod.CURRENT, this.page.getBatchRequest());
var cpuPerf = target.getMetric("CPUPerf");
var cpuPerfSel = cpuPerf.getSelector(['system', 'idle', 'io_wait']);
cpuPerfSel.getData(this.page.cb(this.cpuDataHandler),
MetricCollectionTimePeriod.REALTIME, this.page.getBatchRequest());
// get associated host
var assocTypes = [ AssociationDataService.HOSTED_BY ];
target.getAssociatedTargets(assocTypes, this.page.cb(this.assocHandler),
this.page.getBatchRequest());
};
MultiServiceRequestor (バッチ・リクエスト)を作成し、作成した各リクエストにそれを渡すことによって、コントローラ・コードの他の場所でバッチ・リクエストを使用できます。たとえば、ページでのボタン・クリックへの応答で、情報を取得するためにManagement Serverへの2つのリクエストが作成されるとします。次の例に示すように、これらはそれぞれ別に実行されます(サーバーへの往復が2回行われることになります)。
例: 個々のバッチ・リクエストの作成
var procMetric = TargetContext.getTargetContext().getMetric("CPUProcessesPerf");
var procSelector = procMetric.getSelector(['ProcUser', 'ProcCPU', 'ProcCmd']);
procSelector.getData(this.page.cb(this.processesHandler),
MetricCollectionTimePeriod.CURRENT); // 1st round trip
var cpuPerf = TargetContext.getTargetContext().getMetric("CPUPerf");
var cpuPerfSel = cpuPerf.getSelector(['system', 'idle', 'io_wait']);
cpuPerfSel.getData(this.page.cb(this.cpuDataHandler),
MetricCollectionTimePeriod.REALTIME); // 2nd round trip
かわりに、次の例に示すように、複数のバッチ・リクエストを単一のバッチ・リクエストに結合して、Management Serverへの追加の往復を回避することもできます。
例: バッチ・リクエストの結合
var batchRequest = new MultiServiceRequestor();
var procMetric = TargetContext.getTargetContext().getMetric("CPUProcessesPerf");
var procSelector = procMetric.getSelector(['ProcUser', 'ProcCPU', 'ProcCmd']);
procSelector.getData(this.page.cb(this.processesHandler),
MetricCollectionTimePeriod.CURRENT, batchRequest);
var cpuPerf = TargetContext.getTargetContext().getMetric("CPUPerf");
var cpuPerfSel = cpuPerf.getSelector(['system', 'idle', 'io_wait']);
cpuPerfSel.getData(this.page.cb(this.cpuDataHandler),
MetricCollectionTimePeriod.REALTIME, batchRequest);
batchRequest.sendRequest(); // 1st and ONLY round trip!
注意:
バッチ・リクエストをコミットするには、sendRequest()メソッドを呼び出す必要があります。それ以外の場合、リクエストは送信されません。page.getBatchRequest()のPageController.initを使用する場合、MPCUIフレームワークで行われるため、これは必要ありません。
プラグインUIがソフトウェア・ライブラリ・エンティティに関する情報を必要とする場合、名前、ステータス、成熟度レベル、エンティティ属性など、様々な条件を使用して検索できます。SearchField列挙を使用して問合せ条件を指定すると、目的のエンティティをフィルタ処理できます。問合せ条件と一致するエンティティ・リビジョンを表すEntityInfoオブジェクトのリストが返されます。EntityInfoオブジェクトのURNは、エンティティ・リビジョンの一意な識別子として使用できます。エラーが発生した場合、ListSwlibEntitiesResult.errorMessageに設定されます。
// search the software library
var swSearch = new ListSwlibEntities();
swSearch.addSearchInput(new SearchInput(SearchField.NAME, "oracle"));
var swlib = Swlib.getSwLib();
swlib.listEntities(swSearch, Util.createProxy(this, this.swSearchHandler));
}
MyController.prototype.swSearchHandler = function(result, fault) {
var r, e;
if (fault != null) {
MpLog.logError(fault, "Search Software Library");
return;
}
for (var i=0; i<result.swlibEntitiesList.length; i++) {
var entity = result.swlibEntitiesList[i];
MpLog.info("Swlib Entity: "+entity.toString());
}
page.setModel("swlibContents", result.swlibEntitiesList);
};
MPCUIフレームワークのより強力な側面の1つは、目的のためにカスタマイズされたUIを介して、管理機能にアクセスする機能です。フレームワークでは、Enterprise Managerのジョブ・システムおよびジョブ・システムにアクセスするWebサービスを介して、管理タスクの処理をサポートします。
MPCUIでは、次のジョブ・サービスが提供されます。
Job.submit
Job.runSynchronous
JobExecution.getStatus
JobExecution.getDetails
JobExecution.stopJob
JobExecution.deleteJob
JobExecution.getJobDetailsURL
RemoteOp.performOperation
ジョブ・サービスによって、プラグイン・ターゲットに登録されたジョブを、処理のために発行できます。サービスは、現時点でのシステムのジョブ・タイプを発行する機能はサポートしていません。
ジョブ・サービスを介したジョブのスケジュールは、ジョブ・システムによってサポートされた一連の制限付きスケジュール・オプションをサポートします。ジョブ・スケジュールは次のオプションをサポートしています。
即時、一度、毎時、毎日、毎週、毎月、毎年
発行の繰返しの開始時間および終了時間
繰返しの回数および頻度
開始期間の猶予期間
管理リポジトリまたはターゲットのタイムゾーン
サポートされているジョブのパラメータ・タイプは、Vector、Scalar、LargeおよびValueOfです。
他のサービスと同様に、リクエストは非同期に発行されます。これには、リクエストが完了(または)失敗したときに呼び出されるハンドラを指定する必要があります。ジョブを発行すると、結果ハンドラが呼び出され、JobExecutionオブジェクトに渡されます。このオブジェクトには、発行されたジョブの処理コンテキストが含まれ、ジョブのステータスの取得や、ジョブにおける操作(停止や削除)に使用できます。
例: ジョブの発行
var job = new Job("backup", "MyBackup", null,
TargetContext.getTargetContext(),
[Job.jobParam("dsn", "AdminDS"), Job.jobParam("sql_cmd",stmt)],
JobSchedule.IMMEDIATE);
job.submit(this.page.cb(this.jobSubmitHandler));
}
MyController.prototype.jobSubmitHandler = function(exec, fault) {
// using exec (JobExecution) can now get current status of job,
// get step details, and start or stop the job
var execId = exec.getExecutionId();
};
ジョブがこの方法(submitメソッドを使用して)実行されると、ジョブは処理するために発行され、サービスは即時に返します。そのため、ジョブのステータスは、発行済から、実行中、完了に変更され、クライアントは、ステータスを定期的にチェックする必要があります。
ジョブ・サービスでも、即時処理のためにジョブを発行する方法が提供され、ジョブ実行が完了、失敗またはタイムアウトに到達するまで待機(同期的に)します。クライアント・ハンドラは、この状態に到達するまで呼び出されません。
例: 同期ジョブの実行
var job = new Job("backup", "MyBackup", null,
TargetContext.getTargetContext(),
[Job.jobParam("dsn", "AdminDS"), Job.jobParam("sql_cmd",stmt)],
JobSchedule.IMMEDIATE);
job.runSynchronous((this.page.cb(this.jobRunHandler), 30); // 2nd param is timeout
}
MyController.prototype.jobRunHandler = function(exec, fault) {
// using exec (SynchronousJobExecution) can get details about job execution;
// this handler will not be called until the job completes, fails
// or the timeout is reached
var execId = exec.getExecutionId();
};
タスク・インタフェースは、Job.submitJob APIに関連付けられたすべての追加設定を行う必要なく、即時処理のためのジョブを発行する、単純化された方法です。
例: タスクAPIの使用
var task = new Task("TTisql", null, [Job.jobParam("dsn", "AdminDS"),
Job.jobParam("sql_cmd",stmt)]);
task.execute(this.page.cb(this.createTableHandler), 10); // timeout is 10s
}
MyController.prototype.createTableHandler = function(result, fault) {
var status = result.getRunStatus();
if (status == JobStatus.RUNNING) {
// timed out while waiting for job... still running
同期ジョブの場合、ジョブのステータスは、ハンドラに渡された結果から即時に使用できます。ただし、それがJobStatus.RUNNINGと等しいかどうかを確認する必要があります。その場合、リクエストは指定したタイムアウトに到達しており、コール元は、ジョブ実行を非同期で発行されたように処理する必要があります。
ジョブの発行後に、ジョブのステータスや、ジョブ出力などの各ステップの詳細を取得するために使用できるAPIがあります。これらのAPIを使用するには、コール元は、有効なJobExecutionオブジェクトを持っている必要があり、これは、submitおよびrunSynchronous APIの結果ハンドラに渡されます。現在は、クライアントにジョブ実行の検索を許可するサービスはありません。
例: ジョブ・ステータスの取得
MyController.prototype.submitHandler(exec, fault) {
exec.getStatus(Util.createProxy(this, this.statusHandler));
};
MyController.prototype.statusHandler(status, fault) {
if(status.getStatus() === JobStatus.FINISHED)
発行されたジョブのジョブ・ステータスを取得するには、サービス・リクエストが必要であるため、結果とともに呼び出されるハンドラが必要です(リクエスト処理が失敗した場合、フォルトの可能性があります)。ジョブのステータスの他に、ジョブ・ステップの詳細を取得できます。
ジョブ詳細の取得
ステップ出力の詳細およびジョブ・ステータスを取得するには、発行ハンドラに渡されるJobExecutionオブジェクトを使用します。ジョブが失敗するか、ステップが完了しない場合、データは返されません。
同期ジョブ実行の場合、Job.runSynchronousまたはTask.execute callのハンドラは、ジョブ・ステータスを確認でき、完了した場合、結果からジョブ詳細を直接取得します。
MyController.prototype.createTableHandler = function(result, fault) {
var status = result.getRunStatus();
if(result != null && result.Status() === JobStatus.COMPLETED) {
var steps = result.getStepDetail();
for(var i=0; i<steps.length; i++) {
var detail = steps[i];
proc.addDetailText(detail.output);
}
非同期ジョブ実行の場合、Job.submitのハンドラは、JobExecution.getStatus、JobExecution.getDetailsの順に呼び出す必要があります。各コールには、サーバーへのリクエストが必要です。
MyController.prototype.submitJob = function() {
var params = [];
params.push(Job.jobParam("p0","p0value"));
var job = new Job(type, name, desc, TargetContext.getTargetContext(),
params, Job.immediateSchedule());
job.submit(this.page.cb(this.submitHandler));
};
MyController.prototype.submitHandler = function(result, fault) {
if(fault == null && result != null) {
// get the job status; calls the server
result.getStatus(oj.Object.createCallback(this, this.statusHandler));
}
};
MyController.prototype.statusHandler = function(result, fault) {
if(fault == null && result != null) {
if(result.getStatus() === JobStatus.COMPLETED) {
// now can get job output details
result.getJobExecution().getDetails(this.page.cb(this.detailsHandler));
}
}
};
MyController.prototype.detailsHandler = function(result, fault) {
if(fault == null && result != null) {
var steps = result.getStepDetail();
for(var i=0; i<steps.length; i++) {
var detail = steps[i];
proc.addDetailText(detail.output);
}
}
};
ジョブが非同期で発行されるか(Job.submit)、または同期的に実行されるが、リクエストがタイムアウトに到達した場合、JobStatus.RUNNINGのジョブ・ステータスが返されます。これは、ジョブがまだ実行中であることを示し、後で再度ジョブのステータスを確認してください。
コードの観点から最も簡単なのは、アプリケーションがジョブのステータスを確認するように、ユーザーが相互作用するUI要素を公開することです。たとえば、UIは、現在ステータスを確認中とラベル付けされたボタンまたはリンクを含む「実行中」インジケータを表示します。ユーザーがボタンまたはリンクをクリックすると、JobExecution.getStatusメソッドが呼び出され、更新されたステータスを取得します。
必要な相互作用パターンが、ジョブがバックグラウンドで実行中で、ジョブのステータスに関する情報を持つUIを定期的に更新中に、UIがアクティブなままであることである場合、MPCUIは、ジョブ・ステータスの期間チェックを実行するジョブAPIを提供します。各更新は、現在のステータスを処理し、その情報を持つUIを更新する機会をコール元に提供するハンドラを呼び出します。
MPCUI APIを介して発行されたジョブは、次のAPIを使用して、停止または削除できます。
例: ジョブの停止
MyController.prototype.stopJob = function(exec) {
// NOTE: the JobExecution must be a valid job context obtained from submitted a job
exec.stopJob(this.page.cb(this.stopJobHandler));
};
MyController.prototype.stopJobHandler = function(exec, fault) {
if(fault == null && exec != null) {
// job was successfully stopped
}
};
例: ジョブの削除
MyController.prototype.deleteJob = function(exec) {
// NOTE: the JobExecution must be a valid job context obtained from submitted a job
exec.deleteJob(this.page.cb(this.deleteJobHandler));
};
MyController.prototype.deleteJobHandler = function(exec, fault) {
if(fault == null && exec != null) {
// job was successfully deleted
}
};
Job.runSynchronous APIを使用して発行されたジョブの場合、deleteWhenFinishedパラメータをtrueに設定して渡すことによって完了すると、ジョブを削除できます。これは3番目のパラメータで、デフォルトはfalseです。
var job = new Job("backup", "MyBackup", null,
TargetContext.getTargetContext(),
[Job.jobParam("dsn", "AdminDS"), Job.jobParam("sql_cmd",stmt)],
JobSchedule.IMMEDIATE);
job.runSynchronous((this.page.cb(this.jobRunHandler), 30, true);
ジョブを使用して管理タスクを実行することは、スケジュールおよび制御(開始、中断または停止)の観点で最も柔軟性のあるアプローチですが、処理するタスクを管理するための追加のオーバーヘッドを伴います。スケジュールの制御が必要なく、迅速に実行されると思われる単純なタスクの場合、RemoteOpサービスを使用します。
このサービスによって、プラグインとパッケージ化されたスクリプトを、管理エージェントを介して直接実行できます。
注意:
スクリプトは、agent/ scriptsディレクトリで、プラグインとパッケージ化される必要があり(次の項で説明)、資格証明またはパラメータを処理する必要があります。
リモート操作のスクリプトのパッケージ化
リモート操作用のプラグインに含まれるスクリプトは、ステージング領域に含まれている必要があります。
stage/agent/scripts
必要な場合、/scriptsの下に追加のサブディレクトリを作成できます。この場所にあるスクリプトは、RemoteOpサービスを使用して、%scriptsDir%変数を参照することによって、参照できます。次に例を示します。
プラグイン・ステージング領域
./stage/agent/scripts/process/kill_process.pl
MPCUIコード(JavaScript)
var params = [
RemoteOp.param("%scriptsDir%/process/kill_process.pl"),
RemoteOp.param(pid) ];
var remoteOp:RemoteOp = new RemoteOp("perl", params);
remoteOp.performOperation(this.page.cb(this.killProcessHandler));
この例では、RemoteOpオブジェクトは、実行するシェル/コマンドと、そのシェルに渡すパラメータを使用して構成されています。最初のパラメータは、常に、実行するスクリプトの場所である必要があり、%scriptsDir%変数に関連する場所を参照しています。実行するスクリプトで必要な場合、後続のパラメータを追加します。
リモート操作を実行するには、RemoteOp.performOperationメソッドを呼び出し、リモート操作が処理を完了する際に呼び出される関数に渡します。このハンドラには、次のシグネチャがあります。
MyController.prototype.killProcessHandler = function(remoteOp, fault)
リモート操作が管理エージェントへの通信に失敗した場合、faultパラメータに、そのエラーの詳細が記述されます。リモート操作が処理された場合、faultはNULLになり、remoteOpパラメータが指定されます。
管理エージェントでのコマンドの実行中に返されるエラー・ステータスを示しているため、remoteOpパラメータのステータスを確認してください。次の例に、このチェックの実行を示します。
例: remoteOpパラメータ・ステータスのチェック
/**
* Check status; could be any number of problems some of which may result
* in step output, some of which (like missing creds) result in a non-successful
* run status but no step details.
*
* result.getRunStatus() - the status of the job, refer to Constants.JOB_*_STATUS
* result.getStepDetail().stepName/detail - name and output from each step in the job
* result.getJob() - the complete job Object, to reference parameters:
* result.getJob().parameter[0].paramName/paramValue[0]
*
*/
if(remoteOp.result.status !== Constants.JOB_COMPLETED_STATUS) {
// job did *NOT* complete successfully
var pid = remoteOp.getParameter(2).paramValue[0];
var msg = "Unable to successfully kill process ["+pid+
"]. The status of the command was: "
+Util.getCatString(Util.JOB_STATUS, remoteOp.result.status)
+"\nReturn Code: "+remoteOp.result.returnCode
+"\nCommand Output: "+remoteOp.result.commandOutput;
MessageAlert.show(msg, "Failed to Kill Process", Alert.OK);
} else {
// successful job execution; process was killed; can look at the
// step details to get possible output from the job
MpLog.debug("Command was successful: "
+"\nReturn Code: "+remoteOp.result.returnCode
+"\nCommand Output: "+remoteOp.result.commandOutput);
var tableId = $("#processesTable").data(CustomElement.MPCUI_CHILD_NODE).getChildNodeId();
// Get the table object
var ojt = $("#" + tableId).data(MetricDataBinding.BINDING_DATA);
ojt.refreshImmediate();
}
Enterprise Managerの資格証明モデルは、資格証明を必要とする操作を実行するための次の3つの異なるモデルをサポートします。
優先資格証明
特定の資格証明が、特定タイプの1つまたはすべてのターゲットに設定されます。このモードでは、ユーザーは、一連の資格証明を追加したり、資格証明の値を指定することはありません。
名前付き資格証明セット
一連の資格証明が、特定タイプの1つまたはすべてのターゲットに作成され、各セットに名前が割り当てられます。このモードでは、ユーザーは、名前付きセットのリストに表示され、操作を実行するために使用するセットを選択できます。
オーバーライド資格証明
このモードでは、ユーザーは、操作を実行するために使用する実行時の資格証明を指定できます。
MPCUIには、特定のターゲットに関する資格証明情報を取得する機能があります。このサービスは、現在のユーザーが参照する権限を持つ情報のみを返すことができます。これにより、セキュアな情報への未認可のアクセスがないことが保証されます。資格証明情報が、MPCUIコードにアクセスしているユーザーにとって使用できない状況についても、処理する必要があります。
ターゲットに優先資格証明セットがあるかどうかを確認するには、次のようにCheckPreferredCredsService.getPreferredCredsInfoメソッドを呼び出します。
var ccSvc = new CheckPreferredCredsService();
var target = TargetContext.getTargetContext();
ccSvc.getPreferredCredsInfo(target.name, target.type,
'HostCreds', this.page.cb(this.checkPrefCredsHandler));
サービスはCheckPreferredCredsResultオブジェクトを返し、これは、グローバル(すべてのターゲット・インスタンスのタイプに適用)またはインスタンス(単一のターゲット・インスタンスにのみ適用)のどちらの資格証明が使用可能であるかを示します。
MyController.prototype.checkPrefCredsHandler = function(result, fault) {
if(fault != null)
MessageAlert.show(fault.faultDetail, "Error Checking Preferred Creds");
else {
var msg = "Checked for Preferred Credentials for
target("+TargetContext.getTargetName()+","+
TargetContext.getTargetType()+" for set(HostCreds)
user("+ApplicationContext.getEmUser()+") \n"+
"Global Set = "+result.globalSet+" Instance Set = "
+result.instanceSet;
MessageAlert.show(msg, "Check Preferred Creds Result");
}
};
注意:
優先資格証明が設定されている場合、資格証明情報を渡すことなく、ジョブの発行やリモート操作の実行を行うことができます。この場合、優先セットが使用されます。
選択肢(リストまたはコンボ・ボックス)での名前付き資格証明セットの表示
プラグインで必要な表記規則に基づいた名前付き資格証明セットからの選択
次のコードでは、現在のターゲットの2つの異なる資格証明タイプに対してすべての名前付きセットをリクエストし、結果とともにcredSetResultHandlerハンドラを呼び出します。
var target = TargetContext.getTargetContext();
target.getCredentialSets(["HostCreds", "HostSampleCreds"],
this.page.cb(this.credSetResultHandler));
結果ハンドラは、名前付きセットの戻りを適切に使用できます(この例では、表に表示するデータソースを構築します)。
var credTableData;
if(creds.credSet != null) {
credTableData = creds.credSet.slice(0);
// check to see if there are sets for both types
var hostFound = false;
var sampFound = false;
for(var c=0; c<creds.credSet.length; c++) {
if(creds.credSet[c].credentialType === "HostCreds")
hostFound = true;
else if(creds.credSet[c].credentialType === "HostSampleCreds")
sampFound = true;
}
var missingType = ( !hostFound ? "HostCreds" : "HostSampleCreds" );
var empty = new CredentialSet();
empty.credentialType = missingType;
empty.name = "<No Sets Found>";
empty.guid = "";
credTableData.push(empty);
} else {
empty = new CredentialSet();
empty.credentialType = "<No Credential Sets Defined>";
empty.name = "";
empty.guid = "";
credTableData = [empty];
}
この項では、ジョブおよびリモート操作への優先資格証明および名前付き資格証明セットの受渡しについて説明します。
優先資格証明
実行するタスク(ジョブまたは操作)が優先資格証明の使用を試みた場合、タスクに渡される資格証明パラメータは省略されます。ジョブとリモート・操作の両方のサービスは、優先資格証明を使用したタスクの実行を試みます。優先資格証明が設定されていない場合、エラーが返されます。
名前付きセット
タスクの実行に名前付きセットを使用するよう指定するために、JobCredential (ジョブの場合)およびOpCredential (リモート操作の場合)で、資格証明が渡されます。どちらの場合も、資格証明オブジェクトには次の4つのプロパティがあり、それらを指定する必要があります。
targetName: 資格証明が適用されるターゲットで、通常はTargetContext.getTargetName()
targetType: 資格証明が適用されるターゲットのタイプで、通常はTargetContext.getTargetType()
usage: 操作に定義される、資格証明の使用方法(ジョブ・タイプ定義を参照)。この使用方法は、必要な資格証明タイプ、およびジョブの実行中に適用する場所を指定します。
credGuid: 使用する名前付きセットの識別子。これは、名前付き資格証明セットを保持する、CredentialSetクラスのプロパティの1つです。詳細は、「資格証明情報の取得」を参照してください。
MPCUIでは、エンドユーザーがタスク(ジョブまたはリモート操作)の実行時に使用可能な一連の資格証明を表示し、優先資格証明、名前付き資格証明またはオーバーライド資格証明を選択する、Enterprise Managerの資格証明サブシステムと相互作用できるページに含まれる資格証明リージョンが提供されます。
このリージョンをページに含めるには、次のHTMLを追加します。
例: 資格証明リージョンの追加
<mp-credentials-region id="creds" style=”width:40%;height:100%"
params=”targetName: appModel.target.name, targetType: appModel.target.type,
credentialType: ‘HostCreds’” ></mp-credentials-region>
ページに関連付けられたページ・コントローラから、エンドユーザーによってこのリージョンに適用された設定を取得します。
例: 選択した資格証明情報の取得
MyController.prototype.getCredsEntered = function(event) {
var creds = Util.def($("#creds").data(CredentialsRegionBinding.BINDING_DATA),
null);
if (creds == null) {
// This notation is for use with the <mp-credentials-display> tag
var credsId = $("#creds").data(CustomElement.MPCUI_CHILD_NODE).getChildNodeId();
creds = $("#" + credsId).data(CredentialsRegionBinding.BINDING_DATA);
}
var mode = creds.getMode();
var msg = "Credential Option Selected: "+mode+"\n";
var namedSet;
var credentials;
if (mode === CredentialsRegion.NAMED_MODE) {
namedSet = creds.getNamedSet();
msg += "Named Set Selected: "+namedSet;
} else if (mode === CredentialsRegion.OVERRIDE_MODE) {
try {
credentials = creds.getOverrideCredentials();
for(var c=0; c<credentials.length; c++)
msg += "Field:"+credentials[c].label+", "+credentials[c].value+"\n";
} catch(e) {
msg += "Error Entering Credentials:\n";
msg += e.message;
}
} else {
// preferred selected...
}
MessageAlert.show(msg, "Credentials Entered");
};
前の例では、ユーザーが優先資格証明、名前付き資格証明またはオーバーライド資格証明を選択したかどうかを決定するモードに注意してください。モードに応じて、名前付きセット(CredentialsRegion.getNamedSet())、またはオーバーライド資格証明(CredentialsRegion.getOverrideCredentials())を取得できます。
Targetクラスは、現在のターゲットの監視資格証明を取得および設定する機能を提供します。監視資格証明を取得するには、Targetクラスのインスタンスが必要で、getMonitoringCredentials関数が呼び出され、監視資格証明セットを含む資格証明メタデータを受け取る結果ハンドラを渡します。
// get monitoring credentials
target.getMonitoringCredentials(this.page.cb(this.getMonCredResultHandler),
this.page.getBatchRequest());
ハンドラは次のように表示されます。
MyController.prototype.getMonCredResultHandler = function(cred, fault) {
if(fault != null) {
if(cred != null && cred.isMissingCredentials()) {
// no monitoring credentials are set
MpLog.info("Monitoring Credentials have not been set: "+fault.faultDetail);
} else
MpLog.logError(fault, "Get Monitoring Credentials");
return;
}
/**
* The CredentialTypeMetadata returned includes the meta-data for the
* credentials as well as the actual values. NOTE: credentials never
* return the actual values for any field identified as a password it only
* returns the masked "****" value. You should never have any need to
* access the actual values for a password field as any time credentials
* are passed you are passing a credential set and don't need the actual
* values of a pre-existing credentials set
*/
var credFieldValues = cred.credentialSets[0].columnValues;
for(var i=0; i<credFieldValues.length; i++) {
var credField = credFieldValues[i];
MpLog.debug("Monitoring Credentials["+credField.label+"] = "+credField.value);
}
};
監視資格証明を設定するには、資格証明タイプに従った資格証明フィールドを、資格証明の監視用に指定します。これはターゲット・メタデータで定義されます。
/**
* the CredentialSet passed contains the monitoring credentials to be set.
* Note that only the columnValues property of the credentials needs
* to be set when updating monitoring credentials as the framework
* derives the values for the credential set and type. It is CRITICAL
* that the label set for each columnValue is the column NAME and not
* the display label for that column. The name is the identifier assigned
* to the credential column in the target meta-data.
*
* In the demo_hostsample, for example, the credentials fields are:
* name: SampleCredUser label: User Id
* name: SampleCredPassword label: Password
* name: SampleCredRole label: Role
*/
var monitoringCreds = new CredentialSet();
monitoringCreds.columnValues = [
new CredentialColumnValue("SampleCredUser", "myMonitoringUser"),
new CredentialColumnValue("SampleCredPassword", "myMonitoringPassword"),
new CredentialColumnValue("SampleCredRole", "myMonitoringRole")
];
var target = TargetContext.getTargetContext();
target.setMonitoringCredentials(monitoringCreds, Util.createProxy(this,
this.setMonCredResultHandler));
次に、ハンドラは次のように表示されます。
MyController.prototype.setMonCredResultHandler = function(cred, fault) {
if (fault != null) {
MpLog.logError(fault, "Set Monitoring Credentials");
return;
}
/**
* if the set monitoring credentials was successful then the handler is
* called with no fault and the set of credentials that were passed in
*/
};
セッション状態サービスは、カスタムUIに関連付けられたグローバル状態を格納する機能を提供します。これが有用なのは、カスタムUIを定義するHTMLページの外部のページ間をユーザーが移動する場合でも、現在のユーザーに対して状態を維持する必要がある場合です。たとえば、ユーザーがホームページの状態を変更して「すべてのメトリック」ページに移動し、その後、ホームページに戻ったときに、ユーザーが離れたときのページの状態を復元したい場合です。ユーザーがMPCUIカスタムUIを構成するページを離れたため、HTML/JS自体の内部ではなく、このユーザー・セッション用に確立されたサーバー側セッションで必要な状態を格納する必要があります。
セッション状態を設定するには、EmUser.setSessionData関数を呼び出し、SessionAttributesオブジェクトを渡します。セッション属性にはSessionAttributeオブジェクトの配列が含まれ、各オブジェクトは、格納されている属性に対して対応する名前と値のペアを持ちます。
CollectItemPageController.prototype.setSessionAttributes = function(modifier) {
var page = this.page;
var sessionData = new SessionAttributes();
var item1Value = page.getModel("item1Value");
var item2Value = page.getModel("item2Value");
sessionData.attributes.push(new SessionAttribute("attr1", item1Value));
sessionData.attributes.push(new SessionAttribute("attr2", item2Value));
EmUser.setSessionData(sessionData, page.cb(this.setSessAttrResultHandler));
};
CollectItemPageController.prototype.setSessAttrResultHandler = function(attr, fault) {
if (fault != null) {
MpLog.logError(fault, "Set Session Data");
return;
}
};
セッション状態を取得するには、対応するEmUser.getSessionDataサービス関数を使用します。この関数は、SessionAttributesのリストと、結果とともに呼び出されるハンドラを渡すことでリクエストされるセッション状態を取得します。これは同じSessionAttributesになり、セッションから取得されたデータが移入されます。
CollectItemPageController.prototype.getSessionAttributes = function(modifier) {
var sessionData = new SessionAttributes();
sessionData.attributes.push(new SessionAttribute("attr1"));
sessionData.attributes.push(new SessionAttribute("attr2"));
EmUser.getSessionData(sessionData, this.page.cb(this.getSessAttrResultHandler), modifier);
};
CollectItemPageController.prototype.getSessAttrResultHandler = function(attr, fault) {
var page = this.page;
if (fault != null) {
MpLog.logError(fault, "Get Session Data");
return;
}
for (var i=0; i<attr.attributes.length; i++) {
var item = attr.attributes[i];
if (item.name === "attr1") {
page.setModel("lastItem1Value", item.value);
} else if (item.name === "attr2") {
page.setModel("lastItem2Value", item.value);
}
}
};
ブラウザ・ウィンドウのサイズ変更時にMPCUIページが適切にリサイズされることを保証するために、MPCUIベースのページのページ・レイアウトに関する次のガイドラインをお薦めします。
mp-rowおよびmp-columnのコンテナを使用します
heightおよびwidthはサイズの割合で設定できます。
mp-rowおよびmp-columnは、柔軟なボックス(flexbox)レイアウト標準を使用するため、flexbox設定を使用してコンポーネントをレイアウトすることもできます
たとえば、3行で、それぞれがページの高さの3分の1を占めるレイアウトを作成するには、HTMLファイルに次のように入力します。
例: 3行のページ・レイアウトの定義
<mp-column style=”height:100%;width:100%">
<!-- 1st row -->
<mp-row style=”height:33%;width:100%">
</mp-row>
<!-- 2nd row -->
<mp-row style=”height:33%;width:100%">
</mp-row>
<!-- 3rd row -->
<mp-row style=”height:33%;width:100%">
</mp-row>
</mp-column>
次に、各行を、2つの均等に分かれたセクションに水平に分割するには、次のように入力します。
例: 2つの均等なセクションへの行の分割
<mp-column style=”height:100%;width:100%">
<!-- 1st row -->
<mp-row style=”height:33%;width:100%">
<mp-column style=”height:100%;width:50%" >
</mp-column>
<mp-column style=”height:100%;width:50%" >
</mp-column>
</mp-row>
<!-- 2nd row -->
<mp-row style=”height:33%;width:100%">
<mp-column style=”height:100%;width:50%" >
</mp-column>
<mp-column style=”height:100%;width:50%" >
</mp-column>
</mp-row>
<!-- 3rd row -->
<mp-row style=”height:33%;width:100%">
<mp-column style=”height:100%;width:50%" >
</mp-column>
<mp-column style=”height:100%;width:50%" >
</mp-column>
</mp-row>
</mp-column>
注意:
割合を使用してページをレイアウトする場合は、heightおよびwidthを階層のすべてのレベルで割合で設定することが重要です。そうしないと、HTMLは割合が適用されるコンテナを混同してしまいます。パネルは、開いたり閉じたりできるタイトルを持つ視覚的なボックスです。たとえば、3行のページ・レイアウトの定義の例では、各行は、垂直方向のコンテナではなく、別々のパネルに分割されます。
例: パネルの定義
<mp-column style=”height:100%;width:100%">
<!-- 1st row -->
<mp-row style=”height:33%;width:100%">
<mp-panel style=”height:100%;width:50%" params=”title: ‘Row 1 Region 1’" >
</mp-panel>
< mp-panel style=”height:100%;width:50%" params=”title: ‘Row 1 Region 2’" >
</mp-panel>
</mp-row>
<!-- 2nd row -->
<mp-row style=”height:33%;width:100%">
<mp-panel style=”height:100%;width:50%" params=”title: ‘Row 2 Region 1’" >
</mp-panel>
< mp-panel style=”height:100%;width:50%" params=”title: ‘Row 2 Region 2’" >
</mp-panel>
</mp-row>
<!-- 3rd row -->
<mp-row style=”height:33%;width:100%">
<mp-panel style=”height:100%;width:50%" params=”title: ‘Row 3 Region 1’" >
</mp-panel>
< mp-panel style=”height:100%;width:50%" params=”title: ‘Row 3 Region 2’" >
</mp-panel>
</mp-row>
</mp-column>
前の例の結果として、図9-9のように表示されます。各パネルを使用して、意味のある情報を表示するための他のUIコンポーネント(表やグラフなど)を含めることができます。詳細な例は、拡張開発キットにあるデモ・サンプルの例を参照してください。
MPCUIでは、単一の単純なタグを使用してページに含めることができるいくつかのパッケージ化されたリージョンが提供されます。
可用性リージョンは、mp-availabilty-regionタグのdaySpanプロパティで指定した期間の、ターゲットの可用性を表示します。同じ期間の、ターゲット可用性の詳細(停止など)を示す、セグメント化された棒グラフで表示されます。
<mp-availability-region style=”width:25%;height:100%" params=”daySpan:1"> </mp-availability-region>
インシデントのリージョンには、現在のターゲットおよび関連するすべてのターゲットの、一連のオープン・インシデントが表示されます。表示されたインシデントのリストをフィルタ処理するオプションが提供されています。リージョンに必要な設定は、サイズ(幅/高さ)のみです。
<mp-incident-region style=”width:50%;height:100%"></mp-incident-region>
ジョブ・サマリーのリージョンには、ステータス別のジョブ数が表示されます。
<mp-job-summary-region style=”width:20%;height:100%"></mp-job-summary-region>
MPCUIは、JETで設定されているグラフ標準をサポートしています。JETでサポートされているグラフ・タイプはすべて自由に使用できます。MPCUIは、特に3つのグラフ・タイプをサポートしています。これらのグラフ・タイプにはすべて、メトリック・プロパティを指定してメトリック情報を表示するための不可欠なサポートがあります。さらに、SQLDataServiceなどの他のサービスから取得した情報を使用して、グラフに独自のデータを構築し、それをdataServiceプロパティを使用してグラフにマップすることができます。
次に示す各グラフ・タイプの例および説明は、各グラフで使用できる様々なオプションの簡単なサマリーです。各グラフのプロパティの完全な説明は、APIドキュメントを参照してください。実行時のこれらのグラフの操作方法の例は、拡張開発キットにあるデモ・サンプルを参照してください。
通常、折れ線グラフには、一定期間の情報が表示されますT(時系列グラフと呼ばれることも多くあります)。そのため、メトリック情報を履歴またはリアルタイムで表示する際に役立ちます。グラフには、グラフで表示するmetricNameおよびmetricColumns (配列)を指定するプロパティ、および、履歴データまたはリアルタイムのサンプル・データを表示するために設定できるtimePeriodプロパティが含まれます。timePeriodをREALTIMEに設定すると、グラフは、自動ポーリング・リクエストを管理し、新しいサンプルが到着するとグラフ・データを更新します。
<mp-section id="loadChartSection" params="title: getString('CPU_LOAD')"
style="width:75%" >
<mp-chart id="loadChart" style="height:100%;width:100%"
params="mpChart: {
type: 'line',
dataSelection: 'multiple',
emptyText: 'No data',
yAxis: {min: 0, max: 2},
styleDefaults: {colors: Colors.DEFAULT_COLORS},
animationOnDisplay: 'auto',
targetName: appModel.target.name,
targetType: appModel.target.type,
metricName: 'Response',
metricColumns: ['Load'],
timePeriod: 'LAST_DAY'}"
></mp-chart>
</mp-section>
折れ線グラフを使用して描画されるメトリックを指定する他に、データを表示するグラフで使用する独自のデータソースを作成できます。たとえば、SQLデータ・サービスまたは他の方法(ポーリング・サービスを使用したり、グラフに追加するデータ・サンプルを作成するなど)で取得されたデータです。
次の例では、ページには、ページ・コントローラに構築されるページ・モデル内のアイテムにマップされたcustomDataSourceを持つグラフが含まれます。
ProcessesPage.html
<mp-chart id="lchart_from_custom" style="height:100%;width:100%"
params="mpChart: {
type: 'line',
customDataSource: model().cpuChartData,
emptyText: 'No data',
animationOnDisplay: 'auto'}"
>
</mp-chart>
ProcessesPageController.js (initメソッド)
// setup a data provider for the CPU line chart; it will be
// updated each time a new data sample comes back for this metric
// first get the polling context for a 15 second interval
var pollingCtx =
page.pollingContext.getContext(PollingInterval.EVERY_15_SECONDS);
// now get the metric to be selected and initiate the request (won't start until
// "startPolling" is called)
var cpuPerf = TargetContext.getTargetContext().getMetric("CPUPerf");
var cpuPerfSel = cpuPerf.getSelector(['system', 'idle', 'io_wait']);
cpuPerfSel.getData(page.cb(this.cpuDataHandler),
MetricCollectionTimePeriod.REALTIME, pollingCtx);
// start polling; this will automatically stop when user moves to another page
pollingCtx.startPolling();
ProcessesPageController.js (cpuDataHandlerメソッド)
ProcessesPageController.prototype.cpuDataHandler = function(cpuData, fault) {
var page = this.page;
if (fault != null || result.errorMessage != null) {
MpLog.logError(fault, "Getting CPU Data via Metric Service");
return;
}
var cpuData = page.getModel("cpuChartData");
if (cpuData == null) {
cpuData = new CustomDataSource(["Sys/IO", "Idle %"], false, true);
page.setModel("cpuChartData", cpuData);
}
var cpuPt = result.results[0];
var cpuSys = cpuPt.data[0]['system'];
var cpuIO = cpuPt.data[0]['io_wait'];
var cpuIdle = cpuPt.data[0]['idle'];
var derivedCpu = cpuSys+cpuIO;
cpuData.setTimestampedRow(cpuPt.timestamp, [derivedCpu, cpuIdle]); };
すべてのグラフには、グラフで示すアイテムを表示する凡例を含めることができます。次の例を使用して、4つの場所(上、下、始まり、終わり)のいずれかに凡例を配置します。凡例の設定は、JETインタフェースの一部として管理され、JET APIドキュメントに記載されています。
<mp-chart id="lchart" style="height:100%;width:100%"
params="mpChart: {
type: 'line',
customDataSource: model().cpuChartData,
emptyText: 'No data',
legend: {position: ‘bottom’},
animationOnDisplay: 'auto'}"
>
</mp-chart>
面グラフは、折れ線グラフに類似しており、同じ属性を持っています。これは、LineChartと同じ方法で、データを表示します。showCumulativeLineプロパティは、面グラフの表示を制御します。ほとんどの面グラフでは、積上げまたは累積の面グラフを表示するために、このプロパティをtrueに設定して含める必要があります。それ以外の場合、面グラフは、グラフに含まれる各時系列の塗りつぶしの領域を重ね合せます。
<mp-chart id="cpuutil" style=”width:100%;height:100%"
params=”mpChart: {
type: ‘area’,
metricName: ‘CPUProcessorPerf’,
metricColumns: ['CPUIdle'],
timePeriod: ‘LAST_DAY’}">
</mp-chart>
棒グラフは、視覚的な属性およびデータソースの制御の指定について、列グラフと同じプロパティを公開します。
<mp-chart id="spaceChart" style=”width:100%;height:100%"
params=”mpChart: {
type: ‘bar’,
orientation: ‘horizontal’,
timePeriod: ‘CURRENT’,
groupBy: ‘byKey’,
metricName: ‘MSSQL_Database’,
metricColumns: ['spaceavailable']}">
</mp-chart>
groupByプロパティ(棒グラフおよび列グラフで使用可能)によって、データをキーまたは列ごとにまとめることができます。データ・セットにキーが含まれない場合、デフォルト(列ごと)が適用されます。
次の例では、groupByプロパティはbyColumnに設定されています。これにより、図9-15に示すように、2つの列のグループが作成され、それぞれが各データ列用になり、各グループに3つのすべてのキーが表示されます。
例: 列でグループ化
<mp-chart id="userBarChart" style=”width:100%;height:100%"
params=”mpChart: {
type: ‘bar’,
orientation: ‘horizontal,
customDataSource: model().userData,
groupBy: ‘byColumn’}">
</mp-chart>
次の例では、groupByプロパティはbyKeyに設定されています。これにより、図9-16に示すように、3つのグループが作成され、それぞれが各キー用になり、各グループに両方の列(データ項目)が表示されます。
例: キーでグループ化
<mp-chart id="userBarChart" style=”width:100%;height:100%"
params=”mpChart: {
type: ‘bar’,
orientation: ‘horizontal,
customDataSource: model().userData,
groupBy: ‘byKey’}">
</mp-chart>
棒グラフのデフォルト設定は縦棒に設定されています。これは、視覚的な属性およびデータソースの制御の指定について、横棒グラフと同じプロパティを公開します。
<mp-chart id="brChart" style=”width:100%;height:100%"
params=”mpChart: {
type: ‘bar’,
metricName: ‘CPUProcessorPerf,
metricColumns: [‘CPUIdle’],
timePeriod: ‘LAST_DAY’,
groupBy: ‘byKey’}">
</mp-chart>
次の例では、コードは、メトリック名およびメトリック列を指定することによって円グラフを構築します。MPCUIフレームワークは、Management Serverからから情報を取得するために必要なリクエストを実行し、値をグラフに移入します。
注意:
metricColumns属性では、グラフの上部にあるコンボ・ボックスの値を変更するユーザーへの応答として、コントローラに値を設定します(HomePageController.jsの例を参照)。
<mp-chart id="memChart" style="height:calc(100% - 35px);width:100%"
params="mpChart: {
type: 'pie',
dataSelection: 'multiple',
styleDefaults: {colors: Colors.DEFAULT_COLORS},
targetName: appModel.target.name, targetType: appModel.target.type,
metricName: 'MemoryPerf', metricColumns: model().memChartColumns,
timePeriod: 'CURRENT',
emptyText: 'No data',
animationOnDisplay: 'auto'}"
>
</mp-chart>
次の各項では、表を定義する様々な方法について、各方法の例を示して説明します。
次の例では、metricNameおよびmetricColumnsを指定することによって、表をMetricDataServiceにマップします。メトリック列ラベルが入力されているため、列にheaderText属性を指定する必要はありません。必要な場合、これらのラベルをオーバーライドできます。
例: MetricDataServiceへの表のマッピング
<mp-section id="fsrowc2" params="title : ''" style="width:65%">
<mp-section id="fsrowc2sec" style="height:10%" params="title : ''">
<div id='toolbar-container' class="mp-flex-item" style="height:100%;width:100%">
<div id="myToolbar" aria-controls="player" style='float:right'
data-bind="ojComponent: {component:'ojToolbar',
tableId: 'processesTable'}">
<button id="killProcessButtonJ"
data-bind="mpTableAdminButton: {
label: 'Kill (Job)',
adminClick: cb(controller.killProcess, true, false)
}">
</button>
</div>
</div>
</mp-section>
<mp-section id="fsrowc2sec2" style="height:90%" params="title : ''">
<mp-table id="processesTable"
params="mpTable: {
selectionMode: {row: 'single', column: 'multiple'},
metricName: ‘CPUProcessesPerf’,
metricColumns: ['ProcUser', 'ProcCPU', 'ProcCmd'],
timePeriod: ‘REALTIME’,
interval: 30,
dataUpdateListener: cb(controller.processesTableUpdated)
}, mpPagingControl: { pageSize: 15 }">
</mp-table>
</mp-section>
</mp-section>
注意:
mpPagingControlは、ページング用のJET APIと同じ入力を使用します。このインタフェースは、これらの設定をmp-tableタグのパラメータに直接含めますが、ここではドキュメントに記載されているすべてのJET設定を自由に使用できます。次の例では、表のデータはコントローラにロードされ、ページ・モデルprocessInfoDataアイテムにマップされます。processInfoDataは、(任意のタイプの)オブジェクトの配列です。各列に指定されたfieldプロパティは、各列に表示されるパブリック・プロパティを識別します。この場合、フィールド名はheaderTextとしても使用されます。このラベルをオーバーライドするheaderTextプロパティを指定できます。
例: processInfoDataアイテムへの表のマッピング
<mp-table id="processInfoTable" style=”width:100%;height:100%"
params=”mpTable: {
customDataSource: model().processInfoData,
columns: [
{headerText: 'Process ID', field: 'Process ID', id: 'pid', headerStyle: 'width:100px'},
{headerText: 'User', field: 'User', id: 'User', headerStyle: 'width:250px'},
{headerText: 'Database', field: 'Database', id: 'Database', headerStyle: 'width:100px'},
{headerText: 'Status', field: 'Status', id: 'Status', headerStyle: 'width:100px'},
{headerText: 'Command', field: 'Command', id: 'Command', headerStyle: 'width:250px'},
{headerText: 'CPU Time', field: 'CPU Time', id: 'CPUTime', headerStyle: 'width:100px'},
{headerText: 'Memory Usage', field: 'Memory Usage', id: 'MemoryUsage', headerStyle: 'width:100px'}
]}"
>
</mp-table>
表で現在選択されている行は、JET表のselectionプロパティから取得できます。このプロパティはJET APIドキュメントに記載されており、開始索引値および終了索引値のみが含まれ、実際のデータは含まれていません。これらの索引値は、表オブジェクトまたはページ・モデルから取得して、基礎となるデータ・オブジェクトにマップする必要があります。
// Get the child node in the mp-table
var tableId=$("#processesTable").data(CustomElement.MPCUI_CHILD_NODE).getChildNodeId();
// Get the get the selection object from the JET table (child node)
var selection = $("#" + tableId).ojTable("option", "selection");
var selectionRow = (selection == null) ? null : Util.def(selection[0], null);
if (selectionRow == null) {
MessageAlert.show("No process has been selected. Select the process to stop from the table below.", "No Process Selected");
return;
}
// The selection object is documented in the JET API reference, but it contains no
// data, only index references into the underlying data object.
var selectionRowIdx = selectionRow.startIndex.row; // Single row, startIndex=endIndex
// Access the underlying data object
var rawTableData = table.ojTable("option", "data");
var processPromise = rawTableData.at(selectionRowIdx);
processPromise.then(Util.createProxy(this, this.confirmPromiseHandler));
ダイアログを構築する場合は、通常、mp-dialogタグを使用してHTMLコンテンツを開始するHTMLファイルのみを必要とします。
invokeActivityメソッドを使用して表示されるダイアログを使用可能にするには、ダイアログを統合クラスの一部として、アクティビティに登録する必要があります。次の例では、次のことに注意してください。
id属性: IDは、アプリケーション内の他のアクティビティからこのダイアログを詳細するために使用されます。これは、アプリケーションに含まれるすべてのアクティビティ全体で一意である必要があります。
dialogClass属性: dialogClass属性は、このダイアログ用の実装であるHTMLへの参照です。
inputParamsはオプションですが、入力パラメータが必要で、コンテキストとしてのオブジェクトをBeanディレクティブを使用してHTMLから直接渡す場合は、ダイアログを再利用できます。MPCUIフレームワークは、入力オブジェクト・パラメータをダイアログ・パラメータにマップします。
inputParamsをダイアログ定義の一部として定義しない場合、ダイアログで必要な入力データ(カスタム・プロパティなど)は、JavaScriptで設定し、Dialog.showメソッドを使用して表示されるダイアログとする必要があります。
例: ダイアログの登録
<mp:DialogActivityDef id='metricHistory' label='Metric History'
dialogClass='dhs/MetricHistoryDialog' >
<mp:inputParams>
<mp:InputParam name='targetName'/>
<mp:InputParam name='targetType'/>
<mp:InputParam name='metric'/>
<mp:InputParam name='columns'/>
<mp:InputParam name='period'/>
<mp:InputParam name='title'/>
</mp:inputParams>
</mp:DialogActivityDef>
ダイアログに、ダイアログのクローズ時に必要な状態が含まれる場合、クローズ・ハンドラをinvokeActivityメソッドに渡すことができます。このハンドラは、CloseEventを使用して呼び出されます。このハンドラは、ダイアログをクローズするために押されたボタンを特定し、ダイアログ・オブジェクト自体を取得して、そこから情報を取得します。
例: クローズ・イベントの待機
HomePageController.prototype.showRpmDialog = function(data, event) {
this.page.invokeActivity('rpmInfoDialog', null, this.page.cb(this.rpmInfoDone));
};
HomePageController.prototype.rpmInfoDone = function(event) {
...
};
前の例では、rpmInfoDone関数はinvokeActivityに渡されます。ダイアログがクローズすると、メソッドが呼び出され、CloseEventに渡されます。
トレインは、各ステップ間をナビゲートするための次と前のボタンを持つ、複数ステップのUIの定義を許可します。トレインは、通常、ユーザーがカテゴリにまとめることができる多くの属性を持つエンティティを作成または変更しようとする場合に、使用されます。
トレインは、統合メタデータに登録する必要があり、トレインには、TrainControllerおよびトレイン内の各ステップのページを拡張し、mp-train-step-pageタグを使用するコントローラがあります。 各ステップ(トレイン・ステップ・ページ)は、独自のコントローラ・クラスを持つことができます。各ステップはコントローラを持つページでであるため、レイアウト、データの管理およびステップ内のイベントへの応答は、アプリケーション内の他のページとまったく同じです。ページの詳細は、「ページ」を参照してください。
トレイン・ステップ・コントローラは、TrainStepPage.trainプロパティを参照することによって、トレイン自体にアクセスできます。トレイン・オブジェクトまたはそれのモデル内で保持されている他の情報にアクセスするには、これを使用します。
次の例にトレインの定義を示し、その次の例にトレインを示します。
例: トレインの定義
<mp:TrainActivityDef id='addNewUserEmbeddedTrain' label='Add New User'>
<mp:stepActivities>
<mp:TrainStepActivityDef id='anuStep1' label='User Info' pageClass='dhs/user/UserInfo' pageControllerClass='dhs/user/AddNewUserTrainStepController'/>
<mp:TrainStepActivityDef id='anuStep3' label='Credentials' pageClass='dhs/user/Credentials' pageControllerClass='dhs/user/AddNewUserTrainStepController'/>
<mp:TrainStepActivityDef id='anuStep2' label='Expiry' pageClass='dhs/user/Expiry' pageControllerClass='dhs/user/AddNewUserTrainStepController'/>
<mp:TrainStepActivityDef id='anuStep4' label='Schedule' pageClass='dhs/user/Schedule' pageControllerClass='dhs/user/AddNewUserTrainStepController'/>
<mp:TrainStepActivityDef id='anuStep5' label='Notifications' pageClass='dhs/user/Notifications' pageControllerClass='dhs/user/NotificationsTrainStepController'/>
<mp:TrainStepActivityDef id='anuStep6' label='Confirmation' pageClass='dhs/user/Confirm' pageControllerClass='dhs/user/AddNewUserTrainStepController'/>
</mp:stepActivities>
</mp:TrainActivityDef>
トレイン・コントローラは、トレイン内のすべてのページで保持される状態を管理し、トレインの変更(ステップ間の移動)に応答し、ユーザーが「終了」または「取消」ボタンをクリックしたときに完了するトレインに応答するために使用されます。
状態は、Train.modelプロパティを使用して、トレイン・モデルに保持されます。このプロパティは、トレインに適した情報を保持するために使用できる動的プロパティです。個別のページは、独自のモデル・プロパティの独自の状態を格納でき、トレイン・モデルに格納された情報にアクセスすることもできます。
各トレイン・ステップ・コントローラは、ステップの開始または停止時に呼び出されるinitメソッドおよびdestroyメソッドを実装できます。ステップは、次のいずれかを行うことができます。
ステップ固有の処理ステップの実行
トレインへのアクセスおよびトレインへのより高いレベルのロジック処理の許可
トレイン・コントローラは、トレインが完了したイベントに対してリスナー関数を追加することによってトレインが終了(「終了」または「取消」)した場合にも、呼び出すことができます。
例: リスナー関数の追加
// register a listener for the train complete event, this may be a cancel or finish. train.addEventListener(TrainEvent.TRAIN_EVENT, trainDone);
リスナー(前の例のtrainDone)は、トレインの状態を調べて、処理を続行するかどうかを決定できます。これは、他のアクティビティ(ページ)への制御を指示するよう選択したり、トレインを別のステップに戻すよう設定することができます。
例: トレインの最後のアクションの定義
MyTrainController.prototype.trainDone = function(event) {
// train cancel/finish button was pressed, so caller can now validate
// the train (look at the model). The caller has the various options indicated below.
var train = event.train;
if(train.getModel("isComplete")) {
// want to end the train, but go somewhere else (otherPage is a page id)
train.endTrain("otherPage");
} else {
// go back to train at a certain step
train.controller.setStepById("step2");
}
};
InfoDisplayクラスおよびInfoItemクラスによって、ラベルを右に配置し、値を左に配置したグループで、一連のラベルと値のペアを表示できます。表示の各エントリ(InfoItem)は、ラベル、値、オプションのアイコン、宛先またはクリック・プロパティを指定します。
宛先またはクリック・プロパティによって、値はリンクとして表示されます。宛先は、次のいずれかに設定できます。
他のアクティビティ(ページまたはダイアログ)の識別子である文字列
コントローラに構築されたURLオブジェクト(例は、HomePage.htmlおよびHomePageController.jsなどを参照)
宛先ではなくクリック・ハンドラを指定して、ユーザーがアイテムをクリックしたときに呼び出されるコントローラ内の関数にそれを設定できます。
例: ラベルと値のペアの定義
<mp-info-display>
<mp-info-item id="cpuModel" params="label : getString('CPU_MODEL'),
value: model().configData().cpuModel"></mp-info-item>
<mp-info-item id="cpuIdle" params="label : getString('CPU0_IDLE'),
value: procData.result.getString('0','CPUIdle'),
imageRenderer: rendererFactory.get('CHECK_MARK',
bean('type','number','warning','95','critical','99'))
"></mp-info-item>
<mp-info-item id="osVersion" params="label : getString('OS_VERSION'),
value: model().configData().osVersion"></mp-info-item>
<mp-info-item id="hostedBy" params="label : getString('HOSTED_BY'),
value: model().host().info().name "></mp-info-item>
</mp-info-display>
表列、ヘッダー、およびJETフレームワークが提供する機能を使用する他のUI要素用にカスタム・レンダラを定義する機能に加えて、MPCUIフレームワークは、表内またはInfoItem用にカスタム・アイコンを表示するために使用できるいくつかの組込みレンダラも提供します。
これらの組込みレンダラは、TableコンポーネントまたはInfoItemコンポーネントに、テキスト値のかわりにアイコンを表示します。HTMLでrendererFactoryを直接使用することでレンダラを指定し、レンダラIDを指定してレンダラを選択し、次にレンダラ・タイプに応じてレンダラ用の入力パラメータ・セットを選択します。
たとえば、次のコードでは、InfoItem上の値の横にアイコンが表示され、InfoItemに表示される値に応じてチェック・マーク、警告またはエラー・アイコンが表示されます。
<mp-info-item id="cpuIdle" params="label: getString('CPU0_IDLE'),
value: procData.result.getString('0','CPUIdle'),
imageRenderer: rendererFactory.get('CHECK_MARK',
bean('type','number','warning','95','critical','99'))
"></mp-info-item>
最初のパラメータCHECK_MARKは、使用するレンダラを示します(次の完全なリストを参照)。2番目のパラメータbeanには、チェック・マーク・レンダラの入力パラメータを指定します。このパラメータは異なり、場合によっては、選択したレンダラに応じてオプションになります。入力パラメータに必要とされる各レンダラの詳細は、APIドキュメントを参照してください。
組込みレンダラには次のものが含まれています。
CHECK_MARK
指定された値に応じて、チェック・マーク、警告アイコンまたはエラー・アイコンを表示します。レンダラを使用すると、ブール値が表示される場合にチェック・マークまたはエラー・アイコンを表示できます。ブール値は、true/false、t/f、または0/1にできます。タイプ・パラメータを数字として指定した場合、値は、入力パラメータに指定されたしきい値と比較されて、次のものが指定しきい値を超えている場合に異なるアイコンも表示します。
TARGET_TYPE
ターゲット・タイプ値に関連付けられたアイコンを表示します。これは、内部ターゲット・タイプID (oracle_databaseなど)であり、ターゲット・タイプが実際に表示されている文字列表現ではありません。
TARGET_STATUS
ステータス値に関連付けられたアイコンを表示します。ステータス値は、up/down、true/falseまたは0/1になり、その値に応じて、上向き矢印または下向き矢印を表示します。
レンダラがInfoItemに関連付けられている場合、InfoItemにデフォルトで表示される値は、レンダラに渡されて、どのアイコンを表示するかを決定します。別の値を使用してレンダラを制御する必要がある場合、InfoItemはimageDataSourceプロパティを提供します。このプロパティは、表示されている値とは異なるデータ・アイテムにバインドできます。
リンク・コンポーネントを使用して、URLへのリンクとなるユーザーに示すものを表示します。リンクは、ラベル・プロパティを指定し、宛先またはクリック・ハンドラ・プロパティのいずれかも指定します。宛先は、コントローラで構築されるアクティビティIDまたはURLオブジェクトになります。 InfoItemクラスの詳細は、「情報アイテムと情報表示(ラベルと値のペア)の定義」を参照してください。
Enterprise Manager製品に付属のイメージの1つをHTMLから参照するには、appModel.emImage関数を使用して目的のイメージを参照します。イメージとそのファイル名のリストは、現在はEnterprise Manager EDKの一部ではないため、変更されることがあります。
Enterprise Managerの新しいリリースごとに、この情報の使用を検証およびテストする必要があります。通常のデプロイメントでは、イメージはemcore_war/imagesディレクトリの下にあります。次に例を示します。
<img data-bind=”attr: {src: appModel.emImage('yellowFlag.gif')}" />
UIは、次の場合に、処理カーソルまたはビジー・カーソルを自動的に表示します。
新しいアクティビティへのアクセス(ページ、トレインまたはダイアログ)
Management Serverへのデータに関するリクエストの発生
通常、ビジー・カーソルを表示する必要はありません。ただし、ビジー・カーソルを表示する必要があると思われる場合は、カーソルが正常に終了するよう注意してください。ビジー・カーソルの表示中に例外がスローされた場合、例外が捕捉され、カーソルが削除されたことを確認します。
カーソルを表示するには、MpCursor.setBusyCursorメソッドを呼び出します。
カーソルを削除するには、MpCursor.removeBusyCursorを呼び出します。両方のメソッドは、オプションのownerパラメータを受け入れます。このパラメータによって、複数のカーソル呼出しをネストできます。
ターゲット・タイプ・アイコンが表示される場所(ターゲット・メニューの隣など)にはどこでも、Cloud Controlコンソールで表示されるターゲット・タイプに関連付けるアイコンを指定できます。
MPCUIは、アイコンの次のグラフィック形式をサポートします。
PNG
JPG
GIF
アイコンには、次のサイズ指定をお薦めします。
小さいアイコン: 16x16
大きいアイコン: 24x24
アイコン・ファイルをplugin_stage/oms/metadata/mpcuiディレクトリに保存します。プラグイン・ステージング・ディレクトリの詳細は、「プラグインのステージング」を参照してください。
例: アイコンの定義
<EmuiConfig>
<large-icon>demo_hs_large_icon.png</large-icon>
<small-icon>demo_hs_small_icon.png</small-icon>
</EmuiConfig>
図9-24および図9-25に、小さいアイコンおよび大きいアイコンの例を示します。
図9-24 小さいアイコン
図9-25 大きいアイコン
ターゲット・ナビゲータは、任意のコンポジット・ターゲットまたはそのメンバーのホームページの左側に表示できます。ターゲット・ナビゲータは、ルートにコンポジット・ターゲットを表示し、その下のcontainsアソシエーションを検索することによって、コンポジットのすべてのメンバーを表示します。コンポジット・ターゲットに関連付けられたターゲットは、コンポジット・ターゲットまたは他のターゲットとの別のnon-containsアソシエーションを持つことができます。ただし、コンポジット・ターゲットとのcontainsアソシエーションを持つターゲットのみが、ターゲット・ナビゲータに表示されます。アソシエーションの検出または導出のサポートされたメカニズムを介して、これらの包含アソシエーションを追加できます。詳細は、「導出されたアソシエーションの使用」を参照してください。
ターゲット・ナビゲータを有効化するには、MPCUIメタデータは、<EmuiConfig>要素のcontext-pane-visibleプロパティをtrueに設定して、含める必要があります。これは、コンポジット・ターゲット・タイプおよびそのメンバー・ターゲットに設定する必要があります。これがメンバー・ターゲットに設定されない場合、ナビゲータは表示されず、ホームページがこれらのターゲットに表示される際には、コンポジットの他のメンバーを表示します。
デフォルトでは、context-pane-visibleプロパティはfalseに設定されており、ターゲット・ナビゲータは表示されません。
注意:
containsアソシエーションがない場合、context-pane-visibleプロパティがtrueに設定されていても、ターゲット・ナビゲータは表示されません。
例: ターゲット・ナビゲータの有効化
<?xml version = '1.0' encoding = 'UTF-8'?>
<CustomUI target_type="demo_hostsystem"xmlns="http://www.oracle.com/EnterpriseGridControl/MpCui">
<EmuiConfig>
<context-pane-visible>true</context-pane-visible>
</EmuiConfig>
</CustomUI>
MPCUIフレームワークでは、ガイドされた検出フローの一部として登録できるカスタム・ユーザー・インタフェースを定義する機能がサポートされます。登録後に、この検出フローは、「ターゲットの手動追加」ページから使用できます。手動によるターゲットの追加の詳細は、「手動によるターゲットの追加」を参照してください。
ガイドされた検出フローでは、選択した管理エージェント上で検出スクリプトを実行し、適切なエンティティを追加するサービスAPIを呼び出すことによって、Enterprise Managerにターゲットおよびアソシエーションを追加する機能が提供されます。このプロセスは、ユーザー・インタフェース・ウィザード(トレイン)から駆動され、エンドユーザーが提供した情報を使用して、プロセスを説明できます。このプロセス中に、エンドユーザーから必要な情報を(特定の要件に基づいて)決定するかどうかは、任せられています。例は、EDK (demo_hostsampleおよびdemo_hostsystem)のプラグインのサンプルを参照してください。検出スクリプトの詳細は、「ターゲット検出の定義」を参照してください。
ガイドされた検出中に通常使用されるサービスは、次のとおりです。
管理エージェントおよびターゲット(ターゲットの存在やターゲット・プロパティなど)を取得するTargetInfoサービス
既存のアソシエーションを取得するAssociationInfoサービス
選択した管理エージェント上で検出スクリプトを実行する検出サービス
ターゲットを作成または削除するTargetManagementサービス
アソシエーションを作成または削除するAssociationManagementサービス
これらのサービスの詳細は、「検出サービスの使用」、「ターゲット情報サービスの使用」および「ターゲット管理サービスの使用」を参照してください。
ガイドされた検出をプラグインに追加するには、必要なファイルに次のディレクトリが含まれていることを確認してください。
plugin_stage/discovery
ガイドされた検出フローから実行されるスクリプト。これらのスクリプトには、複数のターゲットおよびアソシエーションが含まれます。検出スクリプトの詳細は、「検出スクリプトの作成」を参照してください。
customdiscover.lstファイル。このファイルには、各検出スクリプトに対してプラグインが提供されることを示す行を含める必要があります。各エントリは、検出カテゴリを参照する必要があり、これは、検出サービスを呼び出す際に実行されるスクリプトを識別するために使用される一意の識別子です。次のエントリは、ガイドされた検出フロー中にdemo_hostsample_discovery.plスクリプトを参照するために使用される検出カテゴリ(DHS_DISC)を示しています。
DHS_DISC|demo_hostsample_discovery.pl
plugin_stage/oms/metadata/discovery
検出メタデータ・ファイル(plugin_discovery.xml)。検出メタデータ・ファイルおよび検出XMLの例の詳細は、「検出XMLの作成」を参照してください。ガイドされた検出には、ガイドされた検出を正しく登録できるよう適切に指定する必要がある多くの属性があります。
<DiscoveryModule name="DemoHostSample">
これは、検出モジュールの一意の名前で、MPCUIメタデータ・ファイルに検出SWFを登録するために使用されるモジュール名に一致する必要があります。
<NlsValue>Discover Demo Host Sample Targets</NlsValue>
これは、Cloud Controlコンソールの「ターゲットの手動追加」ページの「ターゲット・タイプ」リストに表示されるラベルです。
<CustomDiscoveryUI>
<LaunchADF>
<DestOutcome>goto_core-mpcustomdiscovery-page</DestOutcome>
</LaunchADF>
</CustomDiscoveryUI>
これは、検出メタデータ・ファイル内でまったく同じである必要があります。これにより、ビルドしてプラグインに含めた、ガイドされた検出UIが起動されることを確認します。
plugin_stage/oms/metadata/mpcui
discovery.js
ターゲットのホームページ用に作成されたMPCUI JSライブラリと同様、ガイドされた検出UIは、JSライブラリとして構築されます。
MyMpcui.xml
検出JSライブラリに加えて、MPCUIメタデータ・ファイルには、検出モジュール用の統合メタデータが含まれている必要があります。
例: MPCUIメタデータ・ファイルのSwfFilesタグ
<mp:Integration mpcuiLibVersion="13.2.0.0.0" integrationType="discovery"
discoveryModule="DemoHostSample"
xmlns:mp="http://www.oracle.com/EnterpriseGridControl/MpCuiIntegration"
>
…
</mp:Integration>
<mp:Integration>エントリは、ターゲット・インスタンスのUI用に作成したものと似ています。ただし、これはdiscoveryModuleを指定します。このUIは、Cloud Controlコンソールの「ターゲットの手動追加」ページで、ユーザーがこの検出モジュールを選択したときに、起動されます。
ガイドされた検出UIは、HTML/JS UIを構築するためのMPCUIの機能を使用して構築されます。リージョン、ボタン、表、ダイアログなどのUIコンポーネントは、Enterprise Managerに新しいターゲットを追加するプロセスを介してユーザーに説明するユーザー・インタフェースを構築するために使用されます。これらのUIコンポーネントの追加の詳細は、「表の定義」や「ダイアログの定義」など、この章の関連する項を参照してください。
検出UIの統合メタデータは、検出UIで使用される一連のアクティビティを定義します。検出UIには、ガイドされた検出の開始時にロードされるページであることを示すisDefaultPage=trueプロパティを使用して定義されたPageActivityが、少なくとも1つ含まれている必要があります。次の例(demo_hostsystemサンプル・プラグインから抽出)では、discoHomePgアクティビティに注意してください。
例: 統合メタデータ
<mp:Integration mpcuiLibVersion="13.2.0.0.0" integrationType="discovery"
discoveryModule="DemoHostSample"
xmlns:mp="http://www.oracle.com/EnterpriseGridControl/MpCuiIntegration"
>
<mp:sourceContext>
<mp:jsRoot path="js"/>
<mp:bundleRoot path="rsc"/>
</mp:sourceContext>
<mp:jsLibraries>
<mp:jsLibrary id="pluginLib" path="libs/dhs/demo_hostsample_discovery-min.js"
debugPath="libs/dhs/demo_hostsample_discovery-debug.js"
version="13.2.0.0.0" isDefault="true">
<mp:jsModule module="ojs/ojmodel"></mp:jsModule>
<mp:jsModule module="ojs/ojknockout"></mp:jsModule>
<mp:jsModule module="ojs/ojknockout-model"></mp:jsModule>
<mp:jsModule module="ojs/ojcomponents"></mp:jsModule>
<mp:jsModule module="ojs/ojarraytabledatasource"></mp:jsModule>
<mp:jsModule module="ojs/ojdatetimepicker"></mp:jsModule>
<mp:jsModule module="ojs/ojtable"></mp:jsModule>
<mp:jsModule module="ojs/ojdatagrid"></mp:jsModule>
<mp:jsModule module="ojs/ojchart"></mp:jsModule>
<mp:jsModule module="ojs/ojgauge"></mp:jsModule>
<mp:jsModule module="ojs/ojlegend"></mp:jsModule>
<mp:jsModule module="ojs/ojselectcombobox"></mp:jsModule>
<mp:jsModule module="ojs/ojsunburst"></mp:jsModule>
<mp:jsModule module="ojs/ojthematicmap"></mp:jsModule>
<mp:jsModule module="ojs/ojtreemap"></mp:jsModule>
<mp:jsModule module="ojs/ojvalidation"></mp:jsModule>
<mp:jsModule module="ojs/ojslider"></mp:jsModule>
</mp:jsLibrary>
</mp:jsLibraries>
<mp:resourceBundles>
<mp:MpBundle name="demoUiMsg" path="oracle.samples.xohs.rsc" isDefault="true"/>
<mp:MpBundle name="demoJobMsg" path="oracle.samples.xohs.rsc"/>
</mp:resourceBundles>
<mp:activities>
<mp:PageActivityDef id='discoHomePg' label='Discovery Console'
pageClass='dhs/discovery/DiscoveryTrainPage'
pageControllerClass='dhs/discovery/DiscoveryTrainPageController'
isDefaultPage="true" />
<mp:TrainActivityDef id='discoTrain' label='Discover New Targets'
trainControllerClass='dhs/discovery/DiscoveryTrainController'>
<mp:stepActivities>
<mp:TrainStepActivityDef id='selAgentsStep' shortLabel="Select Agents"
label='Add Demo Host Sample Targets: Select Agents'
pageClass='dhs/discovery/SelectAgentStep'
pageControllerClass='dhs/discovery/DiscoveryStepController'/>
<mp:TrainStepActivityDef id='agentInputStep' shortLabel="Configure Inputs"
label='Add Demo Host Sample Targets: Configure Inputs'
pageClass='dhs/discovery/AgentParamInputStep'
pageControllerClass='dhs/discovery/DiscoveryStepController'/>
<mp:TrainStepActivityDef id='selTargetsStep' shortLabel="Configure Targets"
label='Add Demo Host Sample Targets: Configure Targets'
pageClass='dhs/discovery/SelectTargetsStep'
pageControllerClass='dhs/discovery/DiscoveryStepController'/>
<mp:TrainStepActivityDef id='summaryStep' shortLabel="Summary"
label='Add Demo Host Sample Targets: Summary'
pageClass='dhs/discovery/FinalizeStep'
pageControllerClass='dhs/discovery/DiscoveryStepController'/>
</mp:stepActivities>
</mp:TrainActivityDef>
<mp:DialogActivityDef id='configureInstancePropertiesDialog'
label='Dialog InstProp'
dialogClass='dhs/discovery/ConfigureInstancePropertiesDialog'
dialogControllerClass="dhs/discovery/ConfigureInstancePropertiesDialogController">
<mp:inputParams>
<mp:InputParam name='properties'/>
<mp:InputParam name='discoveredName'/>
<mp:InputParam name='rowIndex'/>
</mp:inputParams>
</mp:DialogActivityDef>
<mp:DialogActivityDef id='targetHomeDialog' label='Dialog TargetHome'
dialogClass='dhs/discovery/TargetHomeDialog'
dialogControllerClass="dhs/discovery/TargetHomeDialogController">
<mp:inputParams>
<mp:InputParam name='targetHome'/>
<mp:InputParam name='rowIndex'/>
</mp:inputParams>
</mp:DialogActivityDef>
</mp:activities>
</mp:Integration>
検出UIは、中にトレインが埋め込まれた単一のページ、または検出プロセスを説明するエンドユーザーからの情報を取得するためのダイアログを表示する単一のページのいずれかであることが多いです。ガイドされた検出フローのステップは要件に応じて異なりますが、多くは次のようになります。
ガイドされた検出に関する重要な考慮事項の1つは、これは、新しいターゲットの検出とともに、既存のコンポジット・ターゲットのトポロジの更新に使用することも可能であるということです。サンプル・プラグイン(demo_hostsystem)の場合、ガイドされた検出UIによって、ユーザーは新しいシステム・ターゲットを追加できますが、既存のシステムに対してメンバーの追加または削除を行うこともできます。
このユースケースは、ターゲットがEnterprise Managerによってすでに管理されているかどうかを識別する検出スクリプトから返される情報を持つセットを比較するために、Enterprise Managerに認識された既存のターゲットのセットを問い合せる、Enterprise Manager APIを使用するための要件も示しています。たとえば、結果は、追加する必要がある新しいターゲットのリストと、管理構成にすでに存在しないためEnterprise Managerから削除する必要がある他のターゲットのリストになります。
このシナリオは、検出アプリケーションは、ターゲットのホームページにビルドされたカスタムUIと統合する可能性もあることも示しています。これにより、コンポジット・ターゲットのホームページから、既存のコンポジット・ターゲットの構成を直接更新する機能がユーザーに提供されます。
ターゲットのホームページ内から検出UIを使用する例は、demo_hostsystemサンプル・プラグインのHostSystemConfigurationページを参照してください。
検出サービスは、プラグインに付属の検出スクリプトを実行するために使用されます。検出をサポートするプラグインの要件の説明は、「ガイドされた検出のサポート」を参照してください。
次の例(DiscoveryTrainStepController内のdemo_hostsystemサンプル・プラグインに含まれています)に、検出サービス(TargetFactory.discoverTargets)の呼出しを示します。このサービスには、必要な場合、複数の管理エージェント上の検出を処理するために複数回呼び出すことができるaddRequestメソッドが含まれています。
addRequestメソッドへの各呼出しは、検出スクリプトの結果を使用して呼び出されるハンドラとともに、次に渡されます。
リクエストID
リクエストに関連付けられた特定の結果を取得できる特定のリクエストに関連付けられた一意の識別子(ユーザーが割り当てる)。
エージェント
検出を実行する管理エージェント・ターゲット。
プラグインID
実行する検出に関連付けられたプラグインID。プラグインには、複数の検出モジュールおよびカテゴリを含めることができます。
検出カテゴリ
検出カテゴリ。これは、プラグインのエージェント部分に含まれているdiscover.lstファイルのエントリを使用して、検出スクリプトにマップする必要があります。
例: 検出サービス
/**
* when doing discovery, the service will accept multiple requests to be
* processed at the same time. this would typically be the case if multiple
* agents were involved in the process, but could also be if different discovery
* categories (scripts) were to be processed.
*
* the discovery request includes the following elements:
* requestId a unique identifier associated with that particular request
* that will allow you to retrieve the specific results associated
* with that request.
* agent the agent Target that the discovery should be run against
* pluginId the pluginId associated with the discovery to be run; a plug-in
* can include multiple discovery modules and categories
* discCat the discovery category; this must map to a discovery script via
* an entry in the discover.lst file included in the agent part of
* the plugin
* params parameters that are to be passed to the discovery script
*
* Note on discoveryModule - in addition to the pluginId, the discovery UI is
* passed the discovery module associated with this discovery pass. If you've
* chosen to implement multiple types of discovery operations from a single
* discovery UI you may retrieve the discoveryModule to determine in what context
* the UI was launched.
*/
var requestId = "DiscReq1";
var pluginId = ApplicationContext.getPluginId();
var discoveryCategory = "DHSYSTEM_DISC";
discSvc.addRequest(requestId, agent, pluginId, discoveryCategory, params);
var mrs = new MultiServiceResponder(this.page.cb(this.discoverResultsHandlerMul));
var batch = this.page.getBatchRequest();
var discRequest = TargetFactory.discoverTargets(discSvc, mrs.sync, batch);
discRequest.data["initProcessing"] = initProcessing;
mrs.addRequest("discoverTargets", discRequest);
batch.sendRequest();
次のように宣言される検出結果ハンドラは、フォルト・オブジェクトおよび検出結果に渡されます。
DiscoveryStepController.prototype.discoverResultsHandlerMul = function(response) {
検出スクリプトの処理中にフォルトが発生しなかった場合、response.getFault(“discoverTargets”)はnullになります。response.getResult("discoverTargets")で取得される検出オブジェクトには、addRequestメソッドを呼び出すことによって構築されたDiscoveryRequestオブジェクトの配列が含まれています。各リクエストには、指定したプロパティ(エージェント、カテゴリなど)が含まれ、DiscoveredTargetsオブジェクトも含まれています。DiscoveredTargetsオブジェクトには、指定したリクエストのターゲット管理エージェントで実行された検出スクリプトから返されたターゲットのリストが含まれています。検出スクリプトの詳細は、「検出スクリプトの作成」を参照し、DiscoveryServiceで返された検出オブジェクトの詳細は、EDKのAPIドキュメントを参照してください。
検出処理中に、エージェントのリストや特定のタイプのターゲットのセットなど、ターゲット情報を取得する必要がよくあります。ターゲット情報サービスでは、このような目的で使用できる多くのAPIが提供されています。この項では、これらのサービスの概要について説明します。詳細は、EDKのAPIドキュメントを参照し、これらの使用例は、demo_hostsystemサンプル・プラグインを参照してください。
TargetFactory.getAgents
getAgents APIは、検出を実行するために使用できる一連の管理エージェントを取得できます。Windowsホスト上で実行中のすべての管理エージェントを選択するなど、選択プロパティ(TargetPropertyの配列)を指定することによって、リストをフィルタ処理できます。
TargetFactory.getTargets
getTargets APIを使用して、ホスト、ターゲット・タイプ、管理対象ステータス、メタデータ・バージョンなど、任意の数の選択基準を指定するターゲットのリストを取得します。各アイテムは使用可能な値のリストとして指定され、リクエストは1つ以上の選択基準を含めることができます。
Target.getSystemMembers
getSystemMembers APIを使用して、システム・メンバー・ターゲットのリストを取得します。これらは、systemStencilを介してシステムに含まれるターゲットです。システム・ターゲットの詳細は、『Oracle Enterprise Manager Cloud Control拡張プログラマーズ・ガイド』を参照してください。
Target.getCompositeMembers
getCompositeMembers APIを使用して、コンポジット・メンバー・ターゲットのリストを取得します。コンポジット・メンバーは、包含アソシエーションを介してコンポジット(またはシステム・ターゲット)に含まれるメンバーです。 コンポジット・ターゲットの詳細は、『Oracle Enterprise Manager Cloud Control拡張プログラマーズ・ガイド』を参照してください。
ターゲット管理サービスでは、ターゲットまたはアソシエーションを作成または削除する機能が提供されます。ターゲット管理の場合、アソシエーションは、ターゲット定義の一部として渡すこともでき、そのアソシエーションは、ターゲット自体を追加するプロセスの一部として追加されます。この項では、これらのサービスの概要について説明します。詳細は、EDKのAPIドキュメントを参照し、これらの使用例は、demo_hostsystemサンプル・プラグインを参照してください。
TargetFactory.createTargets
createTargets APIを使用して、ターゲットをEnterprise Managerに追加します。Enterprise Managerにターゲットを追加するプロセスは、各ターゲットに関連付けられた管理エージェントへの必要なプラグインのデプロイメントを強制します。このAPIへのリクエストは、ターゲット・オブジェクトのリストで、このオブジェクトのそれぞれは、最低でも、名前、タイプおよびエージェントを指定する必要があります。通常、ターゲット・インスタンス・プロパティ(このターゲット・タイプに使用される場合)を指定することもできます。
TargetFactory.deleteTargets
deleteTargets APIを使用して、ターゲットをEnterprise Managerから削除します。このAPIへのリクエストは、ターゲット・オブジェクトのリストです。ターゲットの削除は元に戻せず、すべてのターゲット、メトリックおよび構成の履歴を削除するため、Enterprise Managerからのターゲットの削除は、注意して実行する必要があります。
Target.createAssociations
createAssociations APIを使用して、指定したターゲットと別のターゲットの間のアソシエーションを追加します。導出されたアソシエーションまたはシステム・ステンシルを使用してアソシエーションを作成する場合は、この方法で作成できます。すべての場合、アソシエーションは、対応する許可されたペアの定義に関連付ける必要があります。詳細は、「導出されたアソシエーションの使用」を参照してください。
Target.deleteAssociations
deleteAssociations APIを使用して、指定したターゲットと他のターゲットの間のアソシエーションを削除します。
MPCUIアプリケーションは、JavaScriptライブラリとして提供され、インストールされます。HTMLファイルおよびJSファイルのすべてが1つのファイルにまとめられ、縮小されています。これにより、カスタムUIをできるだけ効率よくすることができます。
JSライブラリは、NodeJsとRequireJS r.jsスクリプトを組み合せて作成されます。r.jsは、ライブラリの作成と縮小を行い、NodeJsは、コマンドラインからr.jsを実行できるプラットフォームとして使用されます。
Node.jsをダウンロードしてインストールします。
build.jsファイルおよびbuild-min.jsファイルはtoolsディレクトリにあります。これらのファイルには、デバッグと縮小されたJSライブラリを構築する手順がそれぞれ含まれています。これらのファイルを編集して、include文にJSファイルとHTMLファイルをそれぞれリストします。
build.xmlを開きます。ビルド・ターゲットを右クリックして「ターゲット実行」を選択します。このターゲットは、MPCUIアプリケーションのデバッグと縮小されたJSライブラリの両方を作成します
tools/buildディレクトリでライブラリを探します。
このライブラリをstage/oms/metadata/mpcuiディレクトリに移動します。
<mp:Integration mpcuiLibVersion="13.2.0.0.0"
xmlns:mp="http://www.oracle.com/EnterpriseGridControl/MpCuiIntegration"
>
<mp:sourceContext>
<mp:jsRoot path="js/libs/dhs"/>
</mp:sourceContext>
<mp:jsLibraries>
<mp:jsLibrary id="pluginLib" path="demo_hostsample-min.js"
debugPath="demo_hostsample-debug.js"
version="13.2.0.0.0" isDefault="true">
<mp:jsModule module="ojs/ojmodel"></mp:jsModule>
<mp:jsModule module="ojs/ojknockout"></mp:jsModule>
<mp:jsModule module="ojs/ojknockout-model"></mp:jsModule>
<mp:jsModule module="ojs/ojcomponents"></mp:jsModule>
<mp:jsModule module="ojs/ojarraytabledatasource"></mp:jsModule>
<mp:jsModule module="ojs/ojdatetimepicker"></mp:jsModule>
<mp:jsModule module="ojs/ojtable"></mp:jsModule>
<mp:jsModule module="ojs/ojdatagrid"></mp:jsModule>
<mp:jsModule module="ojs/ojchart"></mp:jsModule>
<mp:jsModule module="ojs/ojgauge"></mp:jsModule>
<mp:jsModule module="ojs/ojlegend"></mp:jsModule>
<mp:jsModule module="ojs/ojselectcombobox"></mp:jsModule>
<mp:jsModule module="ojs/ojsunburst"></mp:jsModule>
<mp:jsModule module="ojs/ojthematicmap"></mp:jsModule>
<mp:jsModule module="ojs/ojtreemap"></mp:jsModule>
<mp:jsModule module="ojs/ojvalidation"></mp:jsModule>
<mp:jsModule module="ojs/ojslider"></mp:jsModule>
<mp:jsModule module="ojs/ojpagingcontrol"></mp:jsModule>
</mp:jsLibrary>
</mp:jsLibraries>
...
</mp:Integration>
EDKを使用してOPARを作成します。
プラグインをEnterprise Managerにインポートしてデプロイします。
| 要素 | 説明 |
mp:Integration |
mpcuiLibVersionは、UIが実行されるMPCUIライブラリ(およびJETライブラリ)のバージョンを指定しました。<mp:Integration mpcuiLibVersion="13.2.0.0.0"
xmlns:mp="http://www.oracle.com/EnterpriseGridControl/MpCuiIntegration">
検出ライブラリには、
integrationTypeおよびdiscoveryModuleを設定します。<mp:Integration mpcuiLibVersion="13.2.0.0.0"
integrationType="discovery" discoveryModule="DemoHostSample"
xmlns:mp="http://www.oracle.com/EnterpriseGridControl/MpCuiIntegration"
>
|
sourceContext |
統合メタデータは、Flex実装から統合MXMLファイルを再利用できるように設計されています。sourceContextは、古い表記法の一部をブートストラップし、プラグインに含まれるファイルのパスに必要な重複の量を制限します。<mp:sourceContext> <mp:jsRoot path="js/libs/dhs"/> <mp:cssRoot path="css/dhs"/> <mp:bundleRoot path="rsc"/> </mp:sourceContext> |
cssFiles |
アプリケーションが使用する各cssファイルは、ここで指定されます。
<mp:cssFiles> <mp:cssFile id="myCss" path="dhs.css" version="13.1.0.1.0"/> </mp:cssFiles> |
jsLibraries |
このタグは、使用する各JSライブラリとそれぞれに必要な依存性をmain.jsファイルに定義します。<mp:jsLibraries>
<mp:jsLibrary id="pluginLib" path="libs/dhs/demo_hostsample-min.js"
debugPath="libs/dhs/demo_hostsample-debug.js" version="13.2.0.0.0"
isDefault="true">
<mp:jsModule module="ojs/ojmodel"></mp:jsModule>
<mp:jsModule module="ojs/ojknockout"></mp:jsModule>
<mp:jsPath ...></mp:jsPath>
<mp:jsShim ...></mp:jsShim>
<!--
There can be only 1 default library. Any classes that aren't attached to
another library will be attached to the default library.
If not the default, you can associate an activity with the library with:
mp:jsPath id="activityId"
and the appropriate path will be added for that activity or the explicit
path can be set:
mp:jsPath path="dhs/MyController"
Modules to be added to the initial require clause (where the app is launched)
can be added here:
mp:jsModule module="ojs/ojtable"
Shims may also be specified:
mp:jsShim name="myshim" exports="myshim" deps="jquery, ojs/ojcore"
-->
|
resourceBundles |
<mp:resourceBundles> <mp:MpBundle name="demoUiMsg" path="oracle.samples.xohs.rsc" isDefault="true"/> <mp:MpBundle name="demoJobMsg" path="oracle.samples.xohs.rsc"/> </mp:resourceBundles> |
activities |
UIで使用されるすべてのページ、ダイアログ、トレインなどです。このセクションは、MXML統合ファイルから直接取得して、統合メタデータにコピーできます。 |
次の各項では、MPCUIのロギング・オプションについて説明します。
ロギング機能(MpLog)を使用して、コードからメッセージを記録します。
ロギングは、診断が必要な状況で役立つ一方、コード・サイズおよびオーバーヘッドの観点ではコストがかかります。そのため、ロギングは注意して使用してください。
MpLogメソッド(デバッグ、情報、エラーまたは致命的など)のうち1つを呼び出して、ロギングを実行します。メソッドは、置換する必要があるメッセージ文字列およびオプションのパラメータのリストを受け入れます。
パラメータを置換するには、{#}フォーマットを使用して、パラメータの位置を示します。
MpLog.debug("The metric {1} was not found for the target {2}.", metricName, targetName);
このログ文で生成されたメッセージは、次のログ出力に表示されます。
2017-04-22 11:10:17 [MpCui] DEBUG The metric CPU was not found for the target MYHOST
レベル(情報、デバッグ、エラー、致命的)によって、ユーザーは、異なるクラスのメッセージのログ出力を有効化できます。
デフォルトでは、すべてのエラーおよび致命的メッセージは、ログ出力の場所に送信されます。
情報およびデバッグのレベルのメッセージは、これらのレベルが明示的に有効化されている場合のみ、送信されます。
さらに、各レベルのメッセージを異なる出力場所に送信できます。使用可能なログの場所には、次の3つがあります。
EMLOG: メッセージはEnterprise Managerアプリケーション・ログに送信されます
CONSOLE: メッセージは、ブラウザ開発者ツールを介してアクセスできるコンソール・ログに送信されます
ログ出力を取得するオプションは、実装に依存しています。
NetBeansを使用してMPCUIを開発している場合、ログ・メッセージは、デフォルトで、NetBeans統合開発環境(IDE)の下部にあるコンソール・ウィンドウに表示されます。
これらのロギング設定を変更するには、次の手順に従います。
プラグインのカスタムUIをビルドする場合、次の開発環境オプションがあります。
NetBeans
NetBeansは、http://netbeans.orgからダウンロードできる無料のIDEです。NetBeansの使用の詳細は、「MPCUIメタデータ要素の概要」を参照してください。
任意のIDE
UIを開発する際に使用するIDEに制限はありません。
この項では、MPCUIライブラリおよびNetBeansを使用してUIを構築する際に従うプロセスについて説明します。これらのステップは、デモ・ホスト・サンプル(またはdemo_hostsample)と呼ばれる、EDKで提供されるサンプル・アプリケーションを使用していることを前提とします。多くの開発アクティビティと同様に、提供されたAPIの動作方法、およびこれらを使用してより高いレベルのユースケースを実行する方法を理解するために、実施例から開始することは、多くの場合、最も容易です。
カスタムUIを開発するプロセスを単純化するには、各変更後にEnterprise Managerにプラグインを再デプロイせずに、NetBeansからカスタムUIプロジェクトを構築および実行します。NetBeansから実行する場合、UIは、コンソールで使用可能なEnterprise Managerの他の機能およびページにはアクセスできませんが、プラグインの一部としてデプロイする前に、適切に機能していることを確認するためにUIを実行できるようになります。
注意:
MPCUIの利点の1つは、デプロイされたプラグインの一部として、またはNetBeans内から直接実行して、UIをテストできることです。この後者のオプションでは、反復開発をより単純にできますが、少なくとも1つのバージョンのプラグインがEnterprise Managerにデプロイされ、UIを実行する前にターゲット・インスタンスがすでに検出されている必要があります。
デモ・サンプル・プラグインがデプロイされた後、Oracle MPCUI Demo Hostsample ProjectのインスタンスをNetBeansに作成すると、NetBeansからこのプロジェクトを実行できます。
注意:
このモードでは、Enterprise Managerのページ装飾およびターゲット・コンテキスト領域は、ページの上部に表示されませんが、Enterprise Managerコンソールからターゲットのホームページにアクセスすると、これらは表示されます。カスタムUIに含まれる複数のページを実行できるメニューが表示されます。
次に、デモ・サンプルのUIを構成するコンポーネントの簡単なリストを示します。各ファイルの目的を説明するコメントおよび各ファイルに示したアイテムの詳細は、ソース・コードを参照してください。
demo_hostsample
css/dhs
dhs.css Style sheet for plug-in UI
data/metadata
demo_hostsample_uimd.xml An abbreviated metadata file used to create menu
items in standalone mode
data/metadata/stage
demo_hostsample_uimd.xml Full metadata file used to package and deploy the
plug-in
em/mpcuiswf/loader/images Any images included with the custom UI go in this
directory both in the running project and in the
stage/oms/metadata/mpcui directory.
js/dhs
HomePageController.js All of the controllers for the HTML pages in the
plug-in go in a plug-in specific directory under
the js directory.
ProcessesPageController.js
view/dhs
HomePage.html The target homepage, contains the layout of
the UI for the homepage
ProcessesPage.html
tools Contains the files and logic for building the
plug-in MPCUI Application into a single JS
library containing all JS and HTML files.
NetBeansでUIを変更および再構築するときに変更を加えた場合は、NetBeansからUIを直接実行またはデバッグできます。
注意:
Chromeブラウザを使用する場合は、拡張機能でNetBeans ConnectorおよびKnockoutjs context debuggerをインストールする必要があります。これを使用すると、NetBeans IDEからデバッグできるようになります。
NetBeansでUIへの変更を行った後で、Enterprise Managerコンソール内のターゲットのホームページから更新を表示できるよう、変更をプラグインに適用できます。
これを行うには、新しいバージョンのプラグインを作成およびデプロイするか、メタデータ登録サービス(MRS)を使用する必要があります。
MRSによって、新しいバージョン全体を作成およびデプロイせずに、増分更新をプラグインに適用できます。MRSの詳細は、「メタデータ登録サービス(MRS)を使用してデプロイされたメタデータ・ファイルの更新」を参照してください。
カスタムUIを変更した後は次の手順を実行します。
Enterprise Managerの拡張フレームワークの以前のバージョンは、次の方法で、Enterprise Managerのデフォルトのホームページをカスタマイズする機能をサポートしていました。
ホームページに表示する一連のグラフの設定
ホームページに表示する一連の関連リンクの定義
Enterprise Managerリリース13.1では、これはサポートされていません。HTML/JSおよびJETに基づいた新しいカスタムUI実装は、この以前の実装を置換するために作成する必要があります。
MPCUIフレームワークは、OracleグローバルHTMLアクセシビリティ・ガイドライン(OGHAG)を使用してコンパイルするユーザー・インタフェースをサポートするように設計されます。この項では、UI実装のためのアクセシビリティ標準の情報について説明します。
また、JETでは、アクセシビリティ標準を満たすための(MPCUIのベースとなる) JET UIの実装に役立つガイドラインおよび情報が提供されます。詳細は、JETアクセシビリティ・ページhttp://jet.us.oracle.comを参照してください。
Enterprise Managerでは、スクリーン・リーダー・オプションなど、アクセシビリティのためのオプションを設定する機能がエンドユーザーに提供されています。MPCUIフレームワークは、これらの設定を認識し、JSコード内で使用可能にします(APIリファレンスのoracle.sysman.emx.util.AdaSettingsを参照)。
エンドユーザーがアクセス可能なユーザー・インタフェースを必要とするアカウントを設定すると、MPCUIはアクセス可能なコンポーネントを自動的にレンダリングするため、通常、これらの設定をチェックする必要はありません。特に、これは、グラフを同じデータのアクセス可能なビューに置き換えます。
ローカライズされたテキスト・リソースのサポートを提供するには、カスタムUIで文字列を使用する必要があります。次の設定を行う必要があります。
MPCUIでリソース・プロパティ・ファイルを使用するには、リソース・バンドルを統合メタデータに登録する必要があります。次のようなブロックを含めます。
<mp:resourceBundles> <mp:MpBundle name="demoUiMsg" path="oracle.samples.xohs.rsc" isDefault="true" /> <mp:MpBundle name="demoJobMsg" path="oracle.samples.xohs.rsc" /> </mp:resourceBundles>
ここで示すように、リソースを複数のバンドルに分割し、1つのバンドルをデフォルト・バンドルとしてマークします。これにより、UIコードの残りの部分全体でこのバンドルの文字列へのアクセスが容易になります。パス属性はプロパティ・ファイルがProperties JARファイルに追加されたパスと一致する必要があります。Properties JARファイルの詳細は、「リソース・バンドルのパッケージ化」を参照してください。
HTMLでページまたはダイアログ・クラス内の文字列を参照するには、getStringメソッドおよびgetBundleStringメソッドを指定します。getStringメソッドはデフォルトのリソース・バンドルから文字列を取得し、getBundleStringメソッドは統合メタデータに登録された任意のバンドルから文字列を取得します。
getStringメソッドは、次のように使用されます。
<mp-section id="configurationRegion" params=”title: getString('CONFIGURATION')"
style=”height:60%;width:100%" ></mp-section>
このメソッドはデフォルトのリソース・バンドル(demoUiMsg)内でキーCONFIGURATIONを持つ文字列を検索し、この内部リージョンのタイトルとして使用します。文字列が見つからない場合、キー(CONFIGURATION)が表示されます。
getBundleStringメソッドは、次のように使用されます。
<mp-info-item id="currentLoad" params=”label: getBundleString('demoJobMsg', 'JOBLOAD'),value: respData.result.getString('','Load')"> </mp-info-item>
getBundleStringへの最初のパラメータは、文字列を取得するバンドルを指定します。
var str = RscUtil.getString("CONFIGURATION"); // retrieves string from default bundle
var str2 = RscUtil.getBundleString("demoJobMsg", "JOBLOAD"); // retrieves string from named bundle
カスタマイズされたUIページのオンライン・ヘルプを含める場合、次のディレクトリにあるヘルプJARファイルをパッケージ化します。
plugin_stage/oms/online_help
ヘルプJARファイルの例は、EDKのdemo_hostsampleの例の/oms/online helpディレクトリにあるplugin_sample_help.jarを参照してください。
このマニュアルは、JavaScript (JS)およびHTML、OracleのJavaScript Extension Toolkit (JET)を使用して実装されたコンポーネントとコード・パターンに、Flexのコンポーネントとコード・パターンを変換する際に役立つカタログです。多くのカスタムFlexコンポーネントおよびActionScript (AS)クラスは、JS側で構築されたコンポーネントおよびクラスに対応しています。多くの場合、これは一方から他方へ直接変換されます。また、このフレームワークでサポートされているクラスのほとんどはJSに再実装されるため、同じ構造およびユーティリティのすべては引き続き存在し、以前と同じ方法で操作されます。
現在のFlexベースのフレームワークでは、MXMLファイルとActionScriptを使用します。これらは、SWFファイルにコンパイルされ、プラグインを使用してパッケージ化され、ターゲットにカスタムUIを提供します。
新しいJETベースのフレームワークでは、HTMLファイルとJavaScriptを使用します。これらは、JSライブラリにまとめられて縮小され、プラグインを使用してパッケージ化され、ターゲットにカスタムUIを提供します。
MXMLファイルは、HTMLファイルに変換されます
ActionScriptファイルは、JSファイルに変換されます
プラグインでページを表すMXMLファイルは、HTMLページに変換されます。Flexベースのフレームワークに存在した同じMVCフレームワークは、JETベースのフレームワークに移行されるため、MXMLページをサポートするコントローラASファイルは、コントローラJSファイルに変換されます。すべての同じAPIを持つすべての同じWebサービスがサポートされます。
Demo Hostsampleの例は、Flexからこの新しいJETベースの実装に直接切り替えられています。
MPCUIフレームワークには、Flexで使用可能なタグをミラーリングするカスタム・タグ(KnockoutJSを使用)実装のセットが含まれます。FlexとHTML/JSの間ではプログラム的な移行パスは使用できないため、このカスタム・タグ・セットにより、Flex実装をHTML/JS実装に変換するのに必要な学習曲線効果は低下します。
Flexでは、Model View Controller (MVC)構造をアプリケーションに提供するために拡張するページ・クラスおよびページ・コントローラ・クラスを作成できます。JavaScriptおよびHTMLでは、この実装は異なりますが、MPCUIは、この同じMVCを繰り返す非常によく似た構造をHTML/JSアプリケーションに実装しました。
var configData = { cpuModel: info.getString(0, "CPU Model"),
osVersion: info.getString(0, "OS Version") };
this.page.setModel("configData", configData);
<mp-info-item id="osVersion" params="label : getString('OS_VERSION'),
value : model().configData().osVersion "></mp-info-item>
追加作業は必要ありません。
現在、ページはHTMLページです。MPCUI用に実装されたカスタム・タグは、ページにその構造を指定し、プラグイン用に作成されたHTMLファイルの全体的なコンテンツを削減します。
<mp-data-services>
<mp-sql-data-service id="ids" params="queryID:'INSTANCE_INFO', properties:props('TARGET_GUID',appModel.target.guid)">
</mp-sql-data-service>
<mp-metric-values-data-service id="procData" params="flattenData:true,
targetName:appModel.target.name, targetType:appModel.target.type,
metricName:'CPUProcessorPerf', columns:['CPUIdle'],
timePeriod:'CURRENT', interval:15">
</mp-metric-values-data-service>
<mp-metric-values-data-service id="processorData" params="flattenData:true,
targetName:appModel.target.name, targetType:appModel.target.type,
metricName:'CPUProcessorPerf',
columns:['CPUIdle','CPUUser','CPUSystem','CPUIOWait'],
timePeriod:'CURRENT', predicate:model().processorFilter ">
</mp-metric-values-data-service>
<mp-avail-data-service id="ads" params="targetName:appModel.target.name,
targetType:appModel.target.type, days:1">
</mp-avail-data-service>
<mp-association-data-service id="asc" params="targetName:appModel.target.name,
targetType:appModel.target.type, assocTypes:['hosted_by']">
</mp-association-data-service>
<mp-metric-values-data-service id="respData" params="flattenData:true,
targetName:appModel.target.name, targetType:appModel.target.type,
metricName:'Response', columns:['Load'],
timePeriod:'LAST_HOUR', flags: 'COUNTERS_FOR_RATE'">
</mp-metric-values-data-service>
</mp-data-services>
<!--
The example below also demonstrates the ways data may be bound to a UI component included in the page:
1. Data Service Reference
2. Global/Application Model Reference
3. Page Model Reference
4. Set Directly from Controller
InfoDisplay/InfoItem click handling
1. if a dataProvider specified for the InfoDisplay, then a global click handler can be set for the entire component
2. a click handler can be set for each InfoItem
3. a click handler can call the invokeActivity method passing an activity id and a bean (input context)
4. a destination can be set for each InfoItem, and set to a String that is an activity id
5. a destination can be set for each InfoItem, and the destination can be an actual Activity object constructed in the controller
-->
<mp-page>
<mp-row>
...
</mp-row>
</mp-page>
データ・サービス・タグはFlexと同じように引き続き使用でき、HTMLコンテンツは<mp-page>タグで始まることがわかります。
これは、トピックの始まりとなります。ページ・コントローラは、JavaScriptにクラスとして実装されます。JSオブジェクトまたはクラスを作成する場合、JSにはクラスの表記法がなく、強力な継承モデルもありません。JSで使用できるプロトタイプの継承を使用し、また、1つのJSファイルをモジュールとその独自のクラスとして構築する必要があります。
新しいページ・コントローラを作成する場合、新しいクラスは、MPCUIフレームワークで提供されるActivityControllerクラスから拡張します。すべてのクラスの上部には、define([])function() {}ブロックがあります。これは、この1つのクラス/1つのファイル構造を可能にする必須ライブラリの表記法です。また、事実上のインポート・ブロックとして機能します。現在のクラスで使用されるすべてのクラスは、ファイルの上部のdefine-functionブロックに表示されます。
define([
"emx/intg/ActivityController",
"emx/intg/InputParam",
"emx/intg/UrlEm",
"emx/MpLog",
"emx/util/TargetContext",
"emx/model/TargetFactory",
"emx/service/util/AssociationDataService",
"emx/service/metricDataService/MetricCollectionTimePeriod",
"emx/util/Constants",
"emx/util/Util",
"emx/service/sqlQuery/BulkSqlQuery",
"emx/util/RscUtil",
"emx/intg/ActivityDef"
],
function(
ActivityController,
InputParam,
UrlEm,
MpLog,
TargetContext,
TargetFactory,
AssociationDataService,
MetricCollectionTimePeriod,
Constants,
Util,
BulkSqlQuery,
RscUtil,
ActivityDef
) {
/**
* Each page in the plugin UI will typically have a controller class that extends
* ActivityController. The controller contains the functions that populate data to
* be shown in the page and respond to events in the page (button or link clicks for
* example). The controller should include an init method that will be called when
* the page is being initialized. This method can be used to setup any data that
* will be displayed in the page.
*/
function HomePageController() {
this.Init();
};
oj.Object.createSubclass(HomePageController, ActivityController, "HomePageController");
HomePageController.prototype.Init = function() {
HomePageController.superclass.Init.call(this);
};
HomePageController.prototype.page;
HomePageController.prototype.destroy = function(page) {
// do any cleanup of view/model here
};
HomePageController.prototype.initComplete = function(page) {
// do any setup which requires the page and its components to be fully loaded
};
/*
* initialize the model for the page; data services declared as part of the page
* will automatically be loaded and initialized by the framework and don't need
* to be initialized here in any way
*
* NOTE: the refresh parameter is added in 13.1 allowing the controller to know
* if this is the first pass through the page or an incremental refresh triggered
* by the page-level refresh button
*/
HomePageController.prototype.init = function(page, refresh) {
this.page = page;
...
};
...
return HomePageController;
});
クラスにはコンストラクタがあります。親クラスは、oj.Object.createSubclassの呼出しで指定され、このクラス定義で作成されるオブジェクトは、ファイルの下部に返されます。このクラスのFlexバージョンで拡張できるAPIは、JSバージョンでも拡張できます。
HomePageController.prototype.myFunc = function() {
};
HomePageController.myStaticFunc = function() {
};
var hpc = new HomePageController();
var fVal = hpc.myFunc();
var staticFVal = HomePageController.myStaticFunc();
| ActionScript | JavaScript | 注意 |
|---|---|---|
| package ... import list | define([
"emx/intg/ActivityController", ... ],
function(
ActivityController, ... ) {
// Class Definition
});
|
|
public class X extends Y |
|
|
public var p:Page; |
|
クラスのメンバーを指定するには、これをJSのprototypeに配置する必要があります。 |
super.init(p) |
|
|
p = pg as X; (pgをクラスXとしてキャスト) |
|
JSにキャストする必要はありません |
または
|
Flexでは必要ありませんが、JSでは、指定された値で始まる値がモデル・プロパティに含まれていなくても、すべてのモデル・プロパティを初期化する必要があります |
|
ApplicationContext.getTargetContext(); |
|
|
Flexでのコールバックは関数名のみを指定するのと同じくらい簡単です |
JSでは、次のいずれかを使用します。
|
JavaScriptでは、関数を実行するコンテキストは保証されません。クロージャを作成して、呼び出す関数のthisが関数に必要な値であることを保証できます。 |
page.model["loadDataSource"] |
|
新しいJETベースのフレームワークでは、カスタム・コンポーネントは、knockoutカスタム・バインディング(<div data-bind="..."></div>)とknockoutカスタム要素(<mp-info-display>、カスタム要素はカスタム・タグと同義)としてサポートされます。カスタム・バインディングを使用して、ページのレイアウトのすべての側面を管理します。カスタム要素の場合、レイアウトはこの要素に組み込まれ、Flexレイアウトのオプションの動作を模倣するために特別に作成された要素があります。
| Flexタグ | カスタム・バインディング | カスタム要素 |
|---|---|---|
<mp:services> |
<div class="dataServices"> |
<mp-data-services> |
HTMLページでは、このタグおよびこの下のデータ・サービスのすべては、ページのページ・タグの前にあります。
| Flexタグ | カスタム・バインディング | カスタム要素 |
|---|---|---|
<mp:SQLDataService id="ids"
queryID="INSTANCE_INFO"
properties="{props('TARGET_GUID',
appModel.target.guid)}"/>
|
<div id="ids"
data-bind="mpSqlDataService : {
queryID:'INSTANCE_INFO',
properties:props('TARGET_GUID',
appModel.target.guid) }">
</div>
|
<mp-sql-data-service id="ids"
params="queryID:'INSTANCE_INFO',
properties:props('TARGET_GUID',
appModel.target.guid)">
</mp-sql-data-service>
|
注意:
HTMLの例では、終了タグ</div>と終了タグ</mp-sql-data-service>が含まれています。HTMLの作業ではこの手法を採用することをお薦めします。カスタム要素の場合、これは要件です。カスタム要素は自己終了(".../>")として使用できません。| Flexタグ | カスタム・バインディング | カスタム要素 |
|---|---|---|
<mp:MetricValuesDataService id="procData"
flattenData="true"
targetName="{appModel.target.name}"
targetType="{appModel.target.type}"
metricName="CPUProcessorPerf"
columns="{['CPUIdle']}"
timePeriod="REALTIME"
interval="15"
/>
|
<div id="procData"
data-bind="mpMetricValuesDataService : {
flattenData:true,
targetName:appModel.target.name,
targetType:appModel.target.type,
metricName:'CPUProcessorPerf',
columns:['CPUIdle'],
timePeriod:'CURRENT',
interval:15 }">
</div>
|
<mp-metric-values-data-service id="procData"
params="flattenData:true,
targetName:appModel.target.name,
targetType:appModel.target.type,
metricName:'CPUProcessorPerf',
columns:['CPUIdle'],
timePeriod:'CURRENT', interval:15">
</mp-metric-values-data-service>
|
| Flexタグ | カスタム・バインディング | カスタム要素 |
|---|---|---|
<mp:AssociationDataService id="asc"
targetName="{appModel.target.name}"
targetType="{appModel.target.type}"
assocTypes="{['hosted_by']}" />
|
<div id="asc"
data-bind="mpAssociationDataService : {
targetName:appModel.target.name,
targetType:appModel.target.type,
assocTypes:['hosted_by'] }">
</div>
|
<mp-association-data-service id="asc"
params="targetName:appModel.target.name,
targetType:appModel.target.type,
assocTypes:['hosted_by']">
</mp-association-data-service>
|
| Flexタグ | カスタム・バインディング | カスタム要素 |
|---|---|---|
<mp:AvailDataService id="ads"
targetName="{appModel.target.name}"
targetType="{appModel.target.type}" />
|
<div id="ads"
data-bind="mpAvailDataService : {
targetName:appModel.target.name,
targetType:appModel.target.type,
days:1 }">
</div>
|
<mp-avail-data-service id="ads"
params="targetName:appModel.target.name,
targetType:appModel.target.type,
days:1">
</mp-avail-data-service>
|
| Flexタグ | カスタム・バインディング | カスタム要素 |
|---|---|---|
mp:Page |
<div class="mp-page-content mp-flex"> |
<mp-page> |
このタグは、HTMLファイル内の最上位のコンテンツ・コンテナを表します。データ・サービス(ページにある場合)はページ・タグの前にありますが、ページ・タグはページのコンテンツの始まりにあります。このカスタム・バインディングの例には2つのクラスがあります。mp-page-contentは、高さと幅を100%に設定するため、ページは、使用可能なすべての領域を埋めるように設定されます。これは、HTMLでは次の2つの理由から重要です。
HTMLコンポーネントは、できるだけ小さい領域を埋めようとするため、これに100%を指定しない場合は、領域を埋めるように拡張されません
レイアウト・エンジンが正しい高さと幅を考慮するように、DOMですべてのコンポーネントにこれらを設定する必要があります。
親が設定されていない場合、HTMLは割合を混同する可能性があるため、これをページ全体に設定することをお薦めします。
指定された他のクラスは、JETでサポートされているレイアウト・エンジンに関連しています。柔軟なボックス・レイアウト(flexbox)については、ここを参照してください。mp-flexクラスは、ページ全体のflexboxコンテナを初期化します。flexboxレイアウト・エンジンはページ全体に使用されます。これは、ページの読取りがより簡単になることに加え、カスタム要素を使用する利点の1つです。flexboxサポートは、各カスタム要素に組み込まれています。
| Flexタグ | カスタム・バインディング | カスタム要素 |
|---|---|---|
mx:HBox |
<div class="mp-flex mp-flex-row"> |
<mp-row> |
高さまたは幅が指定されていない場合、カスタム要素では自動的に100%に設定されます。
例:
<mp-row style="height:33%">
この場合、行の高さは親の領域の3分の1になります。幅は自動的に100%に設定されます
| Flexタグ | カスタム・バインディング | カスタム要素 |
|---|---|---|
mx:VBox |
<div class="mp-flex mp-flex-col"> |
<mp-column> |
高さまたは幅が指定されていない場合、カスタム要素では自動的に100%に設定されます。
例:
<mp-column style="width:50%">
この場合、列の幅は親の領域の半分になります。高さは自動的に100%に設定されます
| Flexタグ | カスタム・バインディング | カスタム要素 |
|---|---|---|
<mp:Region id="summaryRegion"
title="{getString('SUMMARY')}"
height="50%" width="100%" >
|
<div style="width:100%;height:100%"
data-bind="mpPanel: {title : '',
headerBorder : false}" >
<div id="summaryRegion" style="height:50%"
data-bind="mpSection: {
title : getString('SUMMARY'),
level : 2, headerBorder : true}">
|
<mp-panel params="title: '', headerBorder: false">
<mp-section id="summaryRegion"
style="height:50%"
params="title : getString('SUMMARY'),
level : 2, headerBorder : true">
|
| Flexタグ | カスタム・バインディング | カスタム要素 |
|---|---|---|
<mp:InnerRegion id="statusRegion"
title="{getString('STATUS')}"
height="40%" width="100%" >
|
<div id="statusRegion"
style="height:40%"
data-bind="mpSection : {
title : getString('STATUS')}" >
|
<mp-section id="statusRegion"
style="height: 40%"
params="title : getString('STATUS')" >
|
| Flexタグ | カスタム・バインディング | カスタム要素 |
|---|---|---|
<mp:InfoDisplay width="100%" height="100%"> |
<table data-bind="mpInfoDisplay"> |
<mp-info-display> |
| Flexタグ | カスタム・バインディング | カスタム要素 |
|---|---|---|
<mp:InfoItem id="currentStatus"
label="{getString('CURRENT_STATUS')}"
value="{ads.currentStatus}"
image="{ads.currentStatusIcon}"
click="invokeActivity(Constants.PAGE_AVAILABILITY,
bean(Constants.P_TARGET_NAME,appModel.target.name,
Constants.P_TARGET_TYPE,
appModel.target.type));" />
|
<tr id="currentStatus"
data-bind="mpInfoItem : {
label : getString('CURRENT_STATUS'),
value: ads.currentStatus,
image : ads.currentStatusIcon,
destination : '#'}">
|
<mp-info-item
params="label : getString('CURRENT_STATUS'),
value: ads.currentStatus,
image : ads.currentStatusIcon,
destination : '#'">
|
<mp:InfoItem id="currentLoad"
label="{getString('CPU_LOAD')}"
value="{respData.result.getString('','Load')}"
imageRenderer="{appModel.renderer('CHECK_MARK',
bean('type','number','warning',
'0.1','critical','0.4'))}" />
|
<tr id="cpuLoad"
data-bind="mpInfoItem : {
label : getString('CPU_LOAD'),
value : respData.result.getString('','Load'),
imageRenderer: rendererFactory.get('CHECK_MARK',
bean('type','number','warning',
'0.1','critical','0.4')) }">
|
<mp-info-item id="cpuLoad"
params="label : getString('CPU_LOAD'),
value : respData.result.getString('','Load'),
imageRenderer: rendererFactory.get('CHECK_MARK',
bean('type','number','warning',
'0.1','critical','0.4')) ">
|
| Flexタグ | カスタム・バインディング | カスタム要素 |
|---|---|---|
<mp:Link id="allReports"
label="{getString('ALL_REPORTS')}"
destination="{model.allReportsLink}" />
|
<a id="allReports"
data-bind="mpLink: {label: getString('ALL_REPORTS'),
destination: model().allReportsLink }" />
|
<mp-link id="allReports"
params="label: getString('ALL_REPORTS'),
destination: model().allReportsLink">
|
| Flexタグ | カスタム・バインディング | カスタム要素 |
|---|---|---|
<mp:Dialog xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:mp="http://www.oracle.com/mpcui" width="550" height="530" title="Credentials"> |
<div data-bind="mpDialog : {
height:620, width:560,
title:'Credentials' }" >
|
<mp-dialog params="mpDialog : {
height:620, width:560,
title:'Credentials' }" >
|
パラメータを渡すために多少異なるモデルに従うカスタム要素がいくつかあります。各パラメータがリストされるのではなく、これらは1つのパラメータのプロパティとしてリストされます(mpDialogなど)。
| Flexタグ | カスタム・バインディング | カスタム要素 |
|---|---|---|
<mp:TrainContainer id="createTrainContainer"
width="100%" height="100%"
trainId="addNewFSCreateTrain"
trainDone="{controller.trainDone(event)}" />
|
<div style="width:100%;height:100%"
data-bind="mpTrainContainer: {
trainId: 'addNewFSCreateTrain',
trainDone: controller.trainDone}">
|
<mp-train-container
params="trainId: 'addNewFSCreateTrain',
trainDone: controller.trainDone">
|
MP表のカスタム・バインディングおよびカスタム要素はJET ojTableから拡張し、JETのWebサイトに記載されているすべてのプロパティをサポートします。さらに、次のプロパティもサポートされます。
targetName
targetType
metricName
metricColumns
keys
timePeriod
interval
dataService
customDataSource
dataProvider
このサポートは、表に表示するターゲット・インスタンス・データを取得するために、Flexで使用可能なものをミラーリングします。
| プロパティ名 | 新しいプロパティの指定 | 注意 |
|---|---|---|
paging |
paging: 'on' |
JETのページ・コントロールは、表と同じデータソースにアタッチする個別のカスタム・バインディングです。 表のカスタム・バインディングは、バックグラウンドでそのデータソースを管理するため、これにより、ページングが含まれていることがカスタム・バインディングに示されます。 また、ページング・バインディングでは、tableIdを入力として使用して、それを表にバインドします。 |
dataUpdateListener |
dataUpdateListener: cb(controller.updateTable) |
|
mpRenderer |
columns: { [ { mpRenderer: rendererFactory.get(...) } ] } |
このリリースでは、同じMPレンダラのすべてがサポートされています。 |
表(レンダラを使用)
| Flexタグ | カスタム・バインディング |
|---|---|
<table id="incidentsTable" style="height:100%;width:100%"
data-bind="mpTable: {
customDataSource: model().incidentsData,
columns: [
{displayIndex: 0, headerText: 'Summary', field: 'summary',
id: 'summary', sortable: 'enabled',
headerStyle: 'text-align: left; white-space:nowrap;width:200px',
style: 'text-weight:bold;'},
{displayIndex: 1, headerText: 'Target', field: 'target',
id: 'target',
mpRenderer: rendererFactory.get('TARGET_TYPE'),
style: 'text-align: center',
headerStyle: 'text-align:center;white-space:nowrap;width:200px'},
{displayIndex: 2, headerText: 'Severity',
field: 'severity', id: 'severity',
mpRenderer: rendererFactory.get('SEVERITY'),
style: 'text-align: center'},
{displayIndex: 3, headerText: 'Status',
field: 'status', id: 'status'},
{displayIndex: 4, headerText: 'Escalation',
field: 'escalation', id: 'escalation'},
{displayIndex: 5, headerText: 'Type', field: 'type', id: 'type'},
{displayIndex: 6, headerText: 'Last Update',
field: 'lastUpdate', id: 'lastUpdate' } ]}" >
</table>
|
<mp-table id="incidentsTable" style="height:100%;width:100%"
params="mpTable: {
customDataSource: model().incidentsData,
columns: [
{displayIndex: 0, headerText: 'Summary', field: 'summary',
id: 'summary', sortable: 'enabled',
headerStyle: 'text-align: left; white-space:nowrap;width:200px',
style: 'text-weight:bold;'},
{displayIndex: 1, headerText: 'Target', field: 'target',
id: 'target',
mpRenderer: rendererFactory.get('TARGET_TYPE'),
style: 'text-align: center',
headerStyle: 'text-align:center;white-space:nowrap;width:200px'},
{displayIndex: 2, headerText: 'Severity',
field: 'severity', id: 'severity',
mpRenderer: rendererFactory.get('SEVERITY'),
style: 'text-align: center'},
{displayIndex: 3, headerText: 'Status',
field: 'status', id: 'status'},
{displayIndex: 4, headerText: 'Escalation',
field: 'escalation', id: 'escalation'},
{displayIndex: 5, headerText: 'Type', field: 'type', id: 'type'},
{displayIndex: 6, headerText: 'Last Update',
field: 'lastUpdate', id: 'lastUpdate' } ]}" >
</mp-table>
|
Flexバージョンでサポートされているレンダラは引き続きサポートされ、Flexベースのリリースと同じ方法でHTMLから参照されます。
表(ページングを使用)
| Flexタグ | カスタム・バインディング |
|---|---|
<table id="processesTable" style="height:80%;width:100%"
data-bind="mpTable: {
selectionMode: {row: 'single', column: 'multiple'},
dataService: 'processesDataSource',
paging: true,
dataUpdateListener: cb(controller.processesTableUpdated) }">
</table>
<div id="paging" style="width:100%"
data-bind="mpPagingControl: {
tableId: 'processesTable',
pageSize: 15}" class="oj-table-panel-bottom">
</div>
|
<mp-table id="processesTable"
params="
mpTable: {
selectionMode: {row: 'single', column: 'multiple'},
dataService: 'processesDataSource',
dataUpdateListener: cb(controller.processesTableUpdated) },
mpPagingControl: {
pageSize: 15 }">
</mp-table>
|
カスタム要素では、pagingプロパティがmpTableオブジェクトに含まれず、tableIdがmpPagingControlに含まれていないことに注意してください。これらは、カスタム要素の初期化の一部として自動的に検出および設定されます。
このMpCuiコンポーネントはJETのグラフ・コンポーネントから拡張するため、JETのWebサイトに記載されているすべてのプロパティの他に、次に指定するプロパティもサポートされます。現在、Flexでサポートされていたグラフ・タイプと同じものがJETバージョンでもサポートされています(カッコ内が対応するJETのグラフ・タイプ)。
LineChart (type:'line')
AreaChart (type:'area')
BarChart (type: 'bar', orientation: 'horizontal')
ColumnChart (type: 'bar')
PieChart (type: 'pie')
JETで提供される他のグラフ・タイプも使用できますが、次のプロパティをサポートするのは、前述のグラフのみです。
targetName
targetType
metricName
metricColumns
keys
timePeriod
interval
dataService
customDataSource
dataProvider
別のグラフ・タイプを使用する場合は、mp-chartカスタム要素またはmpChartカスタム・バインディングを引き続き使用できるため、これらはパス・スルーとして機能しますが、JETのWebサイトのようにデータを移入する必要があります。
| プロパティ名 | 新しいプロパティの指定 | Flexのグラフ・タイプ | 注意 |
|---|---|---|---|
title |
title: { text: 'Title' } |
すべて |
|
subtitle |
subtitle: { text: 'Subtitle' } |
すべて |
|
footnote |
footnote: { text: 'Footnote' } |
すべて |
|
colors |
styleDefaults: { colors: [] } |
すべて |
|
showLegend |
legend: { rendered: 'off' } |
すべて |
on (デフォルト)またはoff |
legendLocation |
legend: { position: 'bottom' } |
すべて |
Flex: left、right、top、bottom。JET: auto (デフォルト)、start、end、top、bottom |
legendDirection |
すべて |
サポートされていません |
|
selectionMode |
selection: 'single' |
すべて |
Flex: single、multiple。JET: none、single、multiple |
mpSeries |
mpSeries: {...} |
すべてのSeries |
カスタム・バインディング/要素でサポートされています これは、記載されているJETの時系列オブジェクトのすべてのプロパティに加え、いくつかのFlexプロパティもサポートする時系列オブジェクトの配列です。 |
displayName |
mpSeries: { [ { displayName: 'Name' } ] } |
すべてのSeries |
カスタム・バインディング/要素でサポートされています |
dataFunction |
mpSeries: { [ { dataFunction: cb(controller.myDatafunction } ] } |
すべてのSeries |
カスタム・バインディング/要素でサポートされています |
selectable |
すべてのSeries |
サポートされていません |
|
折れ線/面グラフ |
|||
axisRenderers |
Line、Area、Bar、Column |
xAxisプロパティ・オブジェクトおよびyAxisプロパティ・オブジェクトを介してアクセスできます |
|
xTitle |
xAxis: { title: 'Title' } |
Line、Area、Bar、Column |
|
yTitle |
yAxis: { title: 'Title' } |
Line、Area、Bar、Column |
|
yMax |
yAxis: { max: 35 } |
Line、Area |
|
yMin |
yAxis: { min: 5 } |
Line、Area |
|
startDate |
Line、Area |
サポートされていません |
|
endDate |
Line、Area |
サポートされていません |
|
dataCapacity |
dataCapacity: 250 |
Line、Area |
カスタム・バインディング/要素(デフォルトは、選択した期間に応じて異なります)でサポートされています |
showCumulativeLine |
showCumulativeLine: 'true' |
Line、Area |
カスタム・バインディング/要素でサポートされています |
warningLine |
warningLine: { value: 5, showOnTop: false } |
Line、Area、Bar、Column |
カスタム・バインディング/要素でサポートされています |
alertLine |
alertLine: { value: 15, showOnTop: true } |
Line、Area、Bar、Column |
カスタム・バインディング/要素でサポートされています |
fillFunction |
LineSeries、AreaSeries |
サポートされていません |
|
sortOnXField |
LineSeries、AreaSeries |
サポートされていません |
|
interpolateValues |
LineSeries、AreaSeries |
サポートされていません |
|
xField |
LineSeries、AreaSeries |
サポートされていません |
|
yField |
LineSeries、AreaSeries |
サポートされていません |
|
棒/縦棒グラフ |
|||
groupBy |
Bar、Column |
カスタム・バインディング/要素(byKey、byColumn)でサポートされています |
|
seriesNames |
Bar、Column |
将来 |
|
sortBy |
Bar、Column |
将来 |
|
seriesProperties |
Bar、Column |
サポートされていません |
|
labelPosition |
styleDefaults: { dataLabelPosition: 'auto' } |
Bar、Column |
Flex: none、inside、outside。JET: auto (デフォルト)、center、aboveMarker、belowMarker、beforeMarker、afterMarker |
barWidthRatio |
Bar、Column |
サポートされていません |
|
maxBarWidth |
styleDefaults: { maxBarWidth: 10 } |
Bar、Column |
|
type |
Bar、Column |
Flex: clustered、overlaid、stacked、100%。JET: サポートされていません(スタックは使用可能) |
|
offset |
BarSeries、ColumnSeries |
サポートされていません |
|
stacker |
stack: 'on' |
BarSeries、ColumnSeries |
これはonまたはoffにのみすることができます |
minField |
BarSeries、ColumnSeries |
サポートされていません |
|
labelField |
BarSeries、ColumnSeries |
サポートされていません |
|
labelFunction |
BarSeries、ColumnSeries |
サポートされていません |
|
円グラフ |
|||
labelPosition |
styleDefaults: { sliceLabelPosition: 'auto' } |
Pie |
Flex: none、outside、callout、inside、insideWithCallout。JET: auto (デフォルト)、none、outside、inside |
selectedColumn |
Pie |
カスタム・バインディング/要素でサポートされています |
|
selectedKey |
Pie |
カスタム・バインディング/要素でサポートされています |
|
innerRadius |
styleDefaults: {pieInnerRadius: '0.5'}, |
Pie |
|
textAlign |
Pie |
Flex: left、right、center。JET: サポートされていません |
|
explodeRadius |
styleDefaults: {pieInnerRadius: '0.5', selectionEffect: 'explode'}, |
PieSeries |
JET: selectionEffect: explode、highlight、highlightAndExplode |
perWedgeExplodeRadius |
PieSeries |
サポートされていません |
|
reserveExplodeRadius |
PieSeries |
サポートされていません |
|
startAngle |
PieSeries |
サポートされていません |
|
maxLabelRadius |
PieSeries |
サポートされていません |
|
outerRadius |
PieSeries |
サポートされていません |
|
labelFunction |
PieSeries |
サポートされていません |
|
fillFunction |
PieSeries |
サポートされていません |
|
field |
mpSeries: { [ { field: "myField" } ] } |
PieSeries |
カスタム・バインディング/要素でサポートされています |
nameField |
mpSeries: { [ { nameField: "myNameField" } ] } |
PieSeries |
カスタム・バインディング/要素でサポートされています |
labelField |
PieSeries |
サポートされていません |
次に、前述の表記法の一部を組み合せて使用した例を示します。
| Flexタグ | カスタム・バインディング |
|---|---|
<div id="metDataCustBinding" style="height:90%;width:100%"
data-bind="mpChart: {
type: 'line',
title: {text: 'My Title'},
subtitle: {text: 'My subtitle'},
dataSelection: 'multiple',
emptyText: 'No data',
yAxis: {title: 'Data', min: 0, max: 10},
animationOnDisplay: 'auto',
targetName: 'HostSample',
targetType: 'demo_hostsample',
metricName: 'CPUProcessorPerf',
metricColumns: ['CPUUser','CPUSystem'],
timePeriod: 'REALTIME',
interval: 15}">
</div>
|
<mp-chart id="metDataCustBinding" style="height:90%;width:100%"
params="mpChart: {
type: 'line',
title: {text: 'My Title'},
subtitle: {text: 'My subtitle'},
dataSelection: 'multiple',
emptyText: 'No data',
yAxis: {title: 'Data', min: 0, max: 10},
animationOnDisplay: 'auto',
targetName: 'HostSample',
targetType: 'demo_hostsample',
metricName: 'CPUProcessorPerf',
metricColumns: ['CPUUser','CPUSystem'],
timePeriod: 'REALTIME',
interval: 15}">
</mp-chart>
|
customDataSourceの使用:
| Flexタグ | カスタム・バインディング |
|---|---|
<div id="lchart_from_custom" style="height:100%;width:100%"
data-bind="mpChart: {
type: 'line',
customDataSource: model().cpuChartData,
emptyText: 'No data',
animationOnDisplay: 'auto'}">
</div>
|
<mp-chart id="lchart_from_custom" style="height:100%;width:100%"
params="mpChart: {
type: 'line',
customDataSource: model().cpuChartData,
emptyText: 'No data',
animationOnDisplay: 'auto'}" >
</mp-chart>
|
var cpuData = page.getModel("cpuChartData");
if (cpuData == null) {
cpuData = new CustomDataSource(["Sys/IO", "Idle %"], false, true);
page.setModel("cpuChartData", cpuData);
}
メトリックの指定(指定したキーを含む)の使用:
| Flexタグ | カスタム・バインディング |
|---|---|
<div id="lchart_from_metric2" style="height:100%;width:100%"
data-bind="mpChart: {
type: 'line',
dataSelection: 'multiple',
emptyText: 'No data',
animationOnDisplay: 'auto',
targetName: appModel.target.name,
targetType: appModel.target.type,
metricName: 'FilesystemPerf',
metricColumns: ['Utilization'],
keys: controller.page.keys([ [['MountPoint', '/']],
[['MountPoint', '/dev/shm']] ]),
timePeriod: 'REALTIME',
interval:60}">
</div>
|
<mp-chart id="lchart_from_metric2" style="height:100%;width:100%"
params="mpChart: {
type: 'line',
dataSelection: 'multiple',
emptyText: 'No data',
animationOnDisplay: 'auto',
targetName: appModel.target.name,
targetType: appModel.target.type,
metricName: 'FilesystemPerf',
metricColumns: ['Utilization'],
keys: controller.page.keys([ [['MountPoint', '/']],
[['MountPoint', '/dev/shm']] ]),
timePeriod: 'REALTIME',
interval:60}">
</mp-chart>
|
参照線の表示:
| Flexタグ | カスタム・バインディング |
|---|---|
<div id="lchart_from_metric_history" style="height:100%;width:100%"
data-bind="mpChart: {
type: 'line',
timeAxisType: 'enabled',
dataSelection: 'multiple',
emptyText: 'No data',
title: {text: 'Free Swap (KB)'},
yAxis: {min: 0},
warningLine : { value: 5000000, showOnTop: true },
alertLine : { value: 1000000, showOnTop: true },
animationOnDisplay: 'auto',
targetName: appModel.target.name,
targetType: appModel.target.type,
metricName: 'MemoryPerf',
metricColumns: ['SwapFree'],
timePeriod: 'LAST_DAY'}">
</div>
|
<mp-chart id="lchart_from_metric_history" style="height:100%;width:100%"
params="mpChart: {
type: 'line',
timeAxisType: 'enabled',
dataSelection: 'multiple',
emptyText: 'No data',
title: {text: 'Free Swap (KB)'},
yAxis: {min: 0},
warningLine : { value: 5000000, showOnTop: true },
alertLine : { value: 1000000, showOnTop: true },
animationOnDisplay: 'auto',
targetName: appModel.target.name,
targetType: appModel.target.type,
metricName: 'MemoryPerf',
metricColumns: ['SwapFree'],
timePeriod: 'LAST_DAY'}">
</mp-chart>
|
| Flexタグ | カスタム・バインディング |
|---|---|
<div id="cpuAreaChartID" style="height:100%;width:100%"
data-bind="mpChart: {
type: 'area',
timeAxisType: 'enabled',
dataSelection: 'multiple',
emptyText: 'No data',
animationOnDisplay: 'auto',
yAxis: {min: 0, title: '% Utilization'},
targetName: appModel.target.name,
targetType: appModel.target.type,
metricName: 'CPUPerf',
metricColumns: ['non_nice', 'nice', 'system', 'io_wait', 'irq'],
timePeriod: 'REALTIME',
interval: 30}" >
</div>
|
<mp-chart id="cpuAreaChartID" style="height:100%;width:100%"
params="mpChart: {
type: 'area',
timeAxisType: 'enabled',
dataSelection: 'multiple',
emptyText: 'No data',
animationOnDisplay: 'auto',
yAxis: {min: 0, title: '% Utilization'},
targetName: appModel.target.name,
targetType: appModel.target.type,
metricName: 'CPUPerf',
metricColumns: ['non_nice', 'nice', 'system', 'io_wait', 'irq'],
timePeriod: 'REALTIME',
interval: 30}" >
</mp-chart>
|
棒グラフはorientationプロパティを使用するという点のみが縦棒グラフと異なります。指定しない場合、デフォルトは垂直(つまり縦棒グラフ)に設定されます。
customDataSourceの使用:
| Flexタグ | カスタム・バインディング |
|---|---|
<div id="bchart_from_custom" style="height:100%;width:100%"
data-bind="mpChart: {
type: 'bar',
orientation: 'horizontal',
groupBy: 'byColumn',
customDataSource: model().fsTypeDataSource,
emptyText: 'No data',
animationOnDisplay: 'auto'}" >
</div>
|
<mp-chart id="bchart_from_custom" style="height:100%;width:100%"
data-bind="mpChart: {
type: 'bar',
orientation: 'horizontal',
groupBy: 'byColumn',
customDataSource: model().fsTypeDataSource,
emptyText: 'No data',
animationOnDisplay: 'auto'}">
</mp-chart>
|
controller.initから:
var fsTypeData = page.getModel("fsTypeDataSource");
if (fsTypeData == null) {
fsTypeData = new CustomDataSource([new QueryColumnDesc("nfs", QueryColumnType.STRING),
new QueryColumnDesc("ext3", QueryColumnType.STRING),
new QueryColumnDesc("tmpfs", QueryColumnType.STRING)]);
page.setModel("fsTypeDataSource", fsTypeData);
}
dataServiceの使用:
| Flexタグ | カスタム・バインディング |
|---|---|
<div id="bchart_from_sql" style="height:100%;width:100%"
data-bind="mpChart: {
type: 'bar',
orientation: 'horizontal',
groupBy: 'byColumn',
dataService: 'cpu_usage_from_sql',
xAxis: {title: 'CPU Number'},
emptyText: 'No data',
animationOnDisplay: 'auto'}">
</div>
<div id="cpu_usage_from_sql" data-bind="mpSqlDataService : {
queryID:'CPU_USAGE',
properties:props('TARGET_GUID',appModel.target.guid) }">
</div>
|
<mp-chart id="bchart_from_sql" style="height:100%;width:100%"
params="mpChart: {
type: 'bar',
orientation: 'horizontal',
groupBy: 'byColumn',
dataService: 'cpu_usage_from_sql',
xAxis: {title: 'CPU Number'},
emptyText: 'No data',
animationOnDisplay: 'auto'}">
</mp-chart>
|
これは、トピックの始まりとなります。棒グラフはorientationプロパティを使用するという点のみが縦棒グラフと異なります。指定しない場合、デフォルトは垂直(つまり縦棒グラフ)に設定されます。
dataServiceの使用:
| Flexタグ | カスタム・バインディング |
|---|---|
<div id="bchart_from_custom2" style="height:100%;width:100%"
data-bind="mpChart: {
type: 'bar',
dataService: 'topFiveFsData',
emptyText: 'No data',
animationOnDisplay: 'auto'}" >
</div>
|
<mp-chart id="bchart_from_custom2" style="height:100%;width:100%"
params="mpChart: {
type: 'bar',
dataService: 'topFiveFsData',
emptyText: 'No data',
animationOnDisplay: 'auto'}">
</mp-chart>
|
<mp-metric-values-data-service id="topFiveFsData"
params="metricName:'FilesystemPerf',
columns:['Utilization'],
targetName:appModel.target.name,
targetType:appModel.target.type,
timePeriod:'REALTIME',
interval: 30">
</mp-metric-values-data-service>
メトリックの指定の使用:
| Flexタグ | カスタム・バインディング |
|---|---|
<div id="processorChart" style="height:100%;width:100%"
data-bind="mpChart: {
type: 'bar',
orientation: 'vertical',
dataSelection: 'multiple',
emptyText: 'No data',
animationOnDisplay: 'auto',
targetName: appModel.target.name,
targetType: appModel.target.type,
metricName: 'CPUProcessorPerf',
metricColumns: ['CPUIdle'],
timePeriod: 'LAST_DAY'}" >
</div>
|
<mp-chart id="processorChart" style="height:100%;width:100%"
params="mpChart: {
type: 'bar',
orientation: 'vertical',
dataSelection: 'multiple',
emptyText: 'No data',
animationOnDisplay: 'auto',
targetName: appModel.target.name,
targetType: appModel.target.type,
metricName: 'CPUProcessorPerf',
metricColumns: ['CPUIdle'],
timePeriod: 'LAST_DAY'}" >
</mp-chart>
|
customDataSourceの使用:
| Flexタグ | カスタム・バインディング |
|---|---|
<div id="cpuByUserChart" style="height:100%;width:100%"
data-bind="mpChart: {
type: 'pie',
title: {text: 'CPU % per User'},
customDataSource: model().userSummaryData,
selectedColumn: model().userCpuCol,
emptyText: 'No data',
animationOnDisplay: 'auto'}" >
</div>
|
<mp-chart id="cpuByUserChart" style="height:100%;width:100%"
params="mpChart: {
type: 'pie',
title: {text: 'CPU % per User'},
customDataSource: model().userSummaryData,
selectedColumn: model().userCpuCol,
emptyText: 'No data',
animationOnDisplay: 'auto'}" >
</mp-chart>
|
controller.initから:
var userSummaryData = new CustomDataSource(["User","CPU %","Process Count"], true);
page.setModel("userSummaryData", userSummaryData);
dataServiceの使用:
| Flexタグ | カスタム・バインディング |
|---|---|
<div id="pchart_from_mvds" style="height:100%;width:100%"
data-bind="mpChart: {
type: 'pie',
dataService: 'memory_data_from_metric_realtime',
emptyText: 'No data',
animationOnDisplay: 'auto'}">
</div>
|
<mp-chart id="pchart_from_mvds" style="height:100%;width:100%"
params="mpChart: {
type: 'pie',
dataService: 'memory_data_from_metric_realtime',
emptyText: 'No data',
animationOnDisplay: 'auto'}">
</mp-chart>
|
<mp-metric-values-data-service id="memory_data_from_metric_realtime"
params="flattenData: true,
metricName:'MemoryPerf',
columns:['MemFree','Buffers','Cached','SwapCached','Active','Inactive'],
targetName:appModel.target.name,
targetType:appModel.target.type,
timePeriod:'REALTIME',
interval: 15 ">
</mp-metric-values-data-service>
メトリックの指定の使用:
| Flexタグ | カスタム・バインディング |
|---|---|
<div id="memChart" style="height:80%;width:100%"
data-bind="mpChart: {
type: 'pie',
dataSelection: 'multiple',
styleDefaults: {colors: Colors.DEFAULT_COLORS},
targetName: appModel.target.name,
targetType: appModel.target.type,
metricName: 'MemoryPerf',
metricColumns: model().memChartColumns,
timePeriod: 'CURRENT', emptyText: 'No data',
animationOnDisplay: 'auto'}" >
</div>
|
<mp-chart id="memChart" style="height:80%;width:100%"
params="mpChart: {
type: 'pie',
dataSelection: 'multiple',
styleDefaults: {colors: Colors.DEFAULT_COLORS},
targetName: appModel.target.name,
targetType: appModel.target.type,
metricName: 'MemoryPerf',
metricColumns: model().memChartColumns,
timePeriod: 'CURRENT', emptyText: 'No data',
animationOnDisplay: 'auto'}" >
</mp-chart>
|
インシデント・リージョン
| Flexタグ | カスタム・バインディング | カスタム要素 |
|---|---|---|
<mp:IncidentRegion id="eventsRegion" height="34%" width="100%" /> |
<div data-bind="mpIncidentRegion" style="height:33%"></div> |
<mp-incident-region style="height:33%"> </mp-incident-region> |
ジョブ・アクティビティ・リージョン
| Flexタグ | カスタム・バインディング | カスタム要素 |
|---|---|---|
<mp:JobSummaryRegion id="jobSummary" width="100%" height="30%" /> |
<div data-bind="mpJobSummaryRegion" style="height:30%"></div> |
<mp-job-summary-region style="height:35%;width:100%"> </mp-job-summary-region> |
可用性リージョン
| Flexタグ | カスタム・バインディング | カスタム要素 |
|---|---|---|
<mp:AvailabilityDetails id="availDetails" width="100%" height="100%" daySpan="1"/> |
<div data-bind="mpAvailabilityRegion" style="height:100%;width:100%"></div> |
<mp-availability-region style="height:100%;width:100%"> </mp-availability-region> |
CredentialsRegion
| Flexタグ | カスタム・バインディング | カスタム要素 |
|---|---|---|
<mp:CredentialsRegion id="sampleCreds"
width="40%" height="100%"
credentialState="{model.sampCredState}"
credentialType="{'SampleCredsType'}" />
|
<div id="sampleCreds"
data-bind="mpCredentialsRegion: {
credentialType:'SampleCredsType',
credentialState:model().sampCredState
}"></div>
|
<mp-credentials-region id="sampleCreds"
params="credentialType:'SampleCredsType',
credentialState:model().sampCredState">
</mp-credentials-region>
|
CredentialsDisplay
| Flexタグ | カスタム・バインディング | カスタム要素 |
|---|---|---|
<mp:CredentialsDisplay id="creds"
width="100%" height="100%"
credentialTypes="{['HostCreds',
'SampleCredsType']}"
credentialState="{model.credState}"/>
|
<div id="creds"
data-bind="mpCredentialsDisplay: {
credentialTypes:['HostCreds',
'SampleCredsType'],
credentialState:model().credState
}"></div>
|
<mp-credentials-display id="creds"
params="credentialTypes:['HostCreds',
'SampleCredsType'],
credentialState:model().credState" >
</mp-credentials-display>
|
ステータスの概要リージョン
| Flexタグ | カスタム・バインディング | カスタム要素 |
|---|---|---|
<mp:StatusOverviewRegion id="statusRegion" height="34%" width="100%" /> |
<div data-bind="mpStatusOverviewRegion" style="height:33%"></div> |
<mp-status-overview-region style="height:33%"> </mp-status-overview-region> |
問題の概要リージョン
| Flexタグ | カスタム・バインディング | カスタム要素 |
|---|---|---|
<mp:IssuesOverviewRegion id="issuesRegion" height="34%" width="100%" /> |
<div data-bind="mpIssuesOverviewRegion" style="height:33%"></div> |
<mp-issues-overview-region style="height:33%"> </mp-issues-overview-region> |
ジョブ・アクティビティ・リージョン
| Flexタグ | カスタム・バインディング | カスタム要素 |
|---|---|---|
<mp:JobsActivityRegion id="jobActivity" width="100%" height="30%" /> |
<div data-bind="mpJobsActivityRegion" style="height:30%"></div> |
<mp-jobs-activity-region style="height:35%;width:100%"> </mp-jobs-activity-region> |
