@dovetail-v2/refine 0.2.3 → 0.2.4-alpha.0

package/{lib → dist}/components/PodShellModal/PodShell.d.ts

@@ -1,18 +1,16 @@
 import React from 'react';
-import { SocketStatus } from 'src/components/Shell';
-import '@xterm/xterm/css/xterm.css';
+import { SocketStatus } from 'src/components/Shell/common';
 import { PodModel } from 'src/models/pod-model';
 export declare enum OS {
     Linux = "linux",
     Windows = "windows"
 }
-interface PodShellProps {
+export interface PodShellProps {
     pod: PodModel;
     basePath: string;
     onSocketStatusChange?: (socketStatus: SocketStatus) => void;
 }
-interface PodShellHandler {
+export interface PodShellHandler {
     getAllTerminalContents: () => string[];
 }
 export declare const PodShell: React.ForwardRefExoticComponent<PodShellProps & React.RefAttributes<PodShellHandler>>;
-export {};

package/dist/components/PodShellModal/index.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { SocketStatus } from 'src/components/Shell/common';
+import { PodModel } from 'src/models';
+declare const PodShell: React.LazyExoticComponent<React.ForwardRefExoticComponent<import("./PodShell").PodShellProps & React.RefAttributes<import("./PodShell").PodShellHandler>>>;
+interface PodShellModalProps {
+    pod: PodModel;
+    onSocketStatusChange?: (socketStatus: SocketStatus) => void;
+}
+export declare function PodShellModal(props: PodShellModalProps): JSX.Element;
+export { PodShell };

package/dist/components/Shell/Connecting.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Connecting: () => JSX.Element;

package/dist/components/Shell/common.d.ts

@@ -0,0 +1,5 @@
+export declare enum SocketStatus {
+    Opening = "Opening",
+    Open = "Open",
+    Disconnected = "Disconnected"
+}

package/{lib → dist}/components/Shell/index.d.ts

@@ -1,12 +1,8 @@
 import { Terminal } from '@xterm/xterm';
 import React from 'react';
+import { SocketStatus } from './common';
 import { ShellToolbarProps } from './ShellToolbar';
 import '@xterm/xterm/css/xterm.css';
-export declare enum SocketStatus {
-    Opening = "Opening",
-    Open = "Open",
-    Disconnected = "Disconnected"
-}
 export type ShellProps = React.PropsWithChildren<{
     url: string;
     protocols?: string;

package/{lib → dist}/components/index.d.ts

@@ -46,7 +46,6 @@ export * from './ResourceFiledDisplays';
 export * from './Tabs';
 export * as ValueDisplay from './ValueDisplay';
 export * from './ResourceSelect';
-export * from './Shell';
 export * from './PodShellModal';
 export * from './ResourceTable';
 export * from './ErrorContent';

package/dist/index-31874f77.cjs

@@ -0,0 +1,496 @@
+"use strict";
+const common = require("./common-1eb43414.cjs");
+const eagle = require("@cloudtower/eagle");
+const addonCanvas = require("@xterm/addon-canvas");
+const addonFit = require("@xterm/addon-fit");
+const addonSearch = require("@xterm/addon-search");
+const addonWebLinks = require("@xterm/addon-web-links");
+const addonWebgl = require("@xterm/addon-webgl");
+const xterm$1 = require("@xterm/xterm");
+const copyToClipboard = require("copy-to-clipboard");
+const lodashEs = require("lodash-es");
+const React = require("react");
+const iconsReact = require("@cloudtower/icons-react");
+const Connecting_r8rfff = "";
+const LoadingStyle = "l1ur2ktd";
+const Connecting = () => {
+  const {
+    t
+  } = common.useTranslation();
+  return /* @__PURE__ */ common.jsxRuntimeExports.jsxs("div", {
+    className: LoadingStyle,
+    children: [/* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Icon, {
+      src: iconsReact.Loading24GradientBlueIcon,
+      iconWidth: 24,
+      iconHeight: 24,
+      isRotate: true
+    }), /* @__PURE__ */ common.jsxRuntimeExports.jsx("span", {
+      className: eagle.Typo.Display.d2_bold_title,
+      children: t("dovetail.connecting")
+    })]
+  });
+};
+const ShellToolbar_ihg418 = "";
+const ToolbarStyle$1 = "tzxa6d";
+const ToolbarAreaStyle = "t1sxu3rr";
+const IconWrapperStyle = "ix8ych8";
+const IconStyle = "i58m6oo";
+const DividerStyle = "d1t2oa87";
+const TooltipStyle = "tuo8xdg";
+function ShellToolbar(props) {
+  const {
+    className,
+    leftSlot,
+    operations = ["fontSize", "downloadLog", "clear"],
+    searchMatchedTotal,
+    onSetFontSize,
+    onSearchNext,
+    onSearchPre,
+    onDownloadLog,
+    onClear
+  } = props;
+  const {
+    t
+  } = common.useTranslation();
+  const fontSizeOptions = [12, 13, 14, 16, 20];
+  const operationMap = {
+    fontSize: /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.DropdownMenu, {
+      trigger: ["click"],
+      items: fontSizeOptions.map((size) => ({
+        key: `${size}`,
+        title: `${size}px`,
+        text: `${size}px`,
+        onClick: () => {
+          onSetFontSize == null ? void 0 : onSetFontSize(size);
+        }
+      })),
+      slotsElements: {
+        trigger: () => /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Tooltip, {
+          title: /* @__PURE__ */ common.jsxRuntimeExports.jsx("span", {
+            className: TooltipStyle,
+            children: t("dovetail.font_size")
+          }),
+          children: /* @__PURE__ */ common.jsxRuntimeExports.jsx("div", {
+            style: {
+              display: "flex",
+              alignItems: "center"
+            },
+            children: /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Icon, {
+              className: IconStyle,
+              src: iconsReact.FontSize16GrayIcon,
+              hoverSrc: iconsReact.FontSize16BlueIcon
+            })
+          })
+        })
+      }
+    }),
+    downloadLog: /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Tooltip, {
+      title: /* @__PURE__ */ common.jsxRuntimeExports.jsx("span", {
+        className: TooltipStyle,
+        children: t("dovetail.download_shell_content")
+      }),
+      children: /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Icon, {
+        className: IconStyle,
+        src: iconsReact.LogCollection16GrayIcon,
+        hoverSrc: iconsReact.LogCollection16GradientBlueIcon,
+        onClick: onDownloadLog
+      })
+    }),
+    clear: /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Tooltip, {
+      title: /* @__PURE__ */ common.jsxRuntimeExports.jsx("span", {
+        className: TooltipStyle,
+        children: t("dovetail.clear_shell")
+      }),
+      children: /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Icon, {
+        className: IconStyle,
+        src: iconsReact.TrashBinDeletePermanently16GrayIcon,
+        hoverSrc: iconsReact.TrashBinDeletePermanently16BlueIcon,
+        onClick: onClear
+      })
+    })
+  };
+  return /* @__PURE__ */ common.jsxRuntimeExports.jsxs("div", {
+    className: common.cx_default(ToolbarStyle$1, className),
+    children: [/* @__PURE__ */ common.jsxRuntimeExports.jsx("div", {
+      className: ToolbarAreaStyle,
+      children: leftSlot
+    }), /* @__PURE__ */ common.jsxRuntimeExports.jsxs("div", {
+      className: ToolbarAreaStyle,
+      children: [/* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.SearchInput, {
+        placeholder: t("dovetail.search"),
+        size: "small",
+        total: searchMatchedTotal,
+        onChange: (str) => {
+          onSearchNext(str);
+        },
+        onSearchNext: (str) => {
+          onSearchNext(str);
+        },
+        onSearchPrev: (str) => {
+          onSearchPre(str);
+        }
+      }), /* @__PURE__ */ common.jsxRuntimeExports.jsx("div", {
+        className: DividerStyle
+      }), /* @__PURE__ */ common.jsxRuntimeExports.jsx("div", {
+        className: IconWrapperStyle,
+        children: operations.map((operation) => typeof operation === "string" ? operationMap[operation] || null : operation)
+      })]
+    })]
+  });
+}
+const xterm = "";
+const index_n9lket = "";
+const ContainerStyle = "c1q5a2qi";
+const ShellStyle = "sdz5fm1";
+const ErrorAlertStyle = "ebp0h2e";
+const ToolbarStyle = "tioilqy";
+const Shell = React.forwardRef(function Shell2(props, ref) {
+  const {
+    className,
+    url,
+    protocols,
+    timeout = 1e4,
+    logFileName,
+    operations,
+    isHideToolbar,
+    toolbarLeftSlot,
+    shellOptions,
+    loadingElement,
+    encode,
+    decode,
+    onSocketStatusChange,
+    onTermInit,
+    onSocketInit,
+    children
+  } = props;
+  const terminalRef = React.useRef(null);
+  const termInstanceRef = React.useRef(null);
+  const fitAddonRef = React.useRef(null);
+  const searchAddonRef = React.useRef(null);
+  const socketRef = React.useRef(null);
+  const backlogRef = React.useRef([]);
+  const containerRef = React.useRef(null);
+  const [socketStatus, setSocketStatus] = React.useState(common.SocketStatus.Opening);
+  const [loading, setLoading] = React.useState(false);
+  const [error, setError] = React.useState(null);
+  const [searchMatchedTotal, setSearchMatchedTotal] = React.useState(0);
+  const {
+    t
+  } = common.useTranslation();
+  const searchOptions = React.useMemo(() => ({
+    decorations: {
+      activeMatchColorOverviewRuler: "#FEA008",
+      matchOverviewRuler: "#E07F00",
+      activeMatchBackground: "#FEA008",
+      matchBackground: "#E07F00"
+    }
+  }), []);
+  const reset = React.useCallback(() => {
+    var _a, _b;
+    (_a = termInstanceRef.current) == null ? void 0 : _a.clear();
+    (_b = termInstanceRef.current) == null ? void 0 : _b.reset();
+  }, []);
+  const send = React.useCallback((message, callback) => {
+    if (socketRef.current && socketRef.current.readyState === socketRef.current.OPEN) {
+      socketRef.current.send(message);
+      callback == null ? void 0 : callback();
+    } else {
+      backlogRef.current.push({
+        message,
+        callback
+      });
+    }
+  }, []);
+  const fit = React.useCallback(() => {
+    var _a;
+    if (!fitAddonRef.current)
+      return;
+    fitAddonRef.current.fit();
+    const {
+      rows,
+      cols
+    } = fitAddonRef.current.proposeDimensions() || {};
+    if (rows && cols) {
+      (_a = props.fit) == null ? void 0 : _a.call(props, {
+        rows,
+        cols
+      });
+    }
+  }, [encode, send, props.fit]);
+  const debouncedFit = React.useMemo(() => lodashEs.debounce(fit, 200), [fit]);
+  const flush = React.useCallback(() => {
+    const backlog = backlogRef.current.slice();
+    backlogRef.current = [];
+    for (const data of backlog) {
+      send(data.message, data.callback);
+    }
+  }, [send]);
+  const connect = React.useCallback(() => {
+    if (socketRef.current) {
+      socketRef.current.close();
+      socketRef.current = null;
+    }
+    if (url) {
+      let onSocketError = function() {
+        setLoading(false);
+        setError(true);
+      }, onSocketOpen = function() {
+        var _a;
+        (_a = props.onSocketOpen) == null ? void 0 : _a.call(props, socket);
+        clearTimeout(timer);
+        setSocketStatus(common.SocketStatus.Open);
+        fit();
+        flush();
+        setError(false);
+        setLoading(false);
+      }, onSocketClose = function() {
+        setLoading(false);
+        setError(true);
+        if (props.onSocketClose) {
+          props.onSocketClose(socket, termInstanceRef.current);
+        } else {
+          setSocketStatus(common.SocketStatus.Disconnected);
+        }
+      }, onSocketMessage = function(e) {
+        var _a;
+        if (props.onSocketMessage) {
+          props.onSocketMessage(e, socket, termInstanceRef.current);
+        } else {
+          const msg = (decode == null ? void 0 : decode(e.data)) || e.data;
+          (_a = termInstanceRef.current) == null ? void 0 : _a.write(msg);
+        }
+      };
+      setLoading(true);
+      setError(false);
+      const socket = new WebSocket(url, protocols);
+      const timer = setTimeout(() => {
+        setLoading(false);
+        socket.close();
+      }, timeout);
+      setSocketStatus(common.SocketStatus.Opening);
+      onSocketInit == null ? void 0 : onSocketInit(socket);
+      socket.addEventListener("open", onSocketOpen);
+      socket.addEventListener("message", onSocketMessage);
+      socket.addEventListener("close", onSocketClose);
+      socket.addEventListener("error", onSocketError);
+      socketRef.current = socket;
+      return function disconnect() {
+        if (socket) {
+          socket.close();
+          socket.removeEventListener("open", onSocketOpen);
+          socket.removeEventListener("message", onSocketMessage);
+          socket.removeEventListener("close", onSocketClose);
+          socket.removeEventListener("error", onSocketError);
+          socketRef.current = null;
+        }
+      };
+    }
+  }, [url, protocols, decode, props.onSocketClose, props.onSocketMessage, props.onSocketOpen, reset, flush, fit, onSocketInit, timeout]);
+  const setupTerminal = React.useCallback(() => {
+    if (terminalRef.current) {
+      let onKeyDown = function(event) {
+        if (event.ctrlKey && event.shiftKey && event.key === "C") {
+          event.preventDefault();
+          copyToClipboard(term.getSelection());
+        }
+      }, onResize = function() {
+        fit();
+      };
+      if (termInstanceRef.current) {
+        termInstanceRef.current.reset();
+        termInstanceRef.current.dispose();
+      }
+      const term = new xterm$1.Terminal({
+        cursorBlink: true,
+        cols: 150,
+        allowProposedApi: true,
+        fontSize: 12,
+        theme: {
+          background: "#00122E"
+        },
+        ...shellOptions
+      });
+      let renderAddon = null;
+      try {
+        renderAddon = new addonWebgl.WebglAddon();
+      } catch {
+        renderAddon = new addonCanvas.CanvasAddon();
+      }
+      onTermInit == null ? void 0 : onTermInit(term);
+      term.loadAddon(fitAddonRef.current = new addonFit.FitAddon());
+      term.loadAddon(searchAddonRef.current = new addonSearch.SearchAddon());
+      term.loadAddon(new addonWebLinks.WebLinksAddon());
+      term.loadAddon(renderAddon);
+      term.open(terminalRef.current);
+      fit();
+      flush();
+      document.addEventListener("keydown", onKeyDown);
+      window.addEventListener("resize", onResize);
+      searchAddonRef.current.onDidChangeResults(({
+        resultCount
+      }) => {
+        setSearchMatchedTotal(resultCount);
+      });
+      term.onData((input) => {
+        send(encode(input));
+      });
+      termInstanceRef.current = term;
+      return function destroy() {
+        document.removeEventListener("keydown", onKeyDown);
+        window.removeEventListener("resize", onResize);
+        termInstanceRef.current = null;
+        fitAddonRef.current = null;
+        searchAddonRef.current = null;
+        term.clear();
+        term.dispose();
+      };
+    }
+  }, [send, encode, onTermInit, fit, flush, shellOptions]);
+  const searchNext = React.useCallback((search) => {
+    var _a;
+    (_a = searchAddonRef.current) == null ? void 0 : _a.findNext(search || "", searchOptions);
+  }, [searchOptions]);
+  const searchPrevious = React.useCallback((search) => {
+    var _a;
+    (_a = searchAddonRef.current) == null ? void 0 : _a.findPrevious(search || "", searchOptions);
+  }, [searchOptions]);
+  const getAllTerminalContents = React.useCallback(() => {
+    if (!termInstanceRef.current)
+      return [];
+    const buffer = termInstanceRef.current.buffer.active;
+    const lines = [];
+    for (let i = 0; i < buffer.length; i++) {
+      const line = buffer.getLine(i);
+      if (line) {
+        lines.push(line.translateToString(true));
+      }
+    }
+    return lines;
+  }, []);
+  const clear = React.useCallback(() => {
+    var _a;
+    (_a = termInstanceRef.current) == null ? void 0 : _a.clear();
+  }, []);
+  const downloadContent = React.useCallback(() => {
+    const content = (getAllTerminalContents() || []).join("\n");
+    const blob = new Blob([content], {
+      type: "text/plain"
+    });
+    const url2 = window.URL.createObjectURL(blob);
+    const a = document.createElement("a");
+    a.href = url2;
+    a.download = `${logFileName || "term"}.log`;
+    document.body.appendChild(a);
+    a.click();
+    setTimeout(() => {
+      document.body.removeChild(a);
+      window.URL.revokeObjectURL(url2);
+    }, 0);
+  }, [getAllTerminalContents, logFileName]);
+  const setOptions = React.useCallback((options) => {
+    Object.entries(options).forEach(([key, value]) => {
+      if (termInstanceRef.current) {
+        termInstanceRef.current.options[key] = value;
+      }
+    });
+    fit();
+  }, [fit]);
+  const writeln = React.useCallback((data) => {
+    var _a;
+    (_a = termInstanceRef.current) == null ? void 0 : _a.writeln(data);
+  }, []);
+  const onClear = React.useCallback(() => {
+    var _a;
+    clear();
+    (_a = props.onClear) == null ? void 0 : _a.call(props);
+  }, [clear, props.onClear]);
+  React.useEffect(() => {
+    const destroy = setupTerminal();
+    return () => {
+      destroy == null ? void 0 : destroy();
+    };
+  }, []);
+  React.useEffect(() => {
+    const disconnect = connect();
+    return () => {
+      disconnect == null ? void 0 : disconnect();
+    };
+  }, [url, protocols]);
+  React.useEffect(() => {
+    onSocketStatusChange == null ? void 0 : onSocketStatusChange(socketStatus);
+  }, [socketStatus]);
+  React.useEffect(() => {
+    if (!containerRef.current)
+      return;
+    const resizeObserver = new ResizeObserver(() => {
+      debouncedFit();
+    });
+    resizeObserver.observe(containerRef.current);
+    return () => resizeObserver.disconnect();
+  }, [debouncedFit]);
+  React.useImperativeHandle(ref, () => ({
+    clear,
+    setSocketStatus,
+    fit,
+    send,
+    connect,
+    searchNext,
+    searchPrevious,
+    getAllTerminalContents,
+    setOptions,
+    setLoading,
+    setError,
+    writeln
+  }), [send, searchNext, searchPrevious, getAllTerminalContents, fit, clear, connect, setOptions, writeln]);
+  return /* @__PURE__ */ common.jsxRuntimeExports.jsxs("div", {
+    ref: containerRef,
+    className: ContainerStyle,
+    children: [!!error ? /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Alert, {
+      style: {
+        margin: 8,
+        marginBottom: 4
+      },
+      message: /* @__PURE__ */ common.jsxRuntimeExports.jsxs("span", {
+        className: ErrorAlertStyle,
+        children: [t("dovetail.disconnected"), /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Link, {
+          onClick: () => {
+            if (props.onReconnect) {
+              props.onReconnect();
+            } else {
+              connect();
+            }
+          },
+          children: t("dovetail.reconnect")
+        })]
+      }),
+      type: "error"
+    }) : null, isHideToolbar ? null : /* @__PURE__ */ common.jsxRuntimeExports.jsx(ShellToolbar, {
+      className: ToolbarStyle,
+      leftSlot: toolbarLeftSlot,
+      searchMatchedTotal,
+      operations,
+      onSearchNext: searchNext,
+      onSearchPre: searchPrevious,
+      onClear,
+      onDownloadLog: downloadContent,
+      onSetFontSize: (fontSize) => {
+        setOptions({
+          fontSize
+        });
+      }
+    }), loading ? loadingElement || /* @__PURE__ */ common.jsxRuntimeExports.jsx(Connecting, {}) : null, /* @__PURE__ */ common.jsxRuntimeExports.jsx("div", {
+      className: common.cx_default(ShellStyle, className),
+      style: {
+        display: loading ? "none" : "block"
+      },
+      children: /* @__PURE__ */ common.jsxRuntimeExports.jsx("div", {
+        ref: terminalRef,
+        style: {
+          height: "100%"
+        },
+        children
+      })
+    })]
+  });
+});
+exports.Shell = Shell;