Skip to main content

Customize Secure Audit Log Viewer

The Secure Audit Log Viewer can be customized to your preferred look and feel. The Secure Audit Log Viewer can be used to search, view, and verify tamperproofing of all logs stored by the Secure Audit Log service.

Use React base components (Material UI or MUI)​

These instructions are predicated on the assumption that you are utilizing a React application.

Get started with Secure Audit Log​

  1. Enable the Secure Audit Log service in the Pangea User Console and create a new project for your application.

    note

    As part of the enablement process, you will receive a prompt to create a token for accessing Secure Audit Log. While you have the option to link your token with various other services and endpoints, in this case, you only need it for Secure Audit Log.

  2. In your new project, copy the token you just created onto your clipboard. The token is located on the Secure Audit Log Overview page, toward the bottom of the screen.

  3. Take your token and go to your application repository. Add the token to your .env file.

PANGEA_AUDIT_TOKEN="yourAccessToken"
  1. Now, find the domain on the same Secure Audit Log Overview page and copy it onto your clipboard. Go to your application repository, and add domain to your .env file.
PANGEA_DOMAIN="yourServiceDomain"
  1. Now that your application is communicating with the Pangea User Console, you can start playing around with the look and feel of your Secure Audit Log Viewer.

Use Brand and Style​

  1. Go to Project Settings and then click on Branding. Make sure you select Audit Log Viewer in the drop-down menu.

  2. Start playing around with the different tabs.

    a. Branding tab - Configure logos, backgrounds, and text in your Audit Log Viewer.

    • Preset - Predetermined style forms, created by Pangea, that you can use for your branding. Do as little or as much as you want to them. You can choose from the following presets:
    • Pangea - A theme modeled after the Pangea brand
    • Browserflix - A theme suitable for a very popular streaming service
    • Ravean - A clean and simple theme
    • Custom - If you change an existing preset, or you want to start from scratch, Custom will be your selected theme.

    b. Advanced tab - Use the Advanced tab to adjust, save, and view the UI styles.

    • Density
    • Fonts
    • Borders
    • Colors

    c. Settings tab - Use the Settings tab to customize the background color of your Audit Log Viewer’s header and/or table rows.

  3. As you make changes, you should see a UI preview on the right-hand side of the screen.

  4. Click Save when you finish the above tasks.

Integrate themes into your app​

There are a few different ways of integrating the styles and themes you just configured into your app.

Scenario 1: If you already have Material UI (MUI) installed and you want to take some of the stylings, take a look at the Material UI theming.

Perform the following actions:

  1. View your UI preferences in CodeSandbox.
  2. Copy your own themes and put them into CodeSandbox to see what your themes on top of Pangea branding look like.
  3. Take the necessary styling as you want and integrate it into your app.

Outcome: On the app side, you are building upon the MUI theme you have already created in your app.

  • Code Viewer >> Material UI Theming.
  • Sandbox >> Put what you like into Sandbox, you can even add your own theme/styles to see what it looks like on top of Pangea branded stuff.

Scenario 2: If you don’t have MUI installed, then you can play around with the Pangea branding and style settings, and wrap your app with Pangea’s branding provider.

Perform the following actions:

  1. Copy the env variables from the Pangea Brand Theming, and put them in to .env file inside of CodeSandbox. Now, you can see the full Pangea brand and aesthetic on the audit log viewer page.
  2. Take the new BrandingThemeProvider snippet.
  3. Add it to the base of your application to wrap your files in that style.

Outcome: On the app side, the branding is fetched from Pangea.

  • Code Viewer >> Pangea Branding Theme >> Click on the copy env icon.
  • Sandbox >> env >> paste what you just copied.
  • Grab PangeaBrandingProvider and put it into the base of your app.

Was this article helpful?

Contact us