@dovetail-v2/refine 0.0.32 → 0.0.33

package/lib/src/components/EventsTable/EventsTable.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useList, useParsed } from '@refinedev/core';
+import { useMemo, useState } from 'react';
+import { AgeColumnRenderer, CommonSorter, NameSpaceColumnRenderer, } from '../../hooks/useEagleTable/columns';
+import { useD2Translation } from '../../i18n';
+import Table from '../Table';
+export const EventsTable = ({}) => {
+    const { i18n } = useD2Translation();
+    const [currentPage, setCurrentPage] = useState(1);
+    const { data, isLoading } = useList({
+        resource: 'events',
+        meta: { resourceBasePath: '/apis/events.k8s.io/v1', kind: 'Event' },
+    });
+    const parsed = useParsed();
+    const columns = useMemo(() => [
+        NameSpaceColumnRenderer(i18n),
+        {
+            key: 'type',
+            display: true,
+            dataIndex: ['type'],
+            title: i18n.t('dovetail.type'),
+            sortable: true,
+            sorter: CommonSorter(['type']),
+        },
+        {
+            key: 'reason',
+            display: true,
+            dataIndex: ['reason'],
+            title: i18n.t('dovetail.reason'),
+            sortable: true,
+            sorter: CommonSorter(['reason']),
+        },
+        {
+            key: 'object',
+            display: true,
+            dataIndex: ['regarding', 'name'],
+            title: i18n.t('dovetail.object'),
+            sortable: true,
+            sorter: CommonSorter(['regarding', 'name']),
+        },
+        {
+            key: 'note',
+            display: true,
+            dataIndex: ['note'],
+            title: i18n.t('dovetail.note'),
+            sortable: true,
+            sorter: CommonSorter(['note']),
+        },
+        AgeColumnRenderer(i18n),
+    ], [i18n]);
+    const dataSource = useMemo(() => {
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        return data?.data.filter((d) => {
+            const objectId = `${d.regarding.namespace}/${d.regarding.name}`;
+            return objectId === parsed.id;
+        });
+    }, [data?.data, parsed]);
+    return (_jsx(Table, { tableKey: "events", loading: isLoading, data: dataSource || [], columns: columns, rowKey: "id", error: false, currentPage: currentPage, onPageChange: p => setCurrentPage(p), currentSize: 10, refetch: () => null }));
+};

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

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

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { YamlFormProps } from './YamlForm';
+export type FormModalProps = {
+    resource?: string;
+    id?: string;
+    formProps?: YamlFormProps;
+    renderForm?: (props: YamlFormProps) => React.ReactNode;
+};
+export declare function FormModal(props: FormModalProps): JSX.Element;

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

@@ -0,0 +1,56 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useUIKit } from '@cloudtower/eagle';
+import { useCallback, useMemo } from 'react';
+function KeyValueInput(props) {
+    const { children, item } = props;
+    const kit = useUIKit();
+    const onKeyChange = useCallback((event) => {
+        const key = event.target.value;
+        props.onChange?.({
+            ...item,
+            key,
+        });
+    }, [item, props]);
+    const onValueChange = useCallback((event) => {
+        const value = event.target.value;
+        props.onChange?.({
+            ...item,
+            value,
+        });
+    }, [item, props]);
+    return (_jsxs(kit.space, { children: [_jsx(kit.input, { value: item.key, onChange: onKeyChange }), _jsx(kit.textArea, { value: item.value, onChange: onValueChange }), children] }));
+}
+export function KeyValueListWidget(props) {
+    const kit = useUIKit();
+    const { value } = props;
+    const items = useMemo(() => {
+        return Object.entries(value || {}).map(([key, value]) => ({
+            key,
+            value,
+        }));
+    }, [value]);
+    const onChange = useCallback((newItems) => {
+        const newValue = newItems.reduce((result, item) => {
+            result[item.key] = item.value;
+            return result;
+        }, {});
+        props.onChange?.(newValue);
+    }, [props]);
+    const onRemove = useCallback((index) => {
+        const result = [...items];
+        result.splice(index, 1);
+        onChange(result);
+    }, [onChange, items]);
+    const onAdd = useCallback(() => {
+        onChange([...items, { key: '', value: '' }]);
+    }, [onChange, items]);
+    return (_jsxs(_Fragment, { children: [items.map((item, index) => {
+                return (_jsx(KeyValueInput, { item: item, onChange: newItem => {
+                        const temp = [...items];
+                        temp.splice(index, 1, newItem);
+                        onChange(temp);
+                    }, children: _jsx(kit.button, { onClick: () => {
+                            onRemove(index);
+                        }, danger: true, children: "Remove" }) }, index));
+            }), _jsx(kit.form.Item, { children: _jsx(kit.button, { type: "primary", onClick: onAdd, children: "Add" }) })] }));
+}

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUIKit } from '@cloudtower/eagle';
+import { KeyValueListWidget } from './KeyValueListWidget';
+import { NameInputWidget, rfc1123LabelRules } from './NameInputWidget';
+import { NamespaceSelectWidget, namespaceRules } from './NamespaceSelectWidget';
+export function MetadataForm() {
+    const kit = useUIKit();
+    return (_jsxs(_Fragment, { children: [_jsx(kit.form.Item, { label: "Name", name: ['metadata', 'name'], rules: rfc1123LabelRules, children: _jsx(NameInputWidget, {}) }), _jsx(kit.form.Item, { label: "Namespace", name: ['metadata', 'namespace'], rules: namespaceRules, children: _jsx(NamespaceSelectWidget, {}) }), _jsx(kit.form.Item, { name: ['metadata', 'labels'], label: "Labels", children: _jsx(KeyValueListWidget, {}) }), _jsx(kit.form.Item, { name: ['metadata', 'annotations'], label: "Annotations", children: _jsx(KeyValueListWidget, {}) })] }));
+}

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/RefineFormContent.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { Control } from 'react-hook-form';
+import { ResourceModel } from '../../models';
+import { ResourceConfig } from '../../types';
+type Props<Model extends ResourceModel> = {
+    config?: ResourceConfig<Model>;
+    control: Control;
+    errorMsg?: string;
+    action?: 'create' | 'edit';
+};
+export declare const RefineFormContent: <Model extends ResourceModel<import("k8s-api-provider").Unstructured>>(props: Props<Model>) => JSX.Element;
+export {};

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ResourceConfig } from '../../types';
+type Props = {
+    config: ResourceConfig<any>;
+};
+export declare const RefineFormPage: (props: Props) => JSX.Element;
+export {};

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

@@ -0,0 +1,26 @@
+/// <reference types="react" />
+import { FormAction } from '@refinedev/core';
+import { Unstructured } from 'k8s-api-provider';
+import useYamlForm from './useYamlForm';
+export declare enum SchemaStrategy {
+    Required = "Required",
+    Optional = "Optional",
+    None = "None"
+}
+export interface YamlFormProps {
+    id?: string;
+    action?: FormAction;
+    initialValues?: Record<string, unknown>;
+    schemaStrategy?: SchemaStrategy;
+    isShowLayout?: boolean;
+    useFormProps?: Parameters<typeof useYamlForm>[0];
+    transformInitValues?: (values: Unstructured) => Unstructured;
+    transformApplyValues?: (values: Unstructured) => Unstructured;
+    onSaveButtonPropsChange?: (saveButtonProps: {
+        disabled?: boolean;
+        onClick: () => void;
+    }) => void;
+    onErrorsChange?: (errors: string[]) => void;
+    onFinish?: () => void;
+}
+export declare function YamlForm(props: YamlFormProps): JSX.Element;

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

@@ -1,4 +1,7 @@
-export * from './NameInputWidget';
-export * from './NamespaceSelectWidget';
-export * from './KeyValueListWidget';
-export * from './MetadataForm';
+export * from './FormModal';
+export * from './RefineFormContent';
+export * from './RefineFormPage';
+export * from './YamlForm';
+export * from './useRefineForm';
+export * from './useYamlForm';
+export * from './type';

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export type RefineFormValidator = (value: unknown, formValue: unknown) => {
+    isValid: boolean;
+    errorMsg: string;
+};
+export type RefineFormField = {
+    path: string[];
+    key: string;
+    label: string;
+    type?: 'number';
+    validators?: RefineFormValidator[];
+    render?: React.FC<{
+        value: unknown;
+        onChange: (event: unknown) => void;
+        onBlur: () => void;
+    }>;
+};

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

@@ -0,0 +1,10 @@
+import { UseFormProps } from '@refinedev/core';
+import { ResourceConfig } from '../../types';
+export declare const useRefineForm: (props: {
+    config: ResourceConfig;
+    id?: string;
+    refineProps?: UseFormProps;
+}) => {
+    formResult: import("@refinedev/react-hook-form").UseFormReturnType<import("@refinedev/core").BaseRecord, import("@refinedev/core").HttpError, Record<string, unknown>, {}, import("@refinedev/core").BaseRecord, import("@refinedev/core").BaseRecord, import("@refinedev/core").HttpError>;
+    responseErrorMsg: string;
+};

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

@@ -0,0 +1,49 @@
+import { HttpError, BaseRecord, UseFormReturnType as UseFormReturnTypeCore, UseFormProps as UseFormPropsCore, CreateResponse, UpdateResponse } from '@refinedev/core';
+import { ButtonProps } from 'antd/lib/button';
+import { FormInstance, FormProps } from 'antd/lib/form';
+import { JSONSchema7 } from 'json-schema';
+import { Unstructured } from 'k8s-api-provider';
+import React from 'react';
+import { type YamlEditorHandle, type YamlEditorProps } from 'src/components/YamlEditor';
+type EditorProps = Omit<YamlEditorProps, 'schema'> & {
+    ref: React.RefObject<YamlEditorHandle>;
+    schema: JSONSchema7 | null;
+};
+export type UseFormProps<TQueryFnData extends BaseRecord = BaseRecord, TError extends HttpError = HttpError, TVariables extends object = object, TData extends BaseRecord = TQueryFnData, TResponse extends BaseRecord = TData, TResponseError extends HttpError = TError> = UseFormPropsCore<TQueryFnData, TError, TVariables, TData, TResponse, TResponseError> & {
+    submitOnEnter?: boolean;
+    /**
+     * Shows notification when unsaved changes exist
+     */
+    warnWhenUnsavedChanges?: boolean;
+    editorOptions?: {
+        isGenerateAnnotations?: boolean;
+        isSkipSchema?: boolean;
+    };
+    initialValuesForCreate?: Record<string, unknown>;
+    transformInitValues?: (values: Unstructured) => Unstructured;
+    transformApplyValues?: (values: Unstructured) => Unstructured;
+};
+export type UseFormReturnType<TQueryFnData extends BaseRecord = BaseRecord, TError extends HttpError = HttpError, TVariables extends object = object, TData extends BaseRecord = TQueryFnData, TResponse extends BaseRecord = TData, TResponseError extends HttpError = TError> = UseFormReturnTypeCore<TQueryFnData, TError, TVariables, TData, TResponse, TResponseError> & {
+    form: FormInstance;
+    formProps: FormProps;
+    saveButtonProps: ButtonProps & {
+        onClick: () => void;
+    };
+    editorProps: EditorProps;
+    schema: JSONSchema7 | null;
+    isLoadingSchema: boolean;
+    loadSchemaError: Error | null;
+    fetchSchema: () => void;
+    enableEditor: boolean;
+    errorResponseBody?: Record<string, unknown> | null;
+    switchEditor: () => void;
+    onFinish: (values?: TVariables) => Promise<CreateResponse<TResponse> | UpdateResponse<TResponse> | void>;
+};
+declare const useYamlForm: <TQueryFnData extends Unstructured = Unstructured & {
+    id: string;
+}, TError extends HttpError = HttpError, TVariables extends {
+    [prop: string]: unknown;
+} = {
+    [prop: string]: unknown;
+}, TData extends Unstructured = TQueryFnData, TResponse extends BaseRecord = TData, TResponseError extends HttpError = TError>({ action: actionFromProps, resource, onMutationSuccess: onMutationSuccessProp, onMutationError, submitOnEnter, warnWhenUnsavedChanges: warnWhenUnsavedChangesProp, redirect, successNotification, errorNotification, meta, metaData, queryMeta, mutationMeta, liveMode, liveParams, mutationMode, dataProviderName, onLiveEvent, invalidates, undoableTimeout, queryOptions, createMutationOptions, updateMutationOptions, id: idFromProps, overtimeOptions, editorOptions, initialValuesForCreate, transformInitValues, transformApplyValues, }?: UseFormProps<TQueryFnData, TError, TVariables, TData, TResponse, TResponseError>) => UseFormReturnType<TQueryFnData, TError, TVariables, TData, TResponse, TResponseError>;
+export default useYamlForm;

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

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

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

@@ -3,6 +3,7 @@ interface FormErrorAlertProps {
     errorMsgs: string[];
     style?: React.CSSProperties;
     className?: string;
+    isEdit?: boolean;
 }
 export declare function FormErrorAlert(props: FormErrorAlertProps): JSX.Element | null;
 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/FormWidgets/KeyValueListWidget.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import type { FormWidgetProps } from './widget';
+export type KeyValueListWidgetProps = FormWidgetProps<Record<string, string>> & {
+    disabled?: boolean;
+};
+export declare function KeyValueListWidget(props: KeyValueListWidgetProps): JSX.Element;

package/lib/src/components/FormWidgets/MetadataForm.d.ts

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

package/lib/src/components/FormWidgets/NameInputWidget.d.ts

@@ -0,0 +1,51 @@
+/// <reference types="react" />
+import { AntdInputProps } from '@cloudtower/eagle';
+export declare function NameInputWidget(props: AntdInputProps): JSX.Element;
+export declare const dnsSubDomainRules: ({
+    required: boolean;
+    message: string;
+    pattern?: undefined;
+    max?: undefined;
+} | {
+    pattern: RegExp;
+    message: string;
+    required?: undefined;
+    max?: undefined;
+} | {
+    max: number;
+    message: string;
+    required?: undefined;
+    pattern?: undefined;
+})[];
+export declare const rfc1123LabelRules: ({
+    required: boolean;
+    message: string;
+    pattern?: undefined;
+    max?: undefined;
+} | {
+    pattern: RegExp;
+    message: string;
+    required?: undefined;
+    max?: undefined;
+} | {
+    max: number;
+    message: string;
+    required?: undefined;
+    pattern?: undefined;
+})[];
+export declare const rfc1035LabelRules: ({
+    required: boolean;
+    message: string;
+    pattern?: undefined;
+    max?: undefined;
+} | {
+    pattern: RegExp;
+    message: string;
+    required?: undefined;
+    max?: undefined;
+} | {
+    max: number;
+    message: string;
+    required?: undefined;
+    pattern?: undefined;
+})[];

package/lib/src/components/FormWidgets/NamespaceSelectWidget.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { FormWidgetProps } from './widget';
+type NamespaceSelectProps = FormWidgetProps<string | string[]>;
+export declare function NamespaceSelectWidget(props: NamespaceSelectProps): JSX.Element;
+export declare const namespaceRules: {
+    required: boolean;
+    message: string;
+}[];
+export {};

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

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

package/lib/src/components/FormWidgets/widget.d.ts

@@ -0,0 +1,5 @@
+export interface FormWidgetProps<V> {
+    value?: V;
+    onChange?: (value: V) => void;
+    [prop: string]: unknown;
+}

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

@@ -1,4 +1,5 @@
 import React from 'react';
 export declare const ImageNames: React.FC<{
     value: string[];
+    breakLine?: boolean;
 }>;

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';