Add firewall state page

Author: NHAS

adminui2/src/layouts/default.vue

@@ -42,7 +42,7 @@ const adminPageLinks = [
 
 const debugPageLinks = [
   { name: 'Wireguard Peers', icon: Icons.Peers, to: '/diagnostics/wg' },
-  { name: 'Firewall State', icon: Icons.FirewallState, to: '/settings/management_users' },
+  { name: 'Firewall State', icon: Icons.FirewallState, to: '/diagnostics/firewall' },
   { name: 'Test Rule', icon: Icons.Test, to: '/settings/management_users' },
   { name: 'User ACLs', icon: Icons.List, to: '/settings/management_users' }
 ]
@@ -140,7 +140,7 @@ async function logout() {
                 <span>Advanced</span>
               </label>
 
-              <ul tabindex="0" class="menu dropdown-content rounded-box w-52 bg-base-100 p-2 pb-4 text-black shadow">
+              <ul tabindex="0" class="menu-dropup dropdown-content rounded-box w-52 bg-base-100 p-2 pb-4 text-black shadow">
                 <li v-for="link in debugPageLinks" :key="link.name" :class="route.path == link.to ? 'bordered' : 'hover-bordered'">
                   <RouterLink :to="link.to" :class="route.path == link.to ? 'active' : ''">
                     <span class="w-6 text-center"><font-awesome-icon :icon="link.icon" /></span>

adminui2/src/pages/Diagnostics/FirewallState.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { useApi } from '@/composables/useApi'
+import { getFirewallState } from '@/api'
+
+const { data: fwState, isLoading: isLoadingState } = useApi(() => getFirewallState())
+
+const isLoading = computed(() => {
+  return isLoadingState.value
+})
+
+
+const state = computed(() => fwState.value ?? {})
+</script>
+
+<template>
+  <main class="w-full p-4">
+    <PageLoading v-if="isLoading" />
+    <div v-else>
+      <h1 class="text-4xl font-bold mb-4">Wireguard peers</h1>
+      <p>
+        Firewall State, all rules and devices directly deserialised.
+      </p>
+      <div class="mt-6 flex flex-wrap w-full">
+        <div class="card w-full bg-base-100 shadow-xl min-w-[800px]">
+          <div class="card-body">
+            <pre>{{ state }}</pre>
+          </div>
+        </div>
+      </div>
+    </div>
+  </main>
+</template>
+
+<style scoped>
+.hashlist-table.table-sm :where(th, td) {
+  padding-top: 0.4rem;
+  padding-bottom: 0.4rem;
+}
+</style>

adminui2/src/router/index.ts

@@ -45,7 +45,7 @@ const router = createRouter({
     route('/policy/groups', 'Groups', () => import('@/pages/Groups.vue')),
 
     route('/diagnostics/wg', 'Wireguard Diagnostics', () => import('@/pages/Diagnostics/WireguardPeers.vue')),
-    // route('/diagnostics/firewall', 'Firewall Diagnostics', () => import('@/pages/projects/project.vue')),
+    route('/diagnostics/firewall', 'Firewall Diagnostics', () => import('@/pages/Diagnostics/FirewallState.vue')),
     // route('/diagnostics/check', 'Check Firewall', () => import('@/pages/projects/project.vue')),
     // route('/diagnostics/acls', 'ACLs', () => import('@/pages/projects/project.vue')),