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

package/pages/Branches/Branch/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/Branches/Branch/index.d.ts

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

package/pages/Branches/Branch/index.js

@@ -0,0 +1,172 @@
+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 { Spinner } from '@postgres.ai/shared/components/Spinner';
+import { Tooltip } from '@postgres.ai/shared/components/Tooltip';
+import { icons } from '@postgres.ai/shared/styles/icons';
+import { styles } from '@postgres.ai/shared/styles/styles';
+import { DeleteBranchModal } from '@postgres.ai/shared/pages/Branches/components/Modals/DeleteBranchModal';
+import { HorizontalScrollContainer } from '@postgres.ai/shared/components/HorizontalScrollContainer';
+import { generateSnapshotPageId } from '@postgres.ai/shared/pages/Instance/Snapshots/utils';
+import { SyntaxHighlight } from '@postgres.ai/shared/components/SyntaxHighlight';
+import { getCliBranchListCommand } from '@postgres.ai/shared/pages/CreateBranch/utils';
+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: '100%',
+        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%',
+    },
+    textField: {
+        ...styles.inputField,
+        'max-width': 525,
+        display: 'inline-block',
+        '& .MuiOutlinedInput-input': {
+            paddingRight: '32px!important',
+        },
+    },
+    tableContainer: {
+        position: 'relative',
+        maxWidth: 525,
+        width: '100%',
+    },
+    copyButton: {
+        position: 'absolute',
+        top: 16,
+        right: 0,
+        zIndex: 100,
+        width: 32,
+        height: 32,
+        padding: 8,
+    },
+    pointerCursor: {
+        cursor: 'pointer',
+    },
+}), { index: 1 });
+export const BranchesPage = observer((props) => {
+    const classes = useStyles();
+    const history = useHistory();
+    const stores = useCreatedStores(props);
+    const [isOpenDestroyModal, setIsOpenDestroyModal] = useState(false);
+    const { branch, snapshotList, deleteBranch, reload, load, isReloading, isBranchesLoading, getBranchesError, snapshotListError, getBranchError, } = stores.main;
+    const hasBranchError = getBranchesError || getBranchError || snapshotListError;
+    const branchLogLength = snapshotList === null || snapshotList === void 0 ? void 0 : snapshotList.reduce((acc, snapshot) => {
+        var _a;
+        if ((snapshot === null || snapshot === void 0 ? void 0 : snapshot.branch) !== null) {
+            return acc + ((_a = snapshot.branch) === null || _a === void 0 ? void 0 : _a.length);
+        }
+        else {
+            return acc;
+        }
+    }, 0);
+    const headRendered = (_jsxs(_Fragment, { children: [_jsx("style", { children: 'p { margin: 0;}' }), props.elements.breadcrumbs, _jsx(SectionTitle, { className: classes.title, tag: "h1", level: 1, text: `Branch ${props.branchId}`, children: _jsx(InstanceTabs, { tab: TABS_INDEX.BRANCHES, isPlatform: props.isPlatform, instanceId: props.instanceId, hasLogs: props.api.initWS !== undefined }) })] }));
+    useEffect(() => {
+        load(props.branchId, props.instanceId);
+    }, []);
+    if (isBranchesLoading)
+        return _jsx(PageSpinner, {});
+    if (hasBranchError) {
+        return (_jsxs(_Fragment, { children: [headRendered, _jsx(ErrorStub, { title: (getBranchesError === null || getBranchesError === void 0 ? void 0 : getBranchesError.title) ||
+                        (getBranchError === null || getBranchError === void 0 ? void 0 : getBranchError.title) ||
+                        (snapshotListError === null || snapshotListError === void 0 ? void 0 : snapshotListError.title), message: (getBranchesError === null || getBranchesError === void 0 ? void 0 : getBranchesError.message) ||
+                        (getBranchError === null || getBranchError === void 0 ? void 0 : getBranchError.message) ||
+                        (snapshotListError === null || snapshotListError === void 0 ? void 0 : snapshotListError.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(props.branchId)), disabled: isReloading, title: 'Create clone', className: classes.actionButton, children: "Create clone" }), _jsx(Button, { variant: "contained", color: "primary", onClick: () => setIsOpenDestroyModal(true), disabled: isReloading, title: 'Delete this branch', className: classes.actionButton, children: "Delete branch" }), _jsxs(Button, { variant: "outlined", color: "secondary", onClick: () => reload(props.branchId, props.instanceId), disabled: isReloading, title: 'Refresh branch information', className: classes.actionButton, children: ["Reload info", isReloading && _jsx(Spinner, { size: "sm", className: classes.spinner })] })] }), _jsx("br", {}), _jsxs("div", { children: [_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 branch."] }), children: icons.infoIcon })] }), _jsx("p", { className: classes.text, children: (branch === null || branch === void 0 ? void 0 : branch.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: "Branch name:" }), branch === null || branch === void 0 ? void 0 : branch.name] }), _jsxs("p", { className: classes.text, children: [_jsx("span", { className: classes.paramTitle, children: "Parent branch:" }), branch === null || branch === void 0 ? void 0 : branch.parent] })] }), _jsx("br", {}), _jsx("p", { children: _jsx("strong", { children: "Snapshot info" }) }), _jsxs("div", { className: classes.copyFieldContainer, children: [_jsx(TextField, { variant: "outlined", label: "Snapshot ID", value: branch === null || branch === void 0 ? void 0 : branch.snapshotID, 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(branch === null || branch === void 0 ? void 0 : branch.snapshotID)), children: icons.copyIcon })] }), _jsx("br", {}), Number(branchLogLength) > 0 && (_jsxs(_Fragment, { children: [_jsxs("strong", { children: ["Branch log (", branchLogLength, ")"] }), _jsx(HorizontalScrollContainer, { children: _jsxs(Table, { className: classes.tableContainer, children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableHeaderCell, {}), _jsx(TableHeaderCell, { children: "Name" }), _jsx(TableHeaderCell, { children: "Snapshot ID" }), _jsx(TableHeaderCell, { children: "Data state at" }), _jsx(TableHeaderCell, { children: "Message" })] }) }), snapshotList === null || snapshotList === void 0 ? void 0 : snapshotList.map((snapshot, id) => {
+                                                            var _a;
+                                                            return (_jsx(TableBody, { children: (_a = snapshot === null || snapshot === void 0 ? void 0 : snapshot.branch) === null || _a === void 0 ? void 0 : _a.map((item, id) => {
+                                                                    var _a;
+                                                                    return (_jsxs(TableRow, { hover: true, className: classes.pointerCursor, onClick: () => generateSnapshotPageId(snapshot.id) &&
+                                                                            history.push(props.routes.snapshot(generateSnapshotPageId(snapshot.id) || '')), children: [_jsx(TableBodyCellMenu, { actions: [
+                                                                                    {
+                                                                                        name: 'Copy branch name',
+                                                                                        onClick: () => copyToClipboard(item),
+                                                                                    },
+                                                                                    {
+                                                                                        name: 'Copy snapshot ID',
+                                                                                        onClick: () => copyToClipboard(snapshot.id || ''),
+                                                                                    },
+                                                                                ] }), _jsx(TableBodyCell, { children: item }), _jsx(TableBodyCell, { children: snapshot.id || '-' }), _jsx(TableBodyCell, { children: snapshot.dataStateAt || '-' }), _jsx(TableBodyCell, { children: (_a = snapshot.message) !== null && _a !== void 0 ? _a : '-' })] }, id));
+                                                                }) }, id));
+                                                        })] }) })] }))] })] }), _jsxs("div", { className: classes.snippetContainer, children: [_jsx(SectionTitle, { className: classes.marginTop, tag: "h2", level: 2, text: 'Delete branch using CLI' }), _jsx("p", { className: classes.cliText, children: "You can delete this branch using CLI. To do this, run the command below:" }), _jsx(SyntaxHighlight, { content: `dblab branch delete ${props.branchId}` }), _jsx(SectionTitle, { className: classes.marginTop, tag: "h2", level: 2, text: 'Get branches using CLI' }), _jsx("p", { className: classes.marginTop, children: "To list all branches using CLI, copy and paste it into your terminal." }), _jsx(SyntaxHighlight, { content: getCliBranchListCommand() }), _jsx(SectionTitle, { className: classes.marginTop, tag: "h2", level: 2, text: 'Get snapshots for this branch using CLI' }), _jsx("p", { className: classes.cliText, children: "You can get a list of snapshots for this branch using CLI. To do this, run the command below:" }), _jsx(SyntaxHighlight, { content: `dblab branch log ${props.branchId}` })] }), _jsx(DeleteBranchModal, { isOpen: isOpenDestroyModal, onClose: () => setIsOpenDestroyModal(false), deleteBranch: deleteBranch, branchName: props.branchId, instanceId: props.instanceId, afterSubmitClick: () => {
+                            stores.main.reload(props.branchId, props.instanceId);
+                            history.push(props.routes.branches());
+                        } })] })] }));
+});

package/pages/Branches/Branch/stores/Main.d.ts

@@ -0,0 +1,37 @@
+import { GetBranches } from '@postgres.ai/shared/types/api/endpoints/getBranches';
+import { Branch } from '@postgres.ai/shared/types/api/endpoints/getBranches';
+import { DeleteBranch } from '@postgres.ai/shared/types/api/endpoints/deleteBranch';
+import { SnapshotList, GetSnapshotList } from '@postgres.ai/shared/types/api/endpoints/getSnapshotList';
+import { InitWS } from '@postgres.ai/shared/types/api/endpoints/initWS';
+declare type Error = {
+    title?: string;
+    message: string;
+};
+export declare type Api = {
+    getBranches: GetBranches;
+    deleteBranch: DeleteBranch;
+    getSnapshotList: GetSnapshotList;
+    initWS: InitWS;
+};
+export declare class MainStore {
+    getBranchError: Error | null;
+    snapshotListError: Error | null;
+    getBranchesError: Error | null;
+    isReloading: boolean;
+    isBranchesLoading: boolean;
+    branches: Branch[] | null;
+    branch: Branch | null;
+    snapshotList: SnapshotList[] | null;
+    private readonly api;
+    constructor(api: Api);
+    load: (branchId: string, instanceId: string) => Promise<void>;
+    reload: (branchId: string, instanceId: string) => Promise<void>;
+    getBranches: (branchId: string, instanceId: string) => Promise<Branch[] | null | undefined>;
+    getBranch: (branchId: string, instanceId: string) => Promise<boolean>;
+    deleteBranch: (branchName: string, instanceId: string) => Promise<{
+        response: Response | null;
+        error: globalThis.Error | null;
+    } | undefined>;
+    getSnapshotList: (branchName: string, instanceId: string) => Promise<SnapshotList[] | null | undefined>;
+}
+export {};

package/pages/Branches/Branch/stores/Main.js

@@ -0,0 +1,90 @@
+/*--------------------------------------------------------------------------
+ * 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 MainStore {
+    constructor(api) {
+        this.getBranchError = null;
+        this.snapshotListError = null;
+        this.getBranchesError = null;
+        this.isReloading = false;
+        this.isBranchesLoading = false;
+        this.branches = null;
+        this.branch = null;
+        this.snapshotList = null;
+        this.load = async (branchId, instanceId) => {
+            if (!branchId)
+                return;
+            this.isBranchesLoading = true;
+            await this.getBranches(branchId, instanceId);
+        };
+        this.reload = async (branchId, instanceId) => {
+            if (!branchId)
+                return;
+            this.isReloading = true;
+            await this.getBranches(branchId, instanceId);
+            this.isReloading = false;
+        };
+        this.getBranches = async (branchId, instanceId) => {
+            if (!this.api.getBranches)
+                return;
+            const { response, error } = await this.api.getBranches(instanceId);
+            if (error) {
+                this.isBranchesLoading = false;
+                this.getBranchesError = await error.json().then((err) => err);
+            }
+            if (response) {
+                this.branches = response;
+                this.getBranch(branchId, instanceId);
+            }
+            return response;
+        };
+        this.getBranch = async (branchId, instanceId) => {
+            var _a;
+            const currentBranch = (_a = this.branches) === null || _a === void 0 ? void 0 : _a.filter((s) => {
+                return s.name === branchId;
+            });
+            if (currentBranch && (currentBranch === null || currentBranch === void 0 ? void 0 : currentBranch.length) > 0) {
+                this.branch = currentBranch[0];
+                this.getSnapshotList(currentBranch[0].name, instanceId);
+            }
+            else {
+                this.getBranchError = {
+                    title: 'Error',
+                    message: `Branch "${branchId}" not found`,
+                };
+                this.isBranchesLoading = false;
+            }
+            return !!currentBranch;
+        };
+        this.deleteBranch = async (branchName, instanceId) => {
+            var _a;
+            if (!branchName)
+                return;
+            const { response, error } = await this.api.deleteBranch(branchName, instanceId);
+            if (response) {
+                this.branches =
+                    ((_a = this.branches) === null || _a === void 0 ? void 0 : _a.filter((branch) => branch.name !== branchName)) || [];
+            }
+            return { response, error };
+        };
+        this.getSnapshotList = async (branchName, instanceId) => {
+            if (!this.api.getSnapshotList)
+                return;
+            const { response, error } = await this.api.getSnapshotList(branchName, instanceId);
+            this.isBranchesLoading = false;
+            if (error) {
+                this.snapshotListError = await error.json().then((err) => err);
+            }
+            if (response) {
+                this.snapshotList = response;
+            }
+            return response;
+        };
+        this.api = api;
+        makeAutoObservable(this);
+    }
+}

package/pages/Branches/Branch/useCreatedStores.d.ts

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

package/pages/Branches/Branch/useCreatedStores.js

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

package/pages/Branches/components/BranchesTable/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { Branch } from '@postgres.ai/shared/types/api/endpoints/getBranches';
+import { DeleteBranch } from '@postgres.ai/shared/types/api/endpoints/deleteBranch';
+export declare const BranchesTable: ({ branches, emptyTableText, deleteBranch, branchesRoute, reloadBranches, }: {
+    branches: Branch[];
+    emptyTableText: string;
+    deleteBranch: DeleteBranch;
+    branchesRoute: string;
+    reloadBranches: () => void;
+}) => JSX.Element;

package/pages/Branches/components/BranchesTable/index.js

@@ -0,0 +1,107 @@
+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 cn from 'classnames';
+import { useEffect, useState } from 'react';
+import copy from 'copy-to-clipboard';
+import { makeStyles } from '@material-ui/core';
+import { useHistory } from 'react-router-dom';
+import { formatDistanceToNowStrict } from 'date-fns';
+import { isValidDate } from '@postgres.ai/shared/utils/date';
+import { ArrowDropDownIcon } from '@postgres.ai/shared/icons/ArrowDropDown';
+import { HorizontalScrollContainer } from '@postgres.ai/shared/components/HorizontalScrollContainer';
+import { useHost } from '@postgres.ai/shared/pages/Instance/context';
+import { Table, TableHead, TableRow, TableBody, TableHeaderCell, TableBodyCell, TableBodyCellMenu, } from '@postgres.ai/shared/components/Table';
+import { DeleteBranchModal } from '../Modals/DeleteBranchModal';
+const useStyles = makeStyles({
+    cellContentCentered: {
+        display: 'flex',
+        alignItems: 'center',
+    },
+    pointerCursor: {
+        cursor: 'pointer',
+    },
+    sortIcon: {
+        marginLeft: '8px',
+        width: '10px',
+    },
+    interactiveRow: {
+        cursor: 'pointer',
+    },
+    verticalCentered: {
+        display: 'flex',
+        alignItems: 'center',
+    },
+    marginTop: {
+        marginTop: '16px',
+    },
+    sortIconUp: {
+        transform: 'rotate(180deg)',
+    },
+}, { index: 1 });
+export const BranchesTable = ({ branches, emptyTableText, deleteBranch, branchesRoute, reloadBranches, }) => {
+    var _a;
+    const host = useHost();
+    const history = useHistory();
+    const classes = useStyles();
+    const [state, setState] = useState({
+        sortByParent: 'desc',
+        branches: [],
+    });
+    const [branchId, setBranchId] = useState('');
+    const [isOpenDestroyModal, setIsOpenDestroyModal] = useState(false);
+    const handlesortByParent = () => {
+        const sortByParent = state.sortByParent === 'desc' ? 'asc' : 'desc';
+        const sortedBranches = [...state.branches].sort((a, b) => {
+            if (sortByParent === 'asc') {
+                return a.parent.localeCompare(b.parent);
+            }
+            else {
+                return b.parent.localeCompare(a.parent);
+            }
+        });
+        setState({
+            sortByParent,
+            branches: sortedBranches,
+        });
+    };
+    useEffect(() => {
+        setState({
+            sortByParent: 'desc',
+            branches: branches !== null && branches !== void 0 ? branches : [],
+        });
+    }, [branches]);
+    if (!state.branches.length) {
+        return _jsx("p", { className: classes.marginTop, children: emptyTableText });
+    }
+    return (_jsx(HorizontalScrollContainer, { children: _jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableHeaderCell, {}), _jsx(TableHeaderCell, { children: "Branch" }), _jsx(TableHeaderCell, { children: _jsxs("div", { onClick: handlesortByParent, className: cn(classes.interactiveRow, classes.verticalCentered), children: ["Parent", _jsx(ArrowDropDownIcon, { className: cn(state.sortByParent === 'asc' && classes.sortIconUp, classes.sortIcon) })] }) }), _jsx(TableHeaderCell, { children: "Data state time" }), _jsx(TableHeaderCell, { children: "Latest Snapshot ID" }), _jsx(TableHeaderCell, { children: "Number of snapshots" })] }) }), _jsx(TableBody, { children: (_a = state.branches) === null || _a === void 0 ? void 0 : _a.map((branch) => {
+                        const branchPagePath = host.routes.branch(branch.name);
+                        return (_jsxs(TableRow, { hover: true, onClick: () => history.push(branchPagePath), className: classes.pointerCursor, children: [_jsx(TableBodyCellMenu, { actions: [
+                                        {
+                                            name: 'Copy snapshot ID',
+                                            onClick: () => copy(branch.snapshotID),
+                                        },
+                                        {
+                                            name: 'Delete branch',
+                                            onClick: () => {
+                                                setBranchId(branch.name);
+                                                setIsOpenDestroyModal(true);
+                                            },
+                                        },
+                                    ] }), _jsx(TableBodyCell, { children: branch.name }), _jsx(TableBodyCell, { children: branch.parent }), _jsxs(TableBodyCell, { children: [branch.dataStateAt, " (", isValidDate(new Date(branch.dataStateAt))
+                                            ? formatDistanceToNowStrict(new Date(branch.dataStateAt), {
+                                                addSuffix: true,
+                                            })
+                                            : '-', ")"] }), _jsx(TableBodyCell, { children: branch.snapshotID }), _jsx(TableBodyCell, { children: branch.numSnapshots })] }, branch.name));
+                    }) }), _jsx(DeleteBranchModal, { isOpen: isOpenDestroyModal, onClose: () => {
+                        setIsOpenDestroyModal(false);
+                        setBranchId('');
+                    }, deleteBranch: deleteBranch, branchName: branchId, instanceId: host.instanceId, afterSubmitClick: () => {
+                        reloadBranches();
+                        history.push(branchesRoute);
+                    } })] }) }));
+};

package/pages/Branches/components/Modals/DeleteBranchModal/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { ModalProps } from '@postgres.ai/shared/pages/Branches/components/Modals/types';
+import { DeleteBranch } from '@postgres.ai/shared/types/api/endpoints/deleteBranch';
+interface DeleteBranchModalProps extends ModalProps {
+    deleteBranch: DeleteBranch;
+    branchName: string;
+    instanceId: string;
+    afterSubmitClick: () => void;
+}
+export declare const DeleteBranchModal: ({ isOpen, onClose, deleteBranch, branchName, instanceId, afterSubmitClick, }: DeleteBranchModalProps) => JSX.Element;
+export {};

package/pages/Branches/components/Modals/DeleteBranchModal/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 { makeStyles } from '@material-ui/core';
+import { Modal } from '@postgres.ai/shared/components/Modal';
+import { SimpleModalControls } from '@postgres.ai/shared/components/SimpleModalControls';
+import { ImportantText } from '@postgres.ai/shared/components/ImportantText';
+import { Text } from '@postgres.ai/shared/components/Text';
+const useStyles = makeStyles({
+    errorMessage: {
+        color: 'red',
+        marginTop: '10px',
+    },
+}, { index: 1 });
+export const DeleteBranchModal = ({ isOpen, onClose, deleteBranch, branchName, instanceId, afterSubmitClick, }) => {
+    const classes = useStyles();
+    const [deleteError, setDeleteError] = useState(null);
+    const handleDelete = async () => {
+        var _a;
+        const deleteRes = await deleteBranch(branchName, instanceId);
+        if (deleteRes === null || deleteRes === void 0 ? void 0 : deleteRes.error) {
+            setDeleteError((_a = deleteRes.error) === null || _a === void 0 ? void 0 : _a.message);
+        }
+        else {
+            afterSubmitClick();
+        }
+    };
+    const handleClose = () => {
+        setDeleteError(null);
+        onClose();
+    };
+    return (_jsxs(Modal, { title: "Confirmation", onClose: handleClose, isOpen: isOpen, size: "xs", children: [_jsxs(Text, { children: ["Are you sure you want to delete branch", ' ', _jsx(ImportantText, { children: branchName }), "? This action cannot be undone."] }), deleteError && _jsx("p", { className: classes.errorMessage, children: deleteError }), _jsx(SimpleModalControls, { items: [
+                    {
+                        text: 'Cancel',
+                        onClick: handleClose,
+                    },
+                    {
+                        text: 'Delete branch',
+                        variant: 'primary',
+                        onClick: handleDelete,
+                        isDisabled: branchName === 'main',
+                    },
+                ] })] }));
+};

package/pages/Branches/components/Modals/types.d.ts

@@ -0,0 +1,4 @@
+export interface ModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+}

package/pages/Branches/components/Modals/types.js

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

package/pages/Branches/index.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+interface BranchesProps {
+    instanceId: string;
+}
+export declare const Branches: React.FC<BranchesProps>;
+export {};

package/pages/Branches/index.js

@@ -0,0 +1,60 @@
+import { Fragment as _Fragment, 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 { observer } from 'mobx-react-lite';
+import { useHistory } from 'react-router';
+import { makeStyles } from '@material-ui/core';
+import { useEffect, useState } from 'react';
+import { useStores, useHost } from '@postgres.ai/shared/pages/Instance/context';
+import { Button } from '@postgres.ai/shared/components/Button2';
+import { Spinner } from '@postgres.ai/shared/components/Spinner';
+import { ErrorStub } from '@postgres.ai/shared/components/ErrorStub';
+import { BranchesTable } from '@postgres.ai/shared/pages/Branches/components/BranchesTable';
+import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle';
+import { Tooltip } from '@postgres.ai/shared/components/Tooltip';
+import { InfoIcon } from '@postgres.ai/shared/icons/Info';
+const useStyles = makeStyles({
+    container: {
+        marginTop: '16px',
+    },
+    infoIcon: {
+        height: '12px',
+        width: '12px',
+        marginLeft: '8px',
+        color: '#808080',
+    },
+    spinner: {
+        position: 'absolute',
+        right: '50%',
+        transform: 'translate(-50%, -50%)',
+    },
+}, { index: 1 });
+export const Branches = observer(({ instanceId }) => {
+    const host = useHost();
+    const stores = useStores();
+    const classes = useStyles();
+    const history = useHistory();
+    const [branches, setBranches] = useState([]);
+    const [isLoading, setIsLoading] = useState(true);
+    const { instance, getBranches, isBranchesLoading, getBranchesError, deleteBranch, } = stores.main;
+    const goToBranchAddPage = () => history.push(host.routes.createBranch());
+    const loadBranches = () => {
+        getBranches(instanceId)
+            .then((response) => {
+            response && setBranches(response);
+        })
+            .finally(() => setIsLoading(false));
+    };
+    useEffect(() => {
+        loadBranches();
+    }, []);
+    if (!instance && !isBranchesLoading)
+        return _jsx(_Fragment, {});
+    if (getBranchesError)
+        return (_jsx(ErrorStub, { title: getBranchesError === null || getBranchesError === void 0 ? void 0 : getBranchesError.title, message: getBranchesError === null || getBranchesError === void 0 ? void 0 : getBranchesError.message }));
+    return (_jsx("div", { className: classes.container, children: isBranchesLoading || isLoading ? (_jsx(Spinner, { size: "lg", className: classes.spinner })) : (_jsxs(_Fragment, { children: [_jsx(SectionTitle, { level: 2, tag: "h2", text: `Branches (${(branches === null || branches === void 0 ? void 0 : branches.length) || 0})`, rightContent: _jsxs(_Fragment, { children: [_jsx(Button, { theme: "primary", isDisabled: !branches.length, onClick: goToBranchAddPage, children: "Create branch" }), !branches.length && (_jsx(Tooltip, { content: "No existing branch", children: _jsx("div", { style: { display: 'flex' }, children: _jsx(InfoIcon, { className: classes.infoIcon }) }) }))] }) }), _jsx(BranchesTable, { branches: branches, branchesRoute: host.routes.branches(), reloadBranches: loadBranches, deleteBranch: deleteBranch, emptyTableText: "This instance has no active branches." })] })) }));
+});

package/pages/Clone/Status/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import { CloneDto } from '@postgres.ai/shared/types/api/entities/clone';
+declare type Props = {
+    rawClone: CloneDto;
+    className?: string;
+};
+export declare const Status: React.MemoExoticComponent<(props: Props) => JSX.Element>;
+export {};

package/pages/Clone/Status/index.js

@@ -0,0 +1,38 @@
+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 React from 'react';
+import { makeStyles } from '@material-ui/core';
+import clsx from 'clsx';
+import { formatCloneDto, } from '@postgres.ai/shared/types/api/entities/clone';
+import { Status as StatusBase } from '@postgres.ai/shared/components/Status';
+import { FormattedText } from '@postgres.ai/shared/components/FormattedText';
+import { getCloneStatusType, getCloneStatusText, } from '@postgres.ai/shared/utils/clone';
+const useStyles = makeStyles({
+    root: {
+        marginTop: '2px',
+    },
+    status: {
+        fontWeight: 500,
+    },
+    message: {
+        margin: '4px 0 0 0',
+    },
+    errorMessage: {
+        marginTop: '8px',
+    },
+}, { index: 1 });
+export const Status = React.memo((props) => {
+    const { rawClone, className } = props;
+    const classes = useStyles();
+    const clone = formatCloneDto(rawClone);
+    const { code, message } = clone.status;
+    const statusType = getCloneStatusType(code);
+    const statusText = getCloneStatusText(code);
+    const isError = statusType === 'error';
+    return (_jsxs("div", { className: clsx(classes.root, className), children: [_jsx(StatusBase, { type: statusType, className: classes.status, children: statusText }), !isError && _jsx("p", { className: classes.message, children: message }), isError && (_jsx(FormattedText, { value: message, className: classes.errorMessage }))] }));
+});