@dovetail-v2/refine 0.0.61-alpha.0 → 0.0.62

package/lib/src/components/Form/NameInputWidget.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useUIKit } from '@cloudtower/eagle';
+import { useResource } from '@refinedev/core';
+export function NameInputWidget(props) {
+    const kit = useUIKit();
+    const { action } = useResource();
+    return _jsx(kit.input, { ...props, disabled: action === 'edit' });
+}
+export const dnsSubDomainRules = [
+    {
+        required: true,
+        message: '名称不能为空',
+    },
+    {
+        pattern: /^[a-z0-9]([-.a-z0-9]*[a-z0-9])?$/,
+        message: '名称只能包含小写字母、数字，以及 \'-\' 和 \'.\'，且必须以字母或数字开头和结束',
+    },
+    {
+        max: 253,
+        message: '名称长度不能超过253个字符',
+    },
+];
+export const rfc1123LabelRules = [
+    {
+        required: true,
+        message: '名称不能为空',
+    },
+    {
+        pattern: /^[a-z0-9]([-a-z0-9]*[a-z0-9])?$/,
+        message: '名称只能包含小写字母、数字，以及 \'-\'，且以字母或数字开头和结束',
+    },
+    {
+        max: 63,
+        message: '名称长度不能超过63个字符',
+    },
+];
+export const rfc1035LabelRules = [
+    {
+        required: true,
+        message: '名称不能为空',
+    },
+    {
+        pattern: /^[a-z]([-a-z0-9]*[a-z0-9])?$/,
+        message: '名称只能包含小写字母、数字，以及 \'-\'，且以字母开头，字母或数字结束',
+    },
+    {
+        max: 63,
+        message: '名称长度不能超过63个字符',
+    },
+];

package/lib/src/components/Form/NamespaceSelectWidget.js

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useUIKit } from '@cloudtower/eagle';
+import { useList, useResource } from '@refinedev/core';
+export function NamespaceSelectWidget(props) {
+    const kit = useUIKit();
+    const { action } = useResource();
+    const { data } = useList({
+        resource: 'namespaces',
+        meta: {
+            resourceBasePath: '/api/v1',
+            kind: 'Namespace',
+        },
+    });
+    return (_jsx(kit.select, { input: props, disabled: action === 'edit', children: data?.data.map(namespace => (_jsx(kit.option, { value: namespace.metadata.name, children: namespace.metadata.name }, namespace.metadata.name))) }));
+}
+export const namespaceRules = [
+    {
+        required: true,
+        message: 'Please input the namespace.',
+    },
+];

package/lib/src/components/Form/index.js

@@ -0,0 +1,4 @@
+export * from './NameInputWidget';
+export * from './NamespaceSelectWidget';
+export * from './KeyValueListWidget';
+export * from './MetadataForm';

package/lib/src/components/Form/type.d.ts

@@ -1,5 +1,4 @@
-import React from 'react';
-import { Control } from 'react-hook-form';
+/// <reference types="react" />
 export type RefineFormValidator = (value: unknown, formValue: unknown) => {
     isValid: boolean;
     errorMsg: string;
@@ -9,9 +8,9 @@ export type RefineFormField = {
     key: string;
     label: string;
     placeholder?: string;
-    helperText?: React.ReactNode;
+    helperText?: string;
     type?: 'number';
     validators?: RefineFormValidator[];
     disabledWhenEdit?: boolean;
-    render?: (value: unknown, onChange: (event: unknown) => void, formValue: unknown, onBlur: () => void, action: 'edit' | 'create', control: Control) => React.ReactElement;
+    render?: (value: unknown, onChange: (event: unknown) => void, formValue: unknown, onBlur: () => void, action: 'edit' | 'create') => React.ReactElement;
 };

package/lib/src/components/Form/useRefineForm.d.ts

@@ -4,7 +4,10 @@ export declare const useRefineForm: (props: {
     config: ResourceConfig;
     id?: string;
     refineProps?: UseFormProps['refineCoreProps'];
+    useFormProps?: UseFormProps;
 }) => {
-    formResult: import("./useReactHookForm").UseFormReturnType<import("@refinedev/core").BaseRecord, import("@refinedev/core").HttpError, Record<string, unknown>, object, import("@refinedev/core").BaseRecord, import("@refinedev/core").BaseRecord, import("@refinedev/core").HttpError>;
+    formResult: import("./useReactHookForm").UseFormReturnType<import("@refinedev/core").BaseRecord, import("@refinedev/core").HttpError, {
+        [x: string]: any;
+    }, {}, import("@refinedev/core").BaseRecord, import("@refinedev/core").BaseRecord, import("@refinedev/core").HttpError>;
     responseErrorMsg: string;
 };

package/lib/src/components/Form/widget.js

@@ -0,0 +1 @@
+export {};

package/lib/src/components/FormErrorAlert/index.js

@@ -0,0 +1,8 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useUIKit } from '@cloudtower/eagle';
+import { first } from 'lodash-es';
+export function FormErrorAlert(props) {
+    const { errorMsgs, style, className } = props;
+    const kit = useUIKit();
+    return errorMsgs.length ? (_jsx(kit.alert, { message: errorMsgs.length > 1 ? (_jsx("ul", { children: errorMsgs.map((errorMsg, index) => (_jsxs("li", { children: [index + 1 + '. ', " ", errorMsg] }, errorMsg))) })) : (first(errorMsgs)), type: "error", style: style, className: className })) : null;
+}

package/lib/src/components/FormLayout/index.js

@@ -0,0 +1,21 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { useUIKit, Typo } from '@cloudtower/eagle';
+import { css, cx } from '@linaria/core';
+import { useResource } from '@refinedev/core';
+import { useD2Translation } from '../../i18n';
+const WrapperStyle = css `
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+`;
+const TitleStyle = css `
+  line-height: 32px !important;
+`;
+function FormLayout(props) {
+    const { saveButtonProps } = props;
+    const kit = useUIKit();
+    const { resource, action } = useResource();
+    const { t } = useD2Translation();
+    return (_jsxs("div", { className: WrapperStyle, children: [_jsxs("span", { className: cx(Typo.Display.d2_bold_title, TitleStyle), children: [resource?.meta?.kind, ":", ' ', action === 'create' ? t('dovetail.create') : t('dovetail.edit')] }), _jsx(kit.divider, {}), props.children, _jsx(kit.form.Item, { children: _jsx(kit.button, { type: "primary", ...saveButtonProps, children: t('dovetail.save') }) })] }));
+}
+export default FormLayout;

package/lib/src/components/FormModal/index.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CloseCircleFilled } from '@ant-design/icons';
+import { useUIKit, popModal } from '@cloudtower/eagle';
+import { css } from '@linaria/core';
+import { useResource } from '@refinedev/core';
+import { useState, useContext, useCallback, useMemo } from 'react';
+import YamlForm from 'src/components/YamlForm';
+import ConfigsContext from 'src/contexts/configs';
+import { useD2Translation } from '../../i18n';
+const FullscreenModalStyle = css `
+  &.ant-modal.fullscreen {
+    .ant-modal-header {
+      padding: 60px 128px 32px 128px;
+    }
+
+    .ant-modal-body {
+      padding: 0 128px;
+    }
+
+    .ant-modal-footer {
+      padding: 15px 128px;
+    }
+  }
+`;
+export function FormModal(props) {
+    const { resource: resourceFromProps, id, formProps, renderForm } = props;
+    const { i18n } = useD2Translation();
+    const { resource } = useResource();
+    const configs = useContext(ConfigsContext);
+    const [saveButtonProps, setSaveButtonProps] = useState({});
+    const kit = useUIKit();
+    const config = useMemo(() => configs[resourceFromProps || resource?.name || ''], [configs, resourceFromProps, resource]);
+    const title = useMemo(() => i18n.t(id ? 'dovetail.edit_resource' : 'dovetail.create_resource', { resource: config?.kind }), [id, i18n, config]);
+    const onCancel = useCallback(() => {
+        popModal();
+    }, []);
+    const onOk = useCallback(() => {
+        saveButtonProps.onClick?.();
+    }, [saveButtonProps]);
+    const onFinish = useCallback(() => {
+        popModal();
+    }, []);
+    return (_jsx(kit.modal, { className: FullscreenModalStyle, width: "calc(100vw - 16px)", title: title, okButtonProps: saveButtonProps, closeIcon: _jsx(CloseCircleFilled, {}), onOk: onOk, onCancel: onCancel, destroyOnClose: true, fullscreen: true, children: renderForm ? renderForm({
+            ...formProps,
+            initialValues: formProps?.initialValues || config?.initValue,
+            id,
+            onSaveButtonPropsChange: setSaveButtonProps,
+            onFinish
+        }) : (_jsx(YamlForm, { ...formProps, initialValues: formProps?.initialValues || config?.initValue, id: id, isShowLayout: false, onSaveButtonPropsChange: setSaveButtonProps, onFinish: onFinish })) }));
+}
+export default FormModal;

package/lib/src/components/ImageNames/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Typo, useUIKit } from '@cloudtower/eagle';
+import { cx, css } from '@linaria/core';
+import { useD2Translation } from '../../i18n';
+const MoreTriggerStyle = css `
+  color: #bec1d2;
+`;
+export const ImageNames = ({ value }) => {
+    const kit = useUIKit();
+    const { t } = useD2Translation();
+    return (_jsxs("span", { children: [_jsx("span", { children: value[0] }), value.length > 1 && (_jsx(kit.tooltip, { title: _jsx(_Fragment, { children: value.slice(1).map((name, index) => {
+                        return _jsx("div", { children: name }, index);
+                    }) }), children: _jsxs("div", { className: cx(Typo.Label.l4_regular, MoreTriggerStyle), children: ["+", value.length - 1, " ", t('dovetail.more')] }) }))] }));
+};

package/lib/src/components/IngressRulesComponent/index.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useUIKit } from '@cloudtower/eagle';
+import { ResourceLink } from '../ResourceLink';
+export const IngressRulesComponent = ({ ingress }) => {
+    const kit = useUIKit();
+    const result = ingress.flattenedRules.map(r => {
+        const divider = ' > ';
+        return (_jsxs("div", { children: [_jsx(kit.Link, { disabled: !r.host, href: r.fullPath, children: r.fullPath }), _jsx("span", { children: divider }), _jsx(ResourceLink, { name: "services", namespace: ingress.metadata.namespace || 'default', resourceId: r.serviceName })] }, r.fullPath));
+    });
+    return _jsx(_Fragment, { children: result });
+};

package/lib/src/components/IngressRulesTable/IngressRulesTable.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useUIKit } from '@cloudtower/eagle';
+import { useMemo } from 'react';
+import { useD2Translation } from '../../i18n';
+import { addId } from '../../utils/addId';
+import { ResourceLink } from '../ResourceLink';
+import ErrorContent from '../Table/ErrorContent';
+export const IngressRulesTable = ({ ingress }) => {
+    const kit = useUIKit();
+    const { t } = useD2Translation();
+    const rows = useMemo(() => {
+        return addId(ingress.flattenedRules, 'fullPath');
+    }, [ingress.flattenedRules]);
+    const columns = [
+        {
+            key: 'pathType',
+            display: true,
+            dataIndex: 'pathType',
+            title: t('dovetail.ingress_rule_type'),
+            sortable: true,
+        },
+        {
+            key: 'fullPath',
+            display: true,
+            dataIndex: 'fullPath',
+            title: t('dovetail.Path'),
+            sortable: true,
+        },
+        {
+            key: 'serviceName',
+            display: true,
+            dataIndex: 'serviceName',
+            title: t('dovetail.service'),
+            sortable: true,
+            render: (serviceName) => {
+                return (_jsx(ResourceLink, { name: "services", namespace: ingress.metadata.namespace || 'default', resourceId: serviceName }));
+            },
+        },
+        {
+            key: 'servicePort',
+            display: true,
+            dataIndex: 'servicePort',
+            title: t('dovetail.port'),
+            sortable: true,
+        },
+    ];
+    if (rows.length === 0) {
+        return _jsx(ErrorContent, { errorText: t('dovetail.empty'), style: { padding: '15px 0' } });
+    }
+    return (_jsx(kit.table, { loading: false, dataSource: rows, columns: columns, rowKey: "type", empty: t('dovetail.empty') }));
+};

package/lib/src/components/IngressRulesTable/index.js

@@ -0,0 +1 @@
+export * from './IngressRulesTable';

package/lib/src/components/K8sDropdown/index.d.ts

@@ -5,5 +5,5 @@ interface K8sDropdownProps {
     record: ResourceModel;
     size?: DropdownSize;
 }
-export declare function K8sDropdown(props: React.PropsWithChildren<K8sDropdownProps>): JSX.Element;
+declare function K8sDropdown(props: React.PropsWithChildren<K8sDropdownProps>): JSX.Element;
 export default K8sDropdown;

package/lib/src/components/K8sDropdown/index.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Icon, useUIKit } from '@cloudtower/eagle';
+import { EditPen16PrimaryIcon, MoreEllipsis316BoldBlueIcon, TrashBinDelete16Icon, Download16GradientBlueIcon, } from '@cloudtower/icons-react';
+import { useResource } from '@refinedev/core';
+import { useDeleteModal } from 'src/hooks/useDeleteModal';
+import { useDownloadYAML } from 'src/hooks/useDownloadYAML';
+import { useOpenForm } from 'src/hooks/useOpenForm';
+import { useGlobalStore } from '../../hooks';
+import { useD2Translation } from '../../i18n';
+function K8sDropdown(props) {
+    const { record } = props;
+    const kit = useUIKit();
+    const { globalStore } = useGlobalStore();
+    const useResourceResult = useResource();
+    const resource = useResourceResult.resource;
+    const { modalProps, visible, openDeleteConfirmModal } = useDeleteModal(resource?.name || '');
+    const download = useDownloadYAML();
+    const { t } = useD2Translation();
+    const openForm = useOpenForm({ id: record.id });
+    return (_jsxs(_Fragment, { children: [_jsx(kit.dropdown, { overlay: _jsxs(kit.menu, { children: [_jsx(kit.menuItem, { onClick: openForm, children: _jsx(Icon, { src: EditPen16PrimaryIcon, children: t('dovetail.edit') }) }), _jsx(kit.menuItem, { danger: true, onClick: () => {
+                                openDeleteConfirmModal(record.id);
+                            }, children: _jsx(Icon, { src: TrashBinDelete16Icon, children: t('dovetail.delete') }) }), _jsx(kit.menu.Item, { onClick: () => {
+                                if (record.id) {
+                                    download({
+                                        name: record.metadata?.name || record.kind || '',
+                                        item: globalStore?.restoreItem(record) || record,
+                                    });
+                                }
+                            }, children: _jsx(Icon, { src: Download16GradientBlueIcon, children: t('dovetail.download_yaml') }) }), props.children] }), children: _jsx(kit.button, { type: "tertiary", size: "small", children: _jsx(Icon, { src: MoreEllipsis316BoldBlueIcon }) }) }), visible ? _jsx(kit.modal, { ...modalProps }) : null] }));
+}
+export default K8sDropdown;

package/lib/src/components/KeyValue/KeyValue.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useUIKit } from '@cloudtower/eagle';
+export const KeyValue = ({ value }) => {
+    const kit = useUIKit();
+    if (!value || Object.keys.length === 0) {
+        return _jsx("div", { children: "Empty" });
+    }
+    const data = Object.keys(value).map(key => {
+        return {
+            id: key,
+            key,
+            value: value[key],
+        };
+    });
+    return (_jsx(kit.table, { loading: false, columns: [
+            {
+                key: 'key',
+                title: 'Key',
+                dataIndex: ['key'],
+            },
+            {
+                key: 'value',
+                title: 'Value',
+                dataIndex: ['value'],
+            },
+        ], dataSource: data }));
+};

package/lib/src/components/KeyValue/index.js

@@ -0,0 +1 @@
+export * from './KeyValue';

package/lib/src/components/KeyValueData/index.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUIKit, Typo } from '@cloudtower/eagle';
+import { css, cx } from '@linaria/core';
+import { useState } from 'react';
+import { useD2Translation } from '../../i18n';
+const WrapperStyle = css `
+  width: 100%;
+`;
+const HeaderStyle = css `
+  width: 100%;
+  display: flex;
+  justify-content: space-space-between;
+  align-items: center;
+  margin-bottom: 8px;
+`;
+const HeaderItemStyle = css `
+  flex: 1;
+`;
+const ExpandButtonStyle = css `
+  &.ant-btn.ant-btn-link {
+    height: 22px;
+    font-size: 12px;
+  }
+`;
+const ContentBlockStyle = css `
+  display: flex;
+  padding: 8px 10px;
+  flex-direction: row;
+  align-items: flex-start;
+  gap: 8px;
+  align-self: stretch;
+  border-radius: 4px;
+  background: rgba(237, 241, 250, 0.60);
+
+  &:not(:last-of-type) {
+    margin-bottom: 8px;
+  }
+`;
+const KeyStyle = css `
+  color: rgba(44, 56, 82, 0.60);
+`;
+export function KeyValueData(props) {
+    const { datas, expandable } = props;
+    const [isExpand, setIsExpand] = useState(expandable ? false : true);
+    const kit = useUIKit();
+    const { t } = useD2Translation();
+    return (_jsxs("div", { className: WrapperStyle, children: [_jsxs("div", { className: HeaderStyle, children: [_jsx("span", { className: HeaderItemStyle, children: Object.keys(datas).length }), _jsx(kit.button, { type: "link", className: ExpandButtonStyle, onClick: () => {
+                            setIsExpand(!isExpand);
+                        }, children: isExpand ? t('dovetail.fold') : t('dovetail.expand') })] }), isExpand ? (Object.keys(datas).map(key => (_jsxs("div", { className: ContentBlockStyle, children: [_jsx("span", { className: cx(KeyStyle, Typo.Label.l4_regular), children: key }), _jsx("span", { className: Typo.Label.l4_regular, children: datas[key] })] }, key)))) : null] }));
+}

package/lib/src/components/Layout/index.js

@@ -0,0 +1,39 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUIKit, Typo } from '@cloudtower/eagle';
+import { css, cx } from '@linaria/core';
+import { useState } from 'react';
+import { Menu } from '../Menu';
+import { NamespacesFilter } from '../NamespacesFilter';
+const HeaderStyle = css `
+  &.ant-layout-header {
+    align-items: center;
+    background: #fff;
+    border-bottom: 2px solid #edf0f7;
+    display: flex;
+    height: 50px;
+    justify-content: space-between;
+    padding: 0 24px 0 14px;
+    position: relative;
+    z-index: 10;
+  }
+`;
+const ContentLayoutStyle = css `
+  height: 100%;
+`;
+const SiderStyle = css `
+  &.ant-layout-sider {
+    background: #edf0f7;
+  }
+`;
+const ContentStyle = css `
+  &.ant-layout-content {
+    padding: 16px;
+    background: #fff;
+  }
+`;
+export const Layout = ({ children, }) => {
+    const kit = useUIKit();
+    const [collapsed, setCollapsed] = useState(false);
+    const { Header, Content, Sider } = kit.layout;
+    return (_jsxs(kit.layout, { style: { height: '100%' }, children: [_jsxs(Header, { className: cx(HeaderStyle, Typo.Heading.h1_bold_title), children: ["Dovetail 2", _jsx("div", { style: { width: 300 }, children: _jsx(NamespacesFilter, {}) })] }), _jsxs(kit.layout, { className: ContentLayoutStyle, children: [_jsx(Sider, { width: 256, className: SiderStyle, theme: "light", collapsed: collapsed, onCollapse: value => setCollapsed(value), children: _jsx(Menu, {}) }), _jsx(Content, { className: ContentStyle, children: children })] })] }));
+};

package/lib/src/components/ListPage/index.js

@@ -0,0 +1,25 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { css, cx } from '@linaria/core';
+import { useContext } from 'react';
+import BaseTable from 'src/components/Table';
+import { TableToolBar } from 'src/components/Table/TableToolBar';
+import ComponentContext from 'src/contexts/component';
+const ListPageStyle = css `
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+`;
+const TableStyle = css `
+  &.table-wrapper {
+    height: auto;
+    flex-shrink: 1;
+    min-height: 0;
+  }
+`;
+export function ListPage(props) {
+    const { title, selectedKeys, tableProps } = props;
+    const { Table: TableComponent } = useContext(ComponentContext);
+    const Table = TableComponent || BaseTable;
+    return (_jsxs("div", { className: ListPageStyle, children: [_jsx(TableToolBar, { title: title, selectedKeys: selectedKeys }), _jsx(Table, { ...tableProps, className: cx(tableProps.className, TableStyle), scroll: { y: 'calc(100% - 48px)' } })] }));
+}

package/lib/src/components/Menu/index.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useUIKit } from '@cloudtower/eagle';
+import { css } from '@linaria/core';
+import { useMenu } from '@refinedev/core';
+import { NavLink } from 'react-router-dom';
+const MenuStyle = css `
+  &.ant-menu {
+    background: #edf0f7;
+    padding: 8px;
+
+    .ant-menu-item-selected {
+      background: linear-gradient(90deg, #0080ff, #005ed1);
+      border-radius: 6px;
+      box-shadow: 0 1px 2px rgba(184, 192, 204, 0.6);
+      color: #fff;
+
+      a:hover {
+        color: #fff;
+      }
+    }
+
+    .ant-menu-item:not(.ant-menu-item-selected):hover {
+      background: linear-gradient(90deg, #fff, hsla(0, 0%, 100%, 0.6));
+      border-radius: 6px;
+      box-shadow: 0 0 4px rgba(235, 239, 245, 0.6), 0 8px 16px rgba(129, 138, 153, 0.18);
+    }
+  }
+`;
+export const Menu = () => {
+    const kit = useUIKit();
+    const { menuItems, selectedKey } = useMenu();
+    function renderMenuItems(items) {
+        return items.map(item => item.list ? (_jsx(kit.menuItem, { children: _jsx(NavLink, { to: item.route || '', children: item.label }) }, item.key)) : (_jsx(kit.menuItemGroup, { title: item.name, children: renderMenuItems(item.children) }, item.key)));
+    }
+    return (_jsx(kit.menu, { className: MenuStyle, theme: "light", selectedKeys: [selectedKey], children: renderMenuItems(menuItems) }));
+};

package/lib/src/components/NamespacesFilter/index.js

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUIKit } from '@cloudtower/eagle';
+import { useList } from '@refinedev/core';
+import { useLocalStorage } from 'usehooks-ts';
+import { useD2Translation } from '../../i18n';
+export const NS_STORE_KEY = 'namespace-filter';
+export const ALL_NS = '_all';
+export const useNamespacesFilter = () => {
+    const [value] = useLocalStorage(NS_STORE_KEY, ALL_NS);
+    return {
+        value,
+    };
+};
+export const NamespacesFilter = () => {
+    const kit = useUIKit();
+    const { t } = useD2Translation();
+    const { data } = useList({
+        resource: 'namespaces',
+        meta: {
+            resourceBasePath: '/api/v1',
+            kind: 'Namespace',
+        },
+    });
+    const [value, setValue] = useLocalStorage(NS_STORE_KEY, ALL_NS);
+    return (_jsxs(kit.select, { input: {
+            value,
+            onChange(value) {
+                setValue(value);
+            },
+        }, children: [_jsx(kit.option, { value: "_all", children: t('dovetail.all_namespaces') }, "_all"), data?.data.map(namespace => {
+                const { name } = namespace.metadata;
+                return (_jsx(kit.option, { value: name, children: name }, name));
+            })] }));
+};

package/lib/src/components/NetworkPolicyRulesTable/NetworkPolicyRulesTable.d.ts

@@ -2,7 +2,6 @@ import type { NetworkPolicyIngressRule, NetworkPolicyEgressRule } from 'kubernet
 import React from 'react';
 type Props = {
     ingressOrEgress: NetworkPolicyIngressRule[] | NetworkPolicyEgressRule[];
-    kind?: string;
 };
-export declare const NetworkPolicyRulesViewer: React.FC<Props>;
+export declare const NetworkPolicyRulesTable: React.FC<Props>;
 export {};

package/lib/src/components/NetworkPolicyRulesTable/NetworkPolicyRulesTable.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useUIKit } from '@cloudtower/eagle';
+import { flatten, get } from 'lodash-es';
+import { useMemo } from 'react';
+import { useD2Translation } from '../../i18n';
+import { addId } from '../../utils/addId';
+import ErrorContent from '../Table/ErrorContent';
+import { Tags } from '../Tags';
+export const NetworkPolicyRulesTable = ({ ingressOrEgress }) => {
+    const result = ingressOrEgress?.map((gress, i) => {
+        const peers = get(gress, 'from') || get(gress, 'to');
+        if (!peers)
+            return null;
+        return _jsx(IngressRuleTable, { peers: peers }, i);
+    });
+    return _jsx(_Fragment, { children: result });
+};
+const IngressRuleTable = ({ peers }) => {
+    const kit = useUIKit();
+    const { t } = useD2Translation();
+    const rows = useMemo(() => {
+        const rows = peers?.map(p => {
+            return Object.keys(p).map(key => {
+                return {
+                    type: key,
+                    ...p[key],
+                };
+            });
+        }) || [];
+        return addId(flatten(rows), 'type');
+    }, [peers]);
+    const columns = [
+        {
+            key: 'type',
+            display: true,
+            dataIndex: 'type',
+            title: t('dovetail.type'),
+            sortable: true,
+        },
+        {
+            key: 'cidr',
+            display: true,
+            dataIndex: 'cidr',
+            title: 'CIDR',
+            sortable: true,
+            render(v) {
+                return _jsx("span", { children: v || '-' });
+            },
+        },
+        {
+            key: 'except',
+            display: true,
+            dataIndex: 'except',
+            title: 'Except',
+            sortable: true,
+            render: (except) => {
+                if (!except)
+                    return '-';
+                return except?.map(str => _jsx("div", { children: str }, str));
+            },
+        },
+        {
+            key: 'matchLabels',
+            display: true,
+            dataIndex: 'matchLabels',
+            title: 'Match Labels',
+            sortable: true,
+            render(matchLabels) {
+                return _jsx(Tags, { value: matchLabels });
+            },
+        },
+    ];
+    if (rows.length === 0) {
+        return _jsx(ErrorContent, { errorText: t('dovetail.empty'), style: { padding: '15px 0' } });
+    }
+    return (_jsx(kit.table, { loading: false, dataSource: rows, columns: columns, rowKey: "type", empty: t('dovetail.empty') }));
+};

package/lib/src/components/NetworkPolicyRulesTable/index.js

@@ -0,0 +1 @@
+export * from './NetworkPolicyRulesTable';

package/lib/src/components/PageShow/PageShow.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useUIKit } from '@cloudtower/eagle';
+import { useParsed, useShow } from '@refinedev/core';
+import { ShowContent } from '../ShowContent';
+export const PageShow = (props) => {
+    const kit = useUIKit();
+    const parsed = useParsed();
+    const { queryResult } = useShow({ id: parsed?.params?.id });
+    const { isLoading } = queryResult;
+    return isLoading ? _jsx(kit.loading, {}) : _jsx(ShowContent, { ...props });
+};

package/lib/src/components/PageShow/index.js

@@ -0,0 +1 @@
+export * from './PageShow';