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

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { makeStyles } from '@material-ui/core';
+import clsx from 'clsx';
+import { CircleIcon } from '@postgres.ai/shared/icons/Circle';
+const useStyles = makeStyles({
+    root: {
+        display: 'inline',
+        verticalAlign: 'middle',
+        width: '10px',
+    },
+}, { index: 1 });
+export const Marker = (props) => {
+    const classes = useStyles();
+    return _jsx(CircleIcon, { className: clsx(classes.root, props.className) });
+};

package/pages/Instance/Info/Disks/Disk/ProgressBar/PointerIcon.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+export declare const PoinerIcon: ({ className, style, }: {
+    className?: string | undefined;
+    style?: import("react").CSSProperties | undefined;
+}) => JSX.Element;

package/pages/Instance/Info/Disks/Disk/ProgressBar/PointerIcon.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const PoinerIcon = ({ className, style, }) => (_jsx("svg", { width: "5", height: "14", viewBox: "0 0 5 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", style: style, className: className, children: _jsx("path", { d: "M2.5 14L-2.06593e-07 -4.37114e-07L5 0L2.5 14Z", fill: "#EE0202" }) }));

package/pages/Instance/Info/Disks/Disk/ProgressBar/index.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare type Props = {
+    value: number;
+    total: number;
+    thresholdPercent: number;
+};
+export declare const ProgressBar: (props: Props) => JSX.Element;
+export {};

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

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { makeStyles } from '@material-ui/core';
+import { colors } from '@postgres.ai/shared/styles/colors';
+import { Tooltip } from '@postgres.ai/shared/components/Tooltip';
+import { PoinerIcon } from './PointerIcon';
+const useStyles = makeStyles((theme) => ({
+    '@keyframes grow': {
+        '0%': {
+            transform: 'scaleX(0)',
+        },
+        '100%': {
+            transform: 'scaleX(1)',
+        },
+    },
+    root: {
+        height: '12px',
+        position: 'relative',
+        borderRadius: '4px',
+        background: colors.gray,
+        overflow: 'hidden',
+        marginTop: '8px',
+    },
+    indicator: {
+        position: 'absolute',
+        top: 0,
+        left: 0,
+        height: '100%',
+        width: '30%',
+        background: colors.primary.light,
+        animation: `$grow 500ms ${theme.transitions.easing.easeOut}`,
+        transformOrigin: 0,
+    },
+    pointer: {
+        position: 'absolute',
+        height: '100%',
+        top: 0,
+        transform: 'translateX(-50%)',
+    },
+}), { index: 1 });
+export const ProgressBar = (props) => {
+    const classes = useStyles();
+    return (_jsxs("div", { className: classes.root, children: [_jsx("div", { className: classes.indicator, style: { width: `${(props.value / props.total) * 100}%` } }), _jsx(Tooltip, { content: `+${props.thresholdPercent}% disk usage may result in performance degradation`, children: _jsx(PoinerIcon, { className: classes.pointer, style: {
+                        left: `${props.thresholdPercent}%`,
+                    } }) })] }));
+};

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare type Props = {
+    value: 'refreshing' | 'active' | 'empty';
+    hasWarning: boolean;
+};
+export declare const Status: (props: Props) => JSX.Element;

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

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { makeStyles } from '@material-ui/core';
+import { WarningIcon } from '@postgres.ai/shared/icons/Warning';
+import { Tooltip } from '@postgres.ai/shared/components/Tooltip';
+import { colors } from '@postgres.ai/shared/styles/colors';
+const VALUE_TO_NAME = {
+    refreshing: 'Data refreshing',
+    active: 'Active',
+    empty: 'Empty',
+};
+const VALUE_TO_DESC = {
+    refreshing: 'Data retrieval is in progress',
+    active: 'Disk is ready to provision clones',
+    empty: 'Disk is emptied and ready for a data retrieval',
+};
+const useStyles = makeStyles({
+    root: {
+        display: 'flex',
+        color: colors.white,
+    },
+    warning: {
+        display: 'flex',
+        flex: '0 0 16px',
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginRight: '4px',
+        height: '16px',
+        background: colors.state.warning,
+        borderRadius: '3px',
+    },
+    icon: {
+        height: '10px',
+    },
+    label: {
+        fontSize: '12px',
+        padding: '1px 6px',
+        borderRadius: '3px',
+        flex: '0 0 auto',
+        background: (props) => {
+            if (props.value === 'refreshing')
+                return colors.state.notice;
+            if (props.value === 'active')
+                return colors.state.ok;
+            return colors.state.unknown;
+        },
+    },
+}, { index: 1 });
+export const Status = (props) => {
+    const { value, hasWarning } = props;
+    const classes = useStyles(props);
+    return (_jsxs("div", { className: classes.root, children: [hasWarning && (_jsx("div", { className: classes.warning, children: _jsx(WarningIcon, { className: classes.icon }) })), _jsx(Tooltip, { content: VALUE_TO_DESC[value], children: _jsx("div", { className: classes.label, children: VALUE_TO_NAME[value] }) })] }));
+};

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+declare type Props = {
+    id: string | null;
+    name: string;
+    totalDataSize: number;
+    mode: string;
+    refreshingStartDate: Date | null;
+    clonesCount: number;
+    snapshotsCount: number;
+    usedDataSize: number;
+    freeDataSize: number;
+    status: 'refreshing' | 'active' | 'empty';
+};
+export declare const Disk: (props: Props) => JSX.Element;
+export {};

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

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { makeStyles } from '@material-ui/core';
+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, isValidDate } from '@postgres.ai/shared/utils/date';
+import { Property } from '../../components/Property';
+import { ActionsMenu } from './ActionsMenu';
+import { Status } from './Status';
+import { Marker } from './Marker';
+import { ProgressBar } from './ProgressBar';
+const WARNING_THRESHOLD_PERCENT = 80;
+const useStyles = makeStyles({
+    root: {
+        border: `1px solid ${colors.consoleStroke}`,
+        padding: '6px 8px 8px',
+        borderRadius: '4px',
+        '& + $root': {
+            marginTop: '8px',
+        },
+    },
+    header: {
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'center',
+    },
+    titleWrapper: {
+        display: 'flex',
+        flex: '1 1 auto',
+        alignItems: 'center',
+        marginRight: '16px',
+        minWidth: 0,
+    },
+    title: {
+        fontWeight: 700,
+        fontSize: '14px',
+        margin: '0 4px 0 0',
+        whiteSpace: 'nowrap',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+    },
+    content: {
+        marginTop: '8px',
+    },
+    markerUsed: {
+        color: colors.primary.light,
+    },
+    markerFree: {
+        color: colors.gray,
+    },
+    warningMessage: {
+        fontSize: '10px',
+        marginTop: '6px',
+    },
+    uppercaseContent: {
+        textTransform: 'uppercase',
+    },
+}, { index: 1 });
+const getPercent = (value, total) => Math.round((value / total) * 100);
+export const Disk = (props) => {
+    const classes = useStyles();
+    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 (", 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/Disks/index.d.ts

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

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

@@ -0,0 +1,24 @@
+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 { observer } from 'mobx-react-lite';
+import { useStores } from '@postgres.ai/shared/pages/Instance/context';
+import { Section } from '../components/Section';
+import { Disk } from './Disk';
+export const Disks = observer(() => {
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    const stores = useStores();
+    const { instance, snapshots } = stores.main;
+    if (!instance)
+        return null;
+    if (!snapshots)
+        return null;
+    return (_jsx(Section, { title: "Disks", children: (_k = (_c = (_b = (_a = instance.state) === null || _a === void 0 ? void 0 : _a.pools) === null || _b === void 0 ? void 0 : _b.map((pool) => {
+            var _a, _b, _c, _d, _e;
+            return (_jsx(Disk, { status: pool.status, name: pool.name, id: pool.name, mode: pool.mode, clonesCount: pool.cloneList.length, snapshotsCount: (_b = (_a = snapshots.data) === null || _a === void 0 ? void 0 : _a.filter((snapshot) => snapshot.pool === pool.name).length) !== null && _b !== void 0 ? _b : 0, totalDataSize: pool.fileSystem.size, usedDataSize: pool.fileSystem.used, freeDataSize: pool.fileSystem.free, refreshingStartDate: (_e = (_d = (_c = instance.state) === null || _c === void 0 ? void 0 : _c.retrieving) === null || _d === void 0 ? void 0 : _d.lastRefresh) !== null && _e !== void 0 ? _e : null }, pool.name));
+        })) !== null && _c !== void 0 ? _c : (((_d = instance.state) === null || _d === void 0 ? void 0 : _d.fileSystem) && (_jsx(Disk, { status: 'active', name: 'Main', id: null, mode: "ZFS", clonesCount: (_g = (_f = (_e = instance.state) === null || _e === void 0 ? void 0 : _e.clones) === null || _f === void 0 ? void 0 : _f.length) !== null && _g !== void 0 ? _g : instance.state.cloning.clones.length, snapshotsCount: (_j = (_h = snapshots.data) === null || _h === void 0 ? void 0 : _h.length) !== null && _j !== void 0 ? _j : 0, totalDataSize: instance.state.fileSystem.size, usedDataSize: instance.state.fileSystem.used, freeDataSize: instance.state.fileSystem.free, refreshingStartDate: null })))) !== null && _k !== void 0 ? _k : (_jsxs(_Fragment, { children: ["Disk information is ", _jsx("strong", { children: "unavailable" }), "."] })) }));
+});

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

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const ArrowLeft: ({ className }: {
+    className?: string | undefined;
+}) => JSX.Element;
+export declare const ArrowRight: ({ className }: {
+    className?: string | undefined;
+}) => JSX.Element;

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

@@ -0,0 +1,3 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+export const ArrowLeft = ({ className }) => (_jsxs("svg", { width: "20", height: "21", viewBox: "0 0 20 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: [_jsx("path", { d: "M0.307554 9.50891L9.50896 0.307513C9.91902 -0.102504 10.583 -0.102504 10.9931 0.307513C11.4031 0.7172 11.4031 1.38195 10.9931 1.79163L2.53369 10.251L10.993 18.7103C11.403 19.12 11.403 19.7847 10.993 20.1944C10.788 20.3995 10.5196 20.502 10.251 20.502C9.98229 20.502 9.71356 20.3995 9.50891 20.1944L0.307507 10.993C-0.102512 10.5833 -0.10251 9.9186 0.307554 9.50891Z", fill: "white" }), _jsx("path", { d: "M9.00696 9.50891L18.2084 0.307513C18.6181 -0.102504 19.2828 -0.102504 19.6925 0.307513C20.1025 0.7172 20.1025 1.38195 19.6925 1.79163L11.2335 10.251L19.6924 18.7103C20.1025 19.12 20.1025 19.7847 19.6924 20.1944C19.4878 20.3995 19.2191 20.502 18.9504 20.502C18.6817 20.502 18.413 20.3995 18.2083 20.1944L9.00692 10.993C8.59695 10.5833 8.59695 9.9186 9.00696 9.50891Z", fill: "white" })] }));
+export const ArrowRight = ({ className }) => (_jsxs("svg", { width: "21", height: "21", viewBox: "0 0 21 21", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className, children: [_jsx("path", { d: "M20.211 9.5089L10.8896 0.307513C10.4742 -0.102504 9.80151 -0.102504 9.38609 0.307513C8.97073 0.717199 8.97073 1.38195 9.38609 1.79163L17.9558 10.251L9.38614 18.7103C8.97078 19.12 8.97078 19.7847 9.38614 20.1944C9.59385 20.3994 9.8657 20.502 10.1379 20.502C10.4101 20.502 10.6823 20.3994 10.8896 20.1944L20.211 10.993C20.6264 10.5833 20.6264 9.91859 20.211 9.5089Z", fill: "white" }), _jsx("path", { d: "M11.3981 9.5089L2.07672 0.307513C1.66169 -0.102504 0.988271 -0.102504 0.573242 0.307513C0.157878 0.717199 0.157878 1.38195 0.573242 1.79163L9.14256 10.251L0.57329 18.7103C0.157926 19.12 0.157926 19.7847 0.57329 20.1944C0.780613 20.3994 1.05284 20.502 1.32503 20.502C1.59721 20.502 1.86944 20.3994 2.07677 20.1944L11.3982 10.993C11.8135 10.5833 11.8135 9.91859 11.3981 9.5089Z", fill: "white" })] }));

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

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

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

@@ -0,0 +1,15 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { observer } from 'mobx-react-lite';
+import { useStores } from '@postgres.ai/shared/pages/Instance/context';
+import { WarningIcon } from '@postgres.ai/shared/icons/Warning';
+import { formatDateStd } from '@postgres.ai/shared/utils/date';
+import { Property } from '../../components/Property';
+import styles from './styles.module.scss';
+export const RefreshFailedAlert = observer(() => {
+    var _a, _b, _c, _d;
+    const stores = useStores();
+    const refreshFailed = (_d = (_c = (_b = (_a = stores.main.instance) === null || _a === void 0 ? void 0 : _a.state) === null || _b === void 0 ? void 0 : _b.retrieving) === null || _c === void 0 ? void 0 : _c.alerts) === null || _d === void 0 ? void 0 : _d.refreshFailed;
+    if (!refreshFailed)
+        return null;
+    return (_jsxs("div", { className: styles.root, children: [_jsxs("div", { className: styles.header, children: [_jsx("h6", { className: styles.title, children: refreshFailed.message }), _jsx(WarningIcon, { className: styles.icon })] }), _jsx(Property, { classes: { name: styles.propertyName }, name: "Last seen", children: formatDateStd(refreshFailed.lastSeen, { withDistance: true }) }), _jsx(Property, { classes: { name: styles.propertyName }, name: "Count", children: refreshFailed.count })] }));
+});

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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { ActivityType } from '@postgres.ai/shared/types/api/entities/instanceRetrieval';
+export declare const RetrievalModal: ({ isOpen, onClose, data, }: {
+    isOpen: boolean;
+    onClose: () => void;
+    data: {
+        source: ActivityType[];
+        target: ActivityType[];
+    };
+}) => JSX.Element;

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

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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';
+import { RetrievalTable } from '../RetrievalTable';
+import styles from './styles.module.scss';
+export const RetrievalModal = ({ isOpen, onClose, data, }) => {
+    const stores = useStores();
+    const { isReloadingInstanceRetrieval, reloadInstanceRetrieval } = stores.main;
+    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/RetrievalTable/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ActivityType } from '@postgres.ai/shared/types/api/entities/instanceRetrieval';
+export declare const RetrievalTable: ({ data, activity, }: {
+    data: ActivityType[];
+    activity: string;
+}) => JSX.Element;

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

@@ -0,0 +1,6 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import { Table, TableHead, TableRow, TableCell, TableBody, } from '@material-ui/core';
+import styles from './styles.module.scss';
+export const RetrievalTable = ({ data, activity, }) => {
+    return (_jsxs(Table, { children: [_jsx(TableHead, { children: _jsx(TableRow, { children: _jsxs(TableCell, { className: styles.tableSubtitle, children: ["Activity on the ", activity] }) }) }), _jsx(TableBody, { className: styles.tableBody, children: data && data.length > 0 ? (data.map((item, index) => (_jsx("div", { children: Object.entries(item).map((val, index) => (_jsx(TableRow, { hover: true, className: styles.tableRow, children: _jsxs(TableCell, { children: [val[0], ": ", val[1]] }) }, index))) }, index)))) : (_jsx(TableBody, { className: styles.tableBody, children: _jsx("div", { children: _jsx(TableRow, { className: styles.tableRow, children: _jsxs(TableCell, { children: ["No activity on the ", activity] }) }) }) })) })] }));
+};

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

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

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

@@ -0,0 +1,47 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { observer } from 'mobx-react-lite';
+import { makeStyles } from '@material-ui/core';
+import { useStores } from '@postgres.ai/shared/pages/Instance/context';
+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 { Section } from '../components/Section';
+import { Property } from '../components/Property';
+import { RefreshFailedAlert } from './RefreshFailedAlert';
+import { getTypeByStatus, isRetrievalUnknown } from './utils';
+import { RetrievalModal } from './RetrievalModal';
+const useStyles = makeStyles(() => ({
+    infoIcon: {
+        height: '12px',
+        width: '12px',
+        marginLeft: '8px',
+        color: '#808080',
+    },
+    detailsButton: {
+        marginLeft: '8px',
+    },
+}), { index: 1 });
+export const Retrieval = observer(() => {
+    var _a;
+    const stores = useStores();
+    const classes = useStyles();
+    const [isModalOpen, setIsModalOpen] = useState(false);
+    const { instance, instanceRetrieval } = stores.main;
+    if (!instance)
+        return null;
+    const retrieving = (_a = instance.state) === null || _a === void 0 ? void 0 : _a.retrieving;
+    if (!retrieving)
+        return null;
+    if (!instanceRetrieval)
+        return null;
+    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 && (_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 })
+                    : 'Not scheduled' }), _jsx(RefreshFailedAlert, {}), _jsx(RetrievalModal, { data: activity, isOpen: isModalOpen, onClose: () => setIsModalOpen(false) })] }));
+});

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

@@ -0,0 +1,2 @@
+export declare const getTypeByStatus: (status: string | undefined) => "error" | "waiting" | "ok" | "unknown";
+export declare const isRetrievalUnknown: (mode: string | undefined) => boolean;

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

@@ -0,0 +1,12 @@
+export const getTypeByStatus = (status) => {
+    if (status === 'finished')
+        return 'ok';
+    if (status === 'refreshing')
+        return 'waiting';
+    if (status === 'failed')
+        return 'error';
+    return 'unknown';
+};
+export const isRetrievalUnknown = (mode) => {
+    return mode === 'unknown' || mode === '';
+};

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { Snapshot } from '@postgres.ai/shared/types/api/entities/snapshot';
+declare type Props = {
+    date: Date;
+    snapshots: Snapshot[];
+    isBreak: boolean;
+    isDisabled: boolean;
+    onClick: () => void;
+};
+export declare const Day: (props: Props) => JSX.Element;
+export {};

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

@@ -0,0 +1,71 @@
+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 { makeStyles } from '@material-ui/core';
+import clsx from 'clsx';
+import { isSameDayUTC, formatUTC } from '@postgres.ai/shared/utils/date';
+import { colors } from '@postgres.ai/shared/styles/colors';
+import { Tooltip } from '@postgres.ai/shared/components/Tooltip';
+const CELL_SIZE = 28;
+const useStyles = makeStyles({
+    root: {
+        position: 'relative',
+        cursor: 'default',
+        flex: `0 0 ${CELL_SIZE}px`,
+        background: '#f4f4f4',
+        height: `${CELL_SIZE}px`,
+        display: 'flex',
+        borderRadius: `${CELL_SIZE / 2}px`,
+        alignItems: 'center',
+        justifyContent: 'center',
+        marginTop: '16px',
+        fontSize: '12px',
+    },
+    rootHasSnapshots: {
+        background: colors.secondary2.lightLight,
+        cursor: 'pointer',
+    },
+    rootCurrent: {
+        border: `1px solid ${colors.secondary2.main}`,
+    },
+    rootDisabled: {
+        opacity: '0.25',
+        pointerEvents: 'none',
+    },
+    itemsCount: {
+        top: '-8px',
+        right: '-6px',
+        position: 'absolute',
+        fontSize: '8px',
+        backgroundColor: colors.white,
+        border: `1px solid ${colors.secondary2.lightLight}`,
+        borderRadius: '8px',
+        height: '16px',
+        padding: '2px',
+        minWidth: '16px',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    break: {
+        flex: '0 0 100%',
+    },
+}, { index: 1 });
+export const Day = (props) => {
+    const { date, isBreak, snapshots, isDisabled, onClick } = props;
+    const classes = useStyles();
+    const today = new Date();
+    const breakRendered = isBreak && _jsx("div", { className: classes.break });
+    const dayRendered = (_jsxs("div", { className: clsx(classes.root, snapshots.length && classes.rootHasSnapshots, isDisabled && classes.rootDisabled, isSameDayUTC(today, date) && classes.rootCurrent), onClick: snapshots.length ? onClick : void 0, children: [!!snapshots.length && (_jsx("div", { className: classes.itemsCount, children: snapshots.length })), formatUTC(date, 'd')] }));
+    if (snapshots.length) {
+        const contentRendered = (_jsx(_Fragment, { children: snapshots.map((snapshot) => {
+                return _jsx("div", { children: snapshot.dataStateAt }, snapshot.id);
+            }) }));
+        return (_jsxs(_Fragment, { children: [_jsx(Tooltip, { content: contentRendered, disableTouchListener: true, children: dayRendered }), breakRendered] }));
+    }
+    return (_jsxs(_Fragment, { children: [dayRendered, breakRendered] }));
+};

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { Snapshot } from '@postgres.ai/shared/types/api/entities/snapshot';
+declare type Props = {
+    snapshots: Snapshot[];
+    onSelectDate: (date: Date) => void;
+};
+export declare const Calendar: (props: Props) => JSX.Element;
+export {};

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

@@ -0,0 +1,67 @@
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+/*--------------------------------------------------------------------------
+ * Copyright (c) 2019-2021, Postgres.ai, Nikolay Samokhvalov nik@postgres.ai
+ * All Rights Reserved. Proprietary and confidential.
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ *--------------------------------------------------------------------------
+ */
+import { useState } from 'react';
+import { makeStyles, IconButton } from '@material-ui/core';
+import { ArrowLeft, ArrowRight } from '@material-ui/icons';
+import { colors } from '@postgres.ai/shared/styles/colors';
+import { formatUTC } from '@postgres.ai/shared/utils/date';
+import { Day } from './Day';
+import { getPrevMonthStartDate, getNextMonthStartDate, canGetNextMonthStartDate, getMonthStartDate, getCalendar, } from './utils';
+const useStyles = makeStyles({
+    root: {
+        marginTop: '8px',
+    },
+    header: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+    },
+    title: {
+        fontWeight: 700,
+        fontSize: '12px',
+    },
+    button: {
+        padding: '8px',
+        '&:disabled': {
+            pointerEvents: 'auto',
+            cursor: 'not-allowed',
+        },
+    },
+    buttonIcon: {
+        fontSize: '20px',
+    },
+    days: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        justifyContent: 'space-between',
+    },
+    weekDay: {
+        fontSize: '12px',
+        flex: '0 0 24px',
+        textAlign: 'center',
+        color: colors.pgaiDarkGray,
+        marginTop: '12px',
+    },
+}, { index: 1 });
+export const Calendar = (props) => {
+    const { snapshots, onSelectDate } = props;
+    const [monthStartDate, setMonthStartDate] = useState(getMonthStartDate);
+    const classes = useStyles();
+    const nextMonth = () => {
+        const nextMonthStartDate = getNextMonthStartDate(monthStartDate);
+        setMonthStartDate(nextMonthStartDate);
+    };
+    const prevMonth = () => {
+        const prevMonthStartDate = getPrevMonthStartDate(monthStartDate);
+        setMonthStartDate(prevMonthStartDate);
+    };
+    const calendar = getCalendar(monthStartDate, snapshots);
+    return (_jsxs("div", { className: classes.root, children: [_jsxs("div", { className: classes.header, children: [_jsxs("span", { className: classes.title, children: [formatUTC(monthStartDate, 'MMMM y'), " UTC"] }), _jsxs("div", { children: [_jsx(IconButton, { onClick: prevMonth, className: classes.button, children: _jsx(ArrowLeft, { className: classes.buttonIcon }) }), _jsx(IconButton, { onClick: nextMonth, disabled: !canGetNextMonthStartDate(monthStartDate), className: classes.button, children: _jsx(ArrowRight, { className: classes.buttonIcon }) })] })] }), _jsx("div", { className: classes.days, children: calendar.weekDays.map((weekDay) => {
+                    return (_jsx("div", { className: classes.weekDay, children: weekDay }, weekDay));
+                }) }), _jsx("div", { className: classes.days, children: calendar.days.map((day) => (_jsx(Day, { onClick: () => onSelectDate(day.date), isBreak: day.isBreak, isDisabled: day.isDisabled, date: day.date, snapshots: day.snapshots }, day.date.getTime()))) })] }));
+};

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

@@ -0,0 +1,27 @@
+import { Snapshot } from '@postgres.ai/shared/types/api/entities/snapshot';
+export declare const getMonthStartDate: () => Date;
+export declare const getCalendar: (monthStartDate: Date, snapshots: Snapshot[]) => {
+    weekDays: string[];
+    days: {
+        date: Date;
+        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;
+    }[];
+};
+export declare const getPrevMonthStartDate: (monthStartDate: Date) => Date;
+export declare const getNextMonthStartDate: (monthStartDate: Date) => Date;
+export declare const canGetNextMonthStartDate: (monthStartDate: Date) => boolean;