improver error handling

frontend/src/pages/Network.tsx

@@ -8,7 +8,7 @@ import type { BridgeInfo, InterfaceInfo } from '../types/network';
 
 const { Title, Paragraph } = Typography;
 
-export default function NetworkManager() {
+export default function Network() {
   const {
     interfacesQuery,
     bridgesQuery,
@@ -59,7 +59,7 @@ export default function NetworkManager() {
         key: 'addresses',
         render: (addrs: any[]) =>
           addrs?.length ? (
-            <Space direction="vertical">
+            <Space orientation="vertical">
               {addrs.map((a) => (
                 <span key={`${a.address}/${a.prefixlen}`}>
                   {a.address}/{a.prefixlen} ({a.family})
@@ -79,7 +79,7 @@ export default function NetworkManager() {
     () => [
       { title: 'IfIndex', dataIndex: 'ifindex', key: 'ifindex', width: 90 },
       { title: 'Name', dataIndex: 'ifname', key: 'ifname' },
-      { title: 'State', dataIndex: 'state', key: 'state', render: (s) => s ?? '—' },
+      { title: 'State', dataIndex: 'state', key: 'state', render: (s) => <Tag>{s ?? '—'}</Tag> },
       {
         title: 'Members',
         dataIndex: 'members',
@@ -106,36 +106,36 @@ export default function NetworkManager() {
     ],
     [isRemoving],
   );
-
   async function handleCreateBridge(values: { name: string; interfaces?: string[] }) {
     const ifaceList = values.interfaces ?? [];
-
-    try {
-      await createBridge({ name: values.name, interfaces: ifaceList });
-      message.success(`Bridge ${values.name} created`);
-      setBridgeModalVisible(false);
-      bridgeForm.resetFields();
-    } catch (err) {
-      console.error(err);
-      message.error((err as Error)?.message ?? 'Failed to create bridge');
-    }
+    createBridge({ name: values.name, interfaces: ifaceList })
+      .then(() => {
+        message.success(`Bridge ${values.name} created`);
+        setBridgeModalVisible(false);
+        bridgeForm.resetFields();
+      })
+      .catch((err) => {
+        console.error(err);
+        message.error((err as Error).message ?? 'Failed to create bridge');
+      });
   }
 
-  async function handleRemoveBridge(name: string) {
-    try {
-      await removeBridge({ name });
-      message.success(`Bridge ${name} removed`);
-    } catch (err) {
-      console.error(err);
-      message.error((err as Error)?.message ?? 'Failed to remove bridge');
-    }
+  function handleRemoveBridge(name: string) {
+    removeBridge({ name })
+      .then(() => {
+        message.success(`Bridge ${name} removed`);
+      })
+      .catch((err) => {
+        console.error(err);
+        message.error((err as Error).message ?? 'Failed to remove bridge');
+      });
   }
 
   return (
     <div style={{ padding: 16 }}>
       <Row justify="space-between" align="middle" style={{ marginBottom: 12 }}>
         <Col>
-          <Title level={4}>Bridges & Interfaces</Title>
+          <Title level={2}> Network Management</Title>
           <Paragraph type="secondary">View system interfaces and manage network bridges.</Paragraph>
         </Col>
         <Col>