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

package/pages/Instance/Configuration/useForm.d.ts

@@ -0,0 +1,82 @@
+/// <reference types="react" />
+export declare type FormValues = {
+    debug: boolean;
+    dockerImage: string;
+    dockerTag: string;
+    dockerPath: string;
+    dockerImageType: string;
+    sharedBuffers: string;
+    sharedPreloadLibraries: string;
+    tuningParams: string;
+    timetable: string;
+    dbname: string;
+    host: string;
+    port: string;
+    username: string;
+    password: string;
+    databases: string;
+    dumpParallelJobs: string;
+    dumpIgnoreErrors: boolean;
+    restoreParallelJobs: string;
+    restoreIgnoreErrors: boolean;
+    pgDumpCustomOptions: string;
+    pgRestoreCustomOptions: string;
+};
+export declare const useForm: (onSubmit: (values: FormValues) => void) => {
+    formik: {
+        initialValues: FormValues;
+        initialErrors: import("formik").FormikErrors<unknown>;
+        initialTouched: import("formik").FormikTouched<unknown>;
+        initialStatus: any;
+        handleBlur: {
+            (e: import("react").FocusEvent<any, Element>): void;
+            <T = any>(fieldOrEvent: T): T extends string ? (e: any) => void : void;
+        };
+        handleChange: {
+            (e: import("react").ChangeEvent<any>): void;
+            <T_1 = string | import("react").ChangeEvent<any>>(field: T_1): T_1 extends import("react").ChangeEvent<any> ? void : (e: string | import("react").ChangeEvent<any>) => void;
+        };
+        handleReset: (e: any) => void;
+        handleSubmit: (e?: import("react").FormEvent<HTMLFormElement> | undefined) => void;
+        resetForm: (nextState?: Partial<import("formik").FormikState<FormValues>> | undefined) => void;
+        setErrors: (errors: import("formik").FormikErrors<FormValues>) => void;
+        setFormikState: (stateOrCb: import("formik").FormikState<FormValues> | ((state: import("formik").FormikState<FormValues>) => import("formik").FormikState<FormValues>)) => void;
+        setFieldTouched: (field: string, touched?: boolean | undefined, shouldValidate?: boolean | undefined) => Promise<void> | Promise<import("formik").FormikErrors<FormValues>>;
+        setFieldValue: (field: string, value: any, shouldValidate?: boolean | undefined) => Promise<void> | Promise<import("formik").FormikErrors<FormValues>>;
+        setFieldError: (field: string, value: string | undefined) => void;
+        setStatus: (status: any) => void;
+        setSubmitting: (isSubmitting: boolean) => void;
+        setTouched: (touched: import("formik").FormikTouched<FormValues>, shouldValidate?: boolean | undefined) => Promise<void> | Promise<import("formik").FormikErrors<FormValues>>;
+        setValues: (values: import("react").SetStateAction<FormValues>, shouldValidate?: boolean | undefined) => Promise<void> | Promise<import("formik").FormikErrors<FormValues>>;
+        submitForm: () => Promise<any>;
+        validateForm: (values?: FormValues | undefined) => Promise<import("formik").FormikErrors<FormValues>>;
+        validateField: (name: string) => Promise<void> | Promise<string | undefined>;
+        isValid: boolean;
+        dirty: boolean;
+        unregisterField: (name: string) => void;
+        registerField: (name: string, { validate }: any) => void;
+        getFieldProps: (nameOrOptions: any) => import("formik").FieldInputProps<any>;
+        getFieldMeta: (name: string) => import("formik").FieldMetaProps<any>;
+        getFieldHelpers: (name: string) => import("formik").FieldHelperProps<any>;
+        validateOnBlur: boolean;
+        validateOnChange: boolean;
+        validateOnMount: boolean;
+        values: FormValues;
+        errors: import("formik").FormikErrors<FormValues>;
+        touched: import("formik").FormikTouched<FormValues>;
+        isSubmitting: boolean;
+        isValidating: boolean;
+        status?: any;
+        submitCount: number;
+    };
+    connectionData: {
+        dockerImage?: string | undefined;
+        db_list?: string[] | undefined;
+        host: string;
+        port: string;
+        username: string;
+        password: string;
+        dbname: string;
+    };
+    isConnectionDataValid: string;
+}[];

package/pages/Instance/Configuration/useForm.js

@@ -0,0 +1,74 @@
+/*--------------------------------------------------------------------------
+ * 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 { useFormik } from 'formik';
+import * as Yup from 'yup';
+const Schema = Yup.object().shape({
+    dockerImage: Yup.string().required('Docker image is required'),
+    dbname: Yup.string().required('Dbname is required'),
+    host: Yup.string().required('Host is required'),
+    port: Yup.string().required('Port is required'),
+    username: Yup.string().required('Username is required'),
+});
+export const useForm = (onSubmit) => {
+    const formik = useFormik({
+        initialValues: {
+            debug: false,
+            dockerImage: '',
+            dockerTag: '',
+            dockerPath: '',
+            dockerImageType: '',
+            sharedBuffers: '',
+            sharedPreloadLibraries: '',
+            tuningParams: '',
+            timetable: '',
+            dbname: '',
+            host: '',
+            port: '',
+            username: '',
+            password: '',
+            databases: '',
+            dumpParallelJobs: '',
+            restoreParallelJobs: '',
+            pgDumpCustomOptions: '',
+            pgRestoreCustomOptions: '',
+            dumpIgnoreErrors: false,
+            restoreIgnoreErrors: false,
+        },
+        validationSchema: Schema,
+        onSubmit,
+        validateOnBlur: false,
+        validateOnChange: false,
+    });
+    const formatDatabaseArray = (database) => {
+        let databases = [];
+        const splitDatabaseArray = database.split(/[,(\s)(\n)(\r)(\t)(\r\n)]/);
+        for (let i = 0; i < splitDatabaseArray.length; i++) {
+            if (splitDatabaseArray[i] !== '') {
+                databases.push(splitDatabaseArray[i]);
+            }
+        }
+        return databases;
+    };
+    const connectionData = {
+        host: formik.values.host,
+        port: formik.values.port,
+        username: formik.values.username,
+        password: formik.values.password,
+        dbname: formik.values.dbname,
+        ...(formik.values.databases && {
+            db_list: formatDatabaseArray(formik.values.databases),
+        }),
+        ...(formik.values.dockerImageType === 'custom' && {
+            dockerImage: formik.values.dockerImage,
+        }),
+    };
+    const isConnectionDataValid = formik.values.host &&
+        formik.values.port &&
+        formik.values.username &&
+        formik.values.dbname;
+    return [{ formik, connectionData, isConnectionDataValid }];
+};

package/pages/Instance/Configuration/utils/index.d.ts

@@ -0,0 +1,22 @@
+import { DatabaseType } from '@postgres.ai/shared/types/api/entities/config';
+import { FormValues } from '../useForm';
+export declare type FormValuesKey = keyof FormValues;
+interface DockerImage {
+    package_group: string;
+    pg_major_version: string;
+    tag: string;
+    location: string;
+}
+export declare const uniqueChipValue: (values: string) => string;
+export declare const postUniqueDatabases: (values: string) => {
+    [k: string]: string | Object;
+} | null;
+export declare const genericDockerImages: DockerImage[];
+export declare const isSeDockerImage: (dockerImage: string | undefined) => boolean;
+export declare const getImageType: (imageUrl: string) => string;
+export declare const getImageMajorVersion: (pgImage: string | undefined) => string | undefined;
+export declare const formatDatabases: (databases: DatabaseType | null) => string;
+export declare const formatDumpCustomOptions: (options: string[] | null) => string;
+export declare const postUniqueCustomOptions: (options: string) => string[];
+export declare const customOrGenericImage: (dockerImage: string | undefined) => boolean;
+export {};

package/pages/Instance/Configuration/utils/index.js

@@ -0,0 +1,105 @@
+import { dockerImageOptions } from '../configOptions';
+const seContainerRegistry = 'se-images';
+const genericImagePrefix = 'postgresai/extended-postgres';
+// since some tags are rc, we need to specify the exact tags to use
+const dockerImagesConfig = {
+    '9.6': ['0.5.2', '0.5.1', '0.4.6'],
+    '10': ['0.5.2', '0.5.1', '0.4.6'],
+    '11': ['0.5.2', '0.5.1', '0.4.6'],
+    '12': ['0.5.2', '0.5.1', '0.4.6'],
+    '13': ['0.5.2', '0.5.1', '0.4.6'],
+    '14': ['0.5.2', '0.5.1', '0.4.6'],
+    '15': ['0.5.2', '0.5.1', '0.4.6'],
+    '16': ['0.5.2', '0.5.1', '0.4.6'],
+    '17': ['0.5.2', '0.5.1'],
+};
+export const uniqueChipValue = (values) => {
+    const splitChipArray = values.split(/[,(\s)(\n)(\r)(\t)(\r\n)]/);
+    let databaseArray = [];
+    for (let i in splitChipArray) {
+        if (splitChipArray[i] !== '' &&
+            databaseArray.indexOf(splitChipArray[i]) === -1) {
+            databaseArray.push(splitChipArray[i]);
+        }
+    }
+    return databaseArray.join(' ');
+};
+export const postUniqueDatabases = (values) => {
+    const splitDatabaseArray = values.split(/[,(\s)(\n)(\r)(\t)(\r\n)]/);
+    const databases = splitDatabaseArray.reduce((acc, curr) => {
+        acc[curr] = {};
+        return acc;
+    }, {});
+    const nonEmptyDatabase = Object.fromEntries(Object.entries(databases).filter(([name]) => name != ''));
+    return values.length !== 0 ? nonEmptyDatabase : null;
+};
+const createDockerImages = (dockerImagesConfig) => {
+    const dockerImages = [];
+    for (const pg_major_version in dockerImagesConfig) {
+        if (dockerImagesConfig.hasOwnProperty(pg_major_version)) {
+            const customTags = dockerImagesConfig[pg_major_version];
+            customTags.forEach((tag) => {
+                const image = {
+                    package_group: 'postgresai',
+                    pg_major_version,
+                    tag: `${pg_major_version}-${tag}`,
+                    location: `${genericImagePrefix}:${pg_major_version}-${tag}`,
+                };
+                dockerImages.push(image);
+            });
+        }
+    }
+    return dockerImages;
+};
+export const genericDockerImages = createDockerImages(dockerImagesConfig);
+export const isSeDockerImage = (dockerImage) => {
+    var _a;
+    const dockerImageType = (dockerImage === null || dockerImage === void 0 ? void 0 : dockerImage.includes(seContainerRegistry)) &&
+        ((_a = dockerImage.split(`${seContainerRegistry}/`)[1]) === null || _a === void 0 ? void 0 : _a.split(':')[0]);
+    return dockerImageOptions.some((element) => element.type === dockerImageType);
+};
+export const getImageType = (imageUrl) => {
+    var _a;
+    const postgresCustomImageType = imageUrl.includes(seContainerRegistry) &&
+        ((_a = imageUrl.split(`${seContainerRegistry}/`)[1]) === null || _a === void 0 ? void 0 : _a.split(':')[0]);
+    if (imageUrl.includes(genericImagePrefix)) {
+        return 'Generic Postgres';
+    }
+    else if (postgresCustomImageType && isSeDockerImage(imageUrl)) {
+        return postgresCustomImageType;
+    }
+    else {
+        return 'custom';
+    }
+};
+export const getImageMajorVersion = (pgImage) => {
+    const pgImageVersion = pgImage === null || pgImage === void 0 ? void 0 : pgImage.split(':')[1];
+    const pgServerVersion = pgImageVersion === null || pgImageVersion === void 0 ? void 0 : pgImageVersion.split('-')[0];
+    return (pgServerVersion === null || pgServerVersion === void 0 ? void 0 : pgServerVersion.includes('.'))
+        ? pgServerVersion === null || pgServerVersion === void 0 ? void 0 : pgServerVersion.split('.')[0]
+        : pgServerVersion;
+};
+export const formatDatabases = (databases) => {
+    let formattedDatabases = '';
+    if (databases !== null) {
+        Object.keys(databases).forEach(function (key) {
+            formattedDatabases += key + ' ';
+        });
+    }
+    return formattedDatabases;
+};
+export const formatDumpCustomOptions = (options) => {
+    let formattedOptions = '';
+    if (options !== null) {
+        options.forEach(function (key) {
+            formattedOptions += key + ' ';
+        });
+    }
+    return formattedOptions;
+};
+export const postUniqueCustomOptions = (options) => {
+    const splitOptionsArray = options.split(/[,(\s)(\n)(\r)(\t)(\r\n)]/);
+    const uniqueOptions = splitOptionsArray.filter((item, index) => splitOptionsArray.indexOf(item) === index && item !== '');
+    return uniqueOptions;
+};
+export const customOrGenericImage = (dockerImage) => dockerImage === 'Generic Postgres' || dockerImage === 'custom';

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 {};