Merge pull request #1373 from henrywhitaker3/homepage-netdata

Added netdata homepage item

api/config/default.php

@@ -178,6 +178,7 @@ return array(
 	'homepageOrderMonitorr' => '22',
 	'homepageOrderWeatherAndAir' => '23',
 	'homepageOrderSpeedtest' => '24',
+	'homepageOrderNetdata' => '25',
 	'homepageShowStreamNames' => false,
 	'homepageShowStreamNamesAuth' => '1',
 	'homepageStreamRefresh' => '60000',
@@ -314,4 +315,48 @@ return array(
 	'speedtestURL' => '',
 	'speedtestHeaderToggle' => true,
 	'speedtestHeader' => 'Speedtest',
+	'homepageNetdataEnabled' => false,
+	'homepageNetdataRefresh' => '600000',
+	'homepageNetdataAuth' => '1',
+	'netdataURL' => '',
+	'netdata1Title' => '',
+	'netdata1Chart' => '',
+	'netdata1Data' => '',
+	'netdata1Units' => '',
+	'netdata1CommonUnits' => '',
+	'netdata1Dimensions' => '',
+	'netdata1Max' => '',
+	'netdata1AppendOptions' => '',
+	'netdata2Title' => '',
+	'netdata2Chart' => '',
+	'netdata2Data' => '',
+	'netdata2Units' => '',
+	'netdata2CommonUnits' => '',
+	'netdata2Dimensions' => '',
+	'netdata2Max' => '',
+	'netdata2AppendOptions' => '',
+	'netdata3Title' => '',
+	'netdata3Chart' => '',
+	'netdata3Data' => '',
+	'netdata3Units' => '',
+	'netdata3CommonUnits' => '',
+	'netdata3Dimensions' => '',
+	'netdata3Max' => '',
+	'netdata3AppendOptions' => '',
+	'netdata4Title' => '',
+	'netdata4Chart' => '',
+	'netdata4Data' => '',
+	'netdata4Units' => '',
+	'netdata4CommonUnits' => '',
+	'netdata4Dimensions' => '',
+	'netdata4Max' => '',
+	'netdata4AppendOptions' => '',
+	'netdata5Title' => '',
+	'netdata5Chart' => '',
+	'netdata5Data' => '',
+	'netdata5Units' => '',
+	'netdata5CommonUnits' => '',
+	'netdata5Dimensions' => '',
+	'netdata5Max' => '',
+	'netdata5AppendOptions' => '',
 );

api/functions/homepage-connect-functions.php

@@ -74,6 +74,9 @@ function homepageConnect($array)
 		case 'getSpeedtest':
 			return getSpeedtest();
 			break;
+		case 'getNetdata':
+			return getNetdata();
+			break;
 		default:
 			# code...
 			break;
@@ -2699,6 +2702,41 @@ function getSpeedtest()
 	}
 }
 
+function getNetdata()
+{
+	if ($GLOBALS['homepageNetdataEnabled'] && !empty($GLOBALS['netdataURL']) && qualifyRequest($GLOBALS['homepageNetdataAuth'])) {
+		$api = [];
+		$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'],
+						]);
+					}
+				}
+			}
+		} catch (Requests_Exception $e) {
+			writeLog('error', 'Monitorr Connect Function - Error: ' . $e->getMessage(), 'SYSTEM');
+		};
+		$api = isset($api) ? $api : false;
+		return $api;
+	}
+}
+
 function testAPIConnection($array)
 {
 	switch ($array['data']['action']) {

api/functions/homepage-functions.php

@@ -27,6 +27,7 @@ function homepageOrder()
 		"homepageOrderMonitorr" => $GLOBALS['homepageOrderMonitorr'],
 		"homepageOrderWeatherAndAir" => $GLOBALS['homepageOrderWeatherAndAir'],
 		"homepageOrderSpeedtest" => $GLOBALS['homepageOrderSpeedtest'],
+		"homepageOrderNetdata" => $GLOBALS['homepageOrderNetdata'],
 	);
 	asort($homepageOrder);
 	return $homepageOrder;
@@ -396,6 +397,18 @@ function buildHomepageItem($homepageItem)
 				';
 			}
 			break;
+		case 'homepageOrderNetdata':
+			if ($GLOBALS['homepageNetdataEnabled']) {
+				$item .= '<div class="white-box"><h2 class="text-center" lang="en">Loading Netdata...</h2></div>';
+				$item .= '
+				<script>
+				// Netdata
+				homepageNetdata("' . $GLOBALS['homepageNetdataRefresh'] . '");
+				// End Netdata
+				</script>
+				';
+			}
+			break;
 		default:
 			# code...
 			break;
@@ -2962,7 +2975,7 @@ function getHomepageList()
 					),
 					array(
 						'type' => 'switch',
-						'name' => 'speedtestToggle',
+						'name' => 'speedtestHeaderToggle',
 						'label' => 'Toggle Title',
 						'value' => $GLOBALS['speedtestHeaderToggle'],
 						'help' => 'Shows/hides the title of this homepage module'
@@ -2970,6 +2983,391 @@ function getHomepageList()
 				),
 			)
 		),
+		array(
+			'name' => 'Netdata',
+			'enabled' => true,
+			'image' => 'plugins/images/tabs/netdata.png',
+			'category' => 'Monitor',
+			'settings' => array(
+				'Enable' => array(
+					array(
+						'type' => 'switch',
+						'name' => 'homepageNetdataEnabled',
+						'label' => 'Enable',
+						'value' => $GLOBALS['homepageNetdataEnabled']
+					),
+					array(
+						'type' => 'select',
+						'name' => 'homepageNetdataAuth',
+						'label' => 'Minimum Authentication',
+						'value' => $GLOBALS['homepageNetdataAuth'],
+						'options' => $groups
+					)
+				),
+				'Connection' => array(
+					array(
+						'type' => 'input',
+						'name' => 'netdataURL',
+						'label' => 'URL',
+						'value' => $GLOBALS['netdataURL'],
+						'help' => 'Please enter the local IP:PORT of your netdata instance'
+					),
+					array(
+						'type' => 'blank',
+						'label' => ''
+					),
+				),
+				'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'
+					),
+					array(
+						'type' => 'blank',
+						'label' => ''
+					),
+					array(
+						'type' => 'input',
+						'name' => 'netdata1Title',
+						'label' => 'Title',
+						'value' => $GLOBALS['netdata1Title'],
+						'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',
+						'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'
+					),
+					array(
+						'type' => 'input',
+						'name' => 'netdata1Max',
+						'label' => 'Gauge max value',
+						'value' => $GLOBALS['netdata1Max'],
+						'help' => 'Gauge max value for the netdata graph'
+					),
+					array(
+						'type' => 'input',
+						'name' => 'netdata1AppendOptions',
+						'label' => 'Append options',
+						'value' => $GLOBALS['netdata1AppendOptions'],
+						'help' => 'Append options for the netdata graph'
+					),
+				),
+				'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'
+					),
+					array(
+						'type' => 'blank',
+						'label' => ''
+					),
+					array(
+						'type' => 'input',
+						'name' => 'netdata2Title',
+						'label' => 'Title',
+						'value' => $GLOBALS['netdata2Title'],
+						'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',
+						'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'
+					),
+					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'
+					),
+					array(
+						'type' => 'input',
+						'name' => 'netdata2AppendOptions',
+						'label' => 'Append options',
+						'value' => $GLOBALS['netdata2AppendOptions'],
+						'help' => 'Append options for the netdata graph'
+					),
+				),
+				'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'
+					),
+					array(
+						'type' => 'blank',
+						'label' => ''
+					),
+					array(
+						'type' => 'input',
+						'name' => 'netdata3Title',
+						'label' => 'Title',
+						'value' => $GLOBALS['netdata3Title'],
+						'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',
+						'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'
+					),
+					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'
+					),
+					array(
+						'type' => 'input',
+						'name' => 'netdata3AppendOptions',
+						'label' => 'Append options',
+						'value' => $GLOBALS['netdata3AppendOptions'],
+						'help' => 'Append options for the netdata graph'
+					),
+				),
+				'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'
+					),
+					array(
+						'type' => 'blank',
+						'label' => ''
+					),
+					array(
+						'type' => 'input',
+						'name' => 'netdata4Title',
+						'label' => 'Title',
+						'value' => $GLOBALS['netdata4Title'],
+						'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',
+						'name' => 'netdata4Data',
+						'label' => 'Data',
+						'value' => $GLOBALS['netdata4Data'],
+						'help' => 'Data for the netdata graph'
+					),
+					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'
+					),
+					array(
+						'type' => 'input',
+						'name' => 'netdata4AppendOptions',
+						'label' => 'Append options',
+						'value' => $GLOBALS['netdata4AppendOptions'],
+						'help' => 'Append options for the netdata graph'
+					),
+				),
+				'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'
+					),
+					array(
+						'type' => 'blank',
+						'label' => ''
+					),
+					array(
+						'type' => 'input',
+						'name' => 'netdata5Title',
+						'label' => 'Title',
+						'value' => $GLOBALS['netdata5Title'],
+						'help' => 'Title for the netdata graph'
+					),
+					array(
+						'type' => 'input',
+						'name' => 'netdata5Chart',
+						'label' => 'Chart',
+						'value' => $GLOBALS['netdata5Chart'],
+						'help' => 'Chart type for the netdata graph'
+					),
+					array(
+						'type' => 'input',
+						'name' => 'netdata5Data',
+						'label' => 'Data',
+						'value' => $GLOBALS['netdata5Data'],
+						'help' => 'Data for the netdata graph'
+					),
+					array(
+						'type' => 'input',
+						'name' => 'netdata5Units',
+						'label' => 'Units',
+						'value' => $GLOBALS['netdata5Units'],
+						'help' => 'Units for the netdata graph'
+					),
+					array(
+						'type' => 'input',
+						'name' => 'netdata5CommonUnits',
+						'label' => 'Common Units',
+						'value' => $GLOBALS['netdata5CommonUnits'],
+						'help' => 'Common-units for the netdata graph'
+					),
+					array(
+						'type' => 'input',
+						'name' => 'netdata5Dimensions',
+						'label' => 'Dimensions',
+						'value' => $GLOBALS['netdata5Dimensions'],
+						'help' => 'Dimensions for the netdata graph'
+					),
+					array(
+						'type' => 'input',
+						'name' => 'netdata5Max',
+						'label' => 'Gauge max value',
+						'value' => $GLOBALS['netdata5Max'],
+						'help' => 'Gauge max value for the netdata graph'
+					),
+					array(
+						'type' => 'input',
+						'name' => 'netdata5AppendOptions',
+						'label' => 'Append options',
+						'value' => $GLOBALS['netdata5AppendOptions'],
+						'help' => 'Append options for the netdata graph'
+					),
+				),
+				'Options' => array(
+					array(
+						'type' => 'select',
+						'name' => 'homepageNetdataRefresh',
+						'label' => 'Refresh Seconds',
+						'value' => $GLOBALS['homepageNetdataRefresh'],
+						'options' => optionTime()
+					),
+				),
+			)
+		),
 	);
 }
 
@@ -3130,6 +3528,13 @@ function buildHomepageSettings()
 					$class .= ' faded';
 				}
 				break;
+			case 'homepageOrderNetdata':
+				$class = 'bg-success';
+				$image = 'plugins/images/tabs/netdata.png';
+				if (!$GLOBALS['homepageNetdataEnabled']) {
+					$class .= ' faded';
+				}
+				break;
 			default:
 				$class = 'blue-bg';
 				$image = '';

js/functions.js

@@ -7247,23 +7247,18 @@ function buildSpeedtest(array){
     .speedtest-card {
         background-color: #2d2c2c;
     }
-
     .speedtest-card .text-success {
         color: #07db71 !important;
     }
-
     .speedtest-card .text-warning {
         color: #fca503 !important;
     }
-
     .speedtest-card .text-primary {
         color: #3e95cd !important;
     }
-
     .speedtest-card span.icon {
         font-size: 2em;
     }
-
     .speedtest-card h5 {
     }
 
@@ -7283,7 +7278,7 @@ function buildSpeedtest(array){
     var average = array.data.average;
     var max = array.data.max;
     var options = array.options;
-    
+  
     html += `
     <div id="allSpeedtest">
     `;
@@ -7370,6 +7365,114 @@ 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>
+                </div>
+            </div>
+            `;
+        }
+    });
+    
+    return html;
+}
+var netdataNoFontAwesome = true;
+function buildNetdata(array){
+    console.log(array);
+    if(array === false){ return ''; }
+
+    var options = array.options;
+    var scriptUrl = array.url + '/dashboard.js';
+
+
+    var html = `
+    <script src="`+scriptUrl+`"></script>
+    <style>
+    .netdata-item {
+    }
+    </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">
+    `;
+    html += buildNetdataItem(options);
+    html += `
+            </div>
+        
+    </div>`;
+   
+    return (array) ? html : '';
+}
+function homepageNetdata(timeout){
+    var timeout = (typeof timeout !== 'undefined') ? timeout : activeInfo.settings.homepage.refresh.homepageNetdataRefresh;
+    organizrAPI('POST','api/?v1/homepage/connect',{action:'getNetdata'}).success(function(data) {
+        try {
+            var response = JSON.parse(data);
+        }catch(e) {
+            console.log(e + ' error: ' + data);
+            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);
+        }
+    }).fail(function(xhr) {
+        console.error("Organizr Function: API Connection Failed");
+    });
+    var timeoutTitle = 'Netdata-Homepage';
+    if(typeof timeouts[timeoutTitle] !== 'undefined'){ clearTimeout(timeouts[timeoutTitle]); }
+    timeouts[timeoutTitle] = setTimeout(function(){ homepageNetdata(timeout); }, timeout);
+}
 // Thanks Swifty!
 function PopupCenter(url, title, w, h) {
     // Fixes dual-screen position                         Most browsers      Firefox