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.

If your application uses the Pangea Audit Service and needs to present logs within an end application, this viewer is for you. We provide the same component used within the Pangea Console as an npm package so it can be embedded directly into your React app.

The AuditLogViewer component is built with Material-UI, consistent with the styling in the Pangea Console.

GitHub Repository & Local Storybook​

All source code for this component is available on GitHub. There, you can also run a local Storybook environment to explore live examples of the component in various configurations—such as verifying tamperproof logs, customizing the schema, or applying themed styling.

Pangea's Secure Audit Log​

To learn more about integrating, configuring, and using Pangea's Secure Audit Log Service, see our Secure Audit Log Documentation.

Demo​

Below is a quick demo rendering of the AuditLogViewer component. This demo is not connected to any Secure Audit Log APIs. For a real-world demonstration, see how the component is used within the Pangea Console.

Rows per page:

Basic Usage​

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

const MyComponent: React.FC = () => {
  // IMPORTANT: 'api.searchAuditLogs' below is expected to call your *server* endpoint,
  // which then contacts Pangea. Avoid embedding your Pangea service token directly in the client.

  const handleSearch = async (body: Audit.SearchRequest) => {
    // POST 'body' to your server's /search proxy, not to Pangea directly
    const response = await api.searchAuditLogs(body);
    return response;
  };

  const handlePageChange = async (body: Audit.ResultRequest) => {
    // Similarly, call your server's /results proxy
    const response = await api.getAuditLogResults(body);
    return response;
  };

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

Security Note: You should not expose your Pangea service token in client-side code. Always route calls through your backend for proper token security.

Advanced Examples​

Below are some short code snippets illustrating common configurations. For fully interactive demos, refer to the local Storybook in our GitHub repo.

Using initialQuery and filters​

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

const ExampleWithFilters = () => {
  // For 'filters', we can specify different range types (relative, between, etc.)
  return (
    <AuditLogViewer
      initialQuery="actor:michael.scott"
      filters={{
        range: {
          type: "relative",
          since: "24hour", // logs from the last 24 hours
        },
      }}
      onSearch={async (body) => {
        // your server's /search endpoint
      }}
      onPageChange={async (body) => {
        // your server's /results endpoint
      }}
    />
  );
};

In this example, logs will be filtered to show only those matching the actor "michael.scott" within the last 24 hours.

Adding the onDownload callback​

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

const ExampleWithDownload = () => {
  return (
    <AuditLogViewer
      onSearch={async (body) => {
        /* ... */
      }}
      onPageChange={async (body) => {
        /* ... */
      }}
      onDownload={async (body) => {
        // This function calls your server's /download_results endpoint
        // and returns a pre-signed URL or similar
        const response = await api.downloadAuditLogs(body);
        return response;
      }}
    />
  );
};

When onDownload is provided, a “Download” button appears, allowing users to export results.

Enabling Verification with verificationOptions​

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

const ExampleWithVerification = () => {
  return (
    <AuditLogViewer
      onSearch={async (body) => {
        /* ... */
      }}
      onPageChange={async (body) => {
        /* ... */
      }}
      verificationOptions={{
        onFetchRoot: async (body) => {
          // Call your /root endpoint to get the tamperproof root
          const response = await api.getAuditRoot(body);
          return response;
        },
      }}
    />
  );
};

When verificationOptions.onFetchRoot is supplied, the AuditLogViewer verifies each event's membership_proof against the published root, and shows tamperproof verification statuses.

Providing config to dynamically fetch your custom schema​

By passing a config prop, the AuditLogViewer can automatically fetch your project's custom Audit schema from the Pangea Console. This way, the table's columns and fields update based on the configuration saved in your Pangea project.

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

const ExampleWithConfig = () => {
  return (
    <AuditLogViewer
      onSearch={async (body) => {
        /* ... */
      }}
      onPageChange={async (body) => {
        /* ... */
      }}
      // Use your project credentials to dynamically fetch the schema from the Pangea Console
      config={{
        clientToken: "pcl_...", // e.g., "pcl_your-client-token"
        domain: "aws.us.pangea.cloud",
        configId: "pci_...", // if your project uses multiple configurations
      }}
    />
  );
};

Note: Your Pangea environment must be set up with matching tokens, domain, and config IDs. Ensure you call your proxy endpoints from the client side rather than embedding your service token directly.

Specifying a custom schema directly via schema​

If you prefer to define your schema manually, you can pass a schema object describing fields, types, and how they’re displayed:

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

// Example custom schema (subset of standard Secure Audit Log schema)
const MY_CUSTOM_SCHEMA: Audit.Schema = {
  client_signable: true,
  tamper_proofing: true,
  fields: [
    {
      id: "received_at",
      name: "Time",
      type: "datetime",
      ui_default_visible: true,
    },
    {
      id: "actor",
      name: "Actor",
      type: "string",
      ui_default_visible: true,
    },
    // Add more fields as needed
  ],
};

const ExampleWithCustomSchema = () => {
  return (
    <AuditLogViewer
      onSearch={async (body) => { /* ... */ }}
      onPageChange={async (body) => { /* ... */ }}
      schema={MY_CUSTOM_SCHEMA}
    />
  );
};

The schema prop gives you full control over which columns appear and how they're defined, independent of any configuration in the Pangea Console.

Format Preserving Encryption (FPE) Support​

To highlight Format Preserving Encryption redactions, enable highlightRedaction in the fpeOptions prop:

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

With this, fields redacted via FPE (in your Secure Audit Log) will appear visually distinct, helping you identify which portions have been obscured.

Using filterOptions for specifing hot storage warning and known field options for filterinng​

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

const ExampleWithFilterOptions = () => {
  return (
    <AuditLogViewer
      filterOptions={{
        hotStorageRange: "14day",
        filterableFields: ["actor", "event_type"],
        fieldOptions: [
          {
            id: "event_type",
            valueOptions: [
              { label: "Login", value: "login" },
              { label: "Logout", value: "logout" },
            ],
          },
        ],
      }}
      onSearch={async (body) => {
        /* Call your search API */
      }}
      onPageChange={async (body) => {
        /* Handle pagination */
      }}
    />
  );
};

export default ExampleWithFilterOptions;

Remember to explore our GitHub repository for full Storybook examples and local testing instructions. If you have questions, check out our Pangea Docs or contact our support

If you have suggestions for improvement please reach out, we are happy to make updates and improve the component for use by customers.