pkgs/clan-cli/tests/test_db_api.py

@@ -266,7 +266,7 @@ def test_entity(api: TestClient) -> None:
     request_body = {
         "did": default_entity_did,
         "name": "C1",
-        "ip": "127.0.0.1",
+        "ip": "127.0.0.1:5555",
         "attached": False,
         "visible": True,
         "other": {
@@ -283,7 +283,7 @@ def test_entity2(api: TestClient) -> None:
     request_body = {
         "did": default_entity_did2,
         "name": "C2",
-        "ip": "127.0.0.2",
+        "ip": "127.0.0.1:5555",
         "attached": False,
         "visible": True,
         "other": {

pkgs/ui/src/app/access-point/page.tsx

@@ -10,6 +10,7 @@ import {
   APAttachmentsTableConfig,
   APServiceRepositoryTableConfig,
 } from "@/config/access_point";
+import { useEffect } from 'react';
 
 export default function AccessPoint() {
 
@@ -28,6 +29,14 @@ export default function AccessPoint() {
     }
   }
 
+  useEffect(() => {
+    const interval = setInterval(() => {
+      onRefresh();
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
   return (
     <div className="m-10">
       <SummaryDetails

pkgs/ui/src/app/client-1/page.tsx

@@ -1,16 +1,15 @@
 "use client";
-import { useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import {
   Client1ConsumerTableConfig,
   Client1ProducerTableConfig,
 } from "@/config/client_1";
 import CustomTable from "@/components/table";
 import useGetEntityByName from "@/components/hooks/useGetEntityById";
-import { Button, Card, CardContent, CardHeader, Skeleton, Typography } from "@mui/material";
+import { Alert, Button, Card, CardContent, CardHeader, Skeleton, Snackbar, Typography } from "@mui/material";
 import CopyToClipboard from "@/components/copy_to_clipboard";
 import { mutate } from "swr";
 import { useGetEntity } from "@/api/entities/entities";
-import { useGetConsumer } from "@/api/consumers/consumers";
 import { BASE_URL } from "@/constants";
 import axios from "axios";
 
@@ -18,37 +17,54 @@ export default function Client1() {
 
   const { entity } = useGetEntityByName('C1');
   const { data: client1, isLoading, swrKey: entityKeyFunc } = useGetEntity({ entity_did: entity?.did })
-  const { data: consumerData, isLoading: loadingConsumerData, swrKey: consumerKeyFunc } = useGetConsumer({ entity_did: entity?.did })
   const cardContentRef = useRef(null);
+  const [isAttached, setIsAttached] = useState(entity?.attached || false);
+  const [snackbarOpen, setSnackbarOpen] = useState(false);
+  const [snackbarMessage, setSnackbarMessage] = useState('');
+
+  const closeSnackBar = () => {
+    setSnackbarMessage('');
+    setSnackbarOpen(false);
+  }
 
   const onAttachEntity = async () => {
     try {
       const response = await axios.post(`${BASE_URL}/attach`, { entity_did: entity?.did });
-      alert(response.data.message);
+      setSnackbarMessage(response.data.message);
+      setSnackbarOpen(true);
     } catch (error) {
       console.error(error);
     } finally {
+      setIsAttached(true)
     }
   }
 
   const onDetachEntity = async () => {
     try {
       const response = await axios.post(`${BASE_URL}/detach`, { entity_did: entity?.did });
-      console.log('detach', response)
+      console.log(response);
-      alert('Entity Detached Successfully.');
+      setSnackbarMessage('Entity detached successfully.');
+      setSnackbarOpen(true);
     } catch (error) {
       console.error(error);
     } finally {
+      setIsAttached(false)
     }
   }
 
   const onRefresh = () => {
     const entityKey = typeof entityKeyFunc === 'function' ? entityKeyFunc() : entityKeyFunc;
-    const consumerKey = typeof consumerKeyFunc === 'function' ? consumerKeyFunc() : consumerKeyFunc;
     if (entityKey) mutate(entityKey);
-    if (consumerKey) mutate(consumerKey)
   }
 
+  useEffect(() => {
+    const interval = setInterval(() => {
+      onRefresh();
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
   if (isLoading)
     return <Skeleton height={500} />
 
@@ -63,12 +79,17 @@ export default function Client1() {
       >
         <h2>Client 1</h2>
         <div>
-          <Button onClick={onAttachEntity} className="mr-6" variant="contained">
+
-            Attach
+          {isAttached === false ?
-          </Button>
+            <Button onClick={onAttachEntity} className="mr-6" variant="contained">
-          <Button onClick={onDetachEntity} className="mr-6" variant="contained">
+              Attach
-            Detach
+            </Button>
-          </Button>
+            :
+            <Button onClick={onDetachEntity} className="mr-6" variant="contained">
+              Detach
+            </Button>
+          }
+
           <Button onClick={onRefresh} variant="contained">Refresh</Button>
         </div>
       </div>
@@ -93,8 +114,8 @@ export default function Client1() {
       <div>
         <h4>Consumer View</h4>
         <CustomTable
-          loading={loadingConsumerData}
+          loading={isLoading}
-          data={consumerData?.data}
+          data={client1?.data?.producers}
           configuration={Client1ConsumerTableConfig}
         />
       </div>
@@ -106,6 +127,11 @@ export default function Client1() {
           configuration={Client1ProducerTableConfig}
         />
       </div>
+      <Snackbar onClose={closeSnackBar} anchorOrigin={{ vertical: 'top', horizontal: 'center' }} open={snackbarOpen} autoHideDuration={1000}>
+        <Alert severity="success" sx={{ width: '100%' }}>
+          {snackbarMessage}
+        </Alert>
+      </Snackbar>
     </div>
   );
 }

pkgs/ui/src/app/client-2/page.tsx

@@ -1,15 +1,14 @@
 "use client";
-import { useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import {
   Client2ConsumerTableConfig,
   Client2ProducerTableConfig,
 } from "@/config/client_2";
 import CustomTable from "@/components/table";
 import useGetEntityByName from "@/components/hooks/useGetEntityById";
-import { Button, Card, CardContent, CardHeader, Skeleton, Typography } from "@mui/material";
+import { Button, Card, CardContent, CardHeader, Skeleton, Typography, Snackbar, Alert } from "@mui/material";
 import CopyToClipboard from "@/components/copy_to_clipboard";
 import { useGetEntity } from "@/api/entities/entities";
-import { useGetConsumer } from "@/api/consumers/consumers";
 import { mutate } from "swr";
 import axios from "axios";
 import { BASE_URL } from "@/constants";
@@ -18,8 +17,15 @@ export default function Client2() {
 
   const { entity } = useGetEntityByName('C2');
   const { data: client2, isLoading, swrKey: entityKeyFunc } = useGetEntity({ entity_did: entity?.did })
-  const { data: consumerData, isLoading: loadingConsumerData, swrKey: consumerKeyFunc } = useGetConsumer({ entity_did: entity?.did })
   const cardContentRef = useRef(null);
+  const [isAttached, setIsAttached] = useState(entity?.attached);
+  const [snackbarOpen, setSnackbarOpen] = useState(false);
+  const [snackbarMessage, setSnackbarMessage] = useState('');
+
+  const closeSnackBar = () => {
+    setSnackbarMessage('');
+    setSnackbarOpen(false);
+  }
 
   const onAttachEntity = async () => {
     try {
@@ -28,6 +34,7 @@ export default function Client2() {
     } catch (error) {
       console.error(error);
     } finally {
+      setIsAttached(true)
     }
   }
 
@@ -39,16 +46,23 @@ export default function Client2() {
     } catch (error) {
       console.error(error);
     } finally {
+      setIsAttached(false)
     }
   }
 
   const onRefresh = () => {
     const entityKey = typeof entityKeyFunc === 'function' ? entityKeyFunc() : entityKeyFunc;
-    const consumerKey = typeof consumerKeyFunc === 'function' ? consumerKeyFunc() : consumerKeyFunc;
     if (entityKey) mutate(entityKey);
-    if (consumerKey) mutate(consumerKey)
   }
 
+  useEffect(() => {
+    const interval = setInterval(() => {
+      onRefresh();
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
   if (isLoading)
     return <Skeleton height={500} />
 
@@ -63,12 +77,15 @@ export default function Client2() {
       >
         <h2>Client 2</h2>
         <div>
-          <Button onClick={onAttachEntity} className="mr-6" variant="contained">
+          {isAttached === false ?
-            Attach
+            <Button onClick={onAttachEntity} className="mr-6" variant="contained">
-          </Button>
+              Attach
-          <Button onClick={onDetachEntity} className="mr-6" variant="contained">
+            </Button>
-            Detach
+            :
-          </Button>
+            <Button onClick={onDetachEntity} className="mr-6" variant="contained">
+              Detach
+            </Button>
+          }
           <Button onClick={onRefresh} variant="contained">Refresh</Button>
         </div>
       </div>
@@ -93,8 +110,8 @@ export default function Client2() {
       <div>
         <h4>Consumer View</h4>
         <CustomTable
-          loading={loadingConsumerData}
+          loading={isLoading}
-          data={consumerData?.data}
+          data={client2?.data?.producers}
           configuration={Client2ConsumerTableConfig}
         />
       </div>
@@ -106,6 +123,11 @@ export default function Client2() {
           configuration={Client2ProducerTableConfig}
         />
       </div>
+      <Snackbar onClose={closeSnackBar} anchorOrigin={{ vertical: 'top', horizontal: 'center' }} open={snackbarOpen} autoHideDuration={1000}>
+        <Alert severity="success" sx={{ width: '100%' }}>
+          {snackbarMessage}
+        </Alert>
+      </Snackbar>
     </div>
   );
 }

pkgs/ui/src/app/distributed-ledger-gateway/page.tsx

@@ -4,6 +4,7 @@ import { DLGResolutionTableConfig, DLGSummaryDetails } from "@/config/dlg";
 import CustomTable from "@/components/table";
 import SummaryDetails from "@/components/summary_card";
 import useFetch from "@/components/hooks/useFetch";
+import { useEffect } from "react";
 
 
 export default function DLG() {
@@ -13,6 +14,14 @@ export default function DLG() {
     fetch();
   }
 
+  useEffect(() => {
+    const interval = setInterval(() => {
+      onRefresh();
+    }, 5000);
+
+    return () => clearInterval(interval);
+  }, []);
+
   return (
     <div className="m-10">
       <SummaryDetails

pkgs/ui/src/app/home/page.tsx

@@ -5,16 +5,34 @@ import { NoDataOverlay } from "@/components/noDataOverlay";
 import SummaryDetails from "@/components/summary_card";
 import CustomTable from "@/components/table";
 import { HomeTableConfig } from "@/config/home";
+import { useEffect } from "react";
+import { mutate } from "swr";
 
 export default function Home() {
 
   const { data } = useAppState();
 
+  const entitiesKeyFunc = data.entitiesKeyFunc;
+
+  const onRefresh = () => {
+    const entityKey = typeof entitiesKeyFunc === 'function' ? entitiesKeyFunc() : entitiesKeyFunc;
+    if (entitiesKeyFunc) mutate(entityKey);
+  }
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      onRefresh();
+    }, 500);
+
+    return () => clearInterval(interval);
+  }, []);
+
   return (
     <div className="m-10">
       <SummaryDetails
         entity={{ name: "Home", details: [] }}
-        hasRefreshButton={false}
+        hasRefreshButton={true}
+        onRefresh={onRefresh}
         hasAttachDetach={false}
       />
 

pkgs/ui/src/config/access_point/index.tsx

@@ -17,11 +17,11 @@ export const APSummaryDetails = [
 
 export const APAttachmentsTableConfig = [
   {
-    key: "entity_name",
+    key: "name",
     label: "Entity name",
   },
   {
-    key: "entity_did",
+    key: "did",
     label: "Entity DID",
   },
   {

pkgs/ui/src/config/client_1/index.tsx

@@ -16,18 +16,18 @@ export const Client1ConsumerTableConfig = [
       return <Button disabled variant="outlined">Consume</Button>
     }
   },
-  {
+  // {
-    key: "entity",
+  //   key: "entity",
-    label: "Entity",
+  //   label: "Entity",
-  },
+  // },
   {
     key: "entity_did",
     label: "Entity DID",
   },
-  {
+  // {
-    key: "network",
+  //   key: "network",
-    label: "Network",
+  //   label: "Network",
-  },
+  // },
 ];
 
 export const Client1ProducerTableConfig = [

pkgs/ui/src/config/client_2/index.tsx

@@ -16,18 +16,18 @@ export const Client2ConsumerTableConfig = [
       return <Button disabled variant="outlined">Consume</Button>
     }
   },
-  {
+  // {
-    key: "entity",
+  //   key: "entity",
-    label: "Entity",
+  //   label: "Entity",
-  },
+  // },
   {
     key: "entity_did",
     label: "Entity DID",
   },
-  {
+  // {
-    key: "network",
+  //   key: "network",
-    label: "Network",
+  //   label: "Network",
-  },
+  // },
 ];
 
 export const Client2ProducerTableConfig = [