@postgres.ai/shared 3.5.1-pr-1027.0 → 4.0.0-pr-1028

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

@@ -0,0 +1,74 @@
+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 { observer } from 'mobx-react-lite';
+import { makeStyles, IconButton } from '@material-ui/core';
+import copy from 'copy-to-clipboard';
+import { useStores } from '@postgres.ai/shared/pages/Instance/context';
+import { Tooltip } from '@postgres.ai/shared/components/Tooltip';
+import { Modal } from '@postgres.ai/shared/components/Modal';
+import { TextField } from '@postgres.ai/shared/components/TextField';
+import { icons } from '@postgres.ai/shared/styles/icons';
+import { getSshPortForwardingCommand, getPsqlConnectionStr, getJdbcConnectionStr, } from '@postgres.ai/shared/utils/connection';
+const useStyles = makeStyles({
+    root: {
+        fontSize: '14px',
+    },
+    item: {
+        '& + $item': {
+            marginTop: '16px',
+        },
+    },
+    fieldText: {
+        margin: 0,
+    },
+    field: {
+        width: 'calc(100% - 24px)',
+        margin: '16px 0 0 0',
+    },
+    fieldWrapper: {
+        display: 'flex',
+        alignItems: 'flex-end',
+    },
+    fieldInfo: {
+        display: 'flex',
+        alignItems: 'center',
+        height: '32px',
+        marginLeft: '12px',
+    },
+    copyButton: {
+        width: '32px',
+        height: '32px',
+        padding: '8px',
+    },
+    note: {
+        margin: '24px 0 0 0',
+        fontSize: '12px',
+    },
+}, { index: 1 });
+export const ConnectionModal = observer((props) => {
+    var _a;
+    const { isOpen, onClose, cloneId } = props;
+    const classes = useStyles();
+    const stores = useStores();
+    const { instance } = stores.main;
+    if (!instance)
+        return null;
+    const clone = (_a = instance.state) === null || _a === void 0 ? void 0 : _a.cloning.clones.find((clone) => clone.id === cloneId);
+    if (!clone)
+        return null;
+    const sshPortForwardingCommand = getSshPortForwardingCommand(instance, clone);
+    const psqlConnectionStr = getPsqlConnectionStr(clone);
+    const jdbcConnectionStr = getJdbcConnectionStr(clone);
+    return (_jsx(Modal, { title: "Clone connection info", isOpen: isOpen, onClose: onClose, children: _jsxs("div", { className: classes.root, children: [sshPortForwardingCommand && (_jsxs("div", { className: classes.item, children: [_jsxs("p", { className: classes.fieldText, children: ["In a separate console, set up SSH port forwarding", _jsx("br", {}), "(and keep it running):"] }), _jsx(TextField, { label: "SSH port forwarding", value: sshPortForwardingCommand, className: classes.field, InputProps: {
+                                endAdornment: (_jsx(IconButton, { className: classes.copyButton, onClick: () => copy(sshPortForwardingCommand), children: icons.copyIcon })),
+                            } })] })), psqlConnectionStr && (_jsxs("div", { className: classes.item, children: [_jsx("p", { className: classes.fieldText, children: "Connect to Postgres using psql:" }), _jsxs("div", { className: classes.fieldWrapper, children: [_jsx(TextField, { label: "psql connection string", value: psqlConnectionStr, className: classes.field, InputProps: {
+                                        endAdornment: (_jsx(IconButton, { className: classes.copyButton, onClick: () => copy(psqlConnectionStr), children: icons.copyIcon })),
+                                    } }), _jsx(Tooltip, { content: _jsx(_Fragment, { children: "Used to connect to Postgres using psql. Change DBNAME to\u00A0 name of the database you want to connect. Use PGPASSWORD\u00A0 environment variable to set database password or type\u00A0 it when prompted." }), children: _jsx("span", { className: classes.fieldInfo, children: icons.infoIcon }) })] })] })), jdbcConnectionStr && (_jsxs("div", { className: classes.item, children: [_jsx("p", { className: classes.fieldText, children: "Connect to Postgres using JDBC:" }), _jsxs("div", { className: classes.fieldWrapper, children: [_jsx(TextField, { label: "JDBC connection string", value: jdbcConnectionStr, className: classes.field, InputProps: {
+                                        endAdornment: (_jsx(IconButton, { className: classes.copyButton, onClick: () => copy(jdbcConnectionStr), children: icons.copyIcon })),
+                                    } }), _jsx(Tooltip, { content: _jsx(_Fragment, { children: "Used to connect to Postgres using JDBC. Change DBNAME to\u00A0 name of the database you want to connect, change DBPASSWORD\u00A0 to the password you\u2019ve used on clone creation." }), children: _jsx("span", { className: classes.fieldInfo, children: icons.infoIcon }) })] })] })), _jsxs("p", { className: classes.note, children: ["Password was set during clone creation. It\u2019s not being stored.", _jsx("br", {}), "You would need to recreate a clone if the password is lost."] })] }) }));
+});

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Clone } from '@postgres.ai/shared/types/api/entities/clone';
+declare type Props = {
+    clone: Clone;
+    onConnect: (cloneId: string) => void;
+    clonePagePath: string;
+};
+export declare const MenuCell: ((props: Props) => JSX.Element | null) & {
+    displayName: string;
+};
+export {};

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

@@ -0,0 +1,49 @@
+import { jsx as _jsx, jsxs as _jsxs } 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 { observer } from 'mobx-react-lite';
+import { useStores } from '@postgres.ai/shared/pages/Instance/context';
+import { TableBodyCellMenu } from '@postgres.ai/shared/components/Table';
+import { DestroyCloneModal } from '@postgres.ai/shared/components/DestroyCloneModal';
+import { DestroyCloneRestrictionModal } from '@postgres.ai/shared/components/DestroyCloneRestrictionModal';
+import { ResetCloneModal } from '@postgres.ai/shared/components/ResetCloneModal';
+export const MenuCell = observer((props) => {
+    var _a, _b;
+    const { clone, onConnect, clonePagePath } = props;
+    const stores = useStores();
+    const [isOpenCloneDestroyRestrictionModal, setIsOpenCloneDestroyRestrictionModal,] = useState(false);
+    const [isOpenCloneDestroyModal, setIsOpenCloneDestroyModal] = useState(false);
+    const [isOpenResetCloneModal, setIsOpenResetCloneModal] = useState(false);
+    const handleClickDestroyClone = () => {
+        if (clone.protected)
+            return setIsOpenCloneDestroyRestrictionModal(true);
+        setIsOpenCloneDestroyModal(true);
+    };
+    const handleClickResetClone = async () => {
+        setIsOpenResetCloneModal(true);
+    };
+    const isLoading = stores.main.unstableClones.has(clone.id);
+    if (!stores.main.instance)
+        return null;
+    const hasSnapshots = Boolean((_a = stores.main.snapshots.data) === null || _a === void 0 ? void 0 : _a.length);
+    return (_jsxs(TableBodyCellMenu, { isLoading: isLoading, isDisabled: stores.main.isDisabledInstance, actions: [
+            {
+                name: 'Connect',
+                onClick: () => onConnect(clone.id),
+            },
+            {
+                name: 'Delete clone',
+                onClick: handleClickDestroyClone,
+            },
+            {
+                name: 'Reset clone',
+                onClick: handleClickResetClone,
+                isDisabled: !hasSnapshots,
+            },
+        ], children: [_jsx(DestroyCloneRestrictionModal, { cloneId: clone.id, isOpen: isOpenCloneDestroyRestrictionModal, onClose: () => setIsOpenCloneDestroyRestrictionModal(false), clonePagePath: clonePagePath }), _jsx(DestroyCloneModal, { cloneId: clone.id, isOpen: isOpenCloneDestroyModal, onClose: () => setIsOpenCloneDestroyModal(false), onDestroyClone: () => stores.main.destroyClone(clone.id) }), _jsx(ResetCloneModal, { clone: clone, snapshots: stores.main.snapshots.data, isOpen: isOpenResetCloneModal, onClose: () => setIsOpenResetCloneModal(false), onResetClone: (snapshotId) => stores.main.resetClone(clone.id, snapshotId), version: (_b = stores.main.instance.state) === null || _b === void 0 ? void 0 : _b.engine.version })] }));
+});

package/pages/Instance/Clones/ClonesList/MenuCell/utils.d.ts

@@ -0,0 +1,3 @@
+export declare const destroyRestriction: (cloneId: string) => void;
+export declare const getResetApprove: (cloneId: string) => boolean;
+export declare const getDestroyApprove: (cloneId: string) => boolean;

package/pages/Instance/Clones/ClonesList/MenuCell/utils.js

@@ -0,0 +1,18 @@
+/*--------------------------------------------------------------------------
+ * 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
+ *--------------------------------------------------------------------------
+ */
+export const destroyRestriction = (cloneId) => {
+    const message = `The clone "${cloneId}" is marked as protected. To delete it, disable the delete protection first.`;
+    window.alert(message);
+};
+export const getResetApprove = (cloneId) => {
+    const message = `Are you sure you want to reset the Database Lab clone: "${cloneId}"?`;
+    return window.confirm(message);
+};
+export const getDestroyApprove = (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.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { Clone } from '@postgres.ai/shared/types/api/entities/clone';
+declare type Props = {
+    clones?: Clone[];
+    isDisabled: boolean;
+    emptyStubText: string;
+};
+export declare const ClonesList: (props: Props) => JSX.Element;
+export {};

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/Clones/ClonesModal/index.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const ClonesModal: (() => JSX.Element | null) & {
+    displayName: string;
+};

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

@@ -0,0 +1,38 @@
+import { jsx as _jsx } 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 { 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/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';
+const useStyles = makeStyles({
+    root: {
+        marginTop: 0,
+    },
+}, { index: 1 });
+export const ClonesModal = observer(() => {
+    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 (${(_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: (_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." }) }));
+});

package/pages/Instance/Clones/ClonesModal/utils.d.ts

@@ -0,0 +1,7 @@
+export declare const getTags: ({ pool, snapshotId, }: {
+    pool: string | null;
+    snapshotId: string | null;
+}) => {
+    name: string;
+    value: string;
+}[];

package/pages/Instance/Clones/ClonesModal/utils.js

@@ -0,0 +1,14 @@
+/*--------------------------------------------------------------------------
+ * 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
+ *--------------------------------------------------------------------------
+ */
+export const getTags = ({ pool, snapshotId, }) => {
+    const tags = [];
+    if (pool)
+        tags.push({ name: 'Disk', value: pool });
+    if (snapshotId)
+        tags.push({ name: 'Snapshot', value: snapshotId });
+    return tags;
+};

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare type Props = {
+    value: React.ReactNode;
+    children: React.ReactNode;
+};
+export declare const Item: (props: Props) => JSX.Element;
+export {};

package/pages/Instance/Clones/Header/Item/index.js

@@ -0,0 +1,5 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import styles from './styles.module.scss';
+export const Item = (props) => {
+    return (_jsxs("div", { className: styles.root, children: [_jsx("div", { className: styles.value, children: props.value }), _jsx("div", { className: styles.description, children: props.children })] }));
+};

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

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare type Props = {
+    expectedCloningTimeS: number;
+    logicalSize: number | null;
+    clonesCount: number;
+    clonesCountLastMonth?: number;
+};
+export declare const Header: (props: Props) => JSX.Element;
+export {};

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

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } 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 { formatBytesIEC } from '@postgres.ai/shared/utils/units';
+import { Item } from './Item';
+import styles from './styles.module.scss';
+export const Header = (props) => {
+    const { expectedCloningTimeS, logicalSize, clonesCount, clonesCountLastMonth, } = props;
+    return (_jsxs("div", { className: styles.root, children: [_jsxs(Item, { value: expectedCloningTimeS ? `${expectedCloningTimeS} s` : '-', children: ["average", _jsx("br", {}), "cloning time"] }), _jsxs(Item, { value: logicalSize ? formatBytesIEC(logicalSize, { precision: 2 }) : '-', children: ["logical", _jsx("br", {}), "data size"] }), _jsxs(Item, { value: clonesCount, children: ["clones", _jsx("br", {}), "now"] }), _jsxs(Item, { value: logicalSize
+                    ? formatBytesIEC(logicalSize * clonesCount, { precision: 2 })
+                    : '-', children: ["total", _jsx("br", {}), "size of clones"] }), clonesCountLastMonth && (_jsxs(Item, { value: clonesCountLastMonth, children: ["clones", _jsx("br", {}), "in last month"] }))] }));
+};

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

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

package/pages/Instance/Clones/index.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } 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 { makeStyles, useMediaQuery } from '@material-ui/core';
+import { useHistory } from 'react-router-dom';
+import { observer } from 'mobx-react-lite';
+import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle';
+import { Button } from '@postgres.ai/shared/components/Button2';
+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 './ClonesList';
+import { Header } from './Header';
+const SHORT_LIST_SIZE = 3;
+const useStyles = makeStyles((theme) => ({
+    root: {
+        width: 0,
+        flex: '1 1 100%',
+        marginRight: '40px',
+        height: '100%',
+        [theme.breakpoints.down('sm')]: {
+            width: '100%',
+            marginRight: 0,
+        },
+    },
+    listSizeButton: {
+        marginTop: '12px',
+    },
+    infoIcon: {
+        height: '12px',
+        width: '12px',
+        marginLeft: '8px',
+        color: '#808080',
+    },
+}), { index: 1 });
+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'));
+    const [isShortListForMobile, setIsShortListForMobile] = useState(true);
+    const stores = useStores();
+    const host = useHost();
+    const { instance } = stores.main;
+    if (!instance || !instance.state)
+        return null;
+    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: [!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 && !onlyRenderList && (_jsx(Button, { className: classes.listSizeButton, onClick: toggleListSize, children: isShortList ? 'Show more' : 'Show less' }))] }));
+});

package/pages/Instance/Configuration/Header/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+declare type Props = {
+    retrievalMode: string;
+    setOpen: () => void;
+};
+export declare const ConfigSectionTitle: ({ tag }: {
+    tag: string;
+}) => JSX.Element;
+export declare const Header: (props: Props) => JSX.Element;
+export declare const ModalTitle: () => JSX.Element;
+export {};

package/pages/Instance/Configuration/Header/index.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } 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 classNames from 'classnames';
+import { Link, Typography } from '@material-ui/core';
+import Box from '@mui/material/Box';
+import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle';
+import { ExternalIcon } from '@postgres.ai/shared/icons/External';
+import styles from '../styles.module.scss';
+export const ConfigSectionTitle = ({ tag }) => (_jsx(SectionTitle, { level: 2, tag: "h2", text: _jsxs("div", { className: styles.sectionTitle, children: [_jsx("p", { children: "Section" }), _jsxs("p", { children: ["\"", tag, "\""] })] }) }));
+const DOCS_URL = 'https://postgres.ai/docs/reference-guides/database-lab-engine-configuration-reference';
+export const Header = (props) => (_jsxs("div", { className: styles.root, children: [_jsxs(Box, { mb: 3, children: [_jsx(Typography, { paragraph: true, children: "Only select parameters can be changed here." }), _jsxs(Typography, { paragraph: true, children: ["However, you can still see", ' ', _jsx(Link, { href: "#", underline: "always", onClick: props.setOpen, className: styles.externalLink, children: "the full config" }), ". For details, read", ' ', _jsxs("a", { href: DOCS_URL, target: "_blank", className: styles.externalLink, children: ["the docs", _jsx(ExternalIcon, { className: styles.externalIcon })] }), "."] }), _jsxs(Typography, { paragraph: true, children: [_jsx("strong", { children: "Data retrieval mode" }), ": ", props.retrievalMode] })] }), _jsx(ConfigSectionTitle, { tag: "global" })] }));
+export const ModalTitle = () => (_jsxs("div", { children: [_jsx(Typography, { className: styles.modalTitle, children: "Full configuration file (view only)" }), _jsxs(Typography, { variant: "h3", children: ["Sensitive values are masked. For details, read", ' ', _jsxs("a", { href: DOCS_URL, target: "_blank", className: styles.externalLink, children: ["the docs", _jsx(ExternalIcon, { className: classNames(styles.externalIcon, styles.largeIcon) })] }), "."] })] }));

package/pages/Instance/Configuration/InputWithTooltip/index.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+export declare const InputWithTooltip: ({ value, label, error, onChange, tooltipText, disabled, type, }: {
+    value?: string | undefined;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    tooltipText: () => React.ReactNode;
+    label: string;
+    error?: string | undefined;
+    disabled: boolean | undefined;
+    type?: string | undefined;
+}) => JSX.Element;
+export declare const InputWithChip: ({ value, label, id, onChange, tooltipText, disabled, handleDeleteChip, }: {
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    tooltipText: () => React.ReactNode;
+    handleDeleteChip: (event: React.FormEvent<HTMLInputElement>, uniqueValue: string, label: string) => void;
+    label: string;
+    id: string;
+    disabled: boolean | undefined;
+}) => JSX.Element;
+export declare const SelectWithTooltip: ({ value, label, error, onChange, tooltipText, disabled, loading, items, }: {
+    value: string;
+    onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    tooltipText: () => React.ReactNode;
+    label: string;
+    error?: boolean | undefined;
+    disabled: boolean | undefined;
+    loading?: boolean | undefined;
+    items: {
+        value: string;
+        children: React.ReactNode;
+    }[];
+}) => JSX.Element;

package/pages/Instance/Configuration/InputWithTooltip/index.js

@@ -0,0 +1,64 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import classNames from 'classnames';
+import Box from '@mui/material/Box';
+import { TextField, Chip, makeStyles } from '@material-ui/core';
+import { Select } from '@postgres.ai/shared/components/Select';
+import { InfoIcon } from '@postgres.ai/shared/icons/Info';
+import { Tooltip } from '@postgres.ai/shared/components/Tooltip';
+import { Spinner } from '@postgres.ai/shared/components/Spinner';
+import { uniqueChipValue } from '../utils';
+import styles from '../styles.module.scss';
+const useStyles = makeStyles({
+    textField: {
+        '& .MuiOutlinedInput-notchedOutline': {
+            borderColor: '#000 !important',
+        },
+    },
+    selectField: {
+        marginTop: '0',
+        '& .MuiInputBase-root': {
+            padding: '6px',
+        },
+        '& .MuiSelect-select:focus': {
+            backgroundColor: 'inherit',
+        },
+    },
+    label: {
+        display: 'block',
+    },
+    error: {
+        color: '#f44336',
+    },
+    infoIcon: {
+        position: 'relative',
+    },
+    absoluteSpinner: {
+        position: 'absolute',
+        left: 'calc(50% - 40px)',
+        top: 'calc(50% - 5px)',
+    },
+}, { 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("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: 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("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("div", { className: styles.infoIcon, children: _jsx(InfoIcon, {}) }) })] })] }));
+};