@postgres.ai/shared 3.5.0-pr-1027 → 3.5.0-pr-1035.1

package/pages/Instance/components/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/components/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: 'Destroy 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/components/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/components/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 destroy it, disable the destroy 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 destroy the Database Lab clone: "${cloneId}"?`;
+    return window.confirm(message);
+};

package/pages/Instance/components/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/components/ClonesList/index.js

@@ -0,0 +1,52 @@
+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 { MenuCell } from './MenuCell';
+import { ConnectionModal } from './ConnectionModal';
+import styles from './styles.module.scss';
+export const ClonesList = (props) => {
+    var _a;
+    const host = useHost();
+    const history = useHistory();
+    const [cloneIdForConnect, setCloneIdForConnect] = useState(null);
+    const [isOpenConnectionModal, setIsOpenConnectionModal] = useState(false);
+    const openConnectionModal = (cloneId) => {
+        setCloneIdForConnect(cloneId);
+        setIsOpenConnectionModal(true);
+    };
+    const closeConnectionModal = () => {
+        setIsOpenConnectionModal(false);
+    };
+    if (!((_a = props.clones) === null || _a === void 0 ? void 0 : _a.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: _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", { className: styles.verticalCentered, children: ["Created", _jsx(ArrowDropDownIcon, { className: 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: props.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.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, " (", 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, " (", formatDistanceToNowStrict(clone.snapshot.dataStateAtDate, {
+                                                        addSuffix: true,
+                                                    }), ")"] })) : ('-') })] }, clone.id));
+                            }) })] }) }), cloneIdForConnect && (_jsx(ConnectionModal, { cloneId: cloneIdForConnect, isOpen: isOpenConnectionModal, onClose: closeConnectionModal }))] }));
+};

package/pages/Instance/components/ErrorStub/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare type Props = {
+    title?: string;
+    message: string;
+    className?: string;
+    size?: 'big' | 'normal';
+};
+export declare const ErrorStub: (props: Props) => JSX.Element;
+export {};

package/pages/Instance/components/ErrorStub/index.js

@@ -0,0 +1,42 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Paper, makeStyles } from '@material-ui/core';
+import clsx from 'clsx';
+const useStyles = makeStyles({
+    '*': {
+        margin: 0,
+    },
+    root: {
+        color: '#c00111',
+        overflowWrap: 'break-word',
+    },
+    rootBig: {
+        padding: '16px 24px',
+        '& $title': {
+            fontSize: '16px',
+        },
+        '& $message': {
+            marginTop: '16px',
+            fontSize: '14px',
+        },
+    },
+    rootNormal: {
+        padding: '8px 16px',
+        '& $title': {
+            fontSize: '14px',
+        },
+        '& $message': {
+            marginTop: '12px',
+            fontSize: '12px',
+        },
+    },
+    title: {
+        fontWeight: 700,
+        textTransform: 'uppercase',
+    },
+    message: {},
+}, { index: 1 });
+export const ErrorStub = (props) => {
+    const { title = 'Unknown error', message, className, size = 'big' } = props;
+    const classes = useStyles();
+    return (_jsxs(Paper, { className: clsx(classes.root, size === 'big' && classes.rootBig, size === 'normal' && classes.rootNormal, className), children: [_jsx("h2", { className: classes.title, children: title }), _jsx("p", { className: classes.message, children: message })] }));
+};

package/pages/Instance/components/ModalReloadButton/index.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+declare type Props = {
+    isReloading: boolean;
+    onReload: () => void;
+};
+export declare const ModalReloadButton: (props: Props) => JSX.Element;
+export {};

package/pages/Instance/components/ModalReloadButton/index.js

@@ -0,0 +1,22 @@
+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 { Button } from '@postgres.ai/shared/components/Button2';
+const useStyles = makeStyles({
+    spinner: {
+        margin: '5px',
+    },
+    content: {
+        flex: '0 0 auto',
+        alignSelf: 'flex-start',
+    },
+}, { index: 1 });
+export const ModalReloadButton = (props) => {
+    const classes = useStyles();
+    return (_jsx(Button, { onClick: props.onReload, className: classes.content, isLoading: props.isReloading, isDisabled: props.isReloading, children: "Reload info" }));
+};

package/pages/Instance/components/Tags/Tag/index.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+declare type Props = {
+    name: string;
+    children: React.ReactNode;
+};
+export declare const Tag: (props: Props) => JSX.Element;
+export {};

package/pages/Instance/components/Tags/Tag/index.js

@@ -0,0 +1,35 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { makeStyles } from '@material-ui/core';
+import { HorizontalScrollContainer } from '@postgres.ai/shared/components/HorizontalScrollContainer';
+import { colors } from '@postgres.ai/shared/styles/vars';
+const useStyles = makeStyles({
+    root: {
+        fontSize: '12px',
+        marginRight: '8px',
+        marginBottom: '8px',
+        borderRadius: '12px',
+        background: colors.gray,
+    },
+    content: {
+        padding: '5px 8px',
+        whiteSpace: 'nowrap',
+    },
+    curtainLeft: {
+        background: 'linear-gradient(to right, rgba(0,0,0,0.1), transparent);',
+    },
+    curtainRight: {
+        background: 'linear-gradient(to left, rgba(0,0,0,0.1), transparent);',
+    },
+    value: {
+        fontWeight: 700,
+    },
+}, { index: 1 });
+export const Tag = (props) => {
+    const classes = useStyles();
+    return (_jsxs(HorizontalScrollContainer, { classes: {
+            root: classes.root,
+            content: classes.content,
+            curtainLeft: classes.curtainLeft,
+            curtainRight: classes.curtainRight,
+        }, children: [props.name, ": ", _jsx("span", { className: classes.value, children: props.children })] }));
+};

package/pages/Instance/components/Tags/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare type TagsProps = {
+    data: {
+        name: string;
+        value: string;
+    }[];
+};
+export declare const Tags: (props: TagsProps) => JSX.Element;

package/pages/Instance/components/Tags/index.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { makeStyles } from '@material-ui/core';
+import { Tag } from './Tag';
+const useStyles = makeStyles({
+    root: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        marginRight: '-8px',
+    },
+}, { index: 1 });
+export const Tags = (props) => {
+    const classes = useStyles();
+    return (_jsx("div", { className: classes.root, children: props.data.map((tag) => {
+            return (_jsx(Tag, { name: tag.name, children: tag.value }, tag.name));
+        }) }));
+};

package/pages/Instance/context.d.ts

@@ -0,0 +1,31 @@
+/// <reference types="react" />
+import { Api } from './stores/Main';
+export declare type Host = {
+    instanceId: string;
+    routes: {
+        createClone: () => string;
+        clone: (cloneId: string) => string;
+    };
+    api: Api;
+    title: string;
+    callbacks?: {
+        showDeprecatedApiBanner: () => void;
+        hideDeprecatedApiBanner: () => void;
+    };
+    elements: {
+        breadcrumbs: React.ReactNode;
+    };
+    wsHost?: string;
+    isPlatform?: boolean;
+    setProjectAlias?: (alias: string) => void;
+};
+export declare const useHost: () => Host, HostProvider: import("react").Provider<Host>;
+export declare const useStores: () => {
+    main: import("./stores/Main").MainStore;
+    clonesModal: import("./stores/ClonesModal").ClonesModalStore;
+    snapshotsModal: import("./stores/SnapshotsModal").SnapshotsModalStore;
+}, StoresProvider: import("react").Provider<{
+    main: import("./stores/Main").MainStore;
+    clonesModal: import("./stores/ClonesModal").ClonesModalStore;
+    snapshotsModal: import("./stores/SnapshotsModal").SnapshotsModalStore;
+}>;

package/pages/Instance/{ClonesModal/utils.ts → context.js}

@@ -4,18 +4,8 @@
  * Unauthorized copying of this file, via any medium is strictly prohibited
  *--------------------------------------------------------------------------
  */
-
-export const getTags = ({
-  pool,
-  snapshotId,
-}: {
-  pool: string | null
-  snapshotId: string | null
-}) => {
-  const tags = []
-
-  if (pool) tags.push({ name: 'Disk', value: pool })
-  if (snapshotId) tags.push({ name: 'Snapshot', value: snapshotId })
-
-  return tags
-}
+import { createStrictContext } from '@postgres.ai/shared/utils/react';
+// Host context.
+export const { useStrictContext: useHost, Provider: HostProvider } = createStrictContext();
+// Stores context.
+export const { useStrictContext: useStores, Provider: StoresProvider } = createStrictContext();

package/pages/Instance/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Host } from './context';
+import './styles.scss';
+declare type Props = Host;
+export declare const Instance: ((props: Props) => JSX.Element) & {
+    displayName: string;
+};
+export {};

package/pages/Instance/index.js

@@ -0,0 +1,93 @@
+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 React, { useEffect } from 'react';
+import { makeStyles } from '@material-ui/core';
+import { observer } from 'mobx-react-lite';
+import { Button } from '@postgres.ai/shared/components/Button2';
+import { StubSpinner } from '@postgres.ai/shared/components/StubSpinner';
+import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle';
+import { ErrorStub } from '@postgres.ai/shared/components/ErrorStub';
+import { Tabs } from './Tabs';
+import { Logs } from '../Logs';
+import { Clones } from './Clones';
+import { Info } from './Info';
+import { Configuration } from '../Configuration';
+import { ClonesModal } from './ClonesModal';
+import { SnapshotsModal } from './SnapshotsModal';
+import { InactiveInstance } from './InactiveInstance';
+import { HostProvider, StoresProvider } from './context';
+import Typography from '@material-ui/core/Typography';
+import Box from '@mui/material/Box';
+import { useCreatedStores } from './useCreatedStores';
+import './styles.scss';
+const useStyles = makeStyles((theme) => ({
+    title: {
+        marginTop: '8px',
+    },
+    reloadButton: {
+        flex: '0 0 auto',
+        alignSelf: 'flex-start',
+    },
+    errorStub: {
+        marginTop: '16px',
+    },
+    content: {
+        display: 'flex',
+        marginTop: '16px',
+        position: 'relative',
+        flex: '1 1 100%',
+        height: '100%',
+        [theme.breakpoints.down('sm')]: {
+            flexDirection: 'column',
+        },
+    },
+}), { index: 1 });
+export const Instance = observer((props) => {
+    var _a, _b, _c, _d;
+    const classes = useStyles();
+    const { instanceId, api } = props;
+    const [activeTab, setActiveTab] = React.useState(0);
+    const [hasBeenRedirected, setHasBeenRedirected] = React.useState(false);
+    const stores = useCreatedStores(props);
+    const { instance, instanceError, instanceRetrieval, isLoadingInstance, load, reload, } = stores.main;
+    const switchTab = (_, tabID) => {
+        const contentElement = document.getElementById('content-container');
+        setActiveTab(tabID);
+        if (tabID === 0) {
+            load(props.instanceId);
+        }
+        contentElement === null || contentElement === void 0 ? void 0 : contentElement.scroll(0, 0);
+    };
+    const isInstanceIntegrated = instanceRetrieval ||
+        (!isLoadingInstance && instance && (instance === null || instance === void 0 ? void 0 : instance.url) && !instanceError);
+    const isConfigurationActive = (instanceRetrieval === null || instanceRetrieval === void 0 ? void 0 : instanceRetrieval.mode) !== 'physical';
+    useEffect(() => {
+        load(instanceId);
+    }, [instanceId]);
+    useEffect(() => {
+        if (props.setProjectAlias)
+            props.setProjectAlias((instance === null || instance === void 0 ? void 0 : instance.projectAlias) || '');
+    }, [instance]);
+    useEffect(() => {
+        var _a, _b;
+        if (instance &&
+            ((_b = (_a = instance === null || instance === void 0 ? void 0 : instance.state) === null || _a === void 0 ? void 0 : _a.retrieving) === null || _b === void 0 ? void 0 : _b.status) === 'pending' &&
+            isConfigurationActive &&
+            !props.isPlatform &&
+            !hasBeenRedirected) {
+            setActiveTab(2);
+            setHasBeenRedirected(true);
+        }
+    }, [instance, hasBeenRedirected]);
+    return (_jsx(HostProvider, { value: props, children: _jsxs(StoresProvider, { value: stores, children: [props.elements.breadcrumbs, _jsx(SectionTitle, { text: props.title, level: 1, tag: "h1", className: classes.title, rightContent: _jsx(Button, { onClick: () => reload(props.instanceId), isDisabled: !instance && !instanceError, className: classes.reloadButton, children: "Reload info" }), children: isInstanceIntegrated && (_jsx(Tabs, { isPlatform: props.isPlatform, value: activeTab, handleChange: switchTab, hasLogs: api.initWS != undefined })) }), instanceError && (_jsx(ErrorStub, { ...instanceError, className: classes.errorStub })), isInstanceIntegrated ? (_jsxs(_Fragment, { children: [_jsxs(TabPanel, { value: activeTab, index: 0, children: [!instanceError && (_jsxs("div", { className: classes.content, children: [!instance ||
+                                            (!((_b = (_a = instance === null || instance === void 0 ? void 0 : instance.state) === null || _a === void 0 ? void 0 : _a.retrieving) === null || _b === void 0 ? void 0 : _b.status) && _jsx(StubSpinner, {})), instance ? (_jsxs(_Fragment, { children: [_jsx(Clones, {}), _jsx(Info, {})] })) : (_jsx(StubSpinner, {}))] })), _jsx(ClonesModal, {}), _jsx(SnapshotsModal, {})] }), !props.isPlatform && (_jsxs(_Fragment, { children: [_jsx(TabPanel, { value: activeTab, index: 1, children: activeTab === 1 && _jsx(Logs, { api: api }) }), _jsx(TabPanel, { value: activeTab, index: 2, children: _jsx(Configuration, { isConfigurationActive: isConfigurationActive, disableConfigModification: (_c = instance === null || instance === void 0 ? void 0 : instance.state) === null || _c === void 0 ? void 0 : _c.engine.disableConfigModification, switchActiveTab: switchTab, reload: () => load(props.instanceId) }) })] }))] })) : !isLoadingInstance && !instanceError ? (_jsx(TabPanel, { value: activeTab, index: activeTab, children: _jsx(InactiveInstance, { instance: instance, org: (_d = props.elements.breadcrumbs) === null || _d === void 0 ? void 0 : _d.props.org }) })) : (!instanceError && (_jsx(TabPanel, { value: activeTab, index: 0, children: _jsx("div", { className: classes.content, children: _jsx(StubSpinner, {}) }) })))] }) }));
+});
+function TabPanel(props) {
+    const { children, value, index, ...other } = props;
+    return (_jsx(Typography, { component: "div", role: "tabpanel", hidden: value !== index, id: `scrollable-auto-tabpanel-${index}`, "aria-labelledby": `scrollable-auto-tab-${index}`, ...other, children: _jsx(Box, { p: 3, sx: { height: '100%' }, children: children }) }));
+}

package/pages/Instance/stores/ClonesModal.d.ts

@@ -0,0 +1,13 @@
+declare type FilterOptions = {
+    pool?: string | null;
+    snapshotId?: string;
+};
+export declare class ClonesModalStore {
+    isOpenModal: boolean;
+    pool: string | null;
+    snapshotId: string | null;
+    constructor();
+    openModal: (filterOptions?: FilterOptions | undefined) => void;
+    closeModal: () => void;
+}
+export {};

package/pages/Instance/stores/ClonesModal.js

@@ -0,0 +1,24 @@
+/*--------------------------------------------------------------------------
+ * 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';
+export class ClonesModalStore {
+    constructor() {
+        this.isOpenModal = false;
+        this.pool = null;
+        this.snapshotId = null;
+        this.openModal = (filterOptions = {}) => {
+            const { pool = null, snapshotId = null } = filterOptions;
+            this.pool = pool;
+            this.snapshotId = snapshotId;
+            this.isOpenModal = true;
+        };
+        this.closeModal = () => {
+            this.isOpenModal = false;
+        };
+        makeAutoObservable(this);
+    }
+}

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

@@ -0,0 +1,115 @@
+import { GetSnapshots } from '@postgres.ai/shared/types/api/endpoints/getSnapshots';
+import { GetInstance } from '@postgres.ai/shared/types/api/endpoints/getInstance';
+import { Config } from '@postgres.ai/shared/types/api/entities/config';
+import { GetConfig } from '@postgres.ai/shared/types/api/endpoints/getConfig';
+import { UpdateConfig } from '@postgres.ai/shared/types/api/endpoints/updateConfig';
+import { TestDbSource } from '@postgres.ai/shared/types/api/endpoints/testDbSource';
+import { RefreshInstance } from '@postgres.ai/shared/types/api/endpoints/refreshInstance';
+import { DestroyClone } from '@postgres.ai/shared/types/api/endpoints/destroyClone';
+import { ResetClone } from '@postgres.ai/shared/types/api/endpoints/resetClone';
+import { GetWSToken } from '@postgres.ai/shared/types/api/endpoints/getWSToken';
+import { InitWS } from '@postgres.ai/shared/types/api/endpoints/initWS';
+import { Instance } from '@postgres.ai/shared/types/api/entities/instance';
+import { SnapshotsStore } from '@postgres.ai/shared/stores/Snapshots';
+import { dbSource } from '@postgres.ai/shared/types/api/entities/dbSource';
+import { GetFullConfig } from '@postgres.ai/shared/types/api/endpoints/getFullConfig';
+import { GetInstanceRetrieval } from '@postgres.ai/shared/types/api/endpoints/getInstanceRetrieval';
+import { InstanceRetrievalType } from '@postgres.ai/shared/types/api/entities/instanceRetrieval';
+import { GetEngine } from '@postgres.ai/shared/types/api/endpoints/getEngine';
+import { GetSeImages } from '@postgres.ai/shared/types/api/endpoints/getSeImages';
+export declare type Api = {
+    getInstance: GetInstance;
+    getSnapshots: GetSnapshots;
+    refreshInstance?: RefreshInstance;
+    destroyClone: DestroyClone;
+    resetClone: ResetClone;
+    getWSToken: GetWSToken;
+    initWS?: InitWS;
+    getConfig?: GetConfig;
+    updateConfig?: UpdateConfig;
+    testDbSource?: TestDbSource;
+    getFullConfig?: GetFullConfig;
+    getSeImages?: GetSeImages;
+    getEngine?: GetEngine;
+    getInstanceRetrieval?: GetInstanceRetrieval;
+};
+declare type Error = {
+    title?: string;
+    message?: string;
+};
+export declare class MainStore {
+    instance: Instance | null;
+    instanceRetrieval: InstanceRetrievalType | null;
+    config: Config | null;
+    fullConfig?: string;
+    platformUrl?: string;
+    instanceError: Error | null;
+    configError: string | null;
+    getFullConfigError: string | null;
+    seImagesError: string | undefined | null;
+    unstableClones: Set<string>;
+    readonly snapshots: SnapshotsStore;
+    isReloadingClones: boolean;
+    isConfigurationLoading: boolean;
+    isReloadingInstance: boolean;
+    isReloadingInstanceRetrieval: boolean;
+    isLoadingInstance: boolean;
+    private readonly api;
+    constructor(api: Api);
+    get isDisabledInstance(): boolean;
+    load: (instanceId: string) => void;
+    reload: (instanceId: string) => void;
+    reloadSnapshots: () => Promise<void>;
+    reloadInstanceRetrieval: () => Promise<void>;
+    private loadInstanceRetrieval;
+    private loadInstance;
+    getConfig: () => Promise<{
+        dockerPath: string | undefined;
+        tuningParams: string;
+        sharedBuffers: string | undefined;
+        sharedPreloadLibraries: string | undefined;
+        timetable: string | undefined;
+        dbname: string | undefined;
+        host: string | undefined;
+        port: string | number | undefined;
+        username: string | undefined;
+        password: string | undefined;
+        databases: string;
+        dumpParallelJobs: string | number | undefined;
+        dumpIgnoreErrors: boolean | undefined;
+        restoreParallelJobs: string | number | undefined;
+        restoreIgnoreErrors: boolean | undefined;
+        pgDumpCustomOptions: string;
+        pgRestoreCustomOptions: string;
+        dockerTag?: string | undefined;
+        dockerImageType?: string | undefined;
+        debug: boolean | undefined;
+        dockerImage: string | undefined;
+    } | null | undefined>;
+    updateConfig: (values: Config) => Promise<Response | null | undefined>;
+    getFullConfig: () => Promise<string | null | undefined>;
+    getSeImages: (values: {
+        packageGroup: string;
+    }) => Promise<import("@postgres.ai/shared/types/api/endpoints/getSeImages").SeImages[] | null | undefined>;
+    getEngine: () => Promise<import("@postgres.ai/shared/types/api/endpoints/getEngine").EngineDto | null | undefined>;
+    testDbSource: (values: dbSource) => Promise<{
+        response: {
+            status: number;
+            message: string;
+            result: string;
+            dbVersion: number;
+            tuningParams: {
+                [key: string]: string;
+            };
+        } | null;
+        error: {
+            status: number;
+            message: string;
+        };
+    } | undefined>;
+    resetClone: (cloneId: string, snapshotId: string) => Promise<boolean | undefined>;
+    destroyClone: (cloneId: string) => Promise<boolean | undefined>;
+    private liveUpdateInstance;
+    reloadClones: () => Promise<void>;
+}
+export {};