@dovetail-v2/refine 0.0.49-alpha.0 → 0.0.50

package/lib/src/pages/pods/list/index.js

@@ -0,0 +1,81 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useList } from '@refinedev/core';
+import { compact } from 'lodash-es';
+import { useMemo } from 'react';
+import { ListPage } from '../../../components/ListPage';
+import { useEagleTable } from '../../../hooks/useEagleTable';
+import { AgeColumnRenderer, WorkloadImageColumnRenderer, NameColumnRenderer, NameSpaceColumnRenderer, CommonSorter, RestartCountColumnRenderer, NodeNameColumnRenderer, StateDisplayColumnRenderer, PodWorkloadColumnRenderer, } from '../../../hooks/useEagleTable/columns';
+import { useD2Translation } from '../../../i18n';
+export const PodList = () => {
+    const { i18n } = useD2Translation();
+    const { data: metricsData } = useList({
+        resource: 'podMetrics',
+        meta: {
+            resourceBasePath: '/apis/metrics.k8s.io/v1beta1',
+            kind: 'PodMetrics',
+            k8sResource: 'pods',
+        },
+    });
+    const metricsMap = useMemo(() => {
+        return (metricsData?.data || []).reduce((prev, cur) => {
+            prev[cur.id] = cur;
+            return prev;
+        }, {});
+    }, [metricsData]);
+    const supportMetrics = Boolean(metricsData);
+    const { tableProps, selectedKeys } = useEagleTable({
+        useTableParams: {},
+        columns: compact([
+            StateDisplayColumnRenderer(i18n),
+            NameColumnRenderer(i18n),
+            NameSpaceColumnRenderer(i18n),
+            WorkloadImageColumnRenderer(i18n),
+            {
+                key: 'readyDisplay',
+                display: true,
+                dataIndex: ['readyDisplay'],
+                title: 'Ready',
+                sortable: true,
+                sorter: CommonSorter(['readyDisplay']),
+            },
+            RestartCountColumnRenderer(i18n),
+            NodeNameColumnRenderer(i18n),
+            PodWorkloadColumnRenderer(i18n),
+            supportMetrics && {
+                key: 'memory_usage',
+                display: true,
+                dataIndex: ['spec'],
+                title: '内存',
+                sortable: false,
+                align: 'right',
+                render(value, record) {
+                    return metricsMap[record.id]?.usage.memory.si;
+                },
+            },
+            supportMetrics && {
+                key: 'cpu_usage',
+                display: true,
+                dataIndex: ['spec'],
+                title: 'CPU',
+                sortable: false,
+                align: 'right',
+                render(value, record) {
+                    return metricsMap[record.id]?.usage.cpu.si;
+                },
+            },
+            {
+                key: 'ip',
+                display: true,
+                dataIndex: ['status', 'podIP'],
+                title: 'IP',
+                sortable: true,
+                sorter: CommonSorter(['status', 'podIP']),
+            },
+            AgeColumnRenderer(i18n),
+        ]),
+        tableProps: {
+            currentSize: 10,
+        },
+    });
+    return _jsx(ListPage, { title: "Pod", selectedKeys: selectedKeys, tableProps: tableProps });
+};

package/lib/src/pages/pods/show/index.js

@@ -0,0 +1,54 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PodLog } from 'src/components/PodLog';
+import { PageShow } from '../../../components/PageShow';
+import { PodContainersTable } from '../../../components/PodContainersTable';
+import { ConditionsField } from '../../../components/ShowContent/fields';
+import { useD2Translation } from '../../../i18n';
+export const PodShow = () => {
+    const { i18n } = useD2Translation();
+    return (_jsx(PageShow, { showConfig: {
+            groups: [{
+                    fields: [
+                        {
+                            key: 'podIp',
+                            title: 'Pod IP',
+                            path: ['status', 'podIP'],
+                        },
+                        {
+                            key: 'Workload',
+                            title: i18n.t('dovetail.workload'),
+                            path: ['metadata', 'ownerReferences', '0', 'name'],
+                        },
+                        {
+                            key: 'Node',
+                            title: i18n.t('dovetail.node_name'),
+                            path: ['spec', 'nodeName'],
+                        },
+                        {
+                            key: 'readyDisplay',
+                            title: 'Ready',
+                            path: ['readyDisplay'],
+                        },
+                    ]
+                }],
+            tabs: [
+                {
+                    key: 'container',
+                    title: i18n.t('dovetail.container'),
+                    path: [],
+                    renderContent: (_, record) => {
+                        return (_jsx(PodContainersTable, { containerStatuses: record.status?.containerStatuses || [], initContainerStatuses: record.status?.initContainerStatuses || [] }));
+                    },
+                },
+                ConditionsField(i18n),
+                {
+                    key: 'log',
+                    title: i18n.t('dovetail.log'),
+                    path: [],
+                    renderContent: (_, record) => {
+                        return _jsx(PodLog, { pod: record });
+                    },
+                },
+            ],
+        } }));
+};

package/lib/src/pages/secrets/index.js

@@ -0,0 +1,15 @@
+import { SecretDataField } from '../../components/ShowContent';
+import { AgeColumnRenderer } from '../../hooks/useEagleTable/columns';
+import { RESOURCE_GROUP } from '../../types';
+export const SecretsConfig = (i18n) => ({
+    name: 'secrets',
+    kind: 'Secret',
+    basePath: '/api/v1',
+    apiVersion: 'v1',
+    parent: RESOURCE_GROUP.STORAGE,
+    label: 'Secrets',
+    columns: () => [AgeColumnRenderer(i18n)],
+    showConfig: () => ({
+        tabs: [SecretDataField(i18n)],
+    }),
+});

package/lib/src/pages/services/index.js

@@ -0,0 +1,26 @@
+import { ConditionsField, ServiceTypeField, ClusterIpField, SessionAffinityField, ServicePodsField, } from '../../components/ShowContent';
+import { SERVICE_INIT_VALUE } from '../../constants';
+import { AgeColumnRenderer, ServiceTypeColumnRenderer, } from '../../hooks/useEagleTable/columns';
+import { RESOURCE_GROUP } from '../../types';
+export const ServicesConfig = (i18n) => ({
+    name: 'services',
+    kind: 'Service',
+    basePath: '/api/v1',
+    apiVersion: 'v1',
+    label: 'Services',
+    parent: RESOURCE_GROUP.NETWORK,
+    columns: () => [ServiceTypeColumnRenderer(i18n), AgeColumnRenderer(i18n)],
+    showConfig: () => ({
+        groups: [
+            {
+                fields: [
+                    ServiceTypeField(i18n),
+                    ClusterIpField(i18n),
+                    SessionAffinityField(i18n),
+                ],
+            },
+        ],
+        tabs: [ServicePodsField(), ConditionsField(i18n)],
+    }),
+    initValue: SERVICE_INIT_VALUE,
+});

package/lib/src/pages/statefulsets/create/index.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import YamlForm from 'src/components/YamlForm';
+import { STATEFULSET_INIT_VALUE } from 'src/constants/k8s';
+export const StatefulSetForm = () => {
+    return _jsx(YamlForm, { initialValues: STATEFULSET_INIT_VALUE });
+};

package/lib/src/pages/statefulsets/index.js

@@ -0,0 +1,3 @@
+export * from './create';
+export * from './list';
+export * from './show';

package/lib/src/pages/statefulsets/list/index.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { ListPage } from 'src/components/ListPage';
+import { WorkloadDropdown } from 'src/components/WorkloadDropdown';
+import { useEagleTable } from 'src/hooks/useEagleTable';
+import { AgeColumnRenderer, WorkloadImageColumnRenderer, NameColumnRenderer, NameSpaceColumnRenderer, StateDisplayColumnRenderer, ReplicasColumnRenderer, WorkloadRestartsColumnRenderer, } from 'src/hooks/useEagleTable/columns';
+import { useD2Translation } from '../../../i18n';
+export const StatefulSetList = () => {
+    const { i18n } = useD2Translation();
+    const { tableProps, selectedKeys } = useEagleTable({
+        useTableParams: {},
+        columns: [
+            StateDisplayColumnRenderer(i18n),
+            NameColumnRenderer(i18n),
+            NameSpaceColumnRenderer(i18n),
+            WorkloadImageColumnRenderer(i18n),
+            WorkloadRestartsColumnRenderer(i18n),
+            ReplicasColumnRenderer(i18n),
+            AgeColumnRenderer(i18n),
+        ],
+        tableProps: {
+            currentSize: 10,
+        },
+        Dropdown: WorkloadDropdown,
+    });
+    return (_jsx(ListPage, { title: "StatefulSet", selectedKeys: selectedKeys, tableProps: tableProps }));
+};

package/lib/src/pages/statefulsets/show/index.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { WorkloadDropdown } from 'src/components/WorkloadDropdown';
+import { PageShow } from '../../../components/PageShow';
+import { ConditionsField, ImageField, PodsField, ReplicaField, } from '../../../components/ShowContent/fields';
+import { useD2Translation } from '../../../i18n';
+export const StatefulSetShow = () => {
+    const { i18n } = useD2Translation();
+    return (_jsx(PageShow, { showConfig: {
+            groups: [
+                {
+                    fields: [ImageField(i18n), ReplicaField(i18n)],
+                },
+            ],
+            tabs: [PodsField(), ConditionsField(i18n)],
+        }, Dropdown: WorkloadDropdown }));
+};

package/lib/src/plugins/index.js

@@ -0,0 +1,3 @@
+import { modelPlugin } from './model-plugin';
+import { relationPlugin } from './relation-plugin';
+export const ProviderPlugins = [relationPlugin, modelPlugin];

package/lib/src/plugins/model-plugin.js

@@ -0,0 +1,46 @@
+import { CronJobModel, DaemonSetModel, DeploymentModel, EventModel, IngressModel, JobModel, PodModel, ResourceModel, StatefulSetModel, NetworkPolicyModel, } from '../models';
+const ModelMap = {
+    Deployment: DeploymentModel,
+    DaemonSet: DaemonSetModel,
+    StatefulSet: StatefulSetModel,
+    CronJob: CronJobModel,
+    Job: JobModel,
+    Pod: PodModel,
+    Event: EventModel,
+    Ingress: IngressModel,
+    NetworkPolicy: NetworkPolicyModel,
+};
+class ModelPlugin {
+    _globalStore;
+    init(globalStore) {
+        this._globalStore = globalStore;
+    }
+    async processData(res) {
+        const { kind, apiVersion } = res;
+        const items = await Promise.all(res.items.map(item => {
+            const newItem = { ...item };
+            newItem.kind = kind.replace(/List$/g, '');
+            newItem.apiVersion = apiVersion;
+            return this.processItem(newItem);
+        }));
+        return {
+            ...res,
+            items,
+        };
+    }
+    async processItem(item) {
+        const Model = ModelMap[item.kind] || ResourceModel;
+        const result = new Model(item, this._globalStore);
+        await result.init();
+        return result;
+    }
+    restoreData(res) {
+        const newRes = { ...res };
+        newRes.items = res.items.map(item => this.restoreItem(item));
+        return res;
+    }
+    restoreItem(item) {
+        return item._rawYaml;
+    }
+}
+export const modelPlugin = new ModelPlugin();

package/lib/src/plugins/relation-plugin.js

@@ -0,0 +1,81 @@
+import { omit } from 'lodash';
+class RelationPlugin {
+    globalStore;
+    init(globalStore) {
+        this.globalStore = globalStore;
+    }
+    async processData(res) {
+        const { kind, apiVersion } = res;
+        const items = await Promise.all(res.items.map(item => this.processItem({
+            // TODO: unify this with data-provider getOne method
+            kind: kind.replace(/List$/g, ''),
+            apiVersion,
+            ...omit(item, ['apiVersion', 'kind']),
+        })));
+        return {
+            ...res,
+            items,
+        };
+    }
+    async processItem(item) {
+        this.processPodSelector(item);
+        return item;
+    }
+    restoreData(res) {
+        res.items = res.items.map(item => this.restoreItem(item));
+        return res;
+    }
+    restoreItem(item) {
+        return {
+            ...item,
+            metadata: omit(item.metadata, 'relations'),
+        };
+    }
+    processPodSelector(item) {
+        const { spec, kind } = item;
+        const selector = spec?.selector;
+        if (!selector) {
+            return item;
+        }
+        // TODO: also check apiVersion along with kind
+        if (!kind ||
+            ![
+                'Deployment',
+                'DaemonSet',
+                'StatefulSet',
+                'ReplicaSet',
+                'Job',
+                'Service',
+            ].includes(kind)) {
+            return item;
+        }
+        // empty selector or legacy resources like Service
+        if (!selector.matchLabels && !selector.matchExpressions) {
+            selector.matchLabels = {};
+            for (const key of Object.keys(selector)) {
+                if (key === 'matchLabels') {
+                    continue;
+                }
+                selector.matchLabels[key] = selector[key];
+                delete selector[key];
+            }
+        }
+        this.appendRelation(item, {
+            kind: 'Pod',
+            apiVersion: 'v1',
+            type: kind === 'Service' ? 'selects' : 'creates',
+            selector,
+            inbound: false,
+        });
+        return item;
+    }
+    appendRelation(item, relation) {
+        const metadata = item.metadata;
+        if (!metadata.relations) {
+            metadata.relations = [];
+        }
+        metadata.relations.push(relation);
+        return item;
+    }
+}
+export const relationPlugin = new RelationPlugin();

package/lib/src/plugins/type.js

@@ -0,0 +1 @@
+export {};

package/lib/src/providers/index.js

@@ -0,0 +1 @@
+export { routerProvider } from './router-provider';

package/lib/src/providers/router-provider/index.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+/* eslint-disable react-hooks/rules-of-hooks */
+import { matchResourceFromRoute, ResourceContext, } from '@refinedev/core';
+import { parse, stringify } from 'qs';
+import React from 'react';
+import { useCallback, useContext } from 'react';
+import { useHistory, useLocation, Link, matchPath, useParams } from 'react-router-dom';
+export const stringifyConfig = {
+    addQueryPrefix: true,
+    skipNulls: true,
+    arrayFormat: 'indices',
+    encode: false,
+    encodeValuesOnly: true,
+};
+export const convertToNumberIfPossible = (value) => {
+    if (typeof value === 'undefined') {
+        return value;
+    }
+    const num = Number(value);
+    if (`${num}` === value) {
+        return num;
+    }
+    return value;
+};
+export const routerProvider = {
+    go: () => {
+        const { search: existingSearch, hash: existingHash } = useLocation();
+        const history = useHistory();
+        const fn = useCallback(({ to, type, query, hash, options: { keepQuery, keepHash } = {} }) => {
+            /** Construct query params */
+            const urlQuery = {
+                ...(keepQuery &&
+                    existingSearch &&
+                    parse(existingSearch, { ignoreQueryPrefix: true })),
+                ...query,
+            };
+            if (urlQuery.to) {
+                urlQuery.to = encodeURIComponent(`${urlQuery.to}`);
+            }
+            const hasUrlQuery = Object.keys(urlQuery).length > 0;
+            /** Get hash */
+            const urlHash = `#${(hash || (keepHash && existingHash) || '').replace(/^#/, '')}`;
+            const hasUrlHash = urlHash.length > 1;
+            const urlTo = to || '';
+            const fullPath = `${urlTo}${hasUrlQuery ? stringify(urlQuery, stringifyConfig) : ''}${hasUrlHash ? urlHash : ''}`;
+            if (type === 'path') {
+                return fullPath;
+            }
+            /** Navigate to the url */
+            return history[type || 'push'](fullPath);
+        }, [existingHash, existingSearch, history]);
+        return fn;
+    },
+    back: () => {
+        const history = useHistory();
+        const fn = useCallback(() => {
+            history.go(-1);
+        }, [history]);
+        return fn;
+    },
+    parse: () => {
+        let params = useParams();
+        const { pathname, search } = useLocation();
+        const { resources } = useContext(ResourceContext);
+        const { resource, action, matchedRoute } = React.useMemo(() => {
+            return matchResourceFromRoute(pathname, resources);
+        }, [resources, pathname]);
+        // params is empty when useParams is used in a component that is not a child of a Route
+        if (Object.entries(params).length === 0 && matchedRoute) {
+            params = matchPath(matchedRoute, pathname)?.params || {};
+        }
+        const fn = useCallback(() => {
+            const parsedSearch = parse(search, { ignoreQueryPrefix: true });
+            const combinedParams = {
+                ...params,
+                ...parsedSearch,
+            };
+            const response = {
+                ...(resource && { resource }),
+                ...(action && { action }),
+                ...(parsedSearch?.id && { id: decodeURIComponent(parsedSearch.id) }),
+                // ...(params?.action && { action: params.action }), // lets see if there is a need for this
+                pathname,
+                params: {
+                    ...combinedParams,
+                    current: convertToNumberIfPossible(combinedParams.current),
+                    pageSize: convertToNumberIfPossible(combinedParams.pageSize),
+                    to: combinedParams.to
+                        ? decodeURIComponent(combinedParams.to)
+                        : undefined,
+                },
+            };
+            return response;
+        }, [pathname, search, params, resource, action]);
+        return fn;
+    },
+    Link: React.forwardRef(function RefineLink(props, ref) {
+        return _jsx(Link, { ...props, ref: ref });
+    }),
+};

package/lib/src/types/index.js

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

package/lib/src/types/resource.js

@@ -0,0 +1,12 @@
+export var RESOURCE_GROUP;
+(function (RESOURCE_GROUP) {
+    RESOURCE_GROUP["WORKLOAD"] = "WORKLOAD";
+    RESOURCE_GROUP["STORAGE"] = "STORAGE";
+    RESOURCE_GROUP["NETWORK"] = "NETWORK";
+    RESOURCE_GROUP["CLUSTER"] = "CLUSTER";
+})(RESOURCE_GROUP || (RESOURCE_GROUP = {}));
+export var FormType;
+(function (FormType) {
+    FormType["PAGE"] = "PAGE";
+    FormType["MODAL"] = "MODAL";
+})(FormType || (FormType = {}));

package/lib/src/utils/addId.js

@@ -0,0 +1,8 @@
+export function addId(arr, idKey) {
+    return arr.map(e => {
+        return {
+            id: e[idKey],
+            ...e,
+        };
+    });
+}

package/lib/src/utils/download.js

@@ -0,0 +1,9 @@
+export function download(filename, content) {
+    const element = document.createElement('a');
+    element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(content));
+    element.setAttribute('download', filename);
+    element.style.display = 'none';
+    document.body.appendChild(element);
+    element.click();
+    document.body.removeChild(element);
+}

package/lib/src/utils/error.js

@@ -0,0 +1,53 @@
+export function isNetworkError(errors) {
+    if (errors?.some(error => error?.code || error?.reason)) {
+        return false;
+    }
+    else {
+        return true;
+    }
+}
+export function getSubmitError(errorResponse, text, i18n) {
+    return !errorResponse ? i18n.t('dovetail.network_error') : text;
+}
+export function getCommonErrors(responseBody, i18n) {
+    if (!(responseBody?.message ||
+        responseBody?.code ||
+        responseBody?.reason ||
+        responseBody?.details ||
+        responseBody?.graphQLErrors)) {
+        return [];
+    }
+    const causes = responseBody.details?.causes || responseBody.graphQLErrors || [];
+    if (causes.length) {
+        return causes.map(cause => {
+            let params = {};
+            let message = cause.message;
+            try {
+                const info = JSON.parse(cause.message);
+                params = info.params;
+                message = info.message;
+            }
+            catch {
+                return i18n.t([
+                    `error.${cause.reason}`,
+                    `error.${cause.code}`,
+                    `${message}${cause.field ? `(${cause.field})` : ''}`,
+                ], {
+                    ...params,
+                    fallbackLng: '',
+                });
+            }
+            return i18n.t([
+                `error.${cause.reason}`,
+                `error.${cause.code}`,
+                `${message}${cause.field ? `(${cause.field})` : ''}`,
+            ], {
+                ...params,
+                fallbackLng: '',
+            });
+        });
+    }
+    return [
+        i18n.t([`error.${responseBody.code}`, `error.${responseBody.reason}`, responseBody.message || ''], { fallbackLng: '' }),
+    ];
+}

package/lib/src/utils/form.js

@@ -0,0 +1,9 @@
+import { BASE_INIT_VALUE } from 'src/constants/k8s';
+export function getInitialValues(config) {
+    return config.initValue || {
+        apiVersion: config.apiVersion,
+        kind: config.kind,
+        ...BASE_INIT_VALUE,
+        spec: {},
+    };
+}

package/lib/src/utils/k8s.js

@@ -0,0 +1,6 @@
+export function getApiVersion(resourceBasePath) {
+    return resourceBasePath.replace(/^(\/api\/)|(\/apis\/)/, '');
+}
+export function pruneBeforeEdit(v) {
+    delete v.id;
+}

package/lib/src/utils/labels.js

@@ -0,0 +1,15 @@
+export function toLabelStrings(labels = {}) {
+    return Object.keys(labels).map(key => `${key}/${labels[key]}`);
+}
+export function toLabelsArray(labels = {}) {
+    return Object.keys(labels).map(key => ({
+        key,
+        value: labels[key],
+    }));
+}
+export function toLabelsRecord(labels) {
+    return labels.reduce((prev, cur) => {
+        prev[cur.key] = cur.value;
+        return prev;
+    }, {});
+}

package/lib/src/utils/match-selector.js

@@ -0,0 +1,12 @@
+export function matchSelector(pod, selector) {
+    let match = true;
+    // TODO: support complete selector match strategy
+    // https://github.com/rancher/dashboard/blob/master/shell/utils/selector.js#L166
+    for (const key in selector.matchLabels) {
+        if (!pod.metadata?.labels?.[key] ||
+            pod.metadata.labels?.[key] !== selector.matchLabels[key]) {
+            match = false;
+        }
+    }
+    return match;
+}

package/lib/src/utils/openapi.js

@@ -0,0 +1,33 @@
+import { getApiVersion } from 'src/utils/k8s';
+import { resolveRef } from 'src/utils/schema';
+class K8sOpenAPI {
+    resourceBasePath;
+    response = null;
+    apiVersion;
+    constructor(resourceBasePath) {
+        this.resourceBasePath = resourceBasePath;
+        this.apiVersion = getApiVersion(resourceBasePath);
+    }
+    async fetch() {
+        const response = await fetch(`/api/sks/api/v1/clusters/sks-mgmt/proxy/openapi/v3${this.resourceBasePath}`);
+        return response.json();
+    }
+    async findSchema(kind) {
+        const result = this.response || (await this.fetch());
+        const schema = Object.values(result.components.schemas).find(schema => schema['x-kubernetes-group-version-kind']?.some(({ kind: schemaKind, version: schemaVersion, group: schemaGroup }) => kind === schemaKind &&
+            this.apiVersion === `${schemaGroup ? schemaGroup + '/' : ''}${schemaVersion}`));
+        if (schema) {
+            resolveRef(schema, result.components.schemas, {
+                prune: {
+                    description: true,
+                    optional: false,
+                    fields: [],
+                    metadata: true,
+                    xProperty: true,
+                },
+            });
+        }
+        return schema;
+    }
+}
+export default K8sOpenAPI;