From 4cd838454e5db705c6044e38b5851db0ff84bdf8 Mon Sep 17 00:00:00 2001
From: Anton Hvornum <anton.feeds+github@gmail.com>
Date: Mon, 20 Jan 2020 15:55:00 +0100
Subject: [PATCH] Added sliders for switching NIC state. Also added
 post-restart sync with interface listing in vmanager, so interfaces now
 correctly show which type they are. Also added special case columns on
 table() so that custom elements can be injected into particular columns.

---
 api_modules/interface.py  |  55 +++++++++++++++
 api_modules/router.py     |  27 ++++++-
 api_modules/switch.py     |  27 ++++++-
 api_modules/virtualnic.py |  27 ++++++-
 web_root/index.html       |   1 +
 web_root/slider.css       |  45 ++++++++++++
 web_root/vmanager-gui.css |   6 +-
 web_root/vmanager-gui.js  | 143 +++++++++++++++++++++++++++++++++++---
 web_root/vmanager.js      |   8 +++
 9 files changed, 324 insertions(+), 15 deletions(-)
 create mode 100644 api_modules/interface.py
 create mode 100644 web_root/slider.css

diff --git a/api_modules/interface.py b/api_modules/interface.py
new file mode 100644
index 0000000..12867f5
--- /dev/null
+++ b/api_modules/interface.py
@@ -0,0 +1,55 @@
+import json
+from os.path import isdir, isfile
+
+def get_overview():
+	response = {'vnics' : {}, 'interfaces' : {}, 'routers' : {}, 'switches' : {}}
+	for nic_name in vmanager.nics:
+		response['vnics'][nic_name] = {
+			'ip' : vmanager.nics[nic_name].ip,
+			'MAC' : vmanager.nics[nic_name].mac,
+			'state' : vmanager.nics[nic_name].state,
+			'gateway' : vmanager.nics[nic_name].ports['sink_name'],
+			'routes' : None,
+			'connected_to' : None
+		}
+
+	for nic_name in vmanager.interfaces:
+		response['interfaces'][nic_name] = vmanager.interfaces[nic_name]
+
+	for nic_name in vmanager.routers:
+		response['routers'][nic_name] = vmanager.routers[nic_name]
+
+	for nic_name in vmanager.switches:
+		response['switches'][nic_name] = vmanager.switches[nic_name]
+
+	return response
+
+class parser():
+	def process(self, path, client, data, headers, fileno, addr, *args, **kwargs):
+		print('### nic ###\n', data, client)
+		
+		if 'state' in data and 'target' in data:
+			if data['target'] in vmanager.nics:
+				if data['state']:
+					vmanager.nics[data['target']].up()
+				else:
+					vmanager.nics[data['target']].down()
+			elif data['target'] in vmanager.interfaces:
+				if data['state']:
+					vmanager.interfaces[data['target']].up()
+				else:
+					vmanager.interfaces[data['target']].down()
+			elif data['target'] in vmanager.routers:
+				if data['state']:
+					vmanager.routers[data['target']].up()
+				else:
+					vmanager.routers[data['target']].down()
+			elif data['target'] in vmanager.switches:
+				if data['state']:
+					vmanager.switches[data['target']].up()
+				else:
+					vmanager.switches[data['target']].down()
+			else:
+				print(f'[N] Could not locate {data["target"]}')
+
+			return get_overview()
\ No newline at end of file
diff --git a/api_modules/router.py b/api_modules/router.py
index 24d47bc..96de866 100644
--- a/api_modules/router.py
+++ b/api_modules/router.py
@@ -1,9 +1,34 @@
 import json
 from os.path import isdir, isfile
 
+def get_overview():
+	response = {'vnics' : {}, 'interfaces' : {}, 'routers' : {}, 'switches' : {}}
+	for nic_name in vmanager.nics:
+		response['vnics'][nic_name] = {
+			'ip' : vmanager.nics[nic_name].ip,
+			'MAC' : vmanager.nics[nic_name].mac,
+			'state' : vmanager.nics[nic_name].state,
+			'gateway' : vmanager.nics[nic_name].ports['sink_name'],
+			'routes' : None,
+			'connected_to' : None
+		}
+
+	for nic_name in vmanager.interfaces:
+		response['interfaces'][nic_name] = vmanager.interfaces[nic_name]
+
+	for nic_name in vmanager.routers:
+		response['routers'][nic_name] = vmanager.routers[nic_name]
+
+	for nic_name in vmanager.switches:
+		response['switches'][nic_name] = vmanager.switches[nic_name]
+
+	return response
+
 class parser():
 	def process(self, path, client, data, headers, fileno, addr, *args, **kwargs):
 		print('### router ###\n', data, client)
 		
 		if 'new' in data:
-			vmanager.Router(trunk=data['new']['trunk'], ifname=data['new']['name'])
\ No newline at end of file
+			vmanager.Router(trunk=data['new']['trunk'], ifname=data['new']['name'])
+
+			return get_overview()
\ No newline at end of file
diff --git a/api_modules/switch.py b/api_modules/switch.py
index 47397b1..5fdeace 100644
--- a/api_modules/switch.py
+++ b/api_modules/switch.py
@@ -1,9 +1,34 @@
 import json
 from os.path import isdir, isfile
 
+def get_overview():
+	response = {'vnics' : {}, 'interfaces' : {}, 'routers' : {}, 'switches' : {}}
+	for nic_name in vmanager.nics:
+		response['vnics'][nic_name] = {
+			'ip' : vmanager.nics[nic_name].ip,
+			'MAC' : vmanager.nics[nic_name].mac,
+			'state' : vmanager.nics[nic_name].state,
+			'gateway' : vmanager.nics[nic_name].ports['sink_name'],
+			'routes' : None,
+			'connected_to' : None
+		}
+
+	for nic_name in vmanager.interfaces:
+		response['interfaces'][nic_name] = vmanager.interfaces[nic_name]
+
+	for nic_name in vmanager.routers:
+		response['routers'][nic_name] = vmanager.routers[nic_name]
+
+	for nic_name in vmanager.switches:
+		response['switches'][nic_name] = vmanager.switches[nic_name]
+
+	return response
+
 class parser():
 	def process(self, path, client, data, headers, fileno, addr, *args, **kwargs):
 		print('### switch ###\n', data, client)
 		
 		if 'new' in data:
-			vmanager.Switch(data['new']['name'])
\ No newline at end of file
+			vmanager.Switch(data['new']['name'])
+
+			return get_overview()
\ No newline at end of file
diff --git a/api_modules/virtualnic.py b/api_modules/virtualnic.py
index ee90a04..247da83 100644
--- a/api_modules/virtualnic.py
+++ b/api_modules/virtualnic.py
@@ -1,9 +1,34 @@
 import json
 from os.path import isdir, isfile
 
+def get_overview():
+	response = {'vnics' : {}, 'interfaces' : {}, 'routers' : {}, 'switches' : {}}
+	for nic_name in vmanager.nics:
+		response['vnics'][nic_name] = {
+			'ip' : vmanager.nics[nic_name].ip,
+			'MAC' : vmanager.nics[nic_name].mac,
+			'state' : vmanager.nics[nic_name].state,
+			'gateway' : vmanager.nics[nic_name].ports['sink_name'],
+			'routes' : None,
+			'connected_to' : None
+		}
+
+	for nic_name in vmanager.interfaces:
+		response['interfaces'][nic_name] = vmanager.interfaces[nic_name]
+
+	for nic_name in vmanager.routers:
+		response['routers'][nic_name] = vmanager.routers[nic_name]
+
+	for nic_name in vmanager.switches:
+		response['switches'][nic_name] = vmanager.switches[nic_name]
+
+	return response
+
 class parser():
 	def process(self, path, client, data, headers, fileno, addr, *args, **kwargs):
 		print('### nic ###\n', data, client)
 		
 		if 'new' in data:
-			vmanager.VirtualNic(data['new']['name'])
\ No newline at end of file
+			vmanager.VirtualNic(data['new']['name'])
+
+			return get_overview()
\ No newline at end of file
diff --git a/web_root/index.html b/web_root/index.html
index a33e3b3..9be4892 100644
--- a/web_root/index.html
+++ b/web_root/index.html
@@ -4,6 +4,7 @@
 	<title>Vmanager GUI</title>
 	<link rel="stylesheet" type="text/css" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css">
 	<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro&display=swap" rel="stylesheet">
+	<link rel="stylesheet" type="text/css" href="/slider.css">
 	<link rel="stylesheet" type="text/css" href="/vmanager-gui.css">
 	<script type="text/javascript">
 		let socket = null;
diff --git a/web_root/slider.css b/web_root/slider.css
new file mode 100644
index 0000000..fce9a78
--- /dev/null
+++ b/web_root/slider.css
@@ -0,0 +1,45 @@
+.onoffswitch {
+    position: relative; width: 90px;
+    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none;
+}
+.onoffswitch-checkbox {
+    display: none;
+}
+.onoffswitch-label {
+    display: block; overflow: hidden; cursor: pointer;
+    border: 2px solid #999999; border-radius: 20px;
+}
+.onoffswitch-inner {
+    display: block; width: 200%; margin-left: -100%;
+    transition: margin 0.3s ease-in 0s;
+}
+.onoffswitch-inner:before, .onoffswitch-inner:after {
+    display: block; float: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
+    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
+    box-sizing: border-box;
+}
+.onoffswitch-inner:before {
+    content: "Up";
+    padding-left: 10px;
+    background-color: #34A7C1; color: #FFFFFF;
+}
+.onoffswitch-inner:after {
+    content: "Down";
+    padding-right: 10px;
+    background-color: #EEEEEE; color: #999999;
+    text-align: right;
+}
+.onoffswitch-switch {
+    display: block; width: 18px; margin: 6px;
+    background: #FFFFFF;
+    position: absolute; top: 0; bottom: 0;
+    right: 56px;
+    border: 2px solid #999999; border-radius: 20px;
+    transition: all 0.3s ease-in 0s; 
+}
+.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner {
+    margin-left: 0;
+}
+.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch {
+    right: 0px; 
+}
\ No newline at end of file
diff --git a/web_root/vmanager-gui.css b/web_root/vmanager-gui.css
index dbe72bd..1b23f68 100644
--- a/web_root/vmanager-gui.css
+++ b/web_root/vmanager-gui.css
@@ -106,7 +106,6 @@ h3 {
 .submenu > .button:hover {
 	color: var(--g_primary);
 	background-color: #FFFFFF;
-
 }
 
 .container > .header > .menu > .button:hover {
@@ -192,6 +191,11 @@ td.column {
 tr:nth-child(even) {background: var(--light)}
 tr:nth-child(odd) {background: var(--backdrop_light)}
 
+option.bold {
+	font-weight: bold;
+	color: var(--o_primary);
+}
+
 .popup {
 	position: absolute;
 	left: 50%;
diff --git a/web_root/vmanager-gui.js b/web_root/vmanager-gui.js
index ede8908..20cee6e 100644
--- a/web_root/vmanager-gui.js
+++ b/web_root/vmanager-gui.js
@@ -1,3 +1,5 @@
+interfaces = {}
+
 let elements = {}; // Used for popups
 function popup(title_content, body_content, buttons_struct=null) {
 	let div = document.createElement('div');
@@ -68,7 +70,7 @@ function h3(text, stats={}, parent=null) {
 	return o;
 }
 
-function table(headers, entries, stats, parent, row_click=null) {
+function table(headers, entries, stats, parent, row_click=null, special_columns={}) {
 	let o = create_html_obj('table', stats, parent);
 
 	let header = create_html_obj('tr', {'classList' : 'header'}, o);
@@ -83,7 +85,12 @@ function table(headers, entries, stats, parent, row_click=null) {
 		first_column.innerHTML = row;
 		Object.keys(entries[row]).forEach((column) => {
 			let column_obj = create_html_obj('td', {'classList' : 'column'}, row_obj);
-			column_obj.innerHTML = entries[row][column];
+			if (typeof special_columns[column] !== 'undefined') {
+				let special_obj = special_columns[column](row, column, entries[row][column]);
+				column_obj.appendChild(special_obj);
+			} else {
+				column_obj.innerHTML = entries[row][column];
+			}
 		})
 
 		if (row_click)
@@ -95,6 +102,58 @@ function table(headers, entries, stats, parent, row_click=null) {
 	return o;
 }
 
+function update_interface_cache(json) {
+	Object.keys(json).forEach((category) => {
+		interfaces[category] = json[category];
+	})
+}
+
+function slider(row, column, data) {
+	let _switch = create_html_obj('div', {'classList' : 'onoffswitch'})
+	let input = create_html_obj('input', {'classList' : 'onoffswitch-checkbox', 'id' : 'slider_'+row}, _switch);
+	input.type = 'checkbox';
+	input.name = 'onoffswitch';
+	if(data === true || data == 'up')
+		input.checked = true;
+	else
+		input.checked = false;
+
+	let label = create_html_obj('label', {'classList' : 'onoffswitch-label'}, _switch)
+	label.htmlFor = 'slider_'+row;
+
+	let spaninner = create_html_obj('span', {'classList' : 'onoffswitch-inner'}, label);
+	let spanswitch = create_html_obj('span', {'classList' : 'onoffswitch-switch'}, label);
+
+	return _switch
+}
+
+function connected_to(row, column, data) {
+	let dropdown = document.createElement('select');
+	dropdown.classList = 'dropdown';
+	dropdown.id = row+'_connect_to';
+
+	let none = document.createElement('option');
+	none.classList = 'bold';
+	none.innerHTML = 'No connection';
+	dropdown.appendChild(none);
+
+	Object.keys(interfaces).forEach((category) => {
+		if (interfaces[category] && typeof interfaces[category] == 'object' && Object.keys(interfaces[category]).length) {
+			let iface_category = document.createElement('option');
+			iface_category.innerHTML = category + ':';
+			iface_category.classList = 'bold';
+			dropdown.appendChild(iface_category);
+			Object.keys(interfaces[category]).forEach((iface_name) => {
+				let option = document.createElement('option');
+				option.value = iface_name;
+				option.innerHTML = iface_name;
+				dropdown.appendChild(option);
+			})
+		}
+	})
+	return dropdown;
+}
+
 class machine {
 	constructor(info, container) {
 		this.container = container;
@@ -394,7 +453,12 @@ class networkinterfaces {
 
 		socket.subscribe('vnics', (json_payload) => {
 			console.log(json_payload)
+
+			update_interface_cache(json_payload);
+
 			if (typeof json_payload['vnics'] !== 'undefined') {
+				this.main_area.innerHTML = '';
+				this.main_area.appendChild(this.submenu)
 
 				this.vnics = div({'classList' : 'vnics'}, this.main_area);
 				let interfaces_header = h3('Physical Interfaces', {}, this.vnics);
@@ -403,31 +467,88 @@ class networkinterfaces {
 					json_payload['interfaces'],
 					{'classList' : 'table interfaces'}, this.vnics, (row) => {
 						view_nic(row);
-				})
+					},
+					{
+						'state' : (row, column, data) => {
+							let obj = slider(row, column, data);
+							obj.querySelector('input').setAttribute('nic', row);
+							obj.addEventListener('click', (event) => {
+								let slider_obj = event.target.parentElement.parentElement.querySelector('input');
+								
+								change_interface_state(slider_obj.getAttribute('nic'), slider_obj.checked);
+							})
+							return obj;
+						}
+					}
+				)
 
 				let vnics_header = h3('Virtual Interfaces', {}, this.vnics);
 				let vnics_list = table(
-					['NIC Name', 'IP(s)', 'MAC', 'State', 'Gateway', 'Routes', 'Connected to'],
-					json_payload['vnics'],
-					{'classList' : 'table vnics'}, this.vnics, (row) => {
+					['NIC Name', 'IP(s)', 'MAC', 'State', 'Gateway', 'Routes', 'Connected to'], // Headers
+					json_payload['vnics'], // Data to be parsed
+					{'classList' : 'table vnics'}, // Set attributes on the table
+					this.vnics, // Which parent are this table going to be inserted into
+					(row) => { // What should happen when we click on each row?
 						view_nic(row);
-				})
+					},
+					{ // Any special columns that we should render differently?
+						'connected_to' : connected_to,
+						'state' : (row, column, data) => {
+							let obj = slider(row, column, data);
+							obj.querySelector('input').setAttribute('nic', row);
+							obj.addEventListener('click', (event) => {
+								let slider_obj = event.target.parentElement.parentElement.querySelector('input');
+								
+								change_interface_state(slider_obj.getAttribute('nic'), slider_obj.checked);
+							})
+							return obj;
+						}
+					}
+				)
 
 				let switches_header = h3('Virtual Switches', {}, this.vnics);
 				let switches_list = table(
-					['NIC Name', 'IP(s)', 'MAC', 'State', 'Gateway', 'Routes', 'Connected to'],
+					['NIC Name', 'IP(s)', 'MAC', 'State', 'Gateway', 'Routes', 'Trunk Connection'],
 					json_payload['switches'],
 					{'classList' : 'table switches'}, this.vnics, (row) => {
 						view_switch(row);
-				})
+					},
+					{
+						'connected_to' : connected_to,
+						'state' : (row, column, data) => {
+							let obj = slider(row, column, data);
+							obj.querySelector('input').setAttribute('nic', row);
+							obj.addEventListener('click', (event) => {
+								let slider_obj = event.target.parentElement.parentElement.querySelector('input');
+								
+								change_interface_state(slider_obj.getAttribute('nic'), slider_obj.checked);
+							})
+							return obj;
+						}
+					}
+				)
 
 				let routers_header = h3('Virtual Routers', {}, this.vnics);
 				let routers_list = table(
-					['NIC Name', 'IP(s)', 'MAC', 'State', 'Gateway', 'Routes', 'Connected to'],
+					['NIC Name', 'IP(s)', 'MAC', 'State', 'Gateway', 'Routes', 'Input Link'],
 					json_payload['routers'],
 					{'classList' : 'table routers'}, this.vnics, (row) => {
 						view_router(row);
-				})
+					},
+					{
+						'connected_to' : connected_to,
+						'state' : (row, column, data) => {
+							let obj = slider(row, column, data);
+							obj.querySelector('input').setAttribute('nic', row);
+							obj.addEventListener('click', (event) => {
+								let slider_obj = event.target.parentElement.parentElement.querySelector('input');
+								
+								change_interface_state(slider_obj.getAttribute('nic'), slider_obj.checked);
+							})
+							return obj;
+						}
+					}
+				)
 				
 				this.container.innerHTML = '';
 				this.container.appendChild(this.main_area);
diff --git a/web_root/vmanager.js b/web_root/vmanager.js
index 5b8b083..7feb8fc 100644
--- a/web_root/vmanager.js
+++ b/web_root/vmanager.js
@@ -112,4 +112,12 @@ function create_router(name, trunk) {
 			'trunk' : trunk
 		}
 	})
+}
+
+function change_interface_state(target, state) {
+	socket.send({
+		'_module' : 'interface',
+		'state' : state,
+		'target' : target
+	})
 }
\ No newline at end of file