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

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

@@ -0,0 +1,41 @@
+/*--------------------------------------------------------------------------
+ * 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 { daysInWeek } from 'date-fns';
+import { config } from '@postgres.ai/shared/config';
+import { startOfMonthUTC, isSameDayUTC, startOfWeekUTC, endOfMonthUTC, endOfWeekUTC, startOfDayUTC, differenceInDaysUTC, addDaysUTC, addMonthsUTC, isSameMonthUTC, formatUTC } from '@postgres.ai/shared/utils/date';
+export const getMonthStartDate = () => startOfMonthUTC(new Date());
+const getEdgeDates = (monthStartDate) => {
+    return {
+        firstDate: startOfWeekUTC(monthStartDate, { locale: config.dateFnsLocale }),
+        lastDate: startOfDayUTC(endOfWeekUTC(endOfMonthUTC(monthStartDate), {
+            locale: config.dateFnsLocale,
+        })),
+    };
+};
+export const getCalendar = (monthStartDate, snapshots) => {
+    const { firstDate, lastDate } = getEdgeDates(monthStartDate);
+    const countDays = differenceInDaysUTC(lastDate, firstDate);
+    const days = Array.from({ length: countDays + 1 }, (_, i) => {
+        const date = addDaysUTC(firstDate, i);
+        return {
+            date,
+            snapshots: snapshots.filter((snapshot) => isSameDayUTC(date, snapshot.dataStateAtDate)),
+            isBreak: i > 0 && (i + 1) % 7 === 0,
+            isDisabled: !isSameMonthUTC(monthStartDate, date),
+        };
+    });
+    const weekDays = days
+        .slice(0, daysInWeek)
+        .map((day) => formatUTC(day.date, 'E'));
+    return {
+        weekDays,
+        days,
+    };
+};
+export const getPrevMonthStartDate = (monthStartDate) => addMonthsUTC(monthStartDate, -1);
+export const getNextMonthStartDate = (monthStartDate) => addMonthsUTC(monthStartDate, 1);
+export const canGetNextMonthStartDate = (monthStartDate) => monthStartDate < getMonthStartDate();

package/pages/Instance/Info/Snapshots/TimeLine/Day/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+declare type Props = {
+    text: string;
+};
+export declare const Day: (props: Props) => JSX.Element;
+export {};

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

@@ -0,0 +1,58 @@
+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 { makeStyles } from '@material-ui/styles';
+import { colors } from '@postgres.ai/shared/styles/colors';
+const useStyles = makeStyles({
+    root: {
+        flex: '0 1 auto',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        '&:first-child': {
+            alignItems: 'flex-start',
+            '& $division': {
+                marginLeft: '9px',
+            },
+            '& $date': {
+                color: colors.black,
+            },
+        },
+        '&:last-child': {
+            alignItems: 'flex-end',
+            '& $division': {
+                marginRight: '9px',
+            },
+            '& $date': {
+                color: colors.black,
+            },
+        },
+    },
+    point: {
+        width: '19px',
+        flex: '0 0 19px',
+        borderRadius: '50%',
+        background: colors.secondary2.lightLight,
+        border: `1px solid ${colors.secondary2.main}`,
+    },
+    division: {
+        marginTop: '4px',
+        flex: '0 0 4px',
+        width: '1px',
+        background: colors.pgaiDarkGray,
+    },
+    date: {
+        fontSize: '10px',
+        marginTop: '4px',
+        color: colors.pgaiDarkGray,
+    },
+}, { index: 1 });
+export const Day = (props) => {
+    const { text } = props;
+    const classes = useStyles();
+    return (_jsxs("div", { className: classes.root, children: [_jsx("div", { className: classes.point }), _jsx("div", { className: classes.division }), _jsx("span", { className: classes.date, children: text })] }));
+};

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const TimeLine: () => JSX.Element;

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

@@ -0,0 +1,32 @@
+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 { makeStyles } from '@material-ui/styles';
+import { colors } from '@postgres.ai/shared/styles/colors';
+import { Day } from './Day';
+const useStyles = makeStyles({
+    root: {
+        marginTop: '10px',
+    },
+    container: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        position: 'relative',
+    },
+    line: {
+        margin: '0 9px -23px 9px',
+        paddingTop: '22px',
+        borderBottom: `1px solid ${colors.pgaiDarkGray}`,
+    },
+    label: {
+        fontSize: '12px',
+    },
+}, { index: 1 });
+export const TimeLine = () => {
+    const classes = useStyles();
+    return (_jsxs("div", { className: classes.root, children: [_jsx("div", { className: classes.line }), _jsxs("div", { className: classes.container, children: [_jsx(Day, { text: "Jun 20" }), _jsx(Day, { text: "Jun 21" }), _jsx(Day, { text: "Jun 22" }), _jsx(Day, { text: "Jun 23" }), _jsx(Day, { text: "Jun 24" }), _jsx(Day, { text: "Jun 25" }), _jsx(Day, { text: "Jun 26" })] }), _jsxs("div", { className: classes.container, children: [_jsx("span", { className: classes.label, children: "16:33:20 UTC" }), _jsx("span", { className: classes.label, children: "10:30:00 UTC" })] })] }));
+};

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

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

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

@@ -0,0 +1,40 @@
+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 { makeStyles } from '@material-ui/styles';
+import { observer } from 'mobx-react-lite';
+import { formatDistanceToNowStrict } from 'date-fns';
+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';
+import { Calendar } from './Calendar';
+const useStyles = makeStyles({
+    button: {
+        marginTop: '20px',
+    },
+}, { index: 1 });
+export const Snapshots = observer(() => {
+    var _a;
+    const stores = useStores();
+    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, " (", 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

@@ -0,0 +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;
+        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;
+        message: string;
+        branch: string;
+    };
+};

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

@@ -0,0 +1,26 @@
+/*--------------------------------------------------------------------------
+ * Copyright (c) 2019-2021, Postgres.ai, Nikolay Samokhvalov nik@postgres.ai
+ * All Rights Reserved. Proprietary and confidential.
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ *--------------------------------------------------------------------------
+ */
+export const getEdgeSnapshots = (snapshots) => {
+    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: first !== null && first !== void 0 ? first : null,
+        lastSnapshot: last !== null && last !== void 0 ? last : null // oldest
+    };
+};

package/pages/Instance/Info/Status/InstanceResponseModal/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+declare type Props = {
+    isOpen: boolean;
+    onClose: () => void;
+};
+export declare const InstanceResponseModal: ((props: Props) => JSX.Element | null) & {
+    displayName: string;
+};
+export {};

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

@@ -0,0 +1,12 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { observer } from 'mobx-react-lite';
+import { Modal } from '@postgres.ai/shared/components/Modal';
+import { FormattedText } from '@postgres.ai/shared/components/FormattedText';
+import { useStores } from '@postgres.ai/shared/pages/Instance/context';
+import styles from './styles.module.scss';
+export const InstanceResponseModal = observer((props) => {
+    const stores = useStores();
+    if (!stores.main.instance)
+        return null;
+    return (_jsx(Modal, { isOpen: props.isOpen, onClose: props.onClose, title: "Instance Full Response", size: "md", children: _jsx(FormattedText, { value: JSON.stringify(stores.main.instance.dto, null, 2), className: styles.formattedText }) }));
+});

package/pages/Instance/Info/Status/index.d.ts

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

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

@@ -0,0 +1,31 @@
+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 { useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import { GatewayLink } from '@postgres.ai/shared/components/GatewayLink';
+import { Status as StatusIndicator } from '@postgres.ai/shared/components/Status';
+import { useStores } from '@postgres.ai/shared/pages/Instance/context';
+import { formatDateStd } from '@postgres.ai/shared/utils/date';
+import { Button } from '@postgres.ai/shared/components/Button2';
+import { linksConfig } from '@postgres.ai/shared/config/links';
+import { Section } from '../components/Section';
+import { Property } from '../components/Property';
+import { InstanceResponseModal } from './InstanceResponseModal';
+import { getType, getText } from './utils';
+import styles from './styles.module.scss';
+export const Status = observer(() => {
+    const [isOpenInstanceResponseModal, setIsOpenInstanceResponseModal] = useState(false);
+    const stores = useStores();
+    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 }) })), 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/Status/utils.d.ts

@@ -0,0 +1,8 @@
+declare const STATUS_CODE_TO_TYPE: {
+    OK: "ok";
+    WARNING: "warning";
+    NO_RESPONSE: "error";
+};
+export declare const getType: (code: keyof typeof STATUS_CODE_TO_TYPE) => "error" | "warning" | "ok";
+export declare const getText: (code: keyof typeof STATUS_CODE_TO_TYPE) => string;
+export {};

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

@@ -0,0 +1,23 @@
+/*--------------------------------------------------------------------------
+ * 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 { capitalize } from '@postgres.ai/shared/utils/strings';
+const STATUS_CODE_TO_TYPE = {
+    OK: 'ok',
+    WARNING: 'warning',
+    NO_RESPONSE: 'error'
+};
+export const getType = (code) => {
+    var _a;
+    return (_a = STATUS_CODE_TO_TYPE[code]) !== null && _a !== void 0 ? _a : 'unknown';
+};
+export const getText = (code) => {
+    if (code === 'OK')
+        return code;
+    if (code === 'NO_RESPONSE')
+        return 'No response';
+    return capitalize(code);
+};

package/pages/Instance/Info/components/Property/index.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+declare type Props = {
+    name: React.ReactNode;
+    children: React.ReactNode;
+    classes?: {
+        name?: string;
+        content?: string;
+    };
+};
+export declare const Property: (props: Props) => JSX.Element;
+export {};

package/pages/Instance/Info/components/Property/index.js

@@ -0,0 +1,14 @@
+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 styles from './styles.module.scss';
+export const Property = (props) => {
+    var _a, _b;
+    const { name, children } = props;
+    return (_jsxs("div", { className: styles.root, children: [_jsx("label", { className: cn(styles.name, (_a = props.classes) === null || _a === void 0 ? void 0 : _a.name), children: name }), _jsx("div", { className: cn(styles.content, (_b = props.classes) === null || _b === void 0 ? void 0 : _b.content), children: children })] }));
+};

package/pages/Instance/Info/components/Section/index.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+declare type Props = {
+    title: string;
+    children: React.ReactNode;
+    rightContent?: React.ReactNode;
+};
+export declare const Section: (props: Props) => JSX.Element;
+export {};

package/pages/Instance/Info/components/Section/index.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { makeStyles } from '@material-ui/styles';
+import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle';
+const useStyles = makeStyles({
+    root: {
+        '& + $root': {
+            marginTop: '28px',
+        },
+    },
+    content: {
+        marginTop: '8px',
+    },
+}, { index: 1 });
+export const Section = (props) => {
+    const { title, children, rightContent } = props;
+    const classes = useStyles();
+    return (_jsxs("div", { className: classes.root, children: [_jsx(SectionTitle, { text: title, level: 2, tag: "h3", rightContent: rightContent }), _jsx("div", { className: classes.content, children: children })] }));
+};

package/pages/Instance/Info/components/ValueStatus/index.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { Props as StatusProps } from '@postgres.ai/shared/components/Status';
+declare type Props = {
+    children: React.ReactNode;
+    type?: StatusProps['type'];
+    icon?: StatusProps['icon'];
+};
+export declare const ValueStatus: (props: Props) => JSX.Element;
+export {};

package/pages/Instance/Info/components/ValueStatus/index.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { makeStyles } from '@material-ui/core';
+import { Status, } from '@postgres.ai/shared/components/Status';
+const useStyles = makeStyles({
+    root: {
+        fontWeight: 400,
+        marginTop: '2px',
+        fontSize: '10px',
+    },
+    icon: {
+        alignSelf: 'flex-start',
+    },
+}, { index: 1 });
+export const ValueStatus = (props) => {
+    const { children, type, icon } = props;
+    const classes = useStyles();
+    return (_jsx(Status, { className: classes.root, classNameIcon: classes.icon, type: type, icon: icon, children: children }));
+};

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const Info: () => JSX.Element;

package/pages/Instance/Info/index.js

@@ -0,0 +1,76 @@
+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 { useState } from 'react';
+import { makeStyles } from '@material-ui/core';
+import { Button } from '@postgres.ai/shared/components/MenuButton';
+import { useWindowDimensions } from '@postgres.ai/shared/hooks/useWindowDimensions';
+import { ArrowLeft, ArrowRight } from '@postgres.ai/shared/pages/Instance/Info/Icons';
+import { Status } from './Status';
+import { Retrieval } from './Retrieval';
+import { Connection } from './Connection';
+import { Disks } from './Disks';
+import { Snapshots } from './Snapshots';
+const SIDEBAR_COLLAPSED_PARAM = 'overviewSidebarCollapsed';
+const SMALL_BREAKPOINT_PX = 937;
+const useStyles = makeStyles((theme) => ({
+    container: {
+        minHeight: 0,
+        minWidth: 0,
+        width: '437px',
+        transition: 'width 0.2s ease-out',
+        [theme.breakpoints.down('sm')]: {
+            width: '100%',
+        },
+    },
+    root: {
+        flex: '0 0 auto',
+        [theme.breakpoints.down('md')]: {
+            width: '300px',
+        },
+        [theme.breakpoints.down('sm')]: {
+            flex: '0 0 auto',
+            width: '100%',
+            marginTop: '20px',
+        },
+    },
+    collapsed: {
+        height: '100%',
+        width: '64px',
+    },
+    collapseBtn: {
+        background: '#f9f9f9 !important',
+        margin: '20px 0 10px 0',
+        fontWeight: 500,
+        '& svg': {
+            marginRight: '5px',
+        },
+        '&:hover': {
+            background: '#f1f1f1',
+        },
+    },
+    arrowImage: {
+        width: '16px',
+        height: '16px',
+        '& path': {
+            fill: '#000',
+        },
+    },
+}), { index: 1 });
+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, { 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;
+};