@dovetail-v2/refine 0.1.0 → 0.1.2

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

@@ -1,157 +0,0 @@
-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/index.js

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

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

@@ -1,22 +0,0 @@
-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

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

package/lib/src/components/Table/ErrorContent.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-export declare const ErrorWrapper: import("@linaria/core").LinariaClassName;
-export declare const ErrorContent: import("@linaria/core").LinariaClassName;
-export type WidgetErrorContentProps = {
-    errorText?: string;
-    style?: React.CSSProperties;
-    refetch?: () => void;
-};
-declare const WidgetErrorContent: React.FunctionComponent<WidgetErrorContentProps>;
-export default WidgetErrorContent;

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

@@ -1,36 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,69 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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;

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

@@ -1,24 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Icon, useUIKit } from '@cloudtower/eagle';
-import { DynamicResourceSchedule16BlueIcon } from '@cloudtower/icons-react';
-import { useResource, useUpdate } from '@refinedev/core';
-import { useD2Translation } from '../../i18n';
-import { pruneBeforeEdit } from '../../utils/k8s';
-import K8sDropdown from '../K8sDropdown';
-export function WorkloadDropdown(props) {
-    const { record } = props;
-    const kit = useUIKit();
-    const { resource } = useResource();
-    const { mutate } = useUpdate();
-    const { t } = useD2Translation();
-    return (_jsx(K8sDropdown, { record: record, children: _jsx(kit.menu.Item, { onClick: () => {
-                const v = record.redeploy();
-                const id = v.id;
-                pruneBeforeEdit(v);
-                mutate({
-                    id,
-                    resource: resource?.name || '',
-                    values: v,
-                });
-            }, children: _jsx(Icon, { src: DynamicResourceSchedule16BlueIcon, children: t('dovetail.redeploy') }) }) }));
-}

package/lib/src/components/WorkloadPodsTable/WorkloadPodsTable.js

@@ -1,39 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useUIKit } from '@cloudtower/eagle';
-import { css } from '@linaria/core';
-import { useList } from '@refinedev/core';
-import { useMemo, useState } from 'react';
-import { matchSelector } from 'src/utils/match-selector';
-import { NameColumnRenderer, NodeNameColumnRenderer, RestartCountColumnRenderer, StateDisplayColumnRenderer, WorkloadImageColumnRenderer, } from '../../hooks/useEagleTable/columns';
-import { useD2Translation } from '../../i18n';
-import Table from '../Table';
-import { TableToolBar } from '../Table/TableToolBar';
-export const WorkloadPodsTable = ({ selector, hideToolbar, }) => {
-    const { i18n } = useD2Translation();
-    const kit = useUIKit();
-    const [selectedKeys, setSelectedKeys] = useState([]);
-    const [currentPage, setCurrentPage] = useState(1);
-    const { data } = useList({
-        resource: 'pods',
-        meta: { resourceBasePath: '/api/v1', kind: 'Pod' },
-        pagination: {
-            mode: 'off',
-        },
-    });
-    const dataSource = useMemo(() => {
-        return data?.data.filter(p => {
-            return selector ? matchSelector(p, selector) : true;
-        });
-    }, [data?.data, selector]);
-    const columns = [
-        StateDisplayColumnRenderer(i18n),
-        NameColumnRenderer(i18n, 'pods'),
-        NodeNameColumnRenderer(i18n),
-        WorkloadImageColumnRenderer(i18n),
-        RestartCountColumnRenderer(i18n),
-    ];
-    return (_jsxs(kit.space, { direction: "vertical", className: css `
-        width: 100%;
-        vertical-align: top;
-      `, children: [hideToolbar ? null : (_jsx(TableToolBar, { title: "", selectedKeys: selectedKeys, hideCreate: true })), _jsx(Table, { tableKey: "pods", loading: !dataSource, data: dataSource || [], columns: columns, onSelect: keys => setSelectedKeys(keys), rowKey: "id", error: false, currentPage: currentPage, onPageChange: p => setCurrentPage(p), currentSize: 10, refetch: () => null })] }));
-};

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

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

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

@@ -1,50 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/* eslint-disable @typescript-eslint/no-empty-function */
-import { useUIKit } from '@cloudtower/eagle';
-import { useResource, useUpdate } from '@refinedev/core';
-import { get } from 'lodash-es';
-import React, { useState, useCallback, useImperativeHandle, useRef } from 'react';
-import { EditField } from 'src/components/EditField';
-import { pruneBeforeEdit } from '../../utils/k8s';
-const WorkloadReplicasForm = React.forwardRef(function WorkloadReplicasForm(props, ref) {
-    const { defaultValue, record, label } = props;
-    const kit = useUIKit();
-    const { resource } = useResource();
-    const { mutateAsync } = useUpdate();
-    const [replicas, setReplicas] = useState(defaultValue);
-    const submit = useCallback(() => {
-        const v = record.scale(replicas);
-        const id = record.id;
-        pruneBeforeEdit(v);
-        return mutateAsync({
-            id,
-            resource: resource?.name || '',
-            values: v,
-        });
-    }, [record, replicas, resource?.name, mutateAsync]);
-    useImperativeHandle(ref, () => ({
-        submit,
-    }), [submit]);
-    return (_jsx(kit.form.Item, { label: label, children: _jsx(kit.fields.Integer, { input: {
-                name: 'replicas',
-                value: replicas,
-                onChange: (value) => {
-                    setReplicas(Number(value));
-                },
-                onBlur: () => { },
-                onFocus: () => { },
-            }, meta: {}, controls: true }) }));
-});
-export function WorkloadReplicas({ record, label, editable }) {
-    const formRef = useRef(null);
-    const readyReplicas = record.status && 'readyReplicas' in record.status ? record.status.readyReplicas : 0;
-    const replicas = record.spec && 'replicas' in record.spec ? record.spec.replicas : 0;
-    const canScale = record.kind === 'Deployment' || record.kind === 'StatefulSet';
-    const currentReplicas = get(record, 'spec.replicas', 0);
-    return (_jsxs("span", { children: [readyReplicas, "/", replicas, editable && canScale && (_jsx(EditField, { modalProps: {
-                    formRef,
-                    renderContent() {
-                        return (_jsx(WorkloadReplicasForm, { ref: formRef, defaultValue: currentReplicas, record: record, label: label || '' }));
-                    }
-                } }))] }));
-}

package/lib/src/components/YamlEditor/MonacoYamlDiffEditor.js

@@ -1,34 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import * as monaco from 'monaco-editor';
-import { useEffect, useRef } from 'react';
-const MonacoYamlDiffEditor = props => {
-    const ref = useRef(null);
-    const { origin, modified, id, height } = props;
-    useEffect(() => {
-        const originalUri = id ? monaco.Uri.parse(`${id}_original.yaml`) : undefined;
-        const modifiedUri = id ? monaco.Uri.parse(`${id}_modified.yaml`) : undefined;
-        const originalModel = monaco.editor.createModel(origin, 'yaml', originalUri);
-        const modifiedModel = monaco.editor.createModel(modified, 'yaml', modifiedUri);
-        const diffEditor = monaco.editor.createDiffEditor(ref.current, {
-            renderSideBySide: true,
-            originalEditable: false,
-            readOnly: true,
-            ignoreTrimWhitespace: false,
-            scrollBeyondLastLine: false,
-        });
-        diffEditor.setModel({
-            original: originalModel,
-            modified: modifiedModel,
-        });
-        return () => {
-            diffEditor.dispose();
-            originalModel.dispose();
-            modifiedModel.dispose();
-        };
-    }, [modified, origin, id]);
-    return (_jsx("div", { ref: ref, style: {
-            width: '100%',
-            height: height || '500px',
-        } }));
-};
-export default MonacoYamlDiffEditor;