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

package/pages/Logs/wsLogs.js

@@ -1,14 +1,17 @@
 import moment from 'moment';
-import { LOGS_ENDPOINT, LOGS_LINE_LIMIT, LOGS_TIME_LIMIT, } from '@postgres.ai/shared/pages/Logs/constants';
-import { stringWithoutBrackets, stringContainsPattern, } from '@postgres.ai/shared/pages/Logs/utils';
-export const establishConnection = async (api) => {
+import { stringContainsPattern, stringWithoutBrackets } from './utils';
+const logsEndpoint = '/instance/logs';
+const LOGS_TIME_LIMIT = 20;
+const LOGS_LINE_LIMIT = 1000;
+export const establishConnection = async (api, instanceId) => {
+    if (!api.getWSToken)
+        return;
     const logElement = document.getElementById('logs-container');
     if (logElement === null) {
         console.log('Not found container element');
         return;
     }
     const appendLogElement = (logEntry, logType) => {
-        var _a;
         const tag = document.createElement('p');
         const logLevel = logEntry.split(' ')[3];
         const logInitiator = logEntry.split(' ')[2];
@@ -34,17 +37,21 @@ export const establishConnection = async (api) => {
             tag.classList.add('error-log');
         }
         if (logType === 'message') {
-            const logEntryTime = (_a = logElement.children[1]) === null || _a === void 0 ? void 0 : _a.innerHTML.split(' ').slice(0, 2).join(' ');
+            const logEntryTime = moment.utc(logElement.children[0].innerHTML.split(' ').slice(0, 2).join(' '));
             const timeDifference = moment(logEntryTime).isValid() &&
                 moment.duration(moment.utc(Date.now()).diff(logEntryTime)).asMinutes();
             if (logElement.childElementCount > LOGS_LINE_LIMIT &&
                 Number(timeDifference) > LOGS_TIME_LIMIT) {
-                logElement.removeChild(logElement.children[1]);
+                logElement.removeChild(logElement.children[0]);
             }
         }
+        if (logEntry.split(' ')[2] === '[ERROR]' ||
+            logEntry.split(' ')[3] === '[ERROR]') {
+            tag.classList.add('error-log');
+        }
     };
     const { response, error } = await api.getWSToken({
-        instanceId: '',
+        instanceId: instanceId,
     });
     if (error || response == null) {
         console.log('Not authorized:', error);
@@ -56,7 +63,7 @@ export const establishConnection = async (api) => {
         appendLogElement('WebSocket Connection is not configured');
         return;
     }
-    const socket = api.initWS(LOGS_ENDPOINT, response.token);
+    const socket = api.initWS(logsEndpoint, response.token);
     socket.onopen = () => {
         console.log('Successfully Connected');
     };
@@ -74,3 +81,12 @@ export const establishConnection = async (api) => {
         appendLogElement(logEntry, 'message');
     };
 };
+export const restartConnection = (api, instanceId) => {
+    const logElement = document.getElementById('logs-container');
+    if (logElement && logElement.childElementCount > 1) {
+        while (logElement.firstChild) {
+            logElement.removeChild(logElement.firstChild);
+        }
+    }
+    establishConnection(api, instanceId);
+};

package/pages/Logs/wsSnackbar.js

@@ -1,25 +1,25 @@
-import { LOGS_NEW_DATA_MESSAGE } from '@postgres.ai/shared/pages/Logs/constants';
+const LOGS_NEW_DATA_MESSAGE = 'New data arrived below - scroll down to see it 👇🏻';
 export const wsSnackbar = (clientAtBottom, isNewData) => {
-    var _a, _b;
+    var _a;
     const targetNode = document.getElementById('logs-container');
     const snackbarTag = document.createElement('div');
     if (!clientAtBottom && isNewData) {
         if (!(targetNode === null || targetNode === void 0 ? void 0 : targetNode.querySelector('.snackbar-tag'))) {
             targetNode === null || targetNode === void 0 ? void 0 : targetNode.appendChild(snackbarTag);
             snackbarTag.classList.add('snackbar-tag');
-            if (snackbarTag.childNodes.length === 0 &&
-                ((_a = targetNode === null || targetNode === void 0 ? void 0 : targetNode.querySelector('p')) === null || _a === void 0 ? void 0 : _a.textContent) !== 'Not authorized') {
+            if (snackbarTag.childNodes.length === 0) {
                 snackbarTag.appendChild(document.createTextNode(LOGS_NEW_DATA_MESSAGE));
             }
             snackbarTag.onclick = () => {
-                targetNode === null || targetNode === void 0 ? void 0 : targetNode.scroll({
-                    top: targetNode.scrollHeight,
+                targetNode === null || targetNode === void 0 ? void 0 : targetNode.scrollIntoView({
                     behavior: 'smooth',
+                    block: 'end',
+                    inline: 'end',
                 });
             };
         }
     }
     else {
-        (_b = targetNode === null || targetNode === void 0 ? void 0 : targetNode.querySelector('.snackbar-tag')) === null || _b === void 0 ? void 0 : _b.remove();
+        (_a = targetNode === null || targetNode === void 0 ? void 0 : targetNode.querySelector('.snackbar-tag')) === null || _a === void 0 ? void 0 : _a.remove();
     }
 };

package/pages/Snapshots/Snapshot/DestorySnapshotModal/index.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { DestroySnapshot } from '@postgres.ai/shared/types/api/endpoints/destroySnapshot';
+declare type Props = {
+    snapshotId: string;
+    instanceId: string;
+    isOpen: boolean;
+    onClose: () => void;
+    afterSubmitClick: () => void;
+    destroySnapshot: DestroySnapshot;
+};
+export declare const DestroySnapshotModal: ({ snapshotId, instanceId, isOpen, onClose, afterSubmitClick, destroySnapshot, }: Props) => JSX.Element;
+export {};

package/pages/Snapshots/Snapshot/DestorySnapshotModal/index.js

@@ -0,0 +1,69 @@
+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 { Checkbox, FormControlLabel, Typography, makeStyles, } from '@material-ui/core';
+import { Modal } from '@postgres.ai/shared/components/Modal';
+import { ImportantText } from '@postgres.ai/shared/components/ImportantText';
+import { Text } from '@postgres.ai/shared/components/Text';
+import { SimpleModalControls } from '@postgres.ai/shared/components/SimpleModalControls';
+const useStyles = makeStyles({
+    errorMessage: {
+        color: 'red',
+        marginTop: '10px',
+        wordBreak: 'break-all',
+    },
+    checkboxRoot: {
+        padding: '9px 10px',
+    },
+    grayText: {
+        color: '#8a8a8a',
+        fontSize: '12px',
+        wordBreak: 'break-word',
+    },
+    marginTop: {
+        marginTop: '6px',
+    },
+}, { index: 1 });
+export const DestroySnapshotModal = ({ snapshotId, instanceId, isOpen, onClose, afterSubmitClick, destroySnapshot, }) => {
+    const classes = useStyles();
+    const [forceDelete, setForceDelete] = useState(false);
+    const [deleteError, setDeleteError] = useState(null);
+    const [isForceDeleteOptionVisible, setForceDeleteOptionVisible] = useState(false);
+    const handleClose = () => {
+        setDeleteError(null);
+        onClose();
+    };
+    const handleClickDestroy = () => {
+        destroySnapshot(snapshotId, forceDelete, instanceId).then((res) => {
+            var _a, _b;
+            if (res === null || res === void 0 ? void 0 : res.error) {
+                const errorMessage = ((_a = res === null || res === void 0 ? void 0 : res.error) === null || _a === void 0 ? void 0 : _a.message) ||
+                    ((_b = res === null || res === void 0 ? void 0 : res.error) === null || _b === void 0 ? void 0 : _b.details);
+                setDeleteError(errorMessage || null);
+                setForceDeleteOptionVisible(true);
+            }
+            else {
+                afterSubmitClick();
+                handleClose();
+            }
+        });
+    };
+    return (_jsxs(Modal, { title: 'Confirmation', onClose: handleClose, isOpen: isOpen, size: "sm", children: [_jsxs(Text, { children: ["Are you sure you want to delete snapshot", ' ', _jsx(ImportantText, { children: snapshotId }), "? This action cannot be undone."] }), deleteError && _jsx("p", { className: classes.errorMessage, children: deleteError }), isForceDeleteOptionVisible && (_jsxs("div", { className: classes.marginTop, children: [_jsx(FormControlLabel, { control: _jsx(Checkbox, { name: "debug", checked: forceDelete, onChange: (e) => setForceDelete(e.target.checked), classes: {
+                                root: classes.checkboxRoot,
+                            } }), label: 'Force delete' }), _jsx(Typography, { className: classes.grayText, children: "If the snapshot cannot be deleted due to dependencies, enabling \u201CForce delete\u201D will remove it along with all dependent snapshots and clones." })] })), _jsx(SimpleModalControls, { items: [
+                    {
+                        text: 'Cancel',
+                        onClick: handleClose,
+                    },
+                    {
+                        text: 'Delete snapshot',
+                        variant: 'primary',
+                        onClick: handleClickDestroy,
+                    },
+                ] })] }));
+};

package/pages/Snapshots/Snapshot/context.d.ts

@@ -0,0 +1,23 @@
+/// <reference types="react" />
+import { Api } from './stores/Main';
+export declare type Host = {
+    instanceId: string;
+    snapshotId: string;
+    routes: {
+        snapshot: () => string;
+        snapshots: () => string;
+        branch: (branchName: string) => string;
+        clone: (cloneId: string) => string;
+        createClone: (branchId: string, snapshotId: string) => string;
+    };
+    api: Api;
+    elements: {
+        breadcrumbs: React.ReactNode;
+    };
+};
+export declare const useHost: () => Host, HostProvider: import("react").Provider<Host>;
+export declare const useStores: () => {
+    main: import("./stores/Main").MainStore;
+}, StoresProvider: import("react").Provider<{
+    main: import("./stores/Main").MainStore;
+}>;

package/pages/Snapshots/Snapshot/context.js

@@ -0,0 +1,3 @@
+import { createStrictContext } from '@postgres.ai/shared/utils/react';
+export const { useStrictContext: useHost, Provider: HostProvider } = createStrictContext();
+export const { useStrictContext: useStores, Provider: StoresProvider } = createStrictContext();

package/pages/Snapshots/Snapshot/index.d.ts

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

package/pages/Snapshots/Snapshot/index.js

@@ -0,0 +1,171 @@
+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 { useEffect, useState } from 'react';
+import { useHistory } from 'react-router';
+import { observer } from 'mobx-react-lite';
+import copyToClipboard from 'copy-to-clipboard';
+import { makeStyles, Button, TextField, IconButton, Table, TableHead, TableRow, TableBody, } from '@material-ui/core';
+import { ErrorStub } from '@postgres.ai/shared/components/ErrorStub';
+import { PageSpinner } from '@postgres.ai/shared/components/PageSpinner';
+import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle';
+import { DestroySnapshotModal } from '@postgres.ai/shared/pages/Snapshots/Snapshot/DestorySnapshotModal';
+import { HorizontalScrollContainer } from '@postgres.ai/shared/components/HorizontalScrollContainer';
+import { Tooltip } from '@postgres.ai/shared/components/Tooltip';
+import { icons } from '@postgres.ai/shared/styles/icons';
+import { formatBytesIEC } from '@postgres.ai/shared/utils/units';
+import { styles } from '@postgres.ai/shared/styles/styles';
+import { SyntaxHighlight } from '@postgres.ai/shared/components/SyntaxHighlight';
+import { TableBodyCell, TableBodyCellMenu, TableHeaderCell, } from '@postgres.ai/shared/components/Table';
+import { useCreatedStores } from './useCreatedStores';
+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',
+        },
+    },
+    marginTop: {
+        marginTop: '16px',
+    },
+    title: {
+        marginTop: '8px',
+        lineHeight: '26px'
+    },
+    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',
+    },
+    actions: {
+        display: 'flex',
+        marginRight: '-16px',
+    },
+    spinner: {
+        marginLeft: '8px',
+    },
+    actionButton: {
+        marginRight: '16px',
+    },
+    summary: {
+        marginTop: 20,
+    },
+    text: {
+        marginTop: '4px',
+    },
+    cliText: {
+        marginTop: '8px',
+    },
+    paramTitle: {
+        display: 'inline-block',
+        width: 200,
+    },
+    copyFieldContainer: {
+        position: 'relative',
+        display: 'block',
+        maxWidth: 525,
+        width: '100%',
+    },
+    tableContainer: {
+        position: 'relative',
+        maxWidth: 525,
+        width: '100%',
+        margin: '10px 0',
+    },
+    textField: {
+        ...styles.inputField,
+        'max-width': 525,
+        display: 'inline-block',
+        '& .MuiOutlinedInput-input': {
+            paddingRight: '32px!important',
+        },
+    },
+    copyButton: {
+        position: 'absolute',
+        top: 16,
+        right: 0,
+        zIndex: 100,
+        width: 32,
+        height: 32,
+        padding: 8,
+    },
+    pointerCursor: {
+        cursor: 'pointer',
+    },
+    centerContent: {
+        display: 'flex',
+        gap: 1,
+        alignItems: 'center',
+    },
+    tableCellMenu: {
+        width: 50,
+        display: 'table-cell',
+    },
+}), { index: 1 });
+export const SnapshotPage = observer((props) => {
+    var _a;
+    const classes = useStyles();
+    const history = useHistory();
+    const stores = useCreatedStores(props.api);
+    const [isOpenDestroyModal, setIsOpenDestroyModal] = useState(false);
+    const { snapshot, branchSnapshot, isSnapshotsLoading, snapshotError, branchSnapshotError, load, } = stores.main;
+    const afterSubmitClick = () => {
+        history.push(props.routes.snapshots());
+        load(props.snapshotId, props.instanceId);
+    };
+    const headRendered = (_jsxs(_Fragment, { children: [_jsx("style", { children: 'p { margin: 0;}' }), props.elements.breadcrumbs, _jsx(SectionTitle, { className: classes.title, tag: "h1", level: 1, text: `Snapshot ${props.snapshotId}`, children: _jsx(InstanceTabs, { tab: TABS_INDEX.SNAPSHOTS, isPlatform: props.isPlatform, instanceId: props.instanceId, hasLogs: props.api.initWS !== undefined }) })] }));
+    useEffect(() => {
+        load(props.snapshotId, props.instanceId);
+    }, []);
+    if (isSnapshotsLoading)
+        return _jsx(PageSpinner, {});
+    if (snapshotError || branchSnapshotError) {
+        return (_jsxs(_Fragment, { children: [headRendered, _jsx(ErrorStub, { title: (snapshotError === null || snapshotError === void 0 ? void 0 : snapshotError.title) || (branchSnapshotError === null || branchSnapshotError === void 0 ? void 0 : branchSnapshotError.title), message: (snapshotError === null || snapshotError === void 0 ? void 0 : snapshotError.message) || (branchSnapshotError === null || branchSnapshotError === void 0 ? void 0 : branchSnapshotError.message), className: classes.marginTop })] }));
+    }
+    return (_jsxs(_Fragment, { children: [headRendered, _jsxs("div", { className: classes.wrapper, children: [_jsxs("div", { className: classes.container, children: [_jsxs("div", { className: classes.actions, children: [_jsx(Button, { variant: "contained", color: "primary", onClick: () => history.push(props.routes.createClone(snapshot === null || snapshot === void 0 ? void 0 : snapshot.branch, snapshot === null || snapshot === void 0 ? void 0 : snapshot.id)), title: 'Create clone', className: classes.actionButton, children: "Create clone" }), _jsx(Button, { variant: "contained", color: "primary", onClick: () => setIsOpenDestroyModal(true), title: 'Delete this snapshot', className: classes.actionButton, children: "Delete snapshot" })] }), _jsx("br", {}), _jsxs("div", { children: [_jsxs("div", { children: [_jsx("p", { children: _jsx("strong", { children: "Created" }) }), _jsx("p", { className: classes.text, children: snapshot === null || snapshot === void 0 ? void 0 : snapshot.createdAt })] }), _jsx("br", {}), _jsxs("div", { children: [_jsxs("p", { children: [_jsx("strong", { children: "Data state at" }), "\u00A0", _jsx(Tooltip, { content: _jsxs(_Fragment, { children: [_jsx("strong", { children: "Data state time" }), " is a time at which data is\u00A0 recovered for this snapshot."] }), children: icons.infoIcon })] }), _jsx("p", { className: classes.text, children: (snapshot === null || snapshot === void 0 ? void 0 : snapshot.dataStateAt) || '-' })] }), _jsxs("div", { className: classes.summary, children: [_jsxs("p", { children: [_jsx("strong", { children: "Summary" }), "\u00A0"] }), _jsxs("p", { className: classes.text, children: [_jsx("span", { className: classes.paramTitle, children: "Number of clones:" }), snapshot === null || snapshot === void 0 ? void 0 : snapshot.numClones] }), _jsxs("p", { className: classes.text, children: [_jsx("span", { className: classes.paramTitle, children: "Logical data size:" }), (snapshot === null || snapshot === void 0 ? void 0 : snapshot.logicalSize)
+                                                        ? formatBytesIEC(snapshot.logicalSize)
+                                                        : '-'] }), _jsxs("p", { className: classes.text, children: [_jsx("span", { className: classes.paramTitle, children: "Physical data diff size:" }), (snapshot === null || snapshot === void 0 ? void 0 : snapshot.physicalSize)
+                                                        ? formatBytesIEC(snapshot.physicalSize)
+                                                        : '-'] }), (branchSnapshot === null || branchSnapshot === void 0 ? void 0 : branchSnapshot.message) && (_jsxs("p", { className: classes.text, children: [_jsx("span", { className: classes.paramTitle, children: "Message:" }), branchSnapshot.message] }))] }), _jsx("br", {}), _jsx("p", { children: _jsx("strong", { children: "Snapshot info" }) }), (snapshot === null || snapshot === void 0 ? void 0 : snapshot.pool) && (_jsxs("div", { className: classes.copyFieldContainer, children: [_jsx(TextField, { variant: "outlined", label: "snapshot pool", value: snapshot.pool, className: classes.textField, margin: "normal", fullWidth: true, InputLabelProps: {
+                                                    shrink: true,
+                                                    style: styles.inputFieldLabel,
+                                                }, FormHelperTextProps: {
+                                                    style: styles.inputFieldHelper,
+                                                } }), _jsx(IconButton, { className: classes.copyButton, "aria-label": "Copy", onClick: () => copyToClipboard(snapshot.pool), children: icons.copyIcon })] })), _jsxs("div", { className: classes.copyFieldContainer, children: [_jsx(TextField, { variant: "outlined", label: "snapshot ID", value: snapshot === null || snapshot === void 0 ? void 0 : snapshot.id, className: classes.textField, margin: "normal", fullWidth: true, InputLabelProps: {
+                                                    shrink: true,
+                                                    style: styles.inputFieldLabel,
+                                                }, FormHelperTextProps: {
+                                                    style: styles.inputFieldHelper,
+                                                } }), _jsx(IconButton, { className: classes.copyButton, "aria-label": "Copy", onClick: () => copyToClipboard(String(snapshot === null || snapshot === void 0 ? void 0 : snapshot.id)), children: icons.copyIcon })] }), _jsx("br", {}), (branchSnapshot === null || branchSnapshot === void 0 ? void 0 : branchSnapshot.branch) && ((_a = branchSnapshot.branch) === null || _a === void 0 ? void 0 : _a.length) > 0 && (_jsxs(_Fragment, { children: [_jsxs("p", { className: classes.centerContent, children: [_jsxs("strong", { children: ["Related branches (", branchSnapshot.branch.length, ")"] }), "\u00A0", _jsx(Tooltip, { content: _jsx(_Fragment, { children: "List of branches pointing at the same snapshot. \u00A0" }), children: icons.infoIcon })] }), _jsx(HorizontalScrollContainer, { children: _jsxs(Table, { className: classes.tableContainer, children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableHeaderCell, {}), _jsx(TableHeaderCell, { children: "Name" })] }) }), _jsx(TableBody, { children: branchSnapshot.branch.map((branch, id) => (_jsxs(TableRow, { className: classes.pointerCursor, hover: true, onClick: () => history.push(props.routes.branch(branch)), children: [_jsx("div", { className: classes.tableCellMenu, children: _jsx(TableBodyCellMenu, { actions: [
+                                                                                {
+                                                                                    name: 'Copy branch name',
+                                                                                    onClick: () => copyToClipboard(branch),
+                                                                                },
+                                                                            ] }) }), _jsx(TableBodyCell, { children: branch })] }, id))) })] }) })] })), _jsx("br", {}), (snapshot === null || snapshot === void 0 ? void 0 : snapshot.clones) && snapshot.clones.length > 0 && (_jsxs(_Fragment, { children: [_jsx("p", { children: _jsxs("strong", { children: ["Clones (", snapshot.clones.length, ")"] }) }), _jsx(HorizontalScrollContainer, { children: _jsxs(Table, { className: classes.tableContainer, children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableHeaderCell, {}), _jsx(TableHeaderCell, { children: "Name" })] }) }), _jsx(TableBody, { children: snapshot.clones.map((clone, id) => (_jsxs(TableRow, { className: classes.pointerCursor, hover: true, onClick: () => history.push(props.routes.clone(clone)), children: [_jsx("div", { className: classes.tableCellMenu, children: _jsx(TableBodyCellMenu, { actions: [
+                                                                                {
+                                                                                    name: 'Copy clone name',
+                                                                                    onClick: () => copyToClipboard(clone),
+                                                                                },
+                                                                            ] }) }), _jsx(TableBodyCell, { children: clone })] }, id))) })] }) })] }))] })] }), _jsxs("div", { className: classes.snippetContainer, children: [_jsx(SectionTitle, { className: classes.marginTop, tag: "h2", level: 2, text: 'Delete snapshot using CLI' }), _jsx("p", { className: classes.cliText, children: "You can delete this snapshot using CLI. To do this, run the command below:" }), _jsx(SyntaxHighlight, { content: `dblab snapshot delete ${snapshot === null || snapshot === void 0 ? void 0 : snapshot.id}` }), _jsx(SectionTitle, { className: classes.marginTop, tag: "h2", level: 2, text: 'Get snapshots using CLI' }), _jsx("p", { className: classes.cliText, children: "You can get a list of all snapshots using CLI. To do this, run the command below:" }), _jsx(SyntaxHighlight, { content: `dblab snapshot list` })] }), snapshot && (_jsx(DestroySnapshotModal, { isOpen: isOpenDestroyModal, onClose: () => setIsOpenDestroyModal(false), snapshotId: snapshot.id, instanceId: props.instanceId, afterSubmitClick: afterSubmitClick, destroySnapshot: stores.main.destroySnapshot }))] })] }));
+});

package/pages/Snapshots/Snapshot/stores/Main.d.ts

@@ -0,0 +1,33 @@
+import { SnapshotsStore, SnapshotsApi } from '@postgres.ai/shared/stores/Snapshots';
+import { DestroySnapshot } from '@postgres.ai/shared/types/api/endpoints/destroySnapshot';
+import { SnapshotDto } from '@postgres.ai/shared/types/api/entities/snapshot';
+import { GetBranchSnapshot } from '@postgres.ai/shared/types/api/endpoints/getBranchSnapshot';
+import { BranchSnapshotDto } from '@postgres.ai/shared/types/api/entities/branchSnapshot';
+import { InitWS } from '@postgres.ai/shared/types/api/endpoints/initWS';
+declare type Error = {
+    title?: string;
+    message: string;
+};
+export declare type Api = SnapshotsApi & {
+    destroySnapshot: DestroySnapshot;
+    getBranchSnapshot?: GetBranchSnapshot;
+    initWS: InitWS;
+};
+export declare class MainStore {
+    snapshot: SnapshotDto | null;
+    branchSnapshot: BranchSnapshotDto | null;
+    snapshotError: Error | null;
+    branchSnapshotError: Error | null;
+    isSnapshotsLoading: boolean;
+    private readonly api;
+    readonly snapshots: SnapshotsStore;
+    constructor(api: Api);
+    load: (snapshotId: string, instanceId: string) => Promise<void>;
+    getSnapshot: (snapshotId: string, instanceId: string) => Promise<boolean | undefined>;
+    getBranchSnapshot: (snapshotId: string, instanceId: string) => Promise<import("@postgres.ai/shared/types/api/entities/branchSnapshot").BranchSnapshotDTO | null | undefined>;
+    destroySnapshot: (snapshotId: string, forceDelete: boolean, instanceId: string) => Promise<{
+        response: boolean | null;
+        error: any;
+    } | undefined>;
+}
+export {};

package/pages/Snapshots/Snapshot/stores/Main.js

@@ -0,0 +1,71 @@
+/*--------------------------------------------------------------------------
+ * 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 { SnapshotsStore, } from '@postgres.ai/shared/stores/Snapshots';
+import { generateSnapshotPageId } from '@postgres.ai/shared/pages/Instance/Snapshots/utils';
+export class MainStore {
+    constructor(api) {
+        this.snapshot = null;
+        this.branchSnapshot = null;
+        this.snapshotError = null;
+        this.branchSnapshotError = null;
+        this.isSnapshotsLoading = false;
+        this.load = async (snapshotId, instanceId) => {
+            if (!snapshotId)
+                return;
+            this.isSnapshotsLoading = true;
+            await this.snapshots.load(instanceId).then((loaded) => {
+                loaded && this.getSnapshot(snapshotId, instanceId);
+            });
+        };
+        this.getSnapshot = async (snapshotId, instanceId) => {
+            if (!snapshotId)
+                return;
+            const allSnapshots = this.snapshots.data;
+            const snapshot = allSnapshots === null || allSnapshots === void 0 ? void 0 : allSnapshots.filter((s) => {
+                return snapshotId === generateSnapshotPageId(s.id);
+            });
+            if (snapshot && (snapshot === null || snapshot === void 0 ? void 0 : snapshot.length) > 0) {
+                this.snapshot = snapshot[0];
+                this.getBranchSnapshot(snapshot[0].id, instanceId);
+            }
+            else {
+                this.isSnapshotsLoading = false;
+                this.snapshotError = {
+                    title: 'Error',
+                    message: `Snapshot "${snapshotId}" not found`,
+                };
+            }
+            return !!snapshot;
+        };
+        this.getBranchSnapshot = async (snapshotId, instanceId) => {
+            if (!snapshotId || !this.api.getBranchSnapshot)
+                return;
+            const { response, error } = await this.api.getBranchSnapshot(snapshotId, instanceId);
+            this.isSnapshotsLoading = false;
+            if (error) {
+                this.branchSnapshotError = await error.json().then((err) => err);
+            }
+            if (response) {
+                this.branchSnapshot = response;
+            }
+            return response;
+        };
+        this.destroySnapshot = async (snapshotId, forceDelete, instanceId) => {
+            if (!this.api.destroySnapshot || !snapshotId)
+                return;
+            const { response, error } = await this.api.destroySnapshot(snapshotId, forceDelete, instanceId);
+            return {
+                response,
+                error: error ? await error.json().then((err) => err) : null,
+            };
+        };
+        this.api = api;
+        this.snapshots = new SnapshotsStore(api);
+        makeAutoObservable(this);
+    }
+}

package/pages/Snapshots/Snapshot/useCreatedStores.d.ts

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

package/pages/Snapshots/Snapshot/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/stores/Snapshots.d.ts

@@ -1,15 +1,24 @@
 import { Snapshot } from '@postgres.ai/shared/types/api/entities/snapshot';
 import { GetSnapshots } from '@postgres.ai/shared/types/api/endpoints/getSnapshots';
+import { CreateSnapshot } from '@postgres.ai/shared/types/api/endpoints/createSnapshot';
 export declare type SnapshotsApi = {
-    getSnapshots: GetSnapshots;
+    getSnapshots?: GetSnapshots;
+    createSnapshot?: CreateSnapshot;
 };
 export declare class SnapshotsStore {
     data: Snapshot[] | null;
     error: string | null;
     isLoading: boolean;
+    snapshotDataLoading: boolean;
+    snapshotData: boolean | null;
+    snapshotDataError: {
+        title?: string;
+        message?: string;
+    } | null;
     private readonly api;
     constructor(api: SnapshotsApi);
-    load: (instanceId: string) => Promise<boolean>;
-    reload: (instanceId: string) => Promise<boolean>;
+    load: (instanceId: string) => Promise<boolean | undefined>;
+    reload: (instanceId: string, branchName?: string) => Promise<boolean | undefined>;
+    createSnapshot: (cloneId: string, message: string, instanceId: string) => Promise<import("../types/api/entities/createSnapshot").CreateSnapshotDTO | null | undefined>;
     private loadData;
 }

package/stores/Snapshots.js

@@ -10,15 +10,39 @@ export class SnapshotsStore {
         this.data = null;
         this.error = null;
         this.isLoading = false;
+        this.snapshotDataLoading = false;
+        this.snapshotData = null;
+        this.snapshotDataError = null;
         this.load = (instanceId) => {
             this.data = null;
             this.error = null;
             return this.loadData(instanceId);
         };
-        this.reload = (instanceId) => this.loadData(instanceId);
-        this.loadData = async (instanceId) => {
+        this.reload = (instanceId, branchName) => this.loadData(instanceId, branchName);
+        this.createSnapshot = async (cloneId, message, instanceId) => {
+            if (!this.api.createSnapshot || !cloneId)
+                return;
+            this.snapshotDataLoading = true;
+            this.snapshotDataError = null;
+            const { response, error } = await this.api.createSnapshot(cloneId, message, instanceId);
+            this.snapshotDataLoading = false;
+            if (response) {
+                this.snapshotData = !!response;
+                this.reload('');
+            }
+            if (error) {
+                this.snapshotDataError = await error.json().then((err) => err);
+            }
+            return response;
+        };
+        this.loadData = async (instanceId, branchName) => {
+            if (!this.api.getSnapshots)
+                return;
             this.isLoading = true;
-            const { response, error } = await this.api.getSnapshots({ instanceId });
+            const { response, error } = await this.api.getSnapshots({
+                instanceId,
+                branchName,
+            });
             this.isLoading = false;
             if (response)
                 this.data = response;

package/types/api/endpoints/createBranch.d.ts

@@ -0,0 +1,12 @@
+import { CreateBranchResponse } from '@postgres.ai/shared/types/api/entities/createBranch';
+export declare type CreateBranchFormValues = {
+    branchName: string;
+    instanceId: string;
+    baseBranch: string;
+    snapshotID: string;
+    creationType?: 'branch' | 'snapshot';
+};
+export declare type CreateBranch = (values: CreateBranchFormValues) => Promise<{
+    response: CreateBranchResponse | null;
+    error: Response | null;
+}>;

package/types/api/endpoints/createBranch.js

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

package/types/api/endpoints/createClone.d.ts

@@ -6,6 +6,7 @@ export declare type CreateClone = (args: {
     dbUser: string;
     dbPassword: string;
     isProtected: boolean;
+    branch?: string;
 }) => Promise<{
     response: Clone | null;
     error: Response | null;

package/types/api/endpoints/createSnapshot.d.ts

@@ -0,0 +1,5 @@
+import { CreateSnapshotResponse } from '@postgres.ai/shared/types/api/entities/createSnapshot';
+export declare type CreateSnapshot = (cloneID: string, message: string, instanceId: string) => Promise<{
+    response: CreateSnapshotResponse | null;
+    error: Response | null;
+}>;

package/types/api/endpoints/createSnapshot.js

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

package/types/api/endpoints/deleteBranch.d.ts

@@ -0,0 +1,4 @@
+export declare type DeleteBranch = (branchName: string, instanceId: string) => Promise<{
+    response: Response | null;
+    error: Error | null;
+}>;

package/types/api/endpoints/deleteBranch.js

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