@dovetail-v2/refine 0.3.14-alpha.0 → 0.3.14-alpha.2

package/dist/components/ShowContent/tabs.d.ts

@@ -1,5 +1,6 @@
 import { i18n as I18nType } from 'i18next';
 import { ResourceModel, PodModel, ServiceModel, IngressModel } from 'src/models';
+import { NetworkPolicyModel } from 'src/models';
 import { ShowTab } from './fields';
 export declare const EventsTab: <Model extends ResourceModel<import("k8s-api-provider").Unstructured>>({ i18n, size, }: {
     i18n: I18nType;
@@ -26,3 +27,9 @@ export declare const DataTab: <Model extends ResourceModel<import("k8s-api-provi
 export declare const SecretDataTab: <Model extends ResourceModel<import("k8s-api-provider").Unstructured>>({ i18n, }: {
     i18n: I18nType;
 }) => ShowTab<Model>;
+export declare const NetworkPolicyIngressRulesTab: <Model extends NetworkPolicyModel>({ i18n, }: {
+    i18n: I18nType;
+}) => ShowTab<Model>;
+export declare const NetworkPolicyEgressRulesTab: <Model extends NetworkPolicyModel>({ i18n, }: {
+    i18n: I18nType;
+}) => ShowTab<Model>;

package/dist/hooks/useDeleteModal/useDeleteManyModal.d.ts

@@ -1,8 +1,8 @@
 /// <reference types="react" />
-import { ModalProps } from '@cloudtower/eagle';
+import { LegacyModalProps } from '@cloudtower/eagle';
 import { BaseKey } from '@refinedev/core';
 export declare const useDeleteManyModal: (resource: string, ids: BaseKey[]) => {
-    modalProps: ModalProps;
+    modalProps: LegacyModalProps;
     visible: boolean;
     setVisible: import("react").Dispatch<import("react").SetStateAction<boolean>>;
 };

package/dist/refine.cjs

@@ -11019,7 +11019,7 @@ const DeleteManyButton = (props) => {
   }, [setVisible]);
   return /* @__PURE__ */ common.jsxRuntimeExports.jsxs(common.jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Button, { type: "primary", danger: true, onClick, children: t2("dovetail.delete") }),
-    visible ? /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Modal, { ...modalProps }) : null
+    visible ? /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.LegacyModal, { ...modalProps }) : null
   ] });
 };
 const index_1iwpuwe = "";
@@ -13068,6 +13068,36 @@ const LabelsAndAnnotationsShow = ({
     })]
   });
 };
+const NetworkPolicyRulesViewer_r6jity = "";
+const MonacoYamlEditor$3 = React.lazy(() => Promise.resolve().then(() => MonacoYamlEditor$1));
+const EditorStyle$1 = "e1cjl2b8";
+const NetworkPolicyRulesViewer = ({
+  ingressOrEgress,
+  kind
+}) => {
+  const {
+    t: t2
+  } = common.useTranslation();
+  if (!ingressOrEgress) {
+    return /* @__PURE__ */ common.jsxRuntimeExports.jsx(WidgetErrorContent, {
+      errorText: t2("dovetail.no_resource", {
+        kind: kind || t2("dovetail.rule")
+      }),
+      type: ErrorContentType.List
+    });
+  }
+  return /* @__PURE__ */ common.jsxRuntimeExports.jsx(React.Suspense, {
+    fallback: /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Loading, {}),
+    children: /* @__PURE__ */ common.jsxRuntimeExports.jsx(MonacoYamlEditor$3, {
+      schemas: [],
+      defaultValue: yaml$2.dump(ingressOrEgress),
+      height: "100%",
+      className: EditorStyle$1,
+      readOnly: true,
+      isScrollOnFocus: true
+    })
+  });
+};
 const baseNoReset = "";
 const index_14irc29 = "";
 const WrapperStyle$3 = "wve7dfm";
@@ -13263,6 +13293,7 @@ const PodLog = ({
     })]
   });
 };
+const tabs_1q5et9v = "";
 const EventsTab = ({
   i18n: i18n2,
   size
@@ -13270,15 +13301,13 @@ const EventsTab = ({
   title: i18n2.t("dovetail.event"),
   key: "events",
   background: "white",
-  groups: [
-    {
-      areas: [
-        {
-          fields: [EventsTableTabField({ size })]
-        }
-      ]
-    }
-  ]
+  groups: [{
+    areas: [{
+      fields: [EventsTableTabField({
+        size
+      })]
+    }]
+  }]
 });
 const ConditionsTab = ({
   i18n: i18n2,
@@ -13287,32 +13316,25 @@ const ConditionsTab = ({
   title: i18n2.t("dovetail.condition"),
   key: "conditions",
   background: "white",
-  groups: [
-    {
-      areas: [
-        {
-          fields: [
-            {
-              key: "Conditions",
-              path: ["status", "conditions"],
-              renderContent: (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 })
-                  }
-                );
-              }
-            }
-          ]
+  groups: [{
+    areas: [{
+      fields: [{
+        key: "Conditions",
+        path: ["status", "conditions"],
+        renderContent: (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
+            })
+          });
         }
-      ]
-    }
-  ]
+      }]
+    }]
+  }]
 });
 const LabelAnnotationsTab = ({
   i18n: i18n2,
@@ -13321,53 +13343,41 @@ const LabelAnnotationsTab = ({
   title: i18n2.t("dovetail.label_annotations"),
   key: "label-annotations",
   background: "white",
-  groups: [
-    {
-      areas: [
-        {
-          fields: [
-            {
-              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
-                  }
-                );
-              }
-            }
-          ]
+  groups: [{
+    areas: [{
+      fields: [{
+        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
+          });
         }
-      ]
-    }
-  ]
+      }]
+    }]
+  }]
 });
 const PodLogTab = (i18n2, apiUrl) => ({
   title: i18n2.t("dovetail.log"),
   key: "pod-log",
   background: "white",
-  groups: [
-    {
-      areas: [
-        {
-          fields: [
-            {
-              key: "log",
-              path: [],
-              renderContent: (_, record) => {
-                return /* @__PURE__ */ common.jsxRuntimeExports.jsx(PodLog, { pod: record, apiUrl });
-              }
-            }
-          ]
+  groups: [{
+    areas: [{
+      fields: [{
+        key: "log",
+        path: [],
+        renderContent: (_, record) => {
+          return /* @__PURE__ */ common.jsxRuntimeExports.jsx(PodLog, {
+            pod: record,
+            apiUrl
+          });
         }
-      ]
-    }
-  ]
+      }]
+    }]
+  }]
 });
 const PortsTab = ({
   i18n: i18n2
@@ -13375,15 +13385,11 @@ const PortsTab = ({
   title: i18n2.t("dovetail.port"),
   key: "ports",
   background: "white",
-  groups: [
-    {
-      areas: [
-        {
-          fields: [PortsTableField()]
-        }
-      ]
-    }
-  ]
+  groups: [{
+    areas: [{
+      fields: [PortsTableField()]
+    }]
+  }]
 });
 const IngressRulesTab = ({
   i18n: i18n2
@@ -13391,11 +13397,11 @@ const IngressRulesTab = ({
   title: i18n2.t("dovetail.rule"),
   key: "ingress-rules",
   background: "white",
-  groups: [
-    {
-      areas: [{ fields: [IngressRulesTableTabField()] }]
-    }
-  ]
+  groups: [{
+    areas: [{
+      fields: [IngressRulesTableTabField()]
+    }]
+  }]
 });
 const DataTab = ({
   i18n: i18n2
@@ -13403,11 +13409,11 @@ const DataTab = ({
   title: i18n2.t("dovetail.data"),
   key: "data",
   background: "white",
-  groups: [
-    {
-      areas: [{ fields: [DataField(i18n2)] }]
-    }
-  ]
+  groups: [{
+    areas: [{
+      fields: [DataField(i18n2)]
+    }]
+  }]
 });
 const SecretDataTab = ({
   i18n: i18n2
@@ -13415,42 +13421,59 @@ const SecretDataTab = ({
   title: i18n2.t("dovetail.data"),
   key: "secret-data",
   background: "white",
-  groups: [
-    {
-      areas: [{ fields: [SecretDataField()] }]
-    }
-  ]
+  groups: [{
+    areas: [{
+      fields: [SecretDataField()]
+    }]
+  }]
+});
+const NetworkPolicyRulesViewerStyle = "nrkw30o";
+const NetworkPolicyIngressRulesTab = ({
+  i18n: i18n2
+}) => ({
+  title: i18n2.t("dovetail.ingress_rule"),
+  key: "ingress-rules",
+  background: "white",
+  groups: [{
+    areas: [{
+      fields: [{
+        key: "Ingress",
+        path: ["spec", "ingress"],
+        render: (ingress) => {
+          return /* @__PURE__ */ common.jsxRuntimeExports.jsx("div", {
+            className: NetworkPolicyRulesViewerStyle,
+            children: /* @__PURE__ */ common.jsxRuntimeExports.jsx(NetworkPolicyRulesViewer, {
+              ingressOrEgress: ingress
+            })
+          });
+        }
+      }]
+    }]
+  }]
+});
+const NetworkPolicyEgressRulesTab = ({
+  i18n: i18n2
+}) => ({
+  title: i18n2.t("dovetail.egress_rule"),
+  key: "egress-rules",
+  background: "white",
+  groups: [{
+    areas: [{
+      fields: [{
+        key: "Egress",
+        path: ["spec", "egress"],
+        render: (egress) => {
+          return /* @__PURE__ */ common.jsxRuntimeExports.jsx("div", {
+            className: NetworkPolicyRulesViewerStyle,
+            children: /* @__PURE__ */ common.jsxRuntimeExports.jsx(NetworkPolicyRulesViewer, {
+              ingressOrEgress: egress
+            })
+          });
+        }
+      }]
+    }]
+  }]
 });
-const NetworkPolicyRulesViewer_r6jity = "";
-const MonacoYamlEditor$3 = React.lazy(() => Promise.resolve().then(() => MonacoYamlEditor$1));
-const EditorStyle$1 = "e1cjl2b8";
-const NetworkPolicyRulesViewer = ({
-  ingressOrEgress,
-  kind
-}) => {
-  const {
-    t: t2
-  } = common.useTranslation();
-  if (!ingressOrEgress) {
-    return /* @__PURE__ */ common.jsxRuntimeExports.jsx(WidgetErrorContent, {
-      errorText: t2("dovetail.no_resource", {
-        kind: kind || t2("dovetail.rule")
-      }),
-      type: ErrorContentType.Card
-    });
-  }
-  return /* @__PURE__ */ common.jsxRuntimeExports.jsx(React.Suspense, {
-    fallback: /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Loading, {}),
-    children: /* @__PURE__ */ common.jsxRuntimeExports.jsx(MonacoYamlEditor$3, {
-      schemas: [],
-      defaultValue: yaml$2.dump(ingressOrEgress),
-      height: "300px",
-      className: EditorStyle$1,
-      readOnly: true,
-      isScrollOnFocus: true
-    })
-  });
-};
 const PodContainersTable = ({
   containerStatuses,
   initContainerStatuses
@@ -13741,7 +13764,7 @@ function Tabs(props) {
     return /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.TabsTabPane, { tab: tab.title, children: tab.children }, tab.title);
   }) });
 }
-const ShowContentView_m77hzs = "";
+const ShowContentView_1gmp0tu = "";
 const ShowContentWrapperStyle = "soapvs9";
 const BackButton = "b13d603q";
 const ToolBarWrapper = "tm8eaia";
@@ -13899,7 +13922,8 @@ const ShowContentView = (props) => {
     if (shouldRenderRow) {
       FieldContainer = eagle.Row;
       fieldContainerProps = {
-        gutter: [24, 8]
+        gutter: [24, 8],
+        className: "c1lh8loq"
       };
     }
     return /* @__PURE__ */ common.jsxRuntimeExports.jsx(GroupContainer, {
@@ -16618,7 +16642,7 @@ function ConfirmModal({
     t: t2
   } = common.useTranslation();
   const popModal = eagle.usePopModal();
-  return /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.Modal, {
+  return /* @__PURE__ */ common.jsxRuntimeExports.jsx(eagle.LegacyModal, {
     className: SmallModalStyle,
     width: "414px",
     title: t2("dovetail.edit_form"),
@@ -19367,9 +19391,9 @@ const PortMappingColumnRenderer = (i18n2) => {
           style: {
             whiteSpace: "pre"
           },
-          children: [v.servicePort, " > ", v.targetPort, "/", v.protocol]
+          children: [v.servicePort, " → ", v.targetPort, "/", v.protocol]
         }),
-        tooltip: `${v.servicePort} > ${v.targetPort}/${v.protocol}`
+        tooltip: `${v.servicePort} → ${v.targetPort}/${v.protocol}`
       }, v.servicePort));
       return /* @__PURE__ */ common.jsxRuntimeExports.jsx(ValueDisplay, {
         value: content
@@ -19995,7 +20019,9 @@ exports.NamespaceField = NamespaceField;
 exports.NamespaceSelectWidget = NamespaceSelectWidget;
 exports.NamespacesFilter = NamespacesFilter;
 exports.NetworkPolicyEgressRulesGroup = NetworkPolicyEgressRulesGroup;
+exports.NetworkPolicyEgressRulesTab = NetworkPolicyEgressRulesTab;
 exports.NetworkPolicyIngressRulesGroup = NetworkPolicyIngressRulesGroup;
+exports.NetworkPolicyIngressRulesTab = NetworkPolicyIngressRulesTab;
 exports.NetworkPolicyModel = NetworkPolicyModel;
 exports.NetworkPolicyRulesViewer = NetworkPolicyRulesViewer;
 exports.NodeModel = NodeModel;

package/dist/refine.js

@@ -11,7 +11,7 @@ import { ResourceContext, matchResourceFromRoute, useResource, useDelete, useNav
 import { parse, stringify } from "qs";
 import React, { createElement, isValidElement, cloneElement, Children, useContext, useCallback, createContext, useState, useEffect, useMemo, useRef, useImperativeHandle, lazy, Suspense, memo, forwardRef } from "react";
 import { useLocation, useHistory, useParams, matchPath, Link, Route, NavLink, Router } from "react-router-dom";
-import { usePushModal, usePopModal, DeleteDialog, Tag, RejectDialog, RejectDialogType, Typo, Input, Select, AntdOption, Button, Form, Space, TextArea, kitContext, Loading, Table as Table$2, Pagination, Alert, ImmersiveDialog, SmallDialog, Fields, Units, Link as Link$1, OverflowTooltip, Tooltip, Dropdown, Menu as Menu$1, Icon, Divider, Modal, StatusCapsule, Popover, AntdTable, Upload, TableForm, AutoComplete, getOptions, DonutChart, SegmentControl, Checkbox, Tabs as Tabs$1, TabsTabPane, Col, Row, useMessage, SearchInput, Token, AntdSelectOptGroup, WizardDialog, MenuItemGroup, Layout as Layout$1, InputGroup, InputInteger, Time as Time$1, ModalStack, KitStoreProvider, ConfigProvider } from "@cloudtower/eagle";
+import { usePushModal, usePopModal, DeleteDialog, Tag, RejectDialog, RejectDialogType, Typo, Input, Select, AntdOption, Button, Form, Space, TextArea, kitContext, Loading, Table as Table$2, Pagination, Alert, ImmersiveDialog, SmallDialog, Fields, Units, Link as Link$1, OverflowTooltip, Tooltip, Dropdown, Menu as Menu$1, Icon, Divider, LegacyModal, StatusCapsule, Popover, AntdTable, Upload, TableForm, AutoComplete, getOptions, DonutChart, SegmentControl, Checkbox, Tabs as Tabs$1, TabsTabPane, Col, Row, useMessage, SearchInput, Token, AntdSelectOptGroup, WizardDialog, MenuItemGroup, Layout as Layout$1, InputGroup, InputInteger, Time as Time$1, ModalStack, KitStoreProvider, ConfigProvider } from "@cloudtower/eagle";
 import { EditPen16PrimaryIcon, Download16GradientBlueIcon, TrashBinDelete16Icon, MoreEllipsis324BoldSecondaryIcon, MoreEllipsis324BoldBlueIcon, MoreEllipsis316BoldBlueIcon, PlusAddCreateNew16BoldOntintIcon, ViewEye16GradientGrayIcon, EntityFilterIgnoreGradient16GrayIcon, InfoICircleFill16GrayIcon, InfoICircleFill16Gray70Icon, RecoverContinue16GradientBlueIcon, SuspendedPause16GradientBlueIcon, ArrowChevronLeft16BoldTertiaryIcon, ArrowChevronLeftSmall16BoldBlueIcon, ArrowChevronDownSmall16BlueIcon, ArrowChevronUpSmall16BlueIcon, Retry16GradientBlueIcon, OpenTerminal16GradientBlueIcon, ArrowChevronDown16BlueIcon, ArrowChevronUp16BlueIcon, HierarchyTriangleRight16GrayIcon, HierarchyTriangleRight16BlueIcon, ClipboardCopy16GradientGrayIcon, ClipboardCopy16GradientBlueIcon, Retry16GradientGrayIcon, EditPen16GradientGrayIcon, EditPen16GradientBlueIcon, Showdiff16GradientGrayIcon, Showdiff16GradientBlueIcon, XmarkFailedSeriousWarningFill16RedIcon, Pause16GradientBlueIcon, EditPen16BlueIcon } from "@cloudtower/icons-react";
 import { first, get as get$2, cloneDeep, set, omit as omit$1, merge, isEqual as isEqual$1, debounce, last, setWith, clone, isObject as isObject$4, uniq, keyBy } from "lodash-es";
 import yaml$2 from "js-yaml";
@@ -11000,7 +11000,7 @@ const DeleteManyButton = (props) => {
   }, [setVisible]);
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [
     /* @__PURE__ */ jsxRuntimeExports.jsx(Button, { type: "primary", danger: true, onClick, children: t2("dovetail.delete") }),
-    visible ? /* @__PURE__ */ jsxRuntimeExports.jsx(Modal, { ...modalProps }) : null
+    visible ? /* @__PURE__ */ jsxRuntimeExports.jsx(LegacyModal, { ...modalProps }) : null
   ] });
 };
 const index_1iwpuwe = "";
@@ -13049,6 +13049,36 @@ const LabelsAndAnnotationsShow = ({
     })]
   });
 };
+const NetworkPolicyRulesViewer_r6jity = "";
+const MonacoYamlEditor$3 = lazy(() => Promise.resolve().then(() => MonacoYamlEditor$1));
+const EditorStyle$1 = "e1cjl2b8";
+const NetworkPolicyRulesViewer = ({
+  ingressOrEgress,
+  kind
+}) => {
+  const {
+    t: t2
+  } = useTranslation();
+  if (!ingressOrEgress) {
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(WidgetErrorContent, {
+      errorText: t2("dovetail.no_resource", {
+        kind: kind || t2("dovetail.rule")
+      }),
+      type: ErrorContentType.List
+    });
+  }
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, {
+    fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(Loading, {}),
+    children: /* @__PURE__ */ jsxRuntimeExports.jsx(MonacoYamlEditor$3, {
+      schemas: [],
+      defaultValue: yaml$2.dump(ingressOrEgress),
+      height: "100%",
+      className: EditorStyle$1,
+      readOnly: true,
+      isScrollOnFocus: true
+    })
+  });
+};
 const baseNoReset = "";
 const index_14irc29 = "";
 const WrapperStyle$3 = "wve7dfm";
@@ -13244,6 +13274,7 @@ const PodLog = ({
     })]
   });
 };
+const tabs_1q5et9v = "";
 const EventsTab = ({
   i18n: i18n2,
   size
@@ -13251,15 +13282,13 @@ const EventsTab = ({
   title: i18n2.t("dovetail.event"),
   key: "events",
   background: "white",
-  groups: [
-    {
-      areas: [
-        {
-          fields: [EventsTableTabField({ size })]
-        }
-      ]
-    }
-  ]
+  groups: [{
+    areas: [{
+      fields: [EventsTableTabField({
+        size
+      })]
+    }]
+  }]
 });
 const ConditionsTab = ({
   i18n: i18n2,
@@ -13268,32 +13297,25 @@ const ConditionsTab = ({
   title: i18n2.t("dovetail.condition"),
   key: "conditions",
   background: "white",
-  groups: [
-    {
-      areas: [
-        {
-          fields: [
-            {
-              key: "Conditions",
-              path: ["status", "conditions"],
-              renderContent: (value2) => {
-                return /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  "div",
-                  {
-                    style: {
-                      padding: size === "small" ? "0 12px" : "0 24px",
-                      height: "100%"
-                    },
-                    children: /* @__PURE__ */ jsxRuntimeExports.jsx(ConditionsTable, { conditions: value2 })
-                  }
-                );
-              }
-            }
-          ]
+  groups: [{
+    areas: [{
+      fields: [{
+        key: "Conditions",
+        path: ["status", "conditions"],
+        renderContent: (value2) => {
+          return /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+            style: {
+              padding: size === "small" ? "0 12px" : "0 24px",
+              height: "100%"
+            },
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(ConditionsTable, {
+              conditions: value2
+            })
+          });
         }
-      ]
-    }
-  ]
+      }]
+    }]
+  }]
 });
 const LabelAnnotationsTab = ({
   i18n: i18n2,
@@ -13302,53 +13324,41 @@ const LabelAnnotationsTab = ({
   title: i18n2.t("dovetail.label_annotations"),
   key: "label-annotations",
   background: "white",
-  groups: [
-    {
-      areas: [
-        {
-          fields: [
-            {
-              key: "label-annotations",
-              path: [],
-              renderContent: (_, record) => {
-                var _a, _b;
-                return /* @__PURE__ */ jsxRuntimeExports.jsx(
-                  LabelsAndAnnotationsShow,
-                  {
-                    labels: (_a = record.metadata) == null ? void 0 : _a.labels,
-                    annotations: (_b = record.metadata) == null ? void 0 : _b.annotations,
-                    size
-                  }
-                );
-              }
-            }
-          ]
+  groups: [{
+    areas: [{
+      fields: [{
+        key: "label-annotations",
+        path: [],
+        renderContent: (_, record) => {
+          var _a, _b;
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(LabelsAndAnnotationsShow, {
+            labels: (_a = record.metadata) == null ? void 0 : _a.labels,
+            annotations: (_b = record.metadata) == null ? void 0 : _b.annotations,
+            size
+          });
         }
-      ]
-    }
-  ]
+      }]
+    }]
+  }]
 });
 const PodLogTab = (i18n2, apiUrl) => ({
   title: i18n2.t("dovetail.log"),
   key: "pod-log",
   background: "white",
-  groups: [
-    {
-      areas: [
-        {
-          fields: [
-            {
-              key: "log",
-              path: [],
-              renderContent: (_, record) => {
-                return /* @__PURE__ */ jsxRuntimeExports.jsx(PodLog, { pod: record, apiUrl });
-              }
-            }
-          ]
+  groups: [{
+    areas: [{
+      fields: [{
+        key: "log",
+        path: [],
+        renderContent: (_, record) => {
+          return /* @__PURE__ */ jsxRuntimeExports.jsx(PodLog, {
+            pod: record,
+            apiUrl
+          });
         }
-      ]
-    }
-  ]
+      }]
+    }]
+  }]
 });
 const PortsTab = ({
   i18n: i18n2
@@ -13356,15 +13366,11 @@ const PortsTab = ({
   title: i18n2.t("dovetail.port"),
   key: "ports",
   background: "white",
-  groups: [
-    {
-      areas: [
-        {
-          fields: [PortsTableField()]
-        }
-      ]
-    }
-  ]
+  groups: [{
+    areas: [{
+      fields: [PortsTableField()]
+    }]
+  }]
 });
 const IngressRulesTab = ({
   i18n: i18n2
@@ -13372,11 +13378,11 @@ const IngressRulesTab = ({
   title: i18n2.t("dovetail.rule"),
   key: "ingress-rules",
   background: "white",
-  groups: [
-    {
-      areas: [{ fields: [IngressRulesTableTabField()] }]
-    }
-  ]
+  groups: [{
+    areas: [{
+      fields: [IngressRulesTableTabField()]
+    }]
+  }]
 });
 const DataTab = ({
   i18n: i18n2
@@ -13384,11 +13390,11 @@ const DataTab = ({
   title: i18n2.t("dovetail.data"),
   key: "data",
   background: "white",
-  groups: [
-    {
-      areas: [{ fields: [DataField(i18n2)] }]
-    }
-  ]
+  groups: [{
+    areas: [{
+      fields: [DataField(i18n2)]
+    }]
+  }]
 });
 const SecretDataTab = ({
   i18n: i18n2
@@ -13396,42 +13402,59 @@ const SecretDataTab = ({
   title: i18n2.t("dovetail.data"),
   key: "secret-data",
   background: "white",
-  groups: [
-    {
-      areas: [{ fields: [SecretDataField()] }]
-    }
-  ]
+  groups: [{
+    areas: [{
+      fields: [SecretDataField()]
+    }]
+  }]
+});
+const NetworkPolicyRulesViewerStyle = "nrkw30o";
+const NetworkPolicyIngressRulesTab = ({
+  i18n: i18n2
+}) => ({
+  title: i18n2.t("dovetail.ingress_rule"),
+  key: "ingress-rules",
+  background: "white",
+  groups: [{
+    areas: [{
+      fields: [{
+        key: "Ingress",
+        path: ["spec", "ingress"],
+        render: (ingress) => {
+          return /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+            className: NetworkPolicyRulesViewerStyle,
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(NetworkPolicyRulesViewer, {
+              ingressOrEgress: ingress
+            })
+          });
+        }
+      }]
+    }]
+  }]
+});
+const NetworkPolicyEgressRulesTab = ({
+  i18n: i18n2
+}) => ({
+  title: i18n2.t("dovetail.egress_rule"),
+  key: "egress-rules",
+  background: "white",
+  groups: [{
+    areas: [{
+      fields: [{
+        key: "Egress",
+        path: ["spec", "egress"],
+        render: (egress) => {
+          return /* @__PURE__ */ jsxRuntimeExports.jsx("div", {
+            className: NetworkPolicyRulesViewerStyle,
+            children: /* @__PURE__ */ jsxRuntimeExports.jsx(NetworkPolicyRulesViewer, {
+              ingressOrEgress: egress
+            })
+          });
+        }
+      }]
+    }]
+  }]
 });
-const NetworkPolicyRulesViewer_r6jity = "";
-const MonacoYamlEditor$3 = lazy(() => Promise.resolve().then(() => MonacoYamlEditor$1));
-const EditorStyle$1 = "e1cjl2b8";
-const NetworkPolicyRulesViewer = ({
-  ingressOrEgress,
-  kind
-}) => {
-  const {
-    t: t2
-  } = useTranslation();
-  if (!ingressOrEgress) {
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(WidgetErrorContent, {
-      errorText: t2("dovetail.no_resource", {
-        kind: kind || t2("dovetail.rule")
-      }),
-      type: ErrorContentType.Card
-    });
-  }
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Suspense, {
-    fallback: /* @__PURE__ */ jsxRuntimeExports.jsx(Loading, {}),
-    children: /* @__PURE__ */ jsxRuntimeExports.jsx(MonacoYamlEditor$3, {
-      schemas: [],
-      defaultValue: yaml$2.dump(ingressOrEgress),
-      height: "300px",
-      className: EditorStyle$1,
-      readOnly: true,
-      isScrollOnFocus: true
-    })
-  });
-};
 const PodContainersTable = ({
   containerStatuses,
   initContainerStatuses
@@ -13722,7 +13745,7 @@ function Tabs(props) {
     return /* @__PURE__ */ jsxRuntimeExports.jsx(TabsTabPane, { tab: tab.title, children: tab.children }, tab.title);
   }) });
 }
-const ShowContentView_m77hzs = "";
+const ShowContentView_1gmp0tu = "";
 const ShowContentWrapperStyle = "soapvs9";
 const BackButton = "b13d603q";
 const ToolBarWrapper = "tm8eaia";
@@ -13880,7 +13903,8 @@ const ShowContentView = (props) => {
     if (shouldRenderRow) {
       FieldContainer = Row;
       fieldContainerProps = {
-        gutter: [24, 8]
+        gutter: [24, 8],
+        className: "c1lh8loq"
       };
     }
     return /* @__PURE__ */ jsxRuntimeExports.jsx(GroupContainer, {
@@ -16599,7 +16623,7 @@ function ConfirmModal({
     t: t2
   } = useTranslation();
   const popModal = usePopModal();
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(Modal, {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(LegacyModal, {
     className: SmallModalStyle,
     width: "414px",
     title: t2("dovetail.edit_form"),
@@ -19348,9 +19372,9 @@ const PortMappingColumnRenderer = (i18n2) => {
           style: {
             whiteSpace: "pre"
           },
-          children: [v.servicePort, " > ", v.targetPort, "/", v.protocol]
+          children: [v.servicePort, " → ", v.targetPort, "/", v.protocol]
         }),
-        tooltip: `${v.servicePort} > ${v.targetPort}/${v.protocol}`
+        tooltip: `${v.servicePort} → ${v.targetPort}/${v.protocol}`
       }, v.servicePort));
       return /* @__PURE__ */ jsxRuntimeExports.jsx(ValueDisplay, {
         value: content
@@ -19977,7 +20001,9 @@ export {
   NamespaceSelectWidget,
   NamespacesFilter,
   NetworkPolicyEgressRulesGroup,
+  NetworkPolicyEgressRulesTab,
   NetworkPolicyIngressRulesGroup,
+  NetworkPolicyIngressRulesTab,
   NetworkPolicyModel,
   NetworkPolicyRulesViewer,
   NodeModel,

package/dist/style.css

@@ -2033,6 +2033,61 @@
 .c1wn08fn {
   display: flex;
   flex-direction: column;
+}/* // basic */
+/* FishEye Color Variables and Functions */
+/*
+ --------------------------- Primary Color ---------------------------
+*/
+/*
+ ---------------------------When necessary to add at any time---------------------------
+*/
+/* computed */
+/* blue */
+/* green */
+/* yellow */
+/* red */
+/* purple */
+/*  palette    global token*/
+/* color opaque */
+/* color transparent */
+/* blue transparent  */
+/* green transparent  */
+/* yellow transparent  */
+/* red transparent  */
+/* gray transparent */
+/* white transparent */
+/* gradient opaque */
+/* blue radial gradient */
+/* blue linear gradient */
+/* green radial gradient */
+/* yellow radial gradient */
+/* red radial gradient */
+/* gray radial gradient */
+/* white to gray radial gradient */
+/*  white to gray  linear gradient */
+/* gradient transparent */
+/* secondary palette */
+/* purple radial gradient */
+/*  refine alias color   */
+/*  text   */
+/*  link   */
+/*  fill   */
+/*  fill  element  */
+/*  fill  interaction  */
+/*  stroke   */
+/*  background   */
+/*  dim   */
+/*  box shadow   */
+/*  fisheye   */
+/* z-index */
+.e1cjl2b8 {
+  border-radius: 8px;
+  border: 1px solid rgba(211, 218, 235, 0.6);
+}
+.e1cjl2b8 .monaco-editor,
+.e1cjl2b8 .monaco-scrollable-element,
+.e1cjl2b8 .overflow-guard > .margin {
+  border-radius: 8px;
 }.pf-v5-t-light {
   --pf-v5-global--Color--100: var(--pf-v5-global--Color--dark-100);
   --pf-v5-global--Color--200: var(--pf-v5-global--Color--dark-200);
@@ -3391,14 +3446,11 @@
 /*  box shadow   */
 /*  fisheye   */
 /* z-index */
-.e1cjl2b8 {
-  border-radius: 8px;
-  border: 1px solid rgba(211, 218, 235, 0.6);
-}
-.e1cjl2b8 .monaco-editor,
-.e1cjl2b8 .monaco-scrollable-element,
-.e1cjl2b8 .overflow-guard > .margin {
-  border-radius: 8px;
+.nrkw30o {
+  padding: 16px 24px;
+  width: 100%;
+  height: 100%;
+  min-height: 300px;
 }/* // basic */
 /* FishEye Color Variables and Functions */
 /*
@@ -3452,9 +3504,6 @@
   flex-direction: column;
   background: linear-gradient(180deg, #fff 0%, #edf0f7 100%);
 }
-.soapvs9 .ant-row {
-  margin-right: 0 !important;
-}
 
 .b13d603q {
   color: rgba(0, 21, 64, 0.3);
@@ -3577,6 +3626,11 @@
 
 .cxd8k68 {
   padding: 4px 0;
+}
+
+.c1lh8loq.ant-row {
+  row-gap: 4px;
+  margin-right: 0 !important;
 }/* // basic */
 /* FishEye Color Variables and Functions */
 /*

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dovetail-v2/refine",
-  "version": "0.3.14-alpha.0",
+  "version": "0.3.14-alpha.2",
   "type": "module",
   "files": [
     "dist",
@@ -10,8 +10,8 @@
   "module": "./dist/refine.js",
   "types": "./dist/index.d.ts",
   "dependencies": {
-    "@cloudtower/eagle": "^0.34.6",
-    "@cloudtower/icons-react": "^0.34.6",
+    "@cloudtower/eagle": "^0.34.24",
+    "@cloudtower/icons-react": "^0.34.24",
     "@patternfly/react-core": "^5.1.1",
     "@patternfly/react-log-viewer": "^5.0.0",
     "@refinedev/core": "^4.47.2",
@@ -86,8 +86,8 @@
     "vite-plugin-commonjs": "^0.10.0"
   },
   "peerDependencies": {
-    "@cloudtower/eagle": "^0.34.6",
-    "@cloudtower/icons-react": "^0.34.6",
+    "@cloudtower/eagle": "^0.34.24",
+    "@cloudtower/icons-react": "^0.34.24",
     "@refinedev/core": "^4.47.2",
     "antd": "4.5.0",
     "i18next": "^23.2.3",