feat(firewall): add install context query and API endpoint for firewall client setup

Introduced a new API endpoint for retrieving the install context of the firewall client, which includes the bundle seed, configuration status, and suggested control plane URL. Updated the frontend to utilize this new endpoint, enhancing the user experience by dynamically displaying relevant information. Additionally, added type definitions for the install context and integrated it into the existing firewall management flow.

apps/web/src/queries/firewall.ts

@@ -1,14 +1,30 @@
 import { queryOptions, useMutation, useQueryClient } from '@tanstack/react-query'
 import { apiJSON } from '@/lib/api-client'
-import type { FirewallClient, FirewallClientsResponse, FirewallRule, FirewallRulesResponse } from '@/types/api'
+import type {
+  FirewallClient,
+  FirewallClientsResponse,
+  FirewallInstallContext,
+  FirewallRule,
+  FirewallRulesResponse,
+} from '@/types/api'
 
 export const firewallKeys = {
   all: ['firewall'] as const,
   clients: () => [...firewallKeys.all, 'clients'] as const,
+  installContext: () => [...firewallKeys.all, 'install-context'] as const,
   rules: (scope: string, clientId?: string) =>
     [...firewallKeys.all, 'rules', scope, clientId ?? ''] as const,
 }
 
+export function firewallInstallContextQueryOptions() {
+  return queryOptions<FirewallInstallContext>({
+    queryKey: firewallKeys.installContext(),
+    queryFn: () => apiJSON<FirewallInstallContext>('/v1/firewall/install-context'),
+    staleTime: 60_000,
+    retry: false,
+  })
+}
+
 export function firewallClientsQueryOptions() {
   return queryOptions<FirewallClientsResponse>({
     queryKey: firewallKeys.clients(),

apps/web/src/routes/_auth/firewall.tsx

@@ -1,7 +1,7 @@
 import { createFileRoute } from '@tanstack/react-router'
 import { useQuery } from '@tanstack/react-query'
 import { Copy, Info, RefreshCw, Shield } from 'lucide-react'
-import { useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { toast } from 'sonner'
 
 import { Alert, AlertDescription, AlertTitle } from '@evobgp/ui/components/alert'
@@ -23,6 +23,7 @@ import { PageHeader } from '@/components/page-header'
 import { StatusBadge } from '@/components/status-badge'
 import {
   firewallClientsQueryOptions,
+  firewallInstallContextQueryOptions,
   firewallRulesQueryOptions,
   useApproveFirewallClient,
   useCreateFirewallRule,
@@ -35,17 +36,29 @@ export const Route = createFileRoute('/_auth/firewall')({
 })
 
 function FirewallPage() {
+  const installCtxQ = useQuery(firewallInstallContextQueryOptions())
   const clientsQ = useQuery(firewallClientsQueryOptions())
   const rulesQ = useQuery(firewallRulesQueryOptions('tenant'))
   const approve = useApproveFirewallClient()
   const createRule = useCreateFirewallRule()
   const deleteRule = useDeleteFirewallRule()
 
+  const installCtx = installCtxQ.data
+
   const [clientName, setClientName] = useState('web-01')
   const [cpUrl, setCpUrl] = useState(() =>
     typeof window !== 'undefined' ? window.location.origin : 'https://api.example.com',
   )
   const [seed, setSeed] = useState('')
+
+  useEffect(() => {
+    if (installCtx?.suggested_cp_url) {
+      setCpUrl(installCtx.suggested_cp_url)
+    }
+    if (installCtx?.bundle_seed) {
+      setSeed(installCtx.bundle_seed)
+    }
+  }, [installCtx?.bundle_seed, installCtx?.suggested_cp_url])
   const [ruleAction, setRuleAction] = useState<'block' | 'accept'>('block')
   const [ruleComment, setRuleComment] = useState('')
 
@@ -64,7 +77,11 @@ function FirewallPage() {
 
   async function copyInstall() {
     if (!seed.trim()) {
-      toast.error('Укажите bundle seed')
+      toast.error(
+        installCtx?.bundle_seed_configured === false
+          ? 'На CP не задан EVOBGP_BUNDLE_SEED_HEX'
+          : 'Bundle seed недоступен (нужна роль operator)',
+      )
       return
     }
     try {
@@ -128,10 +145,18 @@ function FirewallPage() {
               <Input
                 id="fw-seed"
                 type="password"
+                readOnly
                 placeholder="EVOBGP_BUNDLE_SEED_HEX"
                 value={seed}
-                onChange={(e) => setSeed(e.target.value)}
+                className="font-mono text-xs"
               />
+              <p className="text-muted-foreground text-xs">
+                {installCtxQ.isLoading
+                  ? 'Загрузка из control plane…'
+                  : installCtx?.bundle_seed_configured
+                    ? 'Из переменной EVOBGP_BUNDLE_SEED_HEX на CP (docker compose / .env)'
+                    : 'На CP не задан EVOBGP_BUNDLE_SEED_HEX — enroll невозможен'}
+              </p>
             </div>
           </div>
           <pre className="overflow-x-auto rounded-md border bg-muted/40 p-3 text-xs">{installCmd}</pre>

apps/web/src/types/api.ts

@@ -373,3 +373,10 @@ export type FirewallRule = {
 }
 
 export type FirewallRulesResponse = { items: FirewallRule[] }
+
+export type FirewallInstallContext = {
+  bundle_seed: string
+  bundle_seed_configured: boolean
+  suggested_cp_url: string
+  install_sh_url: string
+}