여러 대의 서버 모니터링을 위한 netdata 커스텀 대시보드

by 편리

netdata 는 무료이면서 강력한 기능을 제공하는 모니터링 도구이다. netdata 모니터링 항목은 netdata 데모 (https://london.my-netdata.io/default.html) 를 참고한다. 또한 첨부한 이미지와 같이 netdata api 를 통해 여러 대의 서버 자원을 한 눈에 모니터링할 수도 있다. 이를 위해서 netdata 의 커스텀 대시보드를 구성해 본다.

커스텀 대시보드 데모 : http://demo.chicpro.dev/netdata-dashboard.html

데모에는 cpu, ram, disk 및 uptime 정보를 제공한다. 커스텀 대시보드 데모의 코드는 아래와 같다.

<!DOCTYPE html>
<html lang="en">
<head>
    <title>NetData Dashboard</title>
    <meta name="application-name" content="netdata">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

    <script>var netdataTheme = 'slate';</script>
    <script type="text/javascript" src="https://london.my-netdata.io/dashboard.js"></script>

    <style>
    .item {margin: 10px; padding: 15px 10px; border:1px solid #494949;}
    </style>
</head>

<script>
    // --- OPTIONS FOR THE DASHBOARD --

    // this section has to appear before loading dashboard.js

    // Select a theme.
    // uncomment on of the two themes:

    // var netdataTheme = 'default'; // this is white
    var netdataTheme = 'slate'; // this is dark

    var netdataNoBootstrap = true;

    // Set the default netdata server.
    // on charts without a 'data-host', this one will be used.
    // the default is the server that dashboard.js is downloaded from.

    // var netdataServer = 'http://my.server:19999/';
</script>

<body>

    <div class="container">

        <div class="col-md-3 item">
            <div>
                <div data-netdata="system.cpu"
                    data-host="https://london.my-netdata.io/"
                    data-gauge-max-value="100"
                    data-chart-library="gauge"
                    data-width="50%"
                    data-after="-540"
                    data-points="540"
                    data-title="CPU"
                    data-units="%"
                    data-colors="#2c9588"
                    data-gauge-generate-gradient="[0, 80, 100]"
                    data-gauge-gradient-percent-color-0="#2c9588"
                    data-gauge-gradient-percent-color-80="#c96667"
                    data-gauge-gradient-percent-color-100="#ff3300"
                    class="netdata-container"></div>

                <div class="netdata-container-easypiechart"
                    data-netdata="system.ram"
                    data-host="https://london.my-netdata.io/"
                    data-dimensions="used|buffers|active|wired"
                    data-append-options="percentage"
                    data-chart-library="easypiechart"
                    data-title="Used RAM"
                    data-units="%"
                    data-easypiechart-max-value="100"
                    data-width="45%"
                    data-after="-540"
                    data-points="540"
                    data-colors="#EE9911"
                    role="application"></div>
            </div>

            <div>
                <div data-netdata="disk_space._"
                    data-host="https://london.my-netdata.io/"
                    data-title="disk space for /"
                    data-append-options="percentage"
                    data-decimal-digits="0"
                    data-dimensions="used"
                    data-chart-library="gauge"
                    data-width="100%"
                    data-height="100%"
                    data-after="-300"
                    data-points="300"
                    data-gauge-max-value="100"
                    data-colors="#ffffff"
                    data-gauge-generate-gradient="[0, 70, 100]"
                    data-gauge-gradient-percent-color-0="#ffffff"
                    data-gauge-gradient-percent-color-70="d88b2f"
                    data-gauge-gradient-percent-color-100="#ff3300"
                    data-units="%"
                    ></div>
            </div>

            <div data-netdata="system.uptime"
                data-host="https://london.my-netdata.io/"
                data-title="uptime"
                data-width="100%"
                data-legend="no"
                data-points="200"
                data-dimensions="uptime"
                data-show-value-of-uptime-at="london-uptime"
            ></div>

            <div class="text-center">uptime : <span id="london-uptime"></span></div>

            <div class="text-center" style="padding-top: 10px;">
                <a href="https://london.my-netdata.io/" class="btn btn-primary btn-sm" target="_blank">London</a>
            </div>

        </div>

        <div class="col-md-3 item">
            <div>
                <div data-netdata="system.cpu"
                    data-host="https://sanfrancisco.my-netdata.io/"
                    data-gauge-max-value="100"
                    data-chart-library="gauge"
                    data-width="50%"
                    data-after="-540"
                    data-points="540"
                    data-title="CPU"
                    data-units="%"
                    data-colors="#2c9588"
                    data-gauge-generate-gradient="[0, 80, 100]"
                    data-gauge-gradient-percent-color-0="#2c9588"
                    data-gauge-gradient-percent-color-80="#c96667"
                    data-gauge-gradient-percent-color-100="#ff3300"
                    class="netdata-container"></div>

                <div class="netdata-container-easypiechart"
                    data-netdata="system.ram"
                    data-host="https://sanfrancisco.my-netdata.io"
                    data-dimensions="used|buffers|active|wired"
                    data-append-options="percentage"
                    data-chart-library="easypiechart"
                    data-title="Used RAM"
                    data-units="%"
                    data-easypiechart-max-value="100"
                    data-width="45%"
                    data-after="-540"
                    data-points="540"
                    data-colors="#EE9911"
                    role="application"></div>
            </div>

            <div>
                <div data-netdata="disk_space._"
                    data-host="https://sanfrancisco.my-netdata.io/"
                    data-title="disk space for /"
                    data-append-options="percentage"
                    data-decimal-digits="0"
                    data-dimensions="used"
                    data-chart-library="gauge"
                    data-width="100%"
                    data-height="100%"
                    data-after="-300"
                    data-points="300"
                    data-gauge-max-value="100"
                    data-colors="#ffffff"
                    data-gauge-generate-gradient="[0, 70, 100]"
                    data-gauge-gradient-percent-color-0="#ffffff"
                    data-gauge-gradient-percent-color-70="d88b2f"
                    data-gauge-gradient-percent-color-100="#ff3300"
                    data-units="%"
                    ></div>
            </div>

            <div data-netdata="system.uptime"
                data-host="https://sanfrancisco.my-netdata.io/"
                data-title="uptime"
                data-width="100%"
                data-legend="no"
                data-points="200"
                data-dimensions="uptime"
                data-show-value-of-uptime-at="california-uptime"
            ></div>

            <div class="text-center">uptime : <span id="california-uptime"></span></div>

            <div class="text-center" style="padding-top: 10px;">
                <a href="https://sanfrancisco.my-netdata.io/" class="btn btn-primary btn-sm" target="_blank">California</a>
            </div>

        </div>

    </div>
</body>
</html>

코드 중 data-host="https://london.my-netdata.io/" 부분을 모니터링할 서버로 지정하면 된다. 커스텀 대시보드 관련 내용은 https://github.com/netdata/netdata/wiki/Custom-Dashboards 를 참고했다.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.