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

package/pages/{Configuration → Instance/Configuration}/index.js

@@ -35,7 +35,7 @@ const useStyles = makeStyles({
         fontSize: '12px',
     },
 }, { index: 1 });
-export const Configuration = observer(({ switchActiveTab, reload, isConfigurationActive, disableConfigModification, }) => {
+export const Configuration = observer(({ instanceId, switchActiveTab, reload, isConfigurationActive, disableConfigModification, }) => {
     const classes = useStyles();
     const stores = useStores();
     const { config, isConfigurationLoading, updateConfig, getSeImages, fullConfig, testDbSource, configError, getFullConfig, getFullConfigError, getEngine, } = stores.main;
@@ -98,7 +98,7 @@ export const Configuration = observer(({ switchActiveTab, reload, isConfiguratio
         await updateConfig({
             ...values,
             tuningParams: formatTuningParamsToObj(values.tuningParams),
-        }).then((response) => {
+        }, instanceId).then((response) => {
             if (response === null || response === void 0 ? void 0 : response.ok) {
                 setSubmitState({
                     status: 'success',
@@ -141,7 +141,10 @@ export const Configuration = observer(({ switchActiveTab, reload, isConfiguratio
                     },
                 },
             });
-            testDbSource(connectionData)
+            testDbSource({
+                ...connectionData,
+                instanceId,
+            })
                 .then((res) => {
                 var _a;
                 if (res === null || res === void 0 ? void 0 : res.response) {
@@ -202,7 +205,7 @@ export const Configuration = observer(({ switchActiveTab, reload, isConfiguratio
         }
     };
     const handleModalClick = async () => {
-        await getFullConfig();
+        await getFullConfig(instanceId);
         setIsModalOpen(true);
     };
     const handleDeleteChip = (_, uniqueValue, id) => {
@@ -417,7 +420,7 @@ export const Configuration = observer(({ switchActiveTab, reload, isConfiguratio
         }
     }, [config]);
     useEffect(() => {
-        getEngine().then((res) => {
+        getEngine(instanceId).then((res) => {
             setDledition(String(res === null || res === void 0 ? void 0 : res.edition));
         });
     }, []);
@@ -426,7 +429,7 @@ export const Configuration = observer(({ switchActiveTab, reload, isConfiguratio
             if (formik.dirty &&
                 !isCeEdition &&
                 !customOrGenericImage(configData === null || configData === void 0 ? void 0 : configData.dockerImageType)) {
-                await getFullConfig().then(async (data) => {
+                await getFullConfig(instanceId).then(async (data) => {
                     if (data) {
                         await fetchSeImages({
                             packageGroup: configData === null || configData === void 0 ? void 0 : configData.dockerImageType,

package/pages/{Configuration → Instance/Configuration}/tooltipText.js

@@ -17,5 +17,5 @@ export const tooltipText = {
     restoreParallelJobs: () => (_jsx("div", { children: "Number of parallel workers used to restore databases from dump to Postgres managed by DBLab. For initial data retrieval (very first data refresh), it is recommended to use the number of vCPUs available on machine running DBLab. With this approach, we have faster restore time, but we need to keep in mind that we can also have higher usage of CPU and disk IO on this machine (up to temporary saturation of resources). For subsequent refreshes, if DBLab is constantly used, it is recommended to reduce this value by 50% to keep some room for normal use of DBLab (such as work with clones)." })),
     pgRestoreCustomOptions: () => (_jsx("div", { children: "pg_restore options to be used to restore from a database dump, for example: '--exclude-schema=repack --exclude-schema=\"camelStyleSchemaName\"'. Note that due to security reasons, the current implementation supports only letters, numbers, hyphen, underscore, equal sign, and double quotes." })),
     timetable: () => (_jsxs("div", { children: ["Schedule for full data refreshes, in", ' ', _jsx("a", { target: '_blank', href: 'https://en.wikipedia.org/wiki/Cron#Overview', className: styles.externalLink, children: "crontab format" }), "."] })),
-    tuningParams: () => _jsx("div", { children: "Test" }),
+    tuningParams: () => (_jsxs("div", { children: ["Query tuning parameters. This is essential to ensure that cloned PostgreSQL most likely generates the same plans as on the source (specifically, it is crutial for query performance troubleshooting and optimization, including working with EXPLAIN plans). For details, see the", ' ', _jsx("a", { target: '_blank', href: 'https://postgres.ai/docs/how-to-guides/administration/postgresql-configuration#postgresql-configuration-in-clones', className: styles.externalLink, children: "docs" }), "."] })),
 };

package/pages/Instance/Info/Disks/Disk/index.js

@@ -4,7 +4,7 @@ import { formatDistanceToNowStrict } from 'date-fns';
 import { colors } from '@postgres.ai/shared/styles/colors';
 import { formatBytesIEC } from '@postgres.ai/shared/utils/units';
 import { Status as PerformanceStatus } from '@postgres.ai/shared/components/Status';
-import { formatUTC } from '@postgres.ai/shared/utils/date';
+import { formatUTC, isValidDate } from '@postgres.ai/shared/utils/date';
 import { Property } from '../../components/Property';
 import { ActionsMenu } from './ActionsMenu';
 import { Status } from './Status';
@@ -63,7 +63,9 @@ export const Disk = (props) => {
     const shouldShowWarning = props.status === 'active' &&
         getPercent(props.usedDataSize, props.totalDataSize) >
             WARNING_THRESHOLD_PERCENT;
-    return (_jsxs("div", { className: classes.root, children: [_jsxs("div", { className: classes.header, children: [_jsxs("div", { className: classes.titleWrapper, children: [_jsx("h6", { title: props.name, className: classes.title, children: props.name }), _jsx(ActionsMenu, { poolId: props.id, poolName: props.name, isActive: props.status === 'active' })] }), _jsx(Status, { value: props.status, hasWarning: shouldShowWarning })] }), _jsx(Property, { name: "Mode", classes: { content: classes.uppercaseContent }, children: props.mode }), props.status === 'refreshing' && props.refreshingStartDate && (_jsx("div", { className: classes.content, children: _jsxs(Property, { name: "Refreshing started at", children: [formatUTC(props.refreshingStartDate, 'yyyy-MM-dd HH:mm:ss'), " UTC (", formatDistanceToNowStrict(props.refreshingStartDate, {
-                            addSuffix: true,
-                        }), ")"] }) })), _jsxs("div", { className: classes.content, children: [_jsx(Property, { name: "Clones", children: props.clonesCount }), _jsx(Property, { name: "Snapshots", children: props.snapshotsCount })] }), _jsxs("div", { className: classes.content, children: [_jsx(Property, { name: "Size", children: formatBytesIEC(props.totalDataSize) }), _jsxs(Property, { name: _jsxs(_Fragment, { children: ["Used\u00A0", _jsx(Marker, { className: classes.markerUsed })] }), children: [formatBytesIEC(props.usedDataSize), " /", ' ', getPercent(props.usedDataSize, props.totalDataSize), " %"] }), _jsxs(Property, { name: _jsxs(_Fragment, { children: ["Free\u00A0", _jsx(Marker, { className: classes.markerFree })] }), children: [formatBytesIEC(props.freeDataSize), " /", ' ', getPercent(props.freeDataSize, props.totalDataSize), " %"] })] }), _jsx(ProgressBar, { value: props.usedDataSize, total: props.totalDataSize, thresholdPercent: WARNING_THRESHOLD_PERCENT }), shouldShowWarning && (_jsxs(PerformanceStatus, { type: "warning", className: classes.warningMessage, children: ["+", WARNING_THRESHOLD_PERCENT, "% disk usage may result in performance degradation"] }))] }));
+    return (_jsxs("div", { className: classes.root, children: [_jsxs("div", { className: classes.header, children: [_jsxs("div", { className: classes.titleWrapper, children: [_jsx("h6", { title: props.name, className: classes.title, children: props.name }), _jsx(ActionsMenu, { poolId: props.id, poolName: props.name, isActive: props.status === 'active' })] }), _jsx(Status, { value: props.status, hasWarning: shouldShowWarning })] }), _jsx(Property, { name: "Mode", classes: { content: classes.uppercaseContent }, children: props.mode }), props.status === 'refreshing' && props.refreshingStartDate && (_jsx("div", { className: classes.content, children: _jsxs(Property, { name: "Refreshing started at", children: [formatUTC(props.refreshingStartDate, 'yyyy-MM-dd HH:mm:ss'), " UTC (", isValidDate(props.refreshingStartDate)
+                            ? formatDistanceToNowStrict(props.refreshingStartDate, {
+                                addSuffix: true,
+                            })
+                            : '-', ")"] }) })), _jsxs("div", { className: classes.content, children: [_jsx(Property, { name: "Clones", children: props.clonesCount }), _jsx(Property, { name: "Snapshots", children: props.snapshotsCount })] }), _jsxs("div", { className: classes.content, children: [_jsx(Property, { name: "Size", children: formatBytesIEC(props.totalDataSize) }), _jsxs(Property, { name: _jsxs(_Fragment, { children: ["Used\u00A0", _jsx(Marker, { className: classes.markerUsed })] }), children: [formatBytesIEC(props.usedDataSize), " /", ' ', getPercent(props.usedDataSize, props.totalDataSize), " %"] }), _jsxs(Property, { name: _jsxs(_Fragment, { children: ["Free\u00A0", _jsx(Marker, { className: classes.markerFree })] }), children: [formatBytesIEC(props.freeDataSize), " /", ' ', getPercent(props.freeDataSize, props.totalDataSize), " %"] })] }), _jsx(ProgressBar, { value: props.usedDataSize, total: props.totalDataSize, thresholdPercent: WARNING_THRESHOLD_PERCENT }), shouldShowWarning && (_jsxs(PerformanceStatus, { type: "warning", className: classes.warningMessage, children: ["+", WARNING_THRESHOLD_PERCENT, "% disk usage may result in performance degradation"] }))] }));
 };

package/pages/Instance/Info/Retrieval/RetrievalModal/index.js

@@ -1,5 +1,4 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect } from 'react';
 import { Modal } from '@postgres.ai/shared/components/Modal';
 import { useStores } from '@postgres.ai/shared/pages/Instance/context';
 import { ModalReloadButton } from '@postgres.ai/shared/pages/Instance/components/ModalReloadButton';
@@ -8,8 +7,5 @@ import styles from './styles.module.scss';
 export const RetrievalModal = ({ isOpen, onClose, data, }) => {
     const stores = useStores();
     const { isReloadingInstanceRetrieval, reloadInstanceRetrieval } = stores.main;
-    useEffect(() => {
-        reloadInstanceRetrieval();
-    }, []);
     return (_jsx(Modal, { title: "Retrieval activity details", isOpen: isOpen, onClose: onClose, size: "md", titleRightContent: _jsx(ModalReloadButton, { isReloading: isReloadingInstanceRetrieval, onReload: reloadInstanceRetrieval }), children: _jsxs("div", { className: styles.tableContainer, children: [_jsx(RetrievalTable, { data: data === null || data === void 0 ? void 0 : data.source, activity: "source" }), _jsx(RetrievalTable, { data: data === null || data === void 0 ? void 0 : data.target, activity: "target" })] }) }));
 };

package/pages/Instance/Info/Retrieval/index.js

@@ -7,8 +7,6 @@ import { Status } from '@postgres.ai/shared/components/Status';
 import { capitalize } from '@postgres.ai/shared/utils/strings';
 import { formatDateStd } from '@postgres.ai/shared/utils/date';
 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 { Section } from '../components/Section';
 import { Property } from '../components/Property';
 import { RefreshFailedAlert } from './RefreshFailedAlert';
@@ -41,7 +39,7 @@ export const Retrieval = observer(() => {
     const { mode, status, activity } = instanceRetrieval;
     const isVisible = mode !== 'physical' && !isRetrievalUnknown(mode);
     const isActive = mode === 'logical' && status === 'refreshing';
-    return (_jsxs(Section, { title: "Retrieval", children: [_jsx(Property, { name: "Status", children: _jsxs(Status, { type: getTypeByStatus(retrieving.status), children: [capitalize(retrieving.status), isVisible && (_jsxs(_Fragment, { children: [_jsx(Button, { theme: "primary", onClick: () => setIsModalOpen(true), isDisabled: !isActive, className: classes.detailsButton, children: "Show details" }), !isActive && (_jsx(Tooltip, { content: "No retrieval activity details", children: _jsx(InfoIcon, { className: classes.infoIcon }) }))] }))] }) }), _jsx(Property, { name: "Mode", children: retrieving.mode }), _jsx(Property, { name: "Last refresh", children: retrieving.lastRefresh
+    return (_jsxs(Section, { title: "Retrieval", children: [_jsx(Property, { name: "Status", children: _jsxs(Status, { type: getTypeByStatus(retrieving.status), children: [capitalize(retrieving.status), isVisible && (_jsx(_Fragment, { children: _jsx(Button, { theme: "primary", onClick: () => setIsModalOpen(true), isDisabled: !isActive, className: classes.detailsButton, children: "Show details" }) }))] }) }), _jsx(Property, { name: "Mode", children: retrieving.mode }), _jsx(Property, { name: "Last refresh", children: retrieving.lastRefresh
                     ? formatDateStd(retrieving.lastRefresh, { withDistance: true })
                     : '-' }), _jsx(Property, { name: "Next refresh", children: retrieving.nextRefresh
                     ? formatDateStd(retrieving.nextRefresh, { withDistance: true })

package/pages/Instance/Info/Snapshots/Calendar/utils.d.ts

@@ -7,12 +7,16 @@ export declare const getCalendar: (monthStartDate: Date, snapshots: Snapshot[])
         snapshots: {
             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;
         }[];
         isBreak: boolean;
         isDisabled: boolean;

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

@@ -12,6 +12,7 @@ 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 { useStores } from '@postgres.ai/shared/pages/Instance/context';
+import { isValidDate } from '@postgres.ai/shared/utils/date';
 import { Section } from '../components/Section';
 import { Property } from '../components/Property';
 import { getEdgeSnapshots } from './utils';
@@ -27,9 +28,13 @@ export const Snapshots = observer(() => {
     const { snapshots } = stores.main;
     const classes = useStyles();
     const { firstSnapshot, lastSnapshot } = getEdgeSnapshots((_a = snapshots.data) !== null && _a !== void 0 ? _a : []);
-    return (_jsxs(Section, { title: "Snapshots", rightContent: !snapshots.data && !snapshots.error && _jsx(Spinner, { size: "sm" }), children: [snapshots.error && _jsx(ErrorStub, { message: snapshots.error, size: "normal" }), snapshots.data && !snapshots.error && (_jsxs(_Fragment, { children: [_jsx(Property, { name: "Number of snapshots", children: snapshots.data.length }), _jsxs(Property, { name: "Oldest data state time", children: [lastSnapshot && (_jsxs(_Fragment, { children: [lastSnapshot.dataStateAt, " (", formatDistanceToNowStrict(lastSnapshot.dataStateAtDate, {
-                                        addSuffix: true,
-                                    }), ")"] })), !lastSnapshot && '-'] }), _jsxs(Property, { name: "Newest data state time", children: [firstSnapshot && (_jsxs(_Fragment, { children: [firstSnapshot.dataStateAt, " (", formatDistanceToNowStrict(firstSnapshot.dataStateAtDate, {
-                                        addSuffix: true,
-                                    }), ")"] })), !firstSnapshot && '-'] }), _jsx(Calendar, { snapshots: snapshots.data, onSelectDate: (date) => stores.snapshotsModal.openModal({ date }) }), _jsx(Button, { className: classes.button, onClick: () => stores.snapshotsModal.openModal(), children: "Show all snapshots" })] }))] }));
+    return (_jsxs(Section, { title: "Snapshots", rightContent: !snapshots.data && !snapshots.error && _jsx(Spinner, { size: "sm" }), children: [snapshots.error && _jsx(ErrorStub, { message: snapshots.error, size: "normal" }), snapshots.data && !snapshots.error && (_jsxs(_Fragment, { children: [_jsx(Property, { name: "Number of snapshots", children: snapshots.data.length }), _jsxs(Property, { name: "Oldest data state time", children: [lastSnapshot && (_jsxs(_Fragment, { children: [lastSnapshot.dataStateAt, " (", isValidDate(lastSnapshot.dataStateAtDate)
+                                        ? formatDistanceToNowStrict(lastSnapshot.dataStateAtDate, {
+                                            addSuffix: true,
+                                        })
+                                        : '-', ")"] })), !lastSnapshot && '-'] }), _jsxs(Property, { name: "Newest data state time", children: [firstSnapshot && (_jsxs(_Fragment, { children: [firstSnapshot.dataStateAt, " (", isValidDate(firstSnapshot.dataStateAtDate)
+                                        ? formatDistanceToNowStrict(firstSnapshot.dataStateAtDate, {
+                                            addSuffix: true,
+                                        })
+                                        : '-', ")"] })), !firstSnapshot && '-'] }), _jsx(Calendar, { snapshots: snapshots.data, onSelectDate: (date) => stores.snapshotsModal.openModal({ date }) }), _jsx(Button, { className: classes.button, onClick: () => stores.snapshotsModal.openModal(), children: "Show all snapshots" })] }))] }));
 });

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

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

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

@@ -5,12 +5,22 @@
  *--------------------------------------------------------------------------
  */
 export const getEdgeSnapshots = (snapshots) => {
-    var _a, _b;
-    const list = [...snapshots];
-    const [first] = list;
-    const [last] = list.reverse();
+    if (!snapshots.length) {
+        return {
+            firstSnapshot: null,
+            lastSnapshot: null
+        };
+    }
+    const sortedList = [...snapshots].sort((a, b) => {
+        var _a, _b, _c, _d;
+        const aTime = (_b = (_a = a.dataStateAtDate) === null || _a === void 0 ? void 0 : _a.getTime()) !== null && _b !== void 0 ? _b : 0;
+        const bTime = (_d = (_c = b.dataStateAtDate) === null || _c === void 0 ? void 0 : _c.getTime()) !== null && _d !== void 0 ? _d : 0;
+        return bTime - aTime;
+    });
+    const [first] = sortedList;
+    const [last] = sortedList.slice(-1);
     return {
-        firstSnapshot: (_a = first) !== null && _a !== void 0 ? _a : null,
-        lastSnapshot: (_b = last) !== null && _b !== void 0 ? _b : null
+        firstSnapshot: first !== null && first !== void 0 ? first : null,
+        lastSnapshot: last !== null && last !== void 0 ? last : null // oldest
     };
 };

package/pages/Instance/Info/Status/index.js

@@ -21,11 +21,11 @@ import styles from './styles.module.scss';
 export const Status = observer(() => {
     const [isOpenInstanceResponseModal, setIsOpenInstanceResponseModal] = useState(false);
     const stores = useStores();
-    const { instance } = stores.main;
+    const { instance, uiVersion, config } = stores.main;
     if (!instance || !instance.state)
         return null;
     const { code, message } = instance.state.status;
     const { version, startedAt } = instance.state.engine;
     const isStatusOk = code === 'OK';
-    return (_jsxs(Section, { title: "Status", children: [_jsx(Property, { name: "Status", children: _jsxs(StatusIndicator, { type: getType(code), children: [getText(code), !isStatusOk && (_jsxs(_Fragment, { children: [_jsx("br", {}), message] }))] }) }), startedAt && (_jsx(Property, { name: "Started", children: formatDateStd(startedAt, { withDistance: true }) })), instance.createdAt && (_jsx(Property, { name: "Registered", children: formatDateStd(instance.createdAt, { withDistance: true }) })), version && _jsx(Property, { name: "Version", children: version }), !isStatusOk && (_jsxs("div", { className: styles.controls, children: [_jsx(Button, { onClick: () => setIsOpenInstanceResponseModal(true), className: styles.button, children: "Show full response" }), _jsx(GatewayLink, { className: styles.button, href: linksConfig.support, children: _jsx(Button, { theme: "accent", children: "Ask support" }) })] })), _jsx(InstanceResponseModal, { isOpen: isOpenInstanceResponseModal, onClose: () => setIsOpenInstanceResponseModal(false) })] }));
+    return (_jsxs(Section, { title: "Status", children: [_jsx(Property, { name: "Status", children: _jsxs(StatusIndicator, { type: getType(code), children: [getText(code), !isStatusOk && (_jsxs(_Fragment, { children: [_jsx("br", {}), message] }))] }) }), startedAt && (_jsx(Property, { name: "Started", children: formatDateStd(startedAt, { withDistance: true }) })), instance.createdAt && (_jsx(Property, { name: "Registered", children: formatDateStd(instance.createdAt, { withDistance: true }) })), uiVersion && _jsx(Property, { name: "UI version", children: `v${uiVersion}` }), version && _jsx(Property, { name: "Engine version", children: version }), (config === null || config === void 0 ? void 0 : config.dockerPath) && (_jsx(Property, { name: "Docker image", children: config === null || config === void 0 ? void 0 : config.dockerPath })), !isStatusOk && (_jsxs("div", { className: styles.controls, children: [_jsx(Button, { onClick: () => setIsOpenInstanceResponseModal(true), className: styles.button, children: "Show full response" }), _jsx(GatewayLink, { className: styles.button, href: linksConfig.support, children: _jsx(Button, { theme: "accent", children: "Ask support" }) })] })), _jsx(InstanceResponseModal, { isOpen: isOpenInstanceResponseModal, onClose: () => setIsOpenInstanceResponseModal(false) })] }));
 });

package/pages/Instance/Info/index.js

@@ -65,11 +65,12 @@ const useStyles = makeStyles((theme) => ({
 export const Info = () => {
     const classes = useStyles();
     const width = useWindowDimensions();
+    const [onHover, setOnHover] = useState(false);
     const isMobileScreen = width <= SMALL_BREAKPOINT_PX;
     const [isCollapsed, setIsCollapsed] = useState(() => localStorage.getItem(SIDEBAR_COLLAPSED_PARAM) === '1' && !isMobileScreen);
     const handleClick = () => {
         setIsCollapsed(!isCollapsed);
         localStorage.setItem(SIDEBAR_COLLAPSED_PARAM, isCollapsed ? '0' : '1');
     };
-    return (_jsxs("div", { className: cn(classes.container, !isCollapsed ? classes.root : classes.collapsed), children: [!isMobileScreen && (_jsx(Button, { className: classes.collapseBtn, onClick: handleClick, isCollapsed: isCollapsed, icon: isCollapsed ? (_jsx(ArrowLeft, { className: classes.arrowImage })) : (_jsx(ArrowRight, { className: classes.arrowImage })), children: "Collapse" })), !isCollapsed && (_jsxs("div", { children: [_jsx(Status, {}), _jsx(Retrieval, {}), _jsx(Connection, {}), _jsx(Disks, {}), _jsx(Snapshots, {})] }))] }));
+    return (_jsxs("div", { className: cn(classes.container, !isCollapsed ? classes.root : classes.collapsed), children: [!isMobileScreen && (_jsx(Button, { onMouseEnter: () => setOnHover(true), onMouseLeave: () => setOnHover(false), className: classes.collapseBtn, onClick: handleClick, isCollapsed: isCollapsed, type: "button", icon: isCollapsed ? (_jsx(ArrowLeft, { className: classes.arrowImage })) : (_jsx(ArrowRight, { className: classes.arrowImage })), children: onHover && 'Collapse' })), !isCollapsed && (_jsxs("div", { children: [_jsx(Status, {}), _jsx(Retrieval, {}), _jsx(Connection, {}), _jsx(Disks, {}), _jsx(Snapshots, {})] }))] }));
 };

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+interface SnapshotHeaderProps {
+    branches: string[] | null;
+    selectedBranch: string;
+    setMessageFilter: (value: string) => void;
+    setSelectedBranch: (value: string) => void;
+}
+export declare const SnapshotHeader: (({ branches, selectedBranch, setMessageFilter, setSelectedBranch, }: SnapshotHeaderProps) => JSX.Element) & {
+    displayName: string;
+};
+export {};

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

@@ -0,0 +1,36 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { observer } from 'mobx-react-lite';
+import { makeStyles, TextField } from '@material-ui/core';
+import { Select } from '@postgres.ai/shared/components/Select';
+const useStyles = makeStyles({
+    outerContainer: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+        paddingBottom: '6px',
+    },
+    select: {
+        width: '200px',
+    },
+    inputContainer: {
+        width: '300px',
+        '& input': {
+            padding: '8px',
+        },
+    },
+}, { index: 1 });
+export const SnapshotHeader = observer(({ branches, selectedBranch, setMessageFilter, setSelectedBranch, }) => {
+    const classes = useStyles();
+    return (_jsxs("div", { className: classes.outerContainer, children: [_jsx(Select, { fullWidth: true, label: "Branch", className: classes.select, value: selectedBranch, disabled: !branches, onChange: (e) => {
+                    setSelectedBranch(e.target.value);
+                }, items: branches
+                    ? branches.map((branch) => {
+                        return {
+                            value: branch,
+                            children: _jsx("div", { children: branch }),
+                        };
+                    })
+                    : [] }), _jsx(TextField, { variant: "outlined", className: classes.inputContainer, onChange: (e) => setMessageFilter(e.target.value), label: 'Filter by message', InputLabelProps: {
+                    shrink: true,
+                } })] }));
+});

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Snapshot } from '@postgres.ai/shared/types/api/entities/snapshot';
+export declare const SnapshotsList: (({ routes, filteredSnapshots, instanceId, }: {
+    routes: {
+        snapshot: (snapshotId: string) => string;
+    };
+    filteredSnapshots: Snapshot[];
+    instanceId: string;
+}) => JSX.Element) & {
+    displayName: string;
+};

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

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