Merge branch 'main' into frontend-2

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

@@ -1,34 +1,80 @@
 "use client";
 
+import { mutate } from "swr";
+import { useGetAttachedEntities } from "@/api/entities/entities";
+import { useGetAllRepositories } from "@/api/repositories/repositories";
 import SummaryDetails from "@/components/summary_card";
 import CustomTable from "@/components/table";
 import {
   APSummaryDetails,
-  APAttachmentsDummyData,
   APAttachmentsTableConfig,
-  APServiceRepositoryDummyData,
   APServiceRepositoryTableConfig,
-} from "@/mock/access_point";
+} from "@/config/access_point";
+import { useEffect } from "react";
 
 export default function AccessPoint() {
+  const {
+    data: APAttachementData,
+    isLoading: loadingAttachements,
+    swrKey: attachedEntitiesKeyFunc,
+  } = useGetAttachedEntities();
+  const {
+    data: APRepositories,
+    isLoading: laodingRepositories,
+    swrKey: repositoriesKeyFunc,
+  } = useGetAllRepositories();
+
+  const onRefresh = () => {
+    const attachedEntitiesKey =
+      typeof attachedEntitiesKeyFunc === "function"
+        ? attachedEntitiesKeyFunc()
+        : attachedEntitiesKeyFunc;
+    const repositoriesKey =
+      typeof repositoriesKeyFunc === "function"
+        ? repositoriesKeyFunc()
+        : repositoriesKeyFunc;
+
+    if (attachedEntitiesKey) {
+      mutate(attachedEntitiesKey);
+    }
+    if (repositoriesKey) {
+      mutate(repositoriesKey);
+    }
+  };
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      onRefresh();
+    }, 5000);
+
+    return () => clearInterval(interval);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <div className="m-10">
       <SummaryDetails
+        fake
         hasRefreshButton
+        onRefresh={onRefresh}
         entity={{ name: "Access Point", details: APSummaryDetails }}
       />
       <div>
         <h4>Attachment View</h4>
         <CustomTable
-          data={APAttachmentsDummyData}
+          loading={loadingAttachements}
+          data={APAttachementData?.data}
           configuration={APAttachmentsTableConfig}
+          tkey="attachment-table"
         />
       </div>
       <div>
         <h4>Service Repository View </h4>
         <CustomTable
-          data={APServiceRepositoryDummyData}
+          loading={laodingRepositories}
+          data={APRepositories?.data}
           configuration={APServiceRepositoryTableConfig}
+          tkey="service-repository-table"
         />
       </div>
     </div>

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

@@ -1,40 +0,0 @@
-"use client";
-
-import SummaryDetails from "@/components/summary_card";
-import {
-  Client1SummaryDetails,
-  Client1ConsumerData,
-  Client1ConsumerTableConfig,
-  Client1ProducerTableConfig,
-  Client1ProducerData,
-} from "@/mock/client_1";
-import CustomTable from "@/components/table";
-
-export default function Client1() {
-  return (
-    <div className="m-10">
-      <SummaryDetails
-        hasAttachDetach
-        hasRefreshButton
-        entity={{
-          name: "Client 1",
-          details: Client1SummaryDetails,
-        }}
-      />
-      <div>
-        <h4>Consumer View</h4>
-        <CustomTable
-          data={Client1ConsumerData}
-          configuration={Client1ConsumerTableConfig}
-        />
-      </div>
-      <div>
-        <h4>Producer View</h4>
-        <CustomTable
-          data={Client1ProducerData}
-          configuration={Client1ProducerTableConfig}
-        />
-      </div>
-    </div>
-  );
-}

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

@@ -1,40 +0,0 @@
-"use client";
-
-import SummaryDetails from "@/components/summary_card";
-import {
-  Client2ConsumerData,
-  Client2ConsumerTableConfig,
-  Client2ProducerData,
-  Client2ProducerTableConfig,
-  Client2SummaryDetails,
-} from "@/mock/client_2";
-import CustomTable from "@/components/table";
-
-export default function Client1() {
-  return (
-    <div className="m-10">
-      <SummaryDetails
-        hasAttachDetach
-        hasRefreshButton
-        entity={{
-          name: "Client 2",
-          details: Client2SummaryDetails,
-        }}
-      />
-      <div>
-        <h4>Consumer View</h4>
-        <CustomTable
-          data={Client2ConsumerData}
-          configuration={Client2ConsumerTableConfig}
-        />
-      </div>
-      <div>
-        <h4>Producer View</h4>
-        <CustomTable
-          data={Client2ProducerData}
-          configuration={Client2ProducerTableConfig}
-        />
-      </div>
-    </div>
-  );
-}

pkgs/ui/src/app/client/[client_name]/page.tsx

@@ -0,0 +1,245 @@
+"use client";
+import { useEffect, useMemo, useRef, useState } from "react";
+import { ClientTableConfig, ServiceTableConfig } from "@/config/client_1";
+import CustomTable from "@/components/table";
+import {
+  Alert,
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  Snackbar,
+  Typography,
+  CircularProgress,
+  IconButton,
+} from "@mui/material";
+import CopyToClipboard from "@/components/copy_to_clipboard";
+import {
+  attachEntity,
+  detachEntity,
+  isAttached,
+} from "@/api/entities/entities";
+import { mutate } from "swr";
+import { Skeleton } from "@mui/material";
+import { Entity, Service } from "@/api/model";
+import useGetEntityByNameOrDid from "@/components/hooks/useGetEntityByNameOrDid";
+import { useGetAllServices } from "@/api/services/services";
+import axios from "axios";
+import CloseIcon from "@mui/icons-material/Close";
+
+interface SnackMessage {
+  message: string;
+  severity: "success" | "error";
+}
+
+type AttachButtonProps = {
+  entity?: Entity;
+  setSnackbarMessage: (message: SnackMessage) => void;
+  setSnackbarOpen: (open: boolean) => void;
+};
+
+const AttachButton = ({
+  entity,
+  setSnackbarMessage,
+  setSnackbarOpen,
+}: AttachButtonProps) => {
+  const [loading, setLoading] = useState(false);
+
+  const handleClick = async () => {
+    setLoading(true);
+    // Call the attach or detach function depending on the isAttached value
+    // and await for the result
+    try {
+      let response = await (entity?.attached
+        ? detachEntity({ entity_did: entity?.did })
+        : attachEntity({ entity_did: entity?.did }));
+
+      if (!entity?.attached) {
+        console.log("calling isAttached");
+        response = await isAttached({ entity_did: entity?.did });
+        console.log("response: ", response);
+      }
+      const msg = {
+        message: response.data.message,
+        severity: "success",
+      } as SnackMessage;
+      setSnackbarMessage(msg);
+      setSnackbarOpen(true);
+    } catch (error) {
+      if (axios.isAxiosError(error)) {
+        // Extract the error message from the error object
+        const errorMessage = error.response?.data.detail[0].msg;
+
+        const msg = {
+          message: `${errorMessage}`,
+          severity: "error",
+        } as SnackMessage;
+        setSnackbarMessage(msg);
+        setSnackbarOpen(true);
+      } else {
+        console.error("error: ", error);
+      }
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <>
+      <Button
+        onClick={handleClick}
+        className="mr-6"
+        variant="contained"
+        // Disable the button while loading
+        disabled={loading}
+      >
+        {loading ? (
+          <CircularProgress size={24} />
+        ) : entity?.attached ? (
+          "Detach"
+        ) : (
+          "Attach"
+        )}
+      </Button>
+    </>
+  );
+};
+
+export default function Client({
+  params,
+}: {
+  params: { client_name: string };
+}) {
+  const { client_name } = params;
+
+  const { entity: entity } = useGetEntityByNameOrDid(client_name);
+  const {
+    data: services,
+    isLoading: services_loading,
+    swrKey: entityKeyFunc,
+  } = useGetAllServices();
+
+  const clients: Service[] = useMemo(() => {
+    if (services?.data) {
+      return services.data.filter((service) => {
+        if (service.entity_did !== entity?.did) return true;
+      });
+    }
+    return [];
+  }, [services, entity?.did]);
+
+  const onRefresh = () => {
+    const entityKey =
+      typeof entityKeyFunc === "function" ? entityKeyFunc() : entityKeyFunc;
+    if (entityKey) mutate(entityKey);
+  };
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      onRefresh();
+    }, 5000);
+
+    return () => clearInterval(interval);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  const cardContentRef = useRef(null);
+  const [snackbarOpen, setSnackbarOpen] = useState(false);
+  const [snackbarMessage, setSnackbarMessage] = useState<
+    SnackMessage | undefined
+  >(undefined);
+
+  const closeSnackBar = () => {
+    setSnackbarMessage(undefined);
+    setSnackbarOpen(false);
+  };
+
+  if (services_loading) return <Skeleton height={500} />;
+  if (!services) return <Alert severity="error">Client not found</Alert>;
+
+  return (
+    <div className="m-10">
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+        }}
+      >
+        <h2>Entity {entity?.name}</h2>
+        <div>
+          <AttachButton
+            entity={entity}
+            setSnackbarMessage={setSnackbarMessage}
+            setSnackbarOpen={setSnackbarOpen}
+          ></AttachButton>
+
+          <Button onClick={onRefresh} variant="contained">
+            Refresh
+          </Button>
+        </div>
+      </div>
+
+      <Card variant="outlined">
+        <CardHeader
+          subheader="Summary"
+          action={<CopyToClipboard contentRef={cardContentRef} />}
+        />
+        <CardContent ref={cardContentRef}>
+          <Typography color="text.primary" gutterBottom>
+            DID: <code>{entity?.did}</code>
+          </Typography>
+          <Typography color="text.primary" gutterBottom>
+            IP: <code>{entity?.ip}</code>
+          </Typography>
+          <Typography color="text.primary" gutterBottom>
+            Network: <code>{entity?.other?.network}</code>
+          </Typography>
+        </CardContent>
+      </Card>
+      <div>
+        <h4>Client View</h4>
+        <CustomTable
+          loading={services_loading}
+          data={clients}
+          configuration={ClientTableConfig}
+          tkey="client-table"
+        />
+      </div>
+      <div>
+        <h4>Service View</h4>
+        <CustomTable
+          loading={services_loading}
+          data={services?.data}
+          configuration={ServiceTableConfig}
+          tkey="service-table"
+        />
+      </div>
+      <Snackbar
+        onClose={closeSnackBar}
+        anchorOrigin={{ vertical: "top", horizontal: "center" }}
+        open={snackbarOpen}
+        autoHideDuration={5000}
+      >
+        <Alert
+          severity={snackbarMessage?.severity}
+          // Add some margin or padding to the Alert component
+          sx={{ width: "100%", margin: 1, padding: 2 }}
+          // Add an IconButton component with a CloseIcon inside the Alert component
+          action={
+            <IconButton
+              size="small"
+              aria-label="close"
+              color="inherit"
+              onClick={closeSnackBar}
+            >
+              <CloseIcon fontSize="small" />
+            </IconButton>
+          }
+        >
+          {snackbarMessage?.message}
+        </Alert>
+      </Snackbar>
+    </div>
+  );
+}

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

@@ -1,18 +1,37 @@
 "use client";
 
-import {
-  DLGResolutionDummyData,
-  DLGResolutionTableConfig,
-  DLGSummaryDetails,
-} from "@/mock/dlg";
+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() {
+  const {
+    data: resolutionData,
+    loading: loadingResolutions,
+    fetch,
+  } = useFetch("/get_resolutions");
+
+  const onRefresh = () => {
+    fetch();
+  };
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      onRefresh();
+    }, 5000);
+
+    return () => clearInterval(interval);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <div className="m-10">
       <SummaryDetails
+        fake
         hasRefreshButton
+        onRefresh={onRefresh}
         entity={{
           name: "Distributed Ledger Gateway",
           details: DLGSummaryDetails,
@@ -21,8 +40,10 @@ export default function DLG() {
       <div>
         <h4>DID Resolution View</h4>
         <CustomTable
-          data={DLGResolutionDummyData}
+          loading={loadingResolutions}
+          data={resolutionData}
           configuration={DLGResolutionTableConfig}
+          tkey="resolution_table"
         />
       </div>
     </div>

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

@@ -1,22 +1,52 @@
 "use client";
 
+import { useAppState } from "@/components/hooks/useAppContext";
 import { NoDataOverlay } from "@/components/noDataOverlay";
 import SummaryDetails from "@/components/summary_card";
 import CustomTable from "@/components/table";
-import { HomeDummyData, HomeTableConfig } from "@/mock/home";
+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();
+    }, 5000);
+
+    return () => clearInterval(interval);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <div className="m-10">
       <SummaryDetails
         entity={{ name: "Home", details: [] }}
-        hasRefreshButton={false}
+        hasRefreshButton={true}
+        onRefresh={onRefresh}
         hasAttachDetach={false}
       />
 
       <div>
         <h4>Home View Table</h4>
-        <CustomTable data={HomeDummyData} configuration={HomeTableConfig} />
+        <CustomTable
+          loading={data.loadingEntities}
+          data={data?.allEntities}
+          configuration={HomeTableConfig}
+          tkey="home_table"
+        />
       </div>
 
       <div>