added a bit of time delay for register/deregister and also a confirm button for delete

pkgs/clan-cli/clan_cli/emulate_fastapi.py

@@ -106,11 +106,13 @@ async def consume_service_from_other_entity_c1() -> HTMLResponse:
 
 @app_c1.get("/v1/print_daemon1/register", response_class=JSONResponse)
 async def register_c1() -> JSONResponse:
+    time.sleep(2)
     return JSONResponse(content={"status": "registered"}, status_code=200)
 
 
 @app_c1.get("/v1/print_daemon1/deregister", response_class=JSONResponse)
 async def deregister_c1() -> JSONResponse:
+    time.sleep(2)
     return JSONResponse(content={"status": "deregistered"}, status_code=200)
 
 
@@ -130,11 +132,13 @@ async def consume_service_from_other_entity_c2() -> HTMLResponse:
 
 @app_c2.get("/v1/print_daemon2/register", response_class=JSONResponse)
 async def register_c2() -> JSONResponse:
+    time.sleep(2)
     return JSONResponse(content={"status": "registered"}, status_code=200)
 
 
 @app_c2.get("/v1/print_daemon2/deregister", response_class=JSONResponse)
 async def deregister_c2() -> JSONResponse:
+    time.sleep(2)
     return JSONResponse(content={"status": "deregistered"}, status_code=200)
 
 

pkgs/ui/src/app/client/client.tsx

@@ -190,7 +190,7 @@ export default function Client() {
           ],
         }}
       />
-      <div className="flex items-center flex-nowrap justify-between w-full">
+      <div className="flex items-center flex-nowrap justify-between">
         <div style={{ width: consumeContent ? "55%" : "100%" }}>
           <h4>Service Consumer View</h4>
           <CustomTable
@@ -245,18 +245,3 @@ export default function Client() {
     </div>
   );
 }
-
-const ClientTable = () => {
-  return (
-    <div>
-      {/* <h4>Client View</h4>
-      <CustomTable
-        loading={services_loading}
-        data={clients}
-        onConsumeAction={handleConsumeContent}
-        configuration={ClientTableConfig}
-        tkey="client-table"
-      /> */}
-    </div>
-  );
-};

pkgs/ui/src/components/entity_actions/index.tsx

@@ -5,6 +5,11 @@ import {
   Alert,
   AlertColor,
   CircularProgress,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogContentText,
+  DialogActions,
 } from "@mui/material";
 import { useState } from "react";
 import { deleteEntity } from "@/api/entities/entities";
@@ -37,6 +42,7 @@ const EntityActions = ({ endpointData, rowData }: Props) => {
   const [loadingDeRegister, setLoadingDeRegister] = useState(false);
 
   const [loadingDelete, setLoadingDelete] = useState(false);
+  const [confirmDelete, setConfirmDelete] = useState(false);
 
   if (registerData) console.log("Register Data in state", registerData);
   if (registerError) console.error("Register Error in state", registerError);
@@ -66,6 +72,7 @@ const EntityActions = ({ endpointData, rowData }: Props) => {
         });
       } finally {
         setLoadingDelete(false);
+        closeDeleteConfirmation();
       }
   };
 
@@ -89,10 +96,20 @@ const EntityActions = ({ endpointData, rowData }: Props) => {
       .then((response) => {
         setRegisterData(response.data);
         console.log("I got the data from register: ", response.data);
+        setSnackbar({
+          open: true,
+          message: "Registered successfully!",
+          severity: "success",
+        });
       })
       .catch((error) => {
         console.error("Error happened during register: ", error);
         setRegisterError(error);
+        setSnackbar({
+          open: true,
+          message: error,
+          severity: "error",
+        });
       })
       .finally(() => {
         setLoadingRegister(false);
@@ -114,10 +131,20 @@ const EntityActions = ({ endpointData, rowData }: Props) => {
       .then((response) => {
         setDeRegisterData(response.data);
         console.log("I got the data from deregister: ", response.data);
+        setSnackbar({
+          open: true,
+          message: "De-Registered successfully!",
+          severity: "success",
+        });
       })
       .catch((error) => {
         console.error("Error happened during deregister: ", error);
         setDeRegisterError(error);
+        setSnackbar({
+          open: true,
+          message: error,
+          severity: "error",
+        });
       })
       .finally(() => {
         setLoadingDeRegister(false);
@@ -128,6 +155,14 @@ const EntityActions = ({ endpointData, rowData }: Props) => {
     setSnackbar(SNACKBAR_DEFAULT);
   };
 
+  const openDeleteConfirmation = () => {
+    setConfirmDelete(true);
+  };
+
+  const closeDeleteConfirmation = () => {
+    setConfirmDelete(false);
+  };
+
   return (
     <>
       <div className="flex justify-between">
@@ -154,13 +189,27 @@ const EntityActions = ({ endpointData, rowData }: Props) => {
         )}
         <Button
           disabled={loadingDelete}
-          onClick={onDeleteEntity}
+          onClick={openDeleteConfirmation}
           size="small"
           variant="contained"
         >
-          {loadingDelete ? <CircularProgress size={24} /> : `Delete`}
+          Delete
         </Button>
       </div>
+      <Dialog open={confirmDelete} onClose={closeDeleteConfirmation}>
+        <DialogTitle>Delete Entity Confirmation</DialogTitle>
+        <DialogContent>
+          <DialogContentText>
+            Are you sure you want to delete this entity?
+          </DialogContentText>
+        </DialogContent>
+        <DialogActions>
+          <Button onClick={closeDeleteConfirmation}>Cancel</Button>
+          <Button variant="outlined" onClick={onDeleteEntity}>
+            {loadingDelete ? <CircularProgress size={24} /> : `Confirm`}
+          </Button>
+        </DialogActions>
+      </Dialog>
       <Snackbar
         anchorOrigin={{ vertical: "top", horizontal: "center" }}
         open={snackbar.open}