@postgres.ai/shared 3.5.0-pr-1027 → 3.5.0-pr-1035.1

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,35 @@
+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 { 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, " (", 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" })] }))] }));
+});

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

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

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

@@ -0,0 +1,16 @@
+/*--------------------------------------------------------------------------
+ * 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) => {
+    var _a, _b;
+    const list = [...snapshots];
+    const [first] = list;
+    const [last] = list.reverse();
+    return {
+        firstSnapshot: (_a = first) !== null && _a !== void 0 ? _a : null,
+        lastSnapshot: (_b = last) !== null && _b !== void 0 ? _b : null
+    };
+};

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 } = 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) })] }));
+});

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,75 @@
+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 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, {})] }))] }));
+};

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

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

package/pages/Instance/Tabs/index.js

@@ -0,0 +1,40 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { makeStyles, Tab as TabComponent, Tabs as TabsComponent, } from '@material-ui/core';
+import { colors } from '@postgres.ai/shared/styles/colors';
+const useStyles = makeStyles({
+    tabsRoot: {
+        minHeight: 0,
+        marginTop: '-8px',
+    },
+    tabsIndicator: {
+        height: '3px',
+    },
+    tabRoot: {
+        fontWeight: 400,
+        minWidth: 0,
+        minHeight: 0,
+        padding: '6px 16px',
+        borderBottom: `3px solid ${colors.consoleStroke}`,
+        '& + $tabRoot': {
+            marginLeft: '10px',
+        },
+        '&.Mui-disabled': {
+            opacity: 1,
+            color: colors.pgaiDarkGray,
+        },
+    },
+    tabHidden: {
+        display: 'none',
+    },
+}, { index: 1 });
+export const Tabs = (props) => {
+    const classes = useStyles();
+    const { value, handleChange, hasLogs } = props;
+    return (_jsxs(TabsComponent, { value: value, onChange: handleChange, classes: { root: classes.tabsRoot, indicator: classes.tabsIndicator }, children: [_jsx(TabComponent, { label: "Overview", classes: {
+                    root: classes.tabRoot,
+                }, value: 0 }), _jsx(TabComponent, { label: "Logs", disabled: !hasLogs, classes: {
+                    root: props.isPlatform ? classes.tabHidden : classes.tabRoot,
+                }, value: 1 }), _jsx(TabComponent, { label: "Configuration", classes: {
+                    root: props.isPlatform ? classes.tabHidden : classes.tabRoot,
+                }, value: 2 })] }));
+};

package/pages/Instance/components/ClonesList/ConnectionModal/index.d.ts

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

package/pages/Instance/components/ClonesList/ConnectionModal/index.js

@@ -0,0 +1,74 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } 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, IconButton } from '@material-ui/core';
+import copy from 'copy-to-clipboard';
+import { useStores } from '@postgres.ai/shared/pages/Instance/context';
+import { Tooltip } from '@postgres.ai/shared/components/Tooltip';
+import { Modal } from '@postgres.ai/shared/components/Modal';
+import { TextField } from '@postgres.ai/shared/components/TextField';
+import { icons } from '@postgres.ai/shared/styles/icons';
+import { getSshPortForwardingCommand, getPsqlConnectionStr, getJdbcConnectionStr, } from '@postgres.ai/shared/utils/connection';
+const useStyles = makeStyles({
+    root: {
+        fontSize: '14px',
+    },
+    item: {
+        '& + $item': {
+            marginTop: '16px',
+        },
+    },
+    fieldText: {
+        margin: 0,
+    },
+    field: {
+        width: 'calc(100% - 24px)',
+        margin: '16px 0 0 0',
+    },
+    fieldWrapper: {
+        display: 'flex',
+        alignItems: 'flex-end',
+    },
+    fieldInfo: {
+        display: 'flex',
+        alignItems: 'center',
+        height: '32px',
+        marginLeft: '12px',
+    },
+    copyButton: {
+        width: '32px',
+        height: '32px',
+        padding: '8px',
+    },
+    note: {
+        margin: '24px 0 0 0',
+        fontSize: '12px',
+    },
+}, { index: 1 });
+export const ConnectionModal = observer((props) => {
+    var _a;
+    const { isOpen, onClose, cloneId } = props;
+    const classes = useStyles();
+    const stores = useStores();
+    const { instance } = stores.main;
+    if (!instance)
+        return null;
+    const clone = (_a = instance.state) === null || _a === void 0 ? void 0 : _a.cloning.clones.find((clone) => clone.id === cloneId);
+    if (!clone)
+        return null;
+    const sshPortForwardingCommand = getSshPortForwardingCommand(instance, clone);
+    const psqlConnectionStr = getPsqlConnectionStr(clone);
+    const jdbcConnectionStr = getJdbcConnectionStr(clone);
+    return (_jsx(Modal, { title: "Clone connection info", isOpen: isOpen, onClose: onClose, children: _jsxs("div", { className: classes.root, children: [sshPortForwardingCommand && (_jsxs("div", { className: classes.item, children: [_jsxs("p", { className: classes.fieldText, children: ["In a separate console, set up SSH port forwarding", _jsx("br", {}), "(and keep it running):"] }), _jsx(TextField, { label: "SSH port forwarding", value: sshPortForwardingCommand, className: classes.field, InputProps: {
+                                endAdornment: (_jsx(IconButton, { className: classes.copyButton, onClick: () => copy(sshPortForwardingCommand), children: icons.copyIcon })),
+                            } })] })), psqlConnectionStr && (_jsxs("div", { className: classes.item, children: [_jsx("p", { className: classes.fieldText, children: "Connect to Postgres using psql:" }), _jsxs("div", { className: classes.fieldWrapper, children: [_jsx(TextField, { label: "psql connection string", value: psqlConnectionStr, className: classes.field, InputProps: {
+                                        endAdornment: (_jsx(IconButton, { className: classes.copyButton, onClick: () => copy(psqlConnectionStr), children: icons.copyIcon })),
+                                    } }), _jsx(Tooltip, { content: _jsx(_Fragment, { children: "Used to connect to Postgres using psql. Change DBNAME to\u00A0 name of the database you want to connect. Use PGPASSWORD\u00A0 environment variable to set database password or type\u00A0 it when prompted." }), children: _jsx("span", { className: classes.fieldInfo, children: icons.infoIcon }) })] })] })), jdbcConnectionStr && (_jsxs("div", { className: classes.item, children: [_jsx("p", { className: classes.fieldText, children: "Connect to Postgres using JDBC:" }), _jsxs("div", { className: classes.fieldWrapper, children: [_jsx(TextField, { label: "JDBC connection string", value: jdbcConnectionStr, className: classes.field, InputProps: {
+                                        endAdornment: (_jsx(IconButton, { className: classes.copyButton, onClick: () => copy(jdbcConnectionStr), children: icons.copyIcon })),
+                                    } }), _jsx(Tooltip, { content: _jsx(_Fragment, { children: "Used to connect to Postgres using JDBC. Change DBNAME to\u00A0 name of the database you want to connect, change DBPASSWORD\u00A0 to the password you\u2019ve used on clone creation." }), children: _jsx("span", { className: classes.fieldInfo, children: icons.infoIcon }) })] })] })), _jsxs("p", { className: classes.note, children: ["Password was set during clone creation. It\u2019s not being stored.", _jsx("br", {}), "You would need to recreate a clone if the password is lost."] })] }) }));
+});