Advanced pages. Model-driven controls.

web/src/components/FirewallComponent.tsx

@@ -5,7 +5,7 @@ import { Input } from './ui/input';
 import { Label } from './ui/label';
 import { Alert, AlertDescription } from './ui/alert';
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from './ui/select';
-import { Shield, Loader2, AlertCircle, CheckCircle, Check, X, Plus, Trash2, BookOpen, ChevronDown, ChevronUp, Lock } from 'lucide-react';
+import { Shield, Loader2, AlertCircle, CheckCircle, Check, X, Plus, Trash2, BookOpen, Lock } from 'lucide-react';
 import { Badge } from './ui/badge';
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query';
 import { useNftables } from '../hooks/useNftables';
@@ -46,7 +46,7 @@ export function FirewallComponent() {
     mutationFn: (data: Parameters<typeof nftablesConfigApi.update>[0]) => nftablesConfigApi.update(data),
     onSuccess: () => queryClient.invalidateQueries({ queryKey: ['nftables', 'config'] }),
   });
-  const { status: nftablesStatus, isLoadingStatus: isNftablesLoading, interfaces, refetchStatus } = useNftables();
+  const { interfaces, refetchStatus } = useNftables();
   const { config: vpnConfig } = useVpn();
 
   const isEnabled = nftCfg?.enabled !== false;
@@ -58,7 +58,6 @@ export function FirewallComponent() {
   const [wanValue, setWanValue] = useState('');
   const [savingWan, setSavingWan] = useState(false);
   const [togglingFirewall, setTogglingFirewall] = useState(false);
-  const [showAdvanced, setShowAdvanced] = useState(false);
 
   const [successMessage, setSuccessMessage] = useState<string | null>(null);
   const [errorMessage, setErrorMessage] = useState<string | null>(null);
@@ -484,46 +483,6 @@ export function FirewallComponent() {
         </CardContent>
       </Card>
 
-      {/* Advanced: raw rules */}
-      <Card className={!isEnabled ? 'opacity-50' : ''}>
-        <CardHeader>
-          <div className="flex items-center justify-between">
-            <CardTitle>Active Ruleset</CardTitle>
-            <div className="flex items-center gap-2">
-              {isNftablesLoading ? (
-                <Loader2 className="h-4 w-4 animate-spin text-muted-foreground" />
-              ) : (
-                <Badge variant={nftablesStatus?.rules ? 'success' : isEnabled ? 'warning' : 'secondary'} className="gap-1">
-                  {nftablesStatus?.rules && <CheckCircle className="h-3 w-3" />}
-                  {nftablesStatus?.rules ? 'Active' : 'Not loaded'}
-                </Badge>
-              )}
-              <Button
-                variant="outline"
-                size="sm"
-                className="h-7 text-xs gap-1"
-                onClick={() => setShowAdvanced(!showAdvanced)}
-              >
-                {showAdvanced ? <ChevronUp className="h-3 w-3" /> : <ChevronDown className="h-3 w-3" />}
-                Advanced
-              </Button>
-            </div>
-          </div>
-        </CardHeader>
-        {showAdvanced && (
-          <CardContent>
-            {nftablesStatus?.rules ? (
-              <pre className="bg-muted p-3 rounded-lg overflow-x-auto text-xs font-mono">
-                {nftablesStatus.rules}
-              </pre>
-            ) : (
-              <p className="text-sm text-muted-foreground">
-                No rules loaded yet. Rules are generated when you apply an HAProxy configuration.
-              </p>
-            )}
-          </CardContent>
-        )}
-      </Card>
     </div>
   );
 }