ISPN-11499 Delete entry

src/app/CacheManagers/CacheTableDisplay.tsx

@@ -72,6 +72,7 @@ const CacheTableDisplay = (props: {
     perPage: 10
   });
   const [rows, setRows] = useState<any[]>([]);
+  const [actions, setActions] = useState<any[]>([]);
   const [selected, setSelected] = useState<string[]>([]);
   const [chipsCacheFeature, setChipsCacheFeature] = useState<string[]>([]);
   const [chipsCacheType, setChipsCacheType] = useState<string[]>([]);
@@ -96,7 +97,7 @@ const CacheTableDisplay = (props: {
     }
   ];
 
-  const actions = [
+  const cachesActions = [
     {
       title: 'Delete',
       onClick: (event, rowId, rowData, extra) =>
@@ -223,6 +224,7 @@ const CacheTableDisplay = (props: {
           ]
         }
       ];
+      setActions([]);
     } else {
       currentRows = caches.map(cacheInfo => {
         return {
@@ -242,6 +244,7 @@ const CacheTableDisplay = (props: {
           ]
         };
       });
+      setActions(cachesActions);
     }
     setRows(currentRows);
   };

src/app/Caches/CacheEntries.tsx

@@ -21,15 +21,27 @@ import cacheService from '../../services/cacheService';
 import { Table, TableBody, TableHeader } from '@patternfly/react-table';
 import { MoreInfoTooltip } from '@app/Common/MoreInfoTooltip';
 import {ClearAllEntries} from "@app/Caches/ClearAllEntries";
+import {DeleteEntry} from "@app/Caches/DeleteEntry";
+import set = Reflect.set;
 
 const CacheEntries: React.FunctionComponent<any> = (props: {
   cacheName: string;
 }) => {
   const [isAddEntryFormOpen, setAddEntryFormOpen] = useState<boolean>(false);
+  const [isDeleteEntryModalOpen, setDeleteEntryModalOpen] = useState<boolean>(false);
+  const [keyToDelete, setKeyToDelete] = useState<string>('');
   const [isClearAllModalOpen, setClearAllModalOpen] = useState<boolean>(false);
   const [keyToSearch, setKeyToSearch] = useState<string>('');
-
   const [rows, setRows] = useState<any[]>([]);
+  const [actions, setActions] = useState<any[]>([]);
+
+  const entryActions = [
+    {
+      title: 'Delete',
+      onClick: (event, rowId, rowData, extra) =>
+        onClickDeleteEntryButton(rowData.cells[0].title)
+    }
+  ];
 
   const columns = [
     { title: 'Key' },
@@ -85,6 +97,7 @@ const CacheEntries: React.FunctionComponent<any> = (props: {
           ]
         }
       ];
+      setActions([]);
     } else {
       rows = entries.map(entry => {
         return {
@@ -101,6 +114,7 @@ const CacheEntries: React.FunctionComponent<any> = (props: {
           ]
         };
       });
+      setActions(entryActions);
     }
     setRows(rows);
   };
@@ -113,6 +127,11 @@ const CacheEntries: React.FunctionComponent<any> = (props: {
     setClearAllModalOpen(true);
   };
 
+  const onClickDeleteEntryButton = (entryKey: string) => {
+    setDeleteEntryModalOpen(true);
+    setKeyToDelete(entryKey);
+  };
+
   const closeAddEntryFormModal = () => {
     setAddEntryFormOpen(false);
   };
@@ -122,6 +141,12 @@ const CacheEntries: React.FunctionComponent<any> = (props: {
     searchEntryByKey();
   };
 
+  const closeDeleteEntryModal = () => {
+    setDeleteEntryModalOpen(false);
+    setKeyToDelete('');
+    searchEntryByKey();
+  };
+
   const onChangeKeySearch = value => {
     if (value.length == 0) {
       setRows([]);
@@ -195,13 +220,18 @@ const CacheEntries: React.FunctionComponent<any> = (props: {
         isModalOpen={isAddEntryFormOpen}
         closeModal={closeAddEntryFormModal}
       />
+      <DeleteEntry cacheName={props.cacheName}
+                   entryKey={keyToDelete}
+                   isModalOpen={isDeleteEntryModalOpen}
+                   closeModal={closeDeleteEntryModal}/>
       <ClearAllEntries cacheName={props.cacheName}
                        isModalOpen={isClearAllModalOpen}
                        closeModal={closeClearAllEntryModal}/>
       <Table
         aria-label="Entries"
         cells={columns}
         rows={rows}
+        actions={actions}
         className={'entries-table'}
       >
         <TableHeader />

src/app/Caches/DeleteEntry.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import {Button, ButtonVariant, Modal, TextContent, Text} from '@patternfly/react-core';
+import cacheService from '../../services/cacheService';
+import {useApiAlert} from '@app/utils/useApiAlert';
+
+/**
+ * Delete entry modal
+ */
+const DeleteEntry = (props: {
+  cacheName: string;
+  entryKey: string;
+  isModalOpen: boolean;
+  closeModal: () => void;
+}) => {
+  const { addAlert } = useApiAlert();
+
+  const onClickDeleteButton = () => {
+    cacheService.deleteEntry(props.cacheName, props.entryKey)
+      .then(actionResponse =>{
+        props.closeModal();
+        addAlert(actionResponse);
+      });
+  };
+
+  return (
+    <Modal
+      className="pf-m-redhat-font"
+      width={'50%'}
+      isOpen={props.isModalOpen}
+      title={'Delete entry?'}
+      onClose={props.closeModal}
+      isFooterLeftAligned
+      aria-label="Delete entry modal"
+      actions={[
+        <Button
+          key="confirm"
+          variant={ButtonVariant.danger}
+          onClick={onClickDeleteButton}
+        >
+          Delete
+        </Button>,
+        <Button key="cancel" variant="link" onClick={props.closeModal}>
+          Cancel
+        </Button>
+      ]}
+    >
+        <TextContent>
+          <Text>
+            This action will permanently delete the key{' '}
+            <strong>'{props.entryKey}'</strong> from the cache <strong>{props.cacheName}</strong>.
+            <br />
+            You can always recreate the entry after.
+          </Text>
+        </TextContent>
+      </Modal>
+  );
+};
+
+export { DeleteEntry };

src/services/cacheService.ts

@@ -296,6 +296,26 @@ class CacheService {
     );
   }
 
+
+  /**
+   * Delete entry from cache
+   *
+   * @param cacheName, cache name
+   * @param entryKey, entry key
+   */
+  public async deleteEntry(cacheName: string, entryKey: string) :Promise<ActionResponse> {
+    let deleteEntryPromise = utils.restCall(
+      this.endpoint + '/caches/' + cacheName + '/' + entryKey,
+      'DELETE'
+    );
+
+    return this.handleCRUDActionResponse(
+      cacheName,
+      'Entry ' + entryKey + ' has been deleted',
+      deleteEntryPromise
+    );
+  }
+
   /**
    * If the response is ok, the cache has been created
    *