メインコンテンツまでスキップ

ウィジェット項目別機能ガイド

メニューパス: `Dashboard > Edit > Add Widget

編集モードでウィジェット追加を選択すると、ウィジェットリストを確認できます。

clipboard

共通設定 (Widget Setting Common UI)​

すべてのウィジェットに共通して適用される設定画面です。

順番項目内容
1Widget Typeウィジェットタイプを選択します。(Graphs, List, Architecture, Business, Text, Image, Filter)
2Widget IDウィジェット間の関係生成および動作連携に使用します。文字、数字、_が使用可能です。
3Widget Nameウィジェット名を入力します。空欄のままにすると、チャートタイプ名が適用されます。
4Text Sizeウィジェットタイトルの文字サイズを選択します。(12, 15, 20, 25)
5Alignウィジェットタイトルの配置を選択します。(左/中央/右)
6Colorウィジェット名の色を選択します。おすすめカラーおよびリセット機能を提供します。
7Hide/Showウィジェット名を非表示または表示にします。

1. グラフ (Graphs) ウィジェット​

時間経過に伴うデータを様々なチャート形式で可視化します。

1-1. Timeseries Widget​

時間経過による推移を示すウィジェットです。

サポートするDisplay Style:

スタイル画像
Line
Area
Bar
Stacked Area
Stacked Bar

Timeseries Widget Setting:

順番項目内容
1Display Styleチャート形式を選択します。(Line / Area / Bar / Stacked Area / Stacked Bar)
2Show max value at the chartチャートに最大値が表示されます。指標の数に関係なく1つの最大値のみ表示されます。
3Mark by Selected MetricsDisplay StyleがAreaのときに表示されます。Stat、Target、Aggregationを設定したデータのCurrent Value、Percentage Changeを選択します。
4Thresholdsチャートデータの閾値を設定します。
5Decimalsチャートデータの小数点桁数を設定します。

1-2. Scatter Widget​

時間経過によるデータの分布を示すウィジェットです。

Scatter Widget Setting:

順番項目内容
1Set Y AxisMax Value: Y軸の最大値設定 (Auto Scale / Set Value)
Min Value: Y軸の最小値設定 (Default Value=0 / Set Value)
2Set Dot Size点のサイズを設定します。(1~5)
3Time Period$Global Time (直近5分 / 直近10分のみ反映)
Past 5 Minutes / Past 10 Minutes / Select from calendar
4Detail Display Mode詳細画面の表示方式を設定します。(Slide / Window Popup)

Scatter Widget連携: チャートをドラッグすると、ドラッグした領域のデータのみを確認できるScatter Detailが表示されます。

1-3. Daily Comparison Widget​

比較日と当日データの24時間推移を比較して示すチャートです。

スタイル画像
Line
Bar

Daily Comparison Widget Setting:

順番項目内容
1Display Styleチャート形式を選択します。(Line / Bar)
2Chart Dataチャートデータを選択します。1つの系列のみ設定可能です。
3Comparison Date比較する日付を選択します。(Yesterday / Last / This / Compare Date)
4Decimalsチャートデータの小数点桁数を設定します。
5Time PeriodPast 1 Dayに固定されています。

1-4. Equalizer Widget​

指標の状態別の現在値をイコライザー形式で示すチャートです。

Equalizer Widget Setting:

順番項目内容
1Chart Dataチャートデータを選択します。1つの系列のみ設定可能で、Series TypeはByに固定されます。
2Stat setting選択した指標のデータを表示します。データ属性が「Number」の場合のみ表示されます。ドラッグによる順序変更、Alias/色の変更、一覧の非表示が可能です。
3Set Y Axis Maximum ValueAxis Auto: 最大値を自動的に設定します。
Axis Fixed: 最大値を手動で設定します。
4Decimalsチャートデータの小数点桁数を設定します。

1-5. Stacked Bar Widget (独立ウィジェット)​

指標を積み上げて1本のバーで示すウィジェットです。

順番項目内容
1Chart Dataチャートデータを選択します。
2Bar OrientationHorizontal: バーの方向を横にします。
Vertical: バーの方向を縦にします。
3Decimalsチャートデータの小数点桁数を設定します。

1-6. Gauge Widget​

ゲージ(円形)形式で示すウィジェットです。

Gauge Widget Setting:

Chart Data:

順番項目内容
1Aliasゲージチャートの名前です。(Series TypeがBYの場合は未提供)
2Value Rangeゲージの表現範囲です。
3Thresholds閾値を設定します。(Absolute Value: 絶対値 / Proportion: 比率)
4Add Thresholds閾値を追加します。

Chart Option:

順番項目内容
1Multi Gauge Settingゲージチャートを追加します。
2Stat settingゲージチャートに表現するStatとTargetを選択します。
3Value Rangeゲージの表現範囲です。
4Thresholds閾値を設定します。(Absolute Value / Proportion)
5Position Setting該当ゲージチャートの位置を選択します。

Marker:

項目内容
No MarkMarkerを表示しません。
Show current values at the center of the chartStatの現在値をチャート中央に表示します。

2. リスト (List) ウィジェット​

データをリスト形式で表示します。

2-1. Tree Grid Widget​

データを表(ツリーグリッド)形式で示すウィジェットです。

Setting

順番項目内容
1Chart DataGroup By: グループ基準でカラムを選択します。
Order by: Descending / Ascendingを選択します。
Limit list to: 件数を選択します。
5, 10, 25, 50, 100
2ColumnsChart Dataから取得したデータを画面上で並べ替えできます。
3Tree Settingリストのツリー構造化基準について設定します。
Parent Id: ツリー構造で親として指定するIDカラムを選択
Child Id: ツリー構造で子として指定するIDカラムを選択
4Thresholdsデータ条件に応じてセルまたは行の色を設定できます。

2-2. Top List Widget​

上位リストを示すウィジェットです。

Setting

順番項目内容
1Chart DataSort By stat: 並べ替え基準となるデータを選択します。
Order by: Descending / Ascendingを選択します。
Limit list to: 件数を選択します。
5, 10, 25, 50, 100
Display: チャートに表現される名前を選択します。

3. アーキテクチャ (Architecture) ウィジェット​

モニタリング対象の状態、接続関係などを可視化します。

3-1. Exclusive View Widget​

対象を比較するウィジェットです。

Exclusive View Widget Setting:

順番項目内容
1Chart TargetTarget Type: Node, Pod, Container, Application, Database, Host, Network Device, AWS系列, Kafkaなどを選択
Target: 選択したTypeに該当するモニタリングTargetを選択します。
2Color Styleカラースタイルを選択します。Custom Color: データA, B, C, Dの色を選択
3Chart Dataウィジェットで指標一覧として提供するデータを選択します。選択したTarget Typeと一致する指標を選択して初めてデータが表現されます。A, B, C, Dのデータは削除できません。

3-2. Topology Widget​

ノードとエッジによってサービスの接続関係と構造を一目で示すウィジェットです。

主な設定項目:

  • Display Style: Topology / Point Mapが使用可能
  • Node Setting: Target設定、Node Stat設定(指標および閾値の設定が可能)
  • アラーム出力: Node Stat閾値設定時にアラームが発生、User Alert発生時はUser Alertが優先的に出力

ネットワークデバイスモニタリング時: OIDリソースの追加およびネットワークデバイス収集設定が必要です。

clipboard

3-3. Alert Widget​

リアルタイムのアラーム現況を示すウィジェットです。

使用方法:

  1. Dashboard > 編集モード > Widgetsタブ > Alertウィジェットとして作成します。

clipboard

  1. Settingsで以下の項目を設定します。

clipboard

項目内容
Chart Target > Target TypeNode, Pod, Container, Application, Database, Host, Network Device, AWSなどを選択
Chart Target > TargetTarget Type選択に応じたTargetを選択
Sort by StatalertRuleId、alertRuleName、alertRuleType、ruleCriteria、alertLevelなどで並べ替え

4. フィルター (Filter) ウィジェット​

他のウィジェットと連携して照会条件をフィルタリングするウィジェットです。

6-1. Horizontal Widget​

横型フィルターウィジェットです。

フィルターウィジェット連携方法:

  1. フィルターウィジェットを設定します。

clipboard

  1. 連携するウィジェットの参照変数設定で、フィルターウィジェットの変数を設定します。

clipboard

  1. フィルターウィジェットで検索すると、該当条件で照会されます。

ウィジェット別クエリマネージャーカスタム指標サポート有無​

カテゴリウィジェットカスタム指標サポート
GraphsTimeseries✅ サポート
GraphsScatter✅ サポート
GraphsDaily Comparison❌ 未サポート
GraphsEqualizer✅ サポート
GraphsScoreboard✅ サポート
GraphsPie✅ サポート
GraphsStacked Bar✅ サポート
GraphsGauge❌ 未サポート
GraphsAction View❌ 未サポート
GraphsHeatmap❌ 未サポート
Architectureすべてのウィジェット❌ 未サポート
Businessすべてのウィジェット❌ 未サポート