poorX

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

github:https://github.com/firehol/netdata

安装:https://github.com/firehol/netdata/wiki/Installation

内存使用说明:https://github.com/firehol/netdata/wiki/Memory-Requirements

配置:https://github.com/firehol/netdata/wiki/Configuration

页面定制:https://github.com/firehol/netdata/wiki/Custom-Dashboards

 

wiki中提到页面需要一个header:

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Your dashboard</title>

    <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">

    <!-- here we will add dashboard.js -->

</head>
<body>

<!-- here we will add charts -->

</body>
</html>

 

页面定制:

1、页面数据加载和样式的展示都是依赖netdata server服务dashboard.js实现的,如果自定义页面中有多台服务器数据,dashboard从一台中加载一遍即可

2、数据获取依赖两个元素属性,data-netdata=""和data-host="http://netdata:19999/",data-netdata是监控项名例如“system.cpu”,data-host是数据源服务器

3、如果元素没有自定义样式,netdata会默认选择监控项的样式

4、数据样式data-chart-library默认是dygraph(区域图),还有表盘样式easypiechart和gauge等

5、自定义样式有data-after=""/data-before=""时间区域,长宽高、最大值等,参考wiki即可

 

下面是两台虚拟机的自定义页面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Your dashboard</title>

    <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">

    <!-- here we will add dashboard.js -->
    <script type="text/javascript" src="http://192.168.1.113:19999/dashboard.js"></script>
    <script type="text/javascript" src="http://192.168.1.114:19999/dashboard.js"></script>
</head>
<body>

<!-- here we will add charts -->
    <div data-netdata="system.cpu" data-chart-library="gauge" data-host="http://192.168.1.113:19999/" data-title="113CPU" data-units="%" data-gauge-max-value="100" data-width="18%" data-after="-420" data-points="420" data-colors="#22AA99" role="application" class="netdata-container" style="width: 18%; height: 164.5px;"></div>
    <div data-netdata="system.cpu" data-chart-library="gauge" data-host="http://192.168.1.114:19999/" data-title="114CPU" data-units="%" data-gauge-max-value="100" data-width="18%" data-after="-420" data-points="420" data-colors="#22AA99" role="application" class="netdata-container" style="width: 18%; height: 164.5px;"></div>
    <div class="netdata-group-container" id="submenu_system_load" style="display: inline-block; width: 100%">
        <div data-netdata="system.load" data-chart-library="dygraph" data-host="http://192.168.1.113:19999/" data-title="113 CPU LOAD" data-after="-1800" data-before="1800" data-height="120px"></div>
    </div>
    <div class="netdata-group-container" id="submenu_system_load" style="display: inline-block; width: 100%">
        <div data-netdata="system.load" data-chart-library="dygraph" data-host="http://192.168.1.114:19999/" data-title="114 CPU LOAD" data-after="-1800" data-before="1800" data-height="120px"></div>
    </div>
</body>
</html>

 

如果出现页面样式或js不兼容,可以调整dashboard.js中的引用。

 

页面如下

 

posted on 2016-04-04 00:43  poorX  阅读(1882)  评论(0编辑  收藏  举报