ログ表示

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

このページの翻訳は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); }, }; }

返還

::::タブ:::タブ{title="config.json"}

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 = ({ entityId, logType, logLabel, }) => { const numberOfResults, setNumberOfResults = useState(0);

useEffect(() => { const getAuditInfo = async (): Promise => { 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 ( <>

{logLabel} {numberOfResults}

); };

export default LogViewer;

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