@webiny/app-audit-logs 0.0.0-unstable.0156a4c312

package/views/Logs/Preview/feature.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"views/Logs/Preview/feature.js","sources":["../../../../src/views/Logs/Preview/feature.ts"],"sourcesContent":["import { createFeature } from \"@webiny/feature/admin\";\nimport { useFeature } from \"@webiny/app-admin\";\nimport { AuditLogDetailsPresenter as Abstraction } from \"./abstractions.js\";\nimport { AuditLogDetailsPresenter } from \"./AuditLogDetailsPresenter.js\";\n\nexport const AuditLogDetailsPresenterFeature = createFeature({\n    name: \"AuditLogs/DetailsPresenter\",\n    register(container) {\n        container.register(AuditLogDetailsPresenter).inSingletonScope();\n    },\n    resolve(container) {\n        return {\n            presenter: container.resolve(Abstraction)\n        };\n    }\n});\n\nexport function useAuditLogDetailsPresenter(): Abstraction.Interface {\n    const { presenter } = useFeature(AuditLogDetailsPresenterFeature);\n    return presenter;\n}\n"],"names":["AuditLogDetailsPresenterFeature","createFeature","container","AuditLogDetailsPresenter","Abstraction","useAuditLogDetailsPresenter","presenter","useFeature"],"mappings":";;;;AAKO,MAAMA,kCAAkCC,cAAc;IACzD,MAAM;IACN,UAASC,SAAS;QACdA,UAAU,QAAQ,CAACC,+DAA0B,gBAAgB;IACjE;IACA,SAAQD,SAAS;QACb,OAAO;YACH,WAAWA,UAAU,OAAO,CAACE;QACjC;IACJ;AACJ;AAEO,SAASC;IACZ,MAAM,EAAEC,SAAS,EAAE,GAAGC,WAAWP;IACjC,OAAOM;AACX"}

package/views/Logs/Preview/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./Preview.js";
+export { useAuditLogDetailsPresenter } from "./feature.js";
+export type { IAuditLogDetailsPresenter, IAuditLogDetailsVm } from "./abstractions.js";

package/views/Logs/Preview/index.js

@@ -0,0 +1,2 @@
+export * from "./Preview.js";
+export { useAuditLogDetailsPresenter } from "./feature.js";

package/views/Logs/Preview/tabs/AiPromptTabs.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const AiPromptPreviewTabs: () => React.JSX.Element;

package/views/Logs/Preview/tabs/AiPromptTabs.js

@@ -0,0 +1,25 @@
+import react from "react";
+import { AuditLogsListConfig } from "../../../../config/list/index.js";
+import { SystemPromptTab } from "./SystemPromptTab.js";
+import { UserPromptTab } from "./UserPromptTab.js";
+import { LlmResponseTab } from "./LlmResponseTab.js";
+import { hasAfter, isAiGenerateText } from "./shared.js";
+const AiPromptPreviewTabs = ()=>/*#__PURE__*/ react.createElement(AuditLogsListConfig, null, /*#__PURE__*/ react.createElement(AuditLogsListConfig.Details.Tab, {
+        name: "systemPrompt",
+        label: "System Prompt",
+        element: /*#__PURE__*/ react.createElement(SystemPromptTab, null),
+        canRender: isAiGenerateText
+    }), /*#__PURE__*/ react.createElement(AuditLogsListConfig.Details.Tab, {
+        name: "userPrompt",
+        label: "User Prompt",
+        element: /*#__PURE__*/ react.createElement(UserPromptTab, null),
+        canRender: isAiGenerateText
+    }), /*#__PURE__*/ react.createElement(AuditLogsListConfig.Details.Tab, {
+        name: "llmResponse",
+        label: "LLM Response",
+        element: /*#__PURE__*/ react.createElement(LlmResponseTab, null),
+        canRender: hasAfter
+    }));
+export { AiPromptPreviewTabs };
+
+//# sourceMappingURL=AiPromptTabs.js.map

package/views/Logs/Preview/tabs/AiPromptTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"views/Logs/Preview/tabs/AiPromptTabs.js","sources":["../../../../../src/views/Logs/Preview/tabs/AiPromptTabs.tsx"],"sourcesContent":["import React from \"react\";\nimport { AuditLogsListConfig } from \"~/config/list/index.js\";\nimport { SystemPromptTab } from \"./SystemPromptTab.js\";\nimport { UserPromptTab } from \"./UserPromptTab.js\";\nimport { LlmResponseTab } from \"./LlmResponseTab.js\";\nimport { isAiGenerateText, hasAfter } from \"./shared.js\";\n\nexport const AiPromptPreviewTabs = () => {\n    return (\n        <AuditLogsListConfig>\n            <AuditLogsListConfig.Details.Tab\n                name=\"systemPrompt\"\n                label=\"System Prompt\"\n                element={<SystemPromptTab />}\n                canRender={isAiGenerateText}\n            />\n            <AuditLogsListConfig.Details.Tab\n                name=\"userPrompt\"\n                label=\"User Prompt\"\n                element={<UserPromptTab />}\n                canRender={isAiGenerateText}\n            />\n            <AuditLogsListConfig.Details.Tab\n                name=\"llmResponse\"\n                label=\"LLM Response\"\n                element={<LlmResponseTab />}\n                canRender={hasAfter}\n            />\n        </AuditLogsListConfig>\n    );\n};\n"],"names":["AiPromptPreviewTabs","AuditLogsListConfig","SystemPromptTab","isAiGenerateText","UserPromptTab","LlmResponseTab","hasAfter"],"mappings":";;;;;;AAOO,MAAMA,sBAAsB,IACxB,WAAP,GACI,oBAACC,qBAAmBA,MAAAA,WAAAA,GAChB,oBAACA,oBAAoB,OAAO,CAAC,GAAG;QAC5B,MAAK;QACL,OAAM;QACN,uBAAS,oBAACC,iBAAeA;QACzB,WAAWC;sBAEf,oBAACF,oBAAoB,OAAO,CAAC,GAAG;QAC5B,MAAK;QACL,OAAM;QACN,uBAAS,oBAACG,eAAaA;QACvB,WAAWD;sBAEf,oBAACF,oBAAoB,OAAO,CAAC,GAAG;QAC5B,MAAK;QACL,OAAM;QACN,uBAAS,oBAACI,gBAAcA;QACxB,WAAWC"}

package/views/Logs/Preview/tabs/LlmResponseTab.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const LlmResponseTab: (() => React.JSX.Element) & React.NamedExoticComponent<unknown> & {
+    readonly type: () => React.JSX.Element;
+};

package/views/Logs/Preview/tabs/LlmResponseTab.js

@@ -0,0 +1,41 @@
+import react from "react";
+import { CodeEditor } from "@webiny/admin-ui";
+import { createReactiveComponent } from "@webiny/app-admin";
+import { useAuditLogDetailsPresenter } from "../feature.js";
+import { EDITOR_HEIGHT } from "./shared.js";
+const LlmResponseTab = createReactiveComponent(()=>{
+    const presenter = useAuditLogDetailsPresenter();
+    const after = presenter.vm.content.after;
+    if (!after) return /*#__PURE__*/ react.createElement(CodeEditor, {
+        language: "markdown",
+        value: "(pending — no response yet)",
+        height: EDITOR_HEIGHT
+    });
+    if ("error" === after.status) {
+        const errorText = [
+            `# Error: ${after.error?.name ?? "Unknown"}`,
+            "",
+            after.error?.message ?? "No error message available.",
+            "",
+            null != after.duration ? `Duration: ${after.duration}ms` : ""
+        ].join("\n");
+        return /*#__PURE__*/ react.createElement(CodeEditor, {
+            language: "markdown",
+            value: errorText,
+            height: EDITOR_HEIGHT
+        });
+    }
+    const text = after.text ?? "";
+    let formatted = text;
+    try {
+        formatted = JSON.stringify(JSON.parse(text), null, 2);
+    } catch  {}
+    return /*#__PURE__*/ react.createElement(CodeEditor, {
+        language: "json",
+        value: formatted,
+        height: EDITOR_HEIGHT
+    });
+});
+export { LlmResponseTab };
+
+//# sourceMappingURL=LlmResponseTab.js.map

package/views/Logs/Preview/tabs/LlmResponseTab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"views/Logs/Preview/tabs/LlmResponseTab.js","sources":["../../../../../src/views/Logs/Preview/tabs/LlmResponseTab.tsx"],"sourcesContent":["import React from \"react\";\nimport { CodeEditor } from \"@webiny/admin-ui\";\nimport { createReactiveComponent } from \"@webiny/app-admin\";\nimport { useAuditLogDetailsPresenter } from \"~/views/Logs/Preview/feature.js\";\nimport { EDITOR_HEIGHT, type AiAuditPayload } from \"./shared.js\";\n\nexport const LlmResponseTab = createReactiveComponent(() => {\n    const presenter = useAuditLogDetailsPresenter();\n    const after = presenter.vm.content.after as AiAuditPayload[\"after\"];\n\n    if (!after) {\n        return (\n            <CodeEditor\n                language=\"markdown\"\n                value=\"(pending — no response yet)\"\n                height={EDITOR_HEIGHT}\n            />\n        );\n    }\n\n    if (after.status === \"error\") {\n        const errorText = [\n            `# Error: ${after.error?.name ?? \"Unknown\"}`,\n            \"\",\n            after.error?.message ?? \"No error message available.\",\n            \"\",\n            after.duration != null ? `Duration: ${after.duration}ms` : \"\"\n        ].join(\"\\n\");\n\n        return <CodeEditor language=\"markdown\" value={errorText} height={EDITOR_HEIGHT} />;\n    }\n\n    const text = after.text ?? \"\";\n    let formatted = text;\n    try {\n        formatted = JSON.stringify(JSON.parse(text), null, 2);\n    } catch {\n        // not JSON, show as-is\n    }\n\n    return <CodeEditor language=\"json\" value={formatted} height={EDITOR_HEIGHT} />;\n});\n"],"names":["LlmResponseTab","createReactiveComponent","presenter","useAuditLogDetailsPresenter","after","CodeEditor","EDITOR_HEIGHT","errorText","text","formatted","JSON"],"mappings":";;;;;AAMO,MAAMA,iBAAiBC,wBAAwB;IAClD,MAAMC,YAAYC;IAClB,MAAMC,QAAQF,UAAU,EAAE,CAAC,OAAO,CAAC,KAAK;IAExC,IAAI,CAACE,OACD,OAAO,WAAP,GACI,oBAACC,YAAUA;QACP,UAAS;QACT,OAAM;QACN,QAAQC;;IAKpB,IAAIF,AAAiB,YAAjBA,MAAM,MAAM,EAAc;QAC1B,MAAMG,YAAY;YACd,CAAC,SAAS,EAAEH,MAAM,KAAK,EAAE,QAAQ,WAAW;YAC5C;YACAA,MAAM,KAAK,EAAE,WAAW;YACxB;YACkB,QAAlBA,MAAM,QAAQ,GAAW,CAAC,UAAU,EAAEA,MAAM,QAAQ,CAAC,EAAE,CAAC,GAAG;SAC9D,CAAC,IAAI,CAAC;QAEP,OAAO,WAAP,GAAO,oBAACC,YAAUA;YAAC,UAAS;YAAW,OAAOE;YAAW,QAAQD;;IACrE;IAEA,MAAME,OAAOJ,MAAM,IAAI,IAAI;IAC3B,IAAIK,YAAYD;IAChB,IAAI;QACAC,YAAYC,KAAK,SAAS,CAACA,KAAK,KAAK,CAACF,OAAO,MAAM;IACvD,EAAE,OAAM,CAER;IAEA,OAAO,WAAP,GAAO,oBAACH,YAAUA;QAAC,UAAS;QAAO,OAAOI;QAAW,QAAQH;;AACjE"}

package/views/Logs/Preview/tabs/SystemPromptTab.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const SystemPromptTab: (() => React.JSX.Element) & React.NamedExoticComponent<unknown> & {
+    readonly type: () => React.JSX.Element;
+};

package/views/Logs/Preview/tabs/SystemPromptTab.js

@@ -0,0 +1,24 @@
+import react from "react";
+import { CodeEditor } from "@webiny/admin-ui";
+import { createReactiveComponent } from "@webiny/app-admin";
+import { useAuditLogDetailsPresenter } from "../feature.js";
+import { EDITOR_HEIGHT } from "./shared.js";
+function extractSystemPrompt(content) {
+    const before = content.before;
+    const system = before?.system;
+    if ("string" == typeof system) return system;
+    if (system && "string" == typeof system.content) return system.content;
+    return "";
+}
+const SystemPromptTab = createReactiveComponent(()=>{
+    const presenter = useAuditLogDetailsPresenter();
+    const text = extractSystemPrompt(presenter.vm.content);
+    return /*#__PURE__*/ react.createElement(CodeEditor, {
+        language: "markdown",
+        value: text || "(empty)",
+        height: EDITOR_HEIGHT
+    });
+});
+export { SystemPromptTab };
+
+//# sourceMappingURL=SystemPromptTab.js.map

package/views/Logs/Preview/tabs/SystemPromptTab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"views/Logs/Preview/tabs/SystemPromptTab.js","sources":["../../../../../src/views/Logs/Preview/tabs/SystemPromptTab.tsx"],"sourcesContent":["import React from \"react\";\nimport { CodeEditor } from \"@webiny/admin-ui\";\nimport { createReactiveComponent } from \"@webiny/app-admin\";\nimport { useAuditLogDetailsPresenter } from \"~/views/Logs/Preview/feature.js\";\nimport { EDITOR_HEIGHT, type AiAuditPayload } from \"./shared.js\";\n\nfunction extractSystemPrompt(content: Record<string, unknown>): string {\n    const before = content.before as AiAuditPayload[\"before\"];\n    const system = before?.system;\n    if (typeof system === \"string\") {\n        return system;\n    }\n    if (system && typeof system.content === \"string\") {\n        return system.content;\n    }\n    return \"\";\n}\n\nexport const SystemPromptTab = createReactiveComponent(() => {\n    const presenter = useAuditLogDetailsPresenter();\n    const text = extractSystemPrompt(presenter.vm.content);\n    return <CodeEditor language=\"markdown\" value={text || \"(empty)\"} height={EDITOR_HEIGHT} />;\n});\n"],"names":["extractSystemPrompt","content","before","system","SystemPromptTab","createReactiveComponent","presenter","useAuditLogDetailsPresenter","text","CodeEditor","EDITOR_HEIGHT"],"mappings":";;;;;AAMA,SAASA,oBAAoBC,OAAgC;IACzD,MAAMC,SAASD,QAAQ,MAAM;IAC7B,MAAME,SAASD,QAAQ;IACvB,IAAI,AAAkB,YAAlB,OAAOC,QACP,OAAOA;IAEX,IAAIA,UAAU,AAA0B,YAA1B,OAAOA,OAAO,OAAO,EAC/B,OAAOA,OAAO,OAAO;IAEzB,OAAO;AACX;AAEO,MAAMC,kBAAkBC,wBAAwB;IACnD,MAAMC,YAAYC;IAClB,MAAMC,OAAOR,oBAAoBM,UAAU,EAAE,CAAC,OAAO;IACrD,OAAO,WAAP,GAAO,oBAACG,YAAUA;QAAC,UAAS;QAAW,OAAOD,QAAQ;QAAW,QAAQE;;AAC7E"}

package/views/Logs/Preview/tabs/UserPromptTab.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const UserPromptTab: (() => React.JSX.Element) & React.NamedExoticComponent<unknown> & {
+    readonly type: () => React.JSX.Element;
+};

package/views/Logs/Preview/tabs/UserPromptTab.js

@@ -0,0 +1,18 @@
+import react from "react";
+import { CodeEditor } from "@webiny/admin-ui";
+import { createReactiveComponent } from "@webiny/app-admin";
+import { useAuditLogDetailsPresenter } from "../feature.js";
+import { EDITOR_HEIGHT } from "./shared.js";
+const UserPromptTab = createReactiveComponent(()=>{
+    const presenter = useAuditLogDetailsPresenter();
+    const before = presenter.vm.content.before;
+    const text = before?.prompt ?? "";
+    return /*#__PURE__*/ react.createElement(CodeEditor, {
+        language: "markdown",
+        value: text || "(empty)",
+        height: EDITOR_HEIGHT
+    });
+});
+export { UserPromptTab };
+
+//# sourceMappingURL=UserPromptTab.js.map

package/views/Logs/Preview/tabs/UserPromptTab.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"views/Logs/Preview/tabs/UserPromptTab.js","sources":["../../../../../src/views/Logs/Preview/tabs/UserPromptTab.tsx"],"sourcesContent":["import React from \"react\";\nimport { CodeEditor } from \"@webiny/admin-ui\";\nimport { createReactiveComponent } from \"@webiny/app-admin\";\nimport { useAuditLogDetailsPresenter } from \"~/views/Logs/Preview/feature.js\";\nimport { EDITOR_HEIGHT, type AiAuditPayload } from \"./shared.js\";\n\nexport const UserPromptTab = createReactiveComponent(() => {\n    const presenter = useAuditLogDetailsPresenter();\n    const before = presenter.vm.content.before as AiAuditPayload[\"before\"];\n    const text = before?.prompt ?? \"\";\n    return <CodeEditor language=\"markdown\" value={text || \"(empty)\"} height={EDITOR_HEIGHT} />;\n});\n"],"names":["UserPromptTab","createReactiveComponent","presenter","useAuditLogDetailsPresenter","before","text","CodeEditor","EDITOR_HEIGHT"],"mappings":";;;;;AAMO,MAAMA,gBAAgBC,wBAAwB;IACjD,MAAMC,YAAYC;IAClB,MAAMC,SAASF,UAAU,EAAE,CAAC,OAAO,CAAC,MAAM;IAC1C,MAAMG,OAAOD,QAAQ,UAAU;IAC/B,OAAO,WAAP,GAAO,oBAACE,YAAUA;QAAC,UAAS;QAAW,OAAOD,QAAQ;QAAW,QAAQE;;AAC7E"}

package/views/Logs/Preview/tabs/shared.d.ts

@@ -0,0 +1,28 @@
+import type { IAuditLog } from "../../../../types.js";
+export declare const EDITOR_HEIGHT = "calc(100vh - 350px)";
+export interface AiAuditPayload {
+    before?: {
+        model?: string;
+        system?: string | {
+            content?: string;
+            role?: string;
+        };
+        prompt?: string;
+        tools?: string[];
+    };
+    after?: {
+        status?: "success" | "error";
+        duration?: number;
+        text?: string;
+        usage?: unknown;
+        finishReason?: string;
+        steps?: number;
+        toolCalls?: number;
+        error?: {
+            message?: string;
+            name?: string;
+        };
+    };
+}
+export declare function isAiGenerateText(auditLog: IAuditLog): boolean;
+export declare function hasAfter(auditLog: IAuditLog): boolean;

package/views/Logs/Preview/tabs/shared.js

@@ -0,0 +1,16 @@
+const EDITOR_HEIGHT = "calc(100vh - 350px)";
+function isAiGenerateText(auditLog) {
+    return "AI" === auditLog.app && "TEXT" === auditLog.entity.value;
+}
+function hasAfter(auditLog) {
+    if (!isAiGenerateText(auditLog)) return false;
+    try {
+        const content = JSON.parse(auditLog.content);
+        return !!content.after;
+    } catch  {
+        return false;
+    }
+}
+export { EDITOR_HEIGHT, hasAfter, isAiGenerateText };
+
+//# sourceMappingURL=shared.js.map

package/views/Logs/Preview/tabs/shared.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"views/Logs/Preview/tabs/shared.js","sources":["../../../../../src/views/Logs/Preview/tabs/shared.ts"],"sourcesContent":["import type { IAuditLog } from \"~/types.js\";\n\nexport const EDITOR_HEIGHT = \"calc(100vh - 350px)\";\n\nexport interface AiAuditPayload {\n    before?: {\n        model?: string;\n        system?: string | { content?: string; role?: string };\n        prompt?: string;\n        tools?: string[];\n    };\n    after?: {\n        status?: \"success\" | \"error\";\n        duration?: number;\n        text?: string;\n        usage?: unknown;\n        finishReason?: string;\n        steps?: number;\n        toolCalls?: number;\n        error?: { message?: string; name?: string };\n    };\n}\n\nexport function isAiGenerateText(auditLog: IAuditLog): boolean {\n    return auditLog.app === \"AI\" && auditLog.entity.value === \"TEXT\";\n}\n\nexport function hasAfter(auditLog: IAuditLog): boolean {\n    if (!isAiGenerateText(auditLog)) {\n        return false;\n    }\n    try {\n        const content = JSON.parse(auditLog.content);\n        return !!content.after;\n    } catch {\n        return false;\n    }\n}\n"],"names":["EDITOR_HEIGHT","isAiGenerateText","auditLog","hasAfter","content","JSON"],"mappings":"AAEO,MAAMA,gBAAgB;AAqBtB,SAASC,iBAAiBC,QAAmB;IAChD,OAAOA,AAAiB,SAAjBA,SAAS,GAAG,IAAaA,AAA0B,WAA1BA,SAAS,MAAM,CAAC,KAAK;AACzD;AAEO,SAASC,SAASD,QAAmB;IACxC,IAAI,CAACD,iBAAiBC,WAClB,OAAO;IAEX,IAAI;QACA,MAAME,UAAUC,KAAK,KAAK,CAACH,SAAS,OAAO;QAC3C,OAAO,CAAC,CAACE,QAAQ,KAAK;IAC1B,EAAE,OAAM;QACJ,OAAO;IACX;AACJ"}

package/views/Logs/Table/Table.d.ts

@@ -0,0 +1,21 @@
+import React from "react";
+import { type DataTableSorting, type OnDataTableSortingChange } from "@webiny/admin-ui";
+import type { IAuditLog } from "../../../types.js";
+interface ActionProps {
+    label: string;
+    value: string;
+}
+export declare const Action: ({ label, value }: ActionProps) => React.JSX.Element;
+export interface TableProps {
+    records: IAuditLog[];
+    loading?: boolean;
+    handleRecordSelect: (auditLog: IAuditLog) => void;
+    sorting: DataTableSorting;
+    onSortingChange: OnDataTableSortingChange;
+    hasAccessToUsers: boolean;
+}
+export interface EntryWithPreview extends IAuditLog {
+    preview?: string;
+}
+export declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/views/Logs/Table/Table.js

@@ -0,0 +1,117 @@
+import react, { forwardRef, useMemo } from "react";
+import { addMinutes, format } from "date-fns";
+import { ReactComponent } from "@webiny/icons/search.svg";
+import { Button, DataTable, Tooltip } from "@webiny/admin-ui";
+import { Text } from "../../../components/Text.js";
+import { getActionColorClasses } from "./styled.js";
+const Action = ({ label, value })=>/*#__PURE__*/ react.createElement("div", {
+        className: `px-sm w-fit border border-solid rounded-[5px] ${getActionColorClasses(value)}`
+    }, /*#__PURE__*/ react.createElement(Text, {
+        use: "subtitle1"
+    }, label));
+const Table = /*#__PURE__*/ forwardRef((props, ref)=>{
+    const { records, loading, handleRecordSelect, sorting, onSortingChange, hasAccessToUsers } = props;
+    const columns = {
+        createdOn: {
+            header: "Timestamp",
+            cell: (row)=>{
+                const date = new Date(row.createdOn);
+                return /*#__PURE__*/ react.createElement(Tooltip, {
+                    side: "right",
+                    content: `UTC: ${format(addMinutes(date, date.getTimezoneOffset()), "yyyy-MM-dd HH:mm:ss")}`,
+                    trigger: /*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Text, {
+                        use: "subtitle1"
+                    }, format(date, "yyyy-MM-dd HH:mm:ss")), /*#__PURE__*/ react.createElement("span", {
+                        className: "px-xs text-neutral-dimmed"
+                    }, /*#__PURE__*/ react.createElement(Text, {
+                        use: "body2"
+                    }, format(date, "(O)"))))
+                });
+            },
+            enableSorting: true
+        },
+        app: {
+            header: "App/Entity",
+            cell: (row)=>/*#__PURE__*/ react.createElement(react.Fragment, null, /*#__PURE__*/ react.createElement(Text, {
+                    use: "subtitle1",
+                    className: "text-neutral-strong"
+                }, row.app), row.entity && /*#__PURE__*/ react.createElement(react.Fragment, null, "\xa0/\xa0", /*#__PURE__*/ react.createElement("span", {
+                    className: "text-neutral-strong"
+                }, /*#__PURE__*/ react.createElement(Text, {
+                    use: "body2"
+                }, row.entity.label))), /*#__PURE__*/ react.createElement("br", null), /*#__PURE__*/ react.createElement("span", {
+                    className: "text-neutral-dimmed"
+                }, /*#__PURE__*/ react.createElement(Text, {
+                    use: "body2"
+                }, "ID: "), row.entity.link ? /*#__PURE__*/ react.createElement("a", {
+                    href: row.entity.link,
+                    target: "blank"
+                }, /*#__PURE__*/ react.createElement(Text, {
+                    use: "body2"
+                }, row.entityId)) : /*#__PURE__*/ react.createElement(Text, {
+                    use: "body2"
+                }, row.entityId))),
+            className: "!w-[280px]"
+        },
+        action: {
+            header: "Action",
+            cell: (row)=>/*#__PURE__*/ react.createElement(Action, {
+                    label: row.action.label,
+                    value: row.action.value
+                })
+        },
+        message: {
+            header: "Message",
+            cell: (row)=>/*#__PURE__*/ react.createElement(Text, {
+                    use: "subtitle1"
+                }, row.message),
+            className: "!w-auto"
+        },
+        ...hasAccessToUsers && {
+            createdBy: {
+                header: "Initiator",
+                cell: (row)=>/*#__PURE__*/ react.createElement("a", {
+                        href: `/admin-users?id=${row.createdBy.id}`,
+                        target: "blank"
+                    }, /*#__PURE__*/ react.createElement(Text, {
+                        use: "subtitle1"
+                    }, row.createdBy.displayName || "-"))
+            }
+        },
+        preview: {
+            header: "",
+            cell: (auditLog)=>/*#__PURE__*/ react.createElement(Button, {
+                    variant: "secondary",
+                    onClick: ()=>handleRecordSelect(auditLog),
+                    icon: /*#__PURE__*/ react.createElement(ReactComponent, null),
+                    text: "Details"
+                }),
+            className: "!w-[100px]"
+        }
+    };
+    const tableSorting = useMemo(()=>{
+        if (!Array.isArray(sorting) || 0 === sorting.length) return [
+            {
+                id: "savedOn",
+                desc: true
+            }
+        ];
+        return sorting;
+    }, [
+        sorting
+    ]);
+    return /*#__PURE__*/ react.createElement("div", {
+        ref: ref
+    }, /*#__PURE__*/ react.createElement(DataTable, {
+        columns: columns,
+        data: records,
+        loading: loading,
+        stickyHeader: true,
+        sorting: tableSorting,
+        onSortingChange: onSortingChange
+    }));
+});
+Table.displayName = "Table";
+export { Action, Table };
+
+//# sourceMappingURL=Table.js.map

package/views/Logs/Table/Table.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"views/Logs/Table/Table.js","sources":["../../../../src/views/Logs/Table/Table.tsx"],"sourcesContent":["import React, { forwardRef, useMemo } from \"react\";\nimport { addMinutes, format } from \"date-fns\";\nimport { ReactComponent as PreviewIcon } from \"@webiny/icons/search.svg\";\nimport {\n    Button,\n    type DataTableColumns,\n    type DataTableSorting,\n    type OnDataTableSortingChange\n} from \"@webiny/admin-ui\";\nimport { DataTable, Tooltip } from \"@webiny/admin-ui\";\n\nimport { Text } from \"~/components/Text.js\";\nimport { getActionColorClasses } from \"./styled.js\";\nimport type { IAuditLog } from \"~/types.js\";\n\ninterface ActionProps {\n    label: string;\n    value: string;\n}\n\nexport const Action = ({ label, value }: ActionProps) => {\n    return (\n        <div\n            className={`px-sm w-fit border border-solid rounded-[5px] ${getActionColorClasses(value)}`}\n        >\n            <Text use={\"subtitle1\"}>{label}</Text>\n        </div>\n    );\n};\n\nexport interface TableProps {\n    records: IAuditLog[];\n    loading?: boolean;\n    handleRecordSelect: (auditLog: IAuditLog) => void;\n    sorting: DataTableSorting;\n    onSortingChange: OnDataTableSortingChange;\n    hasAccessToUsers: boolean;\n}\n\nexport interface EntryWithPreview extends IAuditLog {\n    preview?: string;\n}\n\nexport const Table = forwardRef<HTMLDivElement, TableProps>((props, ref) => {\n    const { records, loading, handleRecordSelect, sorting, onSortingChange, hasAccessToUsers } =\n        props;\n\n    const columns: DataTableColumns<EntryWithPreview> = {\n        createdOn: {\n            header: \"Timestamp\",\n            cell: (row: EntryWithPreview) => {\n                const date = new Date(row.createdOn);\n\n                return (\n                    <Tooltip\n                        side=\"right\"\n                        content={`UTC: ${format(\n                            addMinutes(date, date.getTimezoneOffset()),\n                            \"yyyy-MM-dd HH:mm:ss\"\n                        )}`}\n                        trigger={\n                            <>\n                                <Text use={\"subtitle1\"}>{format(date, \"yyyy-MM-dd HH:mm:ss\")}</Text>\n                                <span className={\"px-xs text-neutral-dimmed\"}>\n                                    <Text use={\"body2\"}>{format(date, \"(O)\")}</Text>\n                                </span>\n                            </>\n                        }\n                    />\n                );\n            },\n            enableSorting: true\n        },\n        app: {\n            header: \"App/Entity\",\n            cell: (row: EntryWithPreview) => (\n                <>\n                    <Text use={\"subtitle1\"} className={\"text-neutral-strong\"}>\n                        {row.app}\n                    </Text>\n                    {row.entity && (\n                        <>\n                            &nbsp;/&nbsp;\n                            <span className={\"text-neutral-strong\"}>\n                                <Text use={\"body2\"}>{row.entity.label}</Text>\n                            </span>\n                        </>\n                    )}\n                    <br />\n                    <span className={\"text-neutral-dimmed\"}>\n                        <Text use={\"body2\"}>{`ID: `}</Text>\n                        {row.entity.link ? (\n                            <a href={row.entity.link} target={\"blank\"}>\n                                <Text use={\"body2\"}>{row.entityId}</Text>\n                            </a>\n                        ) : (\n                            <Text use={\"body2\"}>{row.entityId}</Text>\n                        )}\n                    </span>\n                </>\n            ),\n            className: \"!w-[280px]\"\n        },\n        action: {\n            header: \"Action\",\n            cell: (row: EntryWithPreview) => (\n                <Action label={row.action.label} value={row.action.value} />\n            )\n        },\n        message: {\n            header: \"Message\",\n            cell: (row: EntryWithPreview) => <Text use={\"subtitle1\"}>{row.message}</Text>,\n            className: \"!w-auto\"\n        },\n        ...(hasAccessToUsers && {\n            createdBy: {\n                header: \"Initiator\",\n                cell: (row: EntryWithPreview) => (\n                    <a href={`/admin-users?id=${row.createdBy.id}`} target={\"blank\"}>\n                        <Text use={\"subtitle1\"}>{row.createdBy.displayName || \"-\"}</Text>\n                    </a>\n                )\n            }\n        }),\n        preview: {\n            header: \"\",\n            cell: (auditLog: EntryWithPreview) => (\n                <Button\n                    variant={\"secondary\"}\n                    onClick={() => handleRecordSelect(auditLog)}\n                    icon={<PreviewIcon />}\n                    text={\"Details\"}\n                />\n            ),\n            className: \"!w-[100px]\"\n        }\n    };\n\n    const tableSorting = useMemo(() => {\n        if (!Array.isArray(sorting) || sorting.length === 0) {\n            return [\n                {\n                    id: \"savedOn\",\n                    desc: true\n                }\n            ];\n        }\n\n        return sorting;\n    }, [sorting]);\n\n    return (\n        <div ref={ref}>\n            <DataTable\n                columns={columns}\n                data={records}\n                loading={loading}\n                stickyHeader={true}\n                sorting={tableSorting}\n                onSortingChange={onSortingChange}\n            />\n        </div>\n    );\n});\n\nTable.displayName = \"Table\";\n"],"names":["Action","label","value","getActionColorClasses","Text","Table","forwardRef","props","ref","records","loading","handleRecordSelect","sorting","onSortingChange","hasAccessToUsers","columns","row","date","Date","Tooltip","format","addMinutes","auditLog","Button","PreviewIcon","tableSorting","useMemo","Array","DataTable"],"mappings":"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"}

package/views/Logs/Table/index.d.ts

@@ -0,0 +1 @@
+export * from "./Table.js";

package/views/Logs/Table/index.js

@@ -0,0 +1 @@
+export * from "./Table.js";

package/views/Logs/Table/styled.d.ts

@@ -0,0 +1 @@
+export declare function getActionColorClasses(value: string): string;

package/views/Logs/Table/styled.js

@@ -0,0 +1,17 @@
+import { ActionType } from "@webiny/common-audit-logs";
+const YELLOW_ACTIONS = [
+    ActionType.UPDATE
+];
+const RED_ACTIONS = [
+    ActionType.DELETE,
+    ActionType.UNPUBLISH,
+    ActionType.MOVE_TO_TRASH
+];
+function getActionColorClasses(value) {
+    if (YELLOW_ACTIONS.includes(value)) return "bg-warning-100 border-warning-500 text-warning-700";
+    if (RED_ACTIONS.includes(value)) return "bg-destructive-100 border-destructive-500 text-destructive-700";
+    return "bg-success-100 border-success-500 text-success-700";
+}
+export { getActionColorClasses };
+
+//# sourceMappingURL=styled.js.map

package/views/Logs/Table/styled.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"views/Logs/Table/styled.js","sources":["../../../../src/views/Logs/Table/styled.tsx"],"sourcesContent":["import { ActionType } from \"@webiny/common-audit-logs\";\n\nconst YELLOW_ACTIONS: string[] = [ActionType.UPDATE];\nconst RED_ACTIONS: string[] = [ActionType.DELETE, ActionType.UNPUBLISH, ActionType.MOVE_TO_TRASH];\n\nexport function getActionColorClasses(value: string): string {\n    if (YELLOW_ACTIONS.includes(value)) {\n        return \"bg-warning-100 border-warning-500 text-warning-700\";\n    }\n    if (RED_ACTIONS.includes(value)) {\n        return \"bg-destructive-100 border-destructive-500 text-destructive-700\";\n    }\n    return \"bg-success-100 border-success-500 text-success-700\";\n}\n"],"names":["YELLOW_ACTIONS","ActionType","RED_ACTIONS","getActionColorClasses","value"],"mappings":";AAEA,MAAMA,iBAA2B;IAACC,WAAW,MAAM;CAAC;AACpD,MAAMC,cAAwB;IAACD,WAAW,MAAM;IAAEA,WAAW,SAAS;IAAEA,WAAW,aAAa;CAAC;AAE1F,SAASE,sBAAsBC,KAAa;IAC/C,IAAIJ,eAAe,QAAQ,CAACI,QACxB,OAAO;IAEX,IAAIF,YAAY,QAAQ,CAACE,QACrB,OAAO;IAEX,OAAO;AACX"}