@dovetail-v2/refine 0.0.32 → 0.0.33

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

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

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

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

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

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

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

package/lib/src/hooks/useK8sYamlEditor.js

@@ -0,0 +1,37 @@
+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.d.ts

@@ -1,5 +1,8 @@
+/// <reference types="react" />
+import { YamlFormProps } from '../components';
 interface UseOpenFormOptions {
     id?: string;
+    renderForm?: (props: YamlFormProps) => React.ReactNode;
 }
 export declare function useOpenForm(options?: UseOpenFormOptions): () => void;
 export {};

package/lib/src/hooks/useOpenForm.js

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

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

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