@dovetail-v2/refine 0.0.63-pod-exec.0 → 0.0.64

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/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

@@ -2,13 +2,14 @@ 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';
+import { JobModel, ResourceModel, WorkloadModel, WorkloadBaseModel, CronJobModel, IngressModel, ServiceModel, StorageClassModel } from '../../models';
 export type ShowField<Model extends ResourceModel> = {
     key: string;
     title?: React.ReactNode;
     path: string[];
     labelWidth?: string;
     col?: number;
+    hidden?: boolean;
     render?: (val: unknown, record: Model, field: ShowField<Model>) => React.ReactNode | undefined;
     renderContent?: (val: unknown, record: Model, field: ShowField<Model>) => React.ReactNode | undefined;
 };
@@ -31,6 +32,8 @@ export type ShowTab<Model extends ResourceModel> = {
 };
 export interface ShowConfig<Model extends ResourceModel = ResourceModel> {
     tabs?: ShowTab<Model>[];
+    renderExtraButton?: (record: Model) => React.ReactNode;
+    hideEditYamlButton?: boolean;
 }
 export declare const ImageField: <Model extends WorkloadBaseModel>(i18n: I18nType) => ShowField<Model>;
 export declare const ReplicaField: <Model extends JobModel | WorkloadModel>() => ShowField<Model>;
@@ -55,3 +58,6 @@ export declare const ServiceOutClusterAccessField: <Model extends ServiceModel>(
 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>;
 export declare const DurationField: <Model extends JobModel | CronJobModel>(i18n: I18nType) => ShowField<Model>;
+export declare const StorageClassProvisionerField: <Model extends StorageClassModel>(i18n: I18nType) => ShowField<Model>;
+export declare const StorageClassFsTypeField: <Model extends StorageClassModel>(i18n: I18nType) => ShowField<Model>;
+export declare const StorageClassPvField: <Model extends StorageClassModel>() => ShowField<Model>;

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

@@ -0,0 +1,157 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ConditionsTable } from '../ConditionsTable';
+import { CronjobJobsTable } from '../CronjobJobsTable';
+import { EventsTable } from '../EventsTable';
+import { ImageNames } from '../ImageNames';
+import { IngressRulesTable } from '../IngressRulesTable';
+import { KeyValue } from '../KeyValue';
+import Time from '../Time';
+import { WorkloadPodsTable } from '../WorkloadPodsTable';
+import { WorkloadReplicas } from '../WorkloadReplicas';
+export const ImageField = (i18n) => {
+    return {
+        key: 'Image',
+        title: i18n.t('dovetail.image'),
+        path: ['imageNames'],
+        col: 12,
+        renderContent(value) {
+            return _jsx(ImageNames, { value: value });
+        },
+    };
+};
+export const ReplicaField = (i18n) => {
+    return {
+        key: 'Replicas',
+        title: i18n.t('dovetail.replicas'),
+        path: ['status', 'replicas'],
+        renderContent: (_, record, field) => {
+            return _jsx(WorkloadReplicas, { record: record, label: field.title, editable: true });
+        },
+    };
+};
+export const ConditionsField = (i18n) => {
+    return {
+        key: 'Conditions',
+        title: i18n.t('dovetail.condition'),
+        path: ['status', 'conditions'],
+        renderContent: value => {
+            return _jsx(ConditionsTable, { conditions: value });
+        },
+    };
+};
+export const PodsField = () => {
+    return {
+        key: 'pods',
+        title: 'Pods',
+        path: [],
+        renderContent: (_, record) => {
+            return (_jsx(WorkloadPodsTable, { selector: record.metadata.relations?.find(r => {
+                    return r.kind === 'Pod' && r.type === 'creates';
+                })?.selector, hideToolbar: true }));
+        },
+    };
+};
+export const JobsField = () => {
+    return {
+        key: 'jobs',
+        title: 'Jobs',
+        path: [],
+        renderContent: (_, record) => {
+            return (_jsx(CronjobJobsTable, { owner: {
+                    apiVersion: record.apiVersion || '',
+                    kind: record.kind || '',
+                    name: record.metadata?.name || '',
+                    namespace: record.metadata?.namespace || '',
+                    uid: record.metadata?.uid || '',
+                } }));
+        },
+    };
+};
+export const DataField = (i18n) => {
+    return {
+        key: 'data',
+        title: i18n.t('dovetail.data'),
+        path: ['data'],
+        renderContent: val => {
+            return _jsx(KeyValue, { value: val });
+        },
+    };
+};
+export const SecretDataField = (i18n) => {
+    return {
+        key: 'data',
+        title: i18n.t('dovetail.data'),
+        path: ['data'],
+        renderContent: val => {
+            const decodeVal = {};
+            for (const key in val) {
+                decodeVal[key] = atob(val[key]);
+            }
+            return _jsx(KeyValue, { value: decodeVal });
+        },
+    };
+};
+export const StartTimeField = (i18n) => {
+    return {
+        key: 'started',
+        title: i18n.t('dovetail.started'),
+        path: ['status', 'startTime'],
+        col: 12,
+        renderContent(value) {
+            return _jsx(Time, { date: value });
+        },
+    };
+};
+export const ServiceTypeField = (i18n) => {
+    return {
+        key: 'type',
+        title: i18n.t('dovetail.type'),
+        path: ['spec', 'type'],
+    };
+};
+export const ClusterIpField = (i18n) => {
+    return {
+        key: 'clusterIp',
+        title: i18n.t('dovetail.clusterIp'),
+        path: ['spec', 'clusterIP'],
+    };
+};
+export const SessionAffinityField = (i18n) => {
+    return {
+        key: 'clusterIp',
+        title: i18n.t('dovetail.sessionAffinity'),
+        path: ['spec', 'sessionAffinity'],
+    };
+};
+export const ServicePodsField = () => {
+    return {
+        key: 'pods',
+        title: 'Pods',
+        path: [],
+        renderContent: (_, record) => {
+            return (_jsx(WorkloadPodsTable, { selector: record.metadata.relations?.find(r => {
+                    return r.kind === 'Pod' && r.type === 'selects';
+                })?.selector }));
+        },
+    };
+};
+export const IngressRulesTableTabField = (i18n) => {
+    return {
+        key: 'rules',
+        title: i18n.t('dovetail.rule'),
+        path: ['spec', 'rules'],
+        renderContent: (_, record) => {
+            return _jsx(IngressRulesTable, { ingress: record });
+        },
+    };
+};
+export const EventsTableTabField = (i18n) => {
+    return {
+        key: 'event',
+        title: i18n.t('dovetail.event'),
+        path: [],
+        renderContent: () => {
+            return _jsx(EventsTable, {});
+        },
+    };
+};

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

@@ -1,7 +1,7 @@
 import { i18n as I18nType } from 'i18next';
 import { Unstructured } from 'k8s-api-provider';
 import { NetworkPolicy } from 'kubernetes-types/networking/v1';
-import { ResourceModel, WorkloadBaseModel, ServiceModel, JobModel, CronJobModel, PodModel, IngressModel } from 'src/models';
+import { ResourceModel, WorkloadBaseModel, ServiceModel, JobModel, CronJobModel, PodModel, IngressModel, StorageClassModel } from 'src/models';
 import { ShowField, ShowArea, ShowGroup } from './fields';
 export declare const BasicGroup: <Model extends ResourceModel<Unstructured>>(i18n: I18nType, { upAreas, downAreas, basicFields, }?: {
     upAreas?: ShowArea<Model>[] | undefined;
@@ -20,3 +20,4 @@ export declare const PortsGroup: <Model extends ServiceModel>(i18n: I18nType) =>
 export declare const DataGroup: <Model extends ResourceModel<Unstructured>>(i18n: I18nType) => ShowGroup<Model>;
 export declare const NetworkPolicyIngressRulesGroup: <Model extends ResourceModel<Unstructured>>(i18n: I18nType) => ShowGroup<Model>;
 export declare const NetworkPolicyEgressRulesGroup: <Model extends ResourceModel<Unstructured>>(i18n: I18nType) => ShowGroup<Model>;
+export declare const StorageClassPvGroup: <Model extends StorageClassModel>(i18n: I18nType) => ShowGroup<Model>;

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

@@ -0,0 +1,2 @@
+export * from './fields';
+export * from './ShowContent';

package/lib/src/components/StateTag/StateTag.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useUIKit } from '@cloudtower/eagle';
+import { WorkloadState } from '../../constants';
+import { useD2Translation } from '../../i18n';
+export const StateTag = ({ state = WorkloadState.UPDATEING, className }) => {
+    const kit = useUIKit();
+    const { t } = useD2Translation();
+    const colorMap = {
+        updating: 'blue',
+        ready: 'green',
+        completed: 'green',
+        failed: 'red',
+        suspended: 'gray',
+        running: 'blue',
+        succeeded: 'green',
+        unknown: 'gray',
+        terminating: 'gray',
+        pending: 'gray',
+        waiting: 'gray',
+    };
+    return _jsx(kit.tag, { className: className, color: colorMap[state], children: t(`dovetail.${state || 'updaing'}`) });
+};

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

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

package/lib/src/components/Table/ErrorContent.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { kitContext } from '@cloudtower/eagle';
+import { Typo } from '@cloudtower/eagle';
+import { cx, css } from '@linaria/core';
+import { useContext } from 'react';
+import { useD2Translation } from '../../i18n';
+export const ErrorWrapper = css `
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+`;
+export const ErrorContent = css `
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .title {
+    margin-bottom: 8px;
+    background-clip: text;
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-image: linear-gradient(211.41deg, #929dad 0%, #d3dbe3 100%);
+  }
+`;
+const WidgetErrorContent = props => {
+    const { refetch } = props;
+    const kit = useContext(kitContext);
+    const { t } = useD2Translation();
+    return (_jsx("div", { className: ErrorWrapper, style: props.style, children: _jsxs("div", { className: ErrorContent, children: [_jsx("p", { className: cx(Typo.Label.l1_regular_title, 'title'), children: props.errorText || t('dovetail.obtain_data_error') }), refetch ? (_jsx(kit.button, { type: "ordinary", onClick: e => {
+                        e.stopPropagation();
+                        refetch?.();
+                    }, children: t('dovetail.retry') })) : null] }) }));
+};
+export default WidgetErrorContent;

package/lib/src/components/Table/TableToolBar.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUIKit, Typo } from '@cloudtower/eagle';
+import { css, cx } from '@linaria/core';
+import { CreateButton } from '../CreateButton';
+import { DeleteManyButton } from '../DeleteManyButton';
+const ToolbarStyle = css `
+  justify-content: space-between;
+  width: 100%;
+  margin-bottom: 16px;
+`;
+export const TableToolBar = ({ title, selectedKeys, hideCreate }) => {
+    const kit = useUIKit();
+    return (_jsxs(kit.space, { className: cx(ToolbarStyle, 'table-toolbar'), children: [_jsx("span", { className: Typo.Display.d2_bold_title, children: title }), _jsxs(kit.space, { children: [selectedKeys.length > 0 ? _jsx(DeleteManyButton, { ids: selectedKeys }) : undefined, !hideCreate ? _jsx(CreateButton, {}) : null] })] }));
+};

package/lib/src/components/Table/TableWidgets.js

@@ -0,0 +1,28 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowChevronUp16BoldSecondaryIcon } from '@cloudtower/icons-react';
+import { cx } from '@linaria/core';
+import { styled } from '@linaria/react';
+export const ColumnTitle = props => {
+    const { title, sortOrder } = props;
+    return (_jsxs(_Fragment, { children: [title, _jsx(ArrowChevronUp16BoldSecondaryIcon, { className: cx('order-icon', sortOrder) })] }));
+};
+export const AuxiliaryLine = styled.div `
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  width: 1px;
+  background: $blue-60;
+  transform: translateX(-9999px);
+  z-index: 999;
+
+  &::before {
+    content: '';
+    position: absolute;
+    height: 34px;
+    width: 3px;
+    top: 0;
+    left: -1px;
+    background: $blue-60;
+  }
+`;

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

@@ -0,0 +1,69 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUIKit } from '@cloudtower/eagle';
+import { css, cx } from '@linaria/core';
+import { useMemo, useRef } from 'react';
+import { useD2Translation } from '../../i18n';
+import ErrorContent from './ErrorContent';
+import { AuxiliaryLine } from './TableWidgets';
+const TableContainerStyle = css `
+  width: 100%;
+  border-top: 1px solid rgba(211, 218, 235, 0.6);
+  display: flex;
+  flex-direction: column;
+
+  // use eagle's own pagination component, hide antd's
+  .ant-table-pagination {
+    display: none;
+  }
+
+  .table-container {
+    min-height: 0;
+  }
+`;
+function Table(props) {
+    const kit = useUIKit();
+    const { t } = useD2Translation();
+    const { loading, error, data: dataSource, rowKey, columns, scroll, currentPage, currentSize, RowMenu, refetch, onSelect, onPageChange, onSizeChange, } = props;
+    const auxiliaryLineRef = useRef(null);
+    const wrapperRef = useRef(null);
+    const pagination = useMemo(() => ({
+        current: currentPage,
+        pageSize: currentSize,
+        onChange: onPageChange,
+    }), [currentPage, currentSize, onPageChange]);
+    const finalColumns = useMemo(() => {
+        if (RowMenu) {
+            const actionColumn = {
+                key: '_action_',
+                display: true,
+                dataIndex: [],
+                title: '',
+                render: (_, record) => {
+                    return _jsx(RowMenu, { record: record });
+                },
+            };
+            return [
+                ...columns,
+                actionColumn
+            ];
+        }
+        return columns;
+    }, [columns, RowMenu]);
+    if (loading) {
+        return _jsx(kit.loading, {});
+    }
+    else if (error) {
+        return (_jsx(ErrorContent, { errorText: t('dovetail.retry_when_access_data_failed'), refetch: refetch, style: { padding: '15px 0' } }));
+    }
+    else if (dataSource.length === 0) {
+        return _jsx(ErrorContent, { errorText: t('dovetail.empty'), style: { padding: '15px 0' } });
+    }
+    return (_jsxs("div", { ref: wrapperRef, className: cx(TableContainerStyle, props.className, 'table-wrapper'), children: [_jsx(kit.table, { tableLayout: "fixed", rowSelection: onSelect
+                    ? {
+                        onChange: (keys, rows) => {
+                            onSelect?.(keys, rows);
+                        },
+                    }
+                    : undefined, columns: finalColumns, dataSource: dataSource, pagination: pagination, error: error, loading: loading, rowKey: rowKey, wrapper: wrapperRef, scroll: scroll }), _jsx(AuxiliaryLine, { ref: auxiliaryLineRef }), _jsx(kit.pagination, { current: currentPage, size: currentSize, count: dataSource.length, onChange: onPageChange, onSizeChange: onSizeChange })] }));
+}
+export default Table;

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useUIKit } from '@cloudtower/eagle';
+import { css } from '@linaria/core';
+const TagWrapper = css `
+  flex-wrap: wrap;
+  max-width: 100%;
+`;
+const TagStyle = css `
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+export const Tags = props => {
+    const { value } = props;
+    const kit = useUIKit();
+    if (!value) {
+        return _jsx("span", { children: "-" });
+    }
+    const tags = Object.keys(value).map(key => {
+        return (_jsx(kit.tag.SplitTag, { className: TagStyle, primaryContent: key, secondaryContent: value[key], title: `${key}:${value[key]}`, color: "gray" }, key));
+    });
+    return (_jsx(kit.space, { className: TagWrapper, size: 8, children: tags }));
+};

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

@@ -0,0 +1,14 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// TODO: use ui-kit
+import dayjs from 'dayjs';
+const Time = props => {
+    const { className, date, dateTemplate = 'YYYY-MM-DD', timeTemplate = 'HH:mm', plainText, } = props;
+    if (!date)
+        return _jsx(_Fragment, { children: "-" });
+    const time = dayjs(date);
+    if (plainText) {
+        return (_jsxs(_Fragment, { children: [dateTemplate !== null && time.format(dateTemplate), ' ', timeTemplate !== null && time.format(timeTemplate)] }));
+    }
+    return (_jsxs("span", { className: `time-wrapper ${className || ''}`, children: [dateTemplate !== null && (_jsxs("span", { className: "date", children: [" ", time.format(dateTemplate)] })), timeTemplate !== null && (_jsxs("span", { className: "time", children: [" ", time.format(timeTemplate)] }))] }));
+};
+export default Time;