Skip to main content

Overview

The Audit Log Viewer can be used to search, view, and verify tamperproofing of all logs stored by the Secure Audit Log service. It allows users to perform searches, navigate through pages of results, and interact with the audit log data.

An application using the Pangea Audit Service may also require that the audit logs are presented in the end application, because of this we made the log viewer React component that Pangea uses within its Console available as an npm package, such that it could be embed directly into an app.

The AuditLogViewer component is a React component built using the Material-UI (MUI) component library. MUI was used because it is the same component used within the Pangea Console.

Pangea's Secure Audit Log​

The Secure Audit Log is a critical component of any system that requires accountability and transparency by providing an accurate and secure record of all system events. To learn more about integrating, configuring, and using Pangea’s Secure Audit Log Service, please take a look at our Secure Audit Log Documentation.

Demo​

This is an example demo rendering of the AuditLogViewer component. This demo is not connected to any Secure Audit Log APIs. To see the component in action check out it's usage from within the Pangea Console.

Rows per page:

Basic Usage​

import React from "react";
import {
  Audit,
  AuditLogViewerProps,
  AuditLogViewer,
} from "@pangeacyber/react-mui-audit-log-viewer";

const MyComponent: React.FC = () => {
  const handleSearch = async (body: Audit.SearchRequest) => {
    // Perform search logic here
    const response = await api.searchAuditLogs(body);
    return response;
  };

  const handlePageChange = async (body: Audit.ResultRequest) => {
    // Handle page change logic here
    const response = await api.getAuditLogResults(body);
    return response;
  };

  return (
    <AuditLogViewer
      initialQuery="message:testing"
      onSearch={handleSearch}
      onPageChange={handlePageChange}
    />
  );
};

Format Preserving Encryption (FPE) Support​

To enable FPE highlighting set the highlightRedaction FPE option to true

<AuditLogViewer
  fpeOptions={{
    highlightRedaction: true,
  }}
/>