Skip to content

Instantly share code, notes, and snippets.

@earvingad

earvingad/customh.html

Created September 3, 2022 17:18
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save earvingad/15da512f770e4de7245cc7f4345d84cf to your computer and use it in GitHub Desktop.
Save earvingad/15da512f770e4de7245cc7f4345d84cf to your computer and use it in GitHub Desktop.
Download ZIP
Custom netdate dashboards for monitoriing: CPU, RAM, Network, NFS and S.M.A.R.T. data on a server and OpenWrt Router
Raw
customh.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>SERVER Netdata</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">
<script>
var netdataTheme = 'slate';
</script>
<!-- Add dashboard.js here! -->
<script type="text/javascript" src="http://<SERVER IP>:19999/dashboard.js"></script>
</head>
<body>
<div style="width: 100%; height: 23vh; text-align: center; display: inline-block;">
<div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
<b>Netdata statistics on SERVER</b>
</div>
<div style="width: 100%; max-height: calc(100% - 15px); text-align: center; display: inline-block;">
<div style="width: 100%; height:100%; align: center; display: inline-block;">
SERVER
<br/>
</div>
<div data-netdata="system.cpu"
data-title="CPU"
data-chart-library="gauge"
data-width="22%"
data-height="100%"
data-gauge-max-value="100"
data-points="600"
></div>
<div data-netdata="system.ram"
data-title="ram"
data-dimensions="used"
data-chart-library="gauge"
data-width="22%"
data-height="100%"
data-gauge-max-value="3183"
data-points="600"
></div>
<div data-netdata="net.enp4s0"
data-title="Received"
data-dimensions="received"
data-chart-library="gauge"
data-width="22%"
data-height="100%"
data-points="600"
></div>
<div data-netdata="net.enp4s0"
data-title="Sent"
data-dimensions="sent"
data-chart-library="gauge"
data-width="22%"
data-height="100%"
data-points="600"
></div>
</div>
<div data-netdata="net.enp4s0"
data-chart-library="dygraph"
data-width="100%"
data-height="50%"
data-points="300"
></div>
<div data-netdata="disk.sdb"
data-title="Read-Write sdb"
data-chart-library="dygraph"
data-width="100%"
data-height="50%"
data-points="300"
></div>
<div style="width: 100%; height: 23vh; text-align: center; display: inline-block;">
<div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
<b>Drives</b>
</div>
<div style="width: 49%; height:100%; align: center; display: inline-block;">
Disk Space media
<br/>
<div data-netdata="disk_space._home_media"
data-title="media"
data-chart-library="dygraph"
data-width="100%"
data-height="50%"
data-after="-600"
></div>
</div>
<div style="width: 49%; height:100%; align: center; display: inline-block;">
Read Error Rate
<br/>
<div data-netdata="smartd_log_local.read_error_rate"
data-title="Read Error Rate"
data-chart-library="dygraph"
data-width="140px"
data-height="10%"
data-after="-600"
></div>
</div>
</div>
<div style="width: 100%; height: 23vh; text-align: center; display: inline-block;">
<div style="width: 49%; height:100%; align: center; display: inline-block;">
Pending Sectors
<br/>
<div data-netdata="smartd_log_local.current_pending_sector_count"
data-title="Pending Sectors"
data-chart-library="dygraph"
data-width="140px"
data-height="10%"
data-after="-600"
></div>
</div>
<div style="width: 49%; height:100%; align: center; display: inline-block;">
Reallocated Sectors
<br/>
<div data-netdata="smartd_log_local.reallocated_sectors_count"
data-title="Reallocated Sectors"
data-chart-library="dygraph"
data-width="140"
data-height="10%"
data-after="-600"
></div>
</div>
</div>
<div data-netdata="smartd_log_local.temperature_celsius"
data-chart-library="dygraph"
data-width="100%"
data-height="100%"
data-after="-600"
data-dygraph-valuerange="[25, 60]"
></div>
</body>
</html>
Raw
customk.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>OpenWrt Netdata</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">
<script>
var netdataTheme = 'slate';
</script>
<!-- Add dashboard.js here! -->
<script type="text/javascript" src="http://<OpenWrt Router IP>:19999/dashboard.js"></script>
</head>
<body>
<div style="width: 100%; height: 23vh; text-align: center; display: inline-block;">
<div style="width: 100%; height: 15px; text-align: center; display: inline-block;">
<b>Netdata statistics on OpenWrt</b>
</div>
<div style="width: 100%; max-height: calc(100% - 15px); text-align: center; display: inline-block;">
<div style="width: 100%; height:100%; align: center; display: inline-block;">
OpenWrt
<br/>
</div>
<div data-netdata="system.cpu"
data-title="CPU"
data-chart-library="gauge"
data-width="22%"
data-height="100%"
data-gauge-max-value="100"
data-points="600"
></div>
<div data-netdata="system.ram"
data-title="ram"
data-dimensions="used"
data-chart-library="gauge"
data-width="22%"
data-height="100%"
data-gauge-max-value="242.4"
data-points="600"
></div>
<div data-netdata="system.swap"
data-title="swap"
data-dimensions="used"
data-chart-library="gauge"
data-width="22%"
data-height="100%"
data-gauge-max-value="256"
data-points="600"
></div>
</div>
<div style="width: 100%; height: 23vh; text-align: center; display: inline-block;">
<div style="width: 100%; height:100%; align: center; display: inline-block;">
Wired
<br/>
<div data-netdata="net.eth1"
data-chart-library="dygraph"
data-width="100%"
data-height="50%"
data-points="300"
></div>
<div data-netdata="net.eth0"
data-chart-library="dygraph"
data-width="100%"
data-height="49%"
data-points="300"
></div>
<div data-netdata="net.br-lan"
data-chart-library="dygraph"
data-width="100%"
data-height="50%"
data-points="300"
></div>
<div data-netdata="nfsd.io"
data-chart-library="dygraph"
data-width="100%"
data-height="50%"
data-points="300"
></div>
</div>
<div style="width: 100%; height: 23vh; text-align: center; display: inline-block;">
<div style="width: 100%; height:100%; align: center; display: inline-block;">
Wireless
<br/>
<div data-netdata="net.wlan0"
data-chart-library="dygraph"
data-width="100%"
data-height="50%"
data-points="300"
></div>
<div data-netdata="net.wlan1"
data-chart-library="dygraph"
data-width="100%"
data-height="49%"
data-points="300"
></div>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment