Examples

Display logs

The following React example retrieves and displays log information.

Example

import React from "react";
import ReactDOM from "react-dom";
import LogViewer from "./LogViewer";

export default function createExternalRoot(container: HTMLElement) {
  return {
    render(props: {
      options: { entityId: number };
      config: {
        header_label: string;
        log_types: Array<{ name: string; label: string }>;
      };
    }) {
      ReactDOM.render(
        props.config.log_types.map((logType) => (
          <LogViewer
            entityId={props.options.entityId ?? 0}
            logType={logType.name ?? ""}
            logLabel={logType.label ?? ""}
          />
        )),
        container
      );
    },
    unmount() {
      ReactDOM.unmountComponentAtNode(container);
    },
  };
}

Returns

config.json

{
  "log_types": [
    {
      "name": "asset.download.completed",
      "label": "Number of downloads: "
    },
    {
      "name": "publiclink.requested",
      "label": "Number of public link views: "
    }
  ],
  "header_label": "Report Data"
}

LogViewer.tsx

import React, { useEffect, useState } from "react";

interface logViewerProps {
  entityId: number;
  logType: string;
  logLabel: string;
}

const LogViewer: React.FunctionComponent<logViewerProps> = ({
  entityId,
  logType,
  logLabel,
}) => {
  const [numberOfResults, setNumberOfResults] = useState<number>(0);

  useEffect(() => {
    const getAuditInfo = async (): Promise<void> => {
      const response = await fetch(
        `${document.location.origin}/api/audit/business/query?logType=reportingeventslog&fullText=${logType}%20${entityId}&skip=0&take=10&sort=timestamp&order=desc`
      );

      const logsInfo: { total_items: number } = await response.json();

      setNumberOfResults(logsInfo.total_items);
    };

    if (entityId && logType && logLabel) {
      void getAuditInfo();
    }
  }, [entityId]);

  return (
    <>
      <h3>
        {logLabel} <em>{numberOfResults}</em>
      </h3>
    </>
  );
};

export default LogViewer;

If you have suggestions for improving this article, let us know!