@dovetail-v2/refine 0.0.32 → 0.0.33

package/lib/src/components/RefineForm/RefineFormContent.d.ts

@@ -0,0 +1,10 @@
+/// <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;
+};
+export declare const RefineFormContent: <Model extends ResourceModel<import("k8s-api-provider").Unstructured>>(props: Props<Model>) => JSX.Element;
+export {};

package/lib/src/components/RefineForm/RefineFormModal.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ResourceConfig } from '../../types';
+export type RefineFormModalProps = {
+    config: ResourceConfig;
+    id?: string;
+};
+export declare function RefineFormModal(props: RefineFormModalProps): JSX.Element;
+export default RefineFormModal;

package/lib/src/components/RefineForm/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/RefineForm/index.d.ts

@@ -0,0 +1,3 @@
+export * from './RefineFormPage';
+export * from './RefineFormModal';
+export * from './type';

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

@@ -0,0 +1,20 @@
+/// <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;
+    }>;
+};
+export type RefineFormConfig = {
+    fields: RefineFormField[];
+};

package/lib/src/components/RefineForm/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/ReplicasDropdown/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { WorkloadModel } from '../../models';
+import { DropdownSize } from '../K8sDropdown';
+type Props<Model extends WorkloadModel> = {
+    record: Model;
+    size?: DropdownSize;
+};
+export declare function ReplicasDropdown<Model extends WorkloadModel>(props: React.PropsWithChildren<Props<Model>>): JSX.Element;
+export {};

package/lib/src/components/ResourceCRUD/ResourceCRUD.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Route } from 'react-router-dom';
+import { FormType } from 'src/types';
+import { ResourceForm } from './create';
+import { ResourceList } from './list';
+import { ResourceShow } from './show';
+export function ResourceCRUD(props) {
+    const { configs, urlPrefix } = props;
+    return (_jsx(_Fragment, { children: configs.map(config => {
+            return (_jsxs(React.Fragment, { children: [_jsx(Route, { path: `${urlPrefix}/${config.name}`, exact: true, children: _jsx(ResourceList, { name: config.kind, formatter: config.formatter, columns: config.columns?.() || [], Dropdown: config.Dropdown }) }), _jsx(Route, { path: `${urlPrefix}/${config.name}/show`, children: _jsx(ResourceShow, { formatter: config.formatter, showConfig: config.showConfig?.() || {}, Dropdown: config.Dropdown }) }), 
+                    // the modals would render in ModalStack
+                    config.formType === FormType.PAGE ? (_jsxs(_Fragment, { children: [_jsx(Route, { path: `${urlPrefix}/${config.name}/create`, children: _jsx(ResourceForm, { config: config }) }), _jsx(Route, { path: `${urlPrefix}/${config.name}/edit`, children: _jsx(ResourceForm, { config: config }) })] })) : null] }, config.name));
+        }) }));
+}

package/lib/src/components/ResourceCRUD/create/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import YamlForm from 'src/components/YamlForm';
+import { getInitialValues } from 'src/utils/form';
+export function ResourceForm(props) {
+    const { config } = props;
+    const formProps = useMemo(() => {
+        return {
+            initialValues: getInitialValues(config),
+        };
+    }, [config]);
+    return (_jsx(YamlForm, { ...formProps }));
+}

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

@@ -0,0 +1,4 @@
+export * from './list';
+export * from './show';
+export * from './create';
+export * from './ResourceCRUD';

package/lib/src/components/ResourceCRUD/list/index.d.ts

@@ -1,13 +1,9 @@
+/// <reference types="react" />
 import { IResourceComponentsProps } from '@refinedev/core';
-import React from 'react';
 import { ResourceModel } from '../../../models';
-import { Column } from '../../Table';
+import { ResourceConfig } from '../../../types';
 type Props<Model extends ResourceModel> = IResourceComponentsProps & {
-    formatter?: (v: Model) => Model;
-    columns: Column<Model>[];
-    Dropdown?: React.FC<{
-        record: Model;
-    }>;
+    config: ResourceConfig<Model>;
 };
 export declare function ResourceList<Model extends ResourceModel>(props: Props<Model>): JSX.Element;
 export {};

package/lib/src/components/ResourceCRUD/list/index.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEagleTable } from '../../../hooks/useEagleTable';
+import { NameColumnRenderer } from '../../../hooks/useEagleTable/columns';
+import { useD2Translation } from '../../../i18n';
+import { ListPage } from '../../ListPage';
+export function ResourceList(props) {
+    const { formatter, name, columns, Dropdown } = props;
+    const { i18n } = useD2Translation();
+    const { tableProps, selectedKeys } = useEagleTable({
+        useTableParams: {},
+        columns: [NameColumnRenderer(i18n), ...columns],
+        tableProps: {
+            currentSize: 10,
+        },
+        formatter,
+        Dropdown,
+    });
+    return (_jsx(ListPage, { title: name || '', selectedKeys: selectedKeys, tableProps: tableProps }));
+}

package/lib/src/components/ResourceCRUD/show/index.d.ts

@@ -1,13 +1,9 @@
+/// <reference types="react" />
 import { IResourceComponentsProps } from '@refinedev/core';
-import React from 'react';
 import { ResourceModel } from '../../../models';
-import { ShowConfig } from '../../ShowContent';
+import { ResourceConfig } from '../../../types';
 type Props<Model extends ResourceModel> = IResourceComponentsProps & {
-    formatter?: (v: Model) => Model;
-    showConfig: ShowConfig<Model>;
-    Dropdown?: React.FC<{
-        record: Model;
-    }>;
+    config: ResourceConfig<Model>;
 };
 export declare function ResourceShow<Model extends ResourceModel>(props: Props<Model>): JSX.Element;
 export {};

package/lib/src/components/ResourceCRUD/show/index.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PageShow } from '../../PageShow';
+export function ResourceShow(props) {
+    const { formatter, showConfig, Dropdown } = props;
+    return (_jsx(PageShow, { showConfig: showConfig, formatter: formatter, Dropdown: Dropdown }));
+}

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useUIKit } from '@cloudtower/eagle';
+import { useGo, useNavigation } from '@refinedev/core';
+export const ResourceLink = props => {
+    const { name, namespace, resourceId } = props;
+    const kit = useUIKit();
+    const navigation = useNavigation();
+    const go = useGo();
+    const onClick = () => {
+        go({
+            to: navigation.showUrl(name, ''),
+            query: {
+                id: `${namespace}/${resourceId}`,
+            },
+            options: {
+                keepQuery: true,
+            },
+        });
+    };
+    return _jsx(kit.Link, { onClick: onClick, children: resourceId });
+};

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

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { css, cx } from '@linaria/core';
+import { parseSi } from 'src/utils/unit';
+const WrapperStyle = css `
+  display: flex;
+  align-items: center;
+
+  .usage-text {
+    width: 50px;
+    text-align: right;
+  }
+
+  .usage-bar {
+    height: 12px;
+    width: 100px;
+    position: relative;
+    border-radius: 2px;
+  }
+
+  .request-anchor {
+    position: absolute;
+    left: 10%;
+    top: -3px;
+    height: 18px;
+    width: 2px;
+    background: #777;
+    z-index: 9;
+  }
+
+  .usage-fill-bar {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    background: rgba(0, 128, 255, 0.6);
+    z-index: 7;
+  }
+
+  .request-bar {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    background: #d8deeb;
+    z-index: 5;
+  }
+
+  .request-to-limit-bar {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    background: #d8deeb;
+    z-index: 5;
+
+    &.no-limit {
+      background: linear-gradient(to right, #d8deeb 50%, #d8deeb 50%);
+      background-size: 4px 100%;
+
+      &.exceed-request {
+        background: linear-gradient(to right, #d8deeb 50%, rgba(0, 128, 255, 0.6) 50%);
+        background-size: 4px 100%;
+      }
+    }
+  }
+`;
+const InnerBar = ({ usage, requestNum, limitNum }) => {
+    const usageNum = parseSi(usage);
+    const totalNum = limitNum || requestNum / 0.8;
+    const requestPercent = (100 * requestNum) / totalNum;
+    const usageInRequestPercent = 100 * Math.min(usageNum / requestNum, 1);
+    const usageInRequestToLimitPercent = 100 * Math.min(Math.max(usageNum - requestNum, 0) / (totalNum - requestNum), 1);
+    const noLimit = limitNum === 0;
+    return (_jsxs("div", { className: "usage-bar", style: { marginLeft: 4 }, children: [_jsx("div", { className: "request-anchor", style: {
+                    left: `${requestPercent}%`,
+                } }), _jsx("div", { className: "request-bar", style: { width: `${requestPercent}%` }, children: _jsx("div", { className: "usage-fill-bar", style: { width: `${usageInRequestPercent}%` } }) }), _jsx("div", { className: cx('request-to-limit-bar', noLimit && 'no-limit', usageInRequestToLimitPercent > 0 && 'exceed-request'), style: { width: `${100 - requestPercent}%` }, children: !noLimit && (_jsx("div", { className: "usage-fill-bar", style: { width: `${usageInRequestToLimitPercent}%` } })) })] }));
+};
+export const ResourceUsageBar = props => {
+    const { usage, requestNum } = props;
+    return (_jsxs("div", { className: cx('usage-wrapper', WrapperStyle), children: [_jsx("div", { className: "usage-text", children: usage }), requestNum > 0 && _jsx(InnerBar, { ...props })] }));
+};

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { css } from '@linaria/core';
+const Style = css `
+  width: 1px;
+  height: 16px;
+  border-radius: 1px;
+  background: rgba(172, 186, 211, 0.6);
+`;
+export const Separator = () => {
+    return _jsx("div", { className: Style });
+};

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

@@ -4,5 +4,8 @@ type Props = {
     service: ServiceModel;
 };
 export declare const ServiceInClusterAccessComponent: React.FC<Props>;
-export declare const ServiceOutClusterAccessComponent: React.FC<Props>;
+export declare const ServiceOutClusterAccessComponent: React.FC<Props & {
+    clusterVip: string;
+    separator?: string;
+}>;
 export {};

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

@@ -8,5 +8,10 @@ type Props<Model extends ResourceModel> = {
         record: Model;
     }>;
 };
+export declare function ShowGroupComponent(props: React.PropsWithChildren<{
+    title: string;
+    className?: string;
+    operationEle?: React.ReactElement;
+}>): JSX.Element;
 export declare const ShowContent: <Model extends ResourceModel<import("k8s-api-provider").Unstructured>>(props: Props<Model>) => JSX.Element | null;
 export {};

package/lib/src/components/ShowContent/ShowContent.js

@@ -0,0 +1,157 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Typo, useUIKit } from '@cloudtower/eagle';
+import { css } from '@linaria/core';
+import { useParsed, useResource, useShow } from '@refinedev/core';
+import yaml from 'js-yaml';
+import { get, omit } from 'lodash-es';
+import { useState, useMemo, useCallback } from 'react';
+import K8sDropdown from 'src/components/K8sDropdown';
+import { KeyValueData } from 'src/components/KeyValueData';
+import MonacoYamlEditor from 'src/components/YamlEditor/MonacoYamlEditor';
+import useK8sYamlEditor from 'src/hooks/useK8sYamlEditor';
+import { useGlobalStore } from '../../hooks';
+import { useD2Translation } from '../../i18n';
+import { StateTag } from '../StateTag';
+import { Tags } from '../Tags';
+import Time from '../Time';
+const ShowContentWrapperStyle = css `
+  .ant-row {
+    margin-right: 0 !important;
+  }
+`;
+const TopBarStyle = css `
+  justify-content: space-between;
+  width: 100%;
+`;
+const ShowContentHeaderStyle = css `
+  width: 100%;
+  height: 100%;
+`;
+const EditorStyle = css `
+  margin-top: 16px;
+`;
+const FieldWrapperStyle = css `
+  display: flex;
+  flex-wrap: nowrap;
+`;
+const TabsStyle = css `
+  &.ant-tabs {
+    .ant-tabs-nav {
+      margin-bottom: 0;
+    }
+  }
+`;
+const StateTagStyle = css `
+  margin-left: 8px;
+`;
+var Mode;
+(function (Mode) {
+    Mode["Detail"] = "detail";
+    Mode["Yaml"] = "yaml";
+})(Mode || (Mode = {}));
+export const ShowContent = (props) => {
+    const { showConfig, formatter, Dropdown = K8sDropdown } = props;
+    const kit = useUIKit();
+    const { globalStore } = useGlobalStore();
+    const parsed = useParsed();
+    const { resource } = useResource();
+    const [mode, setMode] = useState(Mode.Detail);
+    const { queryResult } = useShow({
+        id: parsed?.params?.id,
+        liveMode: mode === Mode.Yaml ? 'off' : 'auto',
+    });
+    const { t } = useD2Translation();
+    const { fold } = useK8sYamlEditor();
+    const { data } = queryResult;
+    const schema = useMemo(() => ({}), []);
+    const defaultEditorValue = useMemo(() => (data?.data ? yaml.dump(omit(globalStore?.restoreItem(data.data), 'id')) : ''), [globalStore, data]);
+    const onEditorCreate = useCallback(editor => {
+        fold(editor);
+    }, [fold]);
+    if (!data?.data) {
+        return null;
+    }
+    const model = data.data;
+    const record = formatter ? formatter(model) : data?.data;
+    function renderFields(fields) {
+        if (!record)
+            return null;
+        return fields.map(field => {
+            let content;
+            const value = get(record, field.path);
+            if (field.renderContent) {
+                content = field.renderContent(value, record, field);
+            }
+            else {
+                content = _jsx("span", { children: get(record, field.path) });
+            }
+            return (_jsx(kit.col, { span: field.col, children: field.render ? (field.render(value, record, field)) : (_jsxs("div", { className: FieldWrapperStyle, children: [_jsxs("span", { className: Typo.Label.l3_regular, style: { width: field.labelWidth || '64px' }, children: [field.title, ":", ' '] }), content] })) }, field.path.join()));
+        });
+    }
+    const DESCRIPTION_DEFAULT_FIELDS = [
+        {
+            key: 'NameSpace',
+            title: t('dovetail.namespace'),
+            path: ['metadata', 'namespace'],
+        },
+        {
+            key: 'Age',
+            title: t('dovetail.created_time'),
+            path: ['metadata', 'creationTimestamp'],
+            renderContent(value) {
+                return _jsx(Time, { date: new Date(value) });
+            },
+        },
+    ];
+    const LABELS_ANNOTATIONS_GROUP_FIELDS = [
+        {
+            key: 'Labels',
+            title: t('dovetail.label'),
+            path: ['metadata', 'labels'],
+            col: 24,
+            renderContent: value => {
+                if (!value) {
+                    return undefined;
+                }
+                return _jsx(Tags, { value: value });
+            },
+        },
+        {
+            key: 'Annotations',
+            title: t('dovetail.annotation'),
+            path: ['metadata', 'annotations'],
+            col: 24,
+            renderContent: value => {
+                if (!value) {
+                    return undefined;
+                }
+                return _jsx(KeyValueData, { datas: value, expandable: true });
+            },
+        },
+    ];
+    const stateDisplay = get(record, 'stateDisplay');
+    const topBar = (_jsxs(kit.space, { className: TopBarStyle, children: [_jsxs("div", { children: [_jsxs("span", { className: Typo.Display.d2_bold_title, children: [resource?.meta?.kind, ": "] }), _jsx("span", { className: Typo.Label.l1_regular, children: record?.metadata?.name }), stateDisplay ? (_jsx(StateTag, { className: StateTagStyle, state: stateDisplay })) : undefined] }), _jsxs(kit.space, { children: [_jsxs(kit.radioGroup, { value: mode, onChange: e => setMode(e.target.value), children: [_jsx(kit.radioButton, { value: "detail", children: t('dovetail.detail') }), _jsx(kit.radioButton, { value: "yaml", children: "YAML" })] }), _jsx(Dropdown, { record: record })] })] }));
+    const descriptions = (_jsx(kit.row, { gutter: 24, children: renderFields([...DESCRIPTION_DEFAULT_FIELDS, ...(showConfig.descriptions || [])]) }));
+    const groups = (showConfig.groups || [])
+        .concat([
+        {
+            fields: LABELS_ANNOTATIONS_GROUP_FIELDS,
+        },
+    ])
+        .map((group, index) => (_jsx(kit.row, { gutter: [24, 16], children: renderFields(group.fields) }, index)));
+    const tabs = (_jsx(kit.tabs, { className: TabsStyle, children: (showConfig.tabs || []).map(field => {
+            let content;
+            if (field.renderContent) {
+                content = field.renderContent(get(record, field.path), record, field);
+            }
+            else {
+                content = _jsx("span", { children: get(record, field.path) });
+            }
+            return (_jsx(kit.tabsTabPane, { tab: field.title, children: content }, field.key));
+        }) }));
+    const modeMap = {
+        [Mode.Detail]: (_jsxs(_Fragment, { children: [groups, _jsx(kit.divider, {}), tabs] })),
+        [Mode.Yaml]: (_jsx(MonacoYamlEditor, { className: EditorStyle, defaultValue: defaultEditorValue, schema: schema, onEditorCreate: onEditorCreate, readOnly: true })),
+    };
+    return (_jsxs("div", { className: ShowContentWrapperStyle, children: [_jsxs(kit.space, { direction: "vertical", className: ShowContentHeaderStyle, children: [topBar, descriptions] }), _jsx(kit.divider, {}), modeMap[mode]] }));
+};

package/lib/src/components/ShowContent/fields.d.ts

@@ -1,4 +1,6 @@
 import { i18n as I18nType } from 'i18next';
+import { Unstructured } from 'k8s-api-provider';
+import { NetworkPolicy } from 'kubernetes-types/networking/v1';
 import React from 'react';
 import { JobModel, ResourceModel, WorkloadModel, WorkloadBaseModel, CronJobModel, IngressModel, ServiceModel } from '../../models';
 export type ShowField<Model extends ResourceModel> = {
@@ -7,8 +9,8 @@ export type ShowField<Model extends ResourceModel> = {
     path: string[];
     labelWidth?: string;
     col?: number;
-    render?: (val: unknown, record: Model, field: ShowField<Model>) => React.ReactElement | undefined;
-    renderContent?: (val: unknown, record: Model, field: ShowField<Model>) => React.ReactElement | undefined;
+    render?: (val: unknown, record: Model, field: ShowField<Model>) => React.ReactNode | undefined;
+    renderContent?: (val: unknown, record: Model, field: ShowField<Model>) => React.ReactNode | undefined;
 };
 export declare enum AreaType {
     Inline = "Inline",
@@ -32,19 +34,23 @@ export interface ShowConfig<Model extends ResourceModel = ResourceModel> {
 }
 export declare const ImageField: <Model extends WorkloadBaseModel>(i18n: I18nType) => ShowField<Model>;
 export declare const ReplicaField: <Model extends WorkloadModel>() => ShowField<Model>;
-export declare const ConditionsField: <Model extends ResourceModel<import("k8s-api-provider").Unstructured>>() => ShowField<Model>;
+export declare const ConditionsField: <Model extends ResourceModel<Unstructured>>() => ShowField<Model>;
 export declare const PodsField: <Model extends WorkloadBaseModel>() => ShowField<Model>;
 export declare const JobsField: <Model extends JobModel | CronJobModel>() => ShowField<Model>;
-export declare const DataField: <Model extends ResourceModel<import("k8s-api-provider").Unstructured>>() => ShowField<Model>;
-export declare const SecretDataField: <Model extends ResourceModel<import("k8s-api-provider").Unstructured>>() => ShowField<Model>;
+export declare const DataField: <Model extends ResourceModel<Unstructured>>() => ShowField<Model>;
+export declare const SecretDataField: <Model extends ResourceModel<Unstructured>>() => ShowField<Model>;
 export declare const StartTimeField: (i18n: I18nType) => ShowField<JobModel>;
 export declare const ServiceTypeField: <Model extends ServiceModel>(i18n: I18nType) => ShowField<Model>;
 export declare const ClusterIpField: <Model extends ServiceModel>(i18n: I18nType) => ShowField<Model>;
 export declare const SessionAffinityField: <Model extends ServiceModel>(i18n: I18nType) => ShowField<Model>;
-export declare const ServicePodsField: <Model extends ResourceModel<import("k8s-api-provider").Unstructured>>() => ShowField<Model>;
+export declare const ServicePodsField: <Model extends ResourceModel<Unstructured>>() => ShowField<Model>;
 export declare const IngressRulesTableTabField: <Model extends IngressModel>() => ShowField<Model>;
-export declare const EventsTableTabField: <Model extends ResourceModel<import("k8s-api-provider").Unstructured>>() => ShowField<Model>;
-export declare const NamespaceField: <Model extends ResourceModel<import("k8s-api-provider").Unstructured>>(i18n: I18nType) => ShowField<Model>;
-export declare const AgeField: <Model extends ResourceModel<import("k8s-api-provider").Unstructured>>(i18n: I18nType) => ShowField<Model>;
-export declare const LabelsField: <Model extends ResourceModel<import("k8s-api-provider").Unstructured>>(i18n: I18nType) => ShowField<Model>;
-export declare const AnnotationsField: <Model extends ResourceModel<import("k8s-api-provider").Unstructured>>(i18n: I18nType) => ShowField<Model>;
+export declare const EventsTableTabField: <Model extends ResourceModel<Unstructured>>() => ShowField<Model>;
+export declare const NamespaceField: <Model extends ResourceModel<Unstructured>>(i18n: I18nType) => ShowField<Model>;
+export declare const AgeField: <Model extends ResourceModel<Unstructured>>(i18n: I18nType) => ShowField<Model>;
+export declare const LabelsField: <Model extends ResourceModel<Unstructured>>(i18n: I18nType) => ShowField<Model>;
+export declare const AnnotationsField: <Model extends ResourceModel<Unstructured>>(i18n: I18nType) => ShowField<Model>;
+export declare const ServiceInnerClusterAccessField: <Model extends ServiceModel>(i18n: I18nType) => ShowField<Model>;
+export declare const ServiceOutClusterAccessField: <Model extends ServiceModel>(i18n: I18nType, clusterVip: string) => ShowField<Model>;
+export declare const PodSelectorField: <Model extends ResourceModel<Required<Unstructured & import("kubernetes-types/core/v1").Service> | (NetworkPolicy & Unstructured)>>() => ShowField<Model>;
+export declare const PortsTableField: <Model extends ServiceModel>() => ShowField<Model>;