@dovetail-v2/refine 0.0.57 → 0.0.59

package/lib/src/constants/k8s.js

@@ -0,0 +1,203 @@
+export const BASE_INIT_VALUE = {
+    metadata: {
+        name: '',
+        namespace: 'default',
+        annotations: {},
+        labels: {},
+    },
+};
+const DEFAULT_MATCH_LABEL = 'sks.user.kubesmart.smtx.io/app';
+const BASE_CONTAINER_INIT_VALUE = {
+    name: 'container-0',
+    imagePullPolicy: 'Always',
+    image: '',
+};
+const BASE_WORKLOAD_SPEC_INIT_VALUE = {
+    affinity: {},
+    imagePullSecrets: [],
+    initContainers: [],
+    volumes: [],
+};
+export const DEPLOYMENT_INIT_VALUE = {
+    apiVersion: 'apps/v1',
+    kind: 'Deployment',
+    ...BASE_INIT_VALUE,
+    spec: {
+        replicas: 1,
+        selector: {
+            matchLabels: {
+                [DEFAULT_MATCH_LABEL]: '',
+            },
+        },
+        template: {
+            metadata: {
+                labels: {
+                    [DEFAULT_MATCH_LABEL]: '',
+                },
+            },
+            spec: {
+                containers: [BASE_CONTAINER_INIT_VALUE],
+                restartPolicy: 'Always',
+                ...BASE_WORKLOAD_SPEC_INIT_VALUE,
+            },
+        },
+    },
+};
+export const CRONJOB_INIT_VALUE = {
+    apiVersion: 'batch/v1',
+    kind: 'CronJob',
+    ...BASE_INIT_VALUE,
+    spec: {
+        schedule: '',
+        jobTemplate: {
+            metadata: {
+                labels: {},
+            },
+            spec: {
+                template: {
+                    spec: {
+                        containers: [BASE_CONTAINER_INIT_VALUE],
+                        restartPolicy: 'Never',
+                        ...BASE_WORKLOAD_SPEC_INIT_VALUE,
+                    },
+                },
+            },
+        },
+    },
+};
+export const DAEMONSET_INIT_VALUE = {
+    apiVersion: 'apps/v1',
+    kind: 'DaemonSet',
+    ...BASE_INIT_VALUE,
+    spec: {
+        replicas: 1,
+        selector: {
+            matchLabels: {
+                [DEFAULT_MATCH_LABEL]: '',
+            },
+        },
+        template: {
+            metadata: {
+                labels: {
+                    [DEFAULT_MATCH_LABEL]: '',
+                },
+            },
+            spec: {
+                containers: [BASE_CONTAINER_INIT_VALUE],
+                restartPolicy: 'Always',
+                ...BASE_WORKLOAD_SPEC_INIT_VALUE,
+            },
+        },
+    },
+};
+export const JOB_INIT_VALUE = {
+    apiVersion: 'batch/v1',
+    kind: 'Job',
+    ...BASE_INIT_VALUE,
+    spec: {
+        replicas: 1,
+        selector: {
+            matchLabels: {},
+        },
+        template: {
+            metadata: {
+                labels: {},
+            },
+            spec: {
+                containers: [BASE_CONTAINER_INIT_VALUE],
+                restartPolicy: 'Never',
+                ...BASE_WORKLOAD_SPEC_INIT_VALUE,
+            },
+        },
+    },
+};
+export const STATEFULSET_INIT_VALUE = {
+    apiVersion: 'apps/v1',
+    kind: 'StatefulSet',
+    ...BASE_INIT_VALUE,
+    spec: {
+        replicas: 1,
+        selector: {
+            matchLabels: {
+                [DEFAULT_MATCH_LABEL]: '',
+            },
+        },
+        template: {
+            metadata: {
+                labels: {
+                    [DEFAULT_MATCH_LABEL]: '',
+                },
+            },
+            spec: {
+                containers: [BASE_CONTAINER_INIT_VALUE],
+                restartPolicy: 'Always',
+                ...BASE_WORKLOAD_SPEC_INIT_VALUE,
+            },
+        },
+    },
+};
+export const POD_INIT_VALUE = {
+    apiVersion: 'v1',
+    kind: 'Pod',
+    ...BASE_INIT_VALUE,
+    spec: {
+        containers: [BASE_CONTAINER_INIT_VALUE],
+    },
+};
+export const SERVICE_INIT_VALUE = {
+    apiVersion: 'v1',
+    kind: 'Service',
+    ...BASE_INIT_VALUE,
+    spec: {
+        selector: {},
+        clusterIP: null,
+        ports: [
+            {
+                name: '',
+                port: null,
+                protocol: 'TCP',
+                targetPort: null,
+            },
+        ],
+        sessionAffinity: 'None',
+        type: 'ClusterIP',
+    },
+};
+export const INGRESS_INIT_VALUE = {
+    apiVersion: 'networking.k8s.io/v1',
+    kind: 'Ingress',
+    ...BASE_INIT_VALUE,
+    spec: {
+        rules: [
+            {
+                host: 'example.com',
+                http: {
+                    paths: [
+                        {
+                            path: '/testpath',
+                            pathType: 'Prefix',
+                            backend: {
+                                service: {
+                                    name: 'test',
+                                    port: {
+                                        number: 80,
+                                    },
+                                },
+                            },
+                        },
+                    ],
+                },
+            },
+        ],
+    },
+};
+export const NETWORK_POLICY_INIT_VALUE = {
+    apiVersion: 'networking.k8s.io/v1',
+    kind: 'NetworkPolicy',
+    ...BASE_INIT_VALUE,
+    spec: {
+        podSelector: {},
+        policyTypes: [],
+    },
+};
+export const TIMESTAMP_LABEL = 'sks.user.kubesmart.smtx.io/timestamp';

package/lib/src/constants/state.js

@@ -0,0 +1,15 @@
+export var WorkloadState;
+(function (WorkloadState) {
+    WorkloadState["UPDATEING"] = "updating";
+    WorkloadState["READY"] = "ready";
+    WorkloadState["COMPLETED"] = "completed";
+    WorkloadState["FAILED"] = "failed";
+    WorkloadState["SUSPENDED"] = "suspended";
+    WorkloadState["RUNNING"] = "running";
+    WorkloadState["SUCCEEDED"] = "succeeded";
+    WorkloadState["UNKNOWN"] = "unknown";
+    WorkloadState["TERMINATING"] = "terminating";
+    WorkloadState["PENDING"] = "pending";
+    WorkloadState["WAITING"] = "waiting";
+})(WorkloadState || (WorkloadState = {}));
+// export type DeploymentState = WorkloadState.UPDATEING | WorkloadState.READY;

package/lib/src/contexts/component.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+const ComponentContext = createContext({});
+export default ComponentContext;

package/lib/src/contexts/configs.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+const ConfigsContext = createContext({});
+export default ConfigsContext;

package/lib/src/contexts/global-store.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+const GlobalStoreContext = createContext({});
+export default GlobalStoreContext;

package/lib/src/contexts/index.js

@@ -0,0 +1,3 @@
+export { default as ComponentContext } from './component';
+export { default as GlobalStoreContext } from './global-store';
+export { default as ConfigsContext } from './configs';

package/lib/src/hooks/index.js

@@ -0,0 +1,7 @@
+export * from './useEagleForm';
+export * from './useSchema';
+export * from './useDeleteModal';
+export * from './useEagleTable';
+export * from './useDownloadYAML';
+export * from './useEdit';
+export * from './useGlobalStore';

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

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

package/lib/src/hooks/useDeleteModal/useDeleteManyModal.js

@@ -0,0 +1,31 @@
+import { useDeleteMany } from '@refinedev/core';
+import { useState } from 'react';
+import { useD2Translation } from '../../i18n';
+export const useDeleteManyModal = (resource, ids) => {
+    const { mutate } = useDeleteMany();
+    const [visible, setVisible] = useState(false);
+    const { t } = useD2Translation();
+    const modalProps = {
+        title: t('dovetail.delete'),
+        okText: t('dovetail.delete'),
+        okButtonProps: {
+            danger: true,
+        },
+        cancelText: t('dovetail.cancel'),
+        children: t('dovetail.confirm_delete_text', {
+            target: ids,
+            interpolation: { escapeValue: false },
+        }),
+        onOk() {
+            mutate({
+                resource,
+                ids,
+            });
+            setVisible(false);
+        },
+        onCancel() {
+            setVisible(false);
+        },
+    };
+    return { modalProps, visible, setVisible };
+};

package/lib/src/hooks/useDeleteModal/useDeleteModal.js

@@ -0,0 +1,38 @@
+import { useDelete, useNavigation } from '@refinedev/core';
+import { useState } from 'react';
+import { useD2Translation } from '../../i18n';
+export const useDeleteModal = (resource) => {
+    const { mutate } = useDelete();
+    const [visible, setVisible] = useState(false);
+    const navigation = useNavigation();
+    const [id, setId] = useState('');
+    const { t } = useD2Translation();
+    const modalProps = {
+        title: t('dovetail.delete'),
+        okText: t('dovetail.delete'),
+        okButtonProps: {
+            danger: true,
+        },
+        cancelText: t('dovetail.cancel'),
+        children: t('dovetail.confirm_delete_text', {
+            target: id,
+            interpolation: { escapeValue: false },
+        }),
+        onOk() {
+            mutate({
+                resource,
+                id,
+            });
+            setVisible(false);
+            navigation.list(resource);
+        },
+        onCancel() {
+            setVisible(false);
+        },
+    };
+    function openDeleteConfirmModal(id) {
+        setId(id);
+        setVisible(true);
+    }
+    return { modalProps, visible, openDeleteConfirmModal };
+};

package/lib/src/hooks/useDownloadYAML.js

@@ -0,0 +1,10 @@
+import yaml from 'js-yaml';
+import { download } from '../utils/download';
+export function useDownloadYAML() {
+    return function (options) {
+        const { name, item } = options;
+        console.log('download', item);
+        const content = yaml.dump(item);
+        download(`${name}.yaml`, content);
+    };
+}

package/lib/src/hooks/useEagleForm.d.ts

@@ -20,7 +20,6 @@ export type UseFormProps<TQueryFnData extends BaseRecord = BaseRecord, TError ex
         isSkipSchema?: boolean;
     };
     initialValuesForCreate?: Record<string, unknown>;
-    transformValues?: (values: Record<string, unknown>) => Record<string, unknown>;
 };
 export type UseFormReturnType<TQueryFnData extends BaseRecord = BaseRecord, TError extends HttpError = HttpError, TVariables extends object = object, TData extends BaseRecord = TQueryFnData, TResponse extends BaseRecord = TData, TResponseError extends HttpError = TError> = UseFormReturnTypeCore<TQueryFnData, TError, TVariables, TData, TResponse, TResponseError> & {
     form: FormInstance;
@@ -44,5 +43,5 @@ declare const useEagleForm: <TQueryFnData extends Unstructured = Unstructured &
     [prop: string]: unknown;
 } = {
     [prop: string]: unknown;
-}, TData extends Unstructured = TQueryFnData, TResponse extends BaseRecord = TData, TResponseError extends HttpError = TError>({ action: actionFromProps, resource, onMutationSuccess: onMutationSuccessProp, onMutationError, submitOnEnter, warnWhenUnsavedChanges: warnWhenUnsavedChangesProp, redirect, successNotification, errorNotification, meta, metaData, queryMeta, mutationMeta, liveMode, liveParams, mutationMode, dataProviderName, onLiveEvent, invalidates, undoableTimeout, queryOptions, createMutationOptions, updateMutationOptions, id: idFromProps, overtimeOptions, editorOptions, initialValuesForCreate, transformValues, }?: UseFormProps<TQueryFnData, TError, TVariables, TData, TResponse, TResponseError>) => UseFormReturnType<TQueryFnData, TError, TVariables, TData, TResponse, TResponseError>;
+}, TData extends Unstructured = TQueryFnData, TResponse extends BaseRecord = TData, TResponseError extends HttpError = TError>({ action, resource, onMutationSuccess: onMutationSuccessProp, onMutationError, submitOnEnter, warnWhenUnsavedChanges: warnWhenUnsavedChangesProp, redirect, successNotification, errorNotification, meta, metaData, queryMeta, mutationMeta, liveMode, liveParams, mutationMode, dataProviderName, onLiveEvent, invalidates, undoableTimeout, queryOptions, createMutationOptions, updateMutationOptions, id: idFromProps, overtimeOptions, editorOptions, initialValuesForCreate, }?: UseFormProps<TQueryFnData, TError, TVariables, TData, TResponse, TResponseError>) => UseFormReturnType<TQueryFnData, TError, TVariables, TData, TResponse, TResponseError>;
 export default useEagleForm;

package/lib/src/hooks/useEagleForm.js

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