サービス監視ダッシュボード

Wijmoのコントロールを使用して、サービスの通信状況や負荷状況を監視するダッシュボードを作成する例です。

ここでは、サービス監視ダッシュボードを構築する際に押さえておきたいポイントを紹介します。 使用しているコントロール サービス監視ダッシュボードでは、次のコントロールを利用しています。 RadialGauge(CPU 使用率などの最新値表示) RadialGaugeを利用してCPU使用率などの最新の値をゲージ表示します。 また、RadialGauge.getTextプロパティは、format プロパティでは対応しきれない場合に、ゲージ上の文字列をカスタマイズするために使用します。本使用例では、セッション遅延ゲージで「ms」を表示するために利用しています。 FlexChart(1 週間分の各種メトリクスの推移) FlexChartを使用し、CPU 使用率などの 1 週間分の推移を折れ線グラフとして可視化しています。 グラフ全体に適用するデフォルトのチャートタイプは FlexChart.chartType プロパティで指定します。 系列ごとにチャートタイプを変更したい場合は、 FlexChart.series 配列の各メンバで Series.chartType を設定します。 セッション遅延、UDPパケット損失率、CPU使用率、メモリ使用率などのグラフでは、異常検出バンドを領域として表示するために Series.chartType を利用しています。 レンジエリア (Range Area) chartType="Area"の系列に対し、binding="bandLo,bandHi"のように2つのプロパティ名を指定すると、2本の線に挟まれた領域が塗りつぶされます。本使用例ではこの機能を用いて、異常検出バンドを表示しています。 null を含む孤立データ点の可視化 chartType="Line" の折れ線グラフでは、前後が null のデータ点(孤立点)は線で結べないため、表示されません。 データ例: このようなケースでは、次のいずれかの方法で可視化できます。 ① LineSymbols を使用する chartType="LineSymbols" を指定すると、線とあわせてデータ点にシンボルが表示されます。 デモサンプル ② itemFormatter で「孤立点のみ」シンボル表示(本使用例で採用) itemFormatterプロパティを使用すると、条件付きでシンボルやスタイルを追加できます。本使用例では、孤立しているデータ点のみをシンボル表示したいためitemFormatterを使用した実装としています。 ツールチップのカスタマイズ tooltipcontentプロパティを使うと、系列ごとのツールチップ内容をカスタマイズできます。本使用例では、文字色の指定や値表示のカスタマイズを行っています。