@dovetail-v2/refine 0.0.58 → 0.0.59

package/lib/src/components/NetworkPolicyRulesTable/NetworkPolicyRulesTable.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { useUIKit } from '@cloudtower/eagle';
+import { flatten, get } from 'lodash-es';
+import { useMemo } from 'react';
+import { useD2Translation } from '../../i18n';
+import { addId } from '../../utils/addId';
+import ErrorContent from '../Table/ErrorContent';
+import { Tags } from '../Tags';
+export const NetworkPolicyRulesTable = ({ ingressOrEgress }) => {
+    const result = ingressOrEgress?.map((gress, i) => {
+        const peers = get(gress, 'from') || get(gress, 'to');
+        if (!peers)
+            return null;
+        return _jsx(IngressRuleTable, { peers: peers }, i);
+    });
+    return _jsx(_Fragment, { children: result });
+};
+const IngressRuleTable = ({ peers }) => {
+    const kit = useUIKit();
+    const { t } = useD2Translation();
+    const rows = useMemo(() => {
+        const rows = peers?.map(p => {
+            return Object.keys(p).map(key => {
+                return {
+                    type: key,
+                    ...p[key],
+                };
+            });
+        }) || [];
+        return addId(flatten(rows), 'type');
+    }, [peers]);
+    const columns = [
+        {
+            key: 'type',
+            display: true,
+            dataIndex: 'type',
+            title: t('dovetail.type'),
+            sortable: true,
+        },
+        {
+            key: 'cidr',
+            display: true,
+            dataIndex: 'cidr',
+            title: 'CIDR',
+            sortable: true,
+            render(v) {
+                return _jsx("span", { children: v || '-' });
+            },
+        },
+        {
+            key: 'except',
+            display: true,
+            dataIndex: 'except',
+            title: 'Except',
+            sortable: true,
+            render: (except) => {
+                if (!except)
+                    return '-';
+                return except?.map(str => _jsx("div", { children: str }, str));
+            },
+        },
+        {
+            key: 'matchLabels',
+            display: true,
+            dataIndex: 'matchLabels',
+            title: 'Match Labels',
+            sortable: true,
+            render(matchLabels) {
+                return _jsx(Tags, { value: matchLabels });
+            },
+        },
+    ];
+    if (rows.length === 0) {
+        return _jsx(ErrorContent, { errorText: t('dovetail.empty'), style: { padding: '15px 0' } });
+    }
+    return (_jsx(kit.table, { loading: false, dataSource: rows, columns: columns, rowKey: "type", empty: t('dovetail.empty') }));
+};

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

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

package/lib/src/components/PageShow/PageShow.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useUIKit } from '@cloudtower/eagle';
+import { useParsed, useShow } from '@refinedev/core';
+import { ShowContent } from '../ShowContent';
+export const PageShow = (props) => {
+    const kit = useUIKit();
+    const parsed = useParsed();
+    const { queryResult } = useShow({ id: parsed?.params?.id });
+    const { isLoading } = queryResult;
+    return isLoading ? _jsx(kit.loading, {}) : _jsx(ShowContent, { ...props });
+};

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

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

package/lib/src/components/PodContainersTable/PodContainersTable.js

@@ -0,0 +1,78 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon, useUIKit } from '@cloudtower/eagle';
+import { CheckmarkDoneSuccessCorrect16BoldGreenIcon, XmarkFailed16BoldRedIcon, } from '@cloudtower/icons-react';
+import { useMemo } from 'react';
+import { CommonSorter } from '../../hooks/useEagleTable/columns';
+import { useD2Translation } from '../../i18n';
+import { addId } from '../../utils/addId';
+import { StateTag } from '../StateTag';
+import Time from '../Time';
+export const PodContainersTable = ({ containerStatuses, initContainerStatuses, }) => {
+    const kit = useUIKit();
+    const { i18n } = useD2Translation();
+    const columns = useMemo(() => [
+        {
+            key: 'state',
+            dataIndex: ['state'],
+            title: i18n.t('dovetail.state'),
+            sortable: true,
+            sorter: CommonSorter(['state']),
+            render: v => _jsx(StateTag, { state: Object.keys(v)[0] }),
+        },
+        {
+            key: 'ready',
+            dataIndex: ['ready'],
+            title: i18n.t('dovetail.ready'),
+            sortable: true,
+            sorter: CommonSorter(['ready']),
+            render: v => (_jsx(Icon, { src: v ? CheckmarkDoneSuccessCorrect16BoldGreenIcon : XmarkFailed16BoldRedIcon })),
+        },
+        {
+            key: 'name',
+            dataIndex: ['name'],
+            title: i18n.t('dovetail.name'),
+            sortable: true,
+            sorter: CommonSorter(['name']),
+        },
+        {
+            key: 'image',
+            dataIndex: ['image'],
+            title: i18n.t('dovetail.image'),
+            sortable: true,
+            sorter: CommonSorter(['image']),
+        },
+        {
+            key: 'init',
+            dataIndex: [],
+            title: i18n.t('dovetail.init_container'),
+            render: (_, record) => {
+                const isInit = initContainerStatuses.some(c => c.containerID === record.containerID);
+                if (isInit) {
+                    return _jsx(Icon, { src: CheckmarkDoneSuccessCorrect16BoldGreenIcon });
+                }
+                return _jsx("span", { children: "-" });
+            },
+        },
+        {
+            key: 'restartCount',
+            dataIndex: ['restartCount'],
+            title: i18n.t('dovetail.restarts'),
+            sortable: true,
+            sorter: CommonSorter(['restartCount']),
+        },
+        {
+            key: 'started',
+            dataIndex: ['state', 'running', 'startedAt'],
+            title: i18n.t('dovetail.started'),
+            sortable: true,
+            sorter: CommonSorter(['state', 'running', 'startedAt']),
+            render: (value) => {
+                if (value)
+                    return _jsx(Time, { date: new Date(value) });
+                return _jsx("span", { children: "-" });
+            },
+        },
+    ], [i18n, initContainerStatuses]);
+    const dataSource = useMemo(() => addId(containerStatuses.concat(initContainerStatuses), 'containerID'), [containerStatuses, initContainerStatuses]);
+    return (_jsx(kit.table, { loading: false, dataSource: dataSource, columns: columns, rowKey: "containerID", error: false }));
+};

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

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

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

@@ -0,0 +1,136 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useUIKit } from '@cloudtower/eagle';
+import { Resume24Icon, SuspendedPause24GradientOrangeIcon, } from '@cloudtower/icons-react';
+import { css } from '@linaria/core';
+import { LogViewer } from '@patternfly/react-log-viewer';
+import { useDataProvider } from '@refinedev/core';
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useD2Translation } from '../../i18n';
+import '@patternfly/react-core/dist/styles/base-no-reset.css';
+const ToolbarStyle = css `
+  margin-bottom: 8px;
+  align-items: center;
+  display: flex;
+
+  > * {
+    margin-right: 8px !important;
+  }
+
+  .ant-select {
+    width: 256px !important;
+  }
+`;
+export const PodLog = ({ pod }) => {
+    const kit = useUIKit();
+    const [selectedContainer, setSelectedContainer] = useState(pod.spec?.containers[0]?.name || '');
+    // const [follow, setFollow] = useState(true);
+    const follow = true;
+    const [logs, setLogs] = useState([]);
+    const [currentItemCount, setCurrentItemCount] = useState(0);
+    const [paused, setPaused] = useState(false);
+    const [wrap, setWrap] = useState(false);
+    const [linesBehind, setLinesBehind] = useState(0);
+    const logViewerRef = useRef(null);
+    const abortControllerRef = useRef(null);
+    const dataProvider = useDataProvider();
+    const apiUrl = dataProvider()['getApiUrl']();
+    const { t } = useD2Translation();
+    useEffect(() => {
+        if (!paused && logs.length > 0) {
+            setCurrentItemCount(logs.length);
+            if (logViewerRef && logViewerRef.current) {
+                logViewerRef.current.scrollToBottom();
+            }
+        }
+        else if (logs.length !== currentItemCount) {
+            setLinesBehind(logs.length - currentItemCount);
+        }
+        else {
+            setLinesBehind(0);
+        }
+    }, [paused, logs, currentItemCount]);
+    const onScroll = (params) => {
+        const { scrollOffsetToBottom, scrollUpdateWasRequested } = params;
+        if (!scrollUpdateWasRequested) {
+            if (scrollOffsetToBottom > 0) {
+                setPaused(true);
+            }
+            else {
+                setPaused(false);
+            }
+        }
+    };
+    const fetchLogs = useCallback(() => {
+        if (!selectedContainer) {
+            return;
+        }
+        abortControllerRef.current = new AbortController();
+        const { signal } = abortControllerRef.current;
+        let url = `${apiUrl}/api/v1/namespaces/${pod.metadata?.namespace}/pods/${pod.metadata?.name}/log?container=${selectedContainer}&tailLines=100&timestamps=true`;
+        if (follow) {
+            url += '&follow=true';
+        }
+        fetch(url, { signal }).then(response => {
+            const reader = response.body?.getReader();
+            if (!reader) {
+                return;
+            }
+            const decoder = new TextDecoder();
+            let buffer = '';
+            const processChunk = ({ done, value }) => {
+                if (done) {
+                    return;
+                }
+                const chunk = decoder.decode(value);
+                const lastIndex = chunk.lastIndexOf('\n');
+                if (lastIndex === -1) {
+                    buffer += chunk;
+                }
+                const total = buffer + chunk.slice(0, lastIndex);
+                buffer = chunk.slice(lastIndex + 1);
+                const formattedLogs = total
+                    .split('\n')
+                    .filter(Boolean)
+                    .map(line => {
+                    const [timestamps, ...content] = line.split(' ');
+                    const t = new Date(timestamps).toLocaleString();
+                    if (t === 'Invalid Date') {
+                        return line;
+                    }
+                    return `${t} ${content.join(' ')}`;
+                })
+                    .join('\n');
+                // Update the logs state with the new chunk of data
+                setLogs(prevLogs => prevLogs.concat(formattedLogs.split('\n')));
+                // Continue reading the next chunk
+                reader.read().then(processChunk);
+            };
+            // Start reading the first chunk
+            reader.read().then(processChunk);
+        });
+    }, [follow, pod.metadata?.namespace, pod.metadata?.name, selectedContainer]);
+    const stopFetchingLogs = useCallback(() => {
+        if (abortControllerRef.current) {
+            abortControllerRef.current.abort();
+            abortControllerRef.current = null;
+        }
+    }, []);
+    useEffect(() => {
+        fetchLogs();
+        return () => {
+            stopFetchingLogs();
+        };
+    }, [fetchLogs, stopFetchingLogs]);
+    return (_jsxs("div", { children: [_jsxs("div", { className: ToolbarStyle, children: [_jsxs(kit.select, { input: {
+                            onChange: newValue => {
+                                stopFetchingLogs();
+                                setSelectedContainer(newValue);
+                                setLogs([]);
+                                setPaused(false);
+                                setLinesBehind(0);
+                            },
+                            value: selectedContainer,
+                        }, children: [_jsx(kit.option, { value: "", disabled: true, children: t('dovetail.select_container') }), (pod.spec?.containers || []).map(container => (_jsx(kit.option, { value: container.name, children: container.name }, container.name)))] }), _jsx(kit.checkbox, { checked: wrap, onChange: e => setWrap(e.target.checked), children: t('dovetail.wrap') }), _jsx(kit.button, { onClick: () => setPaused(prev => !prev), prefixIcon: paused ? _jsx(Resume24Icon, {}) : _jsx(SuspendedPause24GradientOrangeIcon, {}), children: paused ? t('dovetail.resume_log') : t('dovetail.suspend') })] }), _jsx(LogViewer, { innerRef: logViewerRef, hasLineNumbers: true, height: 300, data: logs, theme: "light", isTextWrapped: wrap, footer: paused && (_jsxs(kit.button, { type: "primary", style: {
+                        borderRadius: 0,
+                    }, onClick: () => setPaused(false), children: [t('dovetail.resume_log'), linesBehind === 0 ? null : t('dovetail.log_new_lines', { count: linesBehind })] })), onScroll: onScroll })] }));
+};

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useContext } from 'react';
+import { ConfigsContext } from '../../contexts';
+import { ResourceLink } from '../ResourceLink';
+export const ReferenceLink = props => {
+    const { ownerReference, namespace } = props;
+    const configs = useContext(ConfigsContext);
+    // no ReplicaSet page, show plain text
+    if (ownerReference.kind === 'ReplicaSet') {
+        return _jsx("span", { children: ownerReference.name });
+    }
+    const resource = Object.values(configs).find(c => c.kind === ownerReference.kind);
+    if (!resource) {
+        return _jsx("span", { children: "-" });
+    }
+    return (_jsx(ResourceLink, { resourceId: ownerReference.name, name: resource.name || '', namespace: namespace }));
+};

package/lib/src/components/RefineForm/RefineFormContent.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { Control } from 'react-hook-form';
+import { ResourceModel } from '../../models';
+import { ResourceConfig } from '../../types';
+type Props<Model extends ResourceModel> = {
+    config?: ResourceConfig<Model>;
+    control: Control;
+};
+export declare const RefineFormContent: <Model extends ResourceModel<import("k8s-api-provider").Unstructured>>(props: Props<Model>) => JSX.Element;
+export {};

package/lib/src/components/RefineForm/RefineFormModal.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { ResourceConfig } from '../../types';
+export type RefineFormModalProps = {
+    config: ResourceConfig;
+    id?: string;
+};
+export declare function RefineFormModal(props: RefineFormModalProps): JSX.Element;
+export default RefineFormModal;

package/lib/src/components/RefineForm/RefineFormPage.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ResourceConfig } from '../../types';
+type Props = {
+    config: ResourceConfig<any>;
+};
+export declare const RefineFormPage: (props: Props) => JSX.Element;
+export {};

package/lib/src/components/RefineForm/index.d.ts

@@ -0,0 +1,3 @@
+export * from './RefineFormPage';
+export * from './RefineFormModal';
+export * from './type';

package/lib/src/components/RefineForm/type.d.ts

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+export type RefineFormValidator = (value: unknown, formValue: unknown) => {
+    isValid: boolean;
+    errorMsg: string;
+};
+export type RefineFormField = {
+    path: string[];
+    key: string;
+    label: string;
+    type?: 'number';
+    validators?: RefineFormValidator[];
+    render?: React.FC<{
+        value: unknown;
+        onChange: (event: unknown) => void;
+        onBlur: () => void;
+    }>;
+};
+export type RefineFormConfig = {
+    fields: RefineFormField[];
+};

package/lib/src/components/RefineForm/useRefineForm.d.ts

@@ -0,0 +1,10 @@
+import { UseFormProps } from '@refinedev/core';
+import { ResourceConfig } from '../../types';
+export declare const useRefineForm: (props: {
+    config: ResourceConfig;
+    id?: string;
+    refineProps?: UseFormProps;
+}) => {
+    formResult: import("@refinedev/react-hook-form").UseFormReturnType<import("@refinedev/core").BaseRecord, import("@refinedev/core").HttpError, Record<string, unknown>, {}, import("@refinedev/core").BaseRecord, import("@refinedev/core").BaseRecord, import("@refinedev/core").HttpError>;
+    responseErrorMsg: string;
+};

package/lib/src/components/ResourceCRUD/ResourceCRUD.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { Route } from 'react-router-dom';
+import { FormType } from 'src/types';
+import { ResourceForm } from './create';
+import { ResourceList } from './list';
+import { ResourceShow } from './show';
+export function ResourceCRUD(props) {
+    const { configs, urlPrefix } = props;
+    return (_jsx(_Fragment, { children: configs.map(config => {
+            return (_jsxs(React.Fragment, { children: [_jsx(Route, { path: `${urlPrefix}/${config.name}`, exact: true, children: _jsx(ResourceList, { name: config.kind, formatter: config.formatter, columns: config.columns?.() || [], Dropdown: config.Dropdown }) }), _jsx(Route, { path: `${urlPrefix}/${config.name}/show`, children: _jsx(ResourceShow, { formatter: config.formatter, showConfig: config.showConfig?.() || {}, Dropdown: config.Dropdown }) }), 
+                    // the modals would render in ModalStack
+                    config.formType === FormType.PAGE ? (_jsxs(_Fragment, { children: [_jsx(Route, { path: `${urlPrefix}/${config.name}/create`, children: _jsx(ResourceForm, { config: config }) }), _jsx(Route, { path: `${urlPrefix}/${config.name}/edit`, children: _jsx(ResourceForm, { config: config }) })] })) : null] }, config.name));
+        }) }));
+}

package/lib/src/components/ResourceCRUD/create/index.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import YamlForm from 'src/components/YamlForm';
+import { getInitialValues } from 'src/utils/form';
+export function ResourceForm(props) {
+    const { config } = props;
+    const formProps = useMemo(() => {
+        return {
+            initialValues: getInitialValues(config),
+        };
+    }, [config]);
+    return (_jsx(YamlForm, { ...formProps }));
+}

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

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

package/lib/src/components/ResourceCRUD/list/index.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEagleTable } from '../../../hooks/useEagleTable';
+import { NameColumnRenderer } from '../../../hooks/useEagleTable/columns';
+import { useD2Translation } from '../../../i18n';
+import { ListPage } from '../../ListPage';
+export function ResourceList(props) {
+    const { formatter, name, columns, Dropdown } = props;
+    const { i18n } = useD2Translation();
+    const { tableProps, selectedKeys } = useEagleTable({
+        useTableParams: {},
+        columns: [NameColumnRenderer(i18n), ...columns],
+        tableProps: {
+            currentSize: 10,
+        },
+        formatter,
+        Dropdown,
+    });
+    return (_jsx(ListPage, { title: name || '', selectedKeys: selectedKeys, tableProps: tableProps }));
+}

package/lib/src/components/ResourceCRUD/show/index.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { PageShow } from '../../PageShow';
+export function ResourceShow(props) {
+    const { formatter, showConfig, Dropdown } = props;
+    return (_jsx(PageShow, { showConfig: showConfig, formatter: formatter, Dropdown: Dropdown }));
+}

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

@@ -0,0 +1,21 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useUIKit } from '@cloudtower/eagle';
+import { useGo, useNavigation } from '@refinedev/core';
+export const ResourceLink = props => {
+    const { name, namespace, resourceId } = props;
+    const kit = useUIKit();
+    const navigation = useNavigation();
+    const go = useGo();
+    const onClick = () => {
+        go({
+            to: navigation.showUrl(name, ''),
+            query: {
+                id: `${namespace}/${resourceId}`,
+            },
+            options: {
+                keepQuery: true,
+            },
+        });
+    };
+    return _jsx(kit.Link, { onClick: onClick, children: resourceId });
+};

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

@@ -0,0 +1,81 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { css, cx } from '@linaria/core';
+import { parseSi } from 'src/utils/unit';
+const WrapperStyle = css `
+  display: flex;
+  align-items: center;
+
+  .usage-text {
+    width: 50px;
+    text-align: right;
+  }
+
+  .usage-bar {
+    height: 12px;
+    width: 100px;
+    position: relative;
+    border-radius: 2px;
+  }
+
+  .request-anchor {
+    position: absolute;
+    left: 10%;
+    top: -3px;
+    height: 18px;
+    width: 2px;
+    background: #777;
+    z-index: 9;
+  }
+
+  .usage-fill-bar {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    background: rgba(0, 128, 255, 0.6);
+    z-index: 7;
+  }
+
+  .request-bar {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    background: #d8deeb;
+    z-index: 5;
+  }
+
+  .request-to-limit-bar {
+    position: absolute;
+    right: 0;
+    top: 0;
+    height: 100%;
+    background: #d8deeb;
+    z-index: 5;
+
+    &.no-limit {
+      background: linear-gradient(to right, #d8deeb 50%, #d8deeb 50%);
+      background-size: 4px 100%;
+
+      &.exceed-request {
+        background: linear-gradient(to right, #d8deeb 50%, rgba(0, 128, 255, 0.6) 50%);
+        background-size: 4px 100%;
+      }
+    }
+  }
+`;
+const InnerBar = ({ usage, requestNum, limitNum }) => {
+    const usageNum = parseSi(usage);
+    const totalNum = limitNum || requestNum / 0.8;
+    const requestPercent = (100 * requestNum) / totalNum;
+    const usageInRequestPercent = 100 * Math.min(usageNum / requestNum, 1);
+    const usageInRequestToLimitPercent = 100 * Math.min(Math.max(usageNum - requestNum, 0) / (totalNum - requestNum), 1);
+    const noLimit = limitNum === 0;
+    return (_jsxs("div", { className: "usage-bar", style: { marginLeft: 4 }, children: [_jsx("div", { className: "request-anchor", style: {
+                    left: `${requestPercent}%`,
+                } }), _jsx("div", { className: "request-bar", style: { width: `${requestPercent}%` }, children: _jsx("div", { className: "usage-fill-bar", style: { width: `${usageInRequestPercent}%` } }) }), _jsx("div", { className: cx('request-to-limit-bar', noLimit && 'no-limit', usageInRequestToLimitPercent > 0 && 'exceed-request'), style: { width: `${100 - requestPercent}%` }, children: !noLimit && (_jsx("div", { className: "usage-fill-bar", style: { width: `${usageInRequestToLimitPercent}%` } })) })] }));
+};
+export const ResourceUsageBar = props => {
+    const { usage, requestNum } = props;
+    return (_jsxs("div", { className: cx('usage-wrapper', WrapperStyle), children: [_jsx("div", { className: "usage-text", children: usage }), requestNum > 0 && _jsx(InnerBar, { ...props })] }));
+};

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { css } from '@linaria/core';
+const Style = css `
+  width: 1px;
+  height: 16px;
+  border-radius: 1px;
+  background: rgba(172, 186, 211, 0.6);
+`;
+export const Separator = () => {
+    return _jsx("div", { className: Style });
+};