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

package/pages/Instance/Clones/Header/index.js

@@ -0,0 +1,16 @@
+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 { formatBytesIEC } from '@postgres.ai/shared/utils/units';
+import { Item } from './Item';
+import styles from './styles.module.scss';
+export const Header = (props) => {
+    const { expectedCloningTimeS, logicalSize, clonesCount, clonesCountLastMonth, } = props;
+    return (_jsxs("div", { className: styles.root, children: [_jsxs(Item, { value: expectedCloningTimeS ? `${expectedCloningTimeS} s` : '-', children: ["average", _jsx("br", {}), "cloning time"] }), _jsxs(Item, { value: logicalSize ? formatBytesIEC(logicalSize, { precision: 2 }) : '-', children: ["logical", _jsx("br", {}), "data size"] }), _jsxs(Item, { value: clonesCount, children: ["clones", _jsx("br", {}), "now"] }), _jsxs(Item, { value: logicalSize
+                    ? formatBytesIEC(logicalSize * clonesCount, { precision: 2 })
+                    : '-', children: ["total", _jsx("br", {}), "size of clones"] }), clonesCountLastMonth && (_jsxs(Item, { value: clonesCountLastMonth, children: ["clones", _jsx("br", {}), "in last month"] }))] }));
+};

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

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

package/pages/Instance/Clones/index.js

@@ -0,0 +1,66 @@
+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 { makeStyles, useMediaQuery } from '@material-ui/core';
+import { useHistory } from 'react-router-dom';
+import { observer } from 'mobx-react-lite';
+import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle';
+import { Button } from '@postgres.ai/shared/components/Button2';
+import { round } from '@postgres.ai/shared/utils/numbers';
+import { Tooltip } from '@postgres.ai/shared/components/Tooltip';
+import { InfoIcon } from '@postgres.ai/shared/icons/Info';
+import { useStores, useHost } from '@postgres.ai/shared/pages/Instance/context';
+import { ClonesList } from '../components/ClonesList';
+import { Header } from './Header';
+const SHORT_LIST_SIZE = 3;
+const useStyles = makeStyles((theme) => ({
+    root: {
+        width: 0,
+        flex: '1 1 100%',
+        marginRight: '40px',
+        height: '100%',
+        [theme.breakpoints.down('sm')]: {
+            width: '100%',
+            marginRight: 0,
+        },
+    },
+    tableTitle: {
+        marginTop: '5px',
+    },
+    listSizeButton: {
+        marginTop: '12px',
+    },
+    infoIcon: {
+        height: '12px',
+        width: '12px',
+        marginLeft: '8px',
+        color: '#808080',
+    },
+}), { index: 1 });
+export const Clones = observer(() => {
+    var _a, _b, _c;
+    const classes = useStyles();
+    const history = useHistory();
+    const isMobile = useMediaQuery((theme) => theme.breakpoints.down('sm'));
+    const [isShortListForMobile, setIsShortListForMobile] = useState(true);
+    const stores = useStores();
+    const host = useHost();
+    const { instance } = stores.main;
+    if (!instance || !instance.state)
+        return null;
+    const isShortList = isMobile && isShortListForMobile;
+    const toggleListSize = () => setIsShortListForMobile(!isShortListForMobile);
+    const goToCloneAddPage = () => history.push(host.routes.createClone());
+    const showListSizeButton = ((_b = (_a = instance.state) === null || _a === void 0 ? void 0 : _a.cloning.clones) === null || _b === void 0 ? void 0 : _b.length) > SHORT_LIST_SIZE && isMobile;
+    const isLoadingSnapshots = stores.main.snapshots.isLoading;
+    const hasSnapshots = Boolean((_c = stores.main.snapshots.data) === null || _c === void 0 ? void 0 : _c.length);
+    const canCreateClone = hasSnapshots && !stores.main.isDisabledInstance;
+    return (_jsxs("div", { className: classes.root, children: [_jsx(SectionTitle, { level: 2, tag: "h2", text: "Cloning summary" }), _jsx(Header, { expectedCloningTimeS: round(instance.state.cloning.expectedCloningTime, 2), logicalSize: instance.state.dataSize, clonesCount: instance.state.cloning.clones.length }), _jsx(SectionTitle, { className: classes.tableTitle, level: 2, tag: "h3", text: `Clones (${instance.state.cloning.clones.length})`, rightContent: _jsxs(_Fragment, { children: [_jsx(Button, { theme: "primary", onClick: goToCloneAddPage, isDisabled: !canCreateClone, isLoading: isLoadingSnapshots, children: "Create clone" }), !hasSnapshots && (_jsx(Tooltip, { content: "No snapshots", children: _jsx(InfoIcon, { className: classes.infoIcon }) }))] }) }), _jsx(ClonesList, { clones: isShortList
+                    ? instance.state.cloning.clones.slice(0, SHORT_LIST_SIZE)
+                    : instance.state.cloning.clones, isDisabled: stores.main.isDisabledInstance, emptyStubText: "This instance has no active clones" }), showListSizeButton && (_jsx(Button, { className: classes.listSizeButton, onClick: toggleListSize, children: isShortList ? 'Show more' : 'Show less' }))] }));
+});

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

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

package/pages/Instance/ClonesModal/index.js

@@ -0,0 +1,38 @@
+import { 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 { makeStyles } from '@material-ui/core';
+import { observer } from 'mobx-react-lite';
+import { useStores } from '@postgres.ai/shared/pages/Instance/context';
+import { Modal } from '@postgres.ai/shared/components/Modal';
+import { ClonesList } from '@postgres.ai/shared/pages/Instance/components/ClonesList';
+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: {
+        marginTop: 0,
+    },
+}, { index: 1 });
+export const ClonesModal = observer(() => {
+    var _a, _b;
+    const classes = useStyles();
+    const stores = useStores();
+    const { instance } = stores.main;
+    if (!instance)
+        return null;
+    const { pool, snapshotId, isOpenModal, closeModal } = stores.clonesModal;
+    return (_jsx(Modal, { title: `Clones (${(_a = instance.state) === null || _a === void 0 ? void 0 : _a.cloning.clones.length})`, isOpen: isOpenModal, onClose: closeModal, size: "md", titleRightContent: _jsx(ModalReloadButton, { isReloading: stores.main.isReloadingClones, onReload: stores.main.reloadClones }), headerContent: _jsx(Tags, { data: getTags({
+                pool,
+                snapshotId,
+            }) }), classes: { content: classes.root }, children: _jsx(ClonesList, { isDisabled: false, clones: (_b = instance.state) === null || _b === void 0 ? void 0 : _b.cloning.clones.filter((clone) => {
+                var _a, _b;
+                const isMatchedByPool = !pool || pool === ((_a = clone.snapshot) === null || _a === void 0 ? void 0 : _a.pool);
+                const isMatchedBySnapshot = !snapshotId || snapshotId === ((_b = clone.snapshot) === null || _b === void 0 ? void 0 : _b.id);
+                return isMatchedByPool && isMatchedBySnapshot;
+            }), emptyStubText: "No clones found" }) }));
+});

package/pages/Instance/ClonesModal/utils.d.ts

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

package/pages/Instance/ClonesModal/utils.js

@@ -0,0 +1,14 @@
+/*--------------------------------------------------------------------------
+ * 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 getTags = ({ pool, snapshotId, }) => {
+    const tags = [];
+    if (pool)
+        tags.push({ name: 'Disk', value: pool });
+    if (snapshotId)
+        tags.push({ name: 'Snapshot', value: snapshotId });
+    return tags;
+};

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { Instance } from '@postgres.ai/shared/types/api/entities/instance';
+export declare const InactiveInstance: ({ org, instance, }: {
+    org: string;
+    instance: Instance | null;
+}) => JSX.Element;

package/pages/Instance/InactiveInstance/index.js

@@ -0,0 +1,65 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Tooltip } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core';
+import { formatDistanceToNowStrict } from 'date-fns';
+import { Link } from '@postgres.ai/shared/components/Link2';
+import { formatTimestampUtc } from './utils';
+const useStyles = makeStyles({
+    container: {
+        maxWidth: '650px',
+        width: '100%',
+    },
+    timeLabel: {
+        lineHeight: '16px',
+        fontSize: 14,
+        cursor: 'pointer',
+        flex: '2 1 0',
+        '& span': {
+            fontWeight: 'normal !important',
+        },
+    },
+    toolTip: {
+        fontSize: '10px !important',
+        maxWidth: '100%',
+    },
+    content: {
+        margin: '25px 0',
+    },
+    flexContainer: {
+        display: 'flex',
+        alignItems: 'center',
+        flexDirection: 'row',
+        padding: '10px 0',
+        borderBottom: '1px solid rgba(224, 224, 224, 1)',
+        '& span:first-child': {
+            flex: '1 1 0',
+            fontWeight: '500',
+        },
+        '& span': {
+            flex: '2 1 0',
+            margin: '0',
+        },
+    },
+}, { index: 1 });
+export const InactiveInstance = ({ org, instance, }) => {
+    var _a, _b, _c, _d, _e;
+    const classes = useStyles();
+    const getVersionDigits = (str) => {
+        if (!str) {
+            return 'N/A';
+        }
+        const digits = str.match(/\d+/g);
+        if (digits && digits.length > 0) {
+            return `${digits[0]}.${digits[1]}.${digits[2]}`;
+        }
+        return '';
+    };
+    return (_jsxs("div", { className: classes.container, children: [_jsxs("div", { className: classes.flexContainer, children: [_jsx("span", { children: "Plan" }), _jsx("span", { children: (instance === null || instance === void 0 ? void 0 : instance.dto.plan) || '---' })] }), _jsxs("div", { className: classes.flexContainer, children: [_jsx("span", { children: "Version" }), _jsx("span", { children: getVersionDigits((instance === null || instance === void 0 ? void 0 : instance.state) && ((_b = (_a = instance === null || instance === void 0 ? void 0 : instance.state) === null || _a === void 0 ? void 0 : _a.engine) === null || _b === void 0 ? void 0 : _b.version)) })] }), _jsxs("div", { className: classes.flexContainer, children: [_jsx("span", { children: "Registered" }), _jsx("span", { className: classes.timeLabel, children: _jsx(Tooltip, { title: (_c = formatTimestampUtc(instance === null || instance === void 0 ? void 0 : instance.createdAt)) !== null && _c !== void 0 ? _c : '', classes: { tooltip: classes.toolTip }, children: _jsx("span", { children: (instance === null || instance === void 0 ? void 0 : instance.createdAt) &&
+                                    formatDistanceToNowStrict(new Date(instance === null || instance === void 0 ? void 0 : instance.createdAt), {
+                                        addSuffix: true,
+                                    }) }) }) })] }), (instance === null || instance === void 0 ? void 0 : instance.telemetryLastReportedAt) && (_jsxs("div", { className: classes.flexContainer, children: [_jsx("span", { children: "Telemetry last reported" }), _jsx("span", { className: classes.timeLabel, children: _jsx(Tooltip, { title: (_d = formatTimestampUtc(instance === null || instance === void 0 ? void 0 : instance.telemetryLastReportedAt)) !== null && _d !== void 0 ? _d : '', classes: { tooltip: classes.toolTip }, children: _jsx("span", { children: formatDistanceToNowStrict(new Date(instance === null || instance === void 0 ? void 0 : instance.telemetryLastReportedAt), {
+                                    addSuffix: true,
+                                }) }) }) })] })), _jsxs("div", { className: classes.flexContainer, children: [_jsx("span", { children: "Instance ID" }), _jsx("span", { children: _jsxs("span", { style: {
+                                fontWeight: 'normal',
+                            }, children: [_jsx(Link, { to: `/${org}/instances/${instance === null || instance === void 0 ? void 0 : instance.id}`, children: instance === null || instance === void 0 ? void 0 : instance.id }), "\u00A0 (self-assigned:", ' ', ((_e = instance === null || instance === void 0 ? void 0 : instance.dto) === null || _e === void 0 ? void 0 : _e.selfassigned_instance_id) || 'N/A', ")"] }) })] }), (instance === null || instance === void 0 ? void 0 : instance.dto.plan) !== 'CE' && (_jsxs("div", { className: classes.flexContainer, children: [_jsx("span", { children: "Billing data" }), _jsx("span", { children: _jsx(Link, { to: `/${org}/billing`, children: "Billing data" }) })] })), _jsxs("p", { className: classes.content, children: ["To work with this instance, access its UI or API directly. Full integration of UI to the Platform is currently available only to the EE users. If you have any questions, reach out to", ' ', _jsx("a", { href: "https://postgres.ai/contact", target: "_blank", rel: "noopener noreferrer", children: "the Postgres.ai team" }), "."] })] }));
+};

package/pages/Instance/InactiveInstance/utils.d.ts

@@ -0,0 +1,2 @@
+import moment from 'moment';
+export declare const formatTimestampUtc: (timestamp: moment.MomentInput) => string | null;

package/pages/Instance/InactiveInstance/utils.js

@@ -0,0 +1,7 @@
+import moment from 'moment';
+export const formatTimestampUtc = (timestamp) => {
+    if (!timestamp) {
+        return null;
+    }
+    return moment(timestamp).utc().format('YYYY-MM-DD HH:mm:ss UTC');
+};

package/pages/Instance/Info/Connection/ConnectModal/Content/index.d.ts

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

package/pages/Instance/Info/Connection/ConnectModal/Content/index.js

@@ -0,0 +1,73 @@
+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, IconButton } from '@material-ui/core';
+import { observer } from 'mobx-react-lite';
+import copy from 'copy-to-clipboard';
+import { GatewayLink } from '@postgres.ai/shared/components/GatewayLink';
+import { icons } from '@postgres.ai/shared/styles/icons';
+import { Link } from '@postgres.ai/shared/components/Link2';
+import { TextField } from '@postgres.ai/shared/components/TextField';
+import { Tooltip } from '@postgres.ai/shared/components/Tooltip';
+import { useStores } from '@postgres.ai/shared/pages/Instance/context';
+import { getCliInitCommand, getSshPortForwardingCommand } from './utils';
+const useStyles = makeStyles({
+    root: {
+        fontSize: '14px',
+    },
+    list: {
+        listStyle: 'decimal inside none',
+        margin: 0,
+        padding: 0,
+    },
+    item: {
+        '& + $item': {
+            marginTop: '16px',
+        },
+    },
+    textField: {
+        width: 'calc(100% - 24px)',
+        margin: '16px 0 0 0',
+    },
+    textFieldWrapper: {
+        display: 'flex',
+        alignItems: 'flex-end',
+    },
+    textFieldInfo: {
+        display: 'flex',
+        alignItems: 'center',
+        height: '32px',
+        marginLeft: '12px',
+    },
+    copyButton: {
+        width: '32px',
+        height: '32px',
+        padding: '8px',
+    },
+    note: {
+        margin: '24px 0 0 0',
+    },
+}, { index: 1 });
+export const Content = observer(() => {
+    const classes = useStyles();
+    const stores = useStores();
+    const { instance } = stores.main;
+    if (!instance)
+        return null;
+    const cliInitCommand = getCliInitCommand(instance);
+    const sshPortForwardingCommand = getSshPortForwardingCommand(instance);
+    const dblabStatusCommand = 'dblab instance status';
+    return (_jsxs("div", { className: classes.root, children: [_jsxs("ol", { className: classes.list, children: [_jsxs("li", { className: classes.item, children: ["Generate a personal token on\u00A0", _jsx(Link, { to: 
+                                // ROUTES.ORG.TOKENS.createPath({ org: context.org })
+                                '/', children: "Access token page" }), "."] }), _jsxs("li", { className: classes.item, children: ["Use personal token to initialize a connection to the Database Lab instance:", _jsxs("div", { className: classes.textFieldWrapper, children: [_jsx(TextField, { label: "CLI init command", value: cliInitCommand, className: classes.textField, InputProps: {
+                                            endAdornment: (_jsx(IconButton, { className: classes.copyButton, onClick: () => copy(cliInitCommand), children: icons.copyIcon })),
+                                        } }), _jsx(Tooltip, { content: _jsxs(_Fragment, { children: ["Use this oneliner to initialize Database Lab CLI on your machine.", _jsx("br", {}), "All UPPERCASED variables (if any) are to be substituted", _jsx("br", {}), "by real values."] }), children: _jsx("span", { className: classes.textFieldInfo, children: icons.infoIcon }) })] })] }), sshPortForwardingCommand && (_jsxs("li", { className: classes.item, children: ["In a separate console, set up SSH port forwarding (and keep it running):", _jsx(TextField, { label: "SSH port forwarding", value: sshPortForwardingCommand, className: classes.textField, InputProps: {
+                                    endAdornment: (_jsx(IconButton, { className: classes.copyButton, onClick: () => copy(sshPortForwardingCommand), children: icons.copyIcon })),
+                                } })] })), _jsxs("li", { className: classes.item, children: ["Test it:", _jsx(TextField, { label: "CLI status command", value: dblabStatusCommand, className: classes.textField, InputProps: {
+                                    endAdornment: (_jsx(IconButton, { className: classes.copyButton, onClick: () => copy(dblabStatusCommand), children: icons.copyIcon })),
+                                } })] })] }), _jsxs("p", { className: classes.note, children: ["Read\u00A0", _jsx(GatewayLink, { href: "https://postgres.ai/docs/database-lab/cli-reference#getting-started", children: "the docs" }), "\u00A0to get started with CLI."] })] }));
+});

package/pages/Instance/Info/Connection/ConnectModal/Content/utils.d.ts

@@ -0,0 +1,3 @@
+import { Instance } from '@postgres.ai/shared/types/api/entities/instance';
+export declare const getCliInitCommand: (instance: Instance) => string;
+export declare const getSshPortForwardingCommand: (instance: Instance) => string | null;

package/pages/Instance/Info/Connection/ConnectModal/Content/utils.js

@@ -0,0 +1,20 @@
+/*--------------------------------------------------------------------------
+ * 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 getCliInitCommand = (instance) => `dblab init --url ${instance.url} --token TOKEN  --environment-id ${instance.projectName}`;
+export const getSshPortForwardingCommand = (instance) => {
+    if (instance.sshServerUrl) {
+        // Parse the URL to get the port
+        const url = new URL(instance.url);
+        const port = url.port || '2345';
+        // Here we hard-code the API port on the server (2345)- this is a requirement now
+        // for all DBLab instances working via tunnel, per decision made (NIkolayS 2024-05-22)
+        return `ssh -NTML ${port}:localhost:2345 ${instance.sshServerUrl} -i ~/.ssh/id_rsa`;
+    }
+    else {
+        return null;
+    }
+};

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

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

package/pages/Instance/Info/Connection/ConnectModal/index.js

@@ -0,0 +1,17 @@
+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 { Button } from '@postgres.ai/shared/components/Button2';
+import { Modal } from '@postgres.ai/shared/components/Modal';
+import { Content } from './Content';
+export const ConnectModal = (props) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const handleClickOpen = () => setIsOpen(true);
+    const handleClose = () => setIsOpen(false);
+    return (_jsxs(_Fragment, { children: [_jsx(Button, { onClick: handleClickOpen, className: props.className, children: "Connect" }), _jsx(Modal, { isOpen: isOpen, onClose: handleClose, title: "Connection info", children: _jsx(Content, {}) })] }));
+};

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

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

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

@@ -0,0 +1,44 @@
+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 { observer } from 'mobx-react-lite';
+import { useStores } from '@postgres.ai/shared/pages/Instance/context';
+import { ShieldIcon } from '@postgres.ai/shared/icons/Shield';
+import { WarningIcon } from '@postgres.ai/shared/icons/Warning';
+import { Section } from '../components/Section';
+import { Property } from '../components/Property';
+import { ValueStatus } from '../components/ValueStatus';
+import { ConnectModal } from './ConnectModal';
+const useStyles = makeStyles({
+    connectButton: {
+        marginTop: '10px',
+    },
+    url: {
+        overflowWrap: 'break-word',
+    },
+    icon: {
+        top: 0,
+        left: 0,
+        position: 'absolute',
+        height: '100%',
+        width: '100%',
+    },
+}, { index: 1 });
+const checkIsSecureUrl = (urlStr) => {
+    const url = new URL(urlStr);
+    return url.protocol === 'https:';
+};
+export const Connection = observer(() => {
+    const stores = useStores();
+    const classes = useStyles();
+    const { instance } = stores.main;
+    if (!(instance === null || instance === void 0 ? void 0 : instance.url))
+        return null;
+    const isSecureUrl = checkIsSecureUrl(instance.url) || instance.useTunnel;
+    return (_jsxs(Section, { title: "Connection", children: [_jsxs(Property, { name: "URL", children: [_jsx("span", { className: classes.url, children: instance.url }), _jsx("br", {}), _jsxs(ValueStatus, { type: isSecureUrl ? 'ok' : 'warning', icon: isSecureUrl ? (_jsx(ShieldIcon, { className: classes.icon })) : (_jsx(WarningIcon, { className: classes.icon })), children: ["The connection to Database Lab API is", ' ', isSecureUrl ? 'secure' : 'not secure'] })] }), _jsx(Property, { name: "WS tunnels", children: instance.useTunnel ? 'used' : 'not used' }), _jsx(ConnectModal, { className: classes.connectButton })] }));
+});

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

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

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

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Section } from '../components/Section';
+import { Property } from '../components/Property';
+export const Details = () => {
+    return (_jsxs(Section, { title: 'Details', children: [_jsx(Property, { name: 'Database docker image', children: "postgres:12" }), _jsx(Property, { name: 'Version', children: "0.4.4" })] }));
+};

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

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+declare type Props = {
+    poolId: string | null;
+    poolName: string;
+    isActive: boolean;
+};
+export declare const ActionsMenu: (props: Props) => JSX.Element;
+export {};

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

@@ -0,0 +1,47 @@
+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 { useState } from 'react';
+import { IconButton, makeStyles, Menu, MenuItem } from '@material-ui/core';
+import { MoreVert } from '@material-ui/icons';
+import copy from 'copy-to-clipboard';
+import { colors } from '@postgres.ai/shared/styles/colors';
+import { useStores } from '@postgres.ai/shared/pages/Instance/context';
+const useStyles = makeStyles({
+    root: {
+        padding: '3px 1px',
+        border: `1px solid ${colors.consoleStroke}`,
+        borderRadius: '4px',
+    },
+}, { index: 1 });
+export const ActionsMenu = (props) => {
+    const classes = useStyles();
+    const stores = useStores();
+    const [anchorEl, setAnchorEl] = useState(null);
+    const isOpen = Boolean(anchorEl);
+    const openMenu = (e) => {
+        e.stopPropagation();
+        setAnchorEl(e.currentTarget);
+    };
+    const closeMenu = () => setAnchorEl(null);
+    return (_jsxs(_Fragment, { children: [_jsx(IconButton, { className: classes.root, onClick: openMenu, children: _jsx(MoreVert, {}) }), _jsxs(Menu, { anchorOrigin: {
+                    vertical: 'top',
+                    horizontal: 'left',
+                }, transformOrigin: {
+                    vertical: 'top',
+                    horizontal: 'left',
+                }, anchorEl: anchorEl, keepMounted: true, open: isOpen, onClose: closeMenu, onClick: (e) => e.stopPropagation(), children: [_jsx(MenuItem, { onClick: () => {
+                            closeMenu();
+                            copy(props.poolName);
+                        }, children: "Copy name" }), props.isActive && (_jsxs("div", { children: [_jsx(MenuItem, { onClick: () => {
+                                    closeMenu();
+                                    stores.clonesModal.openModal({ pool: props.poolId });
+                                }, children: "List clones" }), _jsx(MenuItem, { onClick: () => {
+                                    closeMenu();
+                                    stores.snapshotsModal.openModal({ pool: props.poolId });
+                                }, children: "List snapshots" })] }))] })] }));
+};

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

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

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;