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

package/pages/Instance/Snapshots/components/SnapshotsTable/index.js

@@ -0,0 +1,125 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*--------------------------------------------------------------------------
+ * Copyright (c) 2019-2021, Postgres.ai, Nikolay Samokhvalov nik@postgres.ai
+ * All Rights Reserved. Proprietary and confidential.
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ *--------------------------------------------------------------------------
+ */
+import React from 'react';
+import cn from 'classnames';
+import { observer } from 'mobx-react-lite';
+import { makeStyles } from '@material-ui/core';
+import { formatDistanceToNowStrict } from 'date-fns';
+import copy from 'copy-to-clipboard';
+import { useHistory } from 'react-router-dom';
+import { HorizontalScrollContainer } from '@postgres.ai/shared/components/HorizontalScrollContainer';
+import { generateSnapshotPageId } from '@postgres.ai/shared/pages/Instance/Snapshots/utils';
+import { DestroySnapshotModal } from '@postgres.ai/shared/pages/Snapshots/Snapshot/DestorySnapshotModal';
+import { useStores } from '@postgres.ai/shared/pages/Instance/context';
+import { ArrowDropDownIcon } from '@postgres.ai/shared/icons/ArrowDropDown';
+import { formatBytesIEC } from '@postgres.ai/shared/utils/units';
+import { isSameDayUTC, isValidDate } from '@postgres.ai/shared/utils/date';
+import { Table, TableHead, TableRow, TableBody, TableHeaderCell, TableBodyCell, TableBodyCellMenu, } from '@postgres.ai/shared/components/Table';
+const useStyles = makeStyles({
+    cellContentCentered: {
+        display: 'flex',
+        alignItems: 'center',
+    },
+    pointerCursor: {
+        cursor: 'pointer',
+    },
+    sortIcon: {
+        marginLeft: '8px',
+        width: '10px',
+        cursor: 'pointer',
+        transition: 'transform 0.15s ease-in-out',
+    },
+    sortIconUp: {
+        transform: 'rotate(180deg)',
+    },
+    hideSortIcon: {
+        opacity: 0,
+    },
+    verticalCentered: {
+        display: 'flex',
+        alignItems: 'center',
+    },
+}, { index: 1 });
+export const SnapshotsTable = observer(({ instanceId }) => {
+    var _a, _b;
+    const history = useHistory();
+    const classes = useStyles();
+    const stores = useStores();
+    const { snapshots } = stores.main;
+    const [snapshotModal, setSnapshotModal] = React.useState({
+        isOpen: false,
+        snapshotId: '',
+    });
+    const filteredSnapshots = (_a = snapshots === null || snapshots === void 0 ? void 0 : snapshots.data) === null || _a === void 0 ? void 0 : _a.filter((snapshot) => {
+        const isMatchedByDate = !stores.snapshotsModal.date ||
+            isSameDayUTC(snapshot.dataStateAtDate, stores.snapshotsModal.date);
+        const isMatchedByPool = !stores.snapshotsModal.pool ||
+            snapshot.pool === stores.snapshotsModal.pool;
+        return isMatchedByDate && isMatchedByPool;
+    });
+    const [state, setState] = React.useState({
+        sortByCreatedDate: 'desc',
+        snapshots: filteredSnapshots !== null && filteredSnapshots !== void 0 ? filteredSnapshots : [],
+    });
+    const handleSortByCreatedDate = () => {
+        const sortByCreatedDate = state.sortByCreatedDate === 'desc' ? 'asc' : 'desc';
+        const sortedSnapshots = [...state.snapshots].sort((a, b) => {
+            if (sortByCreatedDate === 'asc') {
+                return (new Date(a.createdAtDate).getTime() -
+                    new Date(b.createdAtDate).getTime());
+            }
+            else {
+                return (new Date(b.createdAtDate).getTime() -
+                    new Date(a.createdAtDate).getTime());
+            }
+        });
+        setState({
+            ...state,
+            sortByCreatedDate,
+            snapshots: sortedSnapshots,
+        });
+    };
+    if (!snapshots.data)
+        return null;
+    return (_jsx(HorizontalScrollContainer, { children: _jsxs(Table, { children: [_jsx(TableHead, { children: _jsxs(TableRow, { children: [_jsx(TableHeaderCell, {}), _jsx(TableHeaderCell, { children: "Data state time" }), _jsx(TableHeaderCell, { children: _jsxs("div", { className: cn(classes.pointerCursor, classes.verticalCentered), onClick: handleSortByCreatedDate, children: ["Created", _jsx(ArrowDropDownIcon, { className: cn(state.sortByCreatedDate === 'asc' && classes.sortIconUp, classes.sortIcon) })] }) }), _jsx(TableHeaderCell, { children: "Pool" }), _jsx(TableHeaderCell, { children: "Number of clones" }), _jsx(TableHeaderCell, { children: "Logical Size" }), _jsx(TableHeaderCell, { children: "Physical Size" })] }) }), _jsx(TableBody, { children: (_b = state.snapshots) === null || _b === void 0 ? void 0 : _b.map((snapshot) => {
+                        var _a, _b;
+                        const snapshotPageId = generateSnapshotPageId(snapshot.id);
+                        return (_jsxs(TableRow, { hover: true, onClick: () => snapshotPageId &&
+                                history.push(`/instance/snapshots/${snapshotPageId}`), className: classes.pointerCursor, children: [_jsx(TableBodyCellMenu, { actions: [
+                                        {
+                                            name: 'Copy snapshot ID',
+                                            onClick: () => copy(snapshot.id),
+                                        },
+                                        {
+                                            name: 'Show related clones',
+                                            onClick: () => stores.clonesModal.openModal({
+                                                snapshotId: snapshot.id,
+                                            }),
+                                        },
+                                        {
+                                            name: 'Delete snapshot',
+                                            onClick: () => setSnapshotModal({
+                                                isOpen: true,
+                                                snapshotId: snapshot.id,
+                                            }),
+                                        },
+                                    ] }), _jsxs(TableBodyCell, { children: [snapshot.dataStateAt, " (", isValidDate(snapshot.dataStateAtDate)
+                                            ? formatDistanceToNowStrict(snapshot.dataStateAtDate, {
+                                                addSuffix: true,
+                                            })
+                                            : '-', ")"] }), _jsxs(TableBodyCell, { children: [snapshot.createdAt, " (", isValidDate(snapshot.createdAtDate)
+                                            ? formatDistanceToNowStrict(snapshot.createdAtDate, {
+                                                addSuffix: true,
+                                            })
+                                            : '-', ")"] }), _jsx(TableBodyCell, { children: (_a = snapshot.pool) !== null && _a !== void 0 ? _a : '-' }), _jsx(TableBodyCell, { children: (_b = snapshot.numClones) !== null && _b !== void 0 ? _b : '-' }), _jsx(TableBodyCell, { children: snapshot.logicalSize
+                                        ? formatBytesIEC(snapshot.logicalSize)
+                                        : '-' }), _jsx(TableBodyCell, { children: snapshot.physicalSize
+                                        ? formatBytesIEC(snapshot.physicalSize)
+                                        : '-' })] }, snapshot.id));
+                    }) }), snapshotModal.isOpen && snapshotModal.snapshotId && (_jsx(DestroySnapshotModal, { isOpen: snapshotModal.isOpen, onClose: () => setSnapshotModal({ isOpen: false, snapshotId: '' }), snapshotId: snapshotModal.snapshotId, instanceId: instanceId, afterSubmitClick: () => { var _a, _b, _c; return (_a = stores.main) === null || _a === void 0 ? void 0 : _a.reload((_c = (_b = stores.main.instance) === null || _b === void 0 ? void 0 : _b.id) !== null && _c !== void 0 ? _c : ''); }, destroySnapshot: stores.main.destroySnapshot }))] }) }));
+});

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+interface SnapshotsProps {
+    instanceId: string;
+}
+export declare const Snapshots: React.FC<SnapshotsProps>;
+export {};

package/pages/Instance/Snapshots/index.js

@@ -0,0 +1,92 @@
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/*--------------------------------------------------------------------------
+ * Copyright (c) 2019-2021, Postgres.ai, Nikolay Samokhvalov nik@postgres.ai
+ * All Rights Reserved. Proprietary and confidential.
+ * Unauthorized copying of this file, via any medium is strictly prohibited
+ *--------------------------------------------------------------------------
+ */
+import { useHistory } from 'react-router';
+import { observer } from 'mobx-react-lite';
+import { makeStyles } from '@material-ui/core';
+import { useStores, useHost } from '@postgres.ai/shared/pages/Instance/context';
+import { SnapshotsList } from '@postgres.ai/shared/pages/Instance/Snapshots/components/SnapshotsList';
+import { SectionTitle } from '@postgres.ai/shared/components/SectionTitle';
+import { Spinner } from '@postgres.ai/shared/components/Spinner';
+import { ErrorStub } from '@postgres.ai/shared/components/ErrorStub';
+import { Button } from '@postgres.ai/shared/components/Button2';
+import { Tooltip } from '@postgres.ai/shared/components/Tooltip';
+import { InfoIcon } from '@postgres.ai/shared/icons/Info';
+import { useEffect, useMemo, useState } from 'react';
+import { SnapshotHeader } from './components/SnapshotHeader';
+const useStyles = makeStyles({
+    sectionTitle: {
+        borderBottom: 0,
+    },
+    marginTop: {
+        marginTop: '16px',
+    },
+    infoIcon: {
+        height: '12px',
+        width: '12px',
+        marginLeft: '8px',
+        color: '#808080',
+    },
+    spinner: {
+        position: 'absolute',
+        right: '50%',
+        transform: 'translate(-50%, -50%)',
+    },
+}, { index: 1 });
+export const Snapshots = observer(({ instanceId }) => {
+    var _a;
+    const host = useHost();
+    const stores = useStores();
+    const classes = useStyles();
+    const history = useHistory();
+    const { getBranches, instance, snapshots } = stores.main;
+    const [messageFilter, setMessageFilter] = useState('');
+    const [branches, setBranches] = useState(null);
+    const [selectedBranch, setSelectedBranch] = useState('All branches');
+    const [isLoadingBranches, setIsLoadingBranches] = useState(true);
+    const filteredSnapshots = useMemo(() => {
+        if (!snapshots.data)
+            return [];
+        if (!messageFilter.trim()) {
+            return snapshots.data;
+        }
+        return snapshots.data.filter((snapshot) => { var _a, _b; return (_b = (_a = snapshot === null || snapshot === void 0 ? void 0 : snapshot.message) === null || _a === void 0 ? void 0 : _a.toLowerCase()) === null || _b === void 0 ? void 0 : _b.includes(messageFilter.toLowerCase()); });
+    }, [snapshots.data, messageFilter]);
+    const clonesList = ((_a = instance === null || instance === void 0 ? void 0 : instance.state) === null || _a === void 0 ? void 0 : _a.cloning.clones) || [];
+    const isEmpty = !(filteredSnapshots === null || filteredSnapshots === void 0 ? void 0 : filteredSnapshots.length);
+    const hasClones = Boolean(clonesList === null || clonesList === void 0 ? void 0 : clonesList.length);
+    const goToSnapshotAddPage = () => history.push(host.routes.createSnapshot());
+    const snapshotPagePath = (snapshotId) => host.routes.snapshot(snapshotId);
+    useEffect(() => {
+        const fetchInitialData = async () => {
+            var _a;
+            try {
+                setIsLoadingBranches(true);
+                const branches = await getBranches(instanceId);
+                const branchNames = (_a = branches === null || branches === void 0 ? void 0 : branches.map(({ name }) => name)) !== null && _a !== void 0 ? _a : [];
+                setBranches(['All branches', ...branchNames]);
+            }
+            catch (error) {
+                console.error('Error fetching initial data:', error);
+            }
+            finally {
+                setIsLoadingBranches(false);
+            }
+        };
+        fetchInitialData();
+    }, []);
+    useEffect(() => {
+        if (selectedBranch) {
+            stores.main.reloadSnapshots(selectedBranch === 'All branches' ? '' : selectedBranch);
+        }
+    }, [selectedBranch]);
+    if (!instance && !snapshots.isLoading)
+        return _jsx(_Fragment, {});
+    if (snapshots === null || snapshots === void 0 ? void 0 : snapshots.error)
+        return _jsx(ErrorStub, { message: snapshots === null || snapshots === void 0 ? void 0 : snapshots.error });
+    return (_jsx("div", { className: classes.marginTop, children: snapshots.isLoading || isLoadingBranches ? (_jsx(Spinner, { size: "lg", className: classes.spinner })) : (_jsxs(_Fragment, { children: [_jsx(SectionTitle, { level: 2, tag: "h2", text: `Snapshots (${(filteredSnapshots === null || filteredSnapshots === void 0 ? void 0 : filteredSnapshots.length) || 0})`, className: classes.sectionTitle, rightContent: _jsxs(_Fragment, { children: [_jsx(Button, { theme: "primary", onClick: goToSnapshotAddPage, isDisabled: !hasClones, children: "Create snapshot" }), !hasClones && (_jsx(Tooltip, { content: "No clones", children: _jsx("div", { style: { display: 'flex' }, children: _jsx(InfoIcon, { className: classes.infoIcon }) }) }))] }) }), _jsx(SnapshotHeader, { branches: branches, selectedBranch: selectedBranch, setMessageFilter: setMessageFilter, setSelectedBranch: setSelectedBranch }), !isEmpty ? (_jsx(SnapshotsList, { routes: { snapshot: snapshotPagePath }, instanceId: instanceId, filteredSnapshots: filteredSnapshots })) : (_jsx("p", { className: classes.marginTop, children: messageFilter.length || selectedBranch ? (_jsx("span", { children: "No active snapshots found. Try removing the filter and checking again" })) : (_jsx("span", { children: " This instance has no active snapshots" })) }))] })) }));
+});

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

@@ -0,0 +1,16 @@
+import { Snapshot } from '@postgres.ai/shared/types/api/entities/snapshot';
+export declare const generateSnapshotPageId: (id: string) => string | null;
+export declare const groupSnapshotsByCreatedAtDate: (snapshots: Snapshot[]) => {
+    createdAtDate: Date;
+    dataStateAtDate: Date;
+    numClones: string | number;
+    clones: string[];
+    createdAt: string;
+    dataStateAt: string;
+    id: string;
+    pool: string;
+    physicalSize: number;
+    logicalSize: number;
+    message: string;
+    branch: string;
+}[][];

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

@@ -0,0 +1,30 @@
+import { isSameDayUTC } from '@postgres.ai/shared/utils/date';
+export const generateSnapshotPageId = (id) => {
+    if (!id.includes('@'))
+        return null;
+    const snapshotIdPart = id.split('@')[1];
+    return snapshotIdPart.startsWith('snapshot_')
+        ? snapshotIdPart.substring(9)
+        : snapshotIdPart;
+};
+export const groupSnapshotsByCreatedAtDate = (snapshots) => {
+    const groups = [];
+    snapshots.forEach((snapshot) => {
+        let grouped = false;
+        for (const group of groups) {
+            const groupDate = new Date(group[0].createdAtDate);
+            if (isSameDayUTC(snapshot.createdAtDate, groupDate)) {
+                group.push(snapshot);
+                grouped = true;
+                break;
+            }
+        }
+        if (!grouped) {
+            groups.push([snapshot]);
+        }
+    });
+    groups.sort((a, b) => {
+        return b[0].createdAtDate.getTime() - a[0].createdAtDate.getTime();
+    });
+    return groups;
+};

package/pages/Instance/SnapshotsModal/index.js

@@ -18,7 +18,7 @@ import { formatBytesIEC } from '@postgres.ai/shared/utils/units';
 import { isSameDayUTC } from '@postgres.ai/shared/utils/date';
 import { Tags } from '@postgres.ai/shared/pages/Instance/components/Tags';
 import { ModalReloadButton } from '@postgres.ai/shared/pages/Instance/components/ModalReloadButton';
-import { getTags } from './utils';
+import { getTags } from '../Snapshots/components/SnapshotsModal/utils';
 const useStyles = makeStyles({
     root: {
         fontSize: '14px',

package/pages/Instance/Tabs/PlatformTabs.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+declare type Props = {
+    value: number;
+    handleChange: (event: React.ChangeEvent<{}>, newValue: number) => void;
+    hasLogs: boolean;
+    isPlatform?: boolean;
+    hideInstanceTabs?: boolean;
+};
+export declare const PlatformTabs: ({ value, handleChange, hasLogs, hideInstanceTabs, }: Props) => JSX.Element;
+export {};

package/pages/Instance/Tabs/PlatformTabs.js

@@ -0,0 +1,51 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Link, useParams } from 'react-router-dom';
+import { Tab as TabComponent, Tabs as TabsComponent } from '@material-ui/core';
+import { TABS_INDEX } from '.';
+import { useTabsStyles } from './styles';
+import { PostgresSQLIcon } from '@postgres.ai/shared/icons/PostgresSQL';
+export const PlatformTabs = ({ value, handleChange, hasLogs, hideInstanceTabs, }) => {
+    const classes = useTabsStyles();
+    const { org, instanceId } = useParams();
+    const tabs = [
+        {
+            label: '👁️ Overview',
+            to: 'overview',
+            value: TABS_INDEX.OVERVIEW,
+        },
+        {
+            label: '🖖 Branches',
+            to: 'branches',
+            value: TABS_INDEX.BRANCHES,
+            hide: hideInstanceTabs,
+        },
+        {
+            label: '⚡ Snapshots',
+            to: 'snapshots',
+            value: TABS_INDEX.SNAPSHOTS,
+            hide: hideInstanceTabs,
+        },
+        {
+            label: (_jsxs("div", { className: classes.flexRow, children: [_jsx(PostgresSQLIcon, {}), " Clones"] })),
+            to: 'clones',
+            value: TABS_INDEX.CLONES,
+            hide: hideInstanceTabs,
+        },
+        {
+            label: '📓 Logs',
+            to: 'logs',
+            value: TABS_INDEX.LOGS,
+            disabled: !hasLogs,
+            hide: hideInstanceTabs,
+        },
+        {
+            label: '🛠️ Configuration',
+            to: 'configuration',
+            value: TABS_INDEX.CONFIGURATION,
+            hide: hideInstanceTabs,
+        },
+    ];
+    return (_jsx(TabsComponent, { value: value, onChange: handleChange, classes: { root: classes.tabsRoot, indicator: classes.tabsIndicator }, children: tabs.map(({ label, to, value, hide, disabled }) => (_jsx(Link, { to: `/${org}/instances/${instanceId}/${to}`, children: _jsx(TabComponent, { label: label, value: value, disabled: disabled, classes: {
+                    root: hide ? classes.tabHidden : classes.tabRoot,
+                }, onClick: (event) => handleChange(event, value) }) }, value))) }));
+};

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

@@ -1,9 +1,26 @@
 import React from 'react';
-declare type Props = {
+export declare const TABS_INDEX: {
+    OVERVIEW: number;
+    BRANCHES: number;
+    SNAPSHOTS: number;
+    CLONES: number;
+    LOGS: number;
+    CONFIGURATION: number;
+};
+export interface TabsProps {
     value: number;
     handleChange: (event: React.ChangeEvent<{}>, newValue: number) => void;
     hasLogs: boolean;
     isPlatform?: boolean;
+    hideInstanceTabs?: boolean;
+}
+export declare const Tabs: ({ value, handleChange, hasLogs, hideInstanceTabs, }: TabsProps) => JSX.Element;
+declare type InstanceTabProps = {
+    tab: number;
+    isPlatform?: boolean;
+    onTabChange?: (tabID: number) => void;
+    instanceId: string;
+    hasLogs: boolean;
 };
-export declare const Tabs: (props: Props) => JSX.Element;
+export declare const InstanceTabs: (props: InstanceTabProps) => JSX.Element;
 export {};

package/pages/Instance/Tabs/index.js

@@ -1,40 +1,75 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { makeStyles, Tab as TabComponent, Tabs as TabsComponent, } from '@material-ui/core';
-import { colors } from '@postgres.ai/shared/styles/colors';
-const useStyles = makeStyles({
-    tabsRoot: {
-        minHeight: 0,
-        marginTop: '-8px',
-    },
-    tabsIndicator: {
-        height: '3px',
-    },
-    tabRoot: {
-        fontWeight: 400,
-        minWidth: 0,
-        minHeight: 0,
-        padding: '6px 16px',
-        borderBottom: `3px solid ${colors.consoleStroke}`,
-        '& + $tabRoot': {
-            marginLeft: '10px',
+import { Link } from 'react-router-dom';
+import { Tab as TabComponent, Tabs as TabsComponent } from '@material-ui/core';
+import { PostgresSQLIcon } from '@postgres.ai/shared/icons/PostgresSQL';
+import { useTabsStyles } from './styles';
+import { PlatformTabs } from "./PlatformTabs";
+import { useCreatedStores } from "../useCreatedStores";
+export const TABS_INDEX = {
+    OVERVIEW: 0,
+    BRANCHES: 1,
+    SNAPSHOTS: 2,
+    CLONES: 3,
+    LOGS: 4,
+    CONFIGURATION: 5,
+};
+export const Tabs = ({ value, handleChange, hasLogs, hideInstanceTabs, }) => {
+    const classes = useTabsStyles();
+    const tabData = [
+        { label: '👁️ Overview', to: '/instance', value: TABS_INDEX.OVERVIEW },
+        {
+            label: '🖖 Branches',
+            to: '/instance/branches',
+            value: TABS_INDEX.BRANCHES,
+            hide: hideInstanceTabs,
+        },
+        {
+            label: '⚡ Snapshots',
+            to: '/instance/snapshots',
+            value: TABS_INDEX.SNAPSHOTS,
+            hide: hideInstanceTabs,
+        },
+        {
+            label: (_jsxs("div", { className: classes.flexRow, children: [_jsx(PostgresSQLIcon, {}), " Clones"] })),
+            to: '/instance/clones',
+            value: TABS_INDEX.CLONES,
+            hide: hideInstanceTabs,
         },
-        '&.Mui-disabled': {
-            opacity: 1,
-            color: colors.pgaiDarkGray,
+        {
+            label: '📓 Logs',
+            to: '/instance/logs',
+            value: TABS_INDEX.LOGS,
+            disabled: !hasLogs,
         },
-    },
-    tabHidden: {
-        display: 'none',
-    },
-}, { index: 1 });
-export const Tabs = (props) => {
-    const classes = useStyles();
-    const { value, handleChange, hasLogs } = props;
-    return (_jsxs(TabsComponent, { value: value, onChange: handleChange, classes: { root: classes.tabsRoot, indicator: classes.tabsIndicator }, children: [_jsx(TabComponent, { label: "Overview", classes: {
-                    root: classes.tabRoot,
-                }, value: 0 }), _jsx(TabComponent, { label: "Logs", disabled: !hasLogs, classes: {
-                    root: props.isPlatform ? classes.tabHidden : classes.tabRoot,
-                }, value: 1 }), _jsx(TabComponent, { label: "Configuration", classes: {
-                    root: props.isPlatform ? classes.tabHidden : classes.tabRoot,
-                }, value: 2 })] }));
+        {
+            label: '🛠️ Configuration',
+            to: '/instance/configuration',
+            value: TABS_INDEX.CONFIGURATION,
+            hide: hideInstanceTabs,
+        },
+    ];
+    return (_jsx(TabsComponent, { value: value, onChange: handleChange, classes: { root: classes.tabsRoot, indicator: classes.tabsIndicator }, children: tabData.map(({ label, to, value, hide, disabled }) => (_jsx(Link, { to: to, children: _jsx(TabComponent, { label: label, value: value, disabled: disabled, classes: {
+                    root: hide ? classes.tabHidden : classes.tabRoot,
+                } }) }, value))) }));
+};
+export const InstanceTabs = (props) => {
+    const stores = useCreatedStores({});
+    const { load, } = stores.main;
+    const switchTab = (_, tabID) => {
+        const contentElement = document.getElementById('content-container');
+        if (props.onTabChange) {
+            props.onTabChange(tabID);
+        }
+        if (tabID === 0) {
+            load(props.instanceId);
+        }
+        contentElement === null || contentElement === void 0 ? void 0 : contentElement.scrollTo(0, 0);
+    };
+    const tabProps = {
+        value: props.tab,
+        handleChange: switchTab,
+        hasLogs: Boolean(props.hasLogs),
+        hideInstanceTabs: false,
+    };
+    return props.isPlatform ? _jsx(PlatformTabs, { ...tabProps }) : _jsx(Tabs, { ...tabProps });
 };

package/pages/Instance/Tabs/styles.d.ts

@@ -0,0 +1 @@
+export declare const useTabsStyles: (props?: any) => import("@material-ui/styles").ClassNameMap<"tabsRoot" | "flexRow" | "tabsIndicator" | "tabRoot" | "tabHidden">;

package/pages/Instance/Tabs/styles.js

@@ -0,0 +1,62 @@
+import { makeStyles } from '@material-ui/core';
+import { colors } from '@postgres.ai/shared/styles/colors';
+export const useTabsStyles = makeStyles({
+    tabsRoot: {
+        minHeight: 0,
+        marginTop: '-8px',
+        '& .MuiTabs-fixed': {
+            overflowX: 'auto!important',
+            scrollbarWidth: 'none',
+            '&::-webkit-scrollbar': {
+                display: 'none',
+            },
+            '& div:first-child': {
+                '@media (max-width: 700px)': {
+                    display: 'flex',
+                },
+            },
+        },
+        '& .postgres-logo': {
+            width: '18px',
+            height: '18px',
+        },
+        '& a': {
+            color: colors.black,
+            textDecoration: 'none',
+            '@media (max-width: 700px)': {
+                display: 'flex',
+                width: '100%',
+            },
+        },
+    },
+    flexRow: {
+        display: 'flex',
+        flexDirection: 'row',
+        gap: '5px',
+        width: '100%',
+    },
+    tabsIndicator: {
+        height: '3px',
+    },
+    tabRoot: {
+        fontWeight: 400,
+        minWidth: 0,
+        minHeight: 0,
+        width: '100%',
+        padding: '6px 16px',
+        borderBottom: `3px solid ${colors.consoleStroke}`,
+        '& + $tabRoot': {
+            marginLeft: '10px',
+        },
+        '&.Mui-disabled': {
+            opacity: 1,
+            color: colors.pgaiDarkGray,
+        },
+        '@media (max-width: 700px)': {
+            width: 'max-content',
+        },
+    },
+    tabHidden: {
+        display: 'none',
+    },
+}, { index: 1 });

package/pages/Instance/components/ModalReloadButton/index.js

@@ -18,5 +18,5 @@ const useStyles = makeStyles({
 }, { index: 1 });
 export const ModalReloadButton = (props) => {
     const classes = useStyles();
-    return (_jsx(Button, { onClick: props.onReload, className: classes.content, isLoading: props.isReloading, isDisabled: props.isReloading, children: "Reload info" }));
+    return (_jsx(Button, { onClick: props.onReload, className: classes.content, isLoading: props.isReloading, children: "Reload info" }));
 };

package/pages/Instance/context.d.ts

@@ -4,7 +4,12 @@ export declare type Host = {
     instanceId: string;
     routes: {
         createClone: () => string;
+        createBranch: () => string;
+        createSnapshot: () => string;
         clone: (cloneId: string) => string;
+        branch: (branchId: string) => string;
+        branches: () => string;
+        snapshot: (snapshotId: string) => string;
     };
     api: Api;
     title: string;
@@ -16,6 +21,8 @@ export declare type Host = {
         breadcrumbs: React.ReactNode;
     };
     wsHost?: string;
+    hideInstanceTabs?: boolean;
+    renderCurrentTab?: number;
     isPlatform?: boolean;
     setProjectAlias?: (alias: string) => void;
 };