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

package/pages/Instance/Snapshots/components/SnapshotsList/index.js

@@ -0,0 +1,157 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { observer } from 'mobx-react-lite';
+import { makeStyles } from '@material-ui/core';
+import copy from 'copy-to-clipboard';
+import { HorizontalScrollContainer } from '@postgres.ai/shared/components/HorizontalScrollContainer';
+import { DestroySnapshotModal } from '@postgres.ai/shared/pages/Snapshots/Snapshot/DestorySnapshotModal';
+import { useHost, useStores } from '@postgres.ai/shared/pages/Instance/context';
+import { IconButton } from '@mui/material';
+import { icons } from '@postgres.ai/shared/styles/icons';
+import { RowMenu } from '@postgres.ai/shared/components/Table/RowMenu';
+import { generateSnapshotPageId, groupSnapshotsByCreatedAtDate, } from '@postgres.ai/shared/pages/Instance/Snapshots/utils';
+import { format, formatDistanceToNowStrict } from 'date-fns';
+import { formatBytesIEC } from '@postgres.ai/shared/utils/units';
+import { useHistory } from 'react-router';
+const useStyles = makeStyles({
+    pointerCursor: {
+        cursor: 'pointer',
+        padding: '0 8px',
+        '&:hover': {
+            backgroundColor: '#f9f9f9',
+        },
+    },
+    commitItem: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        padding: '14px 0',
+        borderBottom: '1px solid #ddd',
+        '&:last-child': {
+            borderBottom: 'none',
+            marginBottom: '12px',
+        },
+    },
+    infoBlock: {
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        overflow: 'hidden',
+    },
+    header: {
+        fontWeight: 500,
+    },
+    infoContent: {
+        fontSize: '12px',
+        color: '#808080',
+        display: 'flex',
+        alignItems: 'center',
+        gap: '5px',
+    },
+    snapshotId: {
+        fontSize: '12px',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+        padding: '0 10px',
+    },
+    actionsContainer: {
+        overflow: 'hidden',
+        display: 'flex',
+        height: 'max-content',
+        alignItems: 'center',
+        justifyContent: 'flex-end',
+        border: '1px solid #ddd',
+        borderRadius: '5px',
+        padding: '0 14px',
+        justifySelf: 'end',
+        maxWidth: '100%',
+        '& .MuiButtonBase-root, .MuiTableCell-root': {
+            padding: '0!important',
+            borderBottom: 'none',
+        },
+    },
+    dateGroup: {
+        fontSize: '14px',
+        fontWeight: 'bold',
+        padding: '14px 0 5px 0',
+        borderBottom: '1px solid #ddd',
+    },
+    rowMenuContainer: {
+        paddingLeft: '10px',
+        '& .MuiButtonBase-root': {
+            width: '20px',
+            height: '20px',
+            padding: '8px',
+        },
+    },
+    copyButtonContainer: {
+        '& .MuiButtonBase-root': {
+            borderLeft: '1px solid #ddd',
+            borderRadius: '0',
+            borderRight: '1px solid #ddd',
+        },
+    },
+    copyButton: {
+        width: '32px',
+        height: '32px',
+        padding: '8px',
+    },
+    tooltipInfo: {
+        fontSize: '12px',
+    },
+    gridContainer: {
+        width: '100%',
+        display: 'grid',
+        columnGap: '20px',
+        gridTemplateColumns: 'repeat(5, 0.75fr) 1fr',
+    },
+}, { index: 1 });
+const SnapshotListItem = ({ snapshot, setSnapshotModal, openClonesModal, }) => {
+    var _a, _b;
+    const classes = useStyles();
+    const timeAgo = formatDistanceToNowStrict(snapshot.createdAtDate);
+    const history = useHistory();
+    const host = useHost();
+    return (_jsx("div", { className: classes.commitItem, children: _jsxs("div", { className: classes.gridContainer, children: [_jsxs("div", { className: classes.infoBlock, children: [_jsx("div", { className: classes.header, children: snapshot.message || '-' }), _jsxs("div", { className: classes.infoContent, title: snapshot.dataStateAt, children: [timeAgo, " ago"] })] }), _jsxs("div", { className: classes.infoBlock, children: [_jsx("div", { className: classes.header, children: "Pool" }), _jsx("div", { className: classes.infoContent, children: (_a = snapshot.pool) !== null && _a !== void 0 ? _a : '-' })] }), _jsxs("div", { className: classes.infoBlock, children: [_jsx("div", { className: classes.header, children: "Number of clones" }), _jsx("div", { className: classes.infoContent, children: (_b = snapshot.numClones) !== null && _b !== void 0 ? _b : '-' })] }), _jsxs("div", { className: classes.infoBlock, children: [_jsx("div", { className: classes.header, children: "Logical Size" }), _jsx("div", { className: classes.infoContent, children: snapshot.logicalSize ? formatBytesIEC(snapshot.logicalSize) : '-' })] }), _jsxs("div", { className: classes.infoBlock, children: [_jsx("div", { className: classes.header, children: "Physical Size" }), _jsx("div", { className: classes.infoContent, children: snapshot.physicalSize
+                                ? formatBytesIEC(snapshot.physicalSize)
+                                : '-' })] }), _jsxs("div", { className: classes.actionsContainer, onClick: (e) => e.stopPropagation(), children: [_jsx("div", { className: classes.snapshotId, children: snapshot.id }), _jsx("div", { className: classes.copyButtonContainer, title: "Copy snapshot ID", children: _jsx(IconButton, { className: classes.copyButton, onClick: (e) => {
+                                    e.stopPropagation();
+                                    copy(snapshot.id);
+                                }, children: icons.copyIcon }) }), _jsx("div", { className: classes.rowMenuContainer, title: "Actions", children: _jsx(RowMenu, { actions: [
+                                    {
+                                        name: 'Show related clones',
+                                        onClick: () => openClonesModal(),
+                                    },
+                                    {
+                                        name: 'Create new clone',
+                                        onClick: () => history.push(host.routes.createClone()),
+                                    },
+                                    {
+                                        name: 'Delete snapshot',
+                                        onClick: () => setSnapshotModal({
+                                            isOpen: true,
+                                            snapshotId: snapshot.id,
+                                        }),
+                                    }
+                                ] }) })] })] }) }));
+};
+export const SnapshotsList = observer(({ routes, filteredSnapshots, instanceId, }) => {
+    const classes = useStyles();
+    const stores = useStores();
+    const history = useHistory();
+    const groupedSnapshots = groupSnapshotsByCreatedAtDate(filteredSnapshots);
+    const [snapshotModal, setSnapshotModal] = React.useState({
+        isOpen: false,
+        snapshotId: '',
+    });
+    return (_jsxs(HorizontalScrollContainer, { children: [groupedSnapshots.map((group, index) => {
+                const groupDateFormatted = format(group[0].createdAtDate, 'MMM dd, yyyy');
+                return (_jsxs("div", { children: [_jsx("div", { className: classes.dateGroup, children: groupDateFormatted }), group.map((snapshot) => {
+                            const snapshotPageId = generateSnapshotPageId(snapshot.id);
+                            return (_jsx("div", { className: classes.pointerCursor, onClick: () => snapshotPageId &&
+                                    history.push(routes.snapshot(snapshotPageId)), children: _jsx(SnapshotListItem, { snapshot: snapshot, setSnapshotModal: setSnapshotModal, openClonesModal: () => stores.clonesModal.openModal({
+                                        snapshotId: snapshot.id,
+                                    }) }) }, snapshot.id));
+                        })] }, index));
+            }), snapshotModal.isOpen && snapshotModal.snapshotId && (_jsx(DestroySnapshotModal, { isOpen: snapshotModal.isOpen, onClose: () => setSnapshotModal({ isOpen: false, snapshotId: '' }), snapshotId: snapshotModal.snapshotId, instanceId: instanceId, afterSubmitClick: () => stores.main.load(instanceId), destroySnapshot: stores.main.destroySnapshot }))] }));
+});

package/pages/Instance/Snapshots/components/SnapshotsModal/utils.d.ts

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

package/{components/HorizontalScrollContainer/utils.ts → pages/Instance/Snapshots/components/SnapshotsModal/utils.js}

@@ -4,13 +4,12 @@
  * Unauthorized copying of this file, via any medium is strictly prohibited
  *--------------------------------------------------------------------------
  */
-
-import { Dimensions } from './types';
-
-export const checkIsVisibleLeftCurtain = (dimensions: Dimensions) => {
-  return dimensions.scrollLeft > 0;
-};
-
-export const checkIsVisibleRightCurtain = (dimensions: Dimensions) => {
-  return dimensions.scrollLeft < dimensions.scrollWidth - dimensions.offsetWidth;
+import { formatUTC } from '@postgres.ai/shared/utils/date';
+export const getTags = ({ date, pool }) => {
+    const tags = [];
+    if (date)
+        tags.push({ name: 'Date', value: `${formatUTC(date, 'yyyy-MM-dd')} UTC` });
+    if (pool)
+        tags.push({ name: 'Disk', value: pool });
+    return tags;
 };

package/pages/Instance/Snapshots/components/SnapshotsTable/index.d.ts

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

package/pages/Instance/Snapshots/components/SnapshotsTable/index.js

@@ -0,0 +1,125 @@
+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 cn from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { makeStyles } from '@material-ui/core';
+import { formatDistanceToNowStrict } from 'date-fns';
+import copy from 'copy-to-clipboard';
+import { useHistory } from 'react-router-dom';
+import { HorizontalScrollContainer } from '@postgres.ai/shared/components/HorizontalScrollContainer';
+import { generateSnapshotPageId } from '@postgres.ai/shared/pages/Instance/Snapshots/utils';
+import { DestroySnapshotModal } from '@postgres.ai/shared/pages/Snapshots/Snapshot/DestorySnapshotModal';
+import { useStores } from '@postgres.ai/shared/pages/Instance/context';
+import { ArrowDropDownIcon } from '@postgres.ai/shared/icons/ArrowDropDown';
+import { formatBytesIEC } from '@postgres.ai/shared/utils/units';
+import { isSameDayUTC, isValidDate } from '@postgres.ai/shared/utils/date';
+import { Table, TableHead, TableRow, TableBody, TableHeaderCell, TableBodyCell, TableBodyCellMenu, } from '@postgres.ai/shared/components/Table';
+const useStyles = makeStyles({
+    cellContentCentered: {
+        display: 'flex',
+        alignItems: 'center',
+    },
+    pointerCursor: {
+        cursor: 'pointer',
+    },
+    sortIcon: {
+        marginLeft: '8px',
+        width: '10px',
+        cursor: 'pointer',
+        transition: 'transform 0.15s ease-in-out',
+    },
+    sortIconUp: {
+        transform: 'rotate(180deg)',
+    },
+    hideSortIcon: {
+        opacity: 0,
+    },
+    verticalCentered: {
+        display: 'flex',
+        alignItems: 'center',
+    },
+}, { index: 1 });
+export const SnapshotsTable = observer(({ instanceId }) => {
+    var _a, _b;
+    const history = useHistory();
+    const classes = useStyles();
+    const stores = useStores();
+    const { snapshots } = stores.main;
+    const [snapshotModal, setSnapshotModal] = React.useState({
+        isOpen: false,
+        snapshotId: '',
+    });
+    const filteredSnapshots = (_a = snapshots === null || snapshots === void 0 ? void 0 : snapshots.data) === null || _a === void 0 ? void 0 : _a.filter((snapshot) => {
+        const isMatchedByDate = !stores.snapshotsModal.date ||
+            isSameDayUTC(snapshot.dataStateAtDate, stores.snapshotsModal.date);
+        const isMatchedByPool = !stores.snapshotsModal.pool ||
+            snapshot.pool === stores.snapshotsModal.pool;
+        return isMatchedByDate && isMatchedByPool;
+    });
+    const [state, setState] = React.useState({
+        sortByCreatedDate: 'desc',
+        snapshots: filteredSnapshots !== null && filteredSnapshots !== void 0 ? filteredSnapshots : [],
+    });
+    const handleSortByCreatedDate = () => {
+        const sortByCreatedDate = state.sortByCreatedDate === 'desc' ? 'asc' : 'desc';
+        const sortedSnapshots = [...state.snapshots].sort((a, b) => {
+            if (sortByCreatedDate === 'asc') {
+                return (new Date(a.createdAtDate).getTime() -
+                    new Date(b.createdAtDate).getTime());
+            }
+            else {
+                return (new Date(b.createdAtDate).getTime() -
+                    new Date(a.createdAtDate).getTime());
+            }
+        });
+        setState({
+            ...state,
+            sortByCreatedDate,
+            snapshots: sortedSnapshots,
+        });
+    };
+    if (!snapshots.data)
+        return null;
+    return (_jsx(HorizontalScrollContainer, { children: _jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableHeaderCell, {}), _jsx(TableHeaderCell, { children: "Data state time" }), _jsx(TableHeaderCell, { children: _jsxs("div", { className: cn(classes.pointerCursor, classes.verticalCentered), onClick: handleSortByCreatedDate, children: ["Created", _jsx(ArrowDropDownIcon, { className: cn(state.sortByCreatedDate === 'asc' && classes.sortIconUp, classes.sortIcon) })] }) }), _jsx(TableHeaderCell, { children: "Pool" }), _jsx(TableHeaderCell, { children: "Number of clones" }), _jsx(TableHeaderCell, { children: "Logical Size" }), _jsx(TableHeaderCell, { children: "Physical Size" })] }) }), _jsx(TableBody, { children: (_b = state.snapshots) === null || _b === void 0 ? void 0 : _b.map((snapshot) => {
+                        var _a, _b;
+                        const snapshotPageId = generateSnapshotPageId(snapshot.id);
+                        return (_jsxs(TableRow, { hover: true, onClick: () => snapshotPageId &&
+                                history.push(`/instance/snapshots/${snapshotPageId}`), className: classes.pointerCursor, children: [_jsx(TableBodyCellMenu, { actions: [
+                                        {
+                                            name: 'Copy snapshot ID',
+                                            onClick: () => copy(snapshot.id),
+                                        },
+                                        {
+                                            name: 'Show related clones',
+                                            onClick: () => stores.clonesModal.openModal({
+                                                snapshotId: snapshot.id,
+                                            }),
+                                        },
+                                        {
+                                            name: 'Delete snapshot',
+                                            onClick: () => setSnapshotModal({
+                                                isOpen: true,
+                                                snapshotId: snapshot.id,
+                                            }),
+                                        },
+                                    ] }), _jsxs(TableBodyCell, { children: [snapshot.dataStateAt, " (", isValidDate(snapshot.dataStateAtDate)
+                                            ? formatDistanceToNowStrict(snapshot.dataStateAtDate, {
+                                                addSuffix: true,
+                                            })
+                                            : '-', ")"] }), _jsxs(TableBodyCell, { children: [snapshot.createdAt, " (", isValidDate(snapshot.createdAtDate)
+                                            ? formatDistanceToNowStrict(snapshot.createdAtDate, {
+                                                addSuffix: true,
+                                            })
+                                            : '-', ")"] }), _jsx(TableBodyCell, { children: (_a = snapshot.pool) !== null && _a !== void 0 ? _a : '-' }), _jsx(TableBodyCell, { children: (_b = snapshot.numClones) !== null && _b !== void 0 ? _b : '-' }), _jsx(TableBodyCell, { children: snapshot.logicalSize
+                                        ? formatBytesIEC(snapshot.logicalSize)
+                                        : '-' }), _jsx(TableBodyCell, { children: snapshot.physicalSize
+                                        ? formatBytesIEC(snapshot.physicalSize)
+                                        : '-' })] }, snapshot.id));
+                    }) }), snapshotModal.isOpen && snapshotModal.snapshotId && (_jsx(DestroySnapshotModal, { isOpen: snapshotModal.isOpen, onClose: () => setSnapshotModal({ isOpen: false, snapshotId: '' }), snapshotId: snapshotModal.snapshotId, instanceId: instanceId, afterSubmitClick: () => { var _a, _b, _c; return (_a = stores.main) === null || _a === void 0 ? void 0 : _a.reload((_c = (_b = stores.main.instance) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : ''); }, destroySnapshot: stores.main.destroySnapshot }))] }) }));
+});

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface SnapshotsProps {
+    instanceId: string;
+}
+export declare const Snapshots: React.FC<SnapshotsProps>;
+export {};

package/pages/Instance/Snapshots/index.js

@@ -0,0 +1,92 @@
+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 { useHistory } from 'react-router';
+import { observer } from 'mobx-react-lite';
+import { makeStyles } from '@material-ui/core';
+import { useStores, useHost } from '@postgres.ai/shared/pages/Instance/context';
+import { SnapshotsList } from '@postgres.ai/shared/pages/Instance/Snapshots/components/SnapshotsList';
+import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle';
+import { Spinner } from '@postgres.ai/shared/components/Spinner';
+import { ErrorStub } from '@postgres.ai/shared/components/ErrorStub';
+import { Button } from '@postgres.ai/shared/components/Button2';
+import { Tooltip } from '@postgres.ai/shared/components/Tooltip';
+import { InfoIcon } from '@postgres.ai/shared/icons/Info';
+import { useEffect, useMemo, useState } from 'react';
+import { SnapshotHeader } from './components/SnapshotHeader';
+const useStyles = makeStyles({
+    sectionTitle: {
+        borderBottom: 0,
+    },
+    marginTop: {
+        marginTop: '16px',
+    },
+    infoIcon: {
+        height: '12px',
+        width: '12px',
+        marginLeft: '8px',
+        color: '#808080',
+    },
+    spinner: {
+        position: 'absolute',
+        right: '50%',
+        transform: 'translate(-50%, -50%)',
+    },
+}, { index: 1 });
+export const Snapshots = observer(({ instanceId }) => {
+    var _a;
+    const host = useHost();
+    const stores = useStores();
+    const classes = useStyles();
+    const history = useHistory();
+    const { getBranches, instance, snapshots } = stores.main;
+    const [messageFilter, setMessageFilter] = useState('');
+    const [branches, setBranches] = useState(null);
+    const [selectedBranch, setSelectedBranch] = useState('All branches');
+    const [isLoadingBranches, setIsLoadingBranches] = useState(true);
+    const filteredSnapshots = useMemo(() => {
+        if (!snapshots.data)
+            return [];
+        if (!messageFilter.trim()) {
+            return snapshots.data;
+        }
+        return snapshots.data.filter((snapshot) => { var _a, _b; return (_b = (_a = snapshot === null || snapshot === void 0 ? void 0 : snapshot.message) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes(messageFilter.toLowerCase()); });
+    }, [snapshots.data, messageFilter]);
+    const clonesList = ((_a = instance === null || instance === void 0 ? void 0 : instance.state) === null || _a === void 0 ? void 0 : _a.cloning.clones) || [];
+    const isEmpty = !(filteredSnapshots === null || filteredSnapshots === void 0 ? void 0 : filteredSnapshots.length);
+    const hasClones = Boolean(clonesList === null || clonesList === void 0 ? void 0 : clonesList.length);
+    const goToSnapshotAddPage = () => history.push(host.routes.createSnapshot());
+    const snapshotPagePath = (snapshotId) => host.routes.snapshot(snapshotId);
+    useEffect(() => {
+        const fetchInitialData = async () => {
+            var _a;
+            try {
+                setIsLoadingBranches(true);
+                const branches = await getBranches(instanceId);
+                const branchNames = (_a = branches === null || branches === void 0 ? void 0 : branches.map(({ name }) => name)) !== null && _a !== void 0 ? _a : [];
+                setBranches(['All branches', ...branchNames]);
+            }
+            catch (error) {
+                console.error('Error fetching initial data:', error);
+            }
+            finally {
+                setIsLoadingBranches(false);
+            }
+        };
+        fetchInitialData();
+    }, []);
+    useEffect(() => {
+        if (selectedBranch) {
+            stores.main.reloadSnapshots(selectedBranch === 'All branches' ? '' : selectedBranch);
+        }
+    }, [selectedBranch]);
+    if (!instance && !snapshots.isLoading)
+        return _jsx(_Fragment, {});
+    if (snapshots === null || snapshots === void 0 ? void 0 : snapshots.error)
+        return _jsx(ErrorStub, { message: snapshots === null || snapshots === void 0 ? void 0 : snapshots.error });
+    return (_jsx("div", { className: classes.marginTop, children: snapshots.isLoading || isLoadingBranches ? (_jsx(Spinner, { size: "lg", className: classes.spinner })) : (_jsxs(_Fragment, { children: [_jsx(SectionTitle, { level: 2, tag: "h2", text: `Snapshots (${(filteredSnapshots === null || filteredSnapshots === void 0 ? void 0 : filteredSnapshots.length) || 0})`, className: classes.sectionTitle, rightContent: _jsxs(_Fragment, { children: [_jsx(Button, { theme: "primary", onClick: goToSnapshotAddPage, isDisabled: !hasClones, children: "Create snapshot" }), !hasClones && (_jsx(Tooltip, { content: "No clones", children: _jsx("div", { style: { display: 'flex' }, children: _jsx(InfoIcon, { className: classes.infoIcon }) }) }))] }) }), _jsx(SnapshotHeader, { branches: branches, selectedBranch: selectedBranch, setMessageFilter: setMessageFilter, setSelectedBranch: setSelectedBranch }), !isEmpty ? (_jsx(SnapshotsList, { routes: { snapshot: snapshotPagePath }, instanceId: instanceId, filteredSnapshots: filteredSnapshots })) : (_jsx("p", { className: classes.marginTop, children: messageFilter.length || selectedBranch ? (_jsx("span", { children: "No active snapshots found. Try removing the filter and checking again" })) : (_jsx("span", { children: " This instance has no active snapshots" })) }))] })) }));
+});

package/pages/Instance/Snapshots/utils/index.d.ts

@@ -0,0 +1,16 @@
+import { Snapshot } from '@postgres.ai/shared/types/api/entities/snapshot';
+export declare const generateSnapshotPageId: (id: string) => string | null;
+export declare const groupSnapshotsByCreatedAtDate: (snapshots: Snapshot[]) => {
+    createdAtDate: Date;
+    dataStateAtDate: Date;
+    numClones: string | number;
+    clones: string[];
+    createdAt: string;
+    dataStateAt: string;
+    id: string;
+    pool: string;
+    physicalSize: number;
+    logicalSize: number;
+    message: string;
+    branch: string;
+}[][];

package/pages/Instance/Snapshots/utils/index.js

@@ -0,0 +1,30 @@
+import { isSameDayUTC } from '@postgres.ai/shared/utils/date';
+export const generateSnapshotPageId = (id) => {
+    if (!id.includes('@'))
+        return null;
+    const snapshotIdPart = id.split('@')[1];
+    return snapshotIdPart.startsWith('snapshot_')
+        ? snapshotIdPart.substring(9)
+        : snapshotIdPart;
+};
+export const groupSnapshotsByCreatedAtDate = (snapshots) => {
+    const groups = [];
+    snapshots.forEach((snapshot) => {
+        let grouped = false;
+        for (const group of groups) {
+            const groupDate = new Date(group[0].createdAtDate);
+            if (isSameDayUTC(snapshot.createdAtDate, groupDate)) {
+                group.push(snapshot);
+                grouped = true;
+                break;
+            }
+        }
+        if (!grouped) {
+            groups.push([snapshot]);
+        }
+    });
+    groups.sort((a, b) => {
+        return b[0].createdAtDate.getTime() - a[0].createdAtDate.getTime();
+    });
+    return groups;
+};

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

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

package/pages/Instance/SnapshotsModal/index.js

@@ -0,0 +1,81 @@
+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 { observer } from 'mobx-react-lite';
+import { makeStyles } from '@material-ui/core';
+import { formatDistanceToNowStrict } from 'date-fns';
+import copy from 'copy-to-clipboard';
+import { useStores } from '@postgres.ai/shared/pages/Instance/context';
+import { ArrowDropDownIcon } from '@postgres.ai/shared/icons/ArrowDropDown';
+import { Modal as ModalBase } from '@postgres.ai/shared/components/Modal';
+import { HorizontalScrollContainer } from '@postgres.ai/shared/components/HorizontalScrollContainer';
+import { Table, TableHead, TableRow, TableBody, TableHeaderCell, TableBodyCell, TableBodyCellMenu, } from '@postgres.ai/shared/components/Table';
+import { formatBytesIEC } from '@postgres.ai/shared/utils/units';
+import { isSameDayUTC } from '@postgres.ai/shared/utils/date';
+import { Tags } from '@postgres.ai/shared/pages/Instance/components/Tags';
+import { ModalReloadButton } from '@postgres.ai/shared/pages/Instance/components/ModalReloadButton';
+import { getTags } from '../Snapshots/components/SnapshotsModal/utils';
+const useStyles = makeStyles({
+    root: {
+        fontSize: '14px',
+        marginTop: 0,
+        display: 'block',
+    },
+    container: {
+        maxHeight: '400px',
+    },
+    cellContentCentered: {
+        display: 'flex',
+        alignItems: 'center',
+    },
+    sortIcon: {
+        marginLeft: '8px',
+        width: '10px',
+    },
+    emptyStub: {
+        marginTop: '16px',
+    },
+}, { index: 1 });
+export const SnapshotsModal = observer(() => {
+    const classes = useStyles();
+    const stores = useStores();
+    const { snapshots } = stores.main;
+    if (!snapshots.data)
+        return null;
+    const filteredSnapshots = snapshots.data.filter((snapshot) => {
+        const isMatchedByDate = !stores.snapshotsModal.date ||
+            isSameDayUTC(snapshot.dataStateAtDate, stores.snapshotsModal.date);
+        const isMatchedByPool = !stores.snapshotsModal.pool ||
+            snapshot.pool === stores.snapshotsModal.pool;
+        return isMatchedByDate && isMatchedByPool;
+    });
+    const isEmpty = !filteredSnapshots.length;
+    return (_jsxs(ModalBase, { isOpen: stores.snapshotsModal.isOpenModal, onClose: stores.snapshotsModal.closeModal, title: `Snapshots (${filteredSnapshots.length})`, classes: { content: classes.root }, size: "md", titleRightContent: _jsx(ModalReloadButton, { isReloading: stores.main.snapshots.isLoading, onReload: stores.main.reloadSnapshots }), headerContent: _jsx(Tags, { data: getTags({
+                date: stores.snapshotsModal.date,
+                pool: stores.snapshotsModal.pool,
+            }) }), children: [isEmpty && _jsx("p", { className: classes.emptyStub, children: "No snapshots found" }), !isEmpty && (_jsx(HorizontalScrollContainer, { classes: { content: classes.container }, children: _jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableHeaderCell, {}), _jsx(TableHeaderCell, { children: "Data state time" }), _jsx(TableHeaderCell, { children: _jsxs("div", { className: classes.cellContentCentered, children: ["Created", _jsx(ArrowDropDownIcon, { className: classes.sortIcon })] }) }), _jsx(TableHeaderCell, { children: "Disk" }), _jsx(TableHeaderCell, { children: "Size" })] }) }), _jsx(TableBody, { children: filteredSnapshots.map((snapshot) => {
+                                var _a;
+                                return (_jsxs(TableRow, { children: [_jsx(TableBodyCellMenu, { actions: [
+                                                {
+                                                    name: 'Copy snapshot ID',
+                                                    onClick: () => copy(snapshot.id),
+                                                },
+                                                {
+                                                    name: 'Show related clones',
+                                                    onClick: () => stores.clonesModal.openModal({
+                                                        snapshotId: snapshot.id,
+                                                    }),
+                                                },
+                                            ] }), _jsxs(TableBodyCell, { children: [snapshot.dataStateAt, " (", formatDistanceToNowStrict(snapshot.dataStateAtDate, {
+                                                    addSuffix: true,
+                                                }), ")"] }), _jsxs(TableBodyCell, { children: [snapshot.createdAt, " (", formatDistanceToNowStrict(snapshot.createdAtDate, {
+                                                    addSuffix: true,
+                                                }), ")"] }), _jsx(TableBodyCell, { children: (_a = snapshot.pool) !== null && _a !== void 0 ? _a : '-' }), _jsx(TableBodyCell, { children: snapshot.physicalSize
+                                                ? formatBytesIEC(snapshot.physicalSize)
+                                                : '-' })] }, snapshot.id));
+                            }) })] }) }))] }));
+});

package/pages/Instance/Tabs/PlatformTabs.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+declare type Props = {
+    value: number;
+    handleChange: (event: React.ChangeEvent<{}>, newValue: number) => void;
+    hasLogs: boolean;
+    isPlatform?: boolean;
+    hideInstanceTabs?: boolean;
+};
+export declare const PlatformTabs: ({ value, handleChange, hasLogs, hideInstanceTabs, }: Props) => JSX.Element;
+export {};

package/pages/Instance/Tabs/PlatformTabs.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link, useParams } from 'react-router-dom';
+import { Tab as TabComponent, Tabs as TabsComponent } from '@material-ui/core';
+import { TABS_INDEX } from '.';
+import { useTabsStyles } from './styles';
+import { PostgresSQLIcon } from '@postgres.ai/shared/icons/PostgresSQL';
+export const PlatformTabs = ({ value, handleChange, hasLogs, hideInstanceTabs, }) => {
+    const classes = useTabsStyles();
+    const { org, instanceId } = useParams();
+    const tabs = [
+        {
+            label: '👁️ Overview',
+            to: 'overview',
+            value: TABS_INDEX.OVERVIEW,
+        },
+        {
+            label: '🖖 Branches',
+            to: 'branches',
+            value: TABS_INDEX.BRANCHES,
+            hide: hideInstanceTabs,
+        },
+        {
+            label: '⚡ Snapshots',
+            to: 'snapshots',
+            value: TABS_INDEX.SNAPSHOTS,
+            hide: hideInstanceTabs,
+        },
+        {
+            label: (_jsxs("div", { className: classes.flexRow, children: [_jsx(PostgresSQLIcon, {}), " Clones"] })),
+            to: 'clones',
+            value: TABS_INDEX.CLONES,
+            hide: hideInstanceTabs,
+        },
+        {
+            label: '📓 Logs',
+            to: 'logs',
+            value: TABS_INDEX.LOGS,
+            disabled: !hasLogs,
+            hide: hideInstanceTabs,
+        },
+        {
+            label: '🛠️ Configuration',
+            to: 'configuration',
+            value: TABS_INDEX.CONFIGURATION,
+            hide: hideInstanceTabs,
+        },
+    ];
+    return (_jsx(TabsComponent, { value: value, onChange: handleChange, classes: { root: classes.tabsRoot, indicator: classes.tabsIndicator }, children: tabs.map(({ label, to, value, hide, disabled }) => (_jsx(Link, { to: `/${org}/instances/${instanceId}/${to}`, children: _jsx(TabComponent, { label: label, value: value, disabled: disabled, classes: {
+                    root: hide ? classes.tabHidden : classes.tabRoot,
+                }, onClick: (event) => handleChange(event, value) }) }, value))) }));
+};

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

@@ -0,0 +1,26 @@
+import React from 'react';
+export declare const TABS_INDEX: {
+    OVERVIEW: number;
+    BRANCHES: number;
+    SNAPSHOTS: number;
+    CLONES: number;
+    LOGS: number;
+    CONFIGURATION: number;
+};
+export interface TabsProps {
+    value: number;
+    handleChange: (event: React.ChangeEvent<{}>, newValue: number) => void;
+    hasLogs: boolean;
+    isPlatform?: boolean;
+    hideInstanceTabs?: boolean;
+}
+export declare const Tabs: ({ value, handleChange, hasLogs, hideInstanceTabs, }: TabsProps) => JSX.Element;
+declare type InstanceTabProps = {
+    tab: number;
+    isPlatform?: boolean;
+    onTabChange?: (tabID: number) => void;
+    instanceId: string;
+    hasLogs: boolean;
+};
+export declare const InstanceTabs: (props: InstanceTabProps) => JSX.Element;
+export {};