rework openvpn.js definition to support VPN client and VPN server(mul…

…ti-users) at the same time

I've modified the code to keep displaying Compression/Trafic graphs for OpenVPN clients, but also supporting status-version 2 OpenVPN server instance. If multi mode is enabled it will display one graph (Traffic) per connected user.
I have also added another graph to display total number of connected users if the option is enabled in collectd

"Signed-off-by: Julien DIOUF <[email protected]>"

applications/luci-app-statistics/htdocs/luci-static/resources/statistics/rrdtool/definitions/openvpn.js

@@ -8,45 +8,106 @@ return baseclass.extend({
 
 	rrdargs: function(graph, host, plugin, plugin_instance, dtype) {
 		var inst = plugin_instance.replace(/^openvpn\.(.+)\.status$/, '$1');
+		var types = graph.dataTypes(host, plugin, plugin_instance);
+		var rv = [];
+		var instances;
+		var typeinstances = graph.dataInstances(host, plugin, plugin_instance, "if_octets").sort();
 
-		return [
-			{
+		function find_instances(dtype, wanted) {
+			var matching = graph.dataInstances(host, plugin, plugin_instance, dtype).filter(function(instance) {
+				return wanted.indexOf(instance) > -1;
+			});
+			return matching.length ? { [dtype]: matching } : null;
+		}
+
+		if ((instances = find_instances('if_octets', ['overhead', 'traffic'])) !== null) {
+			rv.push({
 				title: "%%H: OpenVPN \"%s\" - Traffic".format(inst),
 				vlabel: "Bytes/s",
 				data: {
 					instances: {
-						if_octets: [ "traffic", "overhead" ]
+						if_octets: ["traffic", "overhead"]
 					},
 					sources: {
-						if_octets: [ "tx", "rx" ]
+						if_octets: ["tx", "rx"]
 					},
 					options: {
-						if_octets_traffic_tx : { weight: 0, title: "Bytes    (TX)", total: true, color: "00ff00" },
+						if_octets_traffic_tx: { weight: 0, title: "Bytes    (TX)", total: true, color: "00ff00" },
 						if_octets_overhead_tx: { weight: 1, title: "Overhead (TX)", total: true, color: "ff9900" },
 						if_octets_overhead_rx: { weight: 2, title: "Overhead (RX)", total: true, flip: true, color: "ff00ff" },
-						if_octets_traffic_rx : { weight: 3, title: "Bytes    (RX)", total: true, flip: true, color: "0000ff" }
+						if_octets_traffic_rx: { weight: 3, title: "Bytes    (RX)", total: true, flip: true, color: "0000ff" }
 					}
 				}
-			},
+			});
+		} else {
+			for (let i = 0; i < typeinstances.length; i++) {
+				var vpnuser = typeinstances[i];
+				var rx = "if_octets_%s_rx".format(vpnuser),
+					tx = "if_octets_%s_tx".format(vpnuser),
+					opts = {};
+				opts[tx] = { weight: 0, title: "Bytes " + vpnuser + "   (TX)", total: true, color: "00ff00" };
+				opts[rx] = { weight: 1, title: "Bytes " + vpnuser + "   (RX)", total: true, flip: true, color: "0000ff" };
+
+				rv.push({
+					title: "%%H: OpenVPN Server \"%s\" - User Traffic - ".format(inst) + vpnuser,
+					vlabel: "Bytes/s",
+					data: {
+						instances: {
+							if_octets: [vpnuser]
+						},
+						sources: {
+							if_octets: ["tx", "rx"]
+						},
+						options: opts
+					}
+				});
+			}
+		}
 
-			{
+		if (types.indexOf('users') > -1) {
+			let optionUsers = `users_${plugin_instance}`;
+			let optsUsers = {};
+			optsUsers[optionUsers] = { title: "Total users connected", color: "00ff00" };
+			let userInstances = graph.dataInstances(host, plugin, plugin_instance, 'users');
+			if (userInstances.length > 0) {
+				rv.push({
+					title: `%H: OpenVPN Server "${inst}" - Connected Users`,
+					vlabel: "Users",
+					y_min: "0",
+					alt_autoscale_max: true,
+					number_format: "%3.0lf",
+					data: {
+						instances: {
+							users: userInstances
+						},
+						options: optsUsers
+					}
+				});
+			} else {
+				console.error('Source "value" not found in any user instances:', sources);
+			}
+		}
+
+		if (types.indexOf('compression') > -1) {
+		    rv.push({
 				title: "%%H: OpenVPN \"%s\" - Compression".format(inst),
 				vlabel: "Bytes/s",
 				data: {
 					instances: {
-						compression: [ "data_out", "data_in" ]
+						compression: ["data_out", "data_in"]
 					},
 					sources: {
-						compression: [ "uncompressed", "compressed" ]
+						compression: ["uncompressed", "compressed"]
 					},
 					options: {
 						compression_data_out_uncompressed: { weight: 0, title: "Uncompressed (TX)", total: true, color: "00ff00" },
-						compression_data_out_compressed  : { weight: 1, title: "Compressed   (TX)", total: true, color: "008800" },
-						compression_data_in_compressed   : { weight: 2, title: "Compressed   (RX)", total: true, flip: true, color: "000088" },
-						compression_data_in_uncompressed : { weight: 3, title: "Uncompressed (RX)", total: true, flip: true, color: "0000ff" }
+						compression_data_out_compressed: { weight: 1, title: "Compressed   (TX)", total: true, color: "008800" },
+						compression_data_in_compressed: { weight: 2, title: "Compressed   (RX)", total: true, flip: true, color: "000088" },
+						compression_data_in_uncompressed: { weight: 3, title: "Uncompressed (RX)", total: true, flip: true, color: "0000ff" }
 					}
 				}
-			}
-		];
+			});
+		}
+		return rv;
 	}
 });