fix(web): preserve managed config and status compatibility (#2389)

Fix web/frontend compat bugs in managed config & runtime status

- Preserve [[peer]].peer_public_key when TOML configs round-trip
  through the web/managed NetworkConfig path
- Keep old peer_urls clients working while adding structured peer
  metadata for new clients
- Make frontend protobuf JSON normalization preserve omitted-field
  semantics instead of turning missing data into misleading defaults
- Harden runtime status rendering against omitted or string-encoded
  backend fields
- Expose peer-route feature flags in the web status UI

easytier-web/frontend-lib/src/components/RemoteManagement.vue

@@ -35,7 +35,7 @@ const currentNetworkConfig = ref<NetworkTypes.NetworkConfig | undefined>(undefin
 const listInstanceIdResponse = ref<Api.ListNetworkInstanceIdResponse | undefined>(undefined);
 
 const isRunning = (instanceId: string) => {
-    return listInstanceIdResponse.value?.running_inst_ids.map(Utils.UuidToStr).includes(instanceId);
+    return (listInstanceIdResponse.value?.running_inst_ids ?? []).map(Utils.UuidToStr).includes(instanceId);
 }
 
 const networkMetaCache = ref<Record<string, Api.NetworkMeta>>({});
@@ -46,7 +46,7 @@ const loadNetworkMetas = async (instanceIds: string[]) => {
 
     try {
         const response = await props.api.get_network_metas(missingIds);
-        Object.assign(networkMetaCache.value, response.metas);
+        Object.assign(networkMetaCache.value, response.metas ?? {});
     } catch (e) {
         console.error("Failed to load network metas", e);
     }
@@ -80,8 +80,8 @@ const updateInstanceList = () => {
     let insts = new Set<string>();
     let t = listInstanceIdResponse.value;
     if (t) {
-        t.running_inst_ids.forEach((u) => insts.add(Utils.UuidToStr(u)));
-        t.disabled_inst_ids.forEach((u) => insts.add(Utils.UuidToStr(u)));
+        (t.running_inst_ids ?? []).forEach((u) => insts.add(Utils.UuidToStr(u)));
+        (t.disabled_inst_ids ?? []).forEach((u) => insts.add(Utils.UuidToStr(u)));
     }
 
     const newList = Array.from(insts).map((instance: string) => {
@@ -149,7 +149,7 @@ const networkIsDisabled = computed(() => {
     if (!selectedInstanceId.value) {
         return false;
     }
-    return listInstanceIdResponse.value?.disabled_inst_ids.map(Utils.UuidToStr).includes(selectedInstanceId.value?.uuid);
+    return (listInstanceIdResponse.value?.disabled_inst_ids ?? []).map(Utils.UuidToStr).includes(selectedInstanceId.value?.uuid);
 });
 watch(networkIsDisabled, async (newVal, oldVal) => {
     if (newVal !== oldVal && newVal === true) {
@@ -287,17 +287,35 @@ const loadNetworkInstanceIds = async () => {
 }
 
 const loadCurrentNetworkInfo = async () => {
-    if (!selectedInstanceId.value) {
+    const selected = selectedInstanceId.value?.uuid;
+    if (!selected) {
+        curNetworkInfo.value = null;
         return;
     }
     if (!needShowNetworkStatus.value) {
+        curNetworkInfo.value = null;
+        return;
+    }
+    if (curNetworkInfo.value?.instance_id !== selected) {
+        curNetworkInfo.value = null;
+    }
+
+    let network_info = await props.api.get_network_info(selected);
+    if (selectedInstanceId.value?.uuid !== selected) {
         return;
     }
 
-    let network_info = await props.api.get_network_info(selectedInstanceId.value.uuid);
+    if (!network_info) {
+        curNetworkInfo.value = {
+            instance_id: selected,
+            running: false,
+            error_msg: t('web.device_management.network_info_unavailable'),
+        } as NetworkTypes.NetworkInstance;
+        return;
+    }
 
     curNetworkInfo.value = {
-        instance_id: selectedInstanceId.value.uuid,
+        instance_id: selected,
         running: network_info?.running ?? false,
         error_msg: network_info?.error_msg ?? '',
         detail: network_info,
@@ -492,7 +510,7 @@ onUnmounted(() => {
                                     <div class="flex items-center min-w-0">
                                         <div class="mr-4 min-w-0 flex-1">
                                             <span class="truncate block">{{ t('network_name') }}: {{
-                                                slotProps.option.meta.network_name }}</span>
+                                                slotProps.option.meta?.network_name ?? slotProps.option.uuid }}</span>
                                         </div>
                                         <Tag class="my-auto leading-3 shrink-0"
                                             :severity="isRunning(slotProps.option.uuid) ? 'success' : 'info'"
@@ -569,10 +587,13 @@ onUnmounted(() => {
                     <h2 class="text-xl font-medium">{{ t('web.device_management.network_status') }}</h2>
                 </div>
 
-                <Status v-if="(curNetworkInfo?.error_msg ?? '') === ''" v-bind:cur-network-inst="curNetworkInfo"
+                <Status v-if="curNetworkInfo && curNetworkInfo.error_msg === ''" v-bind:cur-network-inst="curNetworkInfo"
                     class="mb-4">
                 </Status>
-                <Message v-else severity="error" class="mb-4">{{ curNetworkInfo?.error_msg }}</Message>
+                <Message v-else-if="curNetworkInfo?.error_msg" severity="error" class="mb-4">{{
+                    curNetworkInfo.error_msg }}</Message>
+                <Message v-else severity="info" class="mb-4">{{ t('web.device_management.loading_network_status') }}
+                </Message>
 
                 <div class="text-center mt-4">
                     <Button @click="stopNetwork" :disabled="!currentNetworkControl.deletable.value"

easytier-web/frontend-lib/src/components/Status.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
 import { useTimeAgo } from '@vueuse/core'
-import { IPv4 } from 'ip-num/IPNumber'
 import { NetworkInstance, type TunnelInfo, type NodeInfo, type PeerRoutePair } from '../types/network'
 import { useI18n } from 'vue-i18n';
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { ipv4InetToString, ipv4ToString, ipv6ToString } from '../modules/utils';
+import { latencyMs, lossRate, numericValue, peerConns } from '../modules/statusDisplay';
 import { Badge, DataTable, Column, Tag, Chip, Button, Dialog, ScrollPanel, Timeline, Divider, Card, } from 'primevue';
 import NetworkChart from './NetworkChart.vue';
 
@@ -39,8 +39,8 @@ function routeCost(info: any) {
   return '?'
 }
 
-function resolveObjPath(path: string, obj = globalThis, separator = '.') {
-  const properties = Array.isArray(path) ? path : path.split(separator)
+function resolveObjPath(path: string, obj: any = globalThis, separator = '.') {
+  const properties = path.split(separator)
   return properties.reduce((prev, curr) => prev?.[curr], obj)
 }
 
@@ -48,10 +48,17 @@ function statsCommon(info: any, field: string): number | undefined {
   if (!info.peer)
     return undefined
 
-  const conns = info.peer.conns
-  return conns.reduce((acc: number, conn: any) => {
-    return acc + resolveObjPath(field, conn)
-  }, 0)
+  let sum = 0
+  let hasValue = false
+  for (const conn of peerConns(info)) {
+    const value = numericValue(resolveObjPath(field, conn))
+    if (value === undefined)
+      continue
+
+    sum += value
+    hasValue = true
+  }
+  return hasValue ? sum : undefined
 }
 
 function humanFileSize(bytes: number, si = false, dp = 1) {
@@ -74,14 +81,6 @@ function humanFileSize(bytes: number, si = false, dp = 1) {
   return `${bytes.toFixed(dp)} ${units[u]}`
 }
 
-function latencyMs(info: PeerRoutePair) {
-  let lat_us_sum = statsCommon(info, 'stats.latency_us')
-  if (lat_us_sum === undefined)
-    return ''
-  lat_us_sum = lat_us_sum / 1000 / info.peer!.conns.length
-  return `${lat_us_sum % 1 > 0 ? Math.round(lat_us_sum) + 1 : Math.round(lat_us_sum)}ms`
-}
-
 function txBytes(info: PeerRoutePair) {
   const tx = statsCommon(info, 'stats.tx_bytes')
   return tx ? humanFileSize(tx) : ''
@@ -92,11 +91,6 @@ function rxBytes(info: PeerRoutePair) {
   return rx ? humanFileSize(rx) : ''
 }
 
-function lossRate(info: PeerRoutePair) {
-  const lossRate = statsCommon(info, 'loss_rate')
-  return lossRate !== undefined ? `${Math.round(lossRate * 100)}%` : ''
-}
-
 function version(info: PeerRoutePair) {
   return info.route.version === '' ? 'unknown' : info.route.version
 }
@@ -105,7 +99,7 @@ function ipFormat(info: PeerRoutePair) {
   const ip = info.route.ipv4_addr
   if (typeof ip === 'string')
     return ip
-  return ip ? `${IPv4.fromNumber(ip.address.addr)}/${ip.network_length}` : ''
+  return ip ? ipv4InetToString(ip) : ''
 }
 
 function oneTunnelProto(tunnel?: TunnelInfo): string {
@@ -131,7 +125,7 @@ function oneTunnelProto(tunnel?: TunnelInfo): string {
 }
 
 function tunnelProto(info: PeerRoutePair) {
-  return [...new Set(info.peer?.conns.map(c => oneTunnelProto(c.tunnel)))].join(',')
+  return [...new Set(peerConns(info).map(c => oneTunnelProto(c.tunnel)))].join(',')
 }
 
 const myNodeInfo = computed(() => {
@@ -206,7 +200,7 @@ const myNodeInfoChips = computed(() => {
 
   // local ipv4s
   const local_ipv4s = my_node_info.ips?.interface_ipv4s
-  for (const [idx, ip] of local_ipv4s?.entries()) {
+  for (const [idx, ip] of local_ipv4s?.entries() ?? []) {
     chips.push({
       label: `Local IPv4 ${idx}: ${ipv4ToString(ip)}`,
       icon: '',
@@ -215,7 +209,7 @@ const myNodeInfoChips = computed(() => {
 
   // local ipv6s
   const local_ipv6s = my_node_info.ips?.interface_ipv6s
-  for (const [idx, ip] of local_ipv6s?.entries()) {
+  for (const [idx, ip] of local_ipv6s?.entries() ?? []) {
     chips.push({
       label: `Local IPv6 ${idx}: ${ipv6ToString(ip)}`,
       icon: '',
@@ -226,7 +220,7 @@ const myNodeInfoChips = computed(() => {
   const public_ip = my_node_info.ips?.public_ipv4
   if (public_ip) {
     chips.push({
-      label: `Public IP: ${IPv4.fromNumber(public_ip.addr)}`,
+      label: `Public IP: ${ipv4ToString(public_ip)}`,
       icon: '',
     } as Chip)
   }
@@ -241,7 +235,7 @@ const myNodeInfoChips = computed(() => {
 
   // listeners:
   const listeners = my_node_info.listeners
-  for (const [idx, listener] of listeners?.entries()) {
+  for (const [idx, listener] of listeners?.entries() ?? []) {
     chips.push({
       label: `Listener ${idx}: ${listener.url}`,
       icon: '',
@@ -288,6 +282,14 @@ function natType(info: PeerRoutePair): string {
   return ''
 }
 
+function isPublicServerRoute(info: PeerRoutePair): boolean {
+  return info.route?.feature_flag?.is_public_server ?? false
+}
+
+function shouldAvoidRelayData(info: PeerRoutePair): boolean {
+  return info.route?.feature_flag?.avoid_relay_data ?? false
+}
+
 const peerCount = computed(() => {
   if (!peerRouteInfos.value)
     return 0
@@ -342,7 +344,7 @@ function showEventLogs() {
   if (!detail)
     return
 
-  dialogContent.value = detail.events.map((event: string) => JSON.parse(event))
+  dialogContent.value = detail.events?.map((event: string) => JSON.parse(event)) ?? []
   dialogHeader.value = 'event_log'
   dialogVisible.value = true
 }
@@ -434,16 +436,16 @@ function showEventLogs() {
             <Column :field="ipFormat" :header="t('virtual_ipv4')" />
             <Column :header="t('hostname')">
               <template #body="slotProps">
-                <div v-if="!slotProps.data.route.cost || !slotProps.data.route.feature_flag.is_public_server"
+                <div v-if="!slotProps.data.route.cost || !isPublicServerRoute(slotProps.data)"
                   v-tooltip="slotProps.data.route.hostname">
                   {{
                     slotProps.data.route.hostname }}
                 </div>
                 <div v-else v-tooltip="slotProps.data.route.hostname" class="space-x-1">
-                  <Tag v-if="slotProps.data.route.feature_flag.is_public_server" severity="info" value="Info">
+                  <Tag v-if="isPublicServerRoute(slotProps.data)" severity="info" value="Info">
                     {{ t('status.server') }}
                   </Tag>
-                  <Tag v-if="slotProps.data.route.feature_flag.avoid_relay_data" severity="warn" value="Warn">
+                  <Tag v-if="shouldAvoidRelayData(slotProps.data)" severity="warn" value="Warn">
                     {{ t('status.relay') }}
                   </Tag>
                 </div>

easytier-web/frontend-lib/src/components/acl/AclChainEditor.vue

@@ -2,7 +2,7 @@
 import { Button, Column, DataTable, Divider, InputText, Select, SelectButton, ToggleButton } from 'primevue'
 import { ref, watch } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { AclAction, AclChain, AclChainType, AclProtocol, AclRule } from '../../types/network'
+import { AclAction, AclChain, AclChainType, AclProtocol, AclRule, ensureAclChain, ensureAclRuleLists } from '../../types/network'
 import AclRuleDialog from './AclRuleDialog.vue'
 
 const props = defineProps<{
@@ -13,7 +13,11 @@ const chain = defineModel<AclChain>({ required: true })
 
 const { t } = useI18n()
 
-watch(() => chain.value.rules, (newRules) => {
+function rules() {
+  return ensureAclChain(chain.value).rules
+}
+
+watch(() => rules(), (newRules) => {
   if (!newRules) return
   const isSorted = newRules.every((rule, i) => i === 0 || (rule.priority || 0) <= (newRules[i - 1].priority || 0))
   if (!isSorted) {
@@ -60,7 +64,7 @@ function addRule() {
   editingRule.value = {
     name: '',
     description: '',
-    priority: chain.value.rules.length,
+    priority: rules().length,
     enabled: true,
     protocol: AclProtocol.Any,
     ports: [],
@@ -79,28 +83,31 @@ function addRule() {
 
 function editRule(index: number) {
   editingRuleIndex.value = index
-  editingRule.value = JSON.parse(JSON.stringify(chain.value.rules[index]))
+  editingRule.value = ensureAclRuleLists(JSON.parse(JSON.stringify(rules()[index])))
   showRuleDialog.value = true
 }
 
 function deleteRule(index: number) {
-  chain.value.rules.splice(index, 1)
+  rules().splice(index, 1)
 }
 
 function saveRule(rule: AclRule) {
+  const chainRules = rules()
+  ensureAclRuleLists(rule)
   if (editingRuleIndex.value === -1) {
-    chain.value.rules.push(rule)
+    chainRules.push(rule)
   } else {
-    chain.value.rules[editingRuleIndex.value] = rule
+    chainRules[editingRuleIndex.value] = rule
   }
-  chain.value.rules.sort((a, b) => (b.priority || 0) - (a.priority || 0))
+  chainRules.sort((a, b) => (b.priority || 0) - (a.priority || 0))
 }
 
 function onRowReorder(event: any) {
-  chain.value.rules = event.value
+  chain.value.rules = event.value ?? []
+  const chainRules = rules()
   // Update priorities based on new order (higher priority at top)
-  chain.value.rules.forEach((rule, index) => {
-    rule.priority = chain.value.rules.length - index - 1
+  chainRules.forEach((rule, index) => {
+    rule.priority = chainRules.length - index - 1
   })
 }
 </script>
@@ -143,7 +150,7 @@ function onRowReorder(event: any) {
       <Button icon="pi pi-plus" :label="t('acl.add_rule')" severity="success" size="small" @click="addRule" />
     </div>
 
-    <DataTable :value="chain.rules" @row-reorder="onRowReorder" responsiveLayout="scroll">
+    <DataTable :value="rules()" @row-reorder="onRowReorder" responsiveLayout="scroll">
       <Column rowReorder headerStyle="width: 3rem" />
       <Column field="enabled" :header="t('acl.rule.enabled')">
         <template #body="{ data }">

easytier-web/frontend-lib/src/components/acl/AclGroupEditor.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { Button, Column, DataTable, Dialog, InputText, MultiSelect, Password } from 'primevue';
-import { ref } from 'vue';
+import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { GroupIdentity, GroupInfo } from '../../types/network';
+import { GroupIdentity, GroupInfo, ensureGroupInfo } from '../../types/network';
 
 const props = defineProps<{
   groupNames?: string[]
@@ -18,6 +18,17 @@ const editingGroupIndex = ref(-1)
 const showGroupDialog = ref(false)
 const oldGroupName = ref('')
 
+function groupInfo() {
+  return ensureGroupInfo(group.value)
+}
+
+const members = computed({
+  get: () => groupInfo().members,
+  set: value => {
+    groupInfo().members = value
+  },
+})
+
 function addGroup() {
   editingGroupIndex.value = -1
   editingGroup.value = {
@@ -30,13 +41,13 @@ function addGroup() {
 
 function editGroup(index: number) {
   editingGroupIndex.value = index
-  editingGroup.value = JSON.parse(JSON.stringify(group.value.declares[index]))
+  editingGroup.value = JSON.parse(JSON.stringify(groupInfo().declares[index]))
   oldGroupName.value = editingGroup.value?.group_name || ''
   showGroupDialog.value = true
 }
 
 function deleteGroup(index: number) {
-  group.value.declares.splice(index, 1)
+  groupInfo().declares.splice(index, 1)
 }
 
 function saveGroup() {
@@ -44,15 +55,15 @@ function saveGroup() {
   const newName = editingGroup.value.group_name
 
   if (editingGroupIndex.value === -1) {
-    group.value.declares.push(editingGroup.value)
+    groupInfo().declares.push(editingGroup.value)
   } else {
     if (oldGroupName.value && oldGroupName.value !== newName) {
       // Sync in members
-      group.value.members = group.value.members.map(m => m === oldGroupName.value ? newName : m)
+      groupInfo().members = groupInfo().members.map(m => m === oldGroupName.value ? newName : m)
       // Notify parent to sync in rules
       emit('rename-group', { oldName: oldGroupName.value, newName })
     }
-    group.value.declares[editingGroupIndex.value] = editingGroup.value
+    groupInfo().declares[editingGroupIndex.value] = editingGroup.value
   }
   showGroupDialog.value = false
 }
@@ -70,7 +81,7 @@ function saveGroup() {
         <Button icon="pi pi-plus" :label="t('web.common.add')" severity="success" @click="addGroup" />
       </div>
 
-      <DataTable :value="group.declares" responsiveLayout="scroll">
+      <DataTable :value="groupInfo().declares" responsiveLayout="scroll">
         <Column field="group_name" :header="t('acl.group.name')" />
         <Column field="group_secret" :header="t('acl.group.secret')">
           <template #body="{ data }">
@@ -90,7 +101,7 @@ function saveGroup() {
 
     <div class="flex flex-col gap-2">
       <label class="font-bold text-lg">{{ t('acl.group.members') }}</label>
-      <MultiSelect v-model="group.members" :options="props.groupNames" multiple fluid filter
+      <MultiSelect v-model="members" :options="props.groupNames" multiple fluid filter
         :placeholder="t('acl.group.members')" />
     </div>
 

easytier-web/frontend-lib/src/components/acl/AclManager.vue

@@ -2,7 +2,7 @@
 import { Button, Menu, Tab, TabList, TabPanel, TabPanels, Tabs } from 'primevue'
 import { computed, ref } from 'vue'
 import { useI18n } from 'vue-i18n'
-import { Acl, AclAction, AclChainType } from '../../types/network'
+import { Acl, AclAction, AclChainType, ensureAclV1 } from '../../types/network'
 import AclChainEditor from './AclChainEditor.vue'
 import AclGroupEditor from './AclGroupEditor.vue'
 
@@ -12,6 +12,7 @@ const { t } = useI18n()
 
 const activeTab = ref(0)
 const menu = ref()
+const aclV1 = computed(() => ensureAclV1(acl.value))
 
 const addMenuModel = ref([
   { label: () => t('acl.inbound'), command: () => addChain(AclChainType.Inbound) },
@@ -20,10 +21,6 @@ const addMenuModel = ref([
 ])
 
 function addChain(type: AclChainType) {
-  if (!acl.value.acl_v1) {
-    acl.value.acl_v1 = { chains: [], group: { declares: [], members: [] } }
-  }
-
   let defaultName = ''
   switch (type) {
     case AclChainType.Inbound: defaultName = 'Inbound'; break;
@@ -31,7 +28,7 @@ function addChain(type: AclChainType) {
     case AclChainType.Forward: defaultName = 'Forward'; break;
   }
 
-  acl.value.acl_v1.chains.push({
+  aclV1.value.chains.push({
     name: defaultName,
     chain_type: type,
     description: '',
@@ -40,21 +37,20 @@ function addChain(type: AclChainType) {
     default_action: AclAction.Allow
   })
 
-  activeTab.value = acl.value.acl_v1.chains.length - 1
+  activeTab.value = aclV1.value.chains.length - 1
 }
 
 function removeChain(index: number) {
   if (confirm(t('acl.delete_chain_confirm'))) {
-    acl.value.acl_v1?.chains.splice(index, 1)
-    if (activeTab.value >= (acl.value.acl_v1?.chains.length || 0)) {
-      activeTab.value = Math.max(0, (acl.value.acl_v1?.chains.length || 0))
+    aclV1.value.chains.splice(index, 1)
+    if (activeTab.value >= aclV1.value.chains.length) {
+      activeTab.value = Math.max(0, aclV1.value.chains.length)
     }
   }
 }
 
 function handleRenameGroup({ oldName, newName }: { oldName: string, newName: string }) {
-  if (!acl.value.acl_v1) return
-  acl.value.acl_v1.chains.forEach(chain => {
+  aclV1.value.chains.forEach(chain => {
     chain.rules.forEach(rule => {
       rule.source_groups = rule.source_groups.map(g => g === oldName ? newName : g)
       rule.destination_groups = rule.destination_groups.map(g => g === oldName ? newName : g)
@@ -63,11 +59,11 @@ function handleRenameGroup({ oldName, newName }: { oldName: string, newName: str
 }
 
 const groupNames = computed(() => {
-  return acl.value.acl_v1?.group?.declares.map(g => g.group_name) || []
+  return aclV1.value.group?.declares.map(g => g.group_name) || []
 })
 
 const tabs = computed(() => {
-  const chains = acl.value.acl_v1?.chains || []
+  const chains = aclV1.value.chains
   const result: { type: string, label: string, index: number }[] = []
 
   if (chains.length === 0) {
@@ -124,24 +120,13 @@ const tabs = computed(() => {
           </div>
 
           <!-- Rule Chains -->
-          <div v-if="tab.type === 'chain' && acl.acl_v1 && acl.acl_v1.chains[tab.index]" class="py-4">
-            <AclChainEditor v-model="acl.acl_v1.chains[tab.index]" :group-names="groupNames" />
+          <div v-if="tab.type === 'chain' && aclV1.chains[tab.index]" class="py-4">
+            <AclChainEditor v-model="aclV1.chains[tab.index]" :group-names="groupNames" />
           </div>
 
           <!-- Group Management -->
           <div v-if="tab.type === 'groups'" class="py-4">
-            <template v-if="acl.acl_v1">
-              <AclGroupEditor v-if="acl.acl_v1.group" v-model="acl.acl_v1.group" :group-names="groupNames"
-                @rename-group="handleRenameGroup" />
-              <div v-else class="flex justify-center p-4">
-                <Button :label="t('web.common.add') + ' ' + t('acl.groups')"
-                  @click="acl.acl_v1.group = { declares: [], members: [] }" />
-              </div>
-            </template>
-            <div v-else class="flex justify-center p-4">
-              <Button :label="t('acl.enabled')"
-                @click="acl.acl_v1 = { chains: [], group: { declares: [], members: [] } }" />
-            </div>
+            <AclGroupEditor v-model="aclV1.group" :group-names="groupNames" @rename-group="handleRenameGroup" />
           </div>
         </TabPanel>
       </TabPanels>

easytier-web/frontend-lib/src/components/acl/AclRuleDialog.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
 import { AutoComplete, Button, Checkbox, Dialog, InputNumber, InputText, MultiSelect, Panel, SelectButton, ToggleButton } from 'primevue';
-import { computed, ref } from 'vue';
+import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { AclAction, AclProtocol, AclRule } from '../../types/network';
+import { AclAction, AclProtocol, AclRule, ensureAclRuleLists } from '../../types/network';
 
 const props = defineProps<{
   visible: boolean
@@ -32,6 +32,8 @@ const showPorts = computed(() => {
   return rule.value.protocol === AclProtocol.TCP || rule.value.protocol === AclProtocol.UDP || rule.value.protocol === AclProtocol.Any
 })
 
+watch(() => rule.value, ensureAclRuleLists, { immediate: true })
+
 function close() {
   emit('update:visible', false)
 }