@postgres.ai/shared 3.5.0-pr-1027.1 → 4.0.0-pr-1028.1

package/pages/Instance/index.js

@@ -12,13 +12,15 @@ import { Button } from '@postgres.ai/shared/components/Button2';
 import { StubSpinner } from '@postgres.ai/shared/components/StubSpinner';
 import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle';
 import { ErrorStub } from '@postgres.ai/shared/components/ErrorStub';
-import { Tabs } from './Tabs';
+import { TABS_INDEX, InstanceTabs } from './Tabs';
 import { Logs } from '../Logs';
 import { Clones } from './Clones';
 import { Info } from './Info';
-import { Configuration } from '../Configuration';
-import { ClonesModal } from './ClonesModal';
+import { Snapshots } from './Snapshots';
+import { Branches } from '../Branches';
+import { Configuration } from './Configuration';
 import { SnapshotsModal } from './SnapshotsModal';
+import { ClonesModal } from './Clones/ClonesModal';
 import { InactiveInstance } from './InactiveInstance';
 import { HostProvider, StoresProvider } from './context';
 import Typography from '@material-ui/core/Typography';
@@ -50,24 +52,24 @@ const useStyles = makeStyles((theme) => ({
 export const Instance = observer((props) => {
     var _a, _b, _c, _d;
     const classes = useStyles();
-    const { instanceId, api } = props;
-    const [activeTab, setActiveTab] = React.useState(0);
+    const { instanceId, api, isPlatform } = props;
+    const [activeTab, setActiveTab] = React.useState((props === null || props === void 0 ? void 0 : props.renderCurrentTab) || TABS_INDEX.OVERVIEW);
     const [hasBeenRedirected, setHasBeenRedirected] = React.useState(false);
     const stores = useCreatedStores(props);
-    const { instance, instanceError, instanceRetrieval, isLoadingInstance, load, reload, } = stores.main;
+    const { instance, instanceError, instanceRetrieval, isLoadingInstance, load, } = stores.main;
     const switchTab = (_, tabID) => {
         const contentElement = document.getElementById('content-container');
         setActiveTab(tabID);
         if (tabID === 0) {
             load(props.instanceId);
         }
-        contentElement === null || contentElement === void 0 ? void 0 : contentElement.scroll(0, 0);
+        contentElement === null || contentElement === void 0 ? void 0 : contentElement.scrollTo(0, 0);
     };
     const isInstanceIntegrated = instanceRetrieval ||
         (!isLoadingInstance && instance && (instance === null || instance === void 0 ? void 0 : instance.url) && !instanceError);
     const isConfigurationActive = (instanceRetrieval === null || instanceRetrieval === void 0 ? void 0 : instanceRetrieval.mode) !== 'physical';
     useEffect(() => {
-        load(instanceId);
+        load(instanceId, isPlatform);
     }, [instanceId]);
     useEffect(() => {
         if (props.setProjectAlias)
@@ -76,16 +78,15 @@ export const Instance = observer((props) => {
     useEffect(() => {
         var _a, _b;
         if (instance &&
-            ((_b = (_a = instance === null || instance === void 0 ? void 0 : instance.state) === null || _a === void 0 ? void 0 : _a.retrieving) === null || _b === void 0 ? void 0 : _b.status) === 'pending' &&
+            ((_b = (_a = instance.state) === null || _a === void 0 ? void 0 : _a.retrieving) === null || _b === void 0 ? void 0 : _b.status) === 'pending' &&
             isConfigurationActive &&
-            !props.isPlatform &&
             !hasBeenRedirected) {
-            setActiveTab(2);
+            setActiveTab(TABS_INDEX.CONFIGURATION);
             setHasBeenRedirected(true);
         }
     }, [instance, hasBeenRedirected]);
-    return (_jsx(HostProvider, { value: props, children: _jsxs(StoresProvider, { value: stores, children: [props.elements.breadcrumbs, _jsx(SectionTitle, { text: props.title, level: 1, tag: "h1", className: classes.title, rightContent: _jsx(Button, { onClick: () => reload(props.instanceId), isDisabled: !instance && !instanceError, className: classes.reloadButton, children: "Reload info" }), children: isInstanceIntegrated && (_jsx(Tabs, { isPlatform: props.isPlatform, value: activeTab, handleChange: switchTab, hasLogs: api.initWS != undefined })) }), instanceError && (_jsx(ErrorStub, { ...instanceError, className: classes.errorStub })), isInstanceIntegrated ? (_jsxs(_Fragment, { children: [_jsxs(TabPanel, { value: activeTab, index: 0, children: [!instanceError && (_jsxs("div", { className: classes.content, children: [!instance ||
-                                            (!((_b = (_a = instance === null || instance === void 0 ? void 0 : instance.state) === null || _a === void 0 ? void 0 : _a.retrieving) === null || _b === void 0 ? void 0 : _b.status) && _jsx(StubSpinner, {})), instance ? (_jsxs(_Fragment, { children: [_jsx(Clones, {}), _jsx(Info, {})] })) : (_jsx(StubSpinner, {}))] })), _jsx(ClonesModal, {}), _jsx(SnapshotsModal, {})] }), !props.isPlatform && (_jsxs(_Fragment, { children: [_jsx(TabPanel, { value: activeTab, index: 1, children: activeTab === 1 && _jsx(Logs, { api: api }) }), _jsx(TabPanel, { value: activeTab, index: 2, children: _jsx(Configuration, { isConfigurationActive: isConfigurationActive, disableConfigModification: (_c = instance === null || instance === void 0 ? void 0 : instance.state) === null || _c === void 0 ? void 0 : _c.engine.disableConfigModification, switchActiveTab: switchTab, reload: () => load(props.instanceId) }) })] }))] })) : !isLoadingInstance && !instanceError ? (_jsx(TabPanel, { value: activeTab, index: activeTab, children: _jsx(InactiveInstance, { instance: instance, org: (_d = props.elements.breadcrumbs) === null || _d === void 0 ? void 0 : _d.props.org }) })) : (!instanceError && (_jsx(TabPanel, { value: activeTab, index: 0, children: _jsx("div", { className: classes.content, children: _jsx(StubSpinner, {}) }) })))] }) }));
+    return (_jsx(HostProvider, { value: props, children: _jsxs(StoresProvider, { value: stores, children: [props.elements.breadcrumbs, _jsx(SectionTitle, { text: props.title, level: 1, tag: "h1", className: classes.title, rightContent: _jsx(Button, { onClick: () => load(props.instanceId, isPlatform), isDisabled: !instance && !instanceError, className: classes.reloadButton, children: "Reload info" }), children: isInstanceIntegrated && (_jsx(InstanceTabs, { instanceId: props.instanceId, tab: activeTab, onTabChange: (tabID) => setActiveTab(tabID), isPlatform: isPlatform, hasLogs: api.initWS !== undefined })) }), instanceError && (_jsx(ErrorStub, { ...instanceError, className: classes.errorStub })), isInstanceIntegrated ? (_jsxs(_Fragment, { children: [_jsxs(TabPanel, { value: activeTab, index: TABS_INDEX.OVERVIEW, children: [!instanceError && (_jsx("div", { className: classes.content, children: instance && ((_b = (_a = instance.state) === null || _a === void 0 ? void 0 : _a.retrieving) === null || _b === void 0 ? void 0 : _b.status) ? (_jsxs(_Fragment, { children: [_jsx(Clones, {}), _jsx(Info, {})] })) : (_jsx(StubSpinner, {})) })), _jsx(ClonesModal, {}), _jsx(SnapshotsModal, {})] }), _jsx(TabPanel, { value: activeTab, index: TABS_INDEX.CLONES, children: activeTab === TABS_INDEX.CLONES && (_jsx("div", { className: classes.content, children: !instanceError &&
+                                    (instance ? _jsx(Clones, { onlyRenderList: true }) : _jsx(StubSpinner, {})) })) }), _jsx(TabPanel, { value: activeTab, index: TABS_INDEX.LOGS, children: activeTab === TABS_INDEX.LOGS && (_jsx(Logs, { api: api, instanceId: props.instanceId })) }), _jsx(TabPanel, { value: activeTab, index: TABS_INDEX.CONFIGURATION, children: activeTab === TABS_INDEX.CONFIGURATION && (_jsx(Configuration, { instanceId: instanceId, switchActiveTab: switchTab, isConfigurationActive: isConfigurationActive, reload: () => load(props.instanceId), disableConfigModification: (_c = instance === null || instance === void 0 ? void 0 : instance.state) === null || _c === void 0 ? void 0 : _c.engine.disableConfigModification })) }), _jsx(TabPanel, { value: activeTab, index: TABS_INDEX.SNAPSHOTS, children: activeTab === TABS_INDEX.SNAPSHOTS && (_jsx(Snapshots, { instanceId: instanceId })) }), _jsx(TabPanel, { value: activeTab, index: TABS_INDEX.BRANCHES, children: activeTab === TABS_INDEX.BRANCHES && (_jsx(Branches, { instanceId: instanceId })) })] })) : !isLoadingInstance && !instanceError ? (_jsx(TabPanel, { value: activeTab, index: activeTab, children: _jsx(InactiveInstance, { instance: instance, org: (_d = props.elements.breadcrumbs) === null || _d === void 0 ? void 0 : _d.props.org }) })) : (!instanceError && (_jsx(TabPanel, { value: activeTab, index: activeTab, children: _jsx("div", { className: classes.content, children: _jsx(StubSpinner, {}) }) })))] }) }));
 });
 function TabPanel(props) {
     const { children, value, index, ...other } = props;

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

@@ -1,4 +1,5 @@
 import { GetSnapshots } from '@postgres.ai/shared/types/api/endpoints/getSnapshots';
+import { CreateSnapshot } from '@postgres.ai/shared/types/api/endpoints/createSnapshot';
 import { GetInstance } from '@postgres.ai/shared/types/api/endpoints/getInstance';
 import { Config } from '@postgres.ai/shared/types/api/entities/config';
 import { GetConfig } from '@postgres.ai/shared/types/api/endpoints/getConfig';
@@ -16,14 +17,19 @@ import { GetFullConfig } from '@postgres.ai/shared/types/api/endpoints/getFullCo
 import { GetInstanceRetrieval } from '@postgres.ai/shared/types/api/endpoints/getInstanceRetrieval';
 import { InstanceRetrievalType } from '@postgres.ai/shared/types/api/entities/instanceRetrieval';
 import { GetEngine } from '@postgres.ai/shared/types/api/endpoints/getEngine';
+import { GetSnapshotList } from '@postgres.ai/shared/types/api/endpoints/getSnapshotList';
+import { GetBranches } from '@postgres.ai/shared/types/api/endpoints/getBranches';
+import { DeleteBranch } from '@postgres.ai/shared/types/api/endpoints/deleteBranch';
 import { GetSeImages } from '@postgres.ai/shared/types/api/endpoints/getSeImages';
+import { DestroySnapshot } from '@postgres.ai/shared/types/api/endpoints/destroySnapshot';
 export declare type Api = {
     getInstance: GetInstance;
-    getSnapshots: GetSnapshots;
+    getSnapshots?: GetSnapshots;
+    createSnapshot?: CreateSnapshot;
     refreshInstance?: RefreshInstance;
-    destroyClone: DestroyClone;
-    resetClone: ResetClone;
-    getWSToken: GetWSToken;
+    destroyClone?: DestroyClone;
+    resetClone?: ResetClone;
+    getWSToken?: GetWSToken;
     initWS?: InitWS;
     getConfig?: GetConfig;
     updateConfig?: UpdateConfig;
@@ -32,6 +38,10 @@ export declare type Api = {
     getSeImages?: GetSeImages;
     getEngine?: GetEngine;
     getInstanceRetrieval?: GetInstanceRetrieval;
+    getBranches?: GetBranches;
+    getSnapshotList?: GetSnapshotList;
+    deleteBranch?: DeleteBranch;
+    destroySnapshot?: DestroySnapshot;
 };
 declare type Error = {
     title?: string;
@@ -42,10 +52,14 @@ export declare class MainStore {
     instanceRetrieval: InstanceRetrievalType | null;
     config: Config | null;
     fullConfig?: string;
+    dleEdition?: string;
     platformUrl?: string;
+    uiVersion?: string;
     instanceError: Error | null;
     configError: string | null;
     getFullConfigError: string | null;
+    getBranchesError: Error | null;
+    snapshotListError: string | null;
     seImagesError: string | undefined | null;
     unstableClones: Set<string>;
     readonly snapshots: SnapshotsStore;
@@ -53,17 +67,19 @@ export declare class MainStore {
     isConfigurationLoading: boolean;
     isReloadingInstance: boolean;
     isReloadingInstanceRetrieval: boolean;
+    isBranchesLoading: boolean;
+    isConfigLoading: boolean;
     isLoadingInstance: boolean;
     private readonly api;
     constructor(api: Api);
     get isDisabledInstance(): boolean;
-    load: (instanceId: string) => void;
+    load: (instanceId: string, isPlatform?: boolean) => void;
     reload: (instanceId: string) => void;
-    reloadSnapshots: () => Promise<void>;
+    reloadSnapshots: (branchName?: string) => Promise<void>;
     reloadInstanceRetrieval: () => Promise<void>;
     private loadInstanceRetrieval;
     private loadInstance;
-    getConfig: () => Promise<{
+    getConfig: (instanceId: string) => Promise<{
         dockerPath: string | undefined;
         tuningParams: string;
         sharedBuffers: string | undefined;
@@ -86,12 +102,12 @@ export declare class MainStore {
         debug: boolean | undefined;
         dockerImage: string | undefined;
     } | null | undefined>;
-    updateConfig: (values: Config) => Promise<Response | null | undefined>;
-    getFullConfig: () => Promise<string | null | undefined>;
+    updateConfig: (values: Config, instanceId: string) => Promise<Response | null | undefined>;
+    getFullConfig: (instanceId: string) => Promise<string | null | undefined>;
     getSeImages: (values: {
         packageGroup: string;
     }) => Promise<import("@postgres.ai/shared/types/api/endpoints/getSeImages").SeImages[] | null | undefined>;
-    getEngine: () => Promise<import("@postgres.ai/shared/types/api/endpoints/getEngine").EngineDto | null | undefined>;
+    getEngine: (instanceId: string) => Promise<import("@postgres.ai/shared/types/api/endpoints/getEngine").EngineDto | null | undefined>;
     testDbSource: (values: dbSource) => Promise<{
         response: {
             status: number;
@@ -111,5 +127,15 @@ export declare class MainStore {
     destroyClone: (cloneId: string) => Promise<boolean | undefined>;
     private liveUpdateInstance;
     reloadClones: () => Promise<void>;
+    getBranches: (instanceId: string) => Promise<import("@postgres.ai/shared/types/api/endpoints/getBranches").Branch[] | null | undefined>;
+    deleteBranch: (branchName: string, instanceId: string) => Promise<{
+        response: Response | null;
+        error: globalThis.Error | null;
+    } | undefined>;
+    getSnapshotList: (branchName: string, instanceId: string) => Promise<import("@postgres.ai/shared/types/api/endpoints/getSnapshotList").SnapshotList[] | null | undefined>;
+    destroySnapshot: (snapshotId: string, forceDelete: boolean, instanceId: string) => Promise<{
+        response: boolean | null;
+        error: any;
+    } | undefined>;
 }
 export {};

package/pages/Instance/stores/Main.js

@@ -16,28 +16,45 @@ export class MainStore {
         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) => {
+        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;
-                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)) {
+                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);
                 }
-            });
-            this.loadInstanceRetrieval(instanceId).then(() => {
-                if (this.instanceRetrieval) {
-                    this.getConfig();
-                    this.getFullConfig();
+                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;
@@ -46,21 +63,22 @@ export class MainStore {
                 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)) {
+                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.getConfig(instanceId);
+                    this.getFullConfig(instanceId);
                 }
             });
         };
-        this.reloadSnapshots = async () => {
+        this.reloadSnapshots = async (branchName) => {
             if (!this.instance)
                 return;
-            await this.snapshots.reload(this.instance.id);
+            await this.snapshots.reload(this.instance.id, branchName);
         };
         this.reloadInstanceRetrieval = async () => {
             if (!this.instance)
@@ -111,12 +129,14 @@ export class MainStore {
                 this.instanceError = { message: await getTextFromUnknownApiError(error) };
             return !!response;
         };
-        this.getConfig = async () => {
+        this.getConfig = async (instanceId) => {
             if (!this.api.getConfig)
                 return;
             this.isConfigurationLoading = true;
-            const { response, error } = await this.api.getConfig();
+            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;
@@ -126,23 +146,24 @@ export class MainStore {
             }
             return response;
         };
-        this.updateConfig = async (values) => {
+        this.updateConfig = async (values, instanceId) => {
             if (!this.api.updateConfig)
                 return;
-            const { response, error } = await this.api.updateConfig({ ...values });
+            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 () => {
-            var _a, _b;
+        this.getFullConfig = async (instanceId) => {
+            var _a, _b, _c, _d, _e;
             if (!this.api.getFullConfig)
                 return;
-            const { response, error } = await this.api.getFullConfig();
+            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
@@ -165,11 +186,14 @@ export class MainStore {
             }
             return response;
         };
-        this.getEngine = async () => {
+        this.getEngine = async (instanceId) => {
             if (!this.api.getEngine)
                 return;
             this.configError = null;
-            const { response, error } = await this.api.getEngine();
+            const { response, error } = await this.api.getEngine(instanceId);
+            if (response) {
+                this.dleEdition = response.edition;
+            }
             if (error)
                 await getTextFromUnknownApiError(error);
             return response;
@@ -184,7 +208,7 @@ export class MainStore {
             };
         };
         this.resetClone = async (cloneId, snapshotId) => {
-            if (!this.instance)
+            if (!this.instance || !this.api.resetClone)
                 return;
             this.unstableClones.add(cloneId);
             const { response, error } = await this.api.resetClone({
@@ -199,7 +223,7 @@ export class MainStore {
             return !!response;
         };
         this.destroyClone = async (cloneId) => {
-            if (!this.instance)
+            if (!this.instance || !this.api.destroyClone)
                 return;
             this.unstableClones.add(cloneId);
             const { response, error } = await this.api.destroyClone({
@@ -230,6 +254,41 @@ export class MainStore {
             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);

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/Logs/hooks/useWsScroll.js

@@ -6,6 +6,7 @@ export const useWsScroll = (isLoading, simpleInstall) => {
     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');
@@ -22,18 +23,15 @@ export const useWsScroll = (isLoading, simpleInstall) => {
         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,
-                    }));
+                isAtBottom && (targetNode === null || targetNode === void 0 ? void 0 : targetNode.scrollIntoView(false));
                 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);
+        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 () => {
-            targetNode === null || targetNode === void 0 ? void 0 : targetNode.removeEventListener('scroll', handleScroll, false);
-            targetNode === null || targetNode === void 0 ? void 0 : targetNode.removeEventListener('DOMNodeInserted', handleInsert, false);
+            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

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

package/pages/Logs/index.js

@@ -4,9 +4,9 @@ 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 { establishConnection, restartConnection, } 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 { LAPTOP_WIDTH_PX } from './constants';
 import { PlusIcon } from './Icons/PlusIcon';
 const useStyles = makeStyles(() => ({
     spinnerContainer: {
@@ -20,10 +20,10 @@ const useStyles = makeStyles(() => ({
         display: 'flex',
         flexDirection: 'row',
         gap: 10,
+        flexWrap: 'wrap',
         '&  > span': {
             display: 'flex',
             flexDirection: 'row',
-            gap: '5px',
             alignItems: 'center',
             border: '1px solid #898E9A',
             padding: '3px 8px',
@@ -36,9 +36,13 @@ const useStyles = makeStyles(() => ({
             background: 'none',
             outline: 'none',
             border: 0,
-            width: '18px',
-            height: '18px',
+            width: '100%',
+            height: '100%',
+            display: 'flex',
+            alignItems: 'center',
             cursor: 'pointer',
+            paddingBottom: 0,
+            paddingRight: 0,
         },
     },
     //  we need important since id has higher priority than class
@@ -69,6 +73,12 @@ const useStyles = makeStyles(() => ({
             transform: 'rotate(45deg) scale(0.75)',
         },
     },
+    buttonClassName: {
+        '& svg': {
+            width: '14px',
+            height: '14px',
+        },
+    },
     activeError: {
         border: '1px solid #F44336 !important',
         color: '#F44336 !important',
@@ -87,7 +97,7 @@ const useStyles = makeStyles(() => ({
         },
     },
 }), { index: 1 });
-export const Logs = ({ api }) => {
+export const Logs = ({ api, instanceId }) => {
     const classes = useStyles();
     const [isLoading, setIsLoading] = React.useState(true);
     const targetNode = document.getElementById('logs-container');
@@ -101,27 +111,25 @@ export const Logs = ({ api }) => {
         }
         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 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) {
@@ -149,18 +157,21 @@ export const Logs = ({ api }) => {
                 throw new Error();
         }
     };
-    const [state, dispatch] = useReducer(reducer, initialState);
+    const [state, dispatch] = useReducer(reducer, initialState(logsFilterState));
     const FormCheckbox = ({ type }) => {
         const filterType = state[`[${type}]`];
-        return (_jsxs("span", { onClick: () => dispatch({ type }), className: filterType && type !== 'ERROR'
+        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", children: _jsx(PlusIcon, {}) })] }));
+                    : 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);
+            establishConnection(api, instanceId);
         }
     }, [api]);
     useEffect(() => {

package/pages/Logs/wsLogs.d.ts

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