mirror of
https://github.com/stefanpejcic/openpanel
synced 2025-06-26 18:28:26 +00:00
448 lines
20 KiB
TypeScript
448 lines
20 KiB
TypeScript
import React from "react";
|
|
import clsx from "clsx";
|
|
|
|
import { Activity } from "src/interfaces/activity";
|
|
import { Status } from "./status";
|
|
import { TraceList } from "./trace-list";
|
|
import dayjs from "dayjs";
|
|
import { Owners } from "./owners";
|
|
import { JsonViewer } from "./json-viewer";
|
|
import { excludeKeys } from "src/utils/exclude-keys";
|
|
import { getResourceValue } from "src/utils/get-resource-value";
|
|
import { ResourceValue } from "./resource-value";
|
|
import { RefineHook, scopes } from "@refinedev/devtools-shared";
|
|
import { getOwners } from "src/utils/get-owners";
|
|
|
|
export const MonitorDetails = ({ activity }: { activity?: Activity }) => {
|
|
return (
|
|
<div className={clsx("re-h-full", "re-text-gray-300", "re-relative")}>
|
|
<div
|
|
className={clsx(
|
|
"re-absolute",
|
|
"re-w-full",
|
|
"re-h-full",
|
|
"re-overflow-auto",
|
|
)}
|
|
>
|
|
{activity ? (
|
|
<>
|
|
<div
|
|
className={clsx(
|
|
"re-px-2",
|
|
"re-pt-2",
|
|
"re-pb-4",
|
|
"re-bg-gray-800",
|
|
"re-flex",
|
|
"re-flex-col",
|
|
"re-gap-2",
|
|
"re-rounded-tl-lg",
|
|
"re-rounded-tr-lg",
|
|
"re-border-b",
|
|
"re-border-b-gray-700",
|
|
)}
|
|
>
|
|
<div
|
|
className={clsx(
|
|
"re-flex",
|
|
"re-items-center",
|
|
"re-justify-start",
|
|
"re-w-full",
|
|
"re-text-xs",
|
|
"re-py-1",
|
|
)}
|
|
>
|
|
<div
|
|
className={clsx(
|
|
"re-w-20",
|
|
"re-flex-shrink-0",
|
|
"re-text-gray-400",
|
|
)}
|
|
>
|
|
Resource:
|
|
</div>
|
|
<div
|
|
className={clsx(
|
|
"re-flex-1",
|
|
"re-capitalize",
|
|
)}
|
|
>
|
|
<ResourceValue
|
|
resource={getResourceValue(activity)}
|
|
scope={
|
|
scopes[
|
|
activity.hookName as RefineHook
|
|
]
|
|
}
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={clsx(
|
|
"re-flex",
|
|
"re-items-center",
|
|
"re-justify-start",
|
|
"re-w-full",
|
|
"re-text-xs",
|
|
"re-py-1",
|
|
)}
|
|
>
|
|
<div
|
|
className={clsx(
|
|
"re-w-20",
|
|
"re-flex-shrink-0",
|
|
"re-text-gray-400",
|
|
)}
|
|
>
|
|
Hook name:
|
|
</div>
|
|
<div className={clsx("re-flex-1")}>
|
|
{activity?.hookName}
|
|
{activity.type === "query" && (
|
|
<span
|
|
className={clsx(
|
|
"re-ml-2",
|
|
"re-rounded-xl",
|
|
"re-py-0.5",
|
|
"re-px-1",
|
|
"re-text-[10px]",
|
|
"re-text-alt-blue",
|
|
"re-bg-alt-blue",
|
|
"re-bg-opacity-20",
|
|
"re-border",
|
|
"re-border-alt-blue",
|
|
)}
|
|
>
|
|
Query
|
|
</span>
|
|
)}
|
|
{activity.type === "mutation" && (
|
|
<span
|
|
className={clsx(
|
|
"re-ml-2",
|
|
"re-rounded-xl",
|
|
"re-py-0.5",
|
|
"re-px-1",
|
|
"re-text-[10px]",
|
|
"re-text-alt-cyan",
|
|
"re-bg-alt-cyan",
|
|
"re-bg-opacity-20",
|
|
"re-border",
|
|
"re-border-alt-cyan",
|
|
)}
|
|
>
|
|
Mutation
|
|
</span>
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={clsx(
|
|
"re-flex",
|
|
"re-items-center",
|
|
"re-justify-start",
|
|
"re-w-full",
|
|
"re-text-xs",
|
|
)}
|
|
>
|
|
<div
|
|
className={clsx(
|
|
"re-w-[72px]",
|
|
"re-flex-shrink-0",
|
|
"re-text-gray-400",
|
|
)}
|
|
>
|
|
Trace:
|
|
</div>
|
|
<div
|
|
className={clsx(
|
|
"re-flex-1",
|
|
"no-scrollbar",
|
|
"re-overflow-auto",
|
|
)}
|
|
>
|
|
<TraceList trace={activity.trace} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={clsx(
|
|
"re-flex",
|
|
"re-flex-col",
|
|
"re-py-4",
|
|
"re-px-2",
|
|
"re-border-b",
|
|
"re-border-b-gray-700",
|
|
"re-text-xs",
|
|
)}
|
|
>
|
|
<div
|
|
className={clsx(
|
|
"re-flex",
|
|
"re-items-center",
|
|
"re-justify-start",
|
|
"re-w-full",
|
|
"re-text-xs",
|
|
"re-py-1",
|
|
)}
|
|
>
|
|
<div
|
|
className={clsx(
|
|
"re-w-20",
|
|
"re-flex-shrink-0",
|
|
"re-text-gray-400",
|
|
)}
|
|
>
|
|
Status:
|
|
</div>
|
|
<div
|
|
className={clsx(
|
|
"re-flex-1",
|
|
"re-capitalize",
|
|
)}
|
|
>
|
|
<Status activity={activity} />
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={clsx(
|
|
"re-flex",
|
|
"re-items-center",
|
|
"re-justify-start",
|
|
"re-w-full",
|
|
"re-text-xs",
|
|
"re-py-1",
|
|
)}
|
|
>
|
|
<div
|
|
className={clsx(
|
|
"re-w-20",
|
|
"re-flex-shrink-0",
|
|
"re-text-gray-400",
|
|
)}
|
|
>
|
|
Created At:
|
|
</div>
|
|
<div
|
|
className={clsx(
|
|
"re-flex-1",
|
|
"re-capitalize",
|
|
)}
|
|
>
|
|
{dayjs(activity.createdAt).format(
|
|
"HH:mm:ss:SSS",
|
|
)}
|
|
</div>
|
|
</div>
|
|
<div
|
|
className={clsx(
|
|
"re-flex",
|
|
"re-items-center",
|
|
"re-justify-start",
|
|
"re-w-full",
|
|
"re-text-xs",
|
|
"re-py-1",
|
|
)}
|
|
>
|
|
<div
|
|
className={clsx(
|
|
"re-w-20",
|
|
"re-flex-shrink-0",
|
|
"re-text-gray-400",
|
|
)}
|
|
>
|
|
Updated At:
|
|
</div>
|
|
<div
|
|
className={clsx(
|
|
"re-flex-1",
|
|
"re-capitalize",
|
|
)}
|
|
>
|
|
{dayjs(activity.updatedAt).format(
|
|
"HH:mm:ss:SSS",
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div className={clsx("re-flex", "re-flex-col")}>
|
|
{getOwners(activity).length > 0 && (
|
|
<div
|
|
className={clsx(
|
|
"re-px-2",
|
|
"re-py-4",
|
|
"re-flex",
|
|
"re-flex-col",
|
|
"re-gap-2",
|
|
"re-border-b",
|
|
"re-border-b-gray-700",
|
|
)}
|
|
>
|
|
<div
|
|
className={clsx(
|
|
"re-text-xs",
|
|
"re-font-semibold",
|
|
"re-text-gray-300",
|
|
)}
|
|
>
|
|
Owner(s)
|
|
</div>
|
|
<Owners activity={activity} />
|
|
</div>
|
|
)}
|
|
<div
|
|
className={clsx(
|
|
"re-px-2",
|
|
"re-py-4",
|
|
"re-flex",
|
|
"re-flex-col",
|
|
"re-gap-2",
|
|
"re-border-b",
|
|
"re-border-b-gray-700",
|
|
)}
|
|
>
|
|
<div
|
|
className={clsx(
|
|
"re-text-xs",
|
|
"re-font-semibold",
|
|
"re-text-gray-300",
|
|
)}
|
|
>
|
|
Key
|
|
</div>
|
|
<JsonViewer
|
|
data={activity.key ?? []}
|
|
label="Key"
|
|
/>
|
|
</div>
|
|
{activity.type === "mutation" &&
|
|
activity.variables && (
|
|
<div
|
|
className={clsx(
|
|
"re-px-2",
|
|
"re-py-4",
|
|
"re-flex",
|
|
"re-flex-col",
|
|
"re-gap-2",
|
|
"re-border-b",
|
|
"re-border-b-gray-700",
|
|
)}
|
|
>
|
|
<div
|
|
className={clsx(
|
|
"re-text-xs",
|
|
"re-font-semibold",
|
|
"re-text-gray-300",
|
|
)}
|
|
>
|
|
Variables
|
|
</div>
|
|
<JsonViewer
|
|
data={activity.variables ?? {}}
|
|
label="Variables"
|
|
/>
|
|
</div>
|
|
)}
|
|
{activity.state.data && (
|
|
<div
|
|
className={clsx(
|
|
"re-px-2",
|
|
"re-py-4",
|
|
"re-flex",
|
|
"re-flex-col",
|
|
"re-gap-2",
|
|
"re-border-b",
|
|
"re-border-b-gray-700",
|
|
)}
|
|
>
|
|
<div
|
|
className={clsx(
|
|
"re-text-xs",
|
|
"re-font-semibold",
|
|
"re-text-gray-300",
|
|
)}
|
|
>
|
|
Data
|
|
</div>
|
|
<JsonViewer
|
|
data={activity.state.data ?? {}}
|
|
label="Data"
|
|
/>
|
|
</div>
|
|
)}
|
|
{activity.state.error && (
|
|
<div
|
|
className={clsx(
|
|
"re-px-2",
|
|
"re-py-4",
|
|
"re-flex",
|
|
"re-flex-col",
|
|
"re-gap-2",
|
|
"re-border-b",
|
|
"re-border-b-gray-700",
|
|
)}
|
|
>
|
|
<div
|
|
className={clsx(
|
|
"re-text-xs",
|
|
"re-font-semibold",
|
|
"re-text-gray-300",
|
|
)}
|
|
>
|
|
Error
|
|
</div>
|
|
<JsonViewer
|
|
data={activity.state.error ?? {}}
|
|
label="Error"
|
|
/>
|
|
</div>
|
|
)}
|
|
{activity.state && (
|
|
<div
|
|
className={clsx(
|
|
"re-px-2",
|
|
"re-py-4",
|
|
"re-flex",
|
|
"re-flex-col",
|
|
"re-gap-2",
|
|
)}
|
|
>
|
|
<div
|
|
className={clsx(
|
|
"re-text-xs",
|
|
"re-font-semibold",
|
|
"re-text-gray-300",
|
|
)}
|
|
>
|
|
Extra
|
|
</div>
|
|
<JsonViewer
|
|
data={excludeKeys(activity.state, [
|
|
"data",
|
|
"error",
|
|
"status",
|
|
])}
|
|
label="Extra"
|
|
/>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</>
|
|
) : (
|
|
<div
|
|
className={clsx(
|
|
"re-w-full",
|
|
"re-h-full",
|
|
"re-flex",
|
|
"re-justify-center",
|
|
"re-items-center",
|
|
"re-text-gray-600",
|
|
)}
|
|
>
|
|
No activity selected
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|