UI improvement

This commit is contained in:
Matthew Grotke 2026-05-18 14:38:23 -04:00
parent 575edc836d
commit 9a272ee959
16 changed files with 2477 additions and 1604 deletions

View file

@ -488,6 +488,51 @@
}
]
},
{
"type": "card",
"label": "Network Interfaces",
"client_requirement": "client_is_viewer+",
"items": [
{
"type": "table",
"datasource": "config:interfaces",
"empty_message": "No interfaces configured.",
"columns": [
{
"label": "Type",
"field": "iface_type",
"class": "col-mono"
},
{
"label": "Interface",
"field": "interface",
"class": "col-mono"
},
{
"label": "Status",
"field": "status",
"render": "interface_status"
}
],
"row_actions": [
{
"text": "Edit",
"class": "btn-ghost btn-sm",
"action": "/action/apply_interface",
"method": "inline_edit",
"client_requirement": "client_is_administrator+",
"fields": [
{
"col": "interface",
"input_type": "select",
"options": "%NETWORK_INTERFACE_STATUS_OPTIONS%"
}
]
}
]
}
]
},
{
"type": "card",
"label": "General",
@ -497,15 +542,6 @@
"action": "/action/apply_general",
"method": "post",
"items": [
{
"type": "field",
"label": "WAN Interface",
"name": "wan_interface",
"input_type": "text",
"value": "%GENERAL_WAN_INTERFACE%",
"placeholder": "e.g. eno2",
"hint": "The network interface facing your ISP modem or ONT."
},
{
"type": "field",
"label": "Max Log Size (KB)",
@ -955,16 +991,7 @@
{
"col": "format",
"input_type": "select",
"options": [
{
"value": "hosts",
"label": "hosts \u2014 /etc/hosts format"
},
{
"value": "dnsmasq",
"label": "dnsmasq \u2014 local=/ syntax"
}
]
"options": "%BLOCKLIST_FORMAT_OPTIONS%"
},
{
"col": "url",
@ -1015,16 +1042,7 @@
"label": "Format",
"name": "format",
"input_type": "select",
"options": [
{
"value": "hosts",
"label": "hosts \u2014 /etc/hosts format"
},
{
"value": "dnsmasq",
"label": "dnsmasq \u2014 local=/ syntax"
}
]
"options": "%BLOCKLIST_FORMAT_OPTIONS%"
},
{
"type": "field",
@ -1070,7 +1088,7 @@
{
"type": "info_bar",
"variant": "info",
"text": "For a basic flat network with no VLAN segmentation, only use VLAN 1 and delete the others."
"text": "VLAN ID is derived automatically from the subnet and prefix using the active-octet rule: for /24 the third octet is used (192.168.10.0/24 → VLAN 10), for /16 the second octet, for /8 the first octet, for /25/30 the fourth. For a basic flat network with no VLAN segmentation, only use VLAN 1 and delete the others."
},
{
"type": "table",
@ -1096,6 +1114,11 @@
"field": "subnet",
"class": "col-mono"
},
{
"label": "Mask",
"field": "subnet_mask",
"class": "col-mono"
},
{
"label": "Blocklists",
"field": "use_blocklists",
@ -1125,12 +1148,14 @@
"input_type": "text"
},
{
"col": "interface",
"col": "subnet",
"input_type": "text"
},
{
"col": "subnet",
"input_type": "text"
"col": "subnet_mask",
"input_type": "number",
"min": 1,
"max": 30
},
{
"col": "radius_default",
@ -1139,6 +1164,11 @@
{
"col": "mdns_reflection",
"input_type": "checkbox"
},
{
"col": "use_blocklists",
"input_type": "checkbox_multi",
"options": "%BLOCKLIST_NAME_OPTIONS%"
}
]
},
@ -1147,7 +1177,11 @@
"class": "btn-danger btn-sm",
"action": "/action/delete_vlan",
"method": "post",
"client_requirement": "client_is_administrator+"
"client_requirement": "client_is_administrator+",
"disable_if": {
"field": "vlan_id",
"value": 1
}
}
]
},
@ -1163,35 +1197,70 @@
"method": "post",
"items": [
{
"type": "field",
"label": "VLAN ID",
"name": "vlan_id",
"input_type": "number",
"min": 1,
"max": 4094,
"placeholder": "e.g. 10"
"type": "field_row",
"cols": 2,
"items": [
{
"type": "field",
"label": "VLAN Name",
"name": "name",
"input_type": "text",
"hint": "Lowercase letters, digits, hyphens. E.g. iot"
},
{
"type": "subnet_row",
"subnet_name": "subnet",
"prefix_name": "subnet_mask",
"subnet_placeholder": "e.g. 192.168.x.0",
"prefix_value": "24"
}
]
},
{
"type": "field_row",
"cols": 3,
"items": [
{
"type": "field",
"label": "Interface",
"name": "",
"input_type": "text",
"readonly": true,
"class": "vlan-iface-preview form-input-mono",
"value": ""
},
{
"type": "field",
"label": "VLAN ID",
"name": "",
"input_type": "text",
"readonly": true,
"class": "vlan-derived-id-preview form-input-mono",
"value": ""
},
{
"type": "field",
"label": "VLAN Type",
"name": "is_vpn",
"input_type": "checkbox",
"checkbox_label": "Is VPN",
"hint": "Check if this VLAN uses a WireGuard interface (e.g. wg0, wg1, etc)."
}
]
},
{
"type": "divider"
},
{
"type": "field",
"label": "Name",
"name": "name",
"input_type": "text",
"placeholder": "e.g. IoT"
"label": "Blocklists",
"name": "use_blocklists",
"input_type": "checkbox_group",
"options": "%BLOCKLIST_NAME_OPTIONS%",
"hint": "Note: Selected lists will be merged and de-duplicated prior to use."
},
{
"type": "field",
"label": "Interface",
"name": "interface",
"input_type": "text",
"placeholder": "e.g. eth0.10"
},
{
"type": "field",
"label": "Subnet",
"name": "subnet",
"input_type": "text",
"placeholder": "e.g. 192.168.10.0/24",
"hint": "DHCP subnet for this VLAN."
"type": "divider"
},
{
"type": "field",
@ -1214,7 +1283,9 @@
"type": "button_primary",
"text": "Add VLAN",
"action": "/action/add_vlan",
"method": "post"
"method": "post",
"class": "add-vlan-btn",
"disabled": true
}
]
}
@ -1291,20 +1362,7 @@
{
"col": "protocol",
"input_type": "select",
"options": [
{
"value": "tcp",
"label": "TCP"
},
{
"value": "udp",
"label": "UDP"
},
{
"value": "both",
"label": "TCP/UDP"
}
]
"options": "%PROTOCOL_OPTIONS%"
},
{
"col": "src_ip_or_subnet",
@ -1356,20 +1414,7 @@
"label": "Protocol",
"name": "protocol",
"input_type": "select",
"options": [
{
"value": "tcp",
"label": "TCP"
},
{
"value": "udp",
"label": "UDP"
},
{
"value": "both",
"label": "TCP/UDP"
}
]
"options": "%PROTOCOL_OPTIONS%"
},
{
"type": "field",
@ -1476,20 +1521,7 @@
{
"col": "protocol",
"input_type": "select",
"options": [
{
"value": "tcp",
"label": "TCP"
},
{
"value": "udp",
"label": "UDP"
},
{
"value": "both",
"label": "TCP/UDP"
}
]
"options": "%PROTOCOL_OPTIONS%"
},
{
"col": "dest_port",
@ -1541,20 +1573,7 @@
"label": "Protocol",
"name": "protocol",
"input_type": "select",
"options": [
{
"value": "tcp",
"label": "TCP"
},
{
"value": "udp",
"label": "UDP"
},
{
"value": "both",
"label": "TCP/UDP"
}
]
"options": "%PROTOCOL_OPTIONS%"
},
{
"type": "field",
@ -1685,7 +1704,8 @@
"type": "select",
"name": "vlan_filter",
"value": "all",
"options": "%VLAN_FILTER_OPTIONS%"
"options": "%VLAN_FILTER_OPTIONS%",
"filter_col": "vlan_name"
}
]
},
@ -1816,12 +1836,13 @@
},
{
"type": "p",
"text": "Active WireGuard peer connections and server interface configuration."
"text": "WireGuard peer management and server interface configuration."
}
]
},
{
"type": "table",
"label": "Active Sessions",
"datasource": "live:vpn_sessions",
"empty_message": "No active VPN sessions.",
"columns": [
@ -1860,6 +1881,126 @@
}
]
},
{
"type": "table",
"label": "Peers",
"datasource": "config:vpn_peers",
"empty_message": "No peers configured. Use Add Peer below.",
"columns": [
{
"label": "Name",
"field": "name"
},
{
"label": "IP",
"field": "ip",
"class": "col-mono"
},
{
"label": "Split Tunnel",
"field": "split_tunnel"
},
{
"label": "Enabled",
"field": "enabled",
"render": "badge_enabled_disabled"
},
{
"label": "Public Key",
"field": "pubkey_short",
"class": "col-mono"
}
],
"row_actions": [
{
"text": "Edit",
"class": "btn-ghost btn-sm",
"action": "/action/edit_vpn_peer",
"method": "inline_edit",
"client_requirement": "client_is_administrator+",
"fields": [
{
"col": "name",
"input_type": "text"
},
{
"col": "split_tunnel",
"input_type": "checkbox"
},
{
"col": "enabled",
"input_type": "checkbox"
}
]
},
{
"text": "Regen Conf",
"class": "btn-ghost btn-sm",
"action": "/action/regenerate_vpn_peer",
"method": "post",
"client_requirement": "client_is_administrator+"
},
{
"text": "Delete",
"class": "btn-danger btn-sm",
"action": "/action/delete_vpn_peer",
"method": "post",
"client_requirement": "client_is_administrator+"
}
]
},
{
"type": "card",
"label": "Add Peer",
"client_requirement": "client_is_administrator+",
"items": [
{
"type": "form",
"action": "/action/add_vpn_peer",
"method": "post",
"items": [
{
"type": "field",
"label": "Name",
"name": "peer_name",
"input_type": "text",
"placeholder": "e.g. laptop",
"hint": "Friendly name for this peer."
},
{
"type": "field",
"label": "IP Address",
"name": "peer_ip",
"input_type": "text",
"placeholder": "e.g. 192.168.40.2",
"hint": "Static IP assigned to this peer within the VPN subnet."
},
{
"type": "field",
"label": "Split Tunnel",
"name": "split_tunnel",
"input_type": "checkbox",
"hint": "Route only VPN subnet traffic through the tunnel. When unchecked all traffic is routed through the VPN."
},
{
"type": "button_row",
"items": [
{
"type": "button_primary",
"text": "Add Peer & Download Conf",
"action": "/action/add_vpn_peer",
"method": "post"
},
{
"type": "button_cancel",
"text": "Cancel"
}
]
}
]
}
]
},
{
"type": "card",
"client_requirement": "client_is_administrator+",
@ -1882,12 +2023,12 @@
},
{
"type": "field",
"label": "Gateway IP",
"name": "vpn_gateway",
"label": "Server Endpoint",
"name": "vpn_server_endpoint",
"input_type": "text",
"value": "%VPN_GATEWAY%",
"placeholder": "e.g. 192.168.40.1",
"hint": "Router IP on the VPN subnet, assigned to the WireGuard interface."
"value": "%VPN_SERVER_ENDPOINT%",
"placeholder": "e.g. vpn.example.com",
"hint": "Publicly reachable hostname or IP of this server, embedded in client config files."
},
{
"type": "field",
@ -1904,7 +2045,7 @@
"name": "vpn_dns_server",
"input_type": "text",
"value": "%VPN_DNS_SERVER%",
"placeholder": "Leave blank to use gateway IP",
"placeholder": "Leave blank to use gateway IP (%VPN_GATEWAY%)",
"hint": "Explicit DNS server pushed to peers. Defaults to the gateway IP."
},
{
@ -2381,20 +2522,7 @@
"label": "Access Level",
"name": "access_level",
"input_type": "select",
"options": [
{
"value": "viewer",
"label": "Viewer \u2014 read-only access to live data"
},
{
"value": "administrator",
"label": "Administrator \u2014 can modify configuration"
},
{
"value": "manager",
"label": "Manager \u2014 full access including account management"
}
]
"options": "%ACCOUNT_LEVEL_OPTIONS%"
},
{
"type": "button_row",