Brijesh619 commented on code in PR #708:
URL: https://github.com/apache/atlas/pull/708#discussion_r3736977488


##########
dashboard/src/views/Administrator/Audits/__tests__/AuditResults.test.tsx:
##########
@@ -795,4 +820,656 @@ describe('AuditResults Component', () => {
       expect(typographies.length).toBeGreaterThan(0);
     });
   });
+
+  // 
─────────────────────────────────────────────────────────────────────────────
+  // TYPE_DEF_DELETE Operation
+  // 
─────────────────────────────────────────────────────────────────────────────
+  describe('TYPE_DEF_DELETE Operation', () => {
+    it('should render results for TYPE_DEF_DELETE operation', () => {
+      const auditData = [
+        {
+          guid: 'audit-del',
+          operation: 'TYPE_DEF_DELETE',
+          params: 'entityDefs',
+          result: JSON.stringify({
+            entityDefs: [{ name: 'DeletedEntity', category: 'entityDefs' }]
+          })
+        }
+      ];
+      render(<AuditResults componentProps={{ auditData }} row={{ original: { 
guid: 'audit-del' } }} />);
+
+      expect(screen.getByText('DeletedEntity')).toBeInTheDocument();
+      expect(screen.getByText(/TYPE_DEF_DELETE/)).toBeInTheDocument();
+    });
+
+    it('should open modal when TYPE_DEF_DELETE entity is clicked', async () => 
{
+      const auditData = [
+        {
+          guid: 'audit-del',
+          operation: 'TYPE_DEF_DELETE',
+          params: 'entityDefs',
+          result: JSON.stringify({
+            entityDefs: [{ name: 'DeletedEntity', category: 'entityDefs' }]
+          })
+        }
+      ];
+      render(<AuditResults componentProps={{ auditData }} row={{ original: { 
guid: 'audit-del' } }} />);
+
+      fireEvent.click(screen.getByText('DeletedEntity'));
+      await waitFor(() => {
+        expect(screen.getByTestId('custom-modal')).toBeInTheDocument();
+      });
+    });
+  });
+
+  // 
─────────────────────────────────────────────────────────────────────────────
+  // PURGE — JSON Summary Format (new structured format)
+  // 
─────────────────────────────────────────────────────────────────────────────
+  describe('PURGE Operations — JSON Summary format', () => {
+    const summaryResult = JSON.stringify({
+      requestedCount: 5,
+      purgedCount: 3,
+      purgedDependenciesCount: 1,
+      failedCount: 1,
+      skippedCount: 0,
+      executionFailed: false,
+      runId: 'run-abc-123'
+    });
+
+    const auditDataWithSummary = [
+      {
+        guid: 'audit-summary',
+        operation: 'PURGE',
+        params: JSON.stringify(['g1', 'g2', 'g3', 'g4', 'g5']),
+        result: summaryResult
+      }
+    ];
+
+    it('should display purgedCount from JSON summary', () => {
+      render(<AuditResults componentProps={{ auditData: auditDataWithSummary 
}} row={{ original: { guid: 'audit-summary' } }} />);
+      // Total Purged = purgedCount(3) + purgedDependenciesCount(1) = 4
+      expect(screen.getByText('4')).toBeInTheDocument();
+    });
+
+    it('should display failedCount from JSON summary', () => {
+      render(<AuditResults componentProps={{ auditData: auditDataWithSummary 
}} row={{ original: { guid: 'audit-summary' } }} />);
+      expect(screen.getByText('Failed')).toBeInTheDocument();
+      expect(screen.getByText('1')).toBeInTheDocument();
+    });
+
+    it('should display skippedCount from JSON summary', () => {
+      render(<AuditResults componentProps={{ auditData: auditDataWithSummary 
}} row={{ original: { guid: 'audit-summary' } }} />);
+      expect(screen.getByText('Skipped')).toBeInTheDocument();
+      expect(screen.getByText('0')).toBeInTheDocument();
+    });
+
+    it('should display Requested count from JSON summary', () => {
+      render(<AuditResults componentProps={{ auditData: auditDataWithSummary 
}} row={{ original: { guid: 'audit-summary' } }} />);
+      expect(screen.getByText('Requested')).toBeInTheDocument();
+      expect(screen.getByText('5')).toBeInTheDocument();
+    });
+
+    it('should show executionFailed alert when failedCount > 0', () => {
+      const failedResult = JSON.stringify({
+        requestedCount: 3, purgedCount: 1, purgedDependenciesCount: 0,
+        failedCount: 2, skippedCount: 0, executionFailed: true, runId: 'test'
+      });
+      const auditData = [{ guid: 'a-fail', operation: 'PURGE', params: '', 
result: failedResult }];
+
+      render(<AuditResults componentProps={{ auditData }} row={{ original: { 
guid: 'a-fail' } }} />);
+
+      
+    });
+
+    it('should NOT show executionFailed alert when failedCount is 0', () => {
+      const okResult = JSON.stringify({
+        requestedCount: 3, purgedCount: 3, purgedDependenciesCount: 0,
+        failedCount: 0, skippedCount: 0, executionFailed: false, runId: 'test'
+      });
+      const auditData = [{ guid: 'a-ok', operation: 'PURGE', params: '', 
result: okResult }];
+
+      render(<AuditResults componentProps={{ auditData }} row={{ original: { 
guid: 'a-ok' } }} />);
+
+      expect(screen.queryByText('Partial success')).not.toBeInTheDocument();
+    });
+
+    it('should show PURGE with JSON array result (not object)', () => {
+      const arrayResult = JSON.stringify(['arr-guid-1', 'arr-guid-2']);
+      const auditData = [{ guid: 'a-arr', operation: 'PURGE', params: '', 
result: arrayResult }];
+
+      render(<AuditResults componentProps={{ auditData }} row={{ original: { 
guid: 'a-arr' } }} />);
+
+      // Open drawer
+      fireEvent.click(screen.getAllByText('PURGED')[0]);
+
+      expect(screen.getByText('arr-guid-1')).toBeInTheDocument();
+      expect(screen.getByText('arr-guid-2')).toBeInTheDocument();
+    });
+
+    it('should handle PURGE with JSON params array', () => {
+      const auditData = [
+        {
+          guid: 'a-params-arr',
+          operation: 'PURGE',
+          params: JSON.stringify(['req-guid-1', 'req-guid-2']),
+          result: '[purged-guid-1]'
+        }
+      ];
+      render(<AuditResults componentProps={{ auditData }} row={{ original: { 
guid: 'a-params-arr' } }} />);
+
+      // The component should render the purge UI — the card label
+      const allPurgedEntities = screen.getAllByText('PURGED');
+      expect(allPurgedEntities.length).toBeGreaterThan(0);
+    });
+  });
+
+  // 
─────────────────────────────────────────────────────────────────────────────
+  // Run ID Display & Copy
+  // 
─────────────────────────────────────────────────────────────────────────────
+  describe('Run ID display', () => {
+    // runId is sourced from row.original.runId first, then summary.runId, 
then auditObj.runId
+    it('should display Run ID when present on row.original', () => {
+      const auditData = [{ guid: 'a-rid', operation: 'PURGE', params: '', 
result: '[guid-1]' }];
+
+      render(
+        <AuditResults
+          componentProps={{ auditData }}
+          row={{ original: { guid: 'a-rid', runId: 'run-row-999' } }}
+        />
+      );
+
+      // Run Id appears in the main card header (may also appear in drawer 
header)
+      const runIdElements = screen.getAllByText(/run-row-999/);
+      expect(runIdElements.length).toBeGreaterThan(0);
+    });
+
+    it('should display Run ID when present in JSON summary result', () => {
+      const resultWithRunId = JSON.stringify({
+        requestedCount: 2, purgedCount: 2, purgedDependenciesCount: 0,
+        failedCount: 0, skippedCount: 0, executionFailed: false, runId: 
'run-summary-888'
+      });
+      const auditData = [{ guid: 'a-rid2', operation: 'PURGE', params: '', 
result: resultWithRunId }];
+
+      render(<AuditResults componentProps={{ auditData }} row={{ original: { 
guid: 'a-rid2', runId: 'run-summary-888' } }} />);
+
+      const runIdElements = screen.getAllByText(/run-summary-888/);
+      expect(runIdElements.length).toBeGreaterThan(0);
+    });
+
+    it('should NOT display Run ID section when runId is N/A', () => {
+      const auditData = [
+        { guid: 'a-no-rid', operation: 'PURGE', params: '', result: '[guid-x]' 
}
+      ];
+      // No runId on row.original, no runId in summary → defaults to 'N/A'
+      render(<AuditResults componentProps={{ auditData }} row={{ original: { 
guid: 'a-no-rid' } }} />);
+
+      expect(screen.queryByText(/Run Id:/)).not.toBeInTheDocument();
+    });
+
+    it('should show Run Id label and value when runId is present on row', () 
=> {
+      const auditData = [{ guid: 'a-copy', operation: 'PURGE', params: '', 
result: '[guid-1]' }];
+
+      render(
+        <AuditResults
+          componentProps={{ auditData }}
+          row={{ original: { guid: 'a-copy', runId: 'copy-test-run' } }}
+        />
+      );
+
+      const runIdElements = screen.getAllByText(/copy-test-run/);
+      expect(runIdElements.length).toBeGreaterThan(0);
+    });
+  });
+
+  // 
─────────────────────────────────────────────────────────────────────────────
+  // Drawer — open, close, search, clear, "Showing X of Y" footer
+  // 
─────────────────────────────────────────────────────────────────────────────
+  describe('Drawer interactions', () => {
+    it('should open drawer when Purged Entities card is clicked', () => {
+      const componentProps = { auditData: mockAuditData };
+      render(<AuditResults componentProps={componentProps} row={{ original: { 
guid: 'audit-3' } }} />);
+
+      fireEvent.click(screen.getAllByText('PURGED')[0]);
+
+      expect(screen.getByTestId('drawer')).toBeInTheDocument();
+    });
+
+    
+
+    it('should show "No matching GUIDs found" when search has no match', () => 
{
+      const componentProps = { auditData: mockAuditData };
+      render(<AuditResults componentProps={componentProps} row={{ original: { 
guid: 'audit-3' } }} />);
+
+      fireEvent.click(screen.getAllByText('PURGED')[0]);
+
+      // Search for something that doesn't match
+      const searchInput = screen.getByPlaceholderText('Search GUIDs...');
+      fireEvent.change(searchInput, { target: { value: 'no-such-guid' } });
+
+      expect(screen.getByText('No matching GUIDs found')).toBeInTheDocument();
+    });
+
+    it('should filter GUIDs by search text', () => {
+      const componentProps = { auditData: mockAuditData };
+      render(<AuditResults componentProps={componentProps} row={{ original: { 
guid: 'audit-3' } }} />);
+
+      fireEvent.click(screen.getAllByText('PURGED')[0]);
+
+      // All 3 GUIDs are initially shown
+      expect(screen.getByText('guid-1')).toBeInTheDocument();
+      expect(screen.getByText('guid-2')).toBeInTheDocument();
+      expect(screen.getByText('guid-3')).toBeInTheDocument();
+
+      // Now search for "guid-1"
+      const searchInput = screen.getByPlaceholderText('Search GUIDs...');
+      fireEvent.change(searchInput, { target: { value: 'guid-1' } });
+
+      expect(screen.getByText('guid-1')).toBeInTheDocument();
+      expect(screen.queryByText('guid-2')).not.toBeInTheDocument();
+      expect(screen.queryByText('guid-3')).not.toBeInTheDocument();
+    });
+
+    it('should clear search when clear button is clicked', () => {
+      const componentProps = { auditData: mockAuditData };
+      render(<AuditResults componentProps={componentProps} row={{ original: { 
guid: 'audit-3' } }} />);
+
+      fireEvent.click(screen.getAllByText('PURGED')[0]);
+
+      const searchInput = screen.getByPlaceholderText('Search GUIDs...');
+
+      // Type into the search to filter down to guid-1
+      fireEvent.change(searchInput, { target: { value: 'guid-1' } });
+      expect(screen.getByText('guid-1')).toBeInTheDocument();
+      expect(screen.queryByText('guid-2')).not.toBeInTheDocument();
+
+      // Clear the search by setting value back to empty (simulating the clear 
✕ button)
+      fireEvent.change(searchInput, { target: { value: '' } });
+
+      // All GUIDs should be visible again
+      expect(screen.getByText('guid-1')).toBeInTheDocument();
+      expect(screen.getByText('guid-2')).toBeInTheDocument();
+      expect(screen.getByText('guid-3')).toBeInTheDocument();
+    });
+
+    
+
+    it('should show "Limit" label in drawer footer', () => {
+      const componentProps = { auditData: mockAuditData };
+      render(<AuditResults componentProps={componentProps} row={{ original: { 
guid: 'audit-3' } }} />);
+
+      fireEvent.click(screen.getAllByText('PURGED')[0]);
+
+      expect(screen.getByText('Limit')).toBeInTheDocument();
+    });
+
+    
+
+    it('should display GUID index numbers in the drawer list', () => {
+      const componentProps = { auditData: mockAuditData };
+      render(<AuditResults componentProps={componentProps} row={{ original: { 
guid: 'audit-3' } }} />);
+
+      fireEvent.click(screen.getAllByText('PURGED')[0]);
+
+      // Should show "1.", "2.", "3."
+      expect(screen.getByText('1.')).toBeInTheDocument();
+      expect(screen.getByText('2.')).toBeInTheDocument();
+      expect(screen.getByText('3.')).toBeInTheDocument();
+    });
+  });
+
+  // 
─────────────────────────────────────────────────────────────────────────────
+  // Drawer — Purge modal on GUID click
+  // 
─────────────────────────────────────────────────────────────────────────────
+  describe('Drawer — Purge entity detail modal', () => {
+    it('should show AuditsTab in modal when a GUID is clicked', async () => {
+      const componentProps = { auditData: mockAuditData };
+      render(<AuditResults componentProps={componentProps} row={{ original: { 
guid: 'audit-3' } }} />);
+
+      fireEvent.click(screen.getAllByText('PURGED')[0]);
+      fireEvent.click(screen.getByText('guid-2'));
+
+      await waitFor(() => {
+        expect(screen.getByTestId('audits-tab')).toBeInTheDocument();
+        expect(screen.getByText('AuditsTab - guid-2')).toBeInTheDocument();
+      });
+    });
+
+    it('should update modal title when different GUID is clicked', async () => 
{
+      const componentProps = { auditData: mockAuditData };
+      render(<AuditResults componentProps={componentProps} row={{ original: { 
guid: 'audit-3' } }} />);
+
+      fireEvent.click(screen.getAllByText('PURGED')[0]);
+      fireEvent.click(screen.getByText('guid-3'));
+
+      await waitFor(() => {
+        expect(screen.getByTestId('modal-title')).toHaveTextContent('Purged 
Entity Details: guid-3');
+      });
+    });
+  });
+
+  // 
─────────────────────────────────────────────────────────────────────────────
+  // PURGE — handleOpenPurgedDrawer guard: totalPurgedCount === 0
+  // 
─────────────────────────────────────────────────────────────────────────────
+  describe('PURGE — empty result, no drawer opens', () => {
+    it('should NOT open drawer when totalPurgedCount is 0', () => {
+      const auditData = [
+        { guid: 'a-zero', operation: 'PURGE', params: '', result: '[]' }
+      ];
+      render(<AuditResults componentProps={{ auditData }} row={{ original: { 
guid: 'a-zero' } }} />);
+
+      // Click the Purged Entities card — should not open a drawer with items
+      fireEvent.click(screen.getAllByText('PURGED')[0]);
+
+      // No GUIDs shown since total is 0
+      expect(screen.queryByText('1.')).not.toBeInTheDocument();
+    });
+  });
+
+  // 
─────────────────────────────────────────────────────────────────────────────
+  // PURGE — Limit input (change page size)
+  // 
─────────────────────────────────────────────────────────────────────────────
+  describe('Drawer — Limit input behaviour', () => {
+    it('should render the limit input with default value of 10', () => {

Review Comment:
   Fixed! I have updated the test description to accurately read should render 
the limit input with default value of 25 so it perfectly matches the new 
default pagination logic.



##########
dashboard/src/views/Administrator/Audits/AuditResults.tsx:
##########
@@ -15,227 +15,730 @@
  * limitations under the License.
  */
 
-import { Grid, Link, List, ListItem, ListItemText, Typography } from 
"@mui/material";
-import { auditAction, category } from "@utils/Enum";
+import { Grid, Link, List, ListItem, ListItemText, Typography, Box, Drawer, 
IconButton, Stack, Tooltip, TextField, InputAdornment, CircularProgress, 
Pagination, PaginationItem, Skeleton } from "@mui/material";
+import KeyboardDoubleArrowLeftIcon from 
"@mui/icons-material/KeyboardDoubleArrowLeft";
+import KeyboardDoubleArrowRightIcon from 
"@mui/icons-material/KeyboardDoubleArrowRight";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import SearchIcon from "@mui/icons-material/Search";
+import { auditAction, category, AuditOperation, PurgeActiveView } from 
"@utils/Enum";
 import { isEmpty, jsonParse } from "@utils/Utils";
+import { useVirtualization } from "@hooks/useVirtualization";
 import CustomModal from "@components/Modal";
 import TypeDefAuditDetailModal from "@components/TypeDefAuditDetailModal";
-import { useState } from "react";
-import { Item } from "@utils/Muiutils";
+import { useRef, useState, useEffect } from "react";
 import AuditsTab from "@views/DetailPage/EntityDetailTabs/AuditsTab";
 import ImportExportAudits from "./ImportExportAudits";
+import { LightTooltip } from "@components/muiComponents";
+import { fetchApi } from "@api/apiMethods/fetchApi";
+import "./AuditResults.scss";
+interface AuditEntry {
+  guid: string;
+  operation: string;
+  params?: string;
+  result?: string;
+  runId?: string;
+  [key: string]: unknown;
+}
 
-const AuditResults = ({ componentProps, row }: any) => {
+interface AuditResultsProps {
+  componentProps?: {
+    auditData?: AuditEntry[];
+  };
+  row: {
+    original: {
+      guid: string;
+      runId?: string;
+      [key: string]: unknown;
+    };
+  };
+}
+
+const AuditResults = ({ componentProps, row }: AuditResultsProps) => {
   const { auditData } = componentProps || {};
   const [openModal, setOpenModal] = useState<boolean>(false);
   const [openPurgeModal, setOpenPurgeModal] = useState<boolean>(false);
-  const [currentResultObj, setCurrentObj] = useState<any>({});
-  const [currentPurgeResultObj, setCurrentPurgeResultObj] = useState<any>("");
+  const [currentResultObj, setCurrentObj] = useState<Record<string, unknown> | 
undefined>();
+  // Stores the guid of the clicked purged entity
+  const [currentPurgeResultObj, setCurrentPurgeResultObj] = useState<string | 
undefined>();
+  const [activePurgeView, setActivePurgeView] = 
useState<PurgeActiveView>(PurgeActiveView.NONE);
+  const [drawerSearchText, setDrawerSearchText] = useState<string>('');
+  const [drawerPage, setDrawerPage] = useState<number>(1);
+  const [drawerPageSize, setDrawerPageSize] = useState<number>(25);
+  const [drawerPageSizeInput, setDrawerPageSizeInput] = useState<string>('25');
+  const [scrollTop, setScrollTop] = useState<number>(0);
+  const [copiedRunId, setCopiedRunId] = useState<boolean>(false);
+  const [purgedApiGuids, setPurgedApiGuids] = useState<string[]>([]);
+  const [loadingPurgedApi, setLoadingPurgedApi] = useState<boolean>(false);
+  const [purgedTotalCount, setPurgedTotalCount] = useState<number>(0);
+  const [summaryData, setSummaryData] = useState<Record<string, unknown> | 
null>(null);
+  const [loadingSummary, setLoadingSummary] = useState<boolean>(false);
+  const drawerScrollTimerRef = useRef<ReturnType<typeof setTimeout> | 
null>(null);
+
+
   const handleCloseModal = () => {
     setOpenModal(false);
   };
   const handleClosePurgeModal = () => {
     setOpenPurgeModal(false);
   };
-  const auditObj = !isEmpty(auditData)
-    ? auditData.find((obj: { guid: string }) => obj.guid == row.original.guid)
-    : {};
 
-  const { operation, params, result } = auditObj;
+  const auditObj: AuditEntry | undefined = !isEmpty(auditData)
+    ? (auditData as AuditEntry[]).find((obj) => obj.guid === row.original.guid)
+    : undefined;
+
+  const operation = auditObj?.operation ?? '';
+  const params = auditObj?.params;
+  const result = auditObj?.result;
+
+  let isPurgeOperation = operation === AuditOperation.PURGE || operation === 
AuditOperation.AUTO_PURGE;
+  const summaryGuid = auditObj?.guid ?? row.original.guid;
+
+  useEffect(() => {
+    if (isPurgeOperation && summaryGuid) {
+      setLoadingSummary(true);
+      fetchApi(`/api/atlas/admin/audit/${summaryGuid}/summary`, {
+        method: "GET",
+        headers: { 'Accept': 'application/json', 'Content-Type': 
'application/json' }
+      })
+        .then(res => {
+          if (res.data && typeof res.data === 'object') {
+            setSummaryData(res.data);
+          }
+        })
+        .catch(err => {
+          console.error("Failed to fetch purge summary", err);
+        })
+        .finally(() => {
+          setLoadingSummary(false);
+        });
+    }
+  }, [isPurgeOperation, summaryGuid]);
+
+  let summary: Record<string, unknown> = summaryData || {};
+  let requestedEntitiesList: string[] = [];
+  let legacyPurgedList: string[] = [];
+
+  if (isPurgeOperation) {
+    if (!summaryData) {
+      try {
+        const parsed = typeof result === "string" ? JSON.parse(result) : 
result;
+        if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+          summary = (parsed as Record<string, unknown>).summary
+            ? (parsed as Record<string, unknown>).summary as Record<string, 
unknown>
+            : parsed as Record<string, unknown>;
+        } else if (Array.isArray(parsed)) {
+          legacyPurgedList = (parsed as unknown[]).map((item) =>
+            typeof item === "string" ? item : (item as { guid?: string }).guid 
|| String(item)
+          );
+        }
+      } catch (_e) {
+        if (typeof result === "string" && !result.startsWith("{")) {
+          legacyPurgedList = result.replace(/^\[|\]$/g, "").split(",").map(s 
=> s.trim()).filter(Boolean);
+        }
+      }
+    } else {
+      if (typeof result === "string" && !result.startsWith("{")) {
+        legacyPurgedList = result.replace(/^\[|\]$/g, "").split(",").map(s => 
s.trim()).filter(Boolean);
+      }
+    }
+
+    if (params) {
+      try {
+        const parsedParams = JSON.parse(params);
+        if (Array.isArray(parsedParams)) {
+          requestedEntitiesList = parsedParams as string[];
+        } else if (typeof params === "string") {
+          requestedEntitiesList = params.replace(/^\[|\]$/g, 
"").split(",").map(s => s.trim()).filter(Boolean);
+        }
+      } catch (_e) {
+        requestedEntitiesList = typeof params === "string"
+          ? params.replace(/^\[|\]$/g, "").split(",").map(s => 
s.trim()).filter(Boolean)
+          : [];
+      }
+    }
+  } else {
+    try {
+      summary = jsonParse(result) as Record<string, unknown>;
+    } catch (_e) {
+      summary = {};
+    }
+  }
+
+  const runId = (row.original.runId as string | undefined)
+    ?? (summary?.runId as string | undefined)
+    ?? (auditObj?.runId as string | undefined)
+    ?? 'N/A';
 
-  const resultObj =
-    (operation == "PURGE" || operation == "AUTO_PURGE")
-      ? result.replace("[", "").replace("]", "").split(",")
-      : jsonParse(result);
+  const isSummaryRow = (runId !== 'N/A') && isPurgeOperation;
+
+  const requestedCount = (summary?.requestedCount as number | undefined) ?? 
requestedEntitiesList.length;
+  const purgedCount = (summary?.purgedCount as number | undefined) ?? 
legacyPurgedList.length;
+  const purgedDependenciesCount = (summary?.purgedDependenciesCount as number 
| undefined) ?? 0;
+  const totalPurgedCount = (purgedCount as number) + (purgedDependenciesCount 
as number);
+  const failedCount = (summary?.failedCount as number | undefined) ?? 0;
+  const failedDependenciesCount = (summary?.failedDependenciesCount as number 
| undefined) ?? 0;
+  const totalFailedCount = failedCount + failedDependenciesCount;
+  const skippedCount = (summary?.skippedCount as number | undefined) ?? 0;
+  const executionFailed = (summary?.executionFailed as boolean | undefined) || 
(totalFailedCount) > 0;
+
+  // Fetching purged entities from an API is disabled for now.
+  // We simply use the raw `result` string as requested.
+  const fetchPurged = () => {
+    // Disabled. The UI will just use the `result` string.
+  };
+
+  // Handle clicking Total Purged card: opens drawer and fetches first page
+  const handleOpenPurgedDrawer = () => {
+    if (totalPurgedCount === 0) return;
+    setPurgedTotalCount(totalPurgedCount);
+    setActivePurgeView(PurgeActiveView.PURGED);
+    setDrawerPage(1);
+    setScrollTop(0);
+    // As requested, Total Purged simply uses the raw `result` object string 
(legacyPurgedList)
+    setPurgedApiGuids(legacyPurgedList);
+    setLoadingPurgedApi(false);
+  };
 
   return (
     <>
-      {operation != "PURGE" &&
-        operation != "AUTO_PURGE" &&
-        operation != "IMPORT" &&
-        operation != "EXPORT" &&
-        !isEmpty(resultObj) ? (
-        <Grid container spacing={2}>
-          {params.split(",").length > 1 ? (
-            <>
-              {params.split(",")?.map((param: { param: string }) => {
-                return (
-                  <Grid item md={4}>
-                    <Item
-                      sx={{
-                        height: "100%",
-                        maxHeight: "300px",
-                        overflow: "auto",
-                      }}
-                    >
-                      <Typography
-                        sx={{ padding: "1rem 0 0 1rem", textAlign: "left" }}
-                      >{`${category[param as any]} ${auditAction[operation]
-                        }`}</Typography>
-
-                      <List className="audit-results-list">
-                        {resultObj[param as any].map(
-                          (obj: { name: string }) => {
-                            const { name } = obj;
-                            return (
-                              <>
-                                <ListItem className="audit-results-list-item">
-                                  <Link
-                                    className="audit-results-entityid"
-                                    component="button"
-                                    variant="body2"
-                                    onClick={() => {
-                                      setOpenModal(true);
-                                      setCurrentObj(obj);
-                                    }}
-                                    title={name}
-                                    sx={{
-                                      display: "inline-block",
-                                      maxWidth: "100%",
-                                      textOverflow: "ellipsis",
-                                      overflow: "hidden",
-                                      whiteSpace: "nowrap",
-                                      textAlign: "left",
-                                      verticalAlign: "bottom"
-                                    }}
-                                  >
-                                    {name}
-                                  </Link>
-                                </ListItem>
-                              </>
-                            );
-                          }
-                        )}
-                      </List>
-                    </Item>
-                  </Grid>
-                );
-              })}
-            </>
-          ) : (
-            <>
-              <Grid item md={4}>
-                <Item
-                  sx={{
-                    height: "100%",
-                    maxHeight: "300px",
-                    overflow: "auto",
-                  }}
-                >
-                  <Typography
-                    sx={{ padding: "1rem 0 0 1rem", textAlign: "left" }}
-                  >{`${category[params as any]} ${auditAction[operation]
-                    }`}</Typography>
-                  <List className="audit-results-list">
-                    {resultObj[params].map((obj: { name: string }) => {
-                      const { name } = obj;
-                      return (
-                        <>
-                          <ListItem className="audit-results-list-item">
+      <TypeDefAuditDetailModal
+        open={openModal}
+        onClose={handleCloseModal}
+        detailObject={currentResultObj ?? null}
+        maxWidth="md"
+      />
+
+      <CustomModal
+        open={openPurgeModal}
+        onClose={handleClosePurgeModal}
+        title={`Purged Entity Details: ${currentPurgeResultObj}`}
+        button1Handler={undefined}
+        button2Handler={undefined}
+        maxWidth="md"
+        footer={false}
+      >
+        <AuditsTab auditResultGuid={currentPurgeResultObj} />
+      </CustomModal>
+
+      {operation === "TYPE_DEF_CREATE" ||
+        operation === "TYPE_DEF_UPDATE" ||
+        operation === "TYPE_DEF_DELETE" ? (
+        <List className="audit-results-list">
+          {summary &&
+            Object.keys(summary).map((key: string) => {
+              const rawItems = summary[key];
+              const items: Array<Record<string, unknown> | string> = 
Array.isArray(rawItems)
+                ? (rawItems as Array<Record<string, unknown> | string>)
+                : [];
+              return (
+                <div key={key}>
+                  <Typography className="audit-list-header">
+                    {`${category[key as keyof typeof category] || key} 
${auditAction[operation as keyof typeof auditAction] || operation}`}
+                  </Typography>
+                  {items.map((obj: Record<string, unknown> | string, idx: 
number) => {
+                    const name = typeof obj === 'object' && obj !== null
+                      ? (obj.name as string) || String(obj)
+                      : String(obj);
+                    return (
+                      <ListItem key={name + idx} 
className="audit-results-list-item">
+                        <ListItemText
+                          primary={
                             <Link
-                              className="audit-results-entityid"
+                              className="audit-results-entityid 
audit-list-link"
                               component="button"
                               variant="body2"
                               onClick={() => {
                                 setOpenModal(true);
-                                setCurrentObj(obj);
+                                setCurrentObj(typeof obj === "object" ? obj : 
{ name: obj });
                               }}
                               title={name}
-                              sx={{
-                                display: "inline-block",
-                                maxWidth: "100%",
-                                textOverflow: "ellipsis",
-                                overflow: "hidden",
-                                whiteSpace: "nowrap",
-                                textAlign: "left",
-                                verticalAlign: "bottom"
-                              }}
                             >
                               {name}
                             </Link>
-                          </ListItem>
-                        </>
-                      );
-                    })}
-                  </List>
-                </Item>
+                          }
+                        />
+                      </ListItem>
+                    );
+                  })}
+                </div>
+              );
+            })}
+        </List>
+      ) : operation === "IMPORT" || operation === "EXPORT" ? (
+        <ImportExportAudits auditObj={auditObj} />
+      ) : !isPurgeOperation ? (
+        <Typography>No Results Found</Typography>
+      ) : null}
+
+      {/* Purge Audit View */}
+      {isPurgeOperation ? (
+        <Box className="purge-audit-view">
+          {loadingSummary && Object.keys(summary).length === 0 && 
legacyPurgedList.length === 0 && !result ? (
+            <Box sx={{ p: 2 }}>
+              <Skeleton variant="text" width="40%" height={30} sx={{ mb: 2 }} 
/>
+              <Grid container spacing={2}>
+                <Grid item xs={6} sm={3}><Skeleton variant="rectangular" 
height={70} sx={{ borderRadius: 1 }} /></Grid>
+                <Grid item xs={6} sm={3}><Skeleton variant="rectangular" 
height={70} sx={{ borderRadius: 1 }} /></Grid>
+                <Grid item xs={6} sm={3}><Skeleton variant="rectangular" 
height={70} sx={{ borderRadius: 1 }} /></Grid>
+                <Grid item xs={6} sm={3}><Skeleton variant="rectangular" 
height={70} sx={{ borderRadius: 1 }} /></Grid>
+              </Grid>
+            </Box>
+          ) : (
+            <Box className="purge-summary-container">
+
+              {/* Run Id Header with Copy Action */}
+              {runId !== 'N/A' && (
+                <Box className="purge-runid-header">
+                  <Typography variant="body2" color="textSecondary" 
className="runid-text">
+                    <strong>Run Id:</strong> {runId}
+                  </Typography>
+                  <Tooltip title={copiedRunId ? "Copied!" : "Copy Run Id"}>
+                    <IconButton
+                      size="small"
+                      onClick={() => {
+                        if (navigator.clipboard) {
+                          navigator.clipboard.writeText(runId);
+                        } else {
+                          const textField = document.createElement('textarea');
+                          textField.innerText = runId;
+                          document.body.appendChild(textField);
+                          textField.select();
+                          document.execCommand('copy');
+                          textField.remove();
+                        }
+                        setCopiedRunId(true);
+                        setTimeout(() => setCopiedRunId(false), 2000);
+                      }}
+                      className="purge-runid-copy"
+                    >
+                      <ContentCopyIcon className={`copy-icon ${copiedRunId ? 
"copied" : ""}`} />
+                    </IconButton>
+                  </Tooltip>
+                </Box>
+              )}
+
+              {/* 4 Cards Grid: Requested, Total Purged, Failed (Display 
Only), Skipped (Display Only) */}
+              <Grid container spacing={2}>
+                {/* 1. Clickable Requested Card */}
+                {isSummaryRow && (
+                  <Grid item xs={6} sm={3}>
+                    <Box
+                      onClick={() => {
+                        setActivePurgeView(PurgeActiveView.REQUESTED);
+                        setDrawerPage(1);
+                        setScrollTop(0);
+                      }}
+                      className="purge-card purge-card-requested"
+                    >
+                      <Typography variant="caption" color="primary.main" 
display="block" className="card-title">
+                        Requested
+                      </Typography>
+                      <Typography variant="h5" color="primary.main" 
className="card-count">
+                        {requestedCount}
+                      </Typography>
+                    </Box>
+                  </Grid>
+                )}
+
+                {/* 2. Clickable Total Purged Card */}
+                <Grid item xs={isSummaryRow ? 6 : 12} sm={isSummaryRow ? 3 : 
4}>
+                  <Box
+                    onClick={handleOpenPurgedDrawer}
+                    className={`purge-card purge-card-purged 
${totalPurgedCount > 0 ? "clickable" : ""}`}
+                  >
+                    <Typography variant="caption" color="success.main" 
display="block" className="card-title">
+                      PURGED
+                    </Typography>
+                    <Typography variant="h5" color="success.main" 
className="card-count">
+                      {totalPurgedCount}
+                    </Typography>
+                  </Box>
+                </Grid>
+
+                {/* 3 & 4. Display-Only Failed and Skipped Cards */}
+                {isSummaryRow && (
+                  <>
+                    <Grid item xs={6} sm={3}>
+                      <LightTooltip
+                        title={
+                          totalFailedCount > 0 || executionFailed
+                            ? "Some entities failed to purge. Please check 
${atlas.log.dir}/purgefailure.log for details."
+                            : "No failed entities during this purge operation."
+                        }
+                        arrow
+                        placement="top"
+                      >
+                        <Box
+                          className={`purge-card ${totalFailedCount > 0 ? 
"purge-card-failed" : "purge-card-failed-empty"}`}
+                        >
+                          <Typography variant="caption" 
color={totalFailedCount > 0 ? "error.main" : "textSecondary"} display="block" 
className="card-title">
+                            Failed
+                          </Typography>
+                          <Typography variant="h5" color={totalFailedCount > 0 
? "error.main" : "textPrimary"} className="card-count">
+                            {totalFailedCount}
+                          </Typography>
+                        </Box>
+                      </LightTooltip>
+                    </Grid>
+
+                    {/* 4. Display-Only Skipped Card */}
+                    <Grid item xs={6} sm={3}>
+                      <LightTooltip
+                        title={
+                          skippedCount > 0 || executionFailed
+                            ? "Some entities were skipped during purge. Please 
check ${atlas.log.dir}/purgefailure.log for details."
+                            : "No skipped entities during this purge 
operation."
+                        }
+                        arrow
+                        placement="top"
+                      >
+                        <Box
+                          className={`purge-card ${skippedCount > 0 ? 
"purge-card-skipped" : "purge-card-skipped-empty"}`}
+                        >
+                          <Typography variant="caption" color={skippedCount > 
0 ? "warning.main" : "textSecondary"} display="block" className="card-title">
+                            Skipped
+                          </Typography>
+                          <Typography variant="h5" color={skippedCount > 0 ? 
"warning.main" : "textPrimary"} className="card-count">
+                            {skippedCount}
+                          </Typography>
+                        </Box>
+                      </LightTooltip>
+                    </Grid>
+                  </>
+                )}
               </Grid>
-            </>
+            </Box>
           )}
-        </Grid>
-      ) : (
-        operation != "PURGE" &&
-        operation != "AUTO_PURGE" &&
-        operation != "IMPORT" &&
-        operation != "EXPORT" && <Typography>No Results Found</Typography>
-      )}
-
-      {(operation == "PURGE" || operation == "AUTO_PURGE") && 
!isEmpty(resultObj) ? (
-        <>
-          <Typography>{`${category[operation]}`}</Typography>
-          <List className="audit-results-list">
-            {resultObj.map((obj: string) => {
+
+          {/* Right Side Drawer — server-side pagination for Purged, 
client-side for Requested */}
+          <PurgeEntitiesDrawer
+            activePurgeView={activePurgeView}
+            setActivePurgeView={setActivePurgeView}
+            isSummaryRow={isSummaryRow}
+            requestedEntitiesList={requestedEntitiesList}
+            purgedApiGuids={purgedApiGuids}
+            drawerSearchText={drawerSearchText}
+            setDrawerSearchText={setDrawerSearchText}
+            drawerPage={drawerPage}
+            setDrawerPage={setDrawerPage}
+            drawerPageSize={drawerPageSize}
+            setDrawerPageSize={setDrawerPageSize}
+            scrollTop={scrollTop}
+            setScrollTop={setScrollTop}
+            purgedTotalCount={purgedTotalCount}
+            drawerScrollTimerRef={drawerScrollTimerRef}
+            loadingPurgedApi={loadingPurgedApi}
+            fetchPurged={fetchPurged}
+            runId={runId}
+            copiedRunId={copiedRunId}
+            setCopiedRunId={setCopiedRunId}
+            setOpenPurgeModal={setOpenPurgeModal}
+            setCurrentPurgeResultObj={setCurrentPurgeResultObj}
+            drawerPageSizeInput={drawerPageSizeInput}
+            setDrawerPageSizeInput={setDrawerPageSizeInput}
+          />
+        </Box>
+      ) : null}
+    </>
+  );
+};
+
+
+interface PurgeEntitiesDrawerProps {
+  activePurgeView: PurgeActiveView;
+  setActivePurgeView: (view: PurgeActiveView) => void;
+  isSummaryRow: boolean;
+requestedEntitiesList: string[];
+  purgedApiGuids: string[];
+  drawerSearchText: string;
+  setDrawerSearchText: (text: string) => void;
+  drawerPage: number;
+  setDrawerPage: React.Dispatch<React.SetStateAction<number>>;
+  drawerPageSize: number;
+  setDrawerPageSize: React.Dispatch<React.SetStateAction<number>>;
+  scrollTop: number;
+  setScrollTop: React.Dispatch<React.SetStateAction<number>>;
+  purgedTotalCount: number;
+  drawerScrollTimerRef: React.MutableRefObject<ReturnType<typeof setTimeout> | 
null>;

Review Comment:
   Removed purgedTotalCount, drawerScrollTimerRef, and all associated unused 
props from both the main component state and the drawer interface since they 
were no longer needed



##########
dashboard/src/views/Administrator/Audits/AuditResults.tsx:
##########
@@ -15,227 +15,730 @@
  * limitations under the License.
  */
 
-import { Grid, Link, List, ListItem, ListItemText, Typography } from 
"@mui/material";
-import { auditAction, category } from "@utils/Enum";
+import { Grid, Link, List, ListItem, ListItemText, Typography, Box, Drawer, 
IconButton, Stack, Tooltip, TextField, InputAdornment, CircularProgress, 
Pagination, PaginationItem, Skeleton } from "@mui/material";
+import KeyboardDoubleArrowLeftIcon from 
"@mui/icons-material/KeyboardDoubleArrowLeft";
+import KeyboardDoubleArrowRightIcon from 
"@mui/icons-material/KeyboardDoubleArrowRight";
+import ContentCopyIcon from "@mui/icons-material/ContentCopy";
+import SearchIcon from "@mui/icons-material/Search";
+import { auditAction, category, AuditOperation, PurgeActiveView } from 
"@utils/Enum";
 import { isEmpty, jsonParse } from "@utils/Utils";
+import { useVirtualization } from "@hooks/useVirtualization";
 import CustomModal from "@components/Modal";
 import TypeDefAuditDetailModal from "@components/TypeDefAuditDetailModal";
-import { useState } from "react";
-import { Item } from "@utils/Muiutils";
+import { useRef, useState, useEffect } from "react";
 import AuditsTab from "@views/DetailPage/EntityDetailTabs/AuditsTab";
 import ImportExportAudits from "./ImportExportAudits";
+import { LightTooltip } from "@components/muiComponents";
+import { fetchApi } from "@api/apiMethods/fetchApi";
+import "./AuditResults.scss";
+interface AuditEntry {
+  guid: string;
+  operation: string;
+  params?: string;
+  result?: string;
+  runId?: string;
+  [key: string]: unknown;
+}
 
-const AuditResults = ({ componentProps, row }: any) => {
+interface AuditResultsProps {
+  componentProps?: {
+    auditData?: AuditEntry[];
+  };
+  row: {
+    original: {
+      guid: string;
+      runId?: string;
+      [key: string]: unknown;
+    };
+  };
+}
+
+const AuditResults = ({ componentProps, row }: AuditResultsProps) => {
   const { auditData } = componentProps || {};
   const [openModal, setOpenModal] = useState<boolean>(false);
   const [openPurgeModal, setOpenPurgeModal] = useState<boolean>(false);
-  const [currentResultObj, setCurrentObj] = useState<any>({});
-  const [currentPurgeResultObj, setCurrentPurgeResultObj] = useState<any>("");
+  const [currentResultObj, setCurrentObj] = useState<Record<string, unknown> | 
undefined>();
+  // Stores the guid of the clicked purged entity
+  const [currentPurgeResultObj, setCurrentPurgeResultObj] = useState<string | 
undefined>();
+  const [activePurgeView, setActivePurgeView] = 
useState<PurgeActiveView>(PurgeActiveView.NONE);
+  const [drawerSearchText, setDrawerSearchText] = useState<string>('');
+  const [drawerPage, setDrawerPage] = useState<number>(1);
+  const [drawerPageSize, setDrawerPageSize] = useState<number>(25);
+  const [drawerPageSizeInput, setDrawerPageSizeInput] = useState<string>('25');
+  const [scrollTop, setScrollTop] = useState<number>(0);
+  const [copiedRunId, setCopiedRunId] = useState<boolean>(false);
+  const [purgedApiGuids, setPurgedApiGuids] = useState<string[]>([]);
+  const [loadingPurgedApi, setLoadingPurgedApi] = useState<boolean>(false);
+  const [purgedTotalCount, setPurgedTotalCount] = useState<number>(0);
+  const [summaryData, setSummaryData] = useState<Record<string, unknown> | 
null>(null);
+  const [loadingSummary, setLoadingSummary] = useState<boolean>(false);
+  const drawerScrollTimerRef = useRef<ReturnType<typeof setTimeout> | 
null>(null);
+
+
   const handleCloseModal = () => {
     setOpenModal(false);
   };
   const handleClosePurgeModal = () => {
     setOpenPurgeModal(false);
   };
-  const auditObj = !isEmpty(auditData)
-    ? auditData.find((obj: { guid: string }) => obj.guid == row.original.guid)
-    : {};
 
-  const { operation, params, result } = auditObj;
+  const auditObj: AuditEntry | undefined = !isEmpty(auditData)
+    ? (auditData as AuditEntry[]).find((obj) => obj.guid === row.original.guid)
+    : undefined;
+
+  const operation = auditObj?.operation ?? '';
+  const params = auditObj?.params;
+  const result = auditObj?.result;
+
+  let isPurgeOperation = operation === AuditOperation.PURGE || operation === 
AuditOperation.AUTO_PURGE;
+  const summaryGuid = auditObj?.guid ?? row.original.guid;
+
+  useEffect(() => {
+    if (isPurgeOperation && summaryGuid) {
+      setLoadingSummary(true);
+      fetchApi(`/api/atlas/admin/audit/${summaryGuid}/summary`, {
+        method: "GET",
+        headers: { 'Accept': 'application/json', 'Content-Type': 
'application/json' }
+      })
+        .then(res => {
+          if (res.data && typeof res.data === 'object') {
+            setSummaryData(res.data);
+          }
+        })
+        .catch(err => {
+          console.error("Failed to fetch purge summary", err);
+        })
+        .finally(() => {
+          setLoadingSummary(false);
+        });
+    }
+  }, [isPurgeOperation, summaryGuid]);
+
+  let summary: Record<string, unknown> = summaryData || {};
+  let requestedEntitiesList: string[] = [];
+  let legacyPurgedList: string[] = [];
+
+  if (isPurgeOperation) {
+    if (!summaryData) {
+      try {
+        const parsed = typeof result === "string" ? JSON.parse(result) : 
result;
+        if (parsed && typeof parsed === "object" && !Array.isArray(parsed)) {
+          summary = (parsed as Record<string, unknown>).summary
+            ? (parsed as Record<string, unknown>).summary as Record<string, 
unknown>
+            : parsed as Record<string, unknown>;
+        } else if (Array.isArray(parsed)) {
+          legacyPurgedList = (parsed as unknown[]).map((item) =>
+            typeof item === "string" ? item : (item as { guid?: string }).guid 
|| String(item)
+          );
+        }
+      } catch (_e) {
+        if (typeof result === "string" && !result.startsWith("{")) {
+          legacyPurgedList = result.replace(/^\[|\]$/g, "").split(",").map(s 
=> s.trim()).filter(Boolean);
+        }
+      }
+    } else {
+      if (typeof result === "string" && !result.startsWith("{")) {
+        legacyPurgedList = result.replace(/^\[|\]$/g, "").split(",").map(s => 
s.trim()).filter(Boolean);
+      }
+    }
+
+    if (params) {
+      try {
+        const parsedParams = JSON.parse(params);
+        if (Array.isArray(parsedParams)) {
+          requestedEntitiesList = parsedParams as string[];
+        } else if (typeof params === "string") {
+          requestedEntitiesList = params.replace(/^\[|\]$/g, 
"").split(",").map(s => s.trim()).filter(Boolean);
+        }
+      } catch (_e) {
+        requestedEntitiesList = typeof params === "string"
+          ? params.replace(/^\[|\]$/g, "").split(",").map(s => 
s.trim()).filter(Boolean)
+          : [];
+      }
+    }
+  } else {
+    try {
+      summary = jsonParse(result) as Record<string, unknown>;
+    } catch (_e) {
+      summary = {};
+    }
+  }
+
+  const runId = (row.original.runId as string | undefined)
+    ?? (summary?.runId as string | undefined)
+    ?? (auditObj?.runId as string | undefined)
+    ?? 'N/A';
 
-  const resultObj =
-    (operation == "PURGE" || operation == "AUTO_PURGE")
-      ? result.replace("[", "").replace("]", "").split(",")
-      : jsonParse(result);
+  const isSummaryRow = (runId !== 'N/A') && isPurgeOperation;
+
+  const requestedCount = (summary?.requestedCount as number | undefined) ?? 
requestedEntitiesList.length;
+  const purgedCount = (summary?.purgedCount as number | undefined) ?? 
legacyPurgedList.length;
+  const purgedDependenciesCount = (summary?.purgedDependenciesCount as number 
| undefined) ?? 0;
+  const totalPurgedCount = (purgedCount as number) + (purgedDependenciesCount 
as number);
+  const failedCount = (summary?.failedCount as number | undefined) ?? 0;
+  const failedDependenciesCount = (summary?.failedDependenciesCount as number 
| undefined) ?? 0;
+  const totalFailedCount = failedCount + failedDependenciesCount;
+  const skippedCount = (summary?.skippedCount as number | undefined) ?? 0;
+  const executionFailed = (summary?.executionFailed as boolean | undefined) || 
(totalFailedCount) > 0;
+
+  // Fetching purged entities from an API is disabled for now.
+  // We simply use the raw `result` string as requested.
+  const fetchPurged = () => {
+    // Disabled. The UI will just use the `result` string.
+  };
+
+  // Handle clicking Total Purged card: opens drawer and fetches first page
+  const handleOpenPurgedDrawer = () => {
+    if (totalPurgedCount === 0) return;
+    setPurgedTotalCount(totalPurgedCount);
+    setActivePurgeView(PurgeActiveView.PURGED);
+    setDrawerPage(1);
+    setScrollTop(0);
+    // As requested, Total Purged simply uses the raw `result` object string 
(legacyPurgedList)
+    setPurgedApiGuids(legacyPurgedList);
+    setLoadingPurgedApi(false);
+  };
 
   return (
     <>
-      {operation != "PURGE" &&
-        operation != "AUTO_PURGE" &&
-        operation != "IMPORT" &&
-        operation != "EXPORT" &&
-        !isEmpty(resultObj) ? (
-        <Grid container spacing={2}>
-          {params.split(",").length > 1 ? (
-            <>
-              {params.split(",")?.map((param: { param: string }) => {
-                return (
-                  <Grid item md={4}>
-                    <Item
-                      sx={{
-                        height: "100%",
-                        maxHeight: "300px",
-                        overflow: "auto",
-                      }}
-                    >
-                      <Typography
-                        sx={{ padding: "1rem 0 0 1rem", textAlign: "left" }}
-                      >{`${category[param as any]} ${auditAction[operation]
-                        }`}</Typography>
-
-                      <List className="audit-results-list">
-                        {resultObj[param as any].map(
-                          (obj: { name: string }) => {
-                            const { name } = obj;
-                            return (
-                              <>
-                                <ListItem className="audit-results-list-item">
-                                  <Link
-                                    className="audit-results-entityid"
-                                    component="button"
-                                    variant="body2"
-                                    onClick={() => {
-                                      setOpenModal(true);
-                                      setCurrentObj(obj);
-                                    }}
-                                    title={name}
-                                    sx={{
-                                      display: "inline-block",
-                                      maxWidth: "100%",
-                                      textOverflow: "ellipsis",
-                                      overflow: "hidden",
-                                      whiteSpace: "nowrap",
-                                      textAlign: "left",
-                                      verticalAlign: "bottom"
-                                    }}
-                                  >
-                                    {name}
-                                  </Link>
-                                </ListItem>
-                              </>
-                            );
-                          }
-                        )}
-                      </List>
-                    </Item>
-                  </Grid>
-                );
-              })}
-            </>
-          ) : (
-            <>
-              <Grid item md={4}>
-                <Item
-                  sx={{
-                    height: "100%",
-                    maxHeight: "300px",
-                    overflow: "auto",
-                  }}
-                >
-                  <Typography
-                    sx={{ padding: "1rem 0 0 1rem", textAlign: "left" }}
-                  >{`${category[params as any]} ${auditAction[operation]
-                    }`}</Typography>
-                  <List className="audit-results-list">
-                    {resultObj[params].map((obj: { name: string }) => {
-                      const { name } = obj;
-                      return (
-                        <>
-                          <ListItem className="audit-results-list-item">
+      <TypeDefAuditDetailModal
+        open={openModal}
+        onClose={handleCloseModal}
+        detailObject={currentResultObj ?? null}
+        maxWidth="md"
+      />
+
+      <CustomModal
+        open={openPurgeModal}
+        onClose={handleClosePurgeModal}
+        title={`Purged Entity Details: ${currentPurgeResultObj}`}
+        button1Handler={undefined}
+        button2Handler={undefined}
+        maxWidth="md"
+        footer={false}
+      >
+        <AuditsTab auditResultGuid={currentPurgeResultObj} />
+      </CustomModal>
+
+      {operation === "TYPE_DEF_CREATE" ||
+        operation === "TYPE_DEF_UPDATE" ||
+        operation === "TYPE_DEF_DELETE" ? (
+        <List className="audit-results-list">
+          {summary &&
+            Object.keys(summary).map((key: string) => {
+              const rawItems = summary[key];
+              const items: Array<Record<string, unknown> | string> = 
Array.isArray(rawItems)
+                ? (rawItems as Array<Record<string, unknown> | string>)
+                : [];
+              return (
+                <div key={key}>
+                  <Typography className="audit-list-header">
+                    {`${category[key as keyof typeof category] || key} 
${auditAction[operation as keyof typeof auditAction] || operation}`}
+                  </Typography>
+                  {items.map((obj: Record<string, unknown> | string, idx: 
number) => {
+                    const name = typeof obj === 'object' && obj !== null
+                      ? (obj.name as string) || String(obj)
+                      : String(obj);
+                    return (
+                      <ListItem key={name + idx} 
className="audit-results-list-item">
+                        <ListItemText
+                          primary={
                             <Link
-                              className="audit-results-entityid"
+                              className="audit-results-entityid 
audit-list-link"
                               component="button"
                               variant="body2"
                               onClick={() => {
                                 setOpenModal(true);
-                                setCurrentObj(obj);
+                                setCurrentObj(typeof obj === "object" ? obj : 
{ name: obj });
                               }}
                               title={name}
-                              sx={{
-                                display: "inline-block",
-                                maxWidth: "100%",
-                                textOverflow: "ellipsis",
-                                overflow: "hidden",
-                                whiteSpace: "nowrap",
-                                textAlign: "left",
-                                verticalAlign: "bottom"
-                              }}
                             >
                               {name}
                             </Link>
-                          </ListItem>
-                        </>
-                      );
-                    })}
-                  </List>
-                </Item>
+                          }
+                        />
+                      </ListItem>
+                    );
+                  })}
+                </div>
+              );
+            })}
+        </List>
+      ) : operation === "IMPORT" || operation === "EXPORT" ? (
+        <ImportExportAudits auditObj={auditObj} />
+      ) : !isPurgeOperation ? (
+        <Typography>No Results Found</Typography>
+      ) : null}
+
+      {/* Purge Audit View */}
+      {isPurgeOperation ? (
+        <Box className="purge-audit-view">
+          {loadingSummary && Object.keys(summary).length === 0 && 
legacyPurgedList.length === 0 && !result ? (
+            <Box sx={{ p: 2 }}>
+              <Skeleton variant="text" width="40%" height={30} sx={{ mb: 2 }} 
/>
+              <Grid container spacing={2}>
+                <Grid item xs={6} sm={3}><Skeleton variant="rectangular" 
height={70} sx={{ borderRadius: 1 }} /></Grid>
+                <Grid item xs={6} sm={3}><Skeleton variant="rectangular" 
height={70} sx={{ borderRadius: 1 }} /></Grid>
+                <Grid item xs={6} sm={3}><Skeleton variant="rectangular" 
height={70} sx={{ borderRadius: 1 }} /></Grid>
+                <Grid item xs={6} sm={3}><Skeleton variant="rectangular" 
height={70} sx={{ borderRadius: 1 }} /></Grid>
+              </Grid>
+            </Box>
+          ) : (
+            <Box className="purge-summary-container">
+
+              {/* Run Id Header with Copy Action */}
+              {runId !== 'N/A' && (
+                <Box className="purge-runid-header">
+                  <Typography variant="body2" color="textSecondary" 
className="runid-text">
+                    <strong>Run Id:</strong> {runId}
+                  </Typography>
+                  <Tooltip title={copiedRunId ? "Copied!" : "Copy Run Id"}>
+                    <IconButton
+                      size="small"
+                      onClick={() => {
+                        if (navigator.clipboard) {
+                          navigator.clipboard.writeText(runId);
+                        } else {
+                          const textField = document.createElement('textarea');
+                          textField.innerText = runId;
+                          document.body.appendChild(textField);
+                          textField.select();
+                          document.execCommand('copy');
+                          textField.remove();
+                        }
+                        setCopiedRunId(true);
+                        setTimeout(() => setCopiedRunId(false), 2000);
+                      }}
+                      className="purge-runid-copy"
+                    >
+                      <ContentCopyIcon className={`copy-icon ${copiedRunId ? 
"copied" : ""}`} />
+                    </IconButton>
+                  </Tooltip>
+                </Box>
+              )}
+
+              {/* 4 Cards Grid: Requested, Total Purged, Failed (Display 
Only), Skipped (Display Only) */}
+              <Grid container spacing={2}>
+                {/* 1. Clickable Requested Card */}
+                {isSummaryRow && (
+                  <Grid item xs={6} sm={3}>
+                    <Box
+                      onClick={() => {
+                        setActivePurgeView(PurgeActiveView.REQUESTED);
+                        setDrawerPage(1);
+                        setScrollTop(0);
+                      }}
+                      className="purge-card purge-card-requested"
+                    >
+                      <Typography variant="caption" color="primary.main" 
display="block" className="card-title">
+                        Requested
+                      </Typography>
+                      <Typography variant="h5" color="primary.main" 
className="card-count">
+                        {requestedCount}
+                      </Typography>
+                    </Box>
+                  </Grid>
+                )}
+
+                {/* 2. Clickable Total Purged Card */}
+                <Grid item xs={isSummaryRow ? 6 : 12} sm={isSummaryRow ? 3 : 
4}>
+                  <Box
+                    onClick={handleOpenPurgedDrawer}
+                    className={`purge-card purge-card-purged 
${totalPurgedCount > 0 ? "clickable" : ""}`}
+                  >
+                    <Typography variant="caption" color="success.main" 
display="block" className="card-title">
+                      PURGED
+                    </Typography>
+                    <Typography variant="h5" color="success.main" 
className="card-count">
+                      {totalPurgedCount}
+                    </Typography>
+                  </Box>
+                </Grid>
+
+                {/* 3 & 4. Display-Only Failed and Skipped Cards */}
+                {isSummaryRow && (
+                  <>
+                    <Grid item xs={6} sm={3}>
+                      <LightTooltip
+                        title={
+                          totalFailedCount > 0 || executionFailed
+                            ? "Some entities failed to purge. Please check 
${atlas.log.dir}/purgefailure.log for details."
+                            : "No failed entities during this purge operation."
+                        }
+                        arrow
+                        placement="top"
+                      >
+                        <Box
+                          className={`purge-card ${totalFailedCount > 0 ? 
"purge-card-failed" : "purge-card-failed-empty"}`}
+                        >
+                          <Typography variant="caption" 
color={totalFailedCount > 0 ? "error.main" : "textSecondary"} display="block" 
className="card-title">
+                            Failed
+                          </Typography>
+                          <Typography variant="h5" color={totalFailedCount > 0 
? "error.main" : "textPrimary"} className="card-count">
+                            {totalFailedCount}
+                          </Typography>
+                        </Box>
+                      </LightTooltip>
+                    </Grid>
+
+                    {/* 4. Display-Only Skipped Card */}
+                    <Grid item xs={6} sm={3}>
+                      <LightTooltip
+                        title={
+                          skippedCount > 0 || executionFailed
+                            ? "Some entities were skipped during purge. Please 
check ${atlas.log.dir}/purgefailure.log for details."
+                            : "No skipped entities during this purge 
operation."
+                        }
+                        arrow
+                        placement="top"
+                      >
+                        <Box
+                          className={`purge-card ${skippedCount > 0 ? 
"purge-card-skipped" : "purge-card-skipped-empty"}`}
+                        >
+                          <Typography variant="caption" color={skippedCount > 
0 ? "warning.main" : "textSecondary"} display="block" className="card-title">
+                            Skipped
+                          </Typography>
+                          <Typography variant="h5" color={skippedCount > 0 ? 
"warning.main" : "textPrimary"} className="card-count">
+                            {skippedCount}
+                          </Typography>
+                        </Box>
+                      </LightTooltip>
+                    </Grid>
+                  </>
+                )}
               </Grid>
-            </>
+            </Box>
           )}
-        </Grid>
-      ) : (
-        operation != "PURGE" &&
-        operation != "AUTO_PURGE" &&
-        operation != "IMPORT" &&
-        operation != "EXPORT" && <Typography>No Results Found</Typography>
-      )}
-
-      {(operation == "PURGE" || operation == "AUTO_PURGE") && 
!isEmpty(resultObj) ? (
-        <>
-          <Typography>{`${category[operation]}`}</Typography>
-          <List className="audit-results-list">
-            {resultObj.map((obj: string) => {
+
+          {/* Right Side Drawer — server-side pagination for Purged, 
client-side for Requested */}
+          <PurgeEntitiesDrawer
+            activePurgeView={activePurgeView}
+            setActivePurgeView={setActivePurgeView}
+            isSummaryRow={isSummaryRow}
+            requestedEntitiesList={requestedEntitiesList}
+            purgedApiGuids={purgedApiGuids}
+            drawerSearchText={drawerSearchText}
+            setDrawerSearchText={setDrawerSearchText}
+            drawerPage={drawerPage}
+            setDrawerPage={setDrawerPage}
+            drawerPageSize={drawerPageSize}
+            setDrawerPageSize={setDrawerPageSize}
+            scrollTop={scrollTop}
+            setScrollTop={setScrollTop}
+            purgedTotalCount={purgedTotalCount}

Review Comment:
   Removed purgedTotalCount from the props being passed here, and deleted the 
state variable entirely since it's no longer used or destructured in the drawer



-- 
This is an automated message from the Apache Git Service.
To respond to the message, please log on to GitHub and use the
URL above to go to the specific comment.

To unsubscribe, e-mail: [email protected]

For queries about this service, please contact Infrastructure at:
[email protected]

Reply via email to