Merge pull request #1376 from henrywhitaker3/netdata-rewrite

Re-write of netdata homepage item

api/config/default.php

@@ -311,7 +311,7 @@ return array(
 	'monitorrCompact' => false,
 	'homepageSpeedtestEnabled' => false,
 	'homepageSpeedtestAuth' => '1',
-	'homepageSpeedtestRefresh' => '3600000',
+	'homepageSpeedtestRefresh' => '1800000', // 30 mins
 	'speedtestURL' => '',
 	'speedtestHeaderToggle' => true,
 	'speedtestHeader' => 'Speedtest',
@@ -322,41 +322,31 @@ return array(
 	'netdata1Title' => '',
 	'netdata1Chart' => '',
 	'netdata1Data' => '',
-	'netdata1Units' => '',
-	'netdata1CommonUnits' => '',
-	'netdata1Dimensions' => '',
-	'netdata1Max' => '',
-	'netdata1AppendOptions' => '',
+	'netdata1Colour' => '',
 	'netdata2Title' => '',
 	'netdata2Chart' => '',
 	'netdata2Data' => '',
-	'netdata2Units' => '',
-	'netdata2CommonUnits' => '',
-	'netdata2Dimensions' => '',
-	'netdata2Max' => '',
-	'netdata2AppendOptions' => '',
+	'netdata2Colour' => '',
 	'netdata3Title' => '',
 	'netdata3Chart' => '',
 	'netdata3Data' => '',
-	'netdata3Units' => '',
-	'netdata3CommonUnits' => '',
-	'netdata3Dimensions' => '',
-	'netdata3Max' => '',
-	'netdata3AppendOptions' => '',
+	'netdata3Colour' => '',
 	'netdata4Title' => '',
 	'netdata4Chart' => '',
 	'netdata4Data' => '',
-	'netdata4Units' => '',
-	'netdata4CommonUnits' => '',
-	'netdata4Dimensions' => '',
-	'netdata4Max' => '',
-	'netdata4AppendOptions' => '',
+	'netdata4Colour' => '',
 	'netdata5Title' => '',
 	'netdata5Chart' => '',
 	'netdata5Data' => '',
-	'netdata5Units' => '',
-	'netdata5CommonUnits' => '',
-	'netdata5Dimensions' => '',
-	'netdata5Max' => '',
-	'netdata5AppendOptions' => '',
+	'netdata5Colour' => '',
+	'netdata6Title' => '',
+	'netdata6Chart' => '',
+	'netdata6Data' => '',
+	'netdata6Colour' => '',
+	'netdata1Enabled' => false,
+	'netdata2Enabled' => false,
+	'netdata3Enabled' => false,
+	'netdata4Enabled' => false,
+	'netdata5Enabled' => false,
+	'netdata6Enabled' => false,
 );

api/functions/homepage-connect-functions.php

@@ -2705,33 +2705,61 @@ function getSpeedtest()
 function getNetdata()
 {
 	if ($GLOBALS['homepageNetdataEnabled'] && !empty($GLOBALS['netdataURL']) && qualifyRequest($GLOBALS['homepageNetdataAuth'])) {
+		require_once('netdata-functions.php');
 		$api = [];
+		$api['data'] = [];
+		$api['url'] = $GLOBALS['netdataURL'];
+
 		$url = qualifyURL($GLOBALS['netdataURL']);
-		try {
-			$response = Requests::get($url);
-			if ($response->success) {
-				$html = json_decode($response->body, true);
-				
-				$api['url'] = $GLOBALS['netdataURL'];
-				$api['options'] = [];
-				for($i = 0; $i < 5; $i++) {
-					if($GLOBALS['netdata'.($i + 1).'Data'] != '') {
-						array_push($api['options'], [
-							'title' => $GLOBALS['netdata'.($i + 1).'Title'],
-							'chart' => $GLOBALS['netdata'.($i + 1).'Chart'],
-							'data' => $GLOBALS['netdata'.($i + 1).'Data'],
-							'units' => $GLOBALS['netdata'.($i + 1).'Units'],
-							'commonUnits' => $GLOBALS['netdata'.($i + 1).'CommonUnits'],
-							'dimensions' => $GLOBALS['netdata'.($i + 1).'Dimensions'],
-							'max' => $GLOBALS['netdata'.($i + 1).'Max'],
-							'appendOptions' => $GLOBALS['netdata'.($i + 1).'AppendOptions'],
-						]);
-					}
+
+		for($i = 1; $i < 7; $i++) {
+			if($GLOBALS['netdata'.($i).'Enabled']) {
+				switch($GLOBALS['netdata'.$i.'Data']) {
+					case 'disk-read':
+						$data = disk('in', $url);
+						break;
+					case 'disk-write':
+						$data = disk('out', $url);
+						$data['value'] = abs($data['value']);
+						$data['percent'] = abs($data['percent']);
+						break;
+					case 'cpu':
+						$data = cpu($url);
+						break;
+					case 'net-in':
+						$data = net('received', $url);
+						break;
+					case 'net-out':
+						$data = net('sent', $url);
+						$data['value'] = abs($data['value']);
+						$data['percent'] = abs($data['percent']);
+						break;
+					case 'ram-used':
+						$data = ram($url);
+						break;
+					case 'ipmi-temp-c':
+						$data = ipmiTemp($url, 'c');
+						break;
+					case 'ipmi-temp-f':
+						$data = ipmiTemp($url, 'f');
+						break;
+					default:
+						$data = [
+							'title' => 'DNC',
+							'value' => 0,
+							'units' => 'N/A',
+						];
+						break;
 				}
+
+				$data['title'] = $GLOBALS['netdata'.$i.'Title'];
+				$data['colour'] = $GLOBALS['netdata'.$i.'Colour'];
+				$data['chart'] = $GLOBALS['netdata'.$i.'Chart'];
+
+				array_push($api['data'], $data);
 			}
-		} catch (Requests_Exception $e) {
-			writeLog('error', 'Monitorr Connect Function - Error: ' . $e->getMessage(), 'SYSTEM');
-		};
+		}
+
 		$api = isset($api) ? $api : false;
 		return $api;
 	}

api/functions/homepage-functions.php

@@ -3005,6 +3005,12 @@ function getHomepageList()
 					)
 				),
 				'Connection' => array(
+					array(
+						'type' => 'html',
+						'override' => 12,
+						'label' => 'Info',
+						'html' => 'The URL needs to be on the same domain as your Organizr, and be proxied by subdomain. E.g. If Organizr is accessed at: https://domain.com, then your URL for netdata should be: https://netdata.domain.com'
+					),
 					array(
 						'type' => 'input',
 						'name' => 'netdataURL',
@@ -3019,10 +3025,10 @@ function getHomepageList()
 				),
 				'Chart 1' => array(
 					array(
-						'type' => 'html',
-						'override' => 12,
-						'label' => 'Info',
-						'html' => 'These settings are what you would set in the HTML div tag in a custom netdata dashboard. The only 2 required are \'chart\' and \'data\', the rest can be left unset and defaults will be used'
+						'type' => 'switch',
+						'name' => 'netdata1Enabled',
+						'label' => 'Enable',
+						'value' => $GLOBALS['netdata1Enabled']
 					),
 					array(
 						'type' => 'blank',
@@ -3036,61 +3042,33 @@ function getHomepageList()
 						'help' => 'Title for the netdata graph'
 					),
 					array(
-						'type' => 'input',
-						'name' => 'netdata1Chart',
-						'label' => 'Chart',
-						'value' => $GLOBALS['netdata1Chart'],
-						'help' => 'Chart type for the netdata graph'
-					),
-					array(
-						'type' => 'input',
+						'type' => 'select',
 						'name' => 'netdata1Data',
 						'label' => 'Data',
 						'value' => $GLOBALS['netdata1Data'],
-						'help' => 'Data for the netdata graph'
-					),
-					array(
-						'type' => 'input',
-						'name' => 'netdata1Units',
-						'label' => 'Units',
-						'value' => $GLOBALS['netdata1Units'],
-						'help' => 'Units for the netdata graph'
-					),
-					array(
-						'type' => 'input',
-						'name' => 'netdata1CommonUnits',
-						'label' => 'Common Units',
-						'value' => $GLOBALS['netdata1CommonUnits'],
-						'help' => 'Common-units for the netdata graph'
-					),
-					array(
-						'type' => 'input',
-						'name' => 'netdata1Dimensions',
-						'label' => 'Dimensions',
-						'value' => $GLOBALS['netdata1Dimensions'],
-						'help' => 'Dimensions for the netdata graph'
+						'options' => netdataOptions(),
 					),
 					array(
-						'type' => 'input',
-						'name' => 'netdata1Max',
-						'label' => 'Gauge max value',
-						'value' => $GLOBALS['netdata1Max'],
-						'help' => 'Gauge max value for the netdata graph'
+						'type' => 'select',
+						'name' => 'netdata1Chart',
+						'label' => 'Chart',
+						'value' => $GLOBALS['netdata1Chart'],
+						'options' => netdataChartOptions(),
 					),
 					array(
-						'type' => 'input',
-						'name' => 'netdata1AppendOptions',
-						'label' => 'Append options',
-						'value' => $GLOBALS['netdata1AppendOptions'],
-						'help' => 'Append options for the netdata graph'
+						'type' => 'select',
+						'name' => 'netdata1Colour',
+						'label' => 'Colour',
+						'value' => $GLOBALS['netdata1Colour'],
+						'options' => netdataColourOptions(),
 					),
 				),
 				'Chart 2' => array(
 					array(
-						'type' => 'html',
-						'override' => 12,
-						'label' => 'Info',
-						'html' => 'These settings are what you would set in the HTML div tag in a custom netdata dashboard. The only 2 required are \'chart\' and \'data\', the rest can be left unset and defaults will be used'
+						'type' => 'switch',
+						'name' => 'netdata2Enabled',
+						'label' => 'Enable',
+						'value' => $GLOBALS['netdata2Enabled']
 					),
 					array(
 						'type' => 'blank',
@@ -3104,61 +3082,33 @@ function getHomepageList()
 						'help' => 'Title for the netdata graph'
 					),
 					array(
-						'type' => 'input',
-						'name' => 'netdata2Chart',
-						'label' => 'Chart',
-						'value' => $GLOBALS['netdata2Chart'],
-						'help' => 'Chart type for the netdata graph'
-					),
-					array(
-						'type' => 'input',
+						'type' => 'select',
 						'name' => 'netdata2Data',
 						'label' => 'Data',
 						'value' => $GLOBALS['netdata2Data'],
-						'help' => 'Data for the netdata graph'
-					),
-					array(
-						'type' => 'input',
-						'name' => 'netdata2Units',
-						'label' => 'Units',
-						'value' => $GLOBALS['netdata2Units'],
-						'help' => 'Units for the netdata graph'
+						'options' => netdataOptions(),
 					),
 					array(
-						'type' => 'input',
-						'name' => 'netdata2CommonUnits',
-						'label' => 'Common Units',
-						'value' => $GLOBALS['netdata2CommonUnits'],
-						'help' => 'Common-units for the netdata graph'
-					),
-					array(
-						'type' => 'input',
-						'name' => 'netdata2Dimensions',
-						'label' => 'Dimensions',
-						'value' => $GLOBALS['netdata2Dimensions'],
-						'help' => 'Dimensions for the netdata graph'
-					),
-					array(
-						'type' => 'input',
-						'name' => 'netdata2Max',
-						'label' => 'Gauge max value',
-						'value' => $GLOBALS['netdata2Max'],
-						'help' => 'Gauge max value for the netdata graph'
+						'type' => 'select',
+						'name' => 'netdata2Chart',
+						'label' => 'Chart',
+						'value' => $GLOBALS['netdata2Chart'],
+						'options' => netdataChartOptions(),
 					),
 					array(
-						'type' => 'input',
-						'name' => 'netdata2AppendOptions',
-						'label' => 'Append options',
-						'value' => $GLOBALS['netdata2AppendOptions'],
-						'help' => 'Append options for the netdata graph'
+						'type' => 'select',
+						'name' => 'netdata2Colour',
+						'label' => 'Colour',
+						'value' => $GLOBALS['netdata2Colour'],
+						'options' => netdataColourOptions(),
 					),
 				),
 				'Chart 3' => array(
 					array(
-						'type' => 'html',
-						'override' => 12,
-						'label' => 'Info',
-						'html' => 'These settings are what you would set in the HTML div tag in a custom netdata dashboard. The only 2 required are \'chart\' and \'data\', the rest can be left unset and defaults will be used'
+						'type' => 'switch',
+						'name' => 'netdata3Enabled',
+						'label' => 'Enable',
+						'value' => $GLOBALS['netdata3Enabled']
 					),
 					array(
 						'type' => 'blank',
@@ -3172,61 +3122,33 @@ function getHomepageList()
 						'help' => 'Title for the netdata graph'
 					),
 					array(
-						'type' => 'input',
-						'name' => 'netdata3Chart',
-						'label' => 'Chart',
-						'value' => $GLOBALS['netdata3Chart'],
-						'help' => 'Chart type for the netdata graph'
-					),
-					array(
-						'type' => 'input',
+						'type' => 'select',
 						'name' => 'netdata3Data',
 						'label' => 'Data',
 						'value' => $GLOBALS['netdata3Data'],
-						'help' => 'Data for the netdata graph'
-					),
-					array(
-						'type' => 'input',
-						'name' => 'netdata3Units',
-						'label' => 'Units',
-						'value' => $GLOBALS['netdata3Units'],
-						'help' => 'Units for the netdata graph'
+						'options' => netdataOptions(),
 					),
 					array(
-						'type' => 'input',
-						'name' => 'netdata3CommonUnits',
-						'label' => 'Common Units',
-						'value' => $GLOBALS['netdata3CommonUnits'],
-						'help' => 'Common-units for the netdata graph'
-					),
-					array(
-						'type' => 'input',
-						'name' => 'netdata3Dimensions',
-						'label' => 'Dimensions',
-						'value' => $GLOBALS['netdata3Dimensions'],
-						'help' => 'Dimensions for the netdata graph'
-					),
-					array(
-						'type' => 'input',
-						'name' => 'netdata3Max',
-						'label' => 'Gauge max value',
-						'value' => $GLOBALS['netdata3Max'],
-						'help' => 'Gauge max value for the netdata graph'
+						'type' => 'select',
+						'name' => 'netdata3Chart',
+						'label' => 'Data',
+						'value' => $GLOBALS['netdata3Chart'],
+						'options' => netdataChartOptions(),
 					),
 					array(
-						'type' => 'input',
-						'name' => 'netdata3AppendOptions',
-						'label' => 'Append options',
-						'value' => $GLOBALS['netdata3AppendOptions'],
-						'help' => 'Append options for the netdata graph'
+						'type' => 'select',
+						'name' => 'netdata3Colour',
+						'label' => 'Colour',
+						'value' => $GLOBALS['netdata3Colour'],
+						'options' => netdataColourOptions(),
 					),
 				),
 				'Chart 4' => array(
 					array(
-						'type' => 'html',
-						'override' => 12,
-						'label' => 'Info',
-						'html' => 'These settings are what you would set in the HTML div tag in a custom netdata dashboard. The only 2 required are \'chart\' and \'data\', the rest can be left unset and defaults will be used'
+						'type' => 'switch',
+						'name' => 'netdata4Enabled',
+						'label' => 'Enable',
+						'value' => $GLOBALS['netdata4Enabled']
 					),
 					array(
 						'type' => 'blank',
@@ -3240,61 +3162,33 @@ function getHomepageList()
 						'help' => 'Title for the netdata graph'
 					),
 					array(
-						'type' => 'input',
-						'name' => 'netdata4Chart',
-						'label' => 'Chart',
-						'value' => $GLOBALS['netdata4Chart'],
-						'help' => 'Chart type for the netdata graph'
-					),
-					array(
-						'type' => 'input',
+						'type' => 'select',
 						'name' => 'netdata4Data',
 						'label' => 'Data',
 						'value' => $GLOBALS['netdata4Data'],
-						'help' => 'Data for the netdata graph'
+						'options' => netdataOptions(),
 					),
 					array(
-						'type' => 'input',
-						'name' => 'netdata4Units',
-						'label' => 'Units',
-						'value' => $GLOBALS['netdata4Units'],
-						'help' => 'Units for the netdata graph'
-					),
-					array(
-						'type' => 'input',
-						'name' => 'netdata4CommonUnits',
-						'label' => 'Common Units',
-						'value' => $GLOBALS['netdata4CommonUnits'],
-						'help' => 'Common-units for the netdata graph'
-					),
-					array(
-						'type' => 'input',
-						'name' => 'netdata4Dimensions',
-						'label' => 'Dimensions',
-						'value' => $GLOBALS['netdata4Dimensions'],
-						'help' => 'Dimensions for the netdata graph'
-					),
-					array(
-						'type' => 'input',
-						'name' => 'netdata4Max',
-						'label' => 'Gauge max value',
-						'value' => $GLOBALS['netdata4Max'],
-						'help' => 'Gauge max value for the netdata graph'
+						'type' => 'select',
+						'name' => 'netdata4Chart',
+						'label' => 'Chart',
+						'value' => $GLOBALS['netdata4Chart'],
+						'options' => netdataChartOptions(),
 					),
 					array(
-						'type' => 'input',
-						'name' => 'netdata4AppendOptions',
-						'label' => 'Append options',
-						'value' => $GLOBALS['netdata4AppendOptions'],
-						'help' => 'Append options for the netdata graph'
+						'type' => 'select',
+						'name' => 'netdata4Colour',
+						'label' => 'Colour',
+						'value' => $GLOBALS['netdata4Colour'],
+						'options' => netdataColourOptions(),
 					),
 				),
 				'Chart 5' => array(
 					array(
-						'type' => 'html',
-						'override' => 12,
-						'label' => 'Info',
-						'html' => 'These settings are what you would set in the HTML div tag in a custom netdata dashboard. The only 2 required are \'chart\' and \'data\', the rest can be left unset and defaults will be used'
+						'type' => 'switch',
+						'name' => 'netdata5Enabled',
+						'label' => 'Enable',
+						'value' => $GLOBALS['netdata5Enabled']
 					),
 					array(
 						'type' => 'blank',
@@ -3308,53 +3202,65 @@ function getHomepageList()
 						'help' => 'Title for the netdata graph'
 					),
 					array(
-						'type' => 'input',
+						'type' => 'select',
+						'name' => 'netdata5Data',
+						'label' => 'Data',
+						'value' => $GLOBALS['netdata5Data'],
+						'options' => netdataOptions(),
+					),
+					array(
+						'type' => 'select',
 						'name' => 'netdata5Chart',
 						'label' => 'Chart',
 						'value' => $GLOBALS['netdata5Chart'],
-						'help' => 'Chart type for the netdata graph'
+						'options' => netdataChartOptions(),
 					),
 					array(
-						'type' => 'input',
-						'name' => 'netdata5Data',
-						'label' => 'Data',
-						'value' => $GLOBALS['netdata5Data'],
-						'help' => 'Data for the netdata graph'
+						'type' => 'select',
+						'name' => 'netdata5Colour',
+						'label' => 'Colour',
+						'value' => $GLOBALS['netdata5Colour'],
+						'options' => netdataColourOptions(),
 					),
+				),
+				'Chart 6' => array(
 					array(
-						'type' => 'input',
-						'name' => 'netdata5Units',
-						'label' => 'Units',
-						'value' => $GLOBALS['netdata5Units'],
-						'help' => 'Units for the netdata graph'
+						'type' => 'switch',
+						'name' => 'netdata6Enabled',
+						'label' => 'Enable',
+						'value' => $GLOBALS['netdata6Enabled']
 					),
 					array(
-						'type' => 'input',
-						'name' => 'netdata5CommonUnits',
-						'label' => 'Common Units',
-						'value' => $GLOBALS['netdata5CommonUnits'],
-						'help' => 'Common-units for the netdata graph'
+						'type' => 'blank',
+						'label' => ''
 					),
 					array(
 						'type' => 'input',
-						'name' => 'netdata5Dimensions',
-						'label' => 'Dimensions',
-						'value' => $GLOBALS['netdata5Dimensions'],
-						'help' => 'Dimensions for the netdata graph'
+						'name' => 'netdata6Title',
+						'label' => 'Title',
+						'value' => $GLOBALS['netdata6Title'],
+						'help' => 'Title for the netdata graph'
 					),
 					array(
-						'type' => 'input',
-						'name' => 'netdata5Max',
-						'label' => 'Gauge max value',
-						'value' => $GLOBALS['netdata5Max'],
-						'help' => 'Gauge max value for the netdata graph'
+						'type' => 'select',
+						'name' => 'netdata6Data',
+						'label' => 'Data',
+						'value' => $GLOBALS['netdata6Data'],
+						'options' => netdataOptions(),
 					),
 					array(
-						'type' => 'input',
-						'name' => 'netdata5AppendOptions',
-						'label' => 'Append options',
-						'value' => $GLOBALS['netdata5AppendOptions'],
-						'help' => 'Append options for the netdata graph'
+						'type' => 'select',
+						'name' => 'netdata6Chart',
+						'label' => 'Chart',
+						'value' => $GLOBALS['netdata6Chart'],
+						'options' => netdataChartOptions(),
+					),
+					array(
+						'type' => 'select',
+						'name' => 'netdata6Colour',
+						'label' => 'Colour',
+						'value' => $GLOBALS['netdata6Colour'],
+						'options' => netdataColourOptions(),
 					),
 				),
 				'Options' => array(

api/functions/netdata-functions.php

@@ -0,0 +1,104 @@
+<?php
+
+function disk($dimension, $url)
+{
+    $data = [];
+    // Get Data
+    $dataUrl = $url . '/api/v1/data?chart=system.io&dimensions='.$dimension.'&format=array&points=540&group=average&gtime=0&options=absolute|jsonwrap|nonzero&after=-540';
+    try {
+        $response = Requests::get($dataUrl);
+        if ($response->success) {
+            $json = json_decode($response->body, true);
+            $data['value'] = $json['latest_values'][0] / 1000;
+            $data['percent'] = ($json['latest_values'][0] / $json['max']) * 100;
+            $data['units'] = 'MiB/s';
+        }
+    } catch (Requests_Exception $e) {
+        writeLog('error', 'Netdata Connect Function - Error: ' . $e->getMessage(), 'SYSTEM');
+    };
+
+    return $data;
+}
+
+function net($dimension, $url)
+{
+    $data = [];
+
+    // Get Data
+    $dataUrl = $url . '/api/v1/data?chart=system.net&dimensions='.$dimension.'&format=array&points=540&group=average&gtime=0&options=absolute|jsonwrap|nonzero&after=-540';
+    try {
+        $response = Requests::get($dataUrl);
+        if ($response->success) {
+            $json = json_decode($response->body, true);
+            $data['value'] = $json['latest_values'][0] / 1000;
+            $data['percent'] = ($json['latest_values'][0] / $json['max']) * 100;
+            $data['units'] = 'megabits/s';
+        }
+    } catch (Requests_Exception $e) {
+        writeLog('error', 'Netdata Connect Function - Error: ' . $e->getMessage(), 'SYSTEM');
+    };
+
+    return $data;
+}
+
+function cpu($url)
+{
+    $data = [];
+    $dataUrl = $url . '/api/v1/data?chart=system.cpu&format=array';
+    try {
+        $response = Requests::get($dataUrl);
+        if ($response->success) {
+            $json = json_decode($response->body, true);
+            $data['value'] = $json[0];
+            $data['percent'] = $data['value'];
+            $data['units'] = '%';
+        }
+    } catch (Requests_Exception $e) {
+        writeLog('error', 'Netdata Connect Function - Error: ' . $e->getMessage(), 'SYSTEM');
+    };
+
+    return $data;
+}
+
+function ram($url)
+{
+    $data = [];
+    $dataUrl = $url . '/api/v1/data?chart=system.ram&format=array&points=540&group=average&gtime=0&options=absolute|percentage|jsonwrap|nonzero&after=-540&dimensions=used|buffers|active|wired';
+    try {
+        $response = Requests::get($dataUrl);
+        if ($response->success) {
+            $json = json_decode($response->body, true);
+            $data['value'] = $json['result'][0];
+            $data['percent'] = $data['value'];
+            $data['units'] = '%';
+        }
+    } catch (Requests_Exception $e) {
+        writeLog('error', 'Netdata Connect Function - Error: ' . $e->getMessage(), 'SYSTEM');
+    };
+
+    return $data;
+}
+
+function ipmiTemp($url, $unit)
+{
+    $data = [];
+    $dataUrl = $url . '/api/v1/data?chart=ipmi.temperatures_c&format=array&points=540&group=average&gtime=0&options=absolute|jsonwrap|nonzero&after=-540';
+    try {
+        $response = Requests::get($dataUrl);
+        if ($response->success) {
+            $json = json_decode($response->body, true);
+            $data['value'] = $json['result'][0];
+            if($unit == 'c') {
+                $data['percent'] = ($data['value'] / 50) * 100;
+            } else if($unit == 'f') {
+                $data['value'] = ($data['value'] * 9/5) + 32;
+                $data['percent'] = ($data['value'] / 122) * 100;
+            }
+            $data['units'] = '°'.strtoupper($unit);
+        }
+    } catch (Requests_Exception $e) {
+        writeLog('error', 'Netdata Connect Function - Error: ' . $e->getMessage(), 'SYSTEM');
+    };
+
+    return $data;
+}

api/functions/option-functions.php

@@ -100,6 +100,10 @@ function optionNotificationPositions()
 function optionTime()
 {
 	return array(
+		array(
+			'name' => '2.5',
+			'value' => '2500'
+		),
 		array(
 			'name' => '5',
 			'value' => '5000'
@@ -142,4 +146,82 @@ function optionTime()
 		),
 	);
 	
+}
+
+function netdataOptions()
+{
+	return [
+		[
+			'name' => 'Disk Read',
+			'value' => 'disk-read',
+		],
+		[
+			'name' => 'Disk Write',
+			'value' => 'disk-write',
+		],
+		[
+			'name' => 'CPU',
+			'value' => 'cpu'
+		],
+		[
+			'name' => 'Network Inbound',
+			'value' => 'net-in',
+		],
+		[
+			'name' => 'Network Outbound',
+			'value' => 'net-out',
+		],
+		[
+			'name' => 'Used RAM',
+			'value' => 'ram-used',
+		],
+		[
+			'name' => 'IPMI Temperature C',
+			'value' => 'ipmi-temp-c'
+		],
+		[
+			'name' => 'IPMI Temperature F',
+			'value' => 'ipmi-temp-f'
+		],
+	];
+}
+
+function netdataChartOptions()
+{
+	return [
+		[
+			'name' => 'Easy Pie Chart',
+			'value' => 'easypiechart',
+		]
+	];
+}
+
+function netdataColourOptions()
+{
+	return [
+		[
+			'name' => 'Red',
+			'value' => 'fe3912',
+		],
+		[
+			'name' => 'Green',
+			'value' => 'DD4400',
+		],
+		[
+			'name' => 'Purple',
+			'value' => 'CC22AA'
+		],
+		[
+			'name' => 'Blue',
+			'value' => '5054e6',
+		],
+		[
+			'name' => 'Yellow',
+			'value' => 'dddd00',
+		],
+		[
+			'name' => 'Orange',
+			'value' => 'd66300',
+		]
+	];
 }

index.php

@@ -286,6 +286,7 @@
 <script src="plugins/bower_components/multiselect/js/jquery.multi-select.js"></script>
 <script src="plugins/bower_components/mousetrap/mousetrap.min.js"></script>
 <script src="plugins/bower_components/bootstrap-treeview-master/dist/bootstrap-treeview.min.js"></script>
+<script src="plugins/bower_components/jquery.easy-pie-chart/dist/jquery.easypiechart.min.js"></script>
 <script src="js/jquery.mousewheel.min.js"></script>
 <script src="js/ua-parser.min.js"></script>
 <script src="js/plyr.js"></script>

js/functions.js

@@ -988,7 +988,7 @@ function buildFormItem(item){
 			break;
 		case 'html':
 			return item.html;
-			break;
+            break;
         case 'arrayMultiple':
             return '<span class="text-danger">BuildFormItem Class not setup...';
             break;
@@ -7294,7 +7294,7 @@ function buildSpeedtest(array){
     html += `
         <div class="row">
             <div class="my-2 col-lg-4 col-md-4 col-sm-12">
-                <div class="card speedtest-card shadow-sm">
+                <div class="card speedtest-card shadow-sm mb-3">
                     <div class="card-body">
                         <div class="d-flex align-items-center justify-content-between">
                             <h4>Ping</h4>
@@ -7316,7 +7316,7 @@ function buildSpeedtest(array){
                 </div>
             </div>
             <div class="my-2 col-lg-4 col-md-4 col-sm-12">
-                <div class="card speedtest-card shadow-sm">
+                <div class="card speedtest-card shadow-sm mb-3">
                     <div class="card-body">
                         <div class="d-flex align-items-center justify-content-between">
                             <h4>Download</h4>
@@ -7338,7 +7338,7 @@ function buildSpeedtest(array){
                 </div>
             </div>
             <div class="my-2 col-lg-4 col-md-4 col-sm-12">
-                <div class="card speedtest-card shadow-sm">
+                <div class="card speedtest-card shadow-sm mb-3">
                     <div class="card-body">
                         <div class="d-flex align-items-center justify-content-between">
                             <h4>Upload</h4>
@@ -7366,82 +7366,221 @@ function buildSpeedtest(array){
     return (array) ? html : '';
 }
 function buildNetdataItem(array){
-    var html = '';
-    array.forEach(e => {
-        var chart = e.chart;
-        if(e.data) {
-            html += `
-            <div class="col-lg-2 col-md-3 col-sm-4 col-xs-6 my-3">
-                <div class="netdata-item">
-                    <div data-netdata="`+e.data+`"
-                        data-dimensions="`+e.dimensions+`"
-                        data-chart-library="`+e.chart+`"
-                        data-title="`+e.title+`"
-                        data-before="0"
-                        data-after="-300"
-                        data-points="300"
-                        data-width="90%"`;
-            if(e.chart == 'gauge' && e.max !== '') {
-                html += `
-                        data-gauge-adjust="width"
-                        data-gauge-max-value="`+e.max+`"
-                `;
-            }
-            if(e.chart = 'easypiechart' && e.max !== '') {
-                html += `
-                        data-easypiechart-max-value="`+e.max+`"
-                `;
-            }
-            if(e.appendOptions != '') {
-                html += `
-                        data-append-options="`+e.appendOptions+`"
-                `;
-            }
-            if(e.units != '') {
-                html += `
-                        data-units="`+e.units+`"
-                `;
-            } else if(e.commonUnits != '') {
-                html += `
-                        data-common-units="`+e.units+`"
-                `;
-            }
-            html += `
-                    ></div>
+    var html = `
+    <style>
+    .all-netdata .chart {
+        width: 183px;
+        height:183px;
+    }
+    .all-netdata .easyPieChart-value {
+        position: absolute;
+        top: 77px;
+        width: 100%;
+        text-align: center;
+        left: 0;
+        font-size: 24.4625px;
+        font-weight: normal;
+    }
+    .all-netdata .easyPieChart-title {
+        position: absolute;
+        top: 37px;
+        width: 100%;
+        text-align: center;
+        left: 0;
+        font-size: 15px;
+        font-weight: bold;
+    }
+    .all-netdata .easyPieChart-units {
+        position: absolute;
+        top: 118px;
+        width: 100%;
+        text-align: center;
+        left: 0;
+        font-size: 15px;
+        font-weight: normal;
+    }
+    </style>
+    `;
+
+    var buildEasyPieChart = function(e,i) {
+        return `
+        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-12 my-3 text-center">
+            <div class="d-flex justify-content-center">
+                <div class="chart" id="easyPieChart`+(i+1)+`" data-percent="`+e.percent+`">
+                    <span class="easyPieChart-title">`+e.title+`</span>
+                    <span class="easyPieChart-value" id="easyPieChart`+(i+1)+`Value">`+parseFloat(e.value).toFixed(1)+`</span>
+                    <span class="easyPieChart-units" id="easyPieChart`+(i+1)+`Units">`+e.units+`</span>
                 </div>
             </div>
-            `;
+        </div>
+        <script>
+        $(function() {
+            $('#easyPieChart`+(i+1)+`').easyPieChart({
+                size: 183,
+                lineWidth: 7,
+                //animate: false,
+                scaleColor: false,
+                barColor: '#`+e.colour+`',
+                trackColor: '#bababa',
+            });
+        });
+        </script>
+        `;
+    }
+
+    array.forEach((e, i) => {
+        if(e.chart == 'easypiechart') {
+            html += buildEasyPieChart(e,i);
         }
     });
     
     return html;
 }
-var netdataNoFontAwesome = true;
 function buildNetdata(array){
-    console.log(array);
+    // console.log(array);
+    var data = array.data;
     if(array === false){ return ''; }
 
-    var options = array.options;
-    var scriptUrl = array.url + '/dashboard.js';
-
-
     var html = `
-    <script src="`+scriptUrl+`"></script>
     <style>
-    .netdata-item {
-    }
+    .clearfix {
+        *zoom: 1;
+      }
+      .all-netdata .clearfix:before,
+      .all-netdata .clearfix:after {
+        display: table;
+        content: "";
+      }
+      .all-netdata .clearfix:after {
+        clear: both;
+      }
+      
+      .all-netdata .easyPieChart {
+          position: relative;
+          text-align: center;
+      }
+      
+      .all-netdata .easyPieChart canvas {
+          position: absolute;
+          top: 0;
+          left: 0;
+      }
+      
+      .all-netdata .chart {
+          float: left;
+          margin: 10px;
+      }
+      
+      .all-netdata .percentage,
+      .all-netdata .label {
+          text-align: center;
+          color: #333;
+          font-weight: 100;
+          font-size: 1.2em;
+          margin-bottom: 0.3em;
+      }
+      
+      .all-netdata .credits {
+          padding-top: 0.5em;
+          clear: both;
+          color: #999;
+      }
+      
+      .all-netdata .credits a {
+          color: #333;
+      }
+      
+      .all-netdata .dark {
+          background: #333;
+      }
+      
+      .all-netdata .dark .percentage-light,
+      .all-netdata .dark .label {
+          text-align: center;
+          color: #999;
+          font-weight: 100;
+          font-size: 1.2em;
+          margin-bottom: 0.3em;
+      }
+      
+      
+      .all-netdata .button {
+        -webkit-box-shadow: inset 0 0 1px #000, inset 0 1px 0 1px rgba(255,255,255,0.2), 0 1px 1px -1px rgba(0, 0, 0, .5);
+        -moz-box-shadow: inset 0 0 1px #000, inset 0 1px 0 1px rgba(255,255,255,0.2), 0 1px 1px -1px rgba(0, 0, 0, .5);
+        box-shadow: inset 0 0 1px #000, inset 0 1px 0 1px rgba(255,255,255,0.2), 0 1px 1px -1px rgba(0, 0, 0, .5);
+        -webkit-border-radius: 3px;
+        -moz-border-radius: 3px;
+        border-radius: 3px;
+        padding: 6px 20px;
+        font-weight: bold;
+        text-transform: uppercase;
+        display: block;
+        margin: 0 auto 2em;
+        max-width: 200px;
+        text-align: center;
+        background-color: #5c5c5c;
+        background-image: -moz-linear-gradient(top, #666666, #4d4d4d);
+        background-image: -ms-linear-gradient(top, #666666, #4d4d4d);
+        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#666666), to(#4d4d4d));
+        background-image: -webkit-linear-gradient(top, #666666, #4d4d4d);
+        background-image: -o-linear-gradient(top, #666666, #4d4d4d);
+        background-image: linear-gradient(top, #666666, #4d4d4d);
+        background-repeat: repeat-x;
+        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#666666', endColorstr='#4d4d4d', GradientType=0);
+        color: #ffffff;
+        text-shadow: 0 1px 1px #333333;
+      }
+      .all-netdata .button:hover {
+        color: #ffffff;
+        text-decoration: none;
+        background-color: #616161;
+        background-image: -moz-linear-gradient(top, #6b6b6b, #525252);
+        background-image: -ms-linear-gradient(top, #6b6b6b, #525252);
+        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#6b6b6b), to(#525252));
+        background-image: -webkit-linear-gradient(top, #6b6b6b, #525252);
+        background-image: -o-linear-gradient(top, #6b6b6b, #525252);
+        background-image: linear-gradient(top, #6b6b6b, #525252);
+        background-repeat: repeat-x;
+        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#6b6b6b', endColorstr='#525252', GradientType=0);
+      }
+      .all-netdata .button:active {
+        background-color: #575757;
+        background-image: -moz-linear-gradient(top, #616161, #474747);
+        background-image: -ms-linear-gradient(top, #616161, #474747);
+        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#616161), to(#474747));
+        background-image: -webkit-linear-gradient(top, #616161, #474747);
+        background-image: -o-linear-gradient(top, #616161, #474747);
+        background-image: linear-gradient(top, #616161, #474747);
+        background-repeat: repeat-x;
+        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#616161', endColorstr='#474747', GradientType=0);
+        -webkit-transform: translate(0, 1px);
+        -moz-transform: translate(0, 1px);
+        -ms-transform: translate(0, 1px);
+        -o-transform: translate(0, 1px);
+        transform: translate(0, 1px);
+      }
+      .all-netdata .button:disabled {
+        background-color: #dddddd;
+        background-image: -moz-linear-gradient(top, #e7e7e7, #cdcdcd);
+        background-image: -ms-linear-gradient(top, #e7e7e7, #cdcdcd);
+        background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#e7e7e7), to(#cdcdcd));
+        background-image: -webkit-linear-gradient(top, #e7e7e7, #cdcdcd);
+        background-image: -o-linear-gradient(top, #e7e7e7, #cdcdcd);
+        background-image: linear-gradient(top, #e7e7e7, #cdcdcd);
+        background-repeat: repeat-x;
+        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e7e7e7', endColorstr='#cdcdcd', GradientType=0);
+        color: #939393;
+        text-shadow: 0 1px 1px #fff;
+      }
     </style>
     `;
 
-    var number = options.length;
-    var pad = (12 - (number * 2)) / 2;
-
     html += `
     <div class="row">
         
-            <div class="d-lg-flex d-md-flex d-sm-block d-xs-block align-items-center justify-content-center">
+            <div class="d-lg-flex d-md-block d-sm-block d-xs-block align-items-center justify-content-center all-netdata">
     `;
-    html += buildNetdataItem(options);
+    html += buildNetdataItem(data);
     html += `
             </div>
         
@@ -7459,12 +7598,11 @@ function homepageNetdata(timeout){
             orgErrorAlert('<h4>' + e + '</h4>' + formatDebug(data));
             return false;
         }
-        document.getElementById('homepageOrderNetdata').innerHTML = '';
-        if(response.data !== null){
-            $('#homepageOrderNetdata').html(buildNetdata(response.data));
-            setTimeout(function() {
-                $("link[rel='stylesheet'][type='text/css'][href^='"+response.data.url+"/css/bootstrap']").remove()
-            }, 200);
+        if(!tryUpdateNetdata(response.data.data)) {
+            document.getElementById('homepageOrderNetdata').innerHTML = '';
+            if(response.data !== null){
+                $('#homepageOrderNetdata').html(buildNetdata(response.data));
+            }
         }
     }).fail(function(xhr) {
         console.error("Organizr Function: API Connection Failed");
@@ -7473,6 +7611,22 @@ function homepageNetdata(timeout){
     if(typeof timeouts[timeoutTitle] !== 'undefined'){ clearTimeout(timeouts[timeoutTitle]); }
     timeouts[timeoutTitle] = setTimeout(function(){ homepageNetdata(timeout); }, timeout);
 }
+function tryUpdateNetdata(array){
+    var existing = false;
+    array.forEach((e,i) => {
+        var id = i + 1;
+        if(e.chart == 'easypiechart') {
+            if($('#easyPieChart' + id).length) {
+                $('#easyPieChart' + id).data('easyPieChart').update(e.percent);
+                $('#easyPieChart' + id + 'Value').html(parseFloat(e.value).toFixed(1));
+                existing = true;
+            } else {
+                existing = false;
+            }
+        }
+    });
+    return existing;
+}
 // Thanks Swifty!
 function PopupCenter(url, title, w, h) {
     // Fixes dual-screen position                         Most browsers      Firefox