@dovetail-v2/refine 0.0.45 → 0.0.46-alpha.0

package/dist/refine.umd.cjs

@@ -1,6 +1,6 @@
 (function(global2, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("i18next"), require("@refinedev/core"), require("qs"), require("react"), require("react-router-dom"), require("@cloudtower/eagle"), require("@cloudtower/icons-react"), require("lodash-es"), require("js-yaml"), require("monaco-editor"), require("monaco-yaml"), require("react-dom"), require("sunflower-antd"), require("antd"), require("k8s-api-provider")) : typeof define === "function" && define.amd ? define(["exports", "i18next", "@refinedev/core", "qs", "react", "react-router-dom", "@cloudtower/eagle", "@cloudtower/icons-react", "lodash-es", "js-yaml", "monaco-editor", "monaco-yaml", "react-dom", "sunflower-antd", "antd", "k8s-api-provider"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory(global2.dovetail = {}, global2.i18n, global2.core, global2.qs, global2.React, global2.reactRouterDom, global2.eagle, global2.iconsReact, global2.lodashEs, global2.yaml, global2.monaco, global2.monacoYaml, global2.ReactDOM, global2.sunflowerAntd, global2.antd, global2.k8sApiProvider));
-})(this, function(exports2, i18n, core, qs, React, reactRouterDom, eagle, iconsReact, lodashEs, yaml, monaco, monacoYaml, ReactDOM, sunflowerAntd, antd, k8sApiProvider) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("i18next"), require("@refinedev/core"), require("qs"), require("react"), require("react-router-dom"), require("@cloudtower/eagle"), require("@cloudtower/icons-react"), require("lodash-es"), require("js-yaml"), require("k8s-api-provider"), require("monaco-editor"), require("monaco-yaml"), require("react-dom"), require("sunflower-antd"), require("antd")) : typeof define === "function" && define.amd ? define(["exports", "i18next", "@refinedev/core", "qs", "react", "react-router-dom", "@cloudtower/eagle", "@cloudtower/icons-react", "lodash-es", "js-yaml", "k8s-api-provider", "monaco-editor", "monaco-yaml", "react-dom", "sunflower-antd", "antd"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory(global2.dovetail = {}, global2.i18n, global2.core, global2.qs, global2.React, global2.reactRouterDom, global2.eagle, global2.iconsReact, global2.lodashEs, global2.yaml, global2.k8sApiProvider, global2.monaco, global2.monacoYaml, global2.ReactDOM, global2.sunflowerAntd, global2.antd));
+})(this, function(exports2, i18n, core, qs, React, reactRouterDom, eagle, iconsReact, lodashEs, yaml, k8sApiProvider, monaco, monacoYaml, ReactDOM, sunflowerAntd, antd) {
   "use strict";var __defProp = Object.defineProperty;
 var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
 var __publicField = (obj, key, value) => {
@@ -8624,7 +8624,7 @@ var __publicField = (obj, key, value) => {
     } = props;
     const auxiliaryLineRef = React.useRef(null);
     const wrapperRef = React.useRef(null);
-    const pagination = React.useMemo(() => ({
+    React.useMemo(() => ({
       current: currentPage,
       pageSize: defaultSize,
       onChange: onPageChange
@@ -8671,7 +8671,6 @@ var __publicField = (obj, key, value) => {
         tableLayout: "fixed",
         columns: finalColumns,
         dataSource,
-        pagination,
         error,
         loading,
         rowKey,
@@ -8689,11 +8688,38 @@ var __publicField = (obj, key, value) => {
     });
   }
   const ComponentContext = React.createContext({});
+  function useTableData({ data: data2, columns, pageSize = 10 }) {
+    const [currentPage, setCurrentPage] = React.useState(1);
+    const [sorters, setSorters] = React.useState([]);
+    const onSorterChange = React.useCallback((order, key2) => {
+      var _a;
+      const ORDER_MAP = {
+        descend: "desc",
+        ascend: "asc"
+      };
+      const sorters2 = [{
+        field: (_a = columns.find((col) => col.key === key2)) == null ? void 0 : _a.dataIndex,
+        order: order ? ORDER_MAP[order] : order
+      }];
+      setSorters(sorters2);
+    }, [columns]);
+    return {
+      data: k8sApiProvider.paginateData(
+        {
+          pageSize,
+          current: currentPage
+        },
+        k8sApiProvider.sortData(sorters, data2)
+      ),
+      currentPage,
+      onPageChange: setCurrentPage,
+      onSorterChange
+    };
+  }
   const PodSelectorTable = ({ podSelectors = {} }) => {
     const { t: t2 } = useTranslation();
     const component = React.useContext(ComponentContext);
     const Table$1 = component.Table || Table;
-    const [currentPage, setCurrentPage] = React.useState(1);
     const currentSize = 10;
     const datas = Object.keys(podSelectors).map((key2) => ({
       id: key2,
@@ -8718,6 +8744,15 @@ var __publicField = (obj, key, value) => {
         width: "50%"
       }
     ];
+    const {
+      data: finalData,
+      currentPage,
+      onPageChange,
+      onSorterChange
+    } = useTableData({
+      data: datas,
+      columns
+    });
     if (datas.length === 0) {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         WidgetErrorContent,
@@ -8733,14 +8768,15 @@ var __publicField = (obj, key, value) => {
       {
         tableKey: "podSelector",
         loading: false,
-        data: datas.slice((currentPage - 1) * currentSize, currentPage * currentSize),
+        data: finalData,
         total: datas.length,
         columns: addDefaultRenderToColumns(columns),
         rowKey: "key",
         empty: t2("dovetail.empty"),
         defaultSize: currentSize,
         currentPage,
-        onPageChange: setCurrentPage,
+        onPageChange,
+        onSorterChange,
         showMenuColumn: false
       }
     );
@@ -8749,7 +8785,6 @@ var __publicField = (obj, key, value) => {
     const { t: t2 } = useTranslation();
     const component = React.useContext(ComponentContext);
     const Table$1 = component.Table || Table;
-    const [currentPage, setCurrentPage] = React.useState(1);
     const currentSize = 10;
     const columns = [
       {
@@ -8797,6 +8832,15 @@ var __publicField = (obj, key, value) => {
       ...port2,
       id: port2.name || ""
     }));
+    const {
+      data: finalData,
+      currentPage,
+      onPageChange,
+      onSorterChange
+    } = useTableData({
+      data: ports,
+      columns
+    });
     if ((ports == null ? void 0 : ports.length) === 0) {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         WidgetErrorContent,
@@ -8812,14 +8856,15 @@ var __publicField = (obj, key, value) => {
       {
         tableKey: "ports",
         loading: false,
-        data: ports.slice((currentPage - 1) * currentSize, currentPage * currentSize),
+        data: finalData,
         total: ports.length,
         columns: addDefaultRenderToColumns(columns),
         rowKey: "name",
         empty: t2("dovetail.empty"),
         defaultSize: currentSize,
         currentPage,
-        onPageChange: setCurrentPage,
+        onPageChange,
+        onSorterChange,
         showMenuColumn: false
       }
     );
@@ -9959,7 +10004,7 @@ var __publicField = (obj, key, value) => {
       children: content || "-"
     });
   };
-  const index_10ylmu3 = "";
+  const index_1wlqq0y = "";
   const TagWrapper = "t13a6vox";
   const TagStyle = "t12ikbmp";
   const Tags = (props) => {
@@ -9998,24 +10043,23 @@ var __publicField = (obj, key, value) => {
     const {
       t: t2
     } = useTranslation();
-    const statusMap = {
-      updating: "loading",
+    const colorMap = {
+      updating: "blue",
       ready: "green",
       completed: "gray",
       failed: "red",
       suspended: "warning",
-      running: "green",
-      succeeded: "blue",
-      unknown: "gray",
-      terminating: "loading",
-      pending: "warning",
+      running: "blue",
+      succeeded: "green",
+      unknown: "warning",
+      terminating: "red",
+      pending: "gray",
       waiting: "warning",
       terminated: "red"
     };
     return /* @__PURE__ */ jsxRuntimeExports.jsx(kit.statusCapsule, {
       className: cx_default(className, StateTagStyle, hideBackground && "no-background"),
-      color: statusMap[state2] !== "loading" ? statusMap[state2] : void 0,
-      loading: statusMap[state2] === "loading",
+      color: colorMap[state2],
       children: t2(`dovetail.${state2 || "updating"}`)
     });
   };
@@ -10133,11 +10177,9 @@ var __publicField = (obj, key, value) => {
     });
   };
   const ConditionsTable = ({ conditions = [] }) => {
-    const [currentPage, setCurrentPage] = React.useState(1);
     const { t: t2 } = useTranslation();
     const component = React.useContext(ComponentContext);
     const Table$1 = component.Table || Table;
-    const currentSize = 10;
     const conditionsWithId = addId(conditions, "type");
     const columns = [
       {
@@ -10193,6 +10235,8 @@ var __publicField = (obj, key, value) => {
         width: 403
       }
     ];
+    const { data: finalData, currentPage, onPageChange, onSorterChange } = useTableData({ data: conditionsWithId, columns });
+    const currentSize = 10;
     if (conditionsWithId.length === 0) {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         WidgetErrorContent,
@@ -10208,18 +10252,38 @@ var __publicField = (obj, key, value) => {
       {
         tableKey: "condition",
         loading: false,
-        data: conditionsWithId.slice((currentPage - 1) * currentSize, currentPage * currentSize),
+        data: finalData,
         total: conditionsWithId.length,
         columns: addDefaultRenderToColumns(columns),
         rowKey: "type",
         empty: t2("dovetail.empty"),
         defaultSize: currentSize,
         currentPage,
-        onPageChange: setCurrentPage,
+        onPageChange,
+        onSorterChange,
         showMenuColumn: false
       }
     );
   };
+  function download(filename, content) {
+    const element = document.createElement("a");
+    element.setAttribute(
+      "href",
+      "data:text/plain;charset=utf-8," + encodeURIComponent(content)
+    );
+    element.setAttribute("download", filename);
+    element.style.display = "none";
+    document.body.appendChild(element);
+    element.click();
+    document.body.removeChild(element);
+  }
+  function useDownloadYAML() {
+    return function(options) {
+      const { name: name2, item } = options;
+      const content = yaml.dump(item);
+      download(`${name2}.yaml`, content);
+    };
+  }
   function useEdit() {
     const { resource } = core.useParsed();
     const go = core.useGo();
@@ -10298,220 +10362,648 @@ var __publicField = (obj, key, value) => {
       }
     };
   }
-  function CreateButton() {
-    var _a;
+  function K8sDropdown(props) {
+    const { record, size = "normal" } = props;
     const kit = eagle.useUIKit();
-    const { t: t2 } = useTranslation();
-    const openForm = useOpenForm();
-    const { resource } = core.useResource();
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(
-      kit.button,
-      {
-        prefixIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(iconsReact.PlusAddCreateNew16BoldOntintIcon, {}),
-        type: "primary",
-        onClick: openForm,
-        children: t2("dovetail.create_resource", { resource: (_a = resource == null ? void 0 : resource.meta) == null ? void 0 : _a.kind })
-      }
+    const { globalStore } = useGlobalStore();
+    const useResourceResult = core.useResource();
+    const resource = useResourceResult.resource;
+    const { modalProps, visible, openDeleteConfirmModal } = useDeleteModal(
+      (resource == null ? void 0 : resource.name) || ""
     );
-  }
-  const useDeleteManyModal = (resource, ids) => {
-    const { mutate } = core.useDeleteMany();
-    const [visible, setVisible] = React.useState(false);
-    const { t: t2 } = useTranslation();
-    const modalProps = {
-      title: t2("dovetail.delete"),
-      okText: t2("dovetail.delete"),
-      okButtonProps: {
-        danger: true
-      },
-      cancelText: t2("dovetail.cancel"),
-      children: t2("dovetail.confirm_delete_text", {
-        target: ids,
-        interpolation: { escapeValue: false }
-      }),
-      onOk() {
-        mutate({
-          resource,
-          ids
-        });
-        setVisible(false);
-      },
-      onCancel() {
-        setVisible(false);
-      }
-    };
-    return { modalProps, visible, setVisible };
-  };
-  const DeleteManyButton = (props) => {
-    const { resource } = core.useResource();
-    const kit = eagle.useUIKit();
+    const download2 = useDownloadYAML();
     const { t: t2 } = useTranslation();
-    const { modalProps, visible, setVisible } = useDeleteManyModal(
-      (resource == null ? void 0 : resource.name) || "",
-      props.ids
-    );
-    const onClick = React.useCallback(() => {
-      setVisible(true);
-    }, [setVisible]);
+    const openForm = useOpenForm({ id: record.id });
+    const isInShowPage = useResourceResult.action === "show";
+    const { data: canEditData } = core.useCan({
+      resource: resource == null ? void 0 : resource.name,
+      action: AccessControlAuth.Edit
+    });
+    const { data: canDeleteData } = core.useCan({
+      resource: resource == null ? void 0 : resource.name,
+      action: AccessControlAuth.Delete
+    });
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(kit.button, { type: "primary", danger: true, onClick, children: t2("dovetail.delete") }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx(
+        kit.dropdown,
+        {
+          overlay: /* @__PURE__ */ jsxRuntimeExports.jsxs(kit.menu, { children: [
+            isInShowPage || (canEditData == null ? void 0 : canEditData.can) === false ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+              kit.menuItem,
+              {
+                onClick: openForm,
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(eagle.Icon, { src: iconsReact.EditPen16PrimaryIcon, children: t2("dovetail.edit_yaml") })
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              kit.menu.Item,
+              {
+                onClick: () => {
+                  var _a;
+                  if (record.id) {
+                    download2({
+                      name: ((_a = record.metadata) == null ? void 0 : _a.name) || record.kind || "",
+                      item: lodashEs.omit((globalStore == null ? void 0 : globalStore.restoreItem(record)) || record, "id")
+                    });
+                  }
+                },
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(eagle.Icon, { src: iconsReact.Download16GradientBlueIcon, children: t2("dovetail.download_yaml") })
+              }
+            ),
+            props.children,
+            (canDeleteData == null ? void 0 : canDeleteData.can) !== false ? /* @__PURE__ */ jsxRuntimeExports.jsx(kit.divider, { style: { margin: 0 } }) : null,
+            (canDeleteData == null ? void 0 : canDeleteData.can) !== false ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+              kit.menuItem,
+              {
+                danger: true,
+                onClick: () => {
+                  openDeleteConfirmModal(record.id);
+                },
+                children: /* @__PURE__ */ jsxRuntimeExports.jsx(eagle.Icon, { src: iconsReact.TrashBinDelete16Icon, children: t2("dovetail.delete") })
+              }
+            ) : null
+          ] }),
+          trigger: ["click"],
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
+            kit.button,
+            {
+              type: "quiet",
+              size: size === "large" ? "middle" : "small",
+              prefixIcon: size === "large" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+                eagle.Icon,
+                {
+                  src: iconsReact.MoreEllipsis324BoldSecondaryIcon,
+                  hoverSrc: iconsReact.MoreEllipsis324BoldBlueIcon,
+                  iconWidth: 24,
+                  iconHeight: 24
+                }
+              ) : /* @__PURE__ */ jsxRuntimeExports.jsx(eagle.Icon, { src: iconsReact.MoreEllipsis316BoldBlueIcon })
+            }
+          )
+        }
+      ),
       visible ? /* @__PURE__ */ jsxRuntimeExports.jsx(kit.modal, { ...modalProps }) : null
     ] });
-  };
-  const TableToolBar_4s5vf2 = "";
-  const ToolbarWrapperStyle = "t1v3ienx";
-  const ToolbarStyle$1 = "tgejfwe";
-  const TitleStyle$2 = "tq6dc79";
-  const DescriptionStyle = "d1wqyhgc";
-  const TableToolBar = ({
-    description,
-    selectedKeys,
-    hideCreate
-  }) => {
-    var _a;
-    const kit = eagle.useUIKit();
-    const {
-      resource
-    } = core.useResource();
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-      className: cx_default(ToolbarWrapperStyle, "table-toolbar"),
-      children: [/* @__PURE__ */ jsxRuntimeExports.jsxs(kit.space, {
-        className: ToolbarStyle$1,
-        children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
-          className: cx_default(eagle.Typo.Display.d2_regular_title, TitleStyle$2),
-          children: (_a = resource == null ? void 0 : resource.meta) == null ? void 0 : _a.kind
-        }), /* @__PURE__ */ jsxRuntimeExports.jsxs(kit.space, {
-          children: [selectedKeys.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(DeleteManyButton, {
-            ids: selectedKeys
-          }) : void 0, /* @__PURE__ */ jsxRuntimeExports.jsx(core.CanAccess, {
-            resource: resource == null ? void 0 : resource.name,
-            action: AccessControlAuth.Create,
-            children: !hideCreate ? /* @__PURE__ */ jsxRuntimeExports.jsx(CreateButton, {}) : null
-          })]
-        })]
-      }), description ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-        className: DescriptionStyle,
-        children: description
-      }) : null]
+  }
+  globalThis && globalThis.__awaiter || function(thisArg, _arguments, P, generator) {
+    function adopt(value2) {
+      return value2 instanceof P ? value2 : new P(function(resolve) {
+        resolve(value2);
+      });
+    }
+    return new (P || (P = Promise))(function(resolve, reject) {
+      function fulfilled(value2) {
+        try {
+          step(generator.next(value2));
+        } catch (e2) {
+          reject(e2);
+        }
+      }
+      function rejected(value2) {
+        try {
+          step(generator["throw"](value2));
+        } catch (e2) {
+          reject(e2);
+        }
+      }
+      function step(result) {
+        result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+      }
+      step((generator = generator.apply(thisArg, _arguments || [])).next());
     });
   };
-  const index_6qzjtx = "";
-  const WrapperStyle$5 = "w16agr8o";
-  function matchOwner(job, owner) {
-    var _a;
-    let match = false;
-    for (const o of ((_a = job.metadata) == null ? void 0 : _a.ownerReferences) || []) {
-      if (o.apiVersion === owner.apiVersion && o.kind === owner.kind && o.name === owner.name && job.namespace === owner.namespace) {
-        match = true;
-      }
-    }
-    return match;
+  function useEventCallback(fn) {
+    const ref = React.useRef(() => {
+      throw new Error("Cannot call an event handler while rendering.");
+    });
+    useIsomorphicLayoutEffect(() => {
+      ref.current = fn;
+    }, [fn]);
+    return React.useCallback((...args) => ref.current(...args), [ref]);
   }
-  const CronjobJobsTable = ({
-    owner,
-    hideToolBar
-  }) => {
+  function useEventListener(eventName, handler, element, options) {
+    const savedHandler = React.useRef(handler);
+    useIsomorphicLayoutEffect(() => {
+      savedHandler.current = handler;
+    }, [handler]);
+    React.useEffect(() => {
+      var _a;
+      const targetElement = (_a = element === null || element === void 0 ? void 0 : element.current) !== null && _a !== void 0 ? _a : window;
+      if (!(targetElement && targetElement.addEventListener))
+        return;
+      const listener = (event2) => savedHandler.current(event2);
+      targetElement.addEventListener(eventName, listener, options);
+      return () => {
+        targetElement.removeEventListener(eventName, listener, options);
+      };
+    }, [eventName, element, options]);
+  }
+  globalThis && globalThis.__awaiter || function(thisArg, _arguments, P, generator) {
+    function adopt(value2) {
+      return value2 instanceof P ? value2 : new P(function(resolve) {
+        resolve(value2);
+      });
+    }
+    return new (P || (P = Promise))(function(resolve, reject) {
+      function fulfilled(value2) {
+        try {
+          step(generator.next(value2));
+        } catch (e2) {
+          reject(e2);
+        }
+      }
+      function rejected(value2) {
+        try {
+          step(generator["throw"](value2));
+        } catch (e2) {
+          reject(e2);
+        }
+      }
+      function step(result) {
+        result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+      }
+      step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+  };
+  const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
+  function useLocalStorage(key2, initialValue) {
+    const readValue = React.useCallback(() => {
+      if (typeof window === "undefined") {
+        return initialValue;
+      }
+      try {
+        const item = window.localStorage.getItem(key2);
+        return item ? parseJSON(item) : initialValue;
+      } catch (error) {
+        console.warn(`Error reading localStorage key “${key2}”:`, error);
+        return initialValue;
+      }
+    }, [initialValue, key2]);
+    const [storedValue, setStoredValue] = React.useState(readValue);
+    const setValue = useEventCallback((value2) => {
+      if (typeof window === "undefined") {
+        console.warn(`Tried setting localStorage key “${key2}” even though environment is not a client`);
+      }
+      try {
+        const newValue = value2 instanceof Function ? value2(storedValue) : value2;
+        window.localStorage.setItem(key2, JSON.stringify(newValue));
+        setStoredValue(newValue);
+        window.dispatchEvent(new Event("local-storage"));
+      } catch (error) {
+        console.warn(`Error setting localStorage key “${key2}”:`, error);
+      }
+    });
+    React.useEffect(() => {
+      setStoredValue(readValue());
+    }, []);
+    const handleStorageChange = React.useCallback((event2) => {
+      if ((event2 === null || event2 === void 0 ? void 0 : event2.key) && event2.key !== key2) {
+        return;
+      }
+      setStoredValue(readValue());
+    }, [key2, readValue]);
+    useEventListener("storage", handleStorageChange);
+    useEventListener("local-storage", handleStorageChange);
+    return [storedValue, setValue];
+  }
+  function parseJSON(value2) {
+    try {
+      return value2 === "undefined" ? void 0 : JSON.parse(value2 !== null && value2 !== void 0 ? value2 : "");
+    } catch (_a) {
+      console.log("parsing error on", { value: value2 });
+      return void 0;
+    }
+  }
+  const GlobalStoreContext = React.createContext({});
+  const index_1uuzt53 = "";
+  const SelectStyle = "sj0ggy";
+  const DropdownStyle = "d1eo8uqs";
+  const SearchInputStyle = "s64gojc";
+  const SelectContentStyle = "s16fqgtu";
+  const TokenStyle = "tgaujbg";
+  const CountTokenStyle = "c1vbd54v";
+  const SelectOptionGroupStyle = "sxzmtrx";
+  const LabelWrapperStyle = "lqrghwd";
+  const AllNamespaceOptionStyle = "api7z1z";
+  const OptionStyle = "o38b23x";
+  const NS_STORE_KEY = "namespace-filter";
+  const ALL_NS = "_all";
+  const useNamespacesFilter = () => {
+    const [value2] = useLocalStorage(NS_STORE_KEY, [ALL_NS]);
     const {
-      i18n: i18n2
-    } = useTranslation();
+      resource
+    } = core.useResource();
+    const configs = React.useContext(ConfigsContext);
+    if ((resource == null ? void 0 : resource.name) && configs[resource == null ? void 0 : resource.name].hideNamespacesFilter) {
+      return {
+        value: []
+      };
+    }
+    return {
+      value: value2
+    };
+  };
+  const NamespacesFilter = ({
+    className
+  }) => {
     const kit = eagle.useUIKit();
-    const [selectedKeys] = React.useState([]);
-    const [currentPage, setCurrentPage] = React.useState(1);
-    const component = React.useContext(ComponentContext);
-    const Table$1 = component.Table || Table;
-    const currentSize = 10;
+    const {
+      t: t2
+    } = useTranslation();
+    const [search, setSearch] = React.useState("");
     const {
       data: data2,
       isLoading
     } = core.useList({
-      resource: "jobs",
+      resource: "namespaces",
       meta: {
-        resourceBasePath: "/apis/batch/v1",
-        kind: "Job"
+        resourceBasePath: "/api/v1",
+        kind: "Namespace"
       },
       pagination: {
         mode: "off"
       }
     });
-    const dataSource = React.useMemo(() => {
-      return data2 == null ? void 0 : data2.data.filter((p) => {
-        return owner ? matchOwner(p, owner) : true;
-      });
-    }, [data2 == null ? void 0 : data2.data, owner]);
-    const columns = [NameColumnRenderer(i18n2, "jobs"), StateDisplayColumnRenderer(i18n2), NameSpaceColumnRenderer(i18n2), {
-      ...WorkloadImageColumnRenderer(i18n2),
-      width: 238
-    }, CompletionsCountColumnRenderer(i18n2), DurationColumnRenderer(i18n2), AgeColumnRenderer(i18n2)];
-    if (!(dataSource == null ? void 0 : dataSource.length) && !isLoading) {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx(WidgetErrorContent, {
-        errorText: i18n2.t("dovetail.no_resource", {
-          kind: " Job"
-        }),
-        type: ErrorContentType.Card
-      });
-    }
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(kit.space, {
-      direction: "vertical",
-      className: WrapperStyle$5,
-      children: [hideToolBar ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(TableToolBar, {
-        selectedKeys,
-        hideCreate: true
-      }), /* @__PURE__ */ jsxRuntimeExports.jsx(Table$1, {
-        tableKey: "cronjobs",
-        loading: isLoading,
-        data: (dataSource || []).slice((currentPage - 1) * currentSize, currentPage * currentSize),
-        total: (dataSource == null ? void 0 : dataSource.length) || 0,
-        columns,
-        rowKey: "id",
-        error: false,
-        currentPage,
-        onPageChange: (p) => setCurrentPage(p),
-        defaultSize: currentSize,
-        refetch: () => null,
-        showMenuColumn: false
+    const [value2, setValue] = useLocalStorage(NS_STORE_KEY, [ALL_NS]);
+    const debouncedSetSearch = lodashEs.debounce(setSearch, 100);
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(kit.select, {
+      loading: isLoading,
+      style: {
+        width: 278
+      },
+      className: cx_default(SelectStyle, className),
+      dropdownClassName: DropdownStyle,
+      searchValue: search,
+      virtual: false,
+      input: {
+        value: value2,
+        onChange(value22) {
+          if (lodashEs.last(value22) === ALL_NS || value22.length === 0) {
+            setValue([ALL_NS]);
+          } else {
+            setValue(value22.filter((namespace2) => namespace2 !== ALL_NS));
+          }
+        }
+      },
+      dropdownRender: (menu) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+        className: SelectContentStyle,
+        children: [/* @__PURE__ */ jsxRuntimeExports.jsx(kit.searchInput, {
+          style: {
+            width: "100%"
+          },
+          className: SearchInputStyle,
+          onChange: debouncedSetSearch,
+          placeholder: t2("dovetail.please_input")
+        }), menu, isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(kit.loading, {}) : null]
+      }),
+      tagRender: ({
+        label: label2,
+        value: value22,
+        closable,
+        onClose
+      }) => {
+        const isCountToken = label2 !== value22 && typeof label2 === "string";
+        const isAll = value22 === ALL_NS;
+        return isAll ? /* @__PURE__ */ jsxRuntimeExports.jsx("span", {
+          style: {
+            marginLeft: 8
+          },
+          children: label2
+        }) : /* @__PURE__ */ jsxRuntimeExports.jsx(kit.token, {
+          className: cx_default(isCountToken ? CountTokenStyle : TokenStyle, isCountToken ? "" : "closable-token"),
+          closable,
+          size: "medium",
+          onClose,
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(kit.overflowTooltip, {
+            content: isCountToken ? label2.replace(/[\s\.]/g, "") : label2
+          })
+        });
+      },
+      maxTagCount: 1,
+      optionLabelProp: "label",
+      showArrow: true,
+      showSearch: false,
+      multiple: true,
+      children: [/* @__PURE__ */ jsxRuntimeExports.jsx(kit.option, {
+        value: "_all",
+        label: t2("dovetail.all_namespaces"),
+        className: AllNamespaceOptionStyle,
+        children: /* @__PURE__ */ jsxRuntimeExports.jsx(kit.overflowTooltip, {
+          content: t2("dovetail.all_namespaces"),
+          className: LabelWrapperStyle
+        })
+      }, "_all"), /* @__PURE__ */ jsxRuntimeExports.jsx(kit.selectOptGroup, {
+        label: "",
+        className: SelectOptionGroupStyle,
+        children: data2 == null ? void 0 : data2.data.map((namespace2) => {
+          const {
+            name: name2
+          } = namespace2.metadata;
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(kit.option, {
+            value: name2,
+            label: name2,
+            className: OptionStyle,
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(kit.overflowTooltip, {
+              content: name2,
+              className: LabelWrapperStyle
+            })
+          }, name2);
+        })
       })]
     });
   };
-  const EventsTable = ({}) => {
-    const { i18n: i18n2 } = useTranslation();
-    const [currentPage, setCurrentPage] = React.useState(1);
-    const currentSize = 10;
-    const { data: data2, isLoading } = core.useList({
-      resource: "events",
-      meta: { resourceBasePath: "/apis/events.k8s.io/v1", kind: "Event" },
-      pagination: {
-        mode: "off"
-      }
-    });
-    const parsed = core.useParsed();
-    const columns = React.useMemo(
-      () => [
-        {
-          key: "type",
-          display: true,
-          dataIndex: ["type"],
-          title: i18n2.t("dovetail.type"),
-          sortable: true,
-          width: 120,
-          render(value2) {
-            const colorMap = {
-              "Warning": "red",
-              "Normal": "green"
-            };
-            return /* @__PURE__ */ jsxRuntimeExports.jsx(eagle.StatusCapsule, { color: colorMap[value2], className: cx_default(StateTagStyle, "no-background"), children: i18n2.t(`dovetail.${value2.toLowerCase()}`) });
-          },
-          sorter: CommonSorter(["type"])
-        },
-        {
-          key: "reason",
-          display: true,
-          dataIndex: ["reason"],
-          title: i18n2.t("dovetail.reason"),
-          sortable: true,
-          width: 120,
-          sorter: CommonSorter(["reason"])
+  var ColumnKeys = /* @__PURE__ */ ((ColumnKeys2) => {
+    ColumnKeys2["age"] = "age";
+    ColumnKeys2["name"] = "name";
+    ColumnKeys2["namespace"] = "namespace";
+    ColumnKeys2["phase"] = "phase";
+    ColumnKeys2["replicas"] = "replicas";
+    ColumnKeys2["deploymentImage"] = "deploymentImage";
+    ColumnKeys2["podImage"] = "podImage";
+    return ColumnKeys2;
+  })(ColumnKeys || {});
+  function addDefaultRenderToColumns(columns) {
+    return columns.map((col) => ({
+      render(value2) {
+        return /* @__PURE__ */ jsxRuntimeExports.jsx(
+          ValueDisplay,
+          {
+            value: value2
+          }
+        );
+      },
+      ...col
+    }));
+  }
+  const useEagleTable = (params) => {
+    var _a, _b;
+    const { columns, tableProps, formatter, Dropdown = K8sDropdown } = params;
+    const [selectedKeys, setSelectedKeys] = React.useState([]);
+    const [currentPage, setCurrentPage] = React.useState((tableProps == null ? void 0 : tableProps.currentPage) || 1);
+    const { resource } = core.useResource();
+    const currentSize = (tableProps == null ? void 0 : tableProps.defaultSize) || 10;
+    const { value: nsFilters = [] } = useNamespacesFilter();
+    const useTableParams = React.useMemo(() => {
+      const mergedParams = lodashEs.merge(params.useTableParams, {
+        pagination: {
+          pageSize: currentSize,
+          mode: "server"
         },
-        {
+        filters: {
+          permanent: [
+            {
+              operator: "or",
+              value: nsFilters.filter((filter) => filter !== ALL_NS).map((filter) => ({
+                field: "metadata.namespace",
+                operator: "eq",
+                value: filter
+              }))
+            }
+          ]
+        }
+      });
+      return mergedParams;
+    }, [params.useTableParams, nsFilters, currentSize]);
+    const finalColumns = React.useMemo(
+      () => addDefaultRenderToColumns(columns),
+      [columns]
+    );
+    const table = core.useTable(useTableParams);
+    const onPageChange = React.useCallback(
+      (page) => {
+        var _a2;
+        setCurrentPage(page);
+        (_a2 = table.setCurrent) == null ? void 0 : _a2.call(table, page || 1);
+      },
+      [setCurrentPage, table]
+    );
+    const onSorterChange = React.useCallback((order, key2) => {
+      var _a2;
+      const ORDER_MAP = {
+        descend: "desc",
+        ascend: "asc"
+      };
+      const sorters = [{
+        field: (_a2 = columns.find((col) => col.key === key2)) == null ? void 0 : _a2.dataIndex,
+        order: order ? ORDER_MAP[order] : order
+      }];
+      table.setSorters(sorters);
+    }, [table, columns]);
+    const data2 = (_a = table.tableQueryResult.data) == null ? void 0 : _a.data;
+    const total = ((_b = table.tableQueryResult.data) == null ? void 0 : _b.total) || 0;
+    const finalDataSource = formatter ? data2 == null ? void 0 : data2.map(formatter) : data2;
+    const finalProps = {
+      tableKey: (resource == null ? void 0 : resource.name) || "table",
+      loading: table.tableQueryResult.isLoading,
+      data: finalDataSource || [],
+      columns: finalColumns,
+      error: false,
+      rowKey: "id",
+      currentPage,
+      defaultSize: currentSize,
+      onPageChange,
+      onSorterChange,
+      onSelect: (keys) => {
+        setSelectedKeys(keys);
+      },
+      total,
+      RowMenu: Dropdown
+    };
+    return { tableProps: finalProps, selectedKeys, ...table };
+  };
+  function CreateButton() {
+    var _a;
+    const kit = eagle.useUIKit();
+    const { t: t2 } = useTranslation();
+    const openForm = useOpenForm();
+    const { resource } = core.useResource();
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(
+      kit.button,
+      {
+        prefixIcon: /* @__PURE__ */ jsxRuntimeExports.jsx(iconsReact.PlusAddCreateNew16BoldOntintIcon, {}),
+        type: "primary",
+        onClick: openForm,
+        children: t2("dovetail.create_resource", { resource: (_a = resource == null ? void 0 : resource.meta) == null ? void 0 : _a.kind })
+      }
+    );
+  }
+  const useDeleteManyModal = (resource, ids) => {
+    const { mutate } = core.useDeleteMany();
+    const [visible, setVisible] = React.useState(false);
+    const { t: t2 } = useTranslation();
+    const modalProps = {
+      title: t2("dovetail.delete"),
+      okText: t2("dovetail.delete"),
+      okButtonProps: {
+        danger: true
+      },
+      cancelText: t2("dovetail.cancel"),
+      children: t2("dovetail.confirm_delete_text", {
+        target: ids,
+        interpolation: { escapeValue: false }
+      }),
+      onOk() {
+        mutate({
+          resource,
+          ids
+        });
+        setVisible(false);
+      },
+      onCancel() {
+        setVisible(false);
+      }
+    };
+    return { modalProps, visible, setVisible };
+  };
+  const DeleteManyButton = (props) => {
+    const { resource } = core.useResource();
+    const kit = eagle.useUIKit();
+    const { t: t2 } = useTranslation();
+    const { modalProps, visible, setVisible } = useDeleteManyModal(
+      (resource == null ? void 0 : resource.name) || "",
+      props.ids
+    );
+    const onClick = React.useCallback(() => {
+      setVisible(true);
+    }, [setVisible]);
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx(kit.button, { type: "primary", danger: true, onClick, children: t2("dovetail.delete") }),
+      visible ? /* @__PURE__ */ jsxRuntimeExports.jsx(kit.modal, { ...modalProps }) : null
+    ] });
+  };
+  const TableToolBar_4s5vf2 = "";
+  const ToolbarWrapperStyle = "t1v3ienx";
+  const ToolbarStyle$1 = "tgejfwe";
+  const TitleStyle$2 = "tq6dc79";
+  const DescriptionStyle = "d1wqyhgc";
+  const TableToolBar = ({
+    description,
+    selectedKeys,
+    hideCreate
+  }) => {
+    var _a;
+    const kit = eagle.useUIKit();
+    const {
+      resource
+    } = core.useResource();
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
+      className: cx_default(ToolbarWrapperStyle, "table-toolbar"),
+      children: [/* @__PURE__ */ jsxRuntimeExports.jsxs(kit.space, {
+        className: ToolbarStyle$1,
+        children: [/* @__PURE__ */ jsxRuntimeExports.jsx("span", {
+          className: cx_default(eagle.Typo.Display.d2_regular_title, TitleStyle$2),
+          children: (_a = resource == null ? void 0 : resource.meta) == null ? void 0 : _a.kind
+        }), /* @__PURE__ */ jsxRuntimeExports.jsxs(kit.space, {
+          children: [selectedKeys.length > 0 ? /* @__PURE__ */ jsxRuntimeExports.jsx(DeleteManyButton, {
+            ids: selectedKeys
+          }) : void 0, /* @__PURE__ */ jsxRuntimeExports.jsx(core.CanAccess, {
+            resource: resource == null ? void 0 : resource.name,
+            action: AccessControlAuth.Create,
+            children: !hideCreate ? /* @__PURE__ */ jsxRuntimeExports.jsx(CreateButton, {}) : null
+          })]
+        })]
+      }), description ? /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+        className: DescriptionStyle,
+        children: description
+      }) : null]
+    });
+  };
+  const index_6qzjtx = "";
+  const WrapperStyle$5 = "w16agr8o";
+  function matchOwner(job, owner) {
+    var _a;
+    let match = false;
+    for (const o of ((_a = job.metadata) == null ? void 0 : _a.ownerReferences) || []) {
+      if (o.apiVersion === owner.apiVersion && o.kind === owner.kind && o.name === owner.name && job.namespace === owner.namespace) {
+        match = true;
+      }
+    }
+    return match;
+  }
+  const CronjobJobsTable = ({
+    owner,
+    hideToolBar
+  }) => {
+    const {
+      i18n: i18n2
+    } = useTranslation();
+    const kit = eagle.useUIKit();
+    const [selectedKeys] = React.useState([]);
+    const component = React.useContext(ComponentContext);
+    const Table$1 = component.Table || Table;
+    const columns = [NameColumnRenderer(i18n2, "jobs"), StateDisplayColumnRenderer(i18n2), NameSpaceColumnRenderer(i18n2), {
+      ...WorkloadImageColumnRenderer(i18n2),
+      width: 238
+    }, CompletionsCountColumnRenderer(i18n2), DurationColumnRenderer(i18n2), AgeColumnRenderer(i18n2)];
+    const {
+      tableProps
+    } = useEagleTable({
+      columns,
+      useTableParams: {
+        resource: "jobs",
+        meta: {
+          resourceBasePath: "/apis/batch/v1",
+          kind: "Job"
+        }
+      }
+    });
+    const dataSource = React.useMemo(() => {
+      return tableProps.data.filter((p) => {
+        return owner ? matchOwner(p, owner) : true;
+      });
+    }, [tableProps.data, owner]);
+    if (!(dataSource == null ? void 0 : dataSource.length) && !tableProps.loading) {
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(WidgetErrorContent, {
+        errorText: i18n2.t("dovetail.no_resource", {
+          kind: " Job"
+        }),
+        type: ErrorContentType.Card
+      });
+    }
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(kit.space, {
+      direction: "vertical",
+      className: WrapperStyle$5,
+      children: [hideToolBar ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(TableToolBar, {
+        selectedKeys,
+        hideCreate: true
+      }), /* @__PURE__ */ jsxRuntimeExports.jsx(Table$1, {
+        ...tableProps,
+        tableKey: "cronjobs",
+        showMenuColumn: false
+      })]
+    });
+  };
+  const EventsTable = ({}) => {
+    const { i18n: i18n2 } = useTranslation();
+    const parsed = core.useParsed();
+    const columns = React.useMemo(
+      () => [
+        {
+          key: "type",
+          display: true,
+          dataIndex: ["type"],
+          title: i18n2.t("dovetail.type"),
+          sortable: true,
+          width: 120,
+          render(value2) {
+            const colorMap = {
+              "Warning": "red",
+              "Normal": "green"
+            };
+            return /* @__PURE__ */ jsxRuntimeExports.jsx(eagle.StatusCapsule, { color: colorMap[value2], className: cx_default(StateTagStyle, "no-background"), children: i18n2.t(`dovetail.${value2.toLowerCase()}`) });
+          },
+          sorter: CommonSorter(["type"])
+        },
+        {
+          key: "reason",
+          display: true,
+          dataIndex: ["reason"],
+          title: i18n2.t("dovetail.reason"),
+          sortable: true,
+          width: 120,
+          sorter: CommonSorter(["reason"])
+        },
+        {
           key: "note",
           display: true,
           dataIndex: ["note"],
@@ -10524,15 +11016,22 @@ var __publicField = (obj, key, value) => {
       ],
       [i18n2]
     );
+    const { tableProps } = useEagleTable({
+      columns,
+      useTableParams: {
+        resource: "events",
+        meta: { resourceBasePath: "/apis/events.k8s.io/v1", kind: "Event" }
+      }
+    });
     const component = React.useContext(ComponentContext);
-    const Table$1 = component.Table || Table;
     const dataSource = React.useMemo(() => {
-      return data2 == null ? void 0 : data2.data.filter((d) => {
+      return tableProps.data.filter((d) => {
         const objectId = `${d.regarding.namespace}/${d.regarding.name}`;
         return objectId === parsed.id;
       });
-    }, [data2 == null ? void 0 : data2.data, parsed]);
-    if (!(dataSource == null ? void 0 : dataSource.length) && !isLoading) {
+    }, [tableProps.data, parsed]);
+    const Table$1 = component.Table || Table;
+    if (!(dataSource == null ? void 0 : dataSource.length) && !tableProps.loading) {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         WidgetErrorContent,
         {
@@ -10543,17 +11042,8 @@ var __publicField = (obj, key, value) => {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       Table$1,
       {
+        ...tableProps,
         tableKey: "events",
-        loading: isLoading,
-        data: (dataSource || []).slice((currentPage - 1) * currentSize, currentPage * currentSize),
-        total: (dataSource == null ? void 0 : dataSource.length) || 0,
-        columns: addDefaultRenderToColumns(columns),
-        rowKey: "id",
-        error: false,
-        currentPage,
-        onPageChange: (p) => setCurrentPage(p),
-        defaultSize: currentSize,
-        refetch: () => null,
         showMenuColumn: false
       }
     );
@@ -10597,7 +11087,6 @@ var __publicField = (obj, key, value) => {
     }, [ingress.flattenedRules]);
     const component = React.useContext(ComponentContext);
     const Table$1 = component.Table || Table;
-    const [currentPage, setCurrentPage] = React.useState(1);
     const currentSize = 10;
     const columns = [
       {
@@ -10663,6 +11152,15 @@ var __publicField = (obj, key, value) => {
         sortable: true
       }
     ];
+    const {
+      data: finalData,
+      currentPage,
+      onPageChange,
+      onSorterChange
+    } = useTableData({
+      columns,
+      data: rows
+    });
     if ((rows == null ? void 0 : rows.length) === 0) {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         WidgetErrorContent,
@@ -10678,19 +11176,20 @@ var __publicField = (obj, key, value) => {
       {
         tableKey: "ingressRules",
         loading: false,
-        data: rows.slice((currentPage - 1) * currentSize, currentPage * currentSize),
+        data: finalData,
         total: rows.length,
         columns: addDefaultRenderToColumns(columns),
         rowKey: "pathType",
         empty: t2("dovetail.empty"),
         defaultSize: currentSize,
         currentPage,
-        onPageChange: setCurrentPage,
+        onPageChange,
+        onSorterChange,
         showMenuColumn: false
       }
     );
   };
-  const KeyValue_q4vd5r = "";
+  const KeyValue_1v1utgj = "";
   const ContentBlockStyle = "c8jy7dc";
   const KeyStyle = "k2sddxl";
   const ValueStyle$2 = "v16vicsr";
@@ -10764,109 +11263,6 @@ var __publicField = (obj, key, value) => {
       }) : null]
     });
   }
-  function download(filename, content) {
-    const element = document.createElement("a");
-    element.setAttribute(
-      "href",
-      "data:text/plain;charset=utf-8," + encodeURIComponent(content)
-    );
-    element.setAttribute("download", filename);
-    element.style.display = "none";
-    document.body.appendChild(element);
-    element.click();
-    document.body.removeChild(element);
-  }
-  function useDownloadYAML() {
-    return function(options) {
-      const { name: name2, item } = options;
-      console.log("download", item);
-      const content = yaml.dump(item);
-      download(`${name2}.yaml`, content);
-    };
-  }
-  function K8sDropdown(props) {
-    const { record, size = "normal" } = props;
-    const kit = eagle.useUIKit();
-    const { globalStore } = useGlobalStore();
-    const useResourceResult = core.useResource();
-    const resource = useResourceResult.resource;
-    const { modalProps, visible, openDeleteConfirmModal } = useDeleteModal(
-      (resource == null ? void 0 : resource.name) || ""
-    );
-    const download2 = useDownloadYAML();
-    const { t: t2 } = useTranslation();
-    const openForm = useOpenForm({ id: record.id });
-    const isInShowPage = useResourceResult.action === "show";
-    const { data: canEditData } = core.useCan({
-      resource: resource == null ? void 0 : resource.name,
-      action: AccessControlAuth.Edit
-    });
-    const { data: canDeleteData } = core.useCan({
-      resource: resource == null ? void 0 : resource.name,
-      action: AccessControlAuth.Delete
-    });
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
-      /* @__PURE__ */ jsxRuntimeExports.jsx(
-        kit.dropdown,
-        {
-          overlay: /* @__PURE__ */ jsxRuntimeExports.jsxs(kit.menu, { children: [
-            isInShowPage || (canEditData == null ? void 0 : canEditData.can) === false ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
-              kit.menuItem,
-              {
-                onClick: openForm,
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(eagle.Icon, { src: iconsReact.EditPen16PrimaryIcon, children: t2("dovetail.edit_yaml") })
-              }
-            ),
-            /* @__PURE__ */ jsxRuntimeExports.jsx(
-              kit.menu.Item,
-              {
-                onClick: () => {
-                  var _a;
-                  if (record.id) {
-                    download2({
-                      name: ((_a = record.metadata) == null ? void 0 : _a.name) || record.kind || "",
-                      item: (globalStore == null ? void 0 : globalStore.restoreItem(record)) || record
-                    });
-                  }
-                },
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(eagle.Icon, { src: iconsReact.Download16GradientBlueIcon, children: t2("dovetail.download_yaml") })
-              }
-            ),
-            props.children,
-            (canDeleteData == null ? void 0 : canDeleteData.can) !== false ? /* @__PURE__ */ jsxRuntimeExports.jsx(kit.divider, { style: { margin: 0 } }) : null,
-            (canDeleteData == null ? void 0 : canDeleteData.can) !== false ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-              kit.menuItem,
-              {
-                danger: true,
-                onClick: () => {
-                  openDeleteConfirmModal(record.id);
-                },
-                children: /* @__PURE__ */ jsxRuntimeExports.jsx(eagle.Icon, { src: iconsReact.TrashBinDelete16Icon, children: t2("dovetail.delete") })
-              }
-            ) : null
-          ] }),
-          trigger: ["click"],
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(
-            kit.button,
-            {
-              type: "quiet",
-              size: size === "large" ? "middle" : "small",
-              prefixIcon: size === "large" ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-                eagle.Icon,
-                {
-                  src: iconsReact.MoreEllipsis324BoldSecondaryIcon,
-                  hoverSrc: iconsReact.MoreEllipsis324BoldBlueIcon,
-                  iconWidth: 24,
-                  iconHeight: 24
-                }
-              ) : /* @__PURE__ */ jsxRuntimeExports.jsx(eagle.Icon, { src: iconsReact.MoreEllipsis316BoldBlueIcon })
-            }
-          )
-        }
-      ),
-      visible ? /* @__PURE__ */ jsxRuntimeExports.jsx(kit.modal, { ...modalProps }) : null
-    ] });
-  }
   function Tabs(props) {
     const { tabs, className } = props;
     const kit = eagle.useUIKit();
@@ -10910,7 +11306,8 @@ var __publicField = (obj, key, value) => {
     const {
       showConfig,
       formatter,
-      Dropdown = K8sDropdown
+      Dropdown = K8sDropdown,
+      data: data2
     } = props;
     const kit = eagle.useUIKit();
     const parsed = core.useParsed();
@@ -10918,17 +11315,9 @@ var __publicField = (obj, key, value) => {
       resource
     } = core.useResource();
     const id = (_a = parsed == null ? void 0 : parsed.params) == null ? void 0 : _a.id;
-    const {
-      queryResult
-    } = core.useShow({
-      id
-    });
     const {
       t: t2
     } = useTranslation();
-    const {
-      data: data2
-    } = queryResult;
     const navigation = core.useNavigation();
     const go = core.useGo();
     const openForm = useOpenForm({
@@ -11119,27 +11508,9 @@ var __publicField = (obj, key, value) => {
     } = useTranslation();
     const kit = eagle.useUIKit();
     const [selectedKeys, setSelectedKeys] = React.useState([]);
-    const [currentPage, setCurrentPage] = React.useState(1);
     const component = React.useContext(ComponentContext);
     const Table$1 = component.Table || Table;
     const currentSize = 10;
-    const {
-      data: data2
-    } = core.useList({
-      resource: "pods",
-      meta: {
-        resourceBasePath: "/api/v1",
-        kind: "Pod"
-      },
-      pagination: {
-        mode: "off"
-      }
-    });
-    const dataSource = React.useMemo(() => {
-      return data2 == null ? void 0 : data2.data.filter((p) => {
-        return selector ? matchSelector(p, selector) : true;
-      });
-    }, [data2 == null ? void 0 : data2.data, selector]);
     const columns = [NameColumnRenderer(i18n2, "pods"), StateDisplayColumnRenderer(i18n2), {
       key: "ip",
       display: true,
@@ -11148,6 +11519,23 @@ var __publicField = (obj, key, value) => {
       sortable: true,
       width: 160
     }, NodeNameColumnRenderer(i18n2), WorkloadImageColumnRenderer(i18n2), PodContainersNumColumnRenderer(i18n2), RestartCountColumnRenderer(i18n2), AgeColumnRenderer(i18n2)];
+    const {
+      tableProps
+    } = useEagleTable({
+      columns,
+      useTableParams: {
+        resource: "pods",
+        meta: {
+          resourceBasePath: "/api/v1",
+          kind: "Pod"
+        }
+      }
+    });
+    const dataSource = React.useMemo(() => {
+      return tableProps.data.filter((p) => {
+        return selector ? matchSelector(p, selector) : true;
+      });
+    }, [tableProps.data, selector]);
     if ((dataSource == null ? void 0 : dataSource.length) === 0) {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(WidgetErrorContent, {
         errorText: i18n2.t("dovetail.no_resource", {
@@ -11166,18 +11554,10 @@ var __publicField = (obj, key, value) => {
         selectedKeys,
         hideCreate: true
       }), /* @__PURE__ */ jsxRuntimeExports.jsx(Table$1, {
+        ...tableProps,
         tableKey: "pods",
-        loading: !dataSource,
-        data: (dataSource || []).slice((currentPage - 1) * currentSize, currentPage * currentSize),
-        total: (dataSource == null ? void 0 : dataSource.length) || 0,
-        columns: addDefaultRenderToColumns(columns),
         onSelect: (keys) => setSelectedKeys(keys),
-        rowKey: "id",
-        error: false,
-        currentPage,
-        onPageChange: (p) => setCurrentPage(p),
         defaultSize: currentSize,
-        refetch: () => null,
         showMenuColumn: false
       })]
     });
@@ -17369,7 +17749,7 @@ var __publicField = (obj, key, value) => {
     const kit = eagle.useUIKit();
     const [selectedContainer, setSelectedContainer] = React.useState(((_b = (_a = pod2.spec) == null ? void 0 : _a.containers[0]) == null ? void 0 : _b.name) || "");
     const [logs, setLogs] = React.useState([]);
-    const [logType, setLogType] = React.useState();
+    const [logType, setLogType] = React.useState("realtime");
     const [currentItemCount, setCurrentItemCount] = React.useState(0);
     const [paused, setPaused] = React.useState(false);
     const [wrap2, setWrap] = React.useState(false);
@@ -17406,30 +17786,20 @@ var __publicField = (obj, key, value) => {
         }
       }
     };
-    const fetchLogs = React.useCallback(() => {
-      var _a2, _b2;
-      if (!selectedContainer) {
-        return;
-      }
+    const fetchLogsByUrl = React.useCallback(async (url) => {
       abortControllerRef.current = new AbortController();
       const {
         signal
       } = abortControllerRef.current;
-      let url = `${apiUrl}/api/v1/namespaces/${(_a2 = pod2.metadata) == null ? void 0 : _a2.namespace}/pods/${(_b2 = pod2.metadata) == null ? void 0 : _b2.name}/log?container=${selectedContainer}&timestamps=true`;
-      if (logType === "realtime") {
-        url += "&follow=true";
-      } else if (logType === "previous") {
-        url += "&previous=true";
-      }
       fetch(url, {
         signal
-      }).then((response) => {
-        var _a3;
+      }).then(async (response) => {
+        var _a2;
         if (response.status !== 200) {
           setLogs([]);
           return;
         }
-        const reader = (_a3 = response.body) == null ? void 0 : _a3.getReader();
+        const reader = (_a2 = response.body) == null ? void 0 : _a2.getReader();
         if (!reader) {
           return;
         }
@@ -17462,7 +17832,19 @@ var __publicField = (obj, key, value) => {
         };
         reader.read().then(processChunk);
       });
-    }, [(_c = pod2.metadata) == null ? void 0 : _c.namespace, (_d = pod2.metadata) == null ? void 0 : _d.name, selectedContainer, logType, apiUrl]);
+    }, []);
+    const fetchLogs = React.useCallback(async () => {
+      var _a2, _b2;
+      if (!selectedContainer) {
+        return;
+      }
+      const url = `${apiUrl}/api/v1/namespaces/${(_a2 = pod2.metadata) == null ? void 0 : _a2.namespace}/pods/${(_b2 = pod2.metadata) == null ? void 0 : _b2.name}/log?container=${selectedContainer}&timestamps=true`;
+      if (logType === "realtime") {
+        fetchLogsByUrl(`${url}&follow=true`);
+      } else if (logType === "previous") {
+        fetchLogsByUrl(`${url}&previous=true`);
+      }
+    }, [(_c = pod2.metadata) == null ? void 0 : _c.namespace, (_d = pod2.metadata) == null ? void 0 : _d.name, selectedContainer, logType, apiUrl, fetchLogsByUrl]);
     const stopFetchingLogs = React.useCallback(() => {
       if (abortControllerRef.current) {
         abortControllerRef.current.abort();
@@ -17784,7 +18166,6 @@ var __publicField = (obj, key, value) => {
     const { i18n: i18n2 } = useTranslation();
     const component = React.useContext(ComponentContext);
     const Table$1 = component.Table || Table;
-    const [currentPage, setCurrentPage] = React.useState(1);
     const currentSize = 10;
     const columns = React.useMemo(
       () => [
@@ -17841,10 +18222,11 @@ var __publicField = (obj, key, value) => {
           sortable: true,
           sorter: CommonSorter(["state", "running", "startedAt"]),
           width: 120,
-          render: (value2) => {
+          render: (_, record) => {
+            const value2 = lodashEs.get(record, ["state", "running", "startedAt"]) || lodashEs.get(record, ["state", "terminated", "startedAt"]);
             if (value2)
               return /* @__PURE__ */ jsxRuntimeExports.jsx(Time, { date: new Date(value2) });
-            return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "-" });
+            return /* @__PURE__ */ jsxRuntimeExports.jsx(ValueDisplay, { value: "" });
           }
         }
       ],
@@ -17854,6 +18236,15 @@ var __publicField = (obj, key, value) => {
       () => addId(containerStatuses.concat(initContainerStatuses), "containerID"),
       [containerStatuses, initContainerStatuses]
     );
+    const {
+      data: finalData,
+      currentPage,
+      onPageChange,
+      onSorterChange
+    } = useTableData({
+      data: dataSource,
+      columns
+    });
     if (dataSource.length === 0) {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(
         WidgetErrorContent,
@@ -17869,14 +18260,15 @@ var __publicField = (obj, key, value) => {
       {
         tableKey: "podContainers",
         loading: false,
-        data: dataSource.slice((currentPage - 1) * currentSize, currentPage * currentSize),
+        data: finalData,
         total: dataSource.length,
         columns: addDefaultRenderToColumns(columns),
         rowKey: "containerID",
         error: false,
         defaultSize: currentSize,
         currentPage,
-        onPageChange: setCurrentPage,
+        onPageChange,
+        onSorterChange,
         showMenuColumn: false
       }
     );
@@ -18045,11 +18437,11 @@ var __publicField = (obj, key, value) => {
         retry: 1
       },
       errorNotification: () => {
-        var _a2;
+        var _a2, _b;
         return {
           message: i18n2.t("dovetail.fail_get_detail", {
-            resource: resource == null ? void 0 : resource.name,
-            name: (_a2 = parsed == null ? void 0 : parsed.params) == null ? void 0 : _a2.id,
+            resource: (_a2 = resource == null ? void 0 : resource.meta) == null ? void 0 : _a2.kind,
+            name: (_b = parsed == null ? void 0 : parsed.params) == null ? void 0 : _b.id,
             interpolation: { escapeValue: false }
           }),
           description: "Error",
@@ -18057,13 +18449,13 @@ var __publicField = (obj, key, value) => {
         };
       }
     });
-    const { isLoading, isError } = queryResult;
+    const { isLoading, isError, data: data2 } = queryResult;
     React.useEffect(() => {
       if (isError && resource) {
         nav.list(resource);
       }
     }, [isError, nav, resource]);
-    return isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(eagle.Loading, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(ShowContent, { ...props });
+    return isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(eagle.Loading, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(ShowContent, { ...props, data: data2 });
   };
   const index_17v8shn = "";
   const WrapperStyle$1 = "w1akirqw";
@@ -18092,426 +18484,105 @@ var __publicField = (obj, key, value) => {
           ...saveButtonProps,
           children: t2("dovetail.save")
         })
-      })]
-    });
-  }
-  function WorkloadDropdown(props) {
-    const { record, size, children } = props;
-    const kit = eagle.useUIKit();
-    const { resource } = core.useResource();
-    const { mutateAsync } = core.useUpdate();
-    const { t: t2 } = useTranslation();
-    const { data: canEditData } = core.useCan({
-      resource: resource == null ? void 0 : resource.name,
-      action: AccessControlAuth.Edit
-    });
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(K8sDropdown, { record, size, children: [
-      (canEditData == null ? void 0 : canEditData.can) !== false ? /* @__PURE__ */ jsxRuntimeExports.jsx(
-        kit.menu.Item,
-        {
-          onClick: async () => {
-            const v = record.redeploy();
-            const id = v.id;
-            pruneBeforeEdit(v);
-            await mutateAsync({
-              id,
-              resource: (resource == null ? void 0 : resource.name) || "",
-              values: v,
-              successNotification() {
-                return {
-                  message: t2("dovetail.redeploy_success_toast", {
-                    kind: record.kind,
-                    name: record.id,
-                    interpolation: {
-                      escapeValue: false
-                    }
-                  }),
-                  type: "success"
-                };
-              },
-              errorNotification() {
-                return {
-                  message: t2("dovetail.redeploy_failed_toast", {
-                    kind: record.kind,
-                    name: record.id,
-                    interpolation: {
-                      escapeValue: false
-                    }
-                  }),
-                  type: "error"
-                };
-              }
-            });
-          },
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(eagle.Icon, { src: iconsReact.Retry16GradientBlueIcon, children: t2("dovetail.redeploy") })
-        }
-      ) : null,
-      children
-    ] });
-  }
-  function ReplicasDropdown(props) {
-    const { record, size, children } = props;
-    const kit = eagle.useUIKit();
-    const { t: t2 } = useTranslation();
-    const formRef = React.useRef(null);
-    const { action, resource } = core.useResource();
-    const isInShowPage = action === "show";
-    const { data: canEditData } = core.useCan({
-      resource: resource == null ? void 0 : resource.name,
-      action: AccessControlAuth.Edit
-    });
-    return /* @__PURE__ */ jsxRuntimeExports.jsxs(WorkloadDropdown, { record, size, children: [
-      isInShowPage || (canEditData == null ? void 0 : canEditData.can) === false ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
-        kit.menu.Item,
-        {
-          onClick: () => {
-            const modalProps = {
-              formRef,
-              title: t2("dovetail.edit_replicas"),
-              renderContent() {
-                return /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  WorkloadReplicasForm,
-                  {
-                    ref: formRef,
-                    defaultValue: record.replicas || 0,
-                    record,
-                    label: t2("dovetail.pod_replicas_num")
-                  }
-                );
-              }
-            };
-            eagle.pushModal({
-              component: EditFieldModal,
-              props: modalProps
-            });
-          },
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(eagle.Icon, { src: iconsReact.EditPen16PrimaryIcon, children: t2("dovetail.edit_replicas") })
-        }
-      ),
-      children
-    ] });
-  }
-  globalThis && globalThis.__awaiter || function(thisArg, _arguments, P, generator) {
-    function adopt(value2) {
-      return value2 instanceof P ? value2 : new P(function(resolve) {
-        resolve(value2);
-      });
-    }
-    return new (P || (P = Promise))(function(resolve, reject) {
-      function fulfilled(value2) {
-        try {
-          step(generator.next(value2));
-        } catch (e2) {
-          reject(e2);
-        }
-      }
-      function rejected(value2) {
-        try {
-          step(generator["throw"](value2));
-        } catch (e2) {
-          reject(e2);
-        }
-      }
-      function step(result) {
-        result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-      }
-      step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-  };
-  function useEventCallback(fn) {
-    const ref = React.useRef(() => {
-      throw new Error("Cannot call an event handler while rendering.");
-    });
-    useIsomorphicLayoutEffect(() => {
-      ref.current = fn;
-    }, [fn]);
-    return React.useCallback((...args) => ref.current(...args), [ref]);
-  }
-  function useEventListener(eventName, handler, element, options) {
-    const savedHandler = React.useRef(handler);
-    useIsomorphicLayoutEffect(() => {
-      savedHandler.current = handler;
-    }, [handler]);
-    React.useEffect(() => {
-      var _a;
-      const targetElement = (_a = element === null || element === void 0 ? void 0 : element.current) !== null && _a !== void 0 ? _a : window;
-      if (!(targetElement && targetElement.addEventListener))
-        return;
-      const listener = (event2) => savedHandler.current(event2);
-      targetElement.addEventListener(eventName, listener, options);
-      return () => {
-        targetElement.removeEventListener(eventName, listener, options);
-      };
-    }, [eventName, element, options]);
-  }
-  globalThis && globalThis.__awaiter || function(thisArg, _arguments, P, generator) {
-    function adopt(value2) {
-      return value2 instanceof P ? value2 : new P(function(resolve) {
-        resolve(value2);
-      });
-    }
-    return new (P || (P = Promise))(function(resolve, reject) {
-      function fulfilled(value2) {
-        try {
-          step(generator.next(value2));
-        } catch (e2) {
-          reject(e2);
-        }
-      }
-      function rejected(value2) {
-        try {
-          step(generator["throw"](value2));
-        } catch (e2) {
-          reject(e2);
-        }
-      }
-      function step(result) {
-        result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
-      }
-      step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-  };
-  const useIsomorphicLayoutEffect = typeof window !== "undefined" ? React.useLayoutEffect : React.useEffect;
-  function useLocalStorage(key2, initialValue) {
-    const readValue = React.useCallback(() => {
-      if (typeof window === "undefined") {
-        return initialValue;
-      }
-      try {
-        const item = window.localStorage.getItem(key2);
-        return item ? parseJSON(item) : initialValue;
-      } catch (error) {
-        console.warn(`Error reading localStorage key “${key2}”:`, error);
-        return initialValue;
-      }
-    }, [initialValue, key2]);
-    const [storedValue, setStoredValue] = React.useState(readValue);
-    const setValue = useEventCallback((value2) => {
-      if (typeof window === "undefined") {
-        console.warn(`Tried setting localStorage key “${key2}” even though environment is not a client`);
-      }
-      try {
-        const newValue = value2 instanceof Function ? value2(storedValue) : value2;
-        window.localStorage.setItem(key2, JSON.stringify(newValue));
-        setStoredValue(newValue);
-        window.dispatchEvent(new Event("local-storage"));
-      } catch (error) {
-        console.warn(`Error setting localStorage key “${key2}”:`, error);
-      }
-    });
-    React.useEffect(() => {
-      setStoredValue(readValue());
-    }, []);
-    const handleStorageChange = React.useCallback((event2) => {
-      if ((event2 === null || event2 === void 0 ? void 0 : event2.key) && event2.key !== key2) {
-        return;
-      }
-      setStoredValue(readValue());
-    }, [key2, readValue]);
-    useEventListener("storage", handleStorageChange);
-    useEventListener("local-storage", handleStorageChange);
-    return [storedValue, setValue];
-  }
-  function parseJSON(value2) {
-    try {
-      return value2 === "undefined" ? void 0 : JSON.parse(value2 !== null && value2 !== void 0 ? value2 : "");
-    } catch (_a) {
-      console.log("parsing error on", { value: value2 });
-      return void 0;
-    }
-  }
-  const GlobalStoreContext = React.createContext({});
-  const index_1xad2h9 = "";
-  const SelectStyle = "sj0ggy";
-  const DropdownStyle = "d1eo8uqs";
-  const SearchInputStyle = "s64gojc";
-  const SelectContentStyle = "s16fqgtu";
-  const TokenStyle = "tgaujbg";
-  const CountTokenStyle = "c1vbd54v";
-  const SelectOptionGroupStyle = "sxzmtrx";
-  const LabelWrapperStyle = "lqrghwd";
-  const AllNamespaceOptionStyle = "api7z1z";
-  const OptionStyle = "o38b23x";
-  const NS_STORE_KEY = "namespace-filter";
-  const ALL_NS = "_all";
-  const useNamespacesFilter = () => {
-    const [value2] = useLocalStorage(NS_STORE_KEY, [ALL_NS]);
-    const {
-      resource
-    } = core.useResource();
-    const configs = React.useContext(ConfigsContext);
-    if ((resource == null ? void 0 : resource.name) && configs[resource == null ? void 0 : resource.name].hideNamespacesFilter) {
-      return {
-        value: []
-      };
-    }
-    return {
-      value: value2
-    };
-  };
-  const NamespacesFilter = ({
-    className
-  }) => {
+      })]
+    });
+  }
+  function WorkloadDropdown(props) {
+    const { record, size, children } = props;
     const kit = eagle.useUIKit();
-    const {
-      t: t2
-    } = useTranslation();
-    const [search, setSearch] = React.useState("");
-    const [tagMaxWidth, setTagMaxWidth] = React.useState("");
-    const {
-      data: data2,
-      isLoading
-    } = core.useList({
-      resource: "namespaces",
-      meta: {
-        resourceBasePath: "/api/v1",
-        kind: "Namespace"
-      },
-      pagination: {
-        mode: "off"
-      }
+    const { resource } = core.useResource();
+    const { mutateAsync } = core.useUpdate();
+    const { t: t2 } = useTranslation();
+    const { data: canEditData } = core.useCan({
+      resource: resource == null ? void 0 : resource.name,
+      action: AccessControlAuth.Edit
     });
-    const [value2, setValue] = useLocalStorage(NS_STORE_KEY, [ALL_NS]);
-    const [open, setOpen] = React.useState(false);
-    const debouncedSetSearch = lodashEs.debounce(setSearch, 100);
-    const MAX_TAG_COUNT = 8;
-    const COUNT_TAG_WIDTH = 22;
-    const TAG_GAP = 4;
-    const PADDING = 36;
-    const hasCountTag = value2.length > MAX_TAG_COUNT;
-    const WRAPPER_CLASS = "d2-namespace-select-wrapper";
-    const SELECT_CLASS = "d2-namespace-select";
-    const calcTagMaxWidth = React.useCallback(() => {
-      const wrapper = document.querySelector(`.${WRAPPER_CLASS}`);
-      const n2 = Math.min(value2.length, MAX_TAG_COUNT);
-      const tagWidth = ((wrapper == null ? void 0 : wrapper.offsetWidth) || 0) / n2;
-      const gapsWidth = (Math.min(value2.length, MAX_TAG_COUNT + 1) - 1) * TAG_GAP;
-      const paddingAndCountTagWidth = PADDING + (hasCountTag ? COUNT_TAG_WIDTH : 0);
-      const perTagMaxWidth = tagWidth - (paddingAndCountTagWidth + gapsWidth) / n2;
-      setTagMaxWidth(`${perTagMaxWidth}px`);
-    }, [value2, hasCountTag]);
-    React.useEffect(() => {
-      calcTagMaxWidth();
-    }, [calcTagMaxWidth]);
-    React.useEffect(() => {
-      window.addEventListener("resize", calcTagMaxWidth);
-      return () => {
-        window.removeEventListener("resize", calcTagMaxWidth);
-      };
-    }, [calcTagMaxWidth]);
-    return /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-      className: WRAPPER_CLASS,
-      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(kit.select, {
-        loading: isLoading,
-        className: cx_default(SelectStyle, SELECT_CLASS, className),
-        style: {
-          "--tag-max-width": tagMaxWidth
-        },
-        dropdownClassName: DropdownStyle,
-        searchValue: search,
-        virtual: false,
-        input: {
-          value: value2,
-          onChange(value22) {
-            if (lodashEs.last(value22) === ALL_NS || value22.length === 0) {
-              setValue([ALL_NS]);
-            } else {
-              setValue(value22.filter((namespace2) => namespace2 !== ALL_NS));
-            }
-          }
-        },
-        dropdownRender: (menu) => /* @__PURE__ */ jsxRuntimeExports.jsxs("div", {
-          className: SelectContentStyle,
-          children: [/* @__PURE__ */ jsxRuntimeExports.jsx(kit.searchInput, {
-            style: {
-              width: "100%"
-            },
-            className: SearchInputStyle,
-            onChange: debouncedSetSearch,
-            placeholder: t2("dovetail.please_input")
-          }), menu, isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(kit.loading, {}) : null]
-        }),
-        tagRender: ({
-          label: label2,
-          value: namespaceValue,
-          closable,
-          onClose
-        }) => {
-          const isCountToken = label2 !== namespaceValue && typeof label2 === "string";
-          const isAll = namespaceValue === ALL_NS;
-          return /* @__PURE__ */ jsxRuntimeExports.jsx("span", {
-            onClick: () => {
-              setOpen(!open);
-            },
-            children: isAll ? /* @__PURE__ */ jsxRuntimeExports.jsxs("span", {
-              style: {
-                marginLeft: 8
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(K8sDropdown, { record, size, children: [
+      (canEditData == null ? void 0 : canEditData.can) !== false ? /* @__PURE__ */ jsxRuntimeExports.jsx(
+        kit.menu.Item,
+        {
+          onClick: async () => {
+            const v = record.redeploy();
+            const id = v.id;
+            pruneBeforeEdit(v);
+            await mutateAsync({
+              id,
+              resource: (resource == null ? void 0 : resource.name) || "",
+              values: v,
+              successNotification() {
+                return {
+                  message: t2("dovetail.redeploy_success_toast", {
+                    kind: record.kind,
+                    name: record.id,
+                    interpolation: {
+                      escapeValue: false
+                    }
+                  }),
+                  type: "success"
+                };
               },
-              children: [label2, "..."]
-            }) : /* @__PURE__ */ jsxRuntimeExports.jsx(kit.token, {
-              className: cx_default(isCountToken ? CountTokenStyle : TokenStyle, isCountToken ? "" : "closable-token"),
-              closable,
-              size: "medium",
-              onClose,
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx(kit.overflowTooltip, {
-                content: isCountToken ? /* @__PURE__ */ jsxRuntimeExports.jsx(kit.tooltip, {
-                  title: isCountToken ? value2.slice(MAX_TAG_COUNT).map((namespace2, index) => /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, {
-                    children: [/* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-                      children: namespace2
-                    }), index !== value2.length - 1 - MAX_TAG_COUNT ? /* @__PURE__ */ jsxRuntimeExports.jsx(kit.divider, {
-                      style: {
-                        margin: "6px 0",
-                        borderColor: "rgba(107, 128, 167, 0.60)"
-                      }
-                    }) : null]
-                  })) : null,
-                  trigger: ["hover"],
-                  children: /* @__PURE__ */ jsxRuntimeExports.jsx("span", {
-                    children: label2.replace(/[\s\.]/g, "")
-                  })
-                }) : label2
-              })
-            })
-          });
-        },
-        maxTagCount: MAX_TAG_COUNT,
-        optionLabelProp: "label",
-        showArrow: true,
-        showSearch: false,
-        open,
-        onDropdownVisibleChange: (open2) => {
-          setOpen(open2);
-        },
-        multiple: true,
-        children: [/* @__PURE__ */ jsxRuntimeExports.jsx(kit.option, {
-          value: "_all",
-          label: t2("dovetail.all_namespaces"),
-          className: AllNamespaceOptionStyle,
-          children: /* @__PURE__ */ jsxRuntimeExports.jsx(kit.overflowTooltip, {
-            content: t2("dovetail.all_namespaces"),
-            className: LabelWrapperStyle
-          })
-        }, "_all"), /* @__PURE__ */ jsxRuntimeExports.jsx(kit.selectOptGroup, {
-          label: "",
-          className: SelectOptionGroupStyle,
-          children: data2 == null ? void 0 : data2.data.map((namespace2) => {
-            const {
-              name: name2
-            } = namespace2.metadata;
-            return /* @__PURE__ */ jsxRuntimeExports.jsx(kit.option, {
-              value: name2,
-              label: name2,
-              className: OptionStyle,
-              children: /* @__PURE__ */ jsxRuntimeExports.jsx(kit.overflowTooltip, {
-                content: name2,
-                className: LabelWrapperStyle
-              })
-            }, name2);
-          })
-        })]
-      })
+              errorNotification() {
+                return {
+                  message: t2("dovetail.redeploy_failed_toast", {
+                    kind: record.kind,
+                    name: record.id,
+                    interpolation: {
+                      escapeValue: false
+                    }
+                  }),
+                  type: "error"
+                };
+              }
+            });
+          },
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(eagle.Icon, { src: iconsReact.Retry16GradientBlueIcon, children: t2("dovetail.redeploy") })
+        }
+      ) : null,
+      children
+    ] });
+  }
+  function ReplicasDropdown(props) {
+    const { record, size, children } = props;
+    const kit = eagle.useUIKit();
+    const { t: t2 } = useTranslation();
+    const formRef = React.useRef(null);
+    const { action, resource } = core.useResource();
+    const isInShowPage = action === "show";
+    const { data: canEditData } = core.useCan({
+      resource: resource == null ? void 0 : resource.name,
+      action: AccessControlAuth.Edit
     });
-  };
+    return /* @__PURE__ */ jsxRuntimeExports.jsxs(WorkloadDropdown, { record, size, children: [
+      isInShowPage || (canEditData == null ? void 0 : canEditData.can) === false ? null : /* @__PURE__ */ jsxRuntimeExports.jsx(
+        kit.menu.Item,
+        {
+          onClick: () => {
+            const modalProps = {
+              formRef,
+              title: t2("dovetail.edit_replicas"),
+              renderContent() {
+                return /* @__PURE__ */ jsxRuntimeExports.jsx(
+                  WorkloadReplicasForm,
+                  {
+                    ref: formRef,
+                    defaultValue: record.replicas || 0,
+                    record,
+                    label: t2("dovetail.pod_replicas_num")
+                  }
+                );
+              }
+            };
+            eagle.pushModal({
+              component: EditFieldModal,
+              props: modalProps
+            });
+          },
+          children: /* @__PURE__ */ jsxRuntimeExports.jsx(eagle.Icon, { src: iconsReact.EditPen16PrimaryIcon, children: t2("dovetail.edit_replicas") })
+        }
+      ),
+      children
+    ] });
+  }
   const index_hp158y = "";
   const ListPageStyle = "laykzsq";
   const ListContentStyle = "l1ng0psc";
@@ -18580,8 +18651,7 @@ var __publicField = (obj, key, value) => {
       useTableParams: {},
       columns: [nameRenderer, ...(columns == null ? void 0 : columns()) || []],
       tableProps: {
-        defaultSize: 50,
-        ...props.config.tableProps
+        defaultSize: 50
       },
       formatter,
       Dropdown
@@ -21786,44 +21856,20 @@ var __publicField = (obj, key, value) => {
     _formControl.current.formState = getProxyFormState(formState, control);
     return _formControl.current;
   }
-  const RefineFormContent_1tb00bi = "";
+  const RefineFormContent_1in3vad = "";
   const RefineFormContent = (props) => {
-    var _a, _b, _c, _d;
+    var _a, _b;
     const {
       config,
       formResult,
-      resourceId,
+      action,
       errorMsg
     } = props;
     const {
       control,
       getValues
     } = formResult;
-    const action = resourceId ? "edit" : "create";
-    const listQuery = core.useList({
-      resource: config == null ? void 0 : config.name,
-      meta: {
-        resourceBasePath: config == null ? void 0 : config.basePath,
-        kind: config == null ? void 0 : config.kind
-      },
-      pagination: {
-        mode: "off"
-      }
-    });
-    const showQuery = core.useShow({
-      resource: config == null ? void 0 : config.name,
-      meta: {
-        resourceBasePath: config == null ? void 0 : config.basePath,
-        kind: config == null ? void 0 : config.kind
-      },
-      id: resourceId
-    });
-    const formFieldsConfig = (_d = (_a = config == null ? void 0 : config.formConfig) == null ? void 0 : _a.fields) == null ? void 0 : _d.call(_a, {
-      record: (_b = showQuery.queryResult.data) == null ? void 0 : _b.data,
-      records: ((_c = listQuery.data) == null ? void 0 : _c.data) || [],
-      action
-    });
-    const fields = formFieldsConfig == null ? void 0 : formFieldsConfig.map((c2) => {
+    const fields = (_b = (_a = config == null ? void 0 : config.formConfig) == null ? void 0 : _a.fields) == null ? void 0 : _b.map((c2) => {
       return /* @__PURE__ */ jsxRuntimeExports.jsx(Controller, {
         control,
         name: c2.path.join("."),
@@ -21855,7 +21901,6 @@ var __publicField = (obj, key, value) => {
           var _a2;
           const formValue = getValues();
           let ele = /* @__PURE__ */ jsxRuntimeExports.jsx(eagle.Fields.String, {
-            placeholder: c2.placeholder,
             input: {
               value: value2,
               onChange,
@@ -21868,7 +21913,6 @@ var __publicField = (obj, key, value) => {
           switch (c2.type) {
             case "number":
               ele = /* @__PURE__ */ jsxRuntimeExports.jsx(eagle.Fields.Integer, {
-                placeholder: c2.placeholder,
                 input: {
                   value: value2,
                   onChange,
@@ -21884,17 +21928,6 @@ var __publicField = (obj, key, value) => {
               children: value2
             });
           }
-          if (c2.helperText) {
-            ele = /* @__PURE__ */ jsxRuntimeExports.jsxs(eagle.Space, {
-              size: 4,
-              direction: "vertical",
-              className: "c154n7ie",
-              children: [ele, /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
-                className: cx_default(eagle.Typo.Footnote.f2_regular, "c1c9j4da"),
-                children: c2.helperText
-              })]
-            });
-          }
           if (c2 == null ? void 0 : c2.render) {
             ele = c2.render(value2, onChange, formValue, onBlur, action);
           }
@@ -21912,7 +21945,7 @@ var __publicField = (obj, key, value) => {
     });
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(eagle.Space, {
       direction: "vertical",
-      className: "cjxv8cf",
+      className: "c154n7ie",
       children: [fields, /* @__PURE__ */ jsxRuntimeExports.jsx(FormErrorAlert, {
         errorMsgs: errorMsg ? [errorMsg] : [],
         style: {
@@ -22552,6 +22585,7 @@ var __publicField = (obj, key, value) => {
     };
   };
   const useRefineForm = (props) => {
+    var _a;
     const { config, id, refineProps } = props;
     const [responseErrorMsg, setResponseErrorMsg] = React.useState("");
     const i18n2 = useTranslation();
@@ -22584,15 +22618,15 @@ var __publicField = (obj, key, value) => {
       defaultValues: config == null ? void 0 : config.initValue
     });
     React.useEffect(() => {
-      var _a, _b;
-      const response = (_a = result.refineCore.mutationResult.error) == null ? void 0 : _a.response;
+      var _a2, _b;
+      const response = (_a2 = result.refineCore.mutationResult.error) == null ? void 0 : _a2.response;
       if (response && !(response == null ? void 0 : response.bodyUsed)) {
         (_b = response.json) == null ? void 0 : _b.call(response).then((body) => {
-          var _a2, _b2;
-          setResponseErrorMsg(((_b2 = (_a2 = config.formConfig) == null ? void 0 : _a2.formatError) == null ? void 0 : _b2.call(_a2, body)) || body.message);
+          var _a3, _b2;
+          setResponseErrorMsg(((_b2 = (_a3 = config.formConfig) == null ? void 0 : _a3.formatError) == null ? void 0 : _b2.call(_a3, body)) || body.message);
         });
       }
-    }, [config.formConfig, result]);
+    }, [config.formConfig, (_a = result.refineCore.mutationResult.error) == null ? void 0 : _a.response]);
     return { formResult: result, responseErrorMsg };
   };
   const index_12sfrn = "";
@@ -23118,18 +23152,9 @@ var __publicField = (obj, key, value) => {
             setEditorErrors(errors);
             return;
           }
-          try {
-            const objectValues = editor.current ? yaml.load(((_a2 = editor.current) == null ? void 0 : _a2.getEditorValue()) || "") : values;
-            const finalValues = (transformApplyValues == null ? void 0 : transformApplyValues(objectValues)) || objectValues;
-            return onFinish(finalValues);
-          } catch (error) {
-            if (error instanceof Error) {
-              if (error.message === "expected a single document in the stream, but found more") {
-                setEditorErrors([t2("dovetail.only_support_one_yaml")]);
-                return;
-              }
-            }
-          }
+          const objectValues = editor.current ? yaml.load(((_a2 = editor.current) == null ? void 0 : _a2.getEditorValue()) || "") : values;
+          const finalValues = (transformApplyValues == null ? void 0 : transformApplyValues(objectValues)) || objectValues;
+          return onFinish(finalValues);
         },
         onKeyUp,
         onValuesChange,
@@ -23351,7 +23376,7 @@ var __publicField = (obj, key, value) => {
         formResult: refineFormResult.formResult,
         config,
         errorMsg: refineFormResult.responseErrorMsg,
-        resourceId: id
+        action: id ? "edit" : "create"
       });
     })();
     const saveButtonProps = isYamlForm ? yamlSaveButtonProps : refineFormResult.formResult.saveButtonProps;
@@ -23434,7 +23459,7 @@ var __publicField = (obj, key, value) => {
       children: [/* @__PURE__ */ jsxRuntimeExports.jsx(RefineFormContent, {
         config,
         formResult,
-        resourceId: id
+        action
       }), ";", /* @__PURE__ */ jsxRuntimeExports.jsx(eagle.Button, {
         ...saveButtonProps,
         onClick,
@@ -23672,7 +23697,7 @@ var __publicField = (obj, key, value) => {
     const parsed = core.useParsed();
     const nav = core.useNavigation();
     const { queryResult } = core.useShow({ id: (_a = parsed == null ? void 0 : parsed.params) == null ? void 0 : _a.id });
-    const { isLoading } = queryResult;
+    const { isLoading, data: data2 } = queryResult;
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       antd.Drawer,
       {
@@ -23681,7 +23706,7 @@ var __publicField = (obj, key, value) => {
         onClose: () => nav.goBack(),
         width: "50%",
         visible: !!((_b = parsed == null ? void 0 : parsed.params) == null ? void 0 : _b.id),
-        children: isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(kit.loading, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(ShowContent, { ...props })
+        children: isLoading ? /* @__PURE__ */ jsxRuntimeExports.jsx(kit.loading, {}) : /* @__PURE__ */ jsxRuntimeExports.jsx(ShowContent, { ...props, data: data2 })
       }
     );
   };
@@ -23709,7 +23734,7 @@ var __publicField = (obj, key, value) => {
     }
     const resource = Object.values(configs).find((c2) => c2.kind === ownerReference.kind);
     if (!resource) {
-      return /* @__PURE__ */ jsxRuntimeExports.jsx("span", { children: "-" });
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(ValueDisplay, { value: "" });
     }
     return /* @__PURE__ */ jsxRuntimeExports.jsx(
       ResourceLink,
@@ -23835,11 +23860,7 @@ var __publicField = (obj, key, value) => {
       title: i18n2.t("dovetail.name"),
       sortable: true,
       width: 200,
-      sorter: CommonSorter(dataIndex),
-      render: (v) => /* @__PURE__ */ jsxRuntimeExports.jsx(eagle.OverflowTooltip, {
-        content: v,
-        tooltip: v
-      })
+      sorter: CommonSorter(dataIndex)
     };
   };
   const NameSpaceColumnRenderer = (i18n2) => {
@@ -23932,17 +23953,8 @@ var __publicField = (obj, key, value) => {
       display: true,
       dataIndex,
       title: i18n2.t("dovetail.created_time"),
-      sortable: true,
       width: 120,
-      sorter: (a2, b) => {
-        const valA = new Date(lodashExports.get(a2, dataIndex));
-        const valB = new Date(lodashExports.get(b, dataIndex));
-        if (valA === valB)
-          return 0;
-        if (valA > valB)
-          return 1;
-        return -1;
-      },
+      sorter: true,
       render: (value2) => {
         return isRelativeTime ? /* @__PURE__ */ jsxRuntimeExports.jsx(Time, {
           date: new Date(value2)
@@ -24289,91 +24301,6 @@ var __publicField = (obj, key, value) => {
       }
     };
   };
-  var ColumnKeys = /* @__PURE__ */ ((ColumnKeys2) => {
-    ColumnKeys2["age"] = "age";
-    ColumnKeys2["name"] = "name";
-    ColumnKeys2["namespace"] = "namespace";
-    ColumnKeys2["phase"] = "phase";
-    ColumnKeys2["replicas"] = "replicas";
-    ColumnKeys2["deploymentImage"] = "deploymentImage";
-    ColumnKeys2["podImage"] = "podImage";
-    return ColumnKeys2;
-  })(ColumnKeys || {});
-  function addDefaultRenderToColumns(columns) {
-    return columns.map((col) => ({
-      render(value2) {
-        return /* @__PURE__ */ jsxRuntimeExports.jsx(
-          ValueDisplay,
-          {
-            value: value2
-          }
-        );
-      },
-      ...col
-    }));
-  }
-  const useEagleTable = (params) => {
-    var _a, _b, _c;
-    const { columns, tableProps, formatter, Dropdown = K8sDropdown } = params;
-    const [selectedKeys, setSelectedKeys] = React.useState([]);
-    const [currentPage, setCurrentPage] = React.useState((tableProps == null ? void 0 : tableProps.currentPage) || 1);
-    const { resource } = core.useResource();
-    const { value: nsFilters = [] } = useNamespacesFilter();
-    const useTableParams = React.useMemo(() => {
-      const mergedParams = lodashEs.merge(params.useTableParams, {
-        pagination: {
-          mode: "off"
-        },
-        filters: {
-          permanent: [
-            {
-              operator: "or",
-              value: nsFilters.filter((filter) => filter !== ALL_NS).map((filter) => ({
-                field: "metadata.namespace",
-                operator: "eq",
-                value: filter
-              }))
-            }
-          ]
-        }
-      });
-      return mergedParams;
-    }, [params.useTableParams, nsFilters]);
-    const finalColumns = React.useMemo(
-      () => addDefaultRenderToColumns(columns),
-      [columns]
-    );
-    const table = core.useTable(useTableParams);
-    const onPageChange = React.useCallback(
-      (page) => {
-        setCurrentPage(page);
-      },
-      [setCurrentPage]
-    );
-    const currentSize = (tableProps == null ? void 0 : tableProps.defaultSize) || 10;
-    const data2 = (_b = (_a = table.tableQueryResult.data) == null ? void 0 : _a.data) == null ? void 0 : _b.slice((currentPage - 1) * currentSize, currentPage * currentSize);
-    const total = ((_c = table.tableQueryResult.data) == null ? void 0 : _c.data.length) || 0;
-    const finalDataSource = formatter ? data2 == null ? void 0 : data2.map(formatter) : data2;
-    const finalProps = {
-      tableKey: (resource == null ? void 0 : resource.name) || "table",
-      loading: table.tableQueryResult.isLoading,
-      data: finalDataSource || [],
-      columns: finalColumns,
-      refetch: () => null,
-      error: false,
-      rowKey: "id",
-      currentPage,
-      onPageChange,
-      onSelect: (keys) => {
-        setSelectedKeys(keys);
-      },
-      total,
-      RowMenu: Dropdown,
-      ...tableProps,
-      defaultSize: currentSize
-    };
-    return { tableProps: finalProps, selectedKeys, ...table };
-  };
   const styles = "";
   const Dovetail = (props) => {
     const {
@@ -24426,7 +24353,10 @@ var __publicField = (obj, key, value) => {
         options: {
           warnWhenUnsavedChanges: true,
           liveMode: "auto",
-          disableTelemetry: true
+          disableTelemetry: true,
+          overtime: {
+            interval: Number.MAX_SAFE_INTEGER
+          }
         },
         accessControlProvider,
         resources: resourcesConfig.map((c2) => {