@open-mercato/core 0.6.2-develop.3330.1.8ad2b3b84c → 0.6.2-develop.3366.1.4692954e44

package/dist/modules/integrations/backend/integrations/[id]/page.js

@@ -47,6 +47,11 @@ const UNSUPPORTED_CREDENTIAL_FIELD_TYPES = /* @__PURE__ */ new Set(["oauth", "ss
 function isEditableCredentialField(field) {
   return !UNSUPPORTED_CREDENTIAL_FIELD_TYPES.has(field.type);
 }
+const LOG_LEVEL_STYLES = {
+  info: "bg-blue-100 text-blue-800",
+  warn: "bg-yellow-100 text-yellow-800",
+  error: "bg-red-100 text-red-800"
+};
 const HEALTH_STATUS_STYLES = {
   healthy: "bg-green-100 text-green-800",
   degraded: "bg-yellow-100 text-yellow-800",
@@ -59,6 +64,66 @@ const HEALTH_STATUS_ICONS = {
   unhealthy: XCircle,
   unconfigured: AlertTriangle
 };
+function formatRunStatusLabel(status, t) {
+  switch (status) {
+    case "pending":
+      return t("integrations.detail.runActivity.status.pending", "Pending");
+    case "running":
+      return t("integrations.detail.runActivity.status.running", "Running");
+    case "completed":
+      return t("integrations.detail.runActivity.status.completed", "Completed");
+    case "failed":
+      return t("integrations.detail.runActivity.status.failed", "Failed");
+    case "cancelled":
+      return t("integrations.detail.runActivity.status.cancelled", "Cancelled");
+    default:
+      return status;
+  }
+}
+function RunActivityStrip({
+  run,
+  refreshedAt,
+  isRefreshing,
+  onRefresh,
+  t
+}) {
+  if (!run) return null;
+  const progress = typeof run.progressJob?.progressPercent === "number" ? run.progressJob.progressPercent : 0;
+  const processed = typeof run.progressJob?.processedCount === "number" ? run.progressJob.processedCount : 0;
+  const total = typeof run.progressJob?.totalCount === "number" ? run.progressJob.totalCount : null;
+  const statusClass = run.status === "completed" ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300" : run.status === "failed" ? "border-red-500/30 bg-red-500/10 text-red-700 dark:text-red-300" : run.status === "cancelled" ? "border-zinc-500/30 bg-zinc-500/10 text-zinc-700 dark:text-zinc-300" : "border-blue-500/30 bg-blue-500/10 text-blue-700 dark:text-blue-300";
+  return /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3 rounded-lg border bg-muted/20 px-4 py-3 text-sm", children: [
+    /* @__PURE__ */ jsxs(Badge, { variant: "outline", className: cn("gap-1.5", statusClass), children: [
+      /* @__PURE__ */ jsx(RefreshCw, { className: cn("h-3.5 w-3.5", run.status === "running" ? "animate-spin" : "") }),
+      formatRunStatusLabel(run.status, t)
+    ] }),
+    /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+      t("integrations.detail.runActivity.processed", "Processed"),
+      ": ",
+      /* @__PURE__ */ jsxs("span", { className: "font-medium text-foreground", children: [
+        processed,
+        total !== null ? ` / ${total}` : ""
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+      t("integrations.detail.runActivity.progress", "Progress"),
+      ": ",
+      /* @__PURE__ */ jsxs("span", { className: "font-medium text-foreground", children: [
+        progress,
+        "%"
+      ] })
+    ] }),
+    refreshedAt ? /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+      t("integrations.detail.runActivity.lastRefreshed", "Last refreshed"),
+      ": ",
+      new Date(refreshedAt).toLocaleTimeString()
+    ] }) : null,
+    /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", size: "sm", className: "ml-auto", onClick: onRefresh, disabled: isRefreshing, children: [
+      isRefreshing ? /* @__PURE__ */ jsx(Spinner, { className: "mr-2 h-4 w-4" }) : /* @__PURE__ */ jsx(RefreshCw, { className: "mr-2 h-4 w-4" }),
+      t("integrations.detail.runActivity.refresh", "Refresh")
+    ] })
+  ] });
+}
 function DetailLogSparkline({ counts, className }) {
   const max = Math.max(1, ...counts);
   const w = 120;
@@ -217,6 +282,9 @@ function IntegrationDetailPage({ params }) {
   const [isCheckingHealth, setIsCheckingHealth] = React.useState(false);
   const [isTogglingState, setIsTogglingState] = React.useState(false);
   const [latestHealthResult, setLatestHealthResult] = React.useState(null);
+  const [activeRunDetail, setActiveRunDetail] = React.useState(null);
+  const [activeRunRefreshedAt, setActiveRunRefreshedAt] = React.useState(null);
+  const [isRefreshingRunActivity, setIsRefreshingRunActivity] = React.useState(false);
   const [activeTab, setActiveTab] = React.useState("credentials");
   const credentialsFormId = React.useId();
   const resolveCurrentIntegrationId = React.useCallback(() => {
@@ -297,6 +365,35 @@ function IntegrationDetailPage({ params }) {
   const refreshLogs = React.useCallback(async () => {
     await loadLogs();
   }, [loadLogs]);
+  const refreshHealthSnapshot = React.useCallback(async () => {
+    await loadDetail();
+  }, [loadDetail]);
+  const runIdFromUrl = searchParams?.get("runId") ?? null;
+  const refreshRunActivity = React.useCallback(async (options) => {
+    if (!runIdFromUrl) {
+      setActiveRunDetail(null);
+      setActiveRunRefreshedAt(null);
+      return null;
+    }
+    if (options?.showLoading) setIsRefreshingRunActivity(true);
+    try {
+      const call = await apiCall(
+        `/api/data_sync/runs/${encodeURIComponent(runIdFromUrl)}`,
+        void 0,
+        { fallback: null }
+      );
+      await loadLogs();
+      await loadDetail();
+      if (call.ok && call.result) {
+        setActiveRunDetail(call.result);
+        setActiveRunRefreshedAt((/* @__PURE__ */ new Date()).toISOString());
+        return call.result;
+      }
+      return null;
+    } finally {
+      if (options?.showLoading) setIsRefreshingRunActivity(false);
+    }
+  }, [loadDetail, loadLogs, runIdFromUrl]);
   const injectionContext = React.useMemo(
     () => ({
       formId: mutationContextId,
@@ -313,6 +410,7 @@ function IntegrationDetailPage({ params }) {
       setActiveTab,
       refreshDetail,
       refreshLogs,
+      refreshHealthSnapshot,
       retryLastMutation
     }),
     [
@@ -324,6 +422,7 @@ function IntegrationDetailPage({ params }) {
       latestHealthResult,
       mutationContextId,
       refreshDetail,
+      refreshHealthSnapshot,
       refreshLogs,
       retryLastMutation
     ]
@@ -571,8 +670,12 @@ function IntegrationDetailPage({ params }) {
     });
   }), [editableCredentialFields, t]);
   const latestHealthLog = React.useMemo(() => logs.find(isHealthLog) ?? null, [logs]);
-  const healthMessage = latestHealthResult?.message ?? (typeof latestHealthLog?.payload?.message === "string" ? latestHealthLog.payload.message : null);
-  const healthDetailsSource = latestHealthResult?.details ?? extractHealthDetails(latestHealthLog?.payload);
+  const latestOperationalLog = React.useMemo(
+    () => logs.find((log) => typeof log.payload?.operationalStatus === "string" || typeof log.payload?.summary === "string") ?? null,
+    [logs]
+  );
+  const healthMessage = latestHealthResult?.message ?? (typeof latestHealthLog?.payload?.message === "string" ? latestHealthLog.payload.message : typeof latestOperationalLog?.payload?.summary === "string" ? latestOperationalLog.payload.summary : null);
+  const healthDetailsSource = latestHealthResult?.details ?? extractHealthDetails(latestHealthLog?.payload ?? latestOperationalLog?.payload);
   const healthDetails = latestHealthLog?.code ? { ...healthDetailsSource, code: latestHealthLog.code } : healthDetailsSource;
   const healthDetailEntries = Object.entries(healthDetails);
   const resolvedIntegration = detail?.integration ?? null;
@@ -622,8 +725,37 @@ function IntegrationDetailPage({ params }) {
     setActiveTab(nextTab);
     if (!currentIntegrationId) return;
     const basePath = `/backend/integrations/${encodeURIComponent(currentIntegrationId)}`;
-    router.replace(nextTab === "credentials" ? basePath : `${basePath}?tab=${encodeURIComponent(nextTab)}`);
-  }, [resolveCurrentIntegrationId, router, visibleTabIds]);
+    const params2 = new URLSearchParams(searchParams?.toString() ?? "");
+    if (nextTab === "credentials") params2.delete("tab");
+    else params2.set("tab", nextTab);
+    const query = params2.toString();
+    router.replace(query ? `${basePath}?${query}` : basePath);
+  }, [resolveCurrentIntegrationId, router, searchParams, visibleTabIds]);
+  React.useEffect(() => {
+    if (!runIdFromUrl) {
+      setActiveRunDetail(null);
+      setActiveRunRefreshedAt(null);
+      return;
+    }
+    if (activeTab !== "logs" && activeTab !== "health") return;
+    let cancelled = false;
+    let timeoutId = null;
+    const poll = async () => {
+      const detail2 = await refreshRunActivity();
+      if (cancelled) return;
+      const status = detail2?.status ?? null;
+      if (status === "pending" || status === "running") {
+        timeoutId = setTimeout(() => {
+          void poll();
+        }, 4e3);
+      }
+    };
+    void poll();
+    return () => {
+      cancelled = true;
+      if (timeoutId) clearTimeout(timeoutId);
+    };
+  }, [activeTab, refreshRunActivity, runIdFromUrl]);
   if (isLoading) return /* @__PURE__ */ jsx(Page, { children: /* @__PURE__ */ jsx(PageBody, { children: /* @__PURE__ */ jsx(LoadingMessage, { label: t("integrations.detail.title") }) }) });
   if (error || !detail || !resolvedIntegration || !resolvedState) {
     return /* @__PURE__ */ jsx(Page, { children: /* @__PURE__ */ jsx(PageBody, { children: /* @__PURE__ */ jsx(ErrorMessage, { label: error ?? t("integrations.detail.loadError") }) }) });
@@ -855,67 +987,121 @@ function IntegrationDetailPage({ params }) {
           isEnabled: resolvedState.isEnabled
         }
       ) }) : null,
-      showHealthTab ? /* @__PURE__ */ jsx(TabsContent, { value: "health", className: "mt-0 space-y-4", children: /* @__PURE__ */ jsxs(Card, { className: "gap-4 py-4", children: [
-        /* @__PURE__ */ jsx(CardHeader, { className: "px-5", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-          /* @__PURE__ */ jsx(CardTitle, { children: t("integrations.detail.health.title") }),
+      showHealthTab ? /* @__PURE__ */ jsxs(TabsContent, { value: "health", className: "mt-0 space-y-4", children: [
+        /* @__PURE__ */ jsx(
+          RunActivityStrip,
+          {
+            run: activeRunDetail,
+            refreshedAt: activeRunRefreshedAt,
+            isRefreshing: isRefreshingRunActivity,
+            onRefresh: () => void refreshRunActivity({ showLoading: true }),
+            t
+          }
+        ),
+        /* @__PURE__ */ jsxs(Card, { className: "gap-4 py-4", children: [
+          /* @__PURE__ */ jsx(CardHeader, { className: "px-5", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ jsx(CardTitle, { children: t("integrations.detail.health.title") }),
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  type: "button",
+                  variant: "outline",
+                  size: "sm",
+                  onClick: () => void refreshRunActivity({ showLoading: true }),
+                  disabled: isRefreshingRunActivity || !runIdFromUrl,
+                  children: [
+                    isRefreshingRunActivity ? /* @__PURE__ */ jsx(Spinner, { className: "mr-2 h-4 w-4" }) : /* @__PURE__ */ jsx(RefreshCw, { className: "mr-2 h-4 w-4" }),
+                    t("integrations.detail.runActivity.refresh", "Refresh")
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                Button,
+                {
+                  type: "button",
+                  variant: "outline",
+                  size: "sm",
+                  onClick: () => void handleHealthCheck(),
+                  disabled: isCheckingHealth,
+                  children: [
+                    isCheckingHealth ? /* @__PURE__ */ jsx(Spinner, { className: "mr-2 h-4 w-4" }) : /* @__PURE__ */ jsx(Zap, { className: "mr-2 h-4 w-4" }),
+                    isCheckingHealth ? t("integrations.detail.health.checking") : t("integrations.detail.health.check")
+                  ]
+                }
+              )
+            ] })
+          ] }) }),
+          /* @__PURE__ */ jsxs(CardContent, { className: "space-y-3 px-5", children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3 rounded-lg border bg-muted/20 px-4 py-3", children: [
+              displayHealthStatus ? /* @__PURE__ */ jsxs(Badge, { className: `gap-1.5 ${HEALTH_STATUS_STYLES[displayHealthStatus] ?? ""}`, children: [
+                HealthStatusIcon ? /* @__PURE__ */ jsx(HealthStatusIcon, { className: "h-3.5 w-3.5" }) : null,
+                t(`integrations.detail.health.${displayHealthStatus}`)
+              ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
+                /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4" }),
+                /* @__PURE__ */ jsx("span", { children: t("integrations.detail.health.unknown") })
+              ] }),
+              healthStatusDescription ? /* @__PURE__ */ jsx("p", { className: "min-w-0 flex-1 text-sm text-muted-foreground", children: healthStatusDescription }) : null,
+              /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground md:ml-auto", children: resolvedState.lastHealthCheckedAt ? t("integrations.detail.health.lastChecked", { date: new Date(resolvedState.lastHealthCheckedAt).toLocaleString() }) : t("integrations.detail.health.neverChecked") })
+            ] }),
+            healthMessage || healthDetailEntries.length > 0 ? /* @__PURE__ */ jsxs("div", { className: `grid gap-3 ${healthMessage && healthDetailEntries.length > 0 ? "xl:grid-cols-[minmax(0,1.25fr)_minmax(0,1fr)]" : ""}`, children: [
+              healthMessage ? /* @__PURE__ */ jsxs("div", { className: "rounded-lg border px-4 py-3", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-overline font-medium uppercase tracking-widest text-muted-foreground", children: t("integrations.detail.health.lastResult", "Last result") }),
+                /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-sm", children: healthMessage })
+              ] }) : null,
+              healthDetailEntries.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "rounded-lg border px-4 py-3", children: [
+                /* @__PURE__ */ jsx("p", { className: "text-overline font-medium uppercase tracking-widest text-muted-foreground", children: t("integrations.detail.health.details", "Details") }),
+                /* @__PURE__ */ jsx("dl", { className: "mt-2 grid gap-x-6 gap-y-2 sm:grid-cols-2", children: healthDetailEntries.map(([key, value]) => /* @__PURE__ */ jsxs("div", { children: [
+                  /* @__PURE__ */ jsx("dt", { className: "text-xs font-medium text-muted-foreground", children: formatLogDetailLabel(key) }),
+                  /* @__PURE__ */ jsx("dd", { className: "mt-0.5 text-sm", children: formatHealthValue(value) })
+                ] }, key)) })
+              ] }) : null
+            ] }) : null
+          ] })
+        ] })
+      ] }) : null,
+      showLogsTab ? /* @__PURE__ */ jsxs(TabsContent, { value: "logs", className: "mt-0 space-y-4", children: [
+        /* @__PURE__ */ jsx(
+          RunActivityStrip,
+          {
+            run: activeRunDetail,
+            refreshedAt: activeRunRefreshedAt,
+            isRefreshing: isRefreshingRunActivity,
+            onRefresh: () => void refreshRunActivity({ showLoading: true }),
+            t
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3", children: [
+          /* @__PURE__ */ jsx("div", { className: "inline-flex", children: /* @__PURE__ */ jsxs(
+            Select,
+            {
+              value: logLevel || void 0,
+              onValueChange: (value) => setLogLevel(value ?? ""),
+              children: [
+                /* @__PURE__ */ jsx(SelectTrigger, { size: "lg", className: "min-w-40", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: t("integrations.detail.logs.level.all") }) }),
+                /* @__PURE__ */ jsxs(SelectContent, { children: [
+                  /* @__PURE__ */ jsx(SelectItem, { value: "info", children: t("integrations.detail.logs.level.info") }),
+                  /* @__PURE__ */ jsx(SelectItem, { value: "warn", children: t("integrations.detail.logs.level.warn") }),
+                  /* @__PURE__ */ jsx(SelectItem, { value: "error", children: t("integrations.detail.logs.level.error") })
+                ] })
+              ]
+            }
+          ) }),
           /* @__PURE__ */ jsxs(
             Button,
             {
               type: "button",
               variant: "outline",
               size: "sm",
-              onClick: () => void handleHealthCheck(),
-              disabled: isCheckingHealth,
+              onClick: () => void refreshRunActivity({ showLoading: true }),
+              disabled: isRefreshingRunActivity || !runIdFromUrl,
               children: [
-                isCheckingHealth ? /* @__PURE__ */ jsx(Spinner, { className: "mr-2 h-4 w-4" }) : /* @__PURE__ */ jsx(Zap, { className: "mr-2 h-4 w-4" }),
-                isCheckingHealth ? t("integrations.detail.health.checking") : t("integrations.detail.health.check")
+                isRefreshingRunActivity ? /* @__PURE__ */ jsx(Spinner, { className: "mr-2 h-4 w-4" }) : /* @__PURE__ */ jsx(RefreshCw, { className: "mr-2 h-4 w-4" }),
+                t("integrations.detail.runActivity.refresh", "Refresh")
               ]
             }
           )
-        ] }) }),
-        /* @__PURE__ */ jsxs(CardContent, { className: "space-y-3 px-5", children: [
-          /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3 rounded-lg border bg-muted/20 px-4 py-3", children: [
-            displayHealthStatus ? /* @__PURE__ */ jsxs(Badge, { className: `gap-1.5 ${HEALTH_STATUS_STYLES[displayHealthStatus] ?? ""}`, children: [
-              HealthStatusIcon ? /* @__PURE__ */ jsx(HealthStatusIcon, { className: "h-3.5 w-3.5" }) : null,
-              t(`integrations.detail.health.${displayHealthStatus}`)
-            ] }) : /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-sm text-muted-foreground", children: [
-              /* @__PURE__ */ jsx(AlertTriangle, { className: "h-4 w-4" }),
-              /* @__PURE__ */ jsx("span", { children: t("integrations.detail.health.unknown") })
-            ] }),
-            healthStatusDescription ? /* @__PURE__ */ jsx("p", { className: "min-w-0 flex-1 text-sm text-muted-foreground", children: healthStatusDescription }) : null,
-            /* @__PURE__ */ jsx("p", { className: "text-xs text-muted-foreground md:ml-auto", children: resolvedState.lastHealthCheckedAt ? t("integrations.detail.health.lastChecked", { date: new Date(resolvedState.lastHealthCheckedAt).toLocaleString() }) : t("integrations.detail.health.neverChecked") })
-          ] }),
-          healthMessage || healthDetailEntries.length > 0 ? /* @__PURE__ */ jsxs("div", { className: `grid gap-3 ${healthMessage && healthDetailEntries.length > 0 ? "xl:grid-cols-[minmax(0,1.25fr)_minmax(0,1fr)]" : ""}`, children: [
-            healthMessage ? /* @__PURE__ */ jsxs("div", { className: "rounded-lg border px-4 py-3", children: [
-              /* @__PURE__ */ jsx("p", { className: "text-overline font-medium uppercase tracking-widest text-muted-foreground", children: t("integrations.detail.health.lastResult", "Last result") }),
-              /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-sm", children: healthMessage })
-            ] }) : null,
-            healthDetailEntries.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "rounded-lg border px-4 py-3", children: [
-              /* @__PURE__ */ jsx("p", { className: "text-overline font-medium uppercase tracking-widest text-muted-foreground", children: t("integrations.detail.health.details", "Details") }),
-              /* @__PURE__ */ jsx("dl", { className: "mt-2 grid gap-x-6 gap-y-2 sm:grid-cols-2", children: healthDetailEntries.map(([key, value]) => /* @__PURE__ */ jsxs("div", { children: [
-                /* @__PURE__ */ jsx("dt", { className: "text-xs font-medium text-muted-foreground", children: formatLogDetailLabel(key) }),
-                /* @__PURE__ */ jsx("dd", { className: "mt-0.5 text-sm", children: formatHealthValue(value) })
-              ] }, key)) })
-            ] }) : null
-          ] }) : null
-        ] })
-      ] }) }) : null,
-      showLogsTab ? /* @__PURE__ */ jsxs(TabsContent, { value: "logs", className: "mt-0 space-y-4", children: [
-        /* @__PURE__ */ jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ jsx("div", { className: "inline-flex", children: /* @__PURE__ */ jsxs(
-          Select,
-          {
-            value: logLevel || void 0,
-            onValueChange: (value) => setLogLevel(value ?? ""),
-            children: [
-              /* @__PURE__ */ jsx(SelectTrigger, { size: "lg", className: "min-w-40", children: /* @__PURE__ */ jsx(SelectValue, { placeholder: t("integrations.detail.logs.level.all") }) }),
-              /* @__PURE__ */ jsxs(SelectContent, { children: [
-                /* @__PURE__ */ jsx(SelectItem, { value: "info", children: t("integrations.detail.logs.level.info") }),
-                /* @__PURE__ */ jsx(SelectItem, { value: "warn", children: t("integrations.detail.logs.level.warn") }),
-                /* @__PURE__ */ jsx(SelectItem, { value: "error", children: t("integrations.detail.logs.level.error") })
-              ] })
-            ]
-          }
-        ) }) }),
+        ] }),
         isLoadingLogs ? /* @__PURE__ */ jsx("div", { className: "flex justify-center py-8", children: /* @__PURE__ */ jsx(Spinner, {}) }) : /* @__PURE__ */ jsx(
           LogList,
           {