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

package/pages/Instance/stores/Main.js

@@ -0,0 +1,243 @@
+/*--------------------------------------------------------------------------
+ * 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 { makeAutoObservable } from 'mobx';
+import { SnapshotsStore } from '@postgres.ai/shared/stores/Snapshots';
+import { getTextFromUnknownApiError } from '@postgres.ai/shared/utils/api';
+const UNSTABLE_CLONE_STATUS_CODES = ['CREATING', 'RESETTING', 'DELETING'];
+export class MainStore {
+    constructor(api) {
+        this.instance = null;
+        this.instanceRetrieval = null;
+        this.config = null;
+        this.instanceError = null;
+        this.configError = null;
+        this.getFullConfigError = null;
+        this.seImagesError = null;
+        this.unstableClones = new Set();
+        this.isReloadingClones = false;
+        this.isConfigurationLoading = false;
+        this.isReloadingInstance = false;
+        this.isReloadingInstanceRetrieval = false;
+        this.isLoadingInstance = false;
+        this.load = (instanceId) => {
+            this.instance = null;
+            this.isReloadingInstance = true;
+            this.loadInstance(instanceId, false).then(() => {
+                var _a, _b, _c;
+                if (((_a = this.instance) === null || _a === void 0 ? void 0 : _a.createdAt) && ((_b = this.instance) === null || _b === void 0 ? void 0 : _b.url) || !((_c = this.instance) === null || _c === void 0 ? void 0 : _c.createdAt)) {
+                    this.snapshots.load(instanceId);
+                }
+            });
+            this.loadInstanceRetrieval(instanceId).then(() => {
+                if (this.instanceRetrieval) {
+                    this.getConfig();
+                    this.getFullConfig();
+                }
+            });
+        };
+        this.reload = (instanceId) => {
+            this.instance = null;
+            this.isReloadingInstance = true;
+            this.loadInstance(instanceId, false).then(() => {
+                var _a, _b, _c;
+                if (this.api.refreshInstance)
+                    this.api.refreshInstance({ instanceId: instanceId });
+                if (((_a = this.instance) === null || _a === void 0 ? void 0 : _a.createdAt) && ((_b = this.instance) === null || _b === void 0 ? void 0 : _b.url) || !((_c = this.instance) === null || _c === void 0 ? void 0 : _c.createdAt)) {
+                    this.snapshots.load(instanceId);
+                }
+            });
+            this.loadInstanceRetrieval(instanceId).then(() => {
+                if (this.instanceRetrieval) {
+                    this.getConfig();
+                    this.getFullConfig();
+                }
+            });
+        };
+        this.reloadSnapshots = async () => {
+            if (!this.instance)
+                return;
+            await this.snapshots.reload(this.instance.id);
+        };
+        this.reloadInstanceRetrieval = async () => {
+            if (!this.instance)
+                return;
+            this.isReloadingInstanceRetrieval = true;
+            this.loadInstanceRetrieval(this.instance.id);
+            this.isReloadingInstanceRetrieval = false;
+        };
+        this.loadInstanceRetrieval = async (instanceId) => {
+            if (!this.api.getInstanceRetrieval)
+                return;
+            const { response, error } = await this.api.getInstanceRetrieval({
+                instanceId: instanceId,
+            });
+            if (response)
+                this.instanceRetrieval = response;
+            if (error)
+                this.instanceError = { message: await getTextFromUnknownApiError(error) };
+            return !!response;
+        };
+        this.loadInstance = async (instanceId, refresh = true) => {
+            var _a, _b;
+            this.instanceError = null;
+            this.isLoadingInstance = true;
+            if (this.api.refreshInstance && refresh)
+                await this.api.refreshInstance({ instanceId: instanceId });
+            const { response, error } = await this.api.getInstance({
+                instanceId: instanceId,
+            });
+            this.isLoadingInstance = false;
+            if (response === null) {
+                this.instanceError = {
+                    title: 'Error 404',
+                    message: 'Specified instance not found or you have no access.',
+                };
+            }
+            if (response) {
+                this.instance = response;
+                const unstableClones = new Set();
+                (_b = (_a = this.instance.state) === null || _a === void 0 ? void 0 : _a.cloning.clones) === null || _b === void 0 ? void 0 : _b.forEach((clone) => {
+                    if (UNSTABLE_CLONE_STATUS_CODES.includes(clone.status.code)) {
+                        unstableClones.add(clone.id);
+                    }
+                });
+                this.unstableClones = unstableClones;
+            }
+            if (error)
+                this.instanceError = { message: await getTextFromUnknownApiError(error) };
+            return !!response;
+        };
+        this.getConfig = async () => {
+            if (!this.api.getConfig)
+                return;
+            this.isConfigurationLoading = true;
+            const { response, error } = await this.api.getConfig();
+            this.isConfigurationLoading = false;
+            if (response) {
+                this.config = response;
+                this.configError = null;
+            }
+            if (error) {
+                this.configError = await error.json().then((err) => err.message);
+            }
+            return response;
+        };
+        this.updateConfig = async (values) => {
+            if (!this.api.updateConfig)
+                return;
+            const { response, error } = await this.api.updateConfig({ ...values });
+            if (error)
+                this.configError = await error.json().then((err) => err.message);
+            return response;
+        };
+        this.getFullConfig = async () => {
+            var _a, _b;
+            if (!this.api.getFullConfig)
+                return;
+            const { response, error } = await this.api.getFullConfig();
+            if (response) {
+                this.fullConfig = response;
+                const splitYML = this.fullConfig.split('---');
+                this.platformUrl = (_b = (_a = splitYML[0]) === null || _a === void 0 ? void 0 : _a.split('url: ')[1]) === null || _b === void 0 ? void 0 : _b.split('\n')[0];
+            }
+            if (error)
+                this.getFullConfigError = await error
+                    .json()
+                    .then((err) => err.message);
+            return response;
+        };
+        this.getSeImages = async (values) => {
+            if (!this.api.getSeImages || !this.platformUrl)
+                return;
+            const { response, error } = await this.api.getSeImages({
+                packageGroup: values.packageGroup,
+                platformUrl: this.platformUrl,
+            });
+            if (response) {
+                this.seImagesError = null;
+            }
+            if (error) {
+                this.seImagesError = await error.json().then((err) => err.message);
+            }
+            return response;
+        };
+        this.getEngine = async () => {
+            if (!this.api.getEngine)
+                return;
+            this.configError = null;
+            const { response, error } = await this.api.getEngine();
+            if (error)
+                await getTextFromUnknownApiError(error);
+            return response;
+        };
+        this.testDbSource = async (values) => {
+            if (!this.api.testDbSource)
+                return;
+            const { response, error } = await this.api.testDbSource(values);
+            return {
+                response,
+                error,
+            };
+        };
+        this.resetClone = async (cloneId, snapshotId) => {
+            if (!this.instance)
+                return;
+            this.unstableClones.add(cloneId);
+            const { response, error } = await this.api.resetClone({
+                cloneId,
+                snapshotId,
+                instanceId: this.instance.id,
+            });
+            if (response)
+                this.liveUpdateInstance();
+            if (error)
+                await getTextFromUnknownApiError(error);
+            return !!response;
+        };
+        this.destroyClone = async (cloneId) => {
+            if (!this.instance)
+                return;
+            this.unstableClones.add(cloneId);
+            const { response, error } = await this.api.destroyClone({
+                cloneId,
+                instanceId: this.instance.id,
+            });
+            if (response)
+                this.liveUpdateInstance();
+            if (error)
+                await getTextFromUnknownApiError(error);
+            return !!response;
+        };
+        this.liveUpdateInstance = async () => {
+            if (!this.unstableClones.size)
+                return;
+            if (!this.instance)
+                return;
+            await this.loadInstance(this.instance.id);
+            await this.loadInstanceRetrieval(this.instance.id);
+            if (!this.unstableClones.size)
+                return;
+        };
+        this.reloadClones = async () => {
+            if (!this.instance)
+                return;
+            this.isReloadingClones = true;
+            await this.loadInstance(this.instance.id);
+            await this.loadInstanceRetrieval(this.instance.id);
+            this.isReloadingClones = false;
+        };
+        makeAutoObservable(this);
+        this.api = api;
+        this.snapshots = new SnapshotsStore(api);
+    }
+    get isDisabledInstance() {
+        var _a;
+        if (!this.instance)
+            return true;
+        return ((_a = this.instance.state) === null || _a === void 0 ? void 0 : _a.status.code) === 'NO_RESPONSE';
+    }
+}

package/pages/Instance/stores/SnapshotsModal.d.ts

@@ -0,0 +1,13 @@
+declare type FilterOptions = {
+    pool?: string | null;
+    date?: Date;
+};
+export declare class SnapshotsModalStore {
+    isOpenModal: boolean;
+    pool: string | null;
+    date: Date | null;
+    constructor();
+    openModal: (filterOptions?: FilterOptions | undefined) => void;
+    closeModal: () => void;
+}
+export {};

package/pages/Instance/stores/SnapshotsModal.js

@@ -0,0 +1,24 @@
+/*--------------------------------------------------------------------------
+ * 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 { makeAutoObservable } from 'mobx';
+export class SnapshotsModalStore {
+    constructor() {
+        this.isOpenModal = false;
+        this.pool = null;
+        this.date = null;
+        this.openModal = (filterOptions = {}) => {
+            const { pool = null, date = null } = filterOptions;
+            this.pool = pool;
+            this.date = date;
+            this.isOpenModal = true;
+        };
+        this.closeModal = () => {
+            this.isOpenModal = false;
+        };
+        makeAutoObservable(this);
+    }
+}

package/pages/Instance/useCreatedStores.d.ts

@@ -0,0 +1,10 @@
+import { MainStore } from './stores/Main';
+import { ClonesModalStore } from './stores/ClonesModal';
+import { SnapshotsModalStore } from './stores/SnapshotsModal';
+import { Host } from './context';
+export declare const useCreatedStores: (host: Host) => {
+    main: MainStore;
+    clonesModal: ClonesModalStore;
+    snapshotsModal: SnapshotsModalStore;
+};
+export declare type Stores = ReturnType<typeof useCreatedStores>;

package/pages/Instance/useCreatedStores.js

@@ -0,0 +1,9 @@
+import { useMemo } from 'react';
+import { MainStore } from './stores/Main';
+import { ClonesModalStore } from './stores/ClonesModal';
+import { SnapshotsModalStore } from './stores/SnapshotsModal';
+export const useCreatedStores = (host) => ({
+    main: useMemo(() => new MainStore(host.api), []),
+    clonesModal: useMemo(() => new ClonesModalStore(), []),
+    snapshotsModal: useMemo(() => new SnapshotsModalStore(), []),
+});

package/pages/Logs/Icons/PlusIcon.d.ts

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

package/pages/Logs/Icons/PlusIcon.js

@@ -0,0 +1,2 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export const PlusIcon = () => (_jsx("svg", { viewBox: "0 0 512 512", focusable: "false", children: _jsx("path", { fill: "currentColor", d: "M289.94 256l95-95A24 24 0 00351 127l-95 95-95-95a24 24 0 00-34 34l95 95-95 95a24 24 0 1034 34l95-95 95 95a24 24 0 0034-34z" }) }));

package/pages/Logs/constants/index.d.ts

@@ -0,0 +1,5 @@
+export declare const LOGS_NEW_DATA_MESSAGE = "New data arrived below - scroll down to see it \uD83D\uDC47\uD83C\uDFFB";
+export declare const LAPTOP_WIDTH_PX = 982;
+export declare const LOGS_TIME_LIMIT = 20;
+export declare const LOGS_LINE_LIMIT = 1000;
+export declare const LOGS_ENDPOINT = "/instance/logs";

package/pages/Logs/constants/index.js

@@ -0,0 +1,5 @@
+export const LOGS_NEW_DATA_MESSAGE = 'New data arrived below - scroll down to see it 👇🏻';
+export const LAPTOP_WIDTH_PX = 982;
+export const LOGS_TIME_LIMIT = 20;
+export const LOGS_LINE_LIMIT = 1000;
+export const LOGS_ENDPOINT = '/instance/logs';

package/pages/Logs/hooks/useWsScroll.d.ts

@@ -0,0 +1 @@
+export declare const useWsScroll: (isLoading: boolean, simpleInstall?: boolean) => void;

package/pages/Logs/hooks/useWsScroll.js

@@ -0,0 +1,39 @@
+import { useState, useEffect } from 'react';
+import { wsSnackbar } from '@postgres.ai/shared/pages/Logs/wsSnackbar';
+export const useWsScroll = (isLoading, simpleInstall) => {
+    const [isNewData, setIsNewData] = useState(false);
+    const [isAtBottom, setIsAtBottom] = useState(true);
+    useEffect(() => {
+        var _a;
+        !isLoading && wsSnackbar(isAtBottom, isNewData);
+        const targetNode = simpleInstall
+            ? (_a = document.getElementById('logs-container')) === null || _a === void 0 ? void 0 : _a.parentElement
+            : document.getElementById('logs-container');
+        const clientAtBottom = (element) => element.scrollHeight - element.scrollTop - 50 < element.clientHeight;
+        const handleScroll = (e) => {
+            if (clientAtBottom(e.target)) {
+                setIsAtBottom(true);
+                setIsNewData(false);
+            }
+            else {
+                setIsAtBottom(false);
+            }
+        };
+        const handleInsert = (e) => {
+            var _a;
+            if (((_a = e.srcElement) === null || _a === void 0 ? void 0 : _a.tagName) !== 'DIV') {
+                isAtBottom &&
+                    (targetNode === null || targetNode === void 0 ? void 0 : targetNode.scroll({
+                        top: targetNode.scrollHeight,
+                    }));
+                setIsNewData(true);
+            }
+        };
+        targetNode === null || targetNode === void 0 ? void 0 : targetNode.addEventListener('scroll', handleScroll, false);
+        targetNode === null || targetNode === void 0 ? void 0 : targetNode.addEventListener('DOMNodeInserted', handleInsert, false);
+        return () => {
+            targetNode === null || targetNode === void 0 ? void 0 : targetNode.removeEventListener('scroll', handleScroll, false);
+            targetNode === null || targetNode === void 0 ? void 0 : targetNode.removeEventListener('DOMNodeInserted', handleInsert, false);
+        };
+    }, [isAtBottom, isNewData, isLoading]);
+};

package/pages/Logs/index.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { Api } from '@postgres.ai/shared/pages/Instance/stores/Main';
+export declare const Logs: ({ api }: {
+    api: Api;
+}) => JSX.Element;

package/pages/Logs/index.js

@@ -0,0 +1,189 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import classNames from 'classnames';
+import { makeStyles } from '@material-ui/core';
+import { Alert, AlertTitle } from '@material-ui/lab';
+import React, { useEffect, useReducer } from 'react';
+import { Spinner } from '@postgres.ai/shared/components/Spinner';
+import { establishConnection } from '@postgres.ai/shared/pages/Logs/wsLogs';
+import { useWsScroll } from '@postgres.ai/shared/pages/Logs/hooks/useWsScroll';
+import { LAPTOP_WIDTH_PX } from '@postgres.ai/shared/pages/Logs/constants';
+import { PlusIcon } from './Icons/PlusIcon';
+const useStyles = makeStyles(() => ({
+    spinnerContainer: {
+        display: 'flex',
+        width: '100%',
+        alignItems: 'center',
+        justifyContent: 'center',
+    },
+    filterSection: {
+        marginTop: '10px',
+        display: 'flex',
+        flexDirection: 'row',
+        gap: 10,
+        '&  > span': {
+            display: 'flex',
+            flexDirection: 'row',
+            gap: '5px',
+            alignItems: 'center',
+            border: '1px solid #898E9A',
+            padding: '3px 8px',
+            borderRadius: 5,
+            fontSize: '13px',
+            textTransform: 'capitalize',
+            cursor: 'pointer',
+        },
+        '&  > span > button': {
+            background: 'none',
+            outline: 'none',
+            border: 0,
+            width: '18px',
+            height: '18px',
+            cursor: 'pointer',
+        },
+    },
+    //  we need important since id has higher priority than class
+    logsContainer: {
+        overflow: 'auto !important',
+        margin: '10px 0 0 0 !important',
+        maxHeight: 'calc(100vh - 360px)',
+        position: 'relative',
+        '& p': {
+            fontSize: '10px !important',
+            maxWidth: 'calc(100% - 25px)',
+            '@media (max-width: 982px)': {
+                maxWidth: '100%',
+            },
+        },
+    },
+    activeButton: {
+        border: '1px solid #3F51B5 !important',
+        color: '#3F51B5 !important',
+        '& svg': {
+            '& path': {
+                fill: '#3F51B5 !important',
+            },
+        },
+    },
+    passiveButton: {
+        '& svg': {
+            transform: 'rotate(45deg) scale(0.75)',
+        },
+    },
+    activeError: {
+        border: '1px solid #F44336 !important',
+        color: '#F44336 !important',
+        '& svg': {
+            '& path': {
+                fill: '#F44336 !important',
+            },
+        },
+    },
+    utilFilter: {
+        '& > span': {
+            textTransform: 'lowercase',
+        },
+        '& > span:last-child': {
+            textTransform: 'capitalize',
+        },
+    },
+}), { index: 1 });
+export const Logs = ({ api }) => {
+    const classes = useStyles();
+    const [isLoading, setIsLoading] = React.useState(true);
+    const targetNode = document.getElementById('logs-container');
+    useWsScroll(isLoading);
+    const logsFilterState = (localStorage === null || localStorage === void 0 ? void 0 : localStorage.getItem('logsFilter')) &&
+        (JSON === null || JSON === void 0 ? void 0 : JSON.parse((localStorage === null || localStorage === void 0 ? void 0 : localStorage.getItem('logsFilter')) || ''));
+    const isEmpty = (obj) => {
+        for (const key in obj) {
+            if (obj.hasOwnProperty(key))
+                return false;
+        }
+        return true;
+    };
+    const initialState = {
+        '[DEBUG]': !isEmpty(logsFilterState) ? logsFilterState === null || logsFilterState === void 0 ? void 0 : logsFilterState['[DEBUG]'] : true,
+        '[INFO]': !isEmpty(logsFilterState) ? logsFilterState === null || logsFilterState === void 0 ? void 0 : logsFilterState['[INFO]'] : true,
+        '[ERROR]': !isEmpty(logsFilterState) ? logsFilterState === null || logsFilterState === void 0 ? void 0 : logsFilterState['[ERROR]'] : true,
+        '[base.go]': !isEmpty(logsFilterState)
+            ? logsFilterState === null || logsFilterState === void 0 ? void 0 : logsFilterState['[base.go]']
+            : true,
+        '[runners.go]': !isEmpty(logsFilterState)
+            ? logsFilterState === null || logsFilterState === void 0 ? void 0 : logsFilterState['[runners.go]']
+            : true,
+        '[snapshots.go]': !isEmpty(logsFilterState)
+            ? logsFilterState === null || logsFilterState === void 0 ? void 0 : logsFilterState['[snapshots.go]']
+            : true,
+        '[util.go]': !isEmpty(logsFilterState)
+            ? logsFilterState === null || logsFilterState === void 0 ? void 0 : logsFilterState['[util.go]']
+            : true,
+        '[logging.go]': !isEmpty(logsFilterState)
+            ? logsFilterState === null || logsFilterState === void 0 ? void 0 : logsFilterState['[logging.go]']
+            : false,
+        '[ws.go]': !isEmpty(logsFilterState) ? logsFilterState === null || logsFilterState === void 0 ? void 0 : logsFilterState['[ws.go]'] : false,
+        '[other]': !isEmpty(logsFilterState) ? logsFilterState === null || logsFilterState === void 0 ? void 0 : logsFilterState['[other]'] : true,
+    };
+    const reducer = (state, action) => {
+        switch (action.type) {
+            case 'DEBUG':
+                return { ...state, '[DEBUG]': !state['[DEBUG]'] };
+            case 'INFO':
+                return { ...state, '[INFO]': !state['[INFO]'] };
+            case 'ERROR':
+                return { ...state, '[ERROR]': !state['[ERROR]'] };
+            case 'base.go':
+                return { ...state, '[base.go]': !state['[base.go]'] };
+            case 'runners.go':
+                return { ...state, '[runners.go]': !state['[runners.go]'] };
+            case 'snapshots.go':
+                return { ...state, '[snapshots.go]': !state['[snapshots.go]'] };
+            case 'logging.go':
+                return { ...state, '[logging.go]': !state['[logging.go]'] };
+            case 'util.go':
+                return { ...state, '[util.go]': !state['[util.go]'] };
+            case 'ws.go':
+                return { ...state, '[ws.go]': !state['[ws.go]'] };
+            case 'other':
+                return { ...state, '[other]': !state['[other]'] };
+            default:
+                throw new Error();
+        }
+    };
+    const [state, dispatch] = useReducer(reducer, initialState);
+    const FormCheckbox = ({ type }) => {
+        const filterType = state[`[${type}]`];
+        return (_jsxs("span", { onClick: () => dispatch({ type }), className: filterType && type !== 'ERROR'
+                ? classes.activeButton
+                : filterType && type === 'ERROR'
+                    ? classes.activeError
+                    : classes.passiveButton, children: [_jsx("span", { children: type.toLowerCase() }), _jsx("button", { "aria-label": "close", type: "button", children: _jsx(PlusIcon, {}) })] }));
+    };
+    useEffect(() => {
+        if (api.initWS != undefined) {
+            establishConnection(api);
+        }
+    }, [api]);
+    useEffect(() => {
+        localStorage.setItem('logsFilter', JSON.stringify(state));
+    }, [state]);
+    useEffect(() => {
+        const config = { attributes: false, childList: true, subtree: true };
+        if (isLoading && (targetNode === null || targetNode === void 0 ? void 0 : targetNode.querySelectorAll('p').length) === 1) {
+            setIsLoading(false);
+        }
+        const callback = (mutationList) => {
+            for (const mutation of mutationList) {
+                if (mutation.type === 'childList') {
+                    setIsLoading(false);
+                }
+            }
+        };
+        const observer = new MutationObserver(callback);
+        targetNode && observer.observe(targetNode, config);
+    }, [isLoading, targetNode]);
+    return (_jsxs(_Fragment, { children: [_jsxs(Alert, { severity: "info", children: [_jsx(AlertTitle, { children: "Sensitive values are masked." }), "You can see the raw log data connecting to the machine and running", ' ', _jsx("strong", { children: "'docker logs --since 5m -f dblab_server'" }), "."] }), window.innerWidth > LAPTOP_WIDTH_PX && (_jsxs(_Fragment, { children: [_jsx("section", { className: classes.filterSection, children: Object.keys(state)
+                            .slice(0, 3)
+                            .map((key) => (_jsx(FormCheckbox, { type: key.replace('[', '').replace(']', '') }, key))) }), _jsx("section", { className: classNames(classes.filterSection, classes.utilFilter), children: Object.keys(state)
+                            .slice(3, 10)
+                            .map((key) => (_jsx(FormCheckbox, { type: key.replace('[', '').replace(']', '') }, key))) })] })), _jsx("div", { id: "logs-container", className: classes.logsContainer, children: isLoading ? (_jsx("div", { className: classes.spinnerContainer, children: _jsx(Spinner, {}) })) : null })] }));
+};

package/pages/Logs/utils/index.d.ts

@@ -0,0 +1,2 @@
+export declare const stringWithoutBrackets: (val: string | undefined) => string;
+export declare const stringContainsPattern: (target: string, pattern?: string[]) => boolean;

package/pages/Logs/utils/index.js

@@ -0,0 +1,15 @@
+export const stringWithoutBrackets = (val) => String(val).replace(/[\[\]]/g, '');
+export const stringContainsPattern = (target, pattern = [
+    'base.go',
+    'runners.go',
+    'snapshots.go',
+    'util.go',
+    'logging.go',
+    'ws.go',
+]) => {
+    let value = 0;
+    pattern.forEach(function (word) {
+        value = value + Number(target === null || target === void 0 ? void 0 : target.includes(word));
+    });
+    return value === 1;
+};

package/pages/Logs/wsLogs.d.ts

@@ -0,0 +1,2 @@
+import { Api } from '@postgres.ai/shared/pages/Instance/stores/Main';
+export declare const establishConnection: (api: Api) => Promise<void>;

package/pages/Logs/wsLogs.js

@@ -0,0 +1,76 @@
+import moment from 'moment';
+import { LOGS_ENDPOINT, LOGS_LINE_LIMIT, LOGS_TIME_LIMIT, } from '@postgres.ai/shared/pages/Logs/constants';
+import { stringWithoutBrackets, stringContainsPattern, } from '@postgres.ai/shared/pages/Logs/utils';
+export const establishConnection = async (api) => {
+    const logElement = document.getElementById('logs-container');
+    if (logElement === null) {
+        console.log('Not found container element');
+        return;
+    }
+    const appendLogElement = (logEntry, logType) => {
+        var _a;
+        const tag = document.createElement('p');
+        const logLevel = logEntry.split(' ')[3];
+        const logInitiator = logEntry.split(' ')[2];
+        const logsFilterState = JSON.parse(localStorage.getItem('logsFilter') || '');
+        const filterInitiators = Object.keys(logsFilterState).some((state) => {
+            if (logsFilterState[state]) {
+                if (state === '[other]') {
+                    return !stringContainsPattern(logInitiator);
+                }
+                return logInitiator === null || logInitiator === void 0 ? void 0 : logInitiator.includes(stringWithoutBrackets(state));
+            }
+        });
+        if (filterInitiators &&
+            (logsFilterState[logInitiator] ||
+                logsFilterState[logLevel] ||
+                logEntry === 'Connection Error')) {
+            tag.appendChild(document.createTextNode(logEntry));
+            logElement.appendChild(tag);
+        }
+        // we need to check both second and third element of logEntry,
+        // since the pattern of the response returned isn't always consistent
+        if (logInitiator === '[ERROR]' || logLevel === '[ERROR]') {
+            tag.classList.add('error-log');
+        }
+        if (logType === 'message') {
+            const logEntryTime = (_a = logElement.children[1]) === null || _a === void 0 ? void 0 : _a.innerHTML.split(' ').slice(0, 2).join(' ');
+            const timeDifference = moment(logEntryTime).isValid() &&
+                moment.duration(moment.utc(Date.now()).diff(logEntryTime)).asMinutes();
+            if (logElement.childElementCount > LOGS_LINE_LIMIT &&
+                Number(timeDifference) > LOGS_TIME_LIMIT) {
+                logElement.removeChild(logElement.children[1]);
+            }
+        }
+    };
+    const { response, error } = await api.getWSToken({
+        instanceId: '',
+    });
+    if (error || response == null) {
+        console.log('Not authorized:', error);
+        appendLogElement('Not authorized');
+        return;
+    }
+    if (api.initWS == null) {
+        console.log('WebSocket Connection is not configured');
+        appendLogElement('WebSocket Connection is not configured');
+        return;
+    }
+    const socket = api.initWS(LOGS_ENDPOINT, response.token);
+    socket.onopen = () => {
+        console.log('Successfully Connected');
+    };
+    socket.onclose = (event) => {
+        console.log('Socket Closed Connection: ', event);
+        socket.send('Client Closed');
+        appendLogElement('DBLab Connection Closed');
+    };
+    socket.onerror = (error) => {
+        console.log('Socket Error: ', error);
+        appendLogElement('Connection Error');
+    };
+    socket.onmessage = function (event) {
+        const logEntry = decodeURIComponent(atob(event.data));
+        appendLogElement(logEntry, 'message');
+    };
+};

package/pages/Logs/wsSnackbar.d.ts

@@ -0,0 +1 @@
+export declare const wsSnackbar: (clientAtBottom: boolean, isNewData: boolean) => void;