Organizr and Netdata

drinking12many · Sep 20, 2019

Has anyone had any luck getting the built-in Freenas Netdata information to show up in Organizr. I had to play a bit between instruction I found here and elsewhere and for the most part have Organizr working the way I want, except figuring out how to get the main netdata stats to load in a window inside organizr. I tried using https://technicalramblings.com/blog/spice-up-your-homepage/ as a sort of guide, but I will be honest I am lost. I tried to add custom html, using the code under the Bonus HTML at the bottom of that page modifying the URL for my freenas box netdata install, but I feel like I am missing something dumb. I am not worrying about a reverse proxy at all since I have all my stuff behind a VPN which is how I access everything remotely. Is a reverse proxy and absolute necessity? Any hints clues etc greatly appreciated. Mostly I just want to get the system overview bar to show up inside the homepage of organizr.

colmconn · Sep 20, 2019

It’s likely an x-frame-options issue. This github should point you in the right direction (I hope). https://github.com/netdata/netdata/issues/1735

drinking12many · Sep 20, 2019

Nah its im a moron issue ...lol I didnt put the html file in the netdata www directory. I had to tweak it a little to work for a couple of the network monitors were named different vs the article.

Created a dashboard.html under the netdata www directory.

Code:

<!DOCTYPE html>
<html lang="en">
<head>
<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">
</head>
<body>
<center>
<ul>
</ul>
<div style="display: inline-block; position: relative;">
<div data-netdata="system.io"
data-dimensions="in"'
data-chart-library="easypiechart"
data-title="Disk Read"'
data-width="200"
data-height="200"
data-after="-300"
data-points="300"
data-dt-element-name="time701"
></div>
</div>



<div style="display: inline-block; position: relative;">
<div data-netdata="system.io"
data-dimensions="out"'
data-chart-library="easypiechart"
data-title="Disk Write"'
data-width="200"
data-height="200"
data-after="-300"
data-points="300"
data-dt-element-name="time701"
></div>
</div>

<div style="display: inline-block; position: relative;">
<div data-netdata="system.cpu"
data-chart-library="gauge"
data-title="CPU"
data-units="%"
data-gauge-max-value="100"
data-width="400"
data-height="200"
data-after="-300"
data-points="300"
data-colors="#22AA99"
data-dt-element-name="time701"
></div>
</div>
<div style="display: inline-block; position: relative;">
<div data-netdata="system.ipv4"
data-dimensions="received"
data-chart-library="easypiechart"
data-title="IPv4 Inbound"
data-width="200"
data-height="200"
data-after="-300"
data-points="300"
data-dt-element-name="time701"
></div>
</div>
<div style="display: inline-block; position: relative;">
<div data-netdata="system.ipv4"
data-dimensions="sent"
data-chart-library="easypiechart"
data-title="IPv4 Outbound"
data-width="200"
data-height="200"
data-after="-300"
data-points="300"
data-dt-element-name="time701"
></div>
</div>
<div style="display: inline-block; position: relative;">
<div data-netdata="system.ram"
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-colors="#EE9911"
data-width="170"
data-height="170"
data-after="-300"
data-points="300"
data-dt-element-name="time701"
></div>
</div>
</center>
</body>

<script>
// 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

// 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://freenas/netdata/';
</script>

<!-- <script type="text/javascript" src="http://freenas/netdata/dashboard.js"></script> -->
<script type="text/javascript" src="dashboard.js?v20170105-7"></script>

<script>
// Set options for TV operation
// This has to be done, after dashboard.js is loaded

// destroy charts not shown (lowers memory on the browser)
NETDATA.options.current.destroy_on_hide = true;

// set this to false, to always show all dimensions
//NETDATA.options.current.eliminate_zero_dimensions = true;

// lower the pressure on this browser
//NETDATA.options.current.concurrent_refreshes = false;

// if the tv browser is too slow (a pi?)
// set this to false
//NETDATA.options.current.parallel_refresher = true;

// always update the charts, even if focus is lost

NETDATA.options.current.stop_updates_when_focus_is_lost = false;

// Since you may render charts from many servers and any of them may
// become offline for some time, the charts will break.
// This will reload the page every RELOAD_EVERY minutes

var RELOAD_EVERY = 1;
setTimeout(function(){
location.reload();
}, RELOAD_EVERY * 60 * 1000);

</script>

</html>

Then under custom html on organizr

Code:

<div style="overflow:hidden;height:300px">
<embed style="height:calc(100% + 115px)" width='100%' src='http://freenas/netdata/dashboard.html' />
</div>
<ul>
</ul>

Important Announcement for The TrueNAS Community.

Organizr and Netdata

drinking12many

Contributor

colmconn

Contributor

drinking12many

Contributor

Attachments

Similar threads

Important Announcement for The TrueNAS Community.