@postgres.ai/shared 3.5.0-pr-1027.1 → 4.0.0-pr-1028.1

package/pages/CreateSnapshot/index.js

@@ -0,0 +1,117 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*--------------------------------------------------------------------------
+ * Copyright (c) 2019-2021, Postgres.ai, Nikolay Samokhvalov nik@postgres.ai
+ * All Rights Reserved. Proprietary and confidential.
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ *--------------------------------------------------------------------------
+ */
+import { useEffect } from 'react';
+import { useHistory } from 'react-router';
+import { observer } from 'mobx-react-lite';
+import { makeStyles } from '@material-ui/core';
+import { Button } from '@postgres.ai/shared/components/Button';
+import { ResponseMessage } from '@postgres.ai/shared/pages/Instance/Configuration/ResponseMessage';
+import { Select } from '@postgres.ai/shared/components/Select';
+import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle';
+import { SyntaxHighlight } from '@postgres.ai/shared/components/SyntaxHighlight';
+import { StubSpinner } from '@postgres.ai/shared/components/StubSpinnerFlex';
+import { Spinner } from '@postgres.ai/shared/components/Spinner';
+import { generateSnapshotPageId } from '@postgres.ai/shared/pages/Instance/Snapshots/utils';
+import { TextField } from '@postgres.ai/shared/components/TextField';
+import { useForm } from './useForm';
+import { useCreatedStores } from './useCreatedStores';
+import { getCliCreateSnapshotCommand } from './utils';
+import { InstanceTabs, TABS_INDEX } from "../Instance/Tabs";
+const useStyles = makeStyles({
+    wrapper: {
+        display: 'flex',
+        gap: '60px',
+        maxWidth: '1200px',
+        fontSize: '14px',
+        marginTop: '20px',
+        '@media (max-width: 1300px)': {
+            flexDirection: 'column',
+            gap: '20px',
+        },
+    },
+    container: {
+        maxWidth: '100%',
+        flex: '1 1 0',
+        minWidth: 0,
+        '&  p,span': {
+            fontSize: 14,
+        },
+    },
+    snippetContainer: {
+        flex: '1 1 0',
+        minWidth: 0,
+        boxShadow: 'rgba(0, 0, 0, 0.1) 0px 4px 12px',
+        padding: '10px 20px 10px 20px',
+        height: 'max-content',
+        borderRadius: '4px',
+    },
+    marginBottom: {
+        marginBottom: '8px',
+    },
+    marginBottom2x: {
+        marginBottom: '16px',
+    },
+    marginTop: {
+        marginTop: '8px',
+    },
+    marginTop2x: {
+        marginTop: '16px',
+    },
+    spinner: {
+        marginLeft: '8px',
+        color: '#fff',
+    },
+    title: {
+        marginTop: '8px',
+        lineHeight: '26px'
+    },
+}, { index: 1 });
+export const CreateSnapshotPage = observer(({ instanceId, api, elements, routes, isPlatform }) => {
+    var _a, _b;
+    const stores = useCreatedStores(api);
+    const classes = useStyles();
+    const history = useHistory();
+    const { load, instance, createSnapshot, isCreatingSnapshot, snapshotError, } = stores.main;
+    const clonesList = ((_b = (_a = instance === null || instance === void 0 ? void 0 : instance.instance) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.cloning.clones) || [];
+    const handleSubmit = async (values) => {
+        await createSnapshot(values.cloneID, values.message, instanceId).then((snapshot) => {
+            if (snapshot && generateSnapshotPageId(snapshot.snapshotID)) {
+                history.push(routes.snapshot(generateSnapshotPageId(snapshot.snapshotID)));
+            }
+        });
+    };
+    const [{ formik }] = useForm(handleSubmit);
+    if (!clonesList) {
+        return _jsx(StubSpinner, {});
+    }
+    useEffect(() => {
+        load(instanceId);
+    }, []);
+    useEffect(() => {
+        if (!history.location.search)
+            return;
+        const queryString = history.location.search.split('?')[1];
+        if (!queryString)
+            return;
+        const params = new URLSearchParams(queryString);
+        const cloneID = params.get('clone_id');
+        if (!cloneID)
+            return;
+        formik.setFieldValue('cloneID', cloneID);
+    }, [history.location.search, formik.initialValues]);
+    return (_jsxs(_Fragment, { children: [elements.breadcrumbs, _jsx(SectionTitle, { tag: "h1", level: 1, text: "Create snapshot", className: classes.title, children: _jsx(InstanceTabs, { tab: TABS_INDEX.SNAPSHOTS, isPlatform: isPlatform, instanceId: instanceId, hasLogs: api.initWS !== undefined }) }), _jsxs("div", { className: classes.wrapper, children: [_jsx("div", { className: classes.container, children: _jsxs("div", { className: classes.marginTop2x, children: [_jsx("strong", { children: "Clone ID" }), _jsx("p", { className: classes.marginTop, children: "Choose a clone ID from the dropdown below. This will be the starting point for your new snapshot." }), _jsx(Select, { fullWidth: true, label: "Clone ID *", value: formik.values.cloneID, disabled: formik.isSubmitting, className: classes.marginBottom2x, onChange: (e) => formik.setFieldValue('cloneID', e.target.value), error: Boolean(formik.errors.cloneID), items: clonesList
+                                        ? clonesList.map((clone, i) => {
+                                            var _a, _b;
+                                            const isLatest = i === 0;
+                                            return {
+                                                value: clone.id,
+                                                children: (_jsxs("div", { children: [_jsxs("strong", { children: [clone.id, " ", isLatest && _jsx("span", { children: "Latest" })] }), _jsxs("p", { children: ["Created: ", (_a = clone === null || clone === void 0 ? void 0 : clone.snapshot) === null || _a === void 0 ? void 0 : _a.createdAt] }), _jsxs("p", { children: ["Data state at: ", (_b = clone === null || clone === void 0 ? void 0 : clone.snapshot) === null || _b === void 0 ? void 0 : _b.dataStateAt] })] })),
+                                            };
+                                        })
+                                        : [] }), _jsx("strong", { children: "Message" }), _jsx("p", { className: classes.marginTop, children: "Message to be added to the snapshot." }), _jsx(TextField, { label: "Message *", fullWidth: true, className: classes.marginBottom2x, value: formik.values.message, error: Boolean(formik.errors.message), onChange: (e) => formik.setFieldValue('message', e.target.value) }), _jsxs(Button, { variant: "primary", size: "medium", className: classes.marginTop, onClick: formik.submitForm, children: ["Create snapshot", isCreatingSnapshot && (_jsx(Spinner, { size: "sm", className: classes.spinner }))] }), snapshotError && (_jsx(ResponseMessage, { type: 'error', message: snapshotError }))] }) }), ' ', _jsxs("div", { className: classes.snippetContainer, children: [_jsx(SectionTitle, { tag: "h1", level: 1, text: "The same using CLI" }), _jsx("p", { className: classes.marginTop, children: "Alternatively, you can create a new snapshot using CLI. Fill the form, copy the command below and paste it into your terminal." }), _jsx(SyntaxHighlight, { content: getCliCreateSnapshotCommand(formik.values.cloneID, formik.values.message) })] })] })] }));
+});

package/pages/CreateSnapshot/stores/Main.d.ts

@@ -0,0 +1,21 @@
+import { CreateSnapshot } from '@postgres.ai/shared/types/api/endpoints/createSnapshot';
+import { MainStore as InstanceStore, Api as InstanceStoreApi } from '@postgres.ai/shared/pages/Instance/stores/Main';
+import { InitWS } from '@postgres.ai/shared/types/api/endpoints/initWS';
+declare type Error = {
+    title?: string;
+    message: string;
+};
+export declare type MainStoreApi = InstanceStoreApi & {
+    createSnapshot: CreateSnapshot;
+    initWS: InitWS;
+};
+export declare class MainStore {
+    snapshotError: Error | null;
+    isCreatingSnapshot: boolean;
+    readonly instance: InstanceStore;
+    private readonly api;
+    constructor(api: MainStoreApi);
+    load: (instanceId: string) => Promise<void>;
+    createSnapshot: (cloneID: string, message: string, instanceId: string) => Promise<import("../../../types/api/entities/createSnapshot").CreateSnapshotDTO | null | undefined>;
+}
+export {};

package/pages/CreateSnapshot/stores/Main.js

@@ -0,0 +1,31 @@
+/*--------------------------------------------------------------------------
+ * Copyright (c) 2019-2021, Postgres.ai, Nikolay Samokhvalov nik@postgres.ai
+ * All Rights Reserved. Proprietary and confidential.
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ *--------------------------------------------------------------------------
+ */
+import { makeAutoObservable } from 'mobx';
+import { MainStore as InstanceStore, } from '@postgres.ai/shared/pages/Instance/stores/Main';
+export class MainStore {
+    constructor(api) {
+        this.snapshotError = null;
+        this.isCreatingSnapshot = false;
+        this.load = async (instanceId) => {
+            this.instance.load(instanceId);
+        };
+        this.createSnapshot = async (cloneID, message, instanceId) => {
+            if (!this.api.createSnapshot)
+                return;
+            this.snapshotError = null;
+            this.isCreatingSnapshot = true;
+            const { response, error } = await this.api.createSnapshot(cloneID, message, instanceId);
+            this.isCreatingSnapshot = false;
+            if (error)
+                this.snapshotError = await error.json().then((err) => err.message);
+            return response;
+        };
+        this.api = api;
+        this.instance = new InstanceStore(api);
+        makeAutoObservable(this);
+    }
+}

package/pages/CreateSnapshot/useCreatedStores.d.ts

@@ -0,0 +1,6 @@
+import { MainStore, MainStoreApi } from './stores/Main';
+export declare const useCreatedStores: (api: MainStoreApi) => {
+    main: MainStore;
+};
+export declare type Stores = ReturnType<typeof useCreatedStores>;
+export type { MainStoreApi };

package/pages/CreateSnapshot/useCreatedStores.js

@@ -0,0 +1,5 @@
+import { useMemo } from 'react';
+import { MainStore } from './stores/Main';
+export const useCreatedStores = (api) => ({
+    main: useMemo(() => new MainStore(api), []),
+});

package/pages/CreateSnapshot/useForm.d.ts

@@ -0,0 +1,53 @@
+/// <reference types="react" />
+export declare type FormValues = {
+    cloneID: string;
+    message: string;
+};
+export declare const useForm: (onSubmit: (values: FormValues) => void) => {
+    formik: {
+        initialValues: FormValues;
+        initialErrors: import("formik").FormikErrors<unknown>;
+        initialTouched: import("formik").FormikTouched<unknown>;
+        initialStatus: any;
+        handleBlur: {
+            (e: import("react").FocusEvent<any, Element>): void;
+            <T = any>(fieldOrEvent: T): T extends string ? (e: any) => void : void;
+        };
+        handleChange: {
+            (e: import("react").ChangeEvent<any>): void;
+            <T_1 = string | import("react").ChangeEvent<any>>(field: T_1): T_1 extends import("react").ChangeEvent<any> ? void : (e: string | import("react").ChangeEvent<any>) => void;
+        };
+        handleReset: (e: any) => void;
+        handleSubmit: (e?: import("react").FormEvent<HTMLFormElement> | undefined) => void;
+        resetForm: (nextState?: Partial<import("formik").FormikState<FormValues>> | undefined) => void;
+        setErrors: (errors: import("formik").FormikErrors<FormValues>) => void;
+        setFormikState: (stateOrCb: import("formik").FormikState<FormValues> | ((state: import("formik").FormikState<FormValues>) => import("formik").FormikState<FormValues>)) => void;
+        setFieldTouched: (field: string, touched?: boolean | undefined, shouldValidate?: boolean | undefined) => Promise<void> | Promise<import("formik").FormikErrors<FormValues>>;
+        setFieldValue: (field: string, value: any, shouldValidate?: boolean | undefined) => Promise<void> | Promise<import("formik").FormikErrors<FormValues>>;
+        setFieldError: (field: string, value: string | undefined) => void;
+        setStatus: (status: any) => void;
+        setSubmitting: (isSubmitting: boolean) => void;
+        setTouched: (touched: import("formik").FormikTouched<FormValues>, shouldValidate?: boolean | undefined) => Promise<void> | Promise<import("formik").FormikErrors<FormValues>>;
+        setValues: (values: import("react").SetStateAction<FormValues>, shouldValidate?: boolean | undefined) => Promise<void> | Promise<import("formik").FormikErrors<FormValues>>;
+        submitForm: () => Promise<any>;
+        validateForm: (values?: FormValues | undefined) => Promise<import("formik").FormikErrors<FormValues>>;
+        validateField: (name: string) => Promise<void> | Promise<string | undefined>;
+        isValid: boolean;
+        dirty: boolean;
+        unregisterField: (name: string) => void;
+        registerField: (name: string, { validate }: any) => void;
+        getFieldProps: (nameOrOptions: any) => import("formik").FieldInputProps<any>;
+        getFieldMeta: (name: string) => import("formik").FieldMetaProps<any>;
+        getFieldHelpers: (name: string) => import("formik").FieldHelperProps<any>;
+        validateOnBlur: boolean;
+        validateOnChange: boolean;
+        validateOnMount: boolean;
+        values: FormValues;
+        errors: import("formik").FormikErrors<FormValues>;
+        touched: import("formik").FormikTouched<FormValues>;
+        isSubmitting: boolean;
+        isValidating: boolean;
+        status?: any;
+        submitCount: number;
+    };
+}[];

package/pages/CreateSnapshot/useForm.js

@@ -0,0 +1,25 @@
+/*--------------------------------------------------------------------------
+ * Copyright (c) 2019-2021, Postgres.ai, Nikolay Samokhvalov nik@postgres.ai
+ * All Rights Reserved. Proprietary and confidential.
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ *--------------------------------------------------------------------------
+ */
+import { useFormik } from 'formik';
+import * as Yup from 'yup';
+const Schema = Yup.object().shape({
+    cloneID: Yup.string().required('Clone ID is required'),
+    message: Yup.string().required('Message is required'),
+});
+export const useForm = (onSubmit) => {
+    const formik = useFormik({
+        initialValues: {
+            cloneID: '',
+            message: '',
+        },
+        validationSchema: Schema,
+        onSubmit,
+        validateOnBlur: false,
+        validateOnChange: false,
+    });
+    return [{ formik }];
+};

package/pages/CreateSnapshot/utils/index.d.ts

@@ -0,0 +1 @@
+export declare const getCliCreateSnapshotCommand: (cloneID: string, message: string) => string;

package/pages/CreateSnapshot/utils/index.js

@@ -0,0 +1,3 @@
+export const getCliCreateSnapshotCommand = (cloneID, message) => {
+    return `dblab commit --clone-id ${cloneID || '<CLONE_ID>'} --message ${message || '<MESSAGE>'}`;
+};

package/pages/Instance/{components → Clones}/ClonesList/MenuCell/index.js

@@ -37,7 +37,7 @@ export const MenuCell = observer((props) => {
                 onClick: () => onConnect(clone.id),
             },
             {
-                name: 'Destroy clone',
+                name: 'Delete clone',
                 onClick: handleClickDestroyClone,
             },
             {

package/pages/Instance/{components → Clones}/ClonesList/MenuCell/utils.js

@@ -5,7 +5,7 @@
  *--------------------------------------------------------------------------
  */
 export const destroyRestriction = (cloneId) => {
-    const message = `The clone "${cloneId}" is marked as protected. To destroy it, disable the destroy protection first.`;
+    const message = `The clone "${cloneId}" is marked as protected. To delete it, disable the delete protection first.`;
     window.alert(message);
 };
 export const getResetApprove = (cloneId) => {
@@ -13,6 +13,6 @@ export const getResetApprove = (cloneId) => {
     return window.confirm(message);
 };
 export const getDestroyApprove = (cloneId) => {
-    const message = `Are you sure you want to destroy the Database Lab clone: "${cloneId}"?`;
+    const message = `Are you sure you want to delete the Database Lab clone: "${cloneId}"?`;
     return window.confirm(message);
 };

package/pages/Instance/Clones/ClonesList/index.js

@@ -0,0 +1,96 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+/*--------------------------------------------------------------------------
+ * Copyright (c) 2019-2021, Postgres.ai, Nikolay Samokhvalov nik@postgres.ai
+ * All Rights Reserved. Proprietary and confidential.
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ *--------------------------------------------------------------------------
+ */
+import { useState } from 'react';
+import cn from 'classnames';
+import { formatDistanceToNowStrict } from 'date-fns';
+import { useHistory } from 'react-router-dom';
+import { Table, TableHead, TableRow, TableHeaderCell, TableBody, TableBodyCell, } from '@postgres.ai/shared/components/Table';
+import { ArrowDropDownIcon } from '@postgres.ai/shared/icons/ArrowDropDown';
+import { ShieldIcon } from '@postgres.ai/shared/icons/Shield';
+import { RenewableIcon } from '@postgres.ai/shared/icons/Renewable';
+import { InfoIcon } from '@postgres.ai/shared/icons/Info';
+import { HorizontalScrollContainer } from '@postgres.ai/shared/components/HorizontalScrollContainer';
+import { Status } from '@postgres.ai/shared/components/Status';
+import { Tooltip } from '@postgres.ai/shared/components/Tooltip';
+import { useHost } from '@postgres.ai/shared/pages/Instance/context';
+import { getCloneStatusType, getCloneStatusText, } from '@postgres.ai/shared/utils/clone';
+import { formatBytesIEC } from '@postgres.ai/shared/utils/units';
+import { isValidDate } from '@postgres.ai/shared/utils/date';
+import { MenuCell } from './MenuCell';
+import { ConnectionModal } from './ConnectionModal';
+import styles from './styles.module.scss';
+export const ClonesList = (props) => {
+    var _a, _b;
+    const host = useHost();
+    const history = useHistory();
+    const [state, setState] = useState({
+        sortByBranch: 'desc',
+        sortByCreated: 'desc',
+        clones: (_a = props.clones) !== null && _a !== void 0 ? _a : [],
+    });
+    const [cloneIdForConnect, setCloneIdForConnect] = useState(null);
+    const [isOpenConnectionModal, setIsOpenConnectionModal] = useState(false);
+    const openConnectionModal = (cloneId) => {
+        setCloneIdForConnect(cloneId);
+        setIsOpenConnectionModal(true);
+    };
+    const closeConnectionModal = () => {
+        setIsOpenConnectionModal(false);
+    };
+    const handleSortByBranch = () => {
+        const sortByBranch = state.sortByBranch === 'desc' ? 'asc' : 'desc';
+        const sortedClones = [...state.clones].sort((a, b) => {
+            if (sortByBranch === 'asc') {
+                return a.branch.localeCompare(b.branch);
+            }
+            else {
+                return b.branch.localeCompare(a.branch);
+            }
+        });
+        setState({
+            ...state,
+            sortByBranch,
+            clones: sortedClones,
+        });
+    };
+    const handleSortByCreated = () => {
+        const sortByCreated = state.sortByCreated === 'desc' ? 'asc' : 'desc';
+        const sortedClones = [...state.clones].sort((a, b) => {
+            if (sortByCreated === 'asc') {
+                return (new Date(a.createdAtDate).getTime() -
+                    new Date(b.createdAtDate).getTime());
+            }
+            else {
+                return (new Date(b.createdAtDate).getTime() -
+                    new Date(a.createdAtDate).getTime());
+            }
+        });
+        setState({
+            ...state,
+            sortByCreated,
+            clones: sortedClones,
+        });
+    };
+    if (!((_b = state.clones) === null || _b === void 0 ? void 0 : _b.length))
+        return _jsx("p", { className: styles.emptyStub, children: props.emptyStubText });
+    return (_jsxs(_Fragment, { children: [_jsx(HorizontalScrollContainer, { children: _jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableHeaderCell, {}), _jsx(TableHeaderCell, { children: "Status" }), _jsx(TableHeaderCell, { children: "ID" }), _jsx(TableHeaderCell, { children: _jsxs("div", { onClick: handleSortByBranch, className: cn(styles.interactiveRow, styles.verticalCentered), children: ["Branch", _jsx(ArrowDropDownIcon, { className: cn(state.sortByCreated === 'asc' && styles.hideSortIcon, state.sortByBranch === 'asc' && styles.sortIconUp, styles.sortIcon) })] }) }), _jsx(TableHeaderCell, { children: _jsx(Tooltip, { content: "When enabled, neither manual nor automated deletion of this clone is possible. Note that abandoned protected clones may lead to out-of-disk-space events because they hold old data, blocking cleanup and refresh processes.", children: _jsxs("div", { className: styles.verticalCentered, children: ["Protected", _jsx(InfoIcon, { className: styles.infoIcon })] }) }) }), _jsx(TableHeaderCell, { children: _jsxs("div", { onClick: handleSortByCreated, className: cn(styles.interactiveRow, styles.verticalCentered), children: ["Created", _jsx(ArrowDropDownIcon, { className: cn(state.sortByBranch === 'asc' && styles.hideSortIcon, state.sortByCreated === 'asc' && styles.sortIconUp, styles.sortIcon) })] }) }), _jsx(TableHeaderCell, { children: "Port" }), _jsx(TableHeaderCell, { children: "DB user" }), _jsx(TableHeaderCell, { children: _jsx(Tooltip, { content: "Clone's own size \u2013 how much data was added or modified.", children: _jsxs("div", { className: styles.verticalCentered, children: ["Diff size", _jsx(InfoIcon, { className: styles.infoIcon })] }) }) }), _jsx(TableHeaderCell, { children: "Disk" }), _jsx(TableHeaderCell, { children: "Data state time" })] }) }), _jsx(TableBody, { children: state.clones.map((clone) => {
+                                var _a, _b;
+                                const clonePagePath = host.routes.clone(clone.id);
+                                return (_jsxs(TableRow, { hover: !props.isDisabled, onClick: props.isDisabled
+                                        ? undefined
+                                        : () => history.push(clonePagePath), className: cn(!props.isDisabled && styles.interactiveRow), children: [_jsx(MenuCell, { clone: clone, onConnect: openConnectionModal, clonePagePath: clonePagePath }), _jsx(TableBodyCell, { children: _jsx(Tooltip, { content: clone.status.message, children: _jsx(Status, { type: getCloneStatusType(clone.status.code), children: getCloneStatusText(clone.status.code) }) }) }), _jsx(TableBodyCell, { children: clone.id }), _jsx(TableBodyCell, { children: clone.branch }), _jsx(TableBodyCell, { children: clone.protected ? (_jsx(Tooltip, { content: "Clone is protected from manual and automated deletion. Note that abandoned protected clones may lead to out-of-disk-space events because they hold old data, blocking cleanup and refresh processes.", children: _jsx(ShieldIcon, { className: styles.protectionIcon }) })) : (_jsx(Tooltip, { content: "Clone is not protected from deletion. To save disk space it will be automatically deleted if there is no activity for a long time.", children: _jsx(RenewableIcon, { className: styles.protectionIcon }) })) }), _jsxs(TableBodyCell, { children: [clone.createdAt, " (", isValidDate(clone.createdAtDate)
+                                                    ? formatDistanceToNowStrict(clone.createdAtDate, {
+                                                        addSuffix: true,
+                                                    })
+                                                    : '-', ")"] }), _jsx(TableBodyCell, { children: clone.db.port }), _jsx(TableBodyCell, { children: clone.db.username }), _jsx(TableBodyCell, { children: formatBytesIEC(clone.metadata.cloneDiffSize) }), _jsx(TableBodyCell, { children: (_b = (_a = clone.snapshot) === null || _a === void 0 ? void 0 : _a.pool) !== null && _b !== void 0 ? _b : '-' }), _jsx(TableBodyCell, { children: clone.snapshot ? (_jsxs(_Fragment, { children: [clone.snapshot.dataStateAt, " (", isValidDate(clone.snapshot.dataStateAtDate)
+                                                        ? formatDistanceToNowStrict(clone.snapshot.dataStateAtDate, {
+                                                            addSuffix: true,
+                                                        })
+                                                        : '-', ")"] })) : ('-') })] }, clone.id));
+                            }) })] }) }), cloneIdForConnect && (_jsx(ConnectionModal, { cloneId: cloneIdForConnect, isOpen: isOpenConnectionModal, onClose: closeConnectionModal }))] }));
+};

package/pages/Instance/{components → Clones}/ClonesList/styles.module.scss

@@ -18,6 +18,16 @@
 .sortIcon {
   margin-left: 8px;
   width: 10px;
+  cursor: pointer;
+  transition: transform 0.15s ease-in-out;
+}
+
+.hideSortIcon {
+  opacity: 0;
+}
+
+.sortIconUp {
+  transform: rotate(180deg);
 }
 
 .protectionIcon {

package/pages/Instance/{ClonesModal → Clones/ClonesModal}/index.js

@@ -9,7 +9,7 @@ import { makeStyles } from '@material-ui/core';
 import { observer } from 'mobx-react-lite';
 import { useStores } from '@postgres.ai/shared/pages/Instance/context';
 import { Modal } from '@postgres.ai/shared/components/Modal';
-import { ClonesList } from '@postgres.ai/shared/pages/Instance/components/ClonesList';
+import { ClonesList } from '@postgres.ai/shared/pages/Instance/Clones/ClonesList';
 import { Tags } from '@postgres.ai/shared/pages/Instance/components/Tags';
 import { ModalReloadButton } from '@postgres.ai/shared/pages/Instance/components/ModalReloadButton';
 import { getTags } from './utils';
@@ -19,20 +19,20 @@ const useStyles = makeStyles({
     },
 }, { index: 1 });
 export const ClonesModal = observer(() => {
-    var _a, _b;
+    var _a, _b, _c;
     const classes = useStyles();
     const stores = useStores();
     const { instance } = stores.main;
     if (!instance)
         return null;
     const { pool, snapshotId, isOpenModal, closeModal } = stores.clonesModal;
-    return (_jsx(Modal, { title: `Clones (${(_a = instance.state) === null || _a === void 0 ? void 0 : _a.cloning.clones.length})`, isOpen: isOpenModal, onClose: closeModal, size: "md", titleRightContent: _jsx(ModalReloadButton, { isReloading: stores.main.isReloadingClones, onReload: stores.main.reloadClones }), headerContent: _jsx(Tags, { data: getTags({
+    return (_jsx(Modal, { title: `Clones (${(_b = (_a = instance.state) === null || _a === void 0 ? void 0 : _a.cloning.clones) === null || _b === void 0 ? void 0 : _b.length})`, isOpen: isOpenModal, onClose: closeModal, size: "md", titleRightContent: _jsx(ModalReloadButton, { isReloading: stores.main.isReloadingClones, onReload: stores.main.reloadClones }), headerContent: _jsx(Tags, { data: getTags({
                 pool,
                 snapshotId,
-            }) }), classes: { content: classes.root }, children: _jsx(ClonesList, { isDisabled: false, clones: (_b = instance.state) === null || _b === void 0 ? void 0 : _b.cloning.clones.filter((clone) => {
+            }) }), classes: { content: classes.root }, children: _jsx(ClonesList, { isDisabled: false, clones: (_c = instance.state) === null || _c === void 0 ? void 0 : _c.cloning.clones.filter((clone) => {
                 var _a, _b;
                 const isMatchedByPool = !pool || pool === ((_a = clone.snapshot) === null || _a === void 0 ? void 0 : _a.pool);
                 const isMatchedBySnapshot = !snapshotId || snapshotId === ((_b = clone.snapshot) === null || _b === void 0 ? void 0 : _b.id);
                 return isMatchedByPool && isMatchedBySnapshot;
-            }), emptyStubText: "No clones found" }) }));
+            }), emptyStubText: "No clones found." }) }));
 });

package/pages/Instance/Clones/Header/styles.module.scss

@@ -4,8 +4,11 @@
   display: flex;
   justify-content: space-between;
   padding: 20px;
+  margin-bottom: 20px;
+  background-color: #f9f9f9;
 
   @include sm {
     padding: 20px 0;
+    margin-bottom: 10px;
   }
-}
+}

package/pages/Instance/Clones/index.d.ts

@@ -1,4 +1,8 @@
 /// <reference types="react" />
-export declare const Clones: (() => JSX.Element | null) & {
+interface ClonesProps {
+    onlyRenderList?: boolean;
+}
+export declare const Clones: ((props: ClonesProps) => JSX.Element | null) & {
     displayName: string;
 };
+export {};

package/pages/Instance/Clones/index.js

@@ -15,7 +15,7 @@ import { round } from '@postgres.ai/shared/utils/numbers';
 import { Tooltip } from '@postgres.ai/shared/components/Tooltip';
 import { InfoIcon } from '@postgres.ai/shared/icons/Info';
 import { useStores, useHost } from '@postgres.ai/shared/pages/Instance/context';
-import { ClonesList } from '../components/ClonesList';
+import { ClonesList } from './ClonesList';
 import { Header } from './Header';
 const SHORT_LIST_SIZE = 3;
 const useStyles = makeStyles((theme) => ({
@@ -29,9 +29,6 @@ const useStyles = makeStyles((theme) => ({
             marginRight: 0,
         },
     },
-    tableTitle: {
-        marginTop: '5px',
-    },
     listSizeButton: {
         marginTop: '12px',
     },
@@ -42,8 +39,9 @@ const useStyles = makeStyles((theme) => ({
         color: '#808080',
     },
 }), { index: 1 });
-export const Clones = observer(() => {
+export const Clones = observer((props) => {
     var _a, _b, _c;
+    const onlyRenderList = props === null || props === void 0 ? void 0 : props.onlyRenderList;
     const classes = useStyles();
     const history = useHistory();
     const isMobile = useMediaQuery((theme) => theme.breakpoints.down('sm'));
@@ -53,14 +51,14 @@ export const Clones = observer(() => {
     const { instance } = stores.main;
     if (!instance || !instance.state)
         return null;
-    const isShortList = isMobile && isShortListForMobile;
+    const isShortList = isMobile && isShortListForMobile && !onlyRenderList;
     const toggleListSize = () => setIsShortListForMobile(!isShortListForMobile);
     const goToCloneAddPage = () => history.push(host.routes.createClone());
     const showListSizeButton = ((_b = (_a = instance.state) === null || _a === void 0 ? void 0 : _a.cloning.clones) === null || _b === void 0 ? void 0 : _b.length) > SHORT_LIST_SIZE && isMobile;
     const isLoadingSnapshots = stores.main.snapshots.isLoading;
     const hasSnapshots = Boolean((_c = stores.main.snapshots.data) === null || _c === void 0 ? void 0 : _c.length);
     const canCreateClone = hasSnapshots && !stores.main.isDisabledInstance;
-    return (_jsxs("div", { className: classes.root, children: [_jsx(SectionTitle, { level: 2, tag: "h2", text: "Cloning summary" }), _jsx(Header, { expectedCloningTimeS: round(instance.state.cloning.expectedCloningTime, 2), logicalSize: instance.state.dataSize, clonesCount: instance.state.cloning.clones.length }), _jsx(SectionTitle, { className: classes.tableTitle, level: 2, tag: "h3", text: `Clones (${instance.state.cloning.clones.length})`, rightContent: _jsxs(_Fragment, { children: [_jsx(Button, { theme: "primary", onClick: goToCloneAddPage, isDisabled: !canCreateClone, isLoading: isLoadingSnapshots, children: "Create clone" }), !hasSnapshots && (_jsx(Tooltip, { content: "No snapshots", children: _jsx(InfoIcon, { className: classes.infoIcon }) }))] }) }), _jsx(ClonesList, { clones: isShortList
+    return (_jsxs("div", { className: classes.root, children: [!onlyRenderList && (_jsxs(_Fragment, { children: [_jsx(SectionTitle, { level: 2, tag: "h2", text: "Cloning summary" }), _jsx(Header, { expectedCloningTimeS: round(instance.state.cloning.expectedCloningTime, 2), logicalSize: instance.state.dataSize, clonesCount: instance.state.cloning.clones.length })] })), _jsx(SectionTitle, { level: 2, tag: "h3", text: `Clones (${instance.state.cloning.clones.length})`, rightContent: _jsxs(_Fragment, { children: [_jsx(Button, { theme: "primary", onClick: goToCloneAddPage, isDisabled: !canCreateClone, isLoading: isLoadingSnapshots, children: "Create clone" }), !hasSnapshots && (_jsx(Tooltip, { content: "No snapshots", children: _jsx("div", { style: { display: 'flex' }, children: _jsx(InfoIcon, { className: classes.infoIcon }) }) }))] }) }), _jsx(ClonesList, { clones: isShortList
                     ? instance.state.cloning.clones.slice(0, SHORT_LIST_SIZE)
-                    : instance.state.cloning.clones, isDisabled: stores.main.isDisabledInstance, emptyStubText: "This instance has no active clones" }), showListSizeButton && (_jsx(Button, { className: classes.listSizeButton, onClick: toggleListSize, children: isShortList ? 'Show more' : 'Show less' }))] }));
+                    : instance.state.cloning.clones, isDisabled: stores.main.isDisabledInstance, emptyStubText: "This instance has no active clones." }), showListSizeButton && !onlyRenderList && (_jsx(Button, { className: classes.listSizeButton, onClick: toggleListSize, children: isShortList ? 'Show more' : 'Show less' }))] }));
 });

package/pages/{Configuration → Instance/Configuration}/InputWithTooltip/index.js

@@ -11,7 +11,7 @@ import styles from '../styles.module.scss';
 const useStyles = makeStyles({
     textField: {
         '& .MuiOutlinedInput-notchedOutline': {
-            borderColor: '#000',
+            borderColor: '#000 !important',
         },
     },
     selectField: {
@@ -29,6 +29,9 @@ const useStyles = makeStyles({
     error: {
         color: '#f44336',
     },
+    infoIcon: {
+        position: 'relative',
+    },
     absoluteSpinner: {
         position: 'absolute',
         left: 'calc(50% - 40px)',
@@ -37,24 +40,25 @@ const useStyles = makeStyles({
 }, { index: 1 });
 export const InputWithTooltip = ({ value, label, error, onChange, tooltipText, disabled, type, }) => {
     const classes = useStyles();
-    return (_jsxs(Box, { mt: 2, mb: 2, display: "flex", flexDirection: "column", justifyContent: "flex-start", alignItems: "flex-start", gap: "5px", children: [_jsx("label", { className: classNames(error && classes.error, classes.label), children: label }), _jsxs(Box, { display: "flex", alignItems: "center", width: "100%", children: [_jsx(TextField, { type: type || 'text', className: classNames(!disabled && classes.textField, styles.textField), variant: "outlined", size: "small", value: value, error: Boolean(error), onChange: onChange, disabled: disabled, multiline: type === 'textarea', spellCheck: false }), _jsx(Tooltip, { interactive: true, content: _jsx("p", { children: tooltipText() }), children: _jsx(InfoIcon, { className: styles.infoIcon }) })] })] }));
+    return (_jsxs(Box, { mt: 2, mb: 2, display: "flex", flexDirection: "column", justifyContent: "flex-start", alignItems: "flex-start", gap: "5px", children: [_jsx("label", { className: classNames(error && classes.error, classes.label), children: label }), _jsxs(Box, { display: "flex", alignItems: "center", width: "100%", children: [_jsx(TextField, { type: type || 'text', className: classNames(!disabled && classes.textField, styles.textField), variant: "outlined", size: "small", value: value, error: Boolean(error), onChange: onChange, disabled: disabled, multiline: type === 'textarea', spellCheck: false }), _jsx(Tooltip, { interactive: true, content: _jsx("p", { children: tooltipText() }), children: _jsx("div", { className: styles.infoIcon, children: _jsx(InfoIcon, {}) }) })] })] }));
 };
 export const InputWithChip = ({ value, label, id, onChange, tooltipText, disabled, handleDeleteChip, }) => {
     const classes = useStyles();
-    return (_jsxs(Box, { mt: 2, mb: 1, display: "flex", flexDirection: "column", justifyContent: "flex-start", alignItems: "flex-start", gap: "5px", children: [_jsx("label", { className: classes.label, children: label }), _jsxs(Box, { display: "flex", alignItems: "center", width: "100%", children: [_jsx(TextField, { className: classNames(!disabled && classes.textField, styles.textField), variant: "outlined", onChange: onChange, value: value, multiline: true, disabled: disabled, inputProps: {
+    return (_jsxs(Box, { mt: 2, mb: 2, children: [_jsxs(Box, { display: "flex", alignItems: "center", children: [_jsx(TextField, { className: classNames(!disabled && classes.textField, styles.textField), variant: "outlined", onChange: onChange, value: value, multiline: true, disabled: disabled, label: label, inputProps: {
                             name: id,
                             id: id,
                         }, InputLabelProps: {
                             shrink: true,
-                        } }), _jsx(Tooltip, { interactive: true, content: _jsx("p", { children: tooltipText() }), children: _jsx(InfoIcon, { className: styles.infoIcon }) })] }), value && (_jsx("div", { className: styles.chipContainer, children: uniqueChipValue(value)
-                    .split(' ')
-                    .map((uniqueValue, index) => {
-                    if (uniqueValue !== '') {
-                        return (_jsx(Chip, { className: styles.chip, label: uniqueValue, disabled: disabled, onDelete: (event) => handleDeleteChip(event, uniqueValue, id), color: "primary" }, index));
-                    }
-                }) }))] }));
+                        } }), _jsx(Tooltip, { interactive: true, content: _jsx("p", { children: tooltipText() }), children: _jsx("div", { className: styles.infoIcon, children: _jsx(InfoIcon, {}) }) })] }), _jsx("div", { className: styles.chipContainer, children: value &&
+                    uniqueChipValue(value)
+                        .split(' ')
+                        .map((uniqueValue, index) => {
+                        if (uniqueValue !== '') {
+                            return (_jsx(Chip, { className: styles.chip, label: uniqueValue, disabled: disabled, onDelete: (event) => handleDeleteChip(event, uniqueValue, id), color: "primary" }, index));
+                        }
+                    }) })] }));
 };
 export const SelectWithTooltip = ({ value, label, error, onChange, tooltipText, disabled, loading, items, }) => {
     const classes = useStyles();
-    return (_jsxs(Box, { mt: 1, display: "flex", flexDirection: "column", justifyContent: "flex-start", alignItems: "flex-start", position: "relative", gap: "5px", children: [_jsx("label", { className: classNames(error && classes.error, classes.label), children: label }), _jsxs(Box, { display: "flex", alignItems: "center", width: "100%", children: [loading && _jsx(Spinner, { className: classes.absoluteSpinner }), _jsx(Select, { className: classNames(classes.selectField, !disabled && classes.textField, styles.textField), label: "", error: error, value: value, disabled: disabled, onChange: onChange, items: items }), _jsx(Tooltip, { interactive: true, content: _jsx("p", { children: tooltipText() }), children: _jsx(InfoIcon, { className: styles.infoIcon }) })] })] }));
+    return (_jsxs(Box, { mt: 1, display: "flex", flexDirection: "column", justifyContent: "flex-start", alignItems: "flex-start", position: "relative", gap: "5px", children: [_jsx("label", { className: classNames(error && classes.error, classes.label), children: label }), _jsxs(Box, { display: "flex", alignItems: "center", width: "100%", children: [loading && _jsx(Spinner, { className: classes.absoluteSpinner }), _jsx(Select, { className: classNames(classes.selectField, !disabled && classes.textField, styles.textField), label: '', error: error, value: value, disabled: disabled, onChange: onChange, items: items }), _jsx(Tooltip, { interactive: true, content: _jsx("p", { children: tooltipText() }), children: _jsx("div", { className: styles.infoIcon, children: _jsx(InfoIcon, {}) }) })] })] }));
 };

package/pages/{Configuration → Instance/Configuration}/index.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-export declare const Configuration: (({ switchActiveTab, reload, isConfigurationActive, disableConfigModification, }: {
+export declare const Configuration: (({ instanceId, switchActiveTab, reload, isConfigurationActive, disableConfigModification, }: {
+    instanceId: string;
     switchActiveTab: (_: null, activeTab: number) => void;
     reload: () => void;
     isConfigurationActive: boolean;