@workflow/web-shared 5.0.0-beta.2 → 5.0.0-beta.4

package/src/components/new-trace-viewer/detail-panel.tsx

@@ -0,0 +1,58 @@
+'use client';
+
+import { X } from 'lucide-react';
+import type { ReactNode } from 'react';
+import type { Span } from '../trace-viewer/types';
+import { formatDuration, getHighResInMs } from '../trace-viewer/util/timing';
+import { getSpanDurationMs } from './utils';
+
+interface DetailPanelProps {
+  span: Span;
+  rootStart: number;
+  onClose: () => void;
+}
+
+export function DetailPanel({
+  span,
+  rootStart,
+  onClose,
+}: DetailPanelProps): ReactNode {
+  const startMs = getHighResInMs(span.startTime);
+  const durationMs = getSpanDurationMs(span);
+  const offsetMs = startMs - rootStart;
+
+  return (
+    <aside className="grid h-full max-h-full grid-rows-[2.5rem_1fr] bg-background-200">
+      <div className="flex items-center justify-between px-3 border-b border-gray-alpha-400">
+        <span className="text-sm font-medium text-gray-1000 truncate">
+          {span.name}
+        </span>
+        <button
+          type="button"
+          className="p-1 rounded-md text-gray-900 hover:text-gray-1000 hover:bg-gray-alpha-200 transition-colors"
+          onClick={onClose}
+        >
+          <X className="w-4 h-4" />
+        </button>
+      </div>
+      <div className="overflow-y-auto p-3 space-y-3">
+        <dl className="grid grid-cols-[auto_1fr] gap-x-3 gap-y-1.5 text-sm">
+          <dt className="text-gray-900">Resource</dt>
+          <dd className="text-gray-1000 font-mono">{span.resource}</dd>
+          <dt className="text-gray-900">Duration</dt>
+          <dd className="text-gray-1000 tabular-nums font-mono">
+            {formatDuration(durationMs)}
+          </dd>
+          <dt className="text-gray-900">Offset</dt>
+          <dd className="text-gray-1000 tabular-nums font-mono">
+            +{formatDuration(offsetMs)}
+          </dd>
+          <dt className="text-gray-900">Status</dt>
+          <dd className="text-gray-1000 font-mono">
+            {span.status.code === 2 ? 'Error' : 'OK'}
+          </dd>
+        </dl>
+      </div>
+    </aside>
+  );
+}

package/src/components/new-trace-viewer/icons.tsx

@@ -0,0 +1,79 @@
+const WorkflowIcon = () => {
+  return (
+    <svg
+      data-testid="geist-icon"
+      height="16"
+      stroke-linejoin="round"
+      style={{ color: 'currentColor' }}
+      viewBox="0 0 16 16"
+      width="16"
+    >
+      <path
+        d="M5.75 7L6.4209 7.33594L4.85254 10.4717C5.38789 10.771 5.75 11.3431 5.75 12V14C5.75 14.9665 4.96648 15.75 4 15.75H2C1.03352 15.75 0.25 14.9665 0.25 14V12C0.25 11.0335 1.03352 10.25 2 10.25H3.28711L5.0791 6.66504L5.75 7ZM14 10.25C14.9665 10.25 15.75 11.0335 15.75 12V14C15.75 14.9665 14.9665 15.75 14 15.75H12C11.1185 15.75 10.3909 15.098 10.2695 14.25H7V12.75H10.25V12C10.25 11.0335 11.0335 10.25 12 10.25H14ZM2 11.75C1.86192 11.75 1.75 11.8619 1.75 12V14C1.75 14.1381 1.86192 14.25 2 14.25H4C4.13808 14.25 4.25 14.1381 4.25 14V12C4.25 11.8619 4.13808 11.75 4 11.75H2ZM12 11.75C11.8619 11.75 11.75 11.8619 11.75 12V14C11.75 14.1381 11.8619 14.25 12 14.25H14C14.1381 14.25 14.25 14.1381 14.25 14V12C14.25 11.8619 14.1381 11.75 14 11.75H12ZM9 0.25C9.96649 0.25 10.75 1.03351 10.75 2V4C10.75 4.44642 10.5808 4.85197 10.3057 5.16113L12.2041 8.6416L10.8877 9.36035L8.91895 5.75H7C6.03351 5.75 5.25 4.96649 5.25 4V2C5.25 1.03351 6.03351 0.25 7 0.25H9ZM7 1.75C6.86193 1.75 6.75 1.86193 6.75 2V4C6.75 4.13807 6.86193 4.25 7 4.25H9C9.13807 4.25 9.25 4.13807 9.25 4V2C9.25 1.86193 9.13807 1.75 9 1.75H7Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+};
+
+const WebhookIcon = () => {
+  return (
+    <svg
+      data-testid="geist-icon"
+      height="16"
+      stroke-linejoin="round"
+      viewBox="0 0 16 16"
+      width="16"
+      style={{ color: 'currentColor' }}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M5.8349 3.24994C5.14454 4.44567 5.55423 5.97464 6.74996 6.665L7.39465 7.03721L7.02726 7.68466L5.14599 11C5.21289 11.1531 5.25 11.3222 5.25 11.5C5.25 12.1904 4.69036 12.75 4 12.75C3.30964 12.75 2.75 12.1904 2.75 11.5C2.75 10.8634 3.22584 10.338 3.84123 10.26L5.38944 7.5316C3.95909 6.30274 3.55857 4.19264 4.53586 2.49994C5.64043 0.586765 8.08679 -0.0687357 9.99996 1.03583C11.836 2.09584 12.5137 4.39156 11.5892 6.26591L10.4949 4.33754C10.4418 3.53274 10.0009 2.76843 9.24996 2.33487C8.05423 1.64452 6.52525 2.0542 5.8349 3.24994ZM9.146 4.99996C9.21289 4.84686 9.25 4.67776 9.25 4.5C9.25 3.80964 8.69036 3.25 8 3.25C7.30964 3.25 6.75 3.80964 6.75 4.5C6.75 5.13659 7.22586 5.66203 7.84127 5.74002L9.72266 9.05556L10.0956 9.71274L10.75 9.33493C11.9457 8.64458 13.4747 9.05427 14.165 10.25C14.8554 11.4457 14.4457 12.9747 13.25 13.6651C12.5047 14.0953 11.63 14.0983 10.9096 13.75H8.69252C9.85895 15.4685 12.1727 16.0191 14 14.9641C15.9131 13.8595 16.5686 11.4132 15.4641 9.5C14.4886 7.81038 12.4665 7.10169 10.6895 7.71998L9.146 4.99996ZM13.25 11.5C13.25 12.1904 12.6904 12.75 12 12.75C11.591 12.75 11.228 12.5536 10.9999 12.25H7.9298C7.57875 14.1006 5.95279 15.5 4 15.5C1.79086 15.5 0 13.7091 0 11.5C0 9.40018 1.61801 7.67826 3.67529 7.51299L2.58098 9.44147C1.92792 9.89251 1.5 10.6463 1.5 11.5C1.5 12.8807 2.61929 14 4 14C5.38071 14 6.5 12.8807 6.5 11.5V10.75H7.25H10.9999C11.228 10.4464 11.591 10.25 12 10.25C12.6904 10.25 13.25 10.8096 13.25 11.5Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+};
+
+const SleepIcon = () => {
+  return (
+    <svg
+      data-testid="geist-icon"
+      height="16"
+      strokeLinejoin="round"
+      viewBox="0 0 16 16"
+      width="16"
+      style={{ color: 'currentColor' }}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M7.25 1.25V2.03971C5.87928 2.18571 4.62678 2.72736 3.6089 3.54824L3.03033 2.96967L2.5 2.43934L1.43934 3.5L1.96967 4.03033L2.54824 4.6089C1.57979 5.80976 1 7.33717 1 9C1 12.866 4.13401 16 8 16C11.866 16 15 12.866 15 9C15 7.33717 14.4202 5.80976 13.4518 4.6089L14.0303 4.03033L14.5607 3.5L13.5 2.43934L12.9697 2.96967L12.3911 3.54824C11.3732 2.72736 10.1207 2.18571 8.75 2.03971V1.25H9.25H10V-0.25H9.25H8.75H7.25H6.75H6V1.25H6.75H7.25ZM2.5 9C2.5 5.96243 4.96243 3.5 8 3.5C11.0376 3.5 13.5 5.96243 13.5 9C13.5 12.0376 11.0376 14.5 8 14.5C4.96243 14.5 2.5 12.0376 2.5 9ZM8.75 6.75V6H7.25V6.75V9V9.75H8.75V9V6.75Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+};
+
+const StepForwardIcon = () => {
+  return (
+    <svg
+      data-testid="geist-icon"
+      height="16"
+      strokeLinejoin="round"
+      viewBox="0 0 16 16"
+      width="16"
+      style={{ color: 'currentColor' }}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M4.21969 12.5303L4.75002 13.0607L5.81068 12L5.28035 11.4697L1.81068 7.99999L5.28035 4.53032L5.81068 3.99999L4.75002 2.93933L4.21969 3.46966L0.39647 7.29289C0.00594562 7.68341 0.00594562 8.31658 0.39647 8.7071L4.21969 12.5303ZM11.7804 12.5303L11.25 13.0607L10.1894 12L10.7197 11.4697L14.1894 7.99999L10.7197 4.53032L10.1894 3.99999L11.25 2.93933L11.7804 3.46966L15.6036 7.29289C15.9941 7.68341 15.9941 8.31658 15.6036 8.7071L11.7804 12.5303Z"
+        fill="currentColor"
+      ></path>
+    </svg>
+  );
+};
+
+export { WorkflowIcon, WebhookIcon, SleepIcon, StepForwardIcon };