ログの表示

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

次のReactの例では、ログ情報を取得して表示します。

例

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);
    },
  };
}

収益

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"
}

ログビューア.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;

この記事を改善するための提案がある場合は、お知らせください!