@dovetail-v2/refine 0.0.31 → 0.0.32

package/lib/src/hooks/useEagleForm.js

@@ -1,177 +0,0 @@
-import { useUIKit } from '@cloudtower/eagle';
-import { useForm as useFormCore, useWarnAboutChange, pickNotDeprecated, useResource, } from '@refinedev/core';
-import yaml from 'js-yaml';
-import React, { useRef, useState, useMemo } from 'react';
-import useK8sYamlEditor from 'src/hooks/useK8sYamlEditor';
-import { useSchema } from 'src/hooks/useSchema';
-import { pruneBeforeEdit } from 'src/utils/k8s';
-import { generateYamlBySchema } from 'src/utils/yaml';
-import { useForm as useFormSF } from 'sunflower-antd';
-import { useD2Translation } from '../i18n';
-import { useGlobalStore } from './useGlobalStore';
-const useEagleForm = ({ action, resource, onMutationSuccess: onMutationSuccessProp, onMutationError, submitOnEnter = false, warnWhenUnsavedChanges: warnWhenUnsavedChangesProp, redirect, successNotification, errorNotification, meta, metaData, queryMeta, mutationMeta, liveMode, liveParams, mutationMode, dataProviderName, onLiveEvent, invalidates, undoableTimeout, queryOptions, createMutationOptions, updateMutationOptions, id: idFromProps, overtimeOptions, editorOptions, initialValuesForCreate, } = {}) => {
-    const editor = useRef(null);
-    const isFoldRef = useRef(false);
-    const { t } = useD2Translation();
-    const [enableEditor, setEnableEditor] = useState(false);
-    const [isYamlValid, setIsYamlValid] = useState(true);
-    const [isSchemaValid, setIsSchemaValid] = useState(true);
-    const [editorErrors, setEditorErrors] = useState([]);
-    const [errorResponseBody, setErrorResponseBody] = useState(null);
-    const useResourceResult = useResource();
-    const { globalStore } = useGlobalStore();
-    const kit = useUIKit();
-    const { schema, loading: isLoadingSchema, error: loadSchemaError, fetchSchema, } = useSchema({
-        skip: editorOptions?.isSkipSchema,
-    });
-    const [formAnt] = kit.form.useForm();
-    const formSF = useFormSF({
-        form: formAnt,
-    });
-    const { form } = formSF;
-    const { fold } = useK8sYamlEditor();
-    const useFormCoreResult = useFormCore({
-        onMutationSuccess: onMutationSuccessProp ? onMutationSuccessProp : undefined,
-        onMutationError,
-        redirect,
-        action,
-        resource,
-        successNotification,
-        errorNotification,
-        meta: pickNotDeprecated(meta, metaData),
-        metaData: pickNotDeprecated(meta, metaData),
-        queryMeta,
-        mutationMeta,
-        liveMode,
-        liveParams,
-        mutationMode,
-        dataProviderName,
-        onLiveEvent,
-        invalidates,
-        undoableTimeout,
-        queryOptions,
-        createMutationOptions,
-        updateMutationOptions,
-        id: idFromProps,
-        overtimeOptions,
-    });
-    const { formLoading, onFinish, queryResult, id } = useFormCoreResult;
-    const { warnWhenUnsavedChanges: warnWhenUnsavedChangesRefine, setWarnWhen } = useWarnAboutChange();
-    const warnWhenUnsavedChanges = warnWhenUnsavedChangesProp ?? warnWhenUnsavedChangesRefine;
-    const initialValues = useMemo(() => {
-        const initialValues = queryResult?.data?.data
-            ? globalStore?.restoreItem(queryResult.data.data)
-            : initialValuesForCreate;
-        if (initialValues) {
-            pruneBeforeEdit(initialValues);
-        }
-        return initialValues;
-    }, [queryResult, globalStore, initialValuesForCreate]);
-    // Init the editor after the resource value is fetched
-    React.useEffect(() => {
-        form.resetFields();
-        if (editor.current) {
-            const editorValue = yaml.dump(initialValues);
-            const editorInstance = editor.current.getEditorInstance();
-            editor.current.setEditorValue(editorValue);
-            editor.current.setValue(editorValue);
-            if (queryResult?.data?.data && editorInstance && !isFoldRef.current) {
-                fold(editorInstance);
-                isFoldRef.current = true;
-            }
-        }
-    }, [initialValues, queryResult?.data?.data, id, form, fold]);
-    React.useEffect(() => {
-        const response = useFormCoreResult.mutationResult.error?.response;
-        if (response && !response?.bodyUsed) {
-            response.json?.().then((body) => {
-                setErrorResponseBody(body);
-            });
-        }
-    }, [useFormCoreResult.mutationResult]);
-    const onKeyUp = (event) => {
-        if (submitOnEnter && event.key === 'Enter') {
-            form.submit();
-        }
-    };
-    const onValuesChange = (changeValues) => {
-        if (changeValues && warnWhenUnsavedChanges) {
-            setWarnWhen(true);
-        }
-        return changeValues;
-    };
-    const saveButtonProps = useMemo(() => ({
-        loading: formLoading,
-        onClick: () => {
-            form.submit();
-        },
-    }), [formLoading, form]);
-    const editorProps = useMemo(() => ({
-        ref: editor,
-        defaultValue: schema && editorOptions?.isGenerateAnnotations
-            ? generateYamlBySchema(initialValues || {}, schema)
-            : yaml.dump(initialValues),
-        schema: schema,
-        id: useResourceResult.resource?.name || '',
-        errorMsgs: editorErrors,
-        onValidate(yamlValid, schemaValid) {
-            setIsYamlValid(yamlValid);
-            setIsSchemaValid(schemaValid);
-            if (yamlValid && schemaValid) {
-                setEditorErrors([]);
-            }
-        },
-        onEditorCreate(editor) {
-            if (queryResult?.data?.data && !isFoldRef.current) {
-                fold(editor);
-                isFoldRef.current = true;
-            }
-        },
-    }), [editorErrors, editorOptions, fold, initialValues, queryResult?.data?.data, schema, useResourceResult.resource?.name]);
-    return {
-        form: formSF.form,
-        formProps: {
-            ...formSF.formProps,
-            onFinish: values => {
-                const errors = [
-                    !isYamlValid ? t('dovetail.yaml_format_wrong') : '',
-                    !isSchemaValid ? t('dovetail.yaml_value_wrong') : '',
-                ].filter(error => !!error);
-                if (errors.length) {
-                    setEditorErrors(errors);
-                    return;
-                }
-                const finalValues = editor.current
-                    ? yaml.load(editor.current?.getEditorValue() || '')
-                    : values;
-                return onFinish(finalValues);
-            },
-            onKeyUp,
-            onValuesChange,
-            initialValues,
-        },
-        saveButtonProps,
-        ...useFormCoreResult,
-        editorProps,
-        enableEditor,
-        errorResponseBody,
-        schema,
-        isLoadingSchema,
-        loadSchemaError,
-        fetchSchema,
-        switchEditor() {
-            if (enableEditor && editor.current?.getEditorValue()) {
-                const value = yaml.load(editor.current?.getEditorValue());
-                form?.setFieldsValue(value);
-            }
-            setEnableEditor(!enableEditor);
-        },
-        onFinish: async (values) => {
-            const finalValues = enableEditor
-                ? yaml.load(editor.current?.getEditorValue() || '')
-                : values ?? formSF.form.getFieldsValue(true);
-            return await onFinish(finalValues);
-        },
-    };
-};
-export default useEagleForm;

package/lib/src/hooks/useEagleTable/columns.js

@@ -1,246 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useUIKit } from '@cloudtower/eagle';
-import { useGo, useNavigation, useParsed } from '@refinedev/core';
-import { get } from 'lodash';
-import { ResourceLink } from '../../components';
-import { ImageNames } from '../../components/ImageNames';
-import { IngressRulesComponent } from '../../components/IngressRulesComponent';
-import { ReferenceLink } from '../../components/ReferenceLink';
-import { StateTag } from '../../components/StateTag';
-import Time from '../../components/Time';
-import { elapsedTime } from '../../utils/time';
-const NameLink = props => {
-    const { name, id, resource } = props;
-    const kit = useUIKit();
-    const go = useGo();
-    const navigation = useNavigation();
-    const parsed = useParsed();
-    const resourceName = resource || parsed.resource?.name || '';
-    return (_jsx(kit.button, { type: "link", onClick: () => {
-            go({
-                to: navigation.showUrl(resourceName, ''),
-                query: {
-                    id,
-                },
-                options: {
-                    keepQuery: true,
-                },
-            });
-        }, children: name }));
-};
-export const CommonSorter = (dataIndex) => (a, b) => {
-    const valA = get(a, dataIndex);
-    const valB = get(b, dataIndex);
-    if (valA === valB)
-        return 0;
-    if (valA > valB)
-        return 1;
-    return -1;
-};
-export const NameColumnRenderer = (i18n, resource = '') => {
-    const dataIndex = ['metadata', 'name'];
-    return {
-        key: 'name',
-        display: true,
-        dataIndex,
-        title: i18n.t('dovetail.name'),
-        sortable: true,
-        sorter: CommonSorter(dataIndex),
-        render: (v, record) => {
-            return _jsx(NameLink, { name: v, id: record.id, resource: resource });
-        },
-    };
-};
-export const NameSpaceColumnRenderer = (i18n) => {
-    const dataIndex = ['metadata', 'namespace'];
-    return {
-        key: 'namespace',
-        display: true,
-        dataIndex,
-        title: i18n.t('dovetail.namespace'),
-        sortable: true,
-        sorter: CommonSorter(dataIndex),
-    };
-};
-export const StateDisplayColumnRenderer = (i18n) => {
-    const dataIndex = ['stateDisplay'];
-    return {
-        key: 'stateDisplay',
-        display: true,
-        dataIndex: dataIndex,
-        title: i18n.t('dovetail.state'),
-        sortable: true,
-        sorter: CommonSorter(dataIndex),
-        render: v => _jsx(StateTag, { state: v }),
-    };
-};
-export const WorkloadImageColumnRenderer = (i18n) => {
-    const dataIndex = ['imageNames'];
-    return {
-        key: 'image',
-        display: true,
-        dataIndex,
-        title: i18n.t('dovetail.image'),
-        sortable: true,
-        sorter: CommonSorter(dataIndex),
-        render(value, record) {
-            return _jsx(ImageNames, { value: record.imageNames });
-        },
-    };
-};
-export const WorkloadRestartsColumnRenderer = (i18n) => {
-    const dataIndex = ['restarts'];
-    return {
-        key: 'restarts',
-        display: true,
-        dataIndex,
-        title: i18n.t('dovetail.restarts'),
-        sortable: false,
-    };
-};
-export const ReplicasColumnRenderer = (i18n) => {
-    const dataIndex = ['status', 'replicas'];
-    return {
-        key: 'replicas',
-        display: true,
-        dataIndex,
-        title: i18n.t('dovetail.replicas'),
-        sortable: true,
-        sorter: CommonSorter(dataIndex),
-        render: (_, record) => {
-            return (_jsxs("span", { children: [record.readyReplicas, "/", record.replicas] }));
-        },
-    };
-};
-export const AgeColumnRenderer = (i18n) => {
-    const dataIndex = ['metadata', 'creationTimestamp'];
-    return {
-        key: 'creationTimestamp',
-        display: true,
-        dataIndex,
-        title: i18n.t('dovetail.created_time'),
-        sortable: true,
-        sorter: (a, b) => {
-            const valA = new Date(get(a, dataIndex));
-            const valB = new Date(get(b, dataIndex));
-            if (valA === valB)
-                return 0;
-            if (valA > valB)
-                return 1;
-            return -1;
-        },
-        render: (value) => {
-            return _jsx(Time, { date: new Date(value) });
-        },
-    };
-};
-export const NodeNameColumnRenderer = (i18n, options) => {
-    const dataIndex = ['spec', 'nodeName'];
-    return {
-        key: 'node',
-        display: true,
-        dataIndex,
-        title: i18n.t('dovetail.node_name'),
-        sortable: true,
-        sorter: CommonSorter(dataIndex),
-        ...options,
-    };
-};
-export const RestartCountColumnRenderer = (i18n) => {
-    const dataIndex = ['restartCount'];
-    return {
-        key: 'restartCount',
-        display: true,
-        dataIndex,
-        title: i18n.t('dovetail.restarts'),
-        sortable: true,
-        sorter: CommonSorter(dataIndex),
-    };
-};
-export const CompletionsCountColumnRenderer = (i18n) => {
-    const dataIndex = ['completionsDisplay'];
-    return {
-        key: 'completions',
-        display: true,
-        dataIndex,
-        title: i18n.t('completions'),
-        sortable: true,
-        sorter: CommonSorter(dataIndex),
-    };
-};
-export const DurationColumnRenderer = (i18n) => {
-    const dataIndex = ['duration'];
-    return {
-        key: 'duration',
-        display: true,
-        dataIndex,
-        title: i18n.t('dovetail.duration'),
-        sortable: true,
-        sorter: CommonSorter(dataIndex),
-        render: v => {
-            const i18nMap = {
-                sec: i18n.t('dovetail.sec'),
-                day: i18n.t('dovetail.day'),
-                min: i18n.t('dovetail.min'),
-                hr: i18n.t('dovetail.hr'),
-            };
-            return _jsx("span", { children: elapsedTime(v, i18nMap).label || '-' });
-        },
-    };
-};
-export const ServiceTypeColumnRenderer = (i18n) => {
-    const dataIndex = ['spec', 'type'];
-    return {
-        key: 'type',
-        title: i18n.t('dovetail.type'),
-        display: true,
-        dataIndex,
-        sortable: true,
-        sorter: CommonSorter(dataIndex),
-    };
-};
-export const PodWorkloadColumnRenderer = (i18n) => {
-    const dataIndex = ['metadata', 'ownerReferences'];
-    return {
-        key: 'type',
-        title: i18n.t('dovetail.workload'),
-        display: true,
-        dataIndex,
-        sortable: true,
-        sorter: CommonSorter(dataIndex),
-        render(value, record) {
-            return value.map(o => (_jsx(ReferenceLink, { ownerReference: o, namespace: record.metadata.namespace || 'default' }, o.name)));
-        },
-    };
-};
-export const IngressRulesColumnRenderer = (i18n) => {
-    const dataIndex = ['spec', 'rules'];
-    return {
-        key: 'type',
-        title: i18n.t('dovetail.rule'),
-        display: true,
-        dataIndex,
-        sortable: true,
-        sorter: CommonSorter(dataIndex),
-        render(_, record) {
-            return _jsx(IngressRulesComponent, { ingress: record });
-        },
-    };
-};
-export const IngressDefaultBackendColumnRenderer = (i18n) => {
-    const dataIndex = ['spec', 'defaultBackend'];
-    return {
-        key: 'defaultBackend',
-        display: true,
-        dataIndex,
-        title: i18n.t('dovetail.default_backend'),
-        sortable: true,
-        sorter: CommonSorter(['spec', 'defaultBackend']),
-        render: (defaultBackend, record) => {
-            if (!defaultBackend?.service?.name)
-                return _jsx("span", { children: "-" });
-            const divider = 'Default > ';
-            return (_jsxs("span", { children: [divider, _jsx(ResourceLink, { name: "services", namespace: record.metadata.namespace || 'default', resourceId: defaultBackend.service?.name || '' })] }));
-        },
-    };
-};

package/lib/src/hooks/useEagleTable/index.js

@@ -1,2 +0,0 @@
-export * from './columns';
-export * from './useEagleTable';

package/lib/src/hooks/useEagleTable/useEagleTable.js

@@ -1,63 +0,0 @@
-import { useTable, useResource } from '@refinedev/core';
-import { merge } from 'lodash-es';
-import { useCallback, useMemo, useState } from 'react';
-import K8sDropdown from '../../components/K8sDropdown';
-import { useNamespacesFilter, ALL_NS } from '../../components/NamespacesFilter';
-export var ColumnKeys;
-(function (ColumnKeys) {
-    ColumnKeys["age"] = "age";
-    ColumnKeys["name"] = "name";
-    ColumnKeys["namespace"] = "namespace";
-    ColumnKeys["phase"] = "phase";
-    ColumnKeys["replicas"] = "replicas";
-    ColumnKeys["deploymentImage"] = "deploymentImage";
-    ColumnKeys["podImage"] = "podImage";
-})(ColumnKeys || (ColumnKeys = {}));
-export const useEagleTable = (params) => {
-    const { columns, tableProps, formatter, Dropdown = K8sDropdown } = params;
-    const [selectedKeys, setSelectedKeys] = useState([]);
-    const [currentPage, setCurrentPage] = useState(tableProps?.currentPage || 1);
-    const { resource } = useResource();
-    const { value: nsFilter } = useNamespacesFilter();
-    const useTableParams = useMemo(() => {
-        // TODO: check whether resource can be namespaced
-        const mergedParams = merge(params.useTableParams, {
-            pagination: {
-                mode: 'off',
-            },
-            filters: {
-                permanent: [
-                    {
-                        field: 'metadata.namespace',
-                        operator: 'eq',
-                        value: nsFilter === ALL_NS ? null : nsFilter,
-                    },
-                ],
-            },
-        });
-        return mergedParams;
-    }, [params.useTableParams, nsFilter]);
-    const table = useTable(useTableParams);
-    const onPageChange = useCallback((page) => {
-        setCurrentPage(page);
-    }, [setCurrentPage]);
-    const data = table.tableQueryResult.data?.data;
-    const finalDataSource = formatter ? data?.map(formatter) : data;
-    const finalProps = {
-        tableKey: resource?.name || 'table',
-        loading: table.tableQueryResult.isLoading,
-        data: finalDataSource || [],
-        columns,
-        refetch: () => null,
-        error: false,
-        rowKey: 'id',
-        currentPage,
-        currentSize: tableProps?.currentSize || 5,
-        onPageChange: onPageChange,
-        onSelect: keys => {
-            setSelectedKeys(keys);
-        },
-        RowMenu: Dropdown
-    };
-    return { tableProps: finalProps, selectedKeys, ...table };
-};

package/lib/src/hooks/useEdit.js

@@ -1,19 +0,0 @@
-import { useGo, useNavigation, useParsed } from '@refinedev/core';
-import { useCallback } from 'react';
-export function useEdit() {
-    const { resource } = useParsed();
-    const go = useGo();
-    const navigation = useNavigation();
-    const edit = useCallback((id) => {
-        go({
-            to: navigation.editUrl(resource?.name || '', id),
-            query: {
-                id,
-            },
-            options: {
-                keepQuery: true,
-            },
-        });
-    }, [go, resource?.name]);
-    return { edit };
-}

package/lib/src/hooks/useGlobalStore.js

@@ -1,5 +0,0 @@
-import { useContext } from 'react';
-import GlobalStoreContext from '../contexts/global-store';
-export const useGlobalStore = () => {
-    return useContext(GlobalStoreContext);
-};

package/lib/src/hooks/useK8sYamlEditor.js

@@ -1,37 +0,0 @@
-import { useCallback } from 'react';
-function useK8sYamlEditor() {
-    const foldSymbol = useCallback(function (editor, symbol) {
-        const model = editor.getModel();
-        const matchs = model?.findMatches(symbol, false, false, false, '', false).filter(match => match.range.startColumn === 1) || [];
-        return new Promise(async (resolve, reject) => {
-            try {
-                for (const match of matchs) {
-                    const lineNumber = match.range.startLineNumber;
-                    editor.setPosition({ lineNumber, column: 1 });
-                    await editor.getAction('editor.fold').run();
-                }
-                resolve(null);
-            }
-            catch (e) {
-                reject(e);
-            }
-        });
-    }, []);
-    const fold = useCallback(async function (editor) {
-        await editor.getAction('editor.unfoldAll').run();
-        const symbols = [
-            '  annotations:',
-            '  managedFields:',
-            'status:',
-            '    kubectl.kubernetes.io/last-applied-configuration:'
-        ];
-        for (const symbol of symbols) {
-            await foldSymbol(editor, symbol);
-        }
-        editor.setScrollPosition({ scrollTop: 0 });
-    }, [foldSymbol]);
-    return {
-        fold,
-    };
-}
-export default useK8sYamlEditor;

package/lib/src/hooks/useOpenForm.js

@@ -1,43 +0,0 @@
-import { pushModal } from '@cloudtower/eagle';
-import { useResource, useGo, useNavigation, } from '@refinedev/core';
-import { useContext } from 'react';
-import FormModal from 'src/components/FormModal';
-import ConfigsContext from 'src/contexts/configs';
-import { useEdit } from 'src/hooks/useEdit';
-import { FormType } from 'src/types';
-import { getInitialValues } from 'src/utils/form';
-export function useOpenForm(options) {
-    const { resource } = useResource();
-    const configs = useContext(ConfigsContext);
-    const { edit } = useEdit();
-    const navigation = useNavigation();
-    const go = useGo();
-    return function openForm() {
-        if (resource?.name) {
-            const config = configs[resource.name];
-            if (config.formType === undefined || config.formType === FormType.MODAL) {
-                pushModal({
-                    component: config.FormModal || FormModal,
-                    props: {
-                        resource: resource.name,
-                        id: options?.id,
-                        formProps: {
-                            initialValues: getInitialValues(config),
-                        }
-                    }
-                });
-            }
-            else if (options?.id) {
-                edit(options.id);
-            }
-            else {
-                go({
-                    to: navigation.createUrl(resource.name),
-                    options: {
-                        keepQuery: true,
-                    },
-                });
-            }
-        }
-    };
-}

package/lib/src/hooks/useSchema.js

@@ -1,37 +0,0 @@
-import { useResource } from '@refinedev/core';
-import { useState, useEffect, useMemo, useCallback } from 'react';
-import OpenAPI from 'src/utils/openapi';
-export function useSchema(options) {
-    const [schema, setSchema] = useState(null);
-    const [loading, setLoading] = useState(false);
-    const [error, setError] = useState(null);
-    const useResourceResult = useResource();
-    const resource = options?.resource || useResourceResult.resource;
-    const openapi = useMemo(() => new OpenAPI(resource?.meta?.resourceBasePath), [resource?.meta?.resourceBasePath]);
-    const fetchSchema = useCallback(async () => {
-        setLoading(true);
-        setError(null);
-        try {
-            const schema = await openapi.findSchema(resource?.meta?.kind);
-            setSchema(schema || null);
-            setError(null);
-        }
-        catch (e) {
-            setError(e);
-        }
-        finally {
-            setLoading(false);
-        }
-    }, [resource, openapi]);
-    useEffect(() => {
-        if (options?.skip)
-            return;
-        fetchSchema();
-    }, [fetchSchema]);
-    return {
-        schema,
-        loading,
-        error,
-        fetchSchema,
-    };
-}

package/lib/src/hooks/useSubmitForm.js

@@ -1,42 +0,0 @@
-import { useState, useCallback } from 'react';
-import { getCommonErrors } from 'src/utils/error';
-import { useD2Translation } from '../i18n';
-export function useSubmitForm(options) {
-    const { formRef, onSubmitSuccess } = options;
-    const { i18n } = useD2Translation();
-    const [submitting, setSubmitting] = useState(false);
-    const [errorMsgs, setErrorMsgs] = useState([]);
-    const reset = useCallback(() => {
-        setSubmitting(false);
-        setErrorMsgs([]);
-    }, []);
-    const onSubmit = useCallback(async () => {
-        try {
-            setSubmitting(true);
-            await formRef.current?.submit();
-            onSubmitSuccess?.();
-            reset();
-        }
-        catch (error) {
-            if (error instanceof Object) {
-                if ('response' in error && error.response instanceof Response) {
-                    const response = error.response;
-                    const body = await response.json();
-                    setErrorMsgs(getCommonErrors(body, i18n));
-                }
-                else if ('message' in error && typeof error.message === 'string') {
-                    setErrorMsgs([error.message]);
-                }
-            }
-        }
-        finally {
-            setSubmitting(false);
-        }
-    }, [formRef, i18n, reset, onSubmitSuccess]);
-    return {
-        submitting,
-        errorMsgs,
-        reset,
-        onSubmit,
-    };
-}