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

package/pages/Instance/stores/Main.js

@@ -0,0 +1,302 @@
+/*--------------------------------------------------------------------------
+ * 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.getBranchesError = null;
+        this.snapshotListError = null;
+        this.seImagesError = null;
+        this.unstableClones = new Set();
+        this.isReloadingClones = false;
+        this.isConfigurationLoading = false;
+        this.isReloadingInstance = false;
+        this.isReloadingInstanceRetrieval = false;
+        this.isBranchesLoading = false;
+        this.isConfigLoading = false;
+        this.isLoadingInstance = false;
+        this.load = (instanceId, isPlatform = false) => {
+            this.instance = null;
+            this.isReloadingInstance = true;
+            if (!isPlatform) {
+                this.getBranches(instanceId);
+            }
+            const runRetrieval = () => {
+                this.loadInstanceRetrieval(instanceId).then(() => {
+                    if (this.instanceRetrieval) {
+                        this.getConfig(instanceId);
+                        this.getFullConfig(instanceId);
+                    }
+                });
+            };
+            this.loadInstance(instanceId, false).then(() => {
+                var _a, _b, _c, _d;
+                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);
+                }
+                if (isPlatform && ((_d = this.instance) === null || _d === void 0 ? void 0 : _d.url)) {
+                    this.getBranches(instanceId);
+                    runRetrieval();
+                }
+            });
+            if (!isPlatform) {
+                runRetrieval();
+            }
+        };
+        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(instanceId);
+                    this.getFullConfig(instanceId);
+                }
+            });
+        };
+        this.reloadSnapshots = async (branchName) => {
+            if (!this.instance)
+                return;
+            await this.snapshots.reload(this.instance.id, branchName);
+        };
+        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 (instanceId) => {
+            if (!this.api.getConfig)
+                return;
+            this.isConfigurationLoading = true;
+            this.isConfigLoading = true;
+            const { response, error } = await this.api.getConfig(instanceId);
+            this.isConfigurationLoading = false;
+            this.isConfigLoading = 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, instanceId) => {
+            if (!this.api.updateConfig)
+                return;
+            const { response, error } = await this.api.updateConfig({ ...values }, instanceId);
+            if (error)
+                this.configError = await error.json().then((err) => err.message);
+            return response;
+        };
+        this.getFullConfig = async (instanceId) => {
+            var _a, _b, _c, _d, _e;
+            if (!this.api.getFullConfig)
+                return;
+            const { response, error } = await this.api.getFullConfig(instanceId);
+            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];
+                this.uiVersion = (_e = (_d = (_c = splitYML[0]) === null || _c === void 0 ? void 0 : _c.split('dockerImage: "postgresai/ce-ui:')[2]) === null || _d === void 0 ? void 0 : _d.split('\n')[0]) === null || _e === void 0 ? void 0 : _e.replace(/['"]+/g, '');
+            }
+            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 (instanceId) => {
+            if (!this.api.getEngine)
+                return;
+            this.configError = null;
+            const { response, error } = await this.api.getEngine(instanceId);
+            if (response) {
+                this.dleEdition = response.edition;
+            }
+            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 || !this.api.resetClone)
+                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 || !this.api.destroyClone)
+                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;
+        };
+        this.getBranches = async (instanceId) => {
+            if (!this.api.getBranches)
+                return;
+            this.isBranchesLoading = true;
+            const { response, error } = await this.api.getBranches(instanceId);
+            this.isBranchesLoading = false;
+            if (error)
+                this.getBranchesError = await error.json().then((err) => err);
+            return response;
+        };
+        this.deleteBranch = async (branchName, instanceId) => {
+            if (!branchName || !this.api.deleteBranch)
+                return;
+            const { response, error } = await this.api.deleteBranch(branchName, instanceId);
+            return { response, error };
+        };
+        this.getSnapshotList = async (branchName, instanceId) => {
+            if (!this.api.getSnapshotList)
+                return;
+            const { response, error } = await this.api.getSnapshotList(branchName, instanceId);
+            this.isBranchesLoading = false;
+            if (error) {
+                this.snapshotListError = await error.json().then((err) => err.message);
+            }
+            return response;
+        };
+        this.destroySnapshot = async (snapshotId, forceDelete, instanceId) => {
+            if (!this.api.destroySnapshot || !snapshotId)
+                return;
+            const { response, error } = await this.api.destroySnapshot(snapshotId, forceDelete, instanceId);
+            return {
+                response,
+                error: error ? await error.json().then((err) => err) : null,
+            };
+        };
+        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/styles.scss

@@ -5,13 +5,12 @@
  *--------------------------------------------------------------------------
  */
 
- #logs-container {
+#logs-container {
   margin: 20px 0 0 0;
   border: 1px solid #b4b4b4;
   border-radius: 4px;
   overflow: hidden;
   padding: 0.5rem 1rem;
-
   & > p {
     font-size: small;
     font-family: 'Fira Code', monospace;
@@ -31,10 +30,8 @@
   background-color: #fff2e5;
   color: #000;
   font-weight: 500;
-  font-size: 11px;
   padding: 6px 8px;
   border-radius: 4px;
   transition: all 40050ms ease;
   cursor: pointer;
-  z-index: 1;
 }

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,37 @@
+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 contentElement = document.getElementById('content-container');
+        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.scrollIntoView(false));
+                setIsNewData(true);
+            }
+        };
+        contentElement === null || contentElement === void 0 ? void 0 : contentElement.addEventListener('scroll', handleScroll, false);
+        contentElement === null || contentElement === void 0 ? void 0 : contentElement.addEventListener('DOMNodeInserted', handleInsert, false);
+        return () => {
+            contentElement === null || contentElement === void 0 ? void 0 : contentElement.removeEventListener('scroll', handleScroll, false);
+            contentElement === null || contentElement === void 0 ? void 0 : contentElement.removeEventListener('DOMNodeInserted', handleInsert, false);
+        };
+    }, [isAtBottom, isNewData, isLoading]);
+};

package/pages/Logs/index.d.ts

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

package/pages/Logs/index.js

@@ -0,0 +1,200 @@
+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, restartConnection, } from '@postgres.ai/shared/pages/Logs/wsLogs';
+import { useWsScroll } from '@postgres.ai/shared/pages/Logs/hooks/useWsScroll';
+import { LAPTOP_WIDTH_PX } from './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,
+        flexWrap: 'wrap',
+        '&  > span': {
+            display: 'flex',
+            flexDirection: 'row',
+            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: '100%',
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
+            cursor: 'pointer',
+            paddingBottom: 0,
+            paddingRight: 0,
+        },
+    },
+    //  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)',
+        },
+    },
+    buttonClassName: {
+        '& svg': {
+            width: '14px',
+            height: '14px',
+        },
+    },
+    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, instanceId }) => {
+    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 = (obj) => {
+        const filters = {
+            '[DEBUG]': true,
+            '[INFO]': true,
+            '[ERROR]': true,
+            '[base.go]': true,
+            '[runners.go]': true,
+            '[snapshots.go]': true,
+            '[util.go]': true,
+            '[logging.go]': false,
+            '[ws.go]': false,
+            '[other]': true,
+        };
+        for (const key in obj) {
+            if (obj.hasOwnProperty(key)) {
+                filters[key] = obj[key];
+            }
+        }
+        return filters;
+    };
+    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(logsFilterState));
+    const FormCheckbox = ({ type }) => {
+        const filterType = state[`[${type}]`];
+        return (_jsxs("span", { onClick: () => {
+                dispatch({ type });
+                restartConnection(api, instanceId);
+            }, 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", className: classes.buttonClassName, children: _jsx(PlusIcon, {}) })] }));
+    };
+    useEffect(() => {
+        if (api.initWS != undefined) {
+            establishConnection(api, instanceId);
+        }
+    }, [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;