console: Syncs: saved state editor

jitsucom · Feb 5, 2025 · 4462fea · 4462fea
1 parent 87d76f7
commit 4462fea
Show file tree

Hide file tree

Showing 7 changed files with 460 additions and 8 deletions.
diff --git a/.github/workflows/test-and-build.yml b/.github/workflows/test-and-build.yml
@@ -42,7 +42,7 @@ jobs:
         run: pnpm build
       - name: Run Tests
         run: pnpm test
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         if: always()
         with:
           path: libs/jitsu-js/playwright/artifacts

diff --git a/webapps/console/components/CodeEditor/CodeEditor.tsx b/webapps/console/components/CodeEditor/CodeEditor.tsx
@@ -1,5 +1,5 @@
 import Editor from "@monaco-editor/react";
-import React, { useCallback, useEffect, useRef } from "react";
+import React, { ReactNode, useCallback, useEffect, useRef } from "react";
 import { LoadingAnimation } from "../GlobalLoader/GlobalLoader";
 import debounce from "lodash/debounce";
 import * as monaco from "monaco-editor";
@@ -16,6 +16,8 @@ type CodeEditorProps = {
   ctrlSCallback?: (value: string) => void;
   foldLevel?: number;
   extraSuggestions?: string;
+  loaderNode?: ReactNode;
+  autoFit?: boolean;
   monacoOptions?: Partial<monaco.editor.IStandaloneEditorConstructionOptions>;
 };
 
@@ -31,6 +33,8 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
   monacoOptions,
   extraSuggestions,
   foldLevel,
+  loaderNode,
+  autoFit,
 }) => {
   const editorRef = useRef<any>(null);
   const [mounted, setMounted] = React.useState(false);
@@ -54,9 +58,12 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
           handleChangePosition?.(editor.getModel().getOffsetAt(e.position));
         });
       }
+      if (autoFit) {
+        editor.layout({ width: editor.layout.width, height: editor.getContentHeight() + 2 });
+      }
       setMounted(true);
     },
-    [extraSuggestions, foldLevel, handleChangePosition, value]
+    [autoFit, extraSuggestions, foldLevel, handleChangePosition, value]
   );
 
   useEffect(() => {
@@ -107,7 +114,7 @@ export const CodeEditor: React.FC<CodeEditorProps> = ({
         onChange={v => {
           handleChange(v || "");
         }}
-        loading={<LoadingAnimation />}
+        loading={loaderNode || <LoadingAnimation />}
         language={language}
         height={height}
         width={width}

diff --git a/webapps/console/pages/[workspaceId]/connections/index.tsx b/webapps/console/pages/[workspaceId]/connections/index.tsx
@@ -60,7 +60,7 @@ export const ConnectionTitle: React.FC<{
       {service && <ServiceTitle size={"small"} service={service} />}
       {stream && <StreamTitle size={"small"} stream={stream} />}
       {!stream && !service && "DELETED "}
-      {"→"}
+      {"➞"}
       <DestinationTitle size={"small"} destination={destination} />
       {showLink && (
         <WJitsuButton

diff --git a/webapps/console/pages/[workspaceId]/syncs/index.tsx b/webapps/console/pages/[workspaceId]/syncs/index.tsx
@@ -42,6 +42,7 @@ import omit from "lodash/omit";
 import { toURL } from "../../../lib/shared/url";
 import { useConfigObjectLinks, useConfigObjectList, useStoreReload } from "../../../lib/store";
 import { getCoreDestinationTypeNonStrict } from "../../../lib/schema/destinations";
+import { FaFloppyDisk } from "react-icons/fa6";
 
 dayjs.extend(relativeTime);
 dayjs.extend(utc);
@@ -328,7 +329,7 @@ function SyncsTable({ links, services, destinations }: RemoteEntitiesProps) {
           },
           {
             disabled: t?.status === "RUNNING" || !!runPressed,
-            tooltip: t?.status === "RUNNING" ? "Sync is already runPressed" : undefined,
+            tooltip: t?.status === "RUNNING" ? "Sync is already running" : undefined,
             icon:
               runPressed == link.id ? (
                 <Loader2 className="animate-spin w-3.5 h-3.5" />
@@ -372,6 +373,12 @@ function SyncsTable({ links, services, destinations }: RemoteEntitiesProps) {
             label: "API",
             collapsed: true,
           },
+          {
+            icon: <FaFloppyDisk className={"w-4 h-4"} />,
+            label: "Saved State",
+            href: `/syncs/state?id=${link.id}`,
+            collapsed: true,
+          },
           {
             icon: <FaTrash />,
             onClick: async () => {
@@ -395,6 +402,28 @@ function SyncsTable({ links, services, destinations }: RemoteEntitiesProps) {
         columns={columns}
         className="border border-backgroundDark rounded-lg"
         pagination={false}
+        // expandable={{
+        //   expandedRowRender: link => {
+        //     console.log("link", link);
+        //     const task = processTaskStatus(tasks.data.tasks?.[link.id]);
+        //     console.log("task", task);
+        //     return (
+        //       <TaskStatusResultTable
+        //         error={task.error ?? ""}
+        //         stats={Object.entries(task.stats).reduce((arr, v) => {
+        //           const o = { key: v[0], stream: v[0], ...(v[1] as any) };
+        //           arr.push(o);
+        //           return arr;
+        //         }, [] as any[])}
+        //       />
+        //     );
+        //   },
+        //   rowExpandable: link => {
+        //     const t = tasks.data.tasks?.[link.id];
+        //     return !!t && t.status !== "SKIPPED";
+        //   },
+        //   // expandIcon: () => undefined,
+        // }}
         loading={loading}
         onChange={onChange}
       />