Mirrors/headscale-webui
1
0
Fork 1
mirror of https://github.com/iFargle/headscale-webui.git synced 2026-03-17 21:35:28 +01:00
Code Issues Packages Projects Releases Wiki Activity

Logic for exit nodes for routes page

Browse Source
This commit is contained in:
iFargle
2023-03-24 14:12:21 +09:00
parent fc95182d12
commit b17ac9dc94
2 changed files with 62 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
renderer.py
View File

@@ -299,7 +299,7 @@ def thread_machine_content(machine, machine_content, idx, all_routes, failover_p
class='waves-effect waves-light btn-small """+exit_enabled_color+""" lighten-2 tooltipped' class='waves-effect waves-light btn-small """+exit_enabled_color+""" lighten-2 tooltipped'
data-position='top' data-tooltip='Click to """+exit_tooltip+"""' data-position='top' data-tooltip='Click to """+exit_tooltip+"""'
id='"""+machine["id"]+"""-exit' id='"""+machine["id"]+"""-exit'
onclick="toggle_exit("""+exit_routes[0]+""", """+exit_routes[1]+""", '"""+machine["id"]+"""-exit', '"""+str(exit_route_enabled)+"""')"> onclick="toggle_exit("""+exit_routes[0]+""", """+exit_routes[1]+""", '"""+machine["id"]+"""-exit', '"""+str(exit_route_enabled)+"""', 'machines')">
Exit Route Exit Route
</p> </p>
""" """
@@ -707,7 +707,7 @@ def render_routes():
route_content = markup_pre+route_title route_content = markup_pre+route_title
route_content += """<p><table> route_content += """<p><table>
<thead> <thead>
<tr>d <tr>
<th>ID </th> <th>ID </th>
<th>Machine </th> <th>Machine </th>
<th>Route </th> <th>Route </th>
@@ -814,52 +814,55 @@ def render_routes():
failover_content += "</tbody></table></p>"+markup_post failover_content += "</tbody></table></p>"+markup_post
# Step 3: Get exit nodes only: # Step 3: Get exit nodes only:
exit_node_list = []
# Get a list of nodes with exit routes:
for route in all_routes["routes"]:
# For every exit route found, store the machine name in an array:
if prefix == "0.0.0.0/0" or prefix == "::/0":
if machine not in exit_node_list:
exit_node_list.append(machine)
# Exit node display building:
# Display by machine, not by route # Display by machine, not by route
exit_content = markup_pre+exit_title exit_content = markup_pre+exit_title
exit_content += """<p><table> exit_content += """<p><table>
<thead> <thead>
<tr> <tr>
<th>Machine </th> <th>Machine</th>
<th>Enabled </th> <th>Enabled</th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
""" """
for route in all_routes["routes"]: # Get exit route ID's for each node in the list:
# Get relevant info: # onclick="toggle_exit("""+exit_routes[0]+""", """+exit_routes[1]+""", '"""+machine["id"]+"""-exit', '"""+str(exit_route_enabled)+"""')
route_id = route["id"] for node in exit_node_list:
machine = route["machine"]["givenName"] node_exit_routes = []
prefix = route["prefix"] exit_enabled = False
is_enabled = route["enabled"] for route in all_routes["routes"]:
is_primary = route["isPrimary"] # Get all exit route ID's for that node:
is_failover = False route_id = route["id"]
is_exit = False machine = route["machine"]["givenName"]
if machine == node:
if route_id == "0.0.0.0/0" or route_id == "::/0":
node_exit_routes.append(route_id)
if route["enabled"]:
exit_enabled = True
# Set up the display code: # Set up the display code:
enabled = "<a href='#'><i class='material-icons green-text text-lighten-2'>fiber_manual_record</i></a>" enabled = "<a href='#'><i id='"+node["id"]+"-exit' onclick='toggle_exit("+node_exit_routes[0]+","+node_exit_routes[1]+","+node['id']+", '"+node['id']+"-exit', 'routes')' class='material-icons green-text text-lighten-2 tooltipped' data-tooltip='Click to disable'>fiber_manual_record</i></a>"
disabled = "<a href='#'><i class='material-icons red-text text-lighten-1'>fiber_manual_record</i></a>" disabled = "<a href='#'><i id='"+node["id"]+"-exit' onclick='toggle_exit("+node_exit_routes[0]+","+node_exit_routes[1]+","+node['id']+", '"+node['id']+"-exit', 'routes')' class='material-icons red-text text-lighten-2 tooltipped' data-tooltip='Click to enable' >fiber_manual_record</i></a>"
# Set the displays: # Set the displays:
enabled_display = disabled enabled_display = enabled if exit_enabled else disabled
primary_display = disabled # Build a table for all exit routes:
failover_display = disabled exit_content += """
exit_display = disabled <tr>
<td>"""+str(machine )+"""</td>
if is_enabled: enabled_display = enabled <td width="60px"><center>"""+str(enabled_display)+"""</center></td>
if is_primary: primary_display = enabled </tr>
# Check if a prefix is an Exit route: """
if prefix == "0.0.0.0/0": # I assume nodes have both ::/0 and 0.0.0.0/0
is_exit = True
exit_display = True
if is_exit:
# Build a simple table for all non-exit routes:
exit_content += """
<tr>
<td>"""+str(machine )+"""</td>
<td width="60px"><center>"""+str(enabled_display )+"""</center></td>
</tr>
"""
exit_content += "</tbody></table></p>"+markup_post exit_content += "</tbody></table></p>"+markup_post
content = route_content + failover_content + exit_content content = route_content + failover_content + exit_content

49
static/js/custom.js
View File

@@ -756,9 +756,30 @@ function delete_machine(machine_id) {
}) })
} }
function toggle_exit(route1, route2, exit_id, current_state) { function toggle_exit(route1, route2, exit_id, current_state, page) {
var data1 = {"route_id": route1, "current_state": current_state} var data1 = {"route_id": route1, "current_state": current_state}
var data2 = {"route_id": route2, "current_state": current_state} var data2 = {"route_id": route2, "current_state": current_state}
var element = document.getElementById(exit_id);
var disabledClass = ""
var enabledClass = ""
if (page == "machines") {
disabledClass = "waves-effect waves-light btn-small red lighten-2 tooltipped";
enabledClass = "waves-effect waves-light btn-small green lighten-2 tooltipped";
}
if (page == "routes") {
disabledClass = "material-icons red-text text-lighten-2 tooltipped";
enabledClass = "material-icons green-text text-lighten-2 tooltipped";
}
var disabledTooltip = "Click to enable"
var enabledTooltip = "Click to disable"
var disableState = "False"
var enableState = "True"
var action_taken = "unchanged.";
$.ajax({ $.ajax({
type:"POST", type:"POST",
url: "api/update_route", url: "api/update_route",
@@ -772,26 +793,14 @@ function toggle_exit(route1, route2, exit_id, current_state) {
contentType: "application/json", contentType: "application/json",
success: function(response) { success: function(response) {
// Response is a JSON object containing the Headscale API response of /v1/api/machines/<id>/route // Response is a JSON object containing the Headscale API response of /v1/api/machines/<id>/route
var element = document.getElementById(exit_id);
var disabledClass = "waves-effect waves-light btn-small red lighten-2 tooltipped";
var enabledClass = "waves-effect waves-light btn-small green lighten-2 tooltipped";
var disabledTooltip = "Click to enable"
var enabledTooltip = "Click to disable"
var disableState = "False"
var enableState = "True"
var action_taken = "unchanged.";
if (element.className == disabledClass) { if (element.className == disabledClass) {
// 1. Change the class to change the color of the icon
// 2. Change the "action taken" for the M.toast popup
// 3. Change the tooltip to say "Click to enable/disable"
element.className = enabledClass element.className = enabledClass
var action_taken = "enabled." action_taken = "enabled."
element.setAttribute('data-tooltip', enabledTooltip) element.setAttribute('data-tooltip', enabledTooltip)
element.setAttribute('onclick', 'toggle_exit('+route1+', '+route2+', "'+exit_id+'", "'+enableState+'")') element.setAttribute('onclick', 'toggle_exit('+route1+', '+route2+', "'+exit_id+'", "'+enableState+'")')
} else if (element.className == enabledClass) { } else if (element.className == enabledClass) {
element.className = disabledClass element.className = disabledClass
var action_taken = "disabled." action_taken = "disabled."
element.setAttribute('data-tooltip', disabledTooltip) element.setAttribute('data-tooltip', disabledTooltip)
element.setAttribute('onclick', 'toggle_exit('+route1+', '+route2+', "'+exit_id+'", "'+disableState+'")') element.setAttribute('onclick', 'toggle_exit('+route1+', '+route2+', "'+exit_id+'", "'+disableState+'")')
} }
@@ -818,12 +827,6 @@ function toggle_route(route_id, current_state, page) {
enabledClass = "material-icons green-text text-lighten-2 tooltipped"; enabledClass = "material-icons green-text text-lighten-2 tooltipped";
} }
console.log("In toggle_routes: ")
console.log("Editing route "+route_id+" for page: "+page+" (enabled? "+current_state+")")
console.log("disabledClass: "+disabledClass)
console.log("enabledClass: "+enabledClass)
console.log("Data: "+data)
var disabledTooltip = "Click to enable" var disabledTooltip = "Click to enable"
var enabledTooltip = "Click to disable" var enabledTooltip = "Click to disable"
var disableState = "False" var disableState = "False"
@@ -835,13 +838,9 @@ function toggle_route(route_id, current_state, page) {
data: JSON.stringify(data), data: JSON.stringify(data),
contentType: "application/json", contentType: "application/json",
success: function(response) { success: function(response) {
// Response is a JSON object containing the Headscale API response of /v1/api/machines/<id>/route
if (element.className == disabledClass) { if (element.className == disabledClass) {
// 1. Change the class to change the color of the icon
element.className = enabledClass element.className = enabledClass
// 2. Change the "action taken" for the M.toast popup
action_taken = "enabled." action_taken = "enabled."
// 3. Change the tooltip to say "Click to enable/disable"
element.setAttribute('data-tooltip', enabledTooltip) element.setAttribute('data-tooltip', enabledTooltip)
element.setAttribute('onclick', 'toggle_route('+route_id+', "'+enableState+'", "'+page+'")') element.setAttribute('onclick', 'toggle_route('+route_id+', "'+enableState+'", "'+page+'")')
} else if (element.className == enabledClass) { } else if (element.className == enabledClass) {