UI to delete configured notification targets (#2213)

portal-ui/src/screens/Console/NotificationEndpoints/ConfirmDeleteTargetModal.tsx

@@ -0,0 +1,39 @@
+import React from "react";
+import ConfirmDialog from "../Common/ModalWrapper/ConfirmDialog";
+import { ConfirmModalIcon } from "../../../icons";
+import { DialogContentText } from "@mui/material";
+
+const ConfirmDeleteTargetModal = ({
+  onConfirm,
+  onClose,
+  serviceName,
+  status,
+}: {
+  onConfirm: () => void;
+  onClose: () => void;
+  serviceName: string;
+  status: string;
+}) => {
+  return (
+    <ConfirmDialog
+      title={`Delete Endpoint`}
+      confirmText={"Delete"}
+      isOpen={true}
+      titleIcon={<ConfirmModalIcon />}
+      isLoading={false}
+      onConfirm={onConfirm}
+      onClose={onClose}
+      confirmationContent={
+        <React.Fragment>
+          <DialogContentText>
+            Are you sure you want to delete the notification endpoint ?
+            <br />
+            <b>{serviceName}</b> which is <b>{status}</b>
+          </DialogContentText>
+        </React.Fragment>
+      }
+    />
+  );
+};
+
+export default ConfirmDeleteTargetModal;

portal-ui/src/screens/Console/NotificationEndpoints/ListNotificationEndpoints.tsx

@@ -29,7 +29,7 @@ import {
   NotificationEndpointsList,
   TransformedEndpointItem,
 } from "./types";
-import { notificationTransform } from "./utils";
+import { getNotificationConfigKey, notificationTransform } from "./utils";
 import { AddIcon, LambdaIcon } from "../../../icons";
 import TableWrapper from "../Common/TableWrapper/TableWrapper";
 
@@ -49,8 +49,12 @@ import PageLayout from "../Common/Layout/PageLayout";
 import SearchBox from "../Common/SearchBox";
 import RBIconButton from "../Buckets/BucketDetails/SummaryItems/RBIconButton";
 import { IAM_PAGES } from "../../../common/SecureComponent/permissions";
-import { setErrorSnackMessage } from "../../../systemSlice";
+import {
+  setErrorSnackMessage,
+  setServerNeedsRestart,
+} from "../../../systemSlice";
 import { useAppDispatch } from "../../../store";
+import ConfirmDeleteTargetModal from "./ConfirmDeleteTargetModal";
 
 interface IListNotificationEndpoints {
   classes: any;
@@ -88,6 +92,10 @@ const ListNotificationEndpoints = ({ classes }: IListNotificationEndpoints) => {
   const [filter, setFilter] = useState<string>("");
   const [isLoading, setIsLoading] = useState<boolean>(false);
 
+  const [isDelConfirmOpen, setIsDelConfirmOpen] = useState<boolean>(false);
+  const [selNotifyEndPoint, setSelNotifyEndpoint] =
+    useState<TransformedEndpointItem | null>();
+
   //Effects
   // load records on mount
   useEffect(() => {
@@ -116,6 +124,39 @@ const ListNotificationEndpoints = ({ classes }: IListNotificationEndpoints) => {
     setIsLoading(true);
   }, []);
 
+  const resetNotificationConfig = (
+    ep: TransformedEndpointItem | undefined | null
+  ) => {
+    if (ep?.name) {
+      const configKey = getNotificationConfigKey(ep.name);
+      let accountId = `:${ep.account_id}`;
+      if (configKey) {
+        api
+          .invoke("POST", `/api/v1/configs/${configKey}${accountId}/reset`)
+          .then((res) => {
+            dispatch(setServerNeedsRestart(true));
+            setSelNotifyEndpoint(null);
+            setIsDelConfirmOpen(false);
+          })
+          .catch((err: ErrorResponseHandler) => {
+            setIsDelConfirmOpen(false);
+            dispatch(setErrorSnackMessage(err));
+          });
+      } else {
+        setSelNotifyEndpoint(null);
+        setIsDelConfirmOpen(false);
+        console.log(`Unable to find Config key for ${ep.name}`);
+      }
+    }
+  };
+
+  const confirmDelNotifyEndpoint = (record: TransformedEndpointItem) => {
+    setSelNotifyEndpoint(record);
+    setIsDelConfirmOpen(true);
+  };
+
+  const tableActions = [{ type: "delete", onClick: confirmDelNotifyEndpoint }];
+
   const filteredRecords = records.filter((b: TransformedEndpointItem) => {
     if (filter === "") {
       return true;
@@ -180,7 +221,7 @@ const ListNotificationEndpoints = ({ classes }: IListNotificationEndpoints) => {
               <Fragment>
                 <Grid item xs={12} className={classes.tableBlock}>
                   <TableWrapper
-                    itemActions={[]}
+                    itemActions={tableActions}
                     columns={[
                       {
                         label: "Status",
@@ -262,6 +303,19 @@ const ListNotificationEndpoints = ({ classes }: IListNotificationEndpoints) => {
             )}
           </Fragment>
         )}
+
+        {isDelConfirmOpen ? (
+          <ConfirmDeleteTargetModal
+            onConfirm={() => {
+              resetNotificationConfig(selNotifyEndPoint);
+            }}
+            status={`${selNotifyEndPoint?.status}`}
+            serviceName={`${selNotifyEndPoint?.service_name}`}
+            onClose={() => {
+              setIsDelConfirmOpen(false);
+            }}
+          />
+        ) : null}
       </PageLayout>
     </Fragment>
   );

portal-ui/src/screens/Console/NotificationEndpoints/types.ts

@@ -29,6 +29,8 @@ export interface NotificationEndpointItem {
 export interface TransformedEndpointItem {
   service_name: string;
   status: string;
+  name: string;
+  account_id: string;
 }
 
 export interface NotificationEndpointsList {

portal-ui/src/screens/Console/NotificationEndpoints/utils.ts

@@ -35,6 +35,8 @@ export const notificationTransform = (
   return notificationElements.map((element) => {
     return {
       service_name: `${element.service}:${element.account_id}`,
+      name: element.service,
+      account_id: element.account_id,
       status: element.status,
     };
   });
@@ -558,3 +560,20 @@ export const notificationEndpointsFields: any = {
     ...commonFields,
   ],
 };
+
+const serviceToConfigMap: Record<string, string> = {
+  webhook: "notify_webhook",
+  amqp: "notify_amqp",
+  kafka: "notify_kafka",
+  mqtt: "notify_mqtt",
+  nats: "notify_nats",
+  nsq: "notify_nsq",
+  mysql: "notify_mysql",
+  postgresql: "notify_postgres", //looks different in server response(postgresql as opposed to postgres) from restapi/admin_notification_endpoints.go
+  elasticsearch: "notify_elasticsearch",
+  redis: "notify_redis",
+};
+
+export const getNotificationConfigKey = (serviceName: string) => {
+  return serviceToConfigMap[serviceName];
+};