@dovetail-v2/refine 0.3.12-alpha.1 → 0.3.13-alpha.0

package/dist/refine.cjs

@@ -563,13 +563,12 @@ const create_failed$1 = "Creation failed.";
 const create_failed_tip$1 = "Please address the following issues and try again: ";
 const save_failed$1 = "Failed to save.";
 const save_failed_tip$1 = "Please address the following issues and try again: ";
-const completion_num_tooltip$1 = "Completed/Expected";
 const ready_num_tooltip$1 = "Ready/Expected";
 const realtime_log$1 = "Real-time logs";
 const previous_log$1 = "Last startup logs";
 const auto_wrap$1 = "Auto wrap";
 const container_num$1 = "Containers";
-const edit_resource_success$1 = "{{resource}} {{name}} was edited successfully";
+const edit_resource_success$1 = "{{kind}} {{name}} was edited successfully";
 const redeploy_success_toast$1 = "{{kind}} {{name}} was redeployed successfully";
 const redeploy_failed_toast$1 = "Failed to redeploy {{kind}} {{name}}";
 const pause_success_toast$1 = "Successfully suspended";
@@ -814,7 +813,6 @@ const dovetail$1 = {
   create_failed_tip: create_failed_tip$1,
   save_failed: save_failed$1,
   save_failed_tip: save_failed_tip$1,
-  completion_num_tooltip: completion_num_tooltip$1,
   ready_num_tooltip: ready_num_tooltip$1,
   realtime_log: realtime_log$1,
   previous_log: previous_log$1,
@@ -1042,7 +1040,7 @@ const expand = "展开";
 const fold = "收起";
 const rule = "规则";
 const default_backend = "默认后端";
-const ingress_class = "Ingress 类";
+const ingress_class = "IngressClass";
 const port = "端口";
 const pod_ready_num = "Pod 就绪数量";
 const pod_complete_num = "Pod 完成数量";
@@ -1080,7 +1078,7 @@ const create_failed = "创建失败。";
 const create_failed_tip = "请解决如下问题后，再创建：";
 const save_failed = "保存失败。";
 const save_failed_tip = "请解决如下问题后，再保存：";
-const completion_num_tooltip = "已完成数量/预期数量";
+const job_pod_count_tooltip = "完成数量/全部数量";
 const ready_num_tooltip = "就绪数量/预期数量";
 const warning = "警告";
 const normal = "正常";
@@ -1224,6 +1222,9 @@ const node_port_duplicated = "端口已被占用。";
 const all = "全部";
 const optional_with_bracket = "（选填）";
 const label_annotations = "标签与注解";
+const target_service = "目标服务";
+const target_service_port = "目标服务端口";
+const select_workload = "选择工作负载";
 const dovetail = {
   copy,
   reset_arguments,
@@ -1344,7 +1345,7 @@ const dovetail = {
   create_failed_tip,
   save_failed,
   save_failed_tip,
-  completion_num_tooltip,
+  job_pod_count_tooltip,
   ready_num_tooltip,
   "true": "是",
   "false": "否",
@@ -1489,7 +1490,10 @@ const dovetail = {
   node_port_duplicated,
   all,
   optional_with_bracket,
-  label_annotations
+  label_annotations,
+  target_service,
+  target_service_port,
+  select_workload
 };
 const ZH = {
   dovetail
@@ -7628,6 +7632,9 @@ function DurationTime(props) {
   };
   return /* @__PURE__ */ common.jsxRuntimeExports.jsx("span", { children: elapsedTime(value2, i18nMap).label || /* @__PURE__ */ common.jsxRuntimeExports.jsx(ValueDisplay, { value: "" }) });
 }
+const show_1mm8a0w = "";
+const SmallSectionTitleStyle = common.cx_default(eagle.Typo.Label.l4_bold, "smzfpl7");
+const DashedTitleStyle = "d85h4vb";
 const index_1xaw1mq = "";
 const BreadcrumbStyle = "b142d7q8";
 function Breadcrumb(props) {
@@ -8702,7 +8709,7 @@ class IngressModel extends ResourceModel {
   getFlattenedRules(services) {
     var _a, _b, _c, _d;
     const protocal = !!this._rawYaml.spec.tls ? "https" : "http";
-    const servicePort = (_c = (_b = (_a = services.find((s2) => {
+    const servicePort = (_c = (_b = (_a = services == null ? void 0 : services.find((s2) => {
       var _a2, _b2;
       return ((_a2 = s2.metadata) == null ? void 0 : _a2.name) === "contour-envoy" && ((_b2 = s2.spec) == null ? void 0 : _b2.type) === "NodePort";
     })) == null ? void 0 : _a.spec) == null ? void 0 : _b.ports) == null ? void 0 : _c.find((p) => p.name === protocal);
@@ -9334,17 +9341,70 @@ var ResourceState = /* @__PURE__ */ ((ResourceState2) => {
   ResourceState2["DELETING"] = "deleting";
   return ResourceState2;
 })(ResourceState || {});
+function isLabelSelector(selector) {
+  if (!selector || typeof selector !== "object") {
+    return false;
+  }
+  const s2 = selector;
+  if ("matchExpressions" in s2) {
+    return true;
+  }
+  if ("matchLabels" in s2) {
+    const ml = s2.matchLabels;
+    return typeof ml === "object" && ml !== null;
+  }
+  return false;
+}
 function matchSelector(pod2, selector, namespace2 = "default") {
-  var _a, _b, _c, _d;
-  let match = true;
-  if (selector) {
-    for (const key2 in selector.matchLabels) {
-      if (!((_b = (_a = pod2.metadata) == null ? void 0 : _a.labels) == null ? void 0 : _b[key2]) || ((_c = pod2.metadata.labels) == null ? void 0 : _c[key2]) !== selector.matchLabels[key2]) {
-        match = false;
+  var _a, _b;
+  if (((_a = pod2.metadata) == null ? void 0 : _a.namespace) !== namespace2) {
+    return false;
+  }
+  if (!selector || Object.keys(selector).length === 0) {
+    return true;
+  }
+  const podLabels = ((_b = pod2.metadata) == null ? void 0 : _b.labels) || {};
+  let matchLabels;
+  let matchExpressions;
+  if (isLabelSelector(selector)) {
+    matchLabels = selector.matchLabels;
+    matchExpressions = selector.matchExpressions;
+  } else {
+    matchLabels = selector;
+  }
+  if (matchLabels) {
+    for (const key2 in matchLabels) {
+      if (podLabels[key2] !== matchLabels[key2]) {
+        return false;
+      }
+    }
+  }
+  if (matchExpressions) {
+    for (const req of matchExpressions) {
+      const { key: key2, operator, values } = req;
+      const labelValue = podLabels[key2];
+      const hasLabel = Object.prototype.hasOwnProperty.call(podLabels, key2);
+      switch (operator) {
+        case "In":
+          if (!hasLabel || !(values == null ? void 0 : values.includes(labelValue)))
+            return false;
+          break;
+        case "NotIn":
+          if (hasLabel && (values == null ? void 0 : values.includes(labelValue)))
+            return false;
+          break;
+        case "Exists":
+          if (!hasLabel)
+            return false;
+          break;
+        case "DoesNotExist":
+          if (hasLabel)
+            return false;
+          break;
       }
     }
   }
-  return match && ((_d = pod2.metadata) == null ? void 0 : _d.namespace) === namespace2;
+  return true;
 }
 class WorkloadBaseModel extends ResourceModel {
   constructor(_rawYaml, _globalStore) {
@@ -9405,6 +9465,11 @@ class JobModel extends WorkloadBaseModel {
     }
     return `${((_a = this._rawYaml.status) == null ? void 0 : _a.succeeded) || 0}/${(_b = this._rawYaml.spec) == null ? void 0 : _b.completions}`;
   }
+  get podCountDisplay() {
+    var _a, _b, _c;
+    const count = (((_a = this.status) == null ? void 0 : _a.active) || 0) + (((_b = this.status) == null ? void 0 : _b.succeeded) || 0) + (((_c = this.status) == null ? void 0 : _c.failed) || 0);
+    return `${this.succeeded}/${count}`;
+  }
   get succeeded() {
     var _a;
     return ((_a = this._rawYaml.status) == null ? void 0 : _a.succeeded) || 0;
@@ -9721,6 +9786,12 @@ class CronJobModel extends WorkloadBaseModel {
     }
     return newOne;
   }
+  getJobsCountDisplay(jobs) {
+    const completed = jobs.filter(
+      (job) => job.stateDisplay === ResourceState.COMPLETED
+    ).length;
+    return `${completed}/${jobs.length}`;
+  }
 }
 class EventModel extends ResourceModel {
   constructor(_rawYaml, _globalStore) {
@@ -10294,13 +10365,20 @@ const ConditionsTable = ({ conditions = [] }) => {
       width: 403
     }
   ];
-  const { data: finalData, currentPage, onPageChange, onSorterChange } = useTableData({
+  const {
+    data: finalData,
+    currentPage,
+    onPageChange,
+    onSorterChange
+  } = useTableData({
     data: conditionsWithId,
     columns,
-    defaultSorters: [{
-      field: "lastUpdateTime",
-      order: "desc"
-    }]
+    defaultSorters: [
+      {
+        field: "lastUpdateTime",
+        order: "desc"
+      }
+    ]
   });
   const currentSize = 10;
   if (conditionsWithId.length === 0) {
@@ -10308,7 +10386,7 @@ const ConditionsTable = ({ conditions = [] }) => {
       WidgetErrorContent,
       {
         errorText: t2("dovetail.no_resource", { kind: t2("dovetail.condition") }),
-        type: ErrorContentType.Card
+        type: ErrorContentType.List
       }
     );
   }
@@ -10653,7 +10731,7 @@ function K8sDropdown(props) {
   const configs = React.useContext(ConfigsContext);
   const resourceName = getResourceNameByKind(record.kind || "", configs);
   const config = configs[resourceName || ""];
-  const { t: t2 } = common.useTranslation();
+  const { t: t2, i18n: i18n2 } = common.useTranslation();
   const { openDeleteConfirmModal } = useDeleteModal({ resourceName: resourceName || "" });
   const download2 = useDownloadYAML();
   const openForm = useOpenForm();
@@ -10677,7 +10755,10 @@ function K8sDropdown(props) {
     eagle.Dropdown,
     {
       overlay: /* @__PURE__ */ common.jsxRuntimeExports.jsxs(eagle.Menu, { children: [
-        isInShowPage || (canEditData == null ? void 0 : canEditData.can) === false || config.hideEdit ? null : /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Menu.Item, { onClick: () => openForm({ id: record.id, resourceName }), children: /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Icon, { src: iconsReact.EditPen16PrimaryIcon, children: formType === FormType.FORM ? t2("dovetail.edit") : t2("dovetail.edit_yaml") }) }),
+        isInShowPage || (canEditData == null ? void 0 : canEditData.can) === false || config.hideEdit ? null : /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Menu.Item, { onClick: () => openForm({ id: record.id, resourceName }), children: /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Icon, { src: iconsReact.EditPen16PrimaryIcon, children: formType === FormType.FORM ? `${t2("dovetail.edit")}${transformResourceKindInSentence(
+          (config == null ? void 0 : config.displayName) || record.kind || "",
+          i18n2.language
+        )}` : t2("dovetail.edit_yaml") }) }),
         /* @__PURE__ */ common.jsxRuntimeExports.jsx(
           eagle.Menu.Item,
           {
@@ -10950,7 +11031,7 @@ const CronjobJobsTable = ({
   const columns = React.useMemo(() => [NameColumnRenderer(i18n2, "jobs"), StateDisplayColumnRenderer(i18n2), NameSpaceColumnRenderer(i18n2), {
     ...WorkloadImageColumnRenderer(i18n2),
     width: 238
-  }, CompletionsCountColumnRenderer(i18n2), DurationColumnRenderer(i18n2), AgeColumnRenderer(i18n2)], [i18n2]);
+  }, PodCountOfJobColumnRenderer(i18n2), DurationColumnRenderer(i18n2), AgeColumnRenderer(i18n2)], [i18n2]);
   const params = React.useMemo(() => ({
     columns,
     useTableParams: {
@@ -11008,10 +11089,17 @@ const EventsTable = ({ uid }) => {
         width: 120,
         render(value2) {
           const colorMap = {
-            "Warning": "warning",
-            "Normal": "green"
+            Warning: "warning",
+            Normal: "green"
           };
-          return /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.StatusCapsule, { color: colorMap[value2], className: common.cx_default(StateTagStyle, "no-background"), children: i18n2.t(`dovetail.${value2.toLowerCase()}`) });
+          return /* @__PURE__ */ common.jsxRuntimeExports.jsx(
+            eagle.StatusCapsule,
+            {
+              color: colorMap[value2],
+              className: common.cx_default(StateTagStyle, "no-background"),
+              children: i18n2.t(`dovetail.${value2.toLowerCase()}`)
+            }
+          );
         },
         sorter: CommonSorter(["type"])
       },
@@ -11033,32 +11121,41 @@ const EventsTable = ({ uid }) => {
         width: 723,
         sorter: CommonSorter(["note"])
       },
-      AgeColumnRenderer(i18n2, { title: i18n2.t("dovetail.last_seen"), width: 160 }, { isRelativeTime: false })
+      AgeColumnRenderer(
+        i18n2,
+        { title: i18n2.t("dovetail.last_seen"), width: 160 },
+        { isRelativeTime: false }
+      )
     ],
     [i18n2]
   );
-  const params = React.useMemo(() => ({
-    columns,
-    tableProps: {
-      defaultSize: 50
-    },
-    useTableParams: {
-      resource: "events",
-      meta: { resourceBasePath: "/apis/events.k8s.io/v1", kind: "Event" },
-      filters: {
-        permanent: [{
-          operator: "and",
-          value: [
+  const params = React.useMemo(
+    () => ({
+      columns,
+      tableProps: {
+        defaultSize: 50
+      },
+      useTableParams: {
+        resource: "events",
+        meta: { resourceBasePath: "/apis/events.k8s.io/v1", kind: "Event" },
+        filters: {
+          permanent: [
             {
-              field: "regarding.uid",
-              operator: "eq",
-              value: uid
+              operator: "and",
+              value: [
+                {
+                  field: "regarding.uid",
+                  operator: "eq",
+                  value: uid
+                }
+              ]
             }
           ]
-        }]
+        }
       }
-    }
-  }), [columns, uid]);
+    }),
+    [columns, uid]
+  );
   const { tableProps } = useEagleTable(params);
   const component = React.useContext(ComponentContext);
   const Table2 = component.Table || Table$1;
@@ -11066,18 +11163,12 @@ const EventsTable = ({ uid }) => {
     return /* @__PURE__ */ common.jsxRuntimeExports.jsx(
       WidgetErrorContent,
       {
-        errorText: i18n2.t("dovetail.no_resource", { kind: i18n2.t("dovetail.event") })
+        errorText: i18n2.t("dovetail.no_resource", { kind: i18n2.t("dovetail.event") }),
+        type: ErrorContentType.List
       }
     );
   }
-  return /* @__PURE__ */ common.jsxRuntimeExports.jsx(
-    Table2,
-    {
-      ...tableProps,
-      tableKey: "events",
-      showMenuColumn: false
-    }
-  );
+  return /* @__PURE__ */ common.jsxRuntimeExports.jsx(Table2, { ...tableProps, tableKey: "events", showMenuColumn: false });
 };
 const index_mvy4dx = "";
 const ImageWrapperStyle = "i1u1f5zp";
@@ -11169,7 +11260,10 @@ const IngressRulesTable = ({ ingress }) => {
       apiVersion: "v1"
     }
   });
-  const flattenedRules = React.useMemo(() => (serviceData == null ? void 0 : serviceData.data) ? ingress.getFlattenedRules(serviceData == null ? void 0 : serviceData.data) : [], [serviceData == null ? void 0 : serviceData.data, ingress]);
+  const flattenedRules = React.useMemo(
+    () => (serviceData == null ? void 0 : serviceData.data) ? ingress.getFlattenedRules(serviceData == null ? void 0 : serviceData.data) : [],
+    [serviceData == null ? void 0 : serviceData.data, ingress]
+  );
   const rows = React.useMemo(() => {
     return addId(flattenedRules || [], "fullPath");
   }, [flattenedRules]);
@@ -11200,7 +11294,7 @@ const IngressRulesTable = ({ ingress }) => {
       key: "serviceName",
       display: true,
       dataIndex: "serviceName",
-      title: t2("dovetail.backend"),
+      title: t2("dovetail.target_service"),
       sortable: true,
       width: 160,
       render: (serviceName, record) => {
@@ -11211,14 +11305,14 @@ const IngressRulesTable = ({ ingress }) => {
             namespace: ingress.metadata.namespace || "default",
             name: serviceName
           }
-        ) : record.resourceName;
+        ) : /* @__PURE__ */ common.jsxRuntimeExports.jsx(ValueDisplay, { value: "" });
       }
     },
     {
       key: "servicePort",
       display: true,
       dataIndex: "servicePort",
-      title: t2("dovetail.port"),
+      title: t2("dovetail.target_service_port"),
       width: 120,
       sortable: true
     },
@@ -11226,11 +11320,13 @@ const IngressRulesTable = ({ ingress }) => {
       key: "secret",
       display: true,
       dataIndex: "host",
-      title: "Secret",
+      title: t2("dovetail.cert"),
       width: 160,
       render(host2) {
         var _a, _b;
-        const secretName = (_b = (_a = ingress._rawYaml.spec.tls) == null ? void 0 : _a.find(({ hosts }) => hosts == null ? void 0 : hosts.includes(host2))) == null ? void 0 : _b.secretName;
+        const secretName = (_b = (_a = ingress._rawYaml.spec.tls) == null ? void 0 : _a.find(
+          ({ hosts }) => hosts == null ? void 0 : hosts.includes(host2)
+        )) == null ? void 0 : _b.secretName;
         return secretName ? /* @__PURE__ */ common.jsxRuntimeExports.jsx(
           ResourceLink,
           {
@@ -11257,7 +11353,7 @@ const IngressRulesTable = ({ ingress }) => {
       WidgetErrorContent,
       {
         errorText: t2("dovetail.no_resource", { kind: t2("dovetail.rule") }),
-        type: ErrorContentType.Card
+        type: ErrorContentType.List
       }
     );
   }
@@ -11287,7 +11383,8 @@ const KeyValue = (props) => {
   const {
     data: data2 = {},
     hideSecret,
-    empty: empty2
+    empty: empty2,
+    errorContent = ErrorContentType.List
   } = props;
   const {
     t: t2
@@ -11305,7 +11402,7 @@ const KeyValue = (props) => {
   if (!result.length) {
     return /* @__PURE__ */ common.jsxRuntimeExports.jsx(WidgetErrorContent, {
       errorText: empty2 || t2("dovetail.empty"),
-      type: ErrorContentType.Card
+      type: errorContent
     });
   }
   return /* @__PURE__ */ common.jsxRuntimeExports.jsx(common.jsxRuntimeExports.Fragment, {
@@ -11353,9 +11450,7 @@ function KeyValueAnnotation(props) {
     }) : null]
   });
 }
-const KeyValueSecret_c3ji18 = "";
-const ButtonStyle$1 = "b11tbgf7";
-const GroupStyle$1 = "gtbyh5g";
+const KeyValueSecret_ltbqs = "";
 function KeyValueSecret(props) {
   const {
     data: data2 = {}
@@ -11365,26 +11460,23 @@ function KeyValueSecret(props) {
   } = common.useTranslation();
   const [hideSecret, setHideSecret] = React.useState(true);
   const toggleButton = Object.keys(data2).length ? /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Button, {
-    type: "quiet",
     prefixIcon: /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Icon, {
       src: hideSecret ? iconsReact.ViewEye16GradientGrayIcon : iconsReact.EntityFilterIgnoreGradient16GrayIcon
     }),
     onClick: () => setHideSecret((v) => !v),
-    className: ButtonStyle$1,
     size: "small",
+    className: "c11tbgf7",
     children: hideSecret ? i18n2.t("dovetail.show_data_value") : i18n2.t("dovetail.hide_data_value")
   }) : null;
-  return /* @__PURE__ */ common.jsxRuntimeExports.jsx(ShowGroupWithTitleComponent, {
-    title: i18n2.t("dovetail.data"),
-    operationEle: toggleButton,
-    className: GroupStyle$1,
-    children: /* @__PURE__ */ common.jsxRuntimeExports.jsx(KeyValue, {
+  return /* @__PURE__ */ common.jsxRuntimeExports.jsxs("div", {
+    className: "ctbyh5g",
+    children: [toggleButton, /* @__PURE__ */ common.jsxRuntimeExports.jsx(KeyValue, {
       data: data2,
       hideSecret,
       empty: i18n2.t("dovetail.no_resource", {
         kind: i18n2.t("dovetail.data")
       })
-    })
+    })]
   });
 }
 function isUtf8(buffer) {
@@ -11531,6 +11623,37 @@ function _KeyValueTableForm(props, ref) {
   const tableFormRef = React.useRef(null);
   const [_value, _setValue] = React.useState(value2 || defaultValue);
   const [forceUpdateCount, setForceUpdateCount] = React.useState(0);
+  const finalExtraAction = React.useMemo(() => {
+    if (extraAction) {
+      return extraAction;
+    }
+    if (canImportFromFile) {
+      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Upload, {
+        multiple: true,
+        showUploadList: false,
+        onChange: async (e2) => {
+          var _a;
+          const fileValue = {
+            key: e2.file.name,
+            value: await readFileAsBase64(e2.file.originFileObj)
+          };
+          let newValue = [..._value, fileValue];
+          if (_value.some((v) => v.key === fileValue.key)) {
+            newValue = _value.map((v) => v.key === fileValue.key ? fileValue : v);
+          }
+          _setValue(newValue);
+          (_a = tableFormRef.current) == null ? void 0 : _a.setData(newValue);
+          onChange == null ? void 0 : onChange(newValue);
+        },
+        children: /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Button, {
+          type: "link",
+          size: "small",
+          children: t2("dovetail.import_from_file")
+        })
+      });
+    }
+    return null;
+  }, [canImportFromFile, t2, _value, onChange, extraAction]);
   const validate = React.useCallback(() => {
     return new Promise((resolve) => {
       var _a;
@@ -11651,7 +11774,7 @@ function _KeyValueTableForm(props, ref) {
       rowAddConfig: {
         addible: true,
         text: () => addButtonText,
-        extraAction
+        extraAction: finalExtraAction
       },
       defaultData: _value,
       row: {
@@ -11666,29 +11789,7 @@ function _KeyValueTableForm(props, ref) {
       hideEmptyTable: true
     }), isHideLabelFormatPopover ? null : /* @__PURE__ */ common.jsxRuntimeExports.jsx(LabelFormatPopover, {
       noValueValidation
-    }), canImportFromFile ? /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Upload, {
-      multiple: false,
-      showUploadList: false,
-      onChange: async (e2) => {
-        var _a;
-        const fileValue = {
-          key: e2.file.name,
-          value: await readFileAsBase64(e2.file.originFileObj)
-        };
-        let newValue = [..._value, fileValue];
-        if (_value.some((v) => v.key === fileValue.key)) {
-          newValue = _value.map((v) => v.key === fileValue.key ? fileValue : v);
-        }
-        _setValue(newValue);
-        (_a = tableFormRef.current) == null ? void 0 : _a.setData(newValue);
-        onChange == null ? void 0 : onChange(newValue);
-      },
-      children: /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Button, {
-        type: "link",
-        size: "small",
-        children: t2("dovetail.import_from_file")
-      })
-    }) : null]
+    })]
   });
 }
 const KeyValueTableForm = React.forwardRef(_KeyValueTableForm);
@@ -12308,6 +12409,7 @@ function WorkloadReplicas({
     })]
   });
 }
+const fields_1lap7d5 = "";
 var AreaType = /* @__PURE__ */ ((AreaType2) => {
   AreaType2["Inline"] = "Inline";
   AreaType2["Grid"] = "Grid";
@@ -12320,7 +12422,10 @@ const ImageField = (i18n2) => {
     title: i18n2.t("dovetail.image"),
     path: ["imageNames"],
     renderContent(value2) {
-      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(ImageNames, { value: value2, breakLine: false });
+      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(ImageNames, {
+        value: value2,
+        breakLine: false
+      });
     }
   };
 };
@@ -12329,7 +12434,10 @@ const ReplicaField = () => {
     key: "Replicas",
     path: [],
     renderContent: (_, record) => {
-      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(WorkloadReplicas, { record, editable: true });
+      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(WorkloadReplicas, {
+        record,
+        editable: true
+      });
     }
   };
 };
@@ -12338,7 +12446,9 @@ const ConditionsField = () => {
     key: "Conditions",
     path: ["status", "conditions"],
     renderContent: (value2) => {
-      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(ConditionsTable, { conditions: value2 });
+      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(ConditionsTable, {
+        conditions: value2
+      });
     }
   };
 };
@@ -12347,7 +12457,9 @@ const NodeTaintsField = () => {
     key: "NodeTaints",
     path: ["spec", "taints"],
     renderContent: (value2) => {
-      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(NodeTaintsTable, { taints: value2 });
+      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(NodeTaintsTable, {
+        taints: value2
+      });
     }
   };
 };
@@ -12357,16 +12469,13 @@ const PodsField = () => {
     path: [],
     renderContent: (_, record) => {
       var _a, _b;
-      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(
-        WorkloadPodsTable,
-        {
-          selector: (_b = (_a = record.metadata.relations) == null ? void 0 : _a.find((r2) => {
-            return r2.kind === "Pod" && r2.type === "creates";
-          })) == null ? void 0 : _b.selector,
-          namespace: record.metadata.namespace,
-          hideToolbar: true
-        }
-      );
+      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(WorkloadPodsTable, {
+        selector: (_b = (_a = record.metadata.relations) == null ? void 0 : _a.find((r2) => {
+          return r2.kind === "Pod" && r2.type === "creates";
+        })) == null ? void 0 : _b.selector,
+        namespace: record.metadata.namespace,
+        hideToolbar: true
+      });
     }
   };
 };
@@ -12376,19 +12485,16 @@ const JobsField = () => {
     path: [],
     renderContent: (_, record) => {
       var _a, _b, _c;
-      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(
-        CronjobJobsTable,
-        {
-          owner: {
-            apiVersion: record.apiVersion || "",
-            kind: record.kind || "",
-            name: ((_a = record.metadata) == null ? void 0 : _a.name) || "",
-            namespace: ((_b = record.metadata) == null ? void 0 : _b.namespace) || "",
-            uid: ((_c = record.metadata) == null ? void 0 : _c.uid) || ""
-          },
-          hideToolBar: true
-        }
-      );
+      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(CronjobJobsTable, {
+        owner: {
+          apiVersion: record.apiVersion || "",
+          kind: record.kind || "",
+          name: ((_a = record.metadata) == null ? void 0 : _a.name) || "",
+          namespace: ((_b = record.metadata) == null ? void 0 : _b.namespace) || "",
+          uid: ((_c = record.metadata) == null ? void 0 : _c.uid) || ""
+        },
+        hideToolBar: true
+      });
     }
   };
 };
@@ -12397,13 +12503,15 @@ const DataField = (i18n2) => {
     key: "data",
     path: ["data"],
     renderContent: (val) => {
-      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(
-        KeyValue,
-        {
+      return /* @__PURE__ */ common.jsxRuntimeExports.jsx("div", {
+        className: "c91cpym",
+        children: /* @__PURE__ */ common.jsxRuntimeExports.jsx(KeyValue, {
           data: val,
-          empty: i18n2.t("dovetail.no_resource", { kind: i18n2.t("dovetail.data") })
-        }
-      );
+          empty: i18n2.t("dovetail.no_resource", {
+            kind: i18n2.t("dovetail.data")
+          })
+        })
+      });
     }
   };
 };
@@ -12416,7 +12524,12 @@ const SecretDataField = () => {
       for (const key2 in val) {
         decodeVal[key2] = atob(val[key2]);
       }
-      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(KeyValueSecret, { data: decodeVal });
+      return /* @__PURE__ */ common.jsxRuntimeExports.jsx("div", {
+        className: "ca9k82k",
+        children: /* @__PURE__ */ common.jsxRuntimeExports.jsx(KeyValueSecret, {
+          data: decodeVal
+        })
+      });
     }
   };
 };
@@ -12427,7 +12540,9 @@ const StartTimeField = (i18n2) => {
     title: i18n2.t("dovetail.started"),
     path: ["status", "startTime"],
     renderContent(value2) {
-      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(Time, { date: value2 });
+      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(Time, {
+        date: value2
+      });
     }
   };
 };
@@ -12461,16 +12576,13 @@ const ServicePodsField = () => {
     path: [],
     renderContent: (_, record) => {
       var _a, _b, _c;
-      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(
-        WorkloadPodsTable,
-        {
-          selector: (_b = (_a = record.metadata.relations) == null ? void 0 : _a.find((r2) => {
-            return r2.kind === "Pod" && r2.type === "selects";
-          })) == null ? void 0 : _b.selector,
-          namespace: (_c = record.metadata) == null ? void 0 : _c.namespace,
-          hideToolbar: true
-        }
-      );
+      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(WorkloadPodsTable, {
+        selector: (_b = (_a = record.metadata.relations) == null ? void 0 : _a.find((r2) => {
+          return r2.kind === "Pod" && r2.type === "selects";
+        })) == null ? void 0 : _b.selector,
+        namespace: (_c = record.metadata) == null ? void 0 : _c.namespace,
+        hideToolbar: true
+      });
     }
   };
 };
@@ -12479,17 +12591,32 @@ const IngressRulesTableTabField = () => {
     key: "rules",
     path: ["spec", "rules"],
     renderContent: (_, record) => {
-      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(IngressRulesTable, { ingress: record });
+      return /* @__PURE__ */ common.jsxRuntimeExports.jsx("div", {
+        className: "c1k4htrr",
+        children: /* @__PURE__ */ common.jsxRuntimeExports.jsx(IngressRulesTable, {
+          ingress: record
+        })
+      });
     }
   };
 };
-const EventsTableTabField = () => {
+const EventsTableTabField = ({
+  size
+}) => {
   return {
     key: "event",
     path: [],
     renderContent: (_, record) => {
       var _a;
-      return /* @__PURE__ */ common.jsxRuntimeExports.jsx("div", { style: { padding: "0 24px", height: "100%" }, children: /* @__PURE__ */ common.jsxRuntimeExports.jsx(EventsTable, { uid: (_a = record.metadata) == null ? void 0 : _a.uid }) });
+      return /* @__PURE__ */ common.jsxRuntimeExports.jsx("div", {
+        style: {
+          padding: size === "small" ? "0 12px" : "0 24px",
+          height: "100%"
+        },
+        children: /* @__PURE__ */ common.jsxRuntimeExports.jsx(EventsTable, {
+          uid: (_a = record.metadata) == null ? void 0 : _a.uid
+        })
+      });
     }
   };
 };
@@ -12505,7 +12632,9 @@ const AgeField = (i18n2) => ({
   title: i18n2.t("dovetail.created_time"),
   path: ["metadata", "creationTimestamp"],
   renderContent(value2) {
-    return /* @__PURE__ */ common.jsxRuntimeExports.jsx(Time, { date: new Date(value2) });
+    return /* @__PURE__ */ common.jsxRuntimeExports.jsx(Time, {
+      date: new Date(value2)
+    });
   }
 });
 const LabelsField = (i18n2) => ({
@@ -12516,7 +12645,9 @@ const LabelsField = (i18n2) => ({
     if (!value2) {
       return "-";
     }
-    return /* @__PURE__ */ common.jsxRuntimeExports.jsx(Tags, { value: value2 });
+    return /* @__PURE__ */ common.jsxRuntimeExports.jsx(Tags, {
+      value: value2
+    });
   }
 });
 const AnnotationsField = (i18n2) => ({
@@ -12524,7 +12655,10 @@ const AnnotationsField = (i18n2) => ({
   title: i18n2.t("dovetail.annotation"),
   path: ["metadata", "annotations"],
   renderContent: (value2) => {
-    return /* @__PURE__ */ common.jsxRuntimeExports.jsx(KeyValueAnnotation, { data: value2, expandable: true });
+    return /* @__PURE__ */ common.jsxRuntimeExports.jsx(KeyValueAnnotation, {
+      data: value2,
+      expandable: true
+    });
   }
 });
 const ServiceInnerClusterAccessField = () => ({
@@ -12533,23 +12667,22 @@ const ServiceInnerClusterAccessField = () => ({
   title: /* @__PURE__ */ common.jsxRuntimeExports.jsx(ServiceInClusterAccessTitle, {}),
   path: [],
   renderContent: (_, record) => {
-    return /* @__PURE__ */ common.jsxRuntimeExports.jsx(ServiceInClusterAccessComponent, { service: record });
+    return /* @__PURE__ */ common.jsxRuntimeExports.jsx(ServiceInClusterAccessComponent, {
+      service: record
+    });
   }
 });
 const ServiceOutClusterAccessField = (clusterVip) => ({
-  key: "innerClusterAccess",
+  key: "outClusterAccess",
   col: 12,
   title: /* @__PURE__ */ common.jsxRuntimeExports.jsx(ServiceOutClusterAccessTitle, {}),
   path: [],
   renderContent: (_, record) => {
-    return /* @__PURE__ */ common.jsxRuntimeExports.jsx(
-      ServiceOutClusterAccessComponent,
-      {
-        service: record,
-        breakLine: false,
-        clusterVip
-      }
-    );
+    return /* @__PURE__ */ common.jsxRuntimeExports.jsx(ServiceOutClusterAccessComponent, {
+      service: record,
+      breakLine: false,
+      clusterVip
+    });
   }
 });
 const PodSelectorField = () => ({
@@ -12558,14 +12691,24 @@ const PodSelectorField = () => ({
   renderContent: (_, resource) => {
     const spec = resource._rawYaml.spec;
     const selector = spec && ("selector" in spec && spec.selector || "podSelector" in spec && spec.podSelector.matchLabels);
-    return /* @__PURE__ */ common.jsxRuntimeExports.jsx(PodSelectorTable, { podSelectors: selector || {} });
+    return /* @__PURE__ */ common.jsxRuntimeExports.jsx(PodSelectorTable, {
+      podSelectors: selector || {}
+    });
   }
 });
 const PortsTableField = () => ({
   key: "ports",
   path: [],
   renderContent: (_, service) => {
-    return /* @__PURE__ */ common.jsxRuntimeExports.jsx(PortsTable, { service });
+    return /* @__PURE__ */ common.jsxRuntimeExports.jsx("div", {
+      style: {
+        padding: "0 24px",
+        height: "100%"
+      },
+      children: /* @__PURE__ */ common.jsxRuntimeExports.jsx(PortsTable, {
+        service
+      })
+    });
   }
 });
 const DurationField = (i18n2) => {
@@ -12575,7 +12718,9 @@ const DurationField = (i18n2) => {
     path: ["duration"],
     title: i18n2.t("dovetail.duration"),
     renderContent: (v) => {
-      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(DurationTime, { value: v });
+      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(DurationTime, {
+        value: v
+      });
     }
   };
 };
@@ -12592,26 +12737,21 @@ const StorageClassPvField = () => {
     key: "pvs",
     path: ["pvs"],
     renderContent: (_, sc) => {
-      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(
-        ResourceTable,
-        {
-          resource: "persistentvolumes",
-          useTableParams: {
-            filters: {
-              permanent: [
-                {
-                  field: "",
-                  value: "",
-                  fn(pv2) {
-                    var _a;
-                    return sc.filterPV(pv2, (_a = sc.metadata) == null ? void 0 : _a.name);
-                  }
-                }
-              ]
-            }
+      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(ResourceTable, {
+        resource: "persistentvolumes",
+        useTableParams: {
+          filters: {
+            permanent: [{
+              field: "",
+              value: "",
+              fn(pv2) {
+                var _a;
+                return sc.filterPV(pv2, (_a = sc.metadata) == null ? void 0 : _a.name);
+              }
+            }]
           }
         }
-      );
+      });
     }
   };
 };
@@ -12622,7 +12762,10 @@ const PVCapacityField = (i18n2) => {
     path: ["spec", "capacity", "storage"],
     title: i18n2.t("dovetail.capacity"),
     renderContent(value2) {
-      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Units.Byte, { rawValue: parseSi(value2), decimals: 2 });
+      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Units.Byte, {
+        rawValue: parseSi(value2),
+        decimals: 2
+      });
     }
   };
 };
@@ -12633,7 +12776,10 @@ const PVCStorageField = (i18n2) => {
     path: ["spec", "resources", "requests", "storage"],
     title: i18n2.t("dovetail.distributed"),
     renderContent(value2, pvc2) {
-      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(PVCDistributeStorage, { pvc: pvc2, editable: true });
+      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(PVCDistributeStorage, {
+        pvc: pvc2,
+        editable: true
+      });
     }
   };
 };
@@ -12644,14 +12790,11 @@ const PVRefField = (i18n2) => {
     path: ["pv"],
     title: i18n2.t("dovetail.pv"),
     renderContent(value2) {
-      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(
-        ResourceLink,
-        {
-          resourceName: "persistentvolumes",
-          namespace: "",
-          name: value2
-        }
-      );
+      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(ResourceLink, {
+        resourceName: "persistentvolumes",
+        namespace: "",
+        name: value2
+      });
     }
   };
 };
@@ -12662,7 +12805,11 @@ const PVStorageClassField = (i18n2) => {
     path: ["spec", "storageClassName"],
     title: i18n2.t("dovetail.storage_class"),
     renderContent(value2) {
-      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(ResourceLink, { resourceName: "storageclasses", namespace: "", name: value2 });
+      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(ResourceLink, {
+        resourceName: "storageclasses",
+        namespace: "",
+        name: value2
+      });
     }
   };
 };
@@ -12673,7 +12820,10 @@ const PVPhaseField = (i18n2) => {
     path: ["stateDisplay"],
     title: i18n2.t("dovetail.state"),
     renderContent(value2) {
-      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(StateTag, { state: value2, hideBackground: true });
+      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(StateTag, {
+        state: value2,
+        hideBackground: true
+      });
     }
   };
 };
@@ -12684,7 +12834,9 @@ const PVVolumeModeField = (i18n2) => {
     path: ["spec", "volumeMode"],
     title: i18n2.t("dovetail.volume_mode"),
     renderContent(value2) {
-      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(PVVolumeModeDisplay, { value: value2 });
+      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(PVVolumeModeDisplay, {
+        value: value2
+      });
     }
   };
 };
@@ -12705,22 +12857,17 @@ const PVCPodsField = () => {
     path: [],
     renderContent: (_, record) => {
       var _a;
-      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(
-        WorkloadPodsTable,
-        {
-          filter: (item) => {
-            var _a2, _b;
-            return !!((_b = (_a2 = item.spec) == null ? void 0 : _a2.volumes) == null ? void 0 : _b.some(
-              (v) => {
-                var _a3, _b2;
-                return ((_a3 = v.persistentVolumeClaim) == null ? void 0 : _a3.claimName) === ((_b2 = record.metadata) == null ? void 0 : _b2.name);
-              }
-            ));
-          },
-          namespace: (_a = record.metadata) == null ? void 0 : _a.namespace,
-          hideToolbar: true
-        }
-      );
+      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(WorkloadPodsTable, {
+        filter: (item) => {
+          var _a2, _b;
+          return !!((_b = (_a2 = item.spec) == null ? void 0 : _a2.volumes) == null ? void 0 : _b.some((v) => {
+            var _a3, _b2;
+            return ((_a3 = v.persistentVolumeClaim) == null ? void 0 : _a3.claimName) === ((_b2 = record.metadata) == null ? void 0 : _b2.name);
+          }));
+        },
+        namespace: (_a = record.metadata) == null ? void 0 : _a.namespace,
+        hideToolbar: true
+      });
     }
   };
 };
@@ -12731,15 +12878,14 @@ const PVCRefField = (i18n2) => {
     path: ["pvc"],
     title: i18n2.t("dovetail.pvc"),
     renderContent(value2, pv2) {
-      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(
-        ResourceLink,
-        {
-          resourceName: "persistentvolumeclaims",
-          namespace: pv2.pvcNamespace || "default",
-          name: value2,
-          query: { uid: pv2.pvcUid }
+      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(ResourceLink, {
+        resourceName: "persistentvolumeclaims",
+        namespace: pv2.pvcNamespace || "default",
+        name: value2,
+        query: {
+          uid: pv2.pvcUid
         }
-      );
+      });
     }
   };
 };
@@ -12793,10 +12939,71 @@ const ResourceTableField = (resource, useTableParams) => {
     key: resource,
     path: [],
     renderContent() {
-      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(ResourceTable, { resource, useTableParams });
+      return /* @__PURE__ */ common.jsxRuntimeExports.jsx(ResourceTable, {
+        resource,
+        useTableParams
+      });
     }
   };
 };
+const PodCountOfJobField = (i18n2) => {
+  return {
+    key: "podCount",
+    path: [],
+    col: 12,
+    title: /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Tooltip, {
+      title: i18n2.t("dovetail.job_pod_count_tooltip"),
+      children: /* @__PURE__ */ common.jsxRuntimeExports.jsx("span", {
+        className: DashedTitleStyle,
+        children: i18n2.t("dovetail.pod_num")
+      })
+    }),
+    renderContent: (_, record) => {
+      return /* @__PURE__ */ common.jsxRuntimeExports.jsx("span", {
+        children: record.podCountDisplay
+      });
+    }
+  };
+};
+const index_15s69c5 = "";
+const ItemWrapperStyle = "i1hk9uwu";
+const LabelsAndAnnotationsShow = ({
+  labels,
+  annotations,
+  size = "medium"
+}) => {
+  const {
+    i18n: sksI18n
+  } = common.useTranslation();
+  return /* @__PURE__ */ common.jsxRuntimeExports.jsxs("div", {
+    className: "c1wn08fn",
+    style: {
+      padding: size === "small" ? "12px" : "16px 24px",
+      gap: size === "small" ? "12px" : "16px"
+    },
+    children: [/* @__PURE__ */ common.jsxRuntimeExports.jsxs("div", {
+      className: ItemWrapperStyle,
+      children: [/* @__PURE__ */ common.jsxRuntimeExports.jsx("div", {
+        className: SmallSectionTitleStyle,
+        children: sksI18n.t("dovetail.label")
+      }), Object.keys(labels || {}).length ? /* @__PURE__ */ common.jsxRuntimeExports.jsx(Tags, {
+        value: labels
+      }) : /* @__PURE__ */ common.jsxRuntimeExports.jsx(WidgetErrorContent, {
+        errorText: sksI18n.t("dovetail.empty"),
+        type: ErrorContentType.Card
+      })]
+    }), /* @__PURE__ */ common.jsxRuntimeExports.jsxs("div", {
+      className: ItemWrapperStyle,
+      children: [/* @__PURE__ */ common.jsxRuntimeExports.jsx("div", {
+        className: SmallSectionTitleStyle,
+        children: sksI18n.t("dovetail.annotation")
+      }), /* @__PURE__ */ common.jsxRuntimeExports.jsx(KeyValue, {
+        data: annotations,
+        errorContent: ErrorContentType.Card
+      })]
+    })]
+  });
+};
 const baseNoReset = "";
 const index_14irc29 = "";
 const WrapperStyle$3 = "wve7dfm";
@@ -12992,22 +13199,30 @@ const PodLog = ({
     })]
   });
 };
-const EventsTab = (i18n2) => ({
+const EventsTab = ({
+  i18n: i18n2,
+  size
+}) => ({
   title: i18n2.t("dovetail.event"),
   key: "events",
+  background: "white",
   groups: [
     {
       areas: [
         {
-          fields: [EventsTableTabField()]
+          fields: [EventsTableTabField({ size })]
         }
       ]
     }
   ]
 });
-const ConditionsTab = (i18n2) => ({
+const ConditionsTab = ({
+  i18n: i18n2,
+  size
+}) => ({
   title: i18n2.t("dovetail.condition"),
   key: "conditions",
+  background: "white",
   groups: [
     {
       areas: [
@@ -13017,10 +13232,16 @@ const ConditionsTab = (i18n2) => ({
               key: "Conditions",
               path: ["status", "conditions"],
               renderContent: (value2) => {
-                return /* @__PURE__ */ common.jsxRuntimeExports.jsxs("div", { style: { padding: "0 24px", height: "100%" }, children: [
-                  /* @__PURE__ */ common.jsxRuntimeExports.jsx(ConditionsTable, { conditions: value2 }),
-                  ";"
-                ] });
+                return /* @__PURE__ */ common.jsxRuntimeExports.jsx(
+                  "div",
+                  {
+                    style: {
+                      padding: size === "small" ? "0 12px" : "0 24px",
+                      height: "100%"
+                    },
+                    children: /* @__PURE__ */ common.jsxRuntimeExports.jsx(ConditionsTable, { conditions: value2 })
+                  }
+                );
               }
             }
           ]
@@ -13029,41 +13250,31 @@ const ConditionsTab = (i18n2) => ({
     }
   ]
 });
-const LabelAnnotationsTab = (i18n2) => ({
+const LabelAnnotationsTab = ({
+  i18n: i18n2,
+  size
+}) => ({
   title: i18n2.t("dovetail.label_annotations"),
   key: "label-annotations",
+  background: "white",
   groups: [
     {
-      title: i18n2.t("dovetail.label"),
       areas: [
         {
           fields: [
             {
-              key: "Labels",
-              title: i18n2.t("dovetail.label"),
-              path: ["metadata", "labels"],
-              render: (value2) => {
-                if (!value2) {
-                  return "-";
-                }
-                return /* @__PURE__ */ common.jsxRuntimeExports.jsx(Tags, { value: value2 });
-              }
-            }
-          ]
-        }
-      ]
-    },
-    {
-      title: i18n2.t("dovetail.annotation"),
-      areas: [
-        {
-          fields: [
-            {
-              key: "Annotations",
-              title: i18n2.t("dovetail.annotation"),
-              path: ["metadata", "annotations"],
-              render: (value2) => {
-                return /* @__PURE__ */ common.jsxRuntimeExports.jsx(KeyValue, { data: value2 });
+              key: "label-annotations",
+              path: [],
+              renderContent: (_, record) => {
+                var _a, _b;
+                return /* @__PURE__ */ common.jsxRuntimeExports.jsx(
+                  LabelsAndAnnotationsShow,
+                  {
+                    labels: (_a = record.metadata) == null ? void 0 : _a.labels,
+                    annotations: (_b = record.metadata) == null ? void 0 : _b.annotations,
+                    size
+                  }
+                );
               }
             }
           ]
@@ -13075,6 +13286,7 @@ const LabelAnnotationsTab = (i18n2) => ({
 const PodLogTab = (i18n2, apiUrl) => ({
   title: i18n2.t("dovetail.log"),
   key: "pod-log",
+  background: "white",
   groups: [
     {
       areas: [
@@ -13093,6 +13305,58 @@ const PodLogTab = (i18n2, apiUrl) => ({
     }
   ]
 });
+const PortsTab = ({
+  i18n: i18n2
+}) => ({
+  title: i18n2.t("dovetail.port"),
+  key: "ports",
+  background: "white",
+  groups: [
+    {
+      areas: [
+        {
+          fields: [PortsTableField()]
+        }
+      ]
+    }
+  ]
+});
+const IngressRulesTab = ({
+  i18n: i18n2
+}) => ({
+  title: i18n2.t("dovetail.rule"),
+  key: "ingress-rules",
+  background: "white",
+  groups: [
+    {
+      areas: [{ fields: [IngressRulesTableTabField()] }]
+    }
+  ]
+});
+const DataTab = ({
+  i18n: i18n2
+}) => ({
+  title: i18n2.t("dovetail.data"),
+  key: "data",
+  background: "white",
+  groups: [
+    {
+      areas: [{ fields: [DataField(i18n2)] }]
+    }
+  ]
+});
+const SecretDataTab = ({
+  i18n: i18n2
+}) => ({
+  title: i18n2.t("dovetail.data"),
+  key: "secret-data",
+  background: "white",
+  groups: [
+    {
+      areas: [{ fields: [SecretDataField()] }]
+    }
+  ]
+});
 const NetworkPolicyRulesViewer_r6jity = "";
 const MonacoYamlEditor$3 = React.lazy(() => Promise.resolve().then(() => MonacoYamlEditor$1));
 const EditorStyle$1 = "e1cjl2b8";
@@ -13254,8 +13518,6 @@ const BasicGroup = (i18n2, {
     {
       fields: (isShowNamespace ? [NamespaceField(i18n2)] : []).concat([
         ...basicFields,
-        LabelsField(i18n2),
-        AnnotationsField(i18n2),
         AgeField(i18n2)
       ])
     },
@@ -13325,13 +13587,6 @@ const NodeTaintsGroup = (i18n2) => ({
     }
   ]
 });
-const SecretDataGroup = () => ({
-  areas: [
-    {
-      fields: [SecretDataField()]
-    }
-  ]
-});
 const JobsGroup = () => ({
   title: "Job",
   areas: [
@@ -13340,14 +13595,6 @@ const JobsGroup = () => ({
     }
   ]
 });
-const IngressRulesGroup = (i18n2) => ({
-  title: i18n2.t("dovetail.rule"),
-  areas: [
-    {
-      fields: [IngressRulesTableTabField()]
-    }
-  ]
-});
 const PodSelectorGroup = (i18n2) => ({
   title: i18n2.t("dovetail.pod_selector"),
   areas: [
@@ -13364,14 +13611,6 @@ const PortsGroup = (i18n2) => ({
     }
   ]
 });
-const DataGroup = (i18n2) => ({
-  title: i18n2.t("dovetail.data"),
-  areas: [
-    {
-      fields: [DataField(i18n2)]
-    }
-  ]
-});
 const NetworkPolicyIngressRulesGroup = (i18n2) => ({
   title: i18n2.t("dovetail.ingress_rule"),
   areas: [
@@ -13438,7 +13677,7 @@ function Tabs(props) {
     return /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.TabsTabPane, { tab: tab.title, children: tab.children }, tab.title);
   }) });
 }
-const ShowContentView_1aeomp8 = "";
+const ShowContentView_m77hzs = "";
 const ShowContentWrapperStyle = "soapvs9";
 const BackButton = "b13d603q";
 const ToolBarWrapper = "tm8eaia";
@@ -13453,7 +13692,8 @@ const FieldWrapperStyle = "f1c7cta8";
 const TabContentStyle = "t1pt61xk";
 const ValueStyle = "v1to6fie";
 const TabsStyle = "tca5959";
-const KindTagStyle = "k3dcesi";
+const SmallTabsStyle = "s3dcesi";
+const KindTagStyle = "kzyzuo8";
 function ShowGroupWithTitleComponent(props) {
   const {
     title,
@@ -13473,10 +13713,14 @@ function ShowGroupWithTitleComponent(props) {
 }
 function BasicShowGroupComponent(props) {
   const {
-    children
+    children,
+    size = "medium"
   } = props;
   return /* @__PURE__ */ common.jsxRuntimeExports.jsx("div", {
     className: common.cx_default(BasicGroupStyle, "basic-group"),
+    style: {
+      margin: size === "small" ? "12px 8px 0px 12px" : void 0
+    },
     children
   });
 }
@@ -13492,7 +13736,8 @@ const ShowContentView = (props) => {
     hideBackButton = false,
     canCollapseTabs = false,
     className,
-    hideTopBar = false
+    hideTopBar = false,
+    size = "medium"
   } = props;
   const {
     queryResult
@@ -13524,43 +13769,47 @@ const ShowContentView = (props) => {
     if (!record)
       return null;
     return fields.map((field) => {
-      if (field.hidden)
+      const shouldHide = typeof field.hidden === "function" ? field.hidden(record) : field.hidden;
+      if (shouldHide)
         return null;
       let content;
       const value2 = lodashEs.get(record, field.path);
       if (field.renderContent) {
-        content = field.renderContent(value2, record, field);
+        content = field.renderContent(value2, record, field, size);
       } else {
         content = lodashEs.get(record, field.path);
       }
-      return hasCol ? /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Col, {
-        flex: areaType === AreaType.Inline ? "none" : "",
-        span: field.col || 24,
-        className: "czyzuo8",
-        children: field.render ? field.render(value2, record, field) : /* @__PURE__ */ common.jsxRuntimeExports.jsxs("div", {
-          className: FieldWrapperStyle,
-          children: [field.title && /* @__PURE__ */ common.jsxRuntimeExports.jsx("span", {
-            className: eagle.Typo.Label.l4_regular_title,
-            style: {
-              width: field.labelWidth || "165px",
-              marginRight: 8,
-              flexShrink: 0,
-              color: "#2C385299"
-            },
-            children: field.title
-          }), /* @__PURE__ */ common.jsxRuntimeExports.jsx("span", {
-            style: {
-              flex: 1,
-              minWidth: 0
-            },
-            children: /* @__PURE__ */ common.jsxRuntimeExports.jsx(ValueDisplay, {
-              className: common.cx_default(eagle.Typo.Label.l4_regular_title, ValueStyle),
-              value: content,
-              useOverflow: false
-            })
-          })]
-        })
-      }, field.key) : /* @__PURE__ */ common.jsxRuntimeExports.jsx(ValueDisplay, {
+      if (hasCol) {
+        return /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Col, {
+          flex: areaType === AreaType.Inline ? "none" : "",
+          span: field.col || 24,
+          className: "cxd8k68",
+          children: field.render ? field.render(value2, record, field, size) : /* @__PURE__ */ common.jsxRuntimeExports.jsxs("div", {
+            className: FieldWrapperStyle,
+            children: [field.title && /* @__PURE__ */ common.jsxRuntimeExports.jsx("span", {
+              className: eagle.Typo.Label.l4_regular_title,
+              style: {
+                width: field.labelWidth || "165px",
+                marginRight: 8,
+                flexShrink: 0,
+                color: "#2C385299"
+              },
+              children: field.title
+            }), /* @__PURE__ */ common.jsxRuntimeExports.jsx("span", {
+              style: {
+                flex: 1,
+                minWidth: 0
+              },
+              children: /* @__PURE__ */ common.jsxRuntimeExports.jsx(ValueDisplay, {
+                className: common.cx_default(eagle.Typo.Label.l4_regular_title, ValueStyle),
+                value: content,
+                useOverflow: false
+              })
+            })]
+          })
+        }, field.key);
+      }
+      return field.render ? field.render(value2, record, field, size) : /* @__PURE__ */ common.jsxRuntimeExports.jsx(ValueDisplay, {
         style: {
           height: "100%"
         },
@@ -13572,7 +13821,10 @@ const ShowContentView = (props) => {
   function renderGroup(group, isBasicGroup = false) {
     let GroupContainer = React.Fragment;
     let FieldContainer = React.Fragment;
-    let groupContainerProps = {};
+    const groupContainerProps = {
+      title: group.title || "",
+      size
+    };
     let fieldContainerProps = {};
     if (isBasicGroup) {
       GroupContainer = BasicShowGroupComponent;
@@ -13582,9 +13834,6 @@ const ShowContentView = (props) => {
     const shouldRenderRow = !!(isBasicGroup || group.title);
     if (shouldRenderRow) {
       FieldContainer = eagle.Row;
-      groupContainerProps = {
-        title: group.title || ""
-      };
       fieldContainerProps = {
         gutter: [24, 8]
       };
@@ -13606,6 +13855,9 @@ const ShowContentView = (props) => {
   const stateDisplay = lodashEs.get(record, "stateDisplay");
   const topBar = /* @__PURE__ */ common.jsxRuntimeExports.jsxs("div", {
     className: ToolBarWrapper,
+    style: {
+      padding: size === "small" ? "8px 16px" : void 0
+    },
     children: [!hideBackButton && !showConfig.renderCustomBackButton && /* @__PURE__ */ common.jsxRuntimeExports.jsx("div", {
       className: common.cx_default(eagle.Typo.Label.l4_bold, BackButton),
       onClick: () => {
@@ -13664,22 +13916,28 @@ const ShowContentView = (props) => {
     })]
   });
   const tabs = /* @__PURE__ */ common.jsxRuntimeExports.jsx(Tabs$1, {
-    tabs: (showConfig.tabs || []).map((tab, tabIndex) => {
+    tabs: (showConfig.tabs || []).map((tab) => {
       var _a2;
       return {
         title: tab.title,
         key: tab.key,
         children: /* @__PURE__ */ common.jsxRuntimeExports.jsx("div", {
-          className: common.cx_default(TabContentStyle, tab.groups.length <= 1 && tabIndex !== 0 && FullTabContentStyle),
+          className: common.cx_default(TabContentStyle, tab.groups.length <= 1 && FullTabContentStyle),
+          style: {
+            background: tab.background === "white" ? "#fff" : void 0
+          },
           children: (_a2 = tab.groups) == null ? void 0 : _a2.map((group) => renderGroup(group, false))
         })
       };
     }),
-    className: TabsStyle
+    className: common.cx_default(TabsStyle, size === "small" && SmallTabsStyle)
   });
   const basicInfo = showConfig.basicGroup ? renderGroup(showConfig.basicGroup, true) : null;
   return /* @__PURE__ */ common.jsxRuntimeExports.jsxs("div", {
     className: common.cx_default(ShowContentWrapperStyle, className),
+    style: {
+      background: size === "small" ? "#fff" : void 0
+    },
     children: [hideTopBar ? null : /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Space, {
       direction: "vertical",
       className: ShowContentHeaderStyle,
@@ -13708,9 +13966,9 @@ const CollapseTabs = (props) => {
         type: "link",
         onClick: () => setIsCollapsed((v) => !v),
         suffixIcon: isCollapsed ? /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Icon, {
-          src: iconsReact.ArrowChevronUpSmall16BlueIcon
-        }) : /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Icon, {
           src: iconsReact.ArrowChevronDownSmall16BlueIcon
+        }) : /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Icon, {
+          src: iconsReact.ArrowChevronUpSmall16BlueIcon
         }),
         children: isCollapsed ? t2("dovetail.view_all_info") : t2("dovetail.collapse")
       })
@@ -14498,10 +14756,9 @@ const MemoizedFormField = React.memo(function FormField({
       control,
       name: fieldConfig.path.join("."),
       rules: {
-        async validate(value2) {
+        async validate(value2, formValue) {
           if (fieldConfig.disabledWhenEdit && action === "edit")
             return true;
-          const formValue = watchedFormValues || getValues();
           if (!fieldConfig.validators || fieldConfig.validators.length === 0)
             return true;
           for (const func of fieldConfig.validators) {
@@ -14513,7 +14770,7 @@ const MemoizedFormField = React.memo(function FormField({
         }
       },
       render: ({ field, fieldState }) => {
-        var _a;
+        var _a, _b;
         const currentFormValue = watchedFormValues || getValues();
         const renderProps = {
           field,
@@ -14536,7 +14793,7 @@ const MemoizedFormField = React.memo(function FormField({
             colon: false,
             labelCol: fieldConfig.layout === FormItemLayout.VERTICAL ? {} : { flex: `0 0 ${(formConfig == null ? void 0 : formConfig.labelWidth) || "216px"}` },
             help: fieldConfig.isHideErrorStatus ? "" : (_a = fieldState.error) == null ? void 0 : _a.message,
-            extra: fieldConfig.helperText,
+            extra: ((_b = fieldState.error) == null ? void 0 : _b.message) === fieldConfig.helperText ? "" : fieldConfig.helperText,
             validateStatus: fieldState.invalid && !fieldConfig.isHideErrorStatus ? "error" : void 0,
             "data-test-id": fieldConfig.key,
             className: fieldConfig.layout === FormItemLayout.VERTICAL ? VerticalFormItemStyle : "",
@@ -17301,7 +17558,8 @@ function ResourceSelect(props) {
     namespace: namespace2,
     selectProps,
     value: value2,
-    onChange
+    onChange,
+    placeholder
   } = props;
   const { data: data2, isLoading, isError } = core.useList({
     resource,
@@ -17317,6 +17575,7 @@ function ResourceSelect(props) {
     eagle.Select,
     {
       className,
+      placeholder,
       input: {
         value: value2,
         onChange
@@ -17328,7 +17587,7 @@ function ResourceSelect(props) {
     }
   );
 }
-const SelectMatchLabelButton_1rnabop = "";
+const SelectMatchLabelButton_1uc76rw = "";
 const PopoverOverlayStyle = "p19yct45";
 const PopoverContentStyle = "p2255z4";
 const PopoverTitleStyle = "p16qejqa";
@@ -17344,12 +17603,16 @@ function ResourceMatchLabelSelector({
   value: value2,
   onChange
 }) {
+  const {
+    t: t2
+  } = common.useTranslation();
   return /* @__PURE__ */ common.jsxRuntimeExports.jsx(ResourceSelect, {
     namespace: namespace2,
     resource,
     resourceBasePath,
     kind,
     value: value2,
+    placeholder: t2("dovetail.select_workload"),
     onChange: (newValue, object2) => {
       var _a, _b;
       const resourceItem = object2.object;
@@ -17397,7 +17660,7 @@ function SelectMatchLabelButton(props) {
         children: [/* @__PURE__ */ common.jsxRuntimeExports.jsxs("div", {
           className: PopoverContentBodyStyle,
           children: [/* @__PURE__ */ common.jsxRuntimeExports.jsx("div", {
-            className: common.cx_default(eagle.Typo.Display.d3_bold_title, PopoverTitleStyle),
+            className: common.cx_default(eagle.Typo.Heading.h2_bold_title, PopoverTitleStyle),
             children: t2("dovetail.specify_workload")
           }), /* @__PURE__ */ common.jsxRuntimeExports.jsxs("div", {
             className: FormWrapperStyle,
@@ -17454,9 +17717,12 @@ function SelectMatchLabelButton(props) {
           children: [/* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Button, {
             onClick: () => setPopoverVisible(false),
             type: "quiet",
+            size: "small",
             children: t2("dovetail.cancel")
           }), /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Button, {
             type: "primary",
+            size: "small",
+            disabled: !selectedResource,
             onClick: () => {
               onChange == null ? void 0 : onChange(selector);
               setPopoverVisible(false);
@@ -17514,8 +17780,7 @@ const MatchLabelSelector = React.forwardRef(function MatchLabelSelector2(props,
       onChange,
       isValueOptional: false,
       minSize: 1,
-      disabledChagneDefaultValues,
-      isHideLabelFormatPopover: true
+      disabledChagneDefaultValues
     }
   );
 });
@@ -18352,7 +18617,7 @@ const PortsConfigForm = React.forwardRef(function PortsConfigForm2({ value: valu
       },
       {
         key: "name",
-        title: `${i18n2.t("dovetail.name")}${i18n2.t("dovetail.optional_with_bracket")}`,
+        title: i18n2.t("dovetail.port_name"),
         type: "input",
         validator: ({ value: portName, rowIndex }) => {
           const { errorMessage } = validateRfc1123Name({
@@ -18547,9 +18812,8 @@ const IngressRulesComponent = ({ ingress }) => {
   });
   return /* @__PURE__ */ common.jsxRuntimeExports.jsx(common.jsxRuntimeExports.Fragment, { children: result });
 };
-const columns_j8358c = "";
-const DashedTitleStyle = "dh5j833";
-const ServiceClusterTooltipStyle = "s1fcgan";
+const columns_gm9kgl = "";
+const ServiceClusterTooltipStyle = "sh5j833";
 const NameLink = (props) => {
   var _a;
   const {
@@ -18758,14 +19022,14 @@ const NodeNameColumnRenderer = (i18n2, options) => {
     ...options
   };
 };
-const CompletionsCountColumnRenderer = (i18n2) => {
+const PodCountOfJobColumnRenderer = (i18n2) => {
   const dataIndex = ["succeeded"];
   return {
     key: "completions",
     display: true,
     dataIndex,
     title: /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Tooltip, {
-      title: i18n2.t("dovetail.completion_num_tooltip"),
+      title: i18n2.t("dovetail.job_pod_count_tooltip"),
       children: /* @__PURE__ */ common.jsxRuntimeExports.jsx("span", {
         className: DashedTitleStyle,
         children: i18n2.t("dovetail.pod_num")
@@ -18777,7 +19041,7 @@ const CompletionsCountColumnRenderer = (i18n2) => {
     sorter: CommonSorter(dataIndex),
     render: (_, record) => {
       return /* @__PURE__ */ common.jsxRuntimeExports.jsx("span", {
-        children: record.completionsDisplay
+        children: record.podCountDisplay
       });
     }
   };
@@ -19525,7 +19789,6 @@ exports.CRONJOB_INIT_VALUE = CRONJOB_INIT_VALUE;
 exports.ClusterIpField = ClusterIpField;
 exports.ColumnKeys = ColumnKeys;
 exports.CommonSorter = CommonSorter;
-exports.CompletionsCountColumnRenderer = CompletionsCountColumnRenderer;
 exports.ComponentContext = ComponentContext;
 exports.ConditionsField = ConditionsField;
 exports.ConditionsGroup = ConditionsGroup;
@@ -19540,8 +19803,8 @@ exports.DAEMONSET_INIT_VALUE = DAEMONSET_INIT_VALUE;
 exports.DEPLOYMENT_INIT_VALUE = DEPLOYMENT_INIT_VALUE;
 exports.DaemonSetModel = DaemonSetModel;
 exports.DataField = DataField;
-exports.DataGroup = DataGroup;
 exports.DataKeysColumnRenderer = DataKeysColumnRenderer;
+exports.DataTab = DataTab;
 exports.DeleteButton = DeleteButton;
 exports.DeleteManyButton = DeleteManyButton;
 exports.DeploymentModel = DeploymentModel;
@@ -19578,7 +19841,7 @@ exports.IngressClassColumnRenderer = IngressClassColumnRenderer;
 exports.IngressDefaultBackendColumnRenderer = IngressDefaultBackendColumnRenderer;
 exports.IngressModel = IngressModel;
 exports.IngressRulesColumnRenderer = IngressRulesColumnRenderer;
-exports.IngressRulesGroup = IngressRulesGroup;
+exports.IngressRulesTab = IngressRulesTab;
 exports.IngressRulesTableTabField = IngressRulesTableTabField;
 exports.IngressTlsColumnRenderer = IngressTlsColumnRenderer;
 exports.IsDefaultSCColumnRenderer = IsDefaultSCColumnRenderer;
@@ -19595,6 +19858,7 @@ exports.KeyValueListWidget = KeyValueListWidget;
 exports.KeyValueSecret = KeyValueSecret;
 exports.KeyValueTableForm = KeyValueTableForm;
 exports.LabelAnnotationsTab = LabelAnnotationsTab;
+exports.LabelsAndAnnotationsShow = LabelsAndAnnotationsShow;
 exports.LabelsField = LabelsField;
 exports.Layout = Layout;
 exports.ListPage = ListPage;
@@ -19656,6 +19920,8 @@ exports.PlainTextNameColumnRenderer = PlainTextNameColumnRenderer;
 exports.PodContainersGroup = PodContainersGroup;
 exports.PodContainersNumColumnRenderer = PodContainersNumColumnRenderer;
 exports.PodContainersTable = PodContainersTable;
+exports.PodCountOfJobColumnRenderer = PodCountOfJobColumnRenderer;
+exports.PodCountOfJobField = PodCountOfJobField;
 exports.PodDropdown = PodDropdown;
 exports.PodLog = PodLog;
 exports.PodLogTab = PodLogTab;
@@ -19671,6 +19937,7 @@ exports.PodsGroup = PodsGroup;
 exports.PortMappingColumnRenderer = PortMappingColumnRenderer;
 exports.PortsConfigForm = PortsConfigForm;
 exports.PortsGroup = PortsGroup;
+exports.PortsTab = PortsTab;
 exports.PortsTableField = PortsTableField;
 exports.ProviderPlugins = ProviderPlugins;
 exports.ProvisionerColumnRenderer = ProvisionerColumnRenderer;
@@ -19716,7 +19983,7 @@ exports.STATEFULSET_INIT_VALUE = STATEFULSET_INIT_VALUE;
 exports.STORAGE_CLASS_INIT_VALUE = STORAGE_CLASS_INIT_VALUE;
 exports.SchemaStrategy = SchemaStrategy;
 exports.SecretDataField = SecretDataField;
-exports.SecretDataGroup = SecretDataGroup;
+exports.SecretDataTab = SecretDataTab;
 exports.SectionTitle = SectionTitle;
 exports.Separator = Separator;
 exports.ServiceInClusterAccessColumnRenderer = ServiceInClusterAccessColumnRenderer;