Netdataの「tv.html」について

Netdataだと詳しくいろんな監視項目が表示されますが、スクロールしないと駄目なので必要な項目を一画面に表示したい場合は「tv.html」を利用します。

アクセスするURLは「http://[IPアドレス]:19999/tv.html」のようになります

この「tv.html」の用途は以下になります

• 複数のサーバー／端末を1画面で一覧監視
• 各サーバーの CPU・メモリ・Load・ネットワーク等の状態を一画面に表示する
• 通常Dashboardのように縦にスクロールせず、監視対象を一画面に収める

監視用PC・モニターなどで常時表示する 個々のグラフを詳しく見るような目的より、監視項目を監視用画面で表示する用途になります

私の環境では、単体構成ですがスクロールしないと見たい項目が表示されないので不便なのでこれをカスタマイズして必要な項目を1画面で表示するようにしています

「tv.html」のカスタマイズ

「tv.html」のカスタマイズは、netdataがあるディレクトリに「tv.html」を編集すればできます。
今回は以下のようなグラフを表示するようにしました

• CPU使用率
• ロードアベレージ
• メモリ状況
• SWAP使用率
• ディスク使用率
• ディスク I/O
• 総プロセス数
• ネットワーク状況

上記の仕様で、tv.htmlを編集します。まずはバックアップを作成します

# 編集と実施する前にバックアップを作成
$ sudo cp /usr/share/netdata/web/tv.html /usr/share/netdata/web/tv.org

バックアップを作成したら、HTMLの箇所を以下のように変更しました。作りたいグラフはAIで依頼すれば簡単にできるかと思います

$ sudo vim /usr/share/netdata/web/tv.html
    <div style="width: 100%; height: 24vh; text-align: center; display: inline-block;">
        <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
            <b>CPU On both servers</b>
        </div>
        <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
            <br/>
            <div data-netdata="system.cpu"
                    data-title="CPU Usage"
                    data-chart-library="dygraph"
                    data-width="49%"
                    data-height="100%"
                    data-after="-300"
                    data-dygraph-valuerange="[0, 100]"
                    ></div>
            <div data-netdata="system.load"
                    data-title="Load Average"
                    data-chart-library="dygraph"
                    data-width="49%"
                    data-height="100%"
                    data-after="-300"
                    ></div>
        </div>
    </div>


    <div style="width: 100%; height: 24vh; text-align: center; display: inline-block;">
        <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
            <b>Disk I/O on both servers</b>
        </div>
        <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
            <div data-netdata="system.ram"
                    data-title="Memory Allocation"
                    data-chart-library="dygraph"
                    data-width="49%"
                    data-height="100%"
                    data-after="-300"
                    ></div>
            <div data-netdata="mem.swap"
                    data-title="SWAP"
                    data-chart-library="dygraph"
                    data-width="49%"
                    data-height="100%"
                    data-after="-300"
                    ></div>
        </div>
    </div>


    <div style="width: 100%; height: 24vh; text-align: center; display: inline-block;">
        <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
            <b>IPv4 traffic on both servers</b>
        </div>
        <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
            <div data-netdata="disk_space./"
                    data-title="Disk Space Usage (Root)"
                    data-chart-library="dygraph"
                    data-width="49%"
                    data-height="100%"
                    data-after="-300"
                    ></div>
            <div data-netdata="system.io"
                    data-title="I/O"
                    data-common-max="io"
                    data-common-min="io"
                    data-chart-library="dygraph"
                    data-width="49%"
                    data-height="100%"
                    data-after="-300"
                    ></div>
        </div>
    </div>

    <div style="width: 100%; height: 24vh; text-align: center; display: inline-block;">
        <div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
            <b>IPv4 traffic on both servers</b>
        </div>
        <div style="width: 100%; height: calc(100% - 15px); text-align: center; display: inline-block;">
            <div data-netdata="system.processes_state"
                    data-title="System Processes State"
                    data-chart-library="dygraph"
                    data-width="49%"
                    data-height="100%"
                    data-after="-300"
                    ></div>
            <div data-netdata="system.net"
                    data-title="Network traffic on your netdata server"
                    data-common-max="traffic"
                    data-common-min="traffic"
                    data-chart-library="dygraph"
                    data-width="49%"
                    data-height="100%"
                    data-after="-300"
                    ></div>
        </div>
    </div>