ydb-embedded-ui 0.1.0 → 0.2.0

package/dist/containers/Tenant/ObjectGeneral/ObjectGeneral.tsx

@@ -0,0 +1,104 @@
+import {Link} from 'react-router-dom';
+import cn from 'bem-cn-lite';
+import {useLocation} from 'react-router';
+import qs from 'qs';
+import _ from 'lodash';
+
+import {Tabs, useThemeValue} from '@yandex-cloud/uikit';
+//@ts-ignore
+import QueryEditor from '../QueryEditor/QueryEditor';
+import Diagnostics from '../Diagnostics/Diagnostics';
+
+import {TenantGeneralTabsIds, TenantTabsGroups, TENANT_GENERAL_TABS} from '../TenantPages';
+import routes, {createHref} from '../../../routes';
+
+import './ObjectGeneral.scss';
+
+const b = cn('object-general');
+
+interface ObjectGeneralProps {
+    type: string;
+    additionalTenantInfo?: any;
+    additionalNodesInfo?: any;
+}
+
+function ObjectGeneral(props: ObjectGeneralProps) {
+    const location = useLocation();
+
+    const theme = useThemeValue();
+
+    const queryParams = qs.parse(location.search, {
+        ignoreQueryPrefix: true,
+    });
+
+    const {name: tenantName, general: generalTab} = queryParams;
+
+    const renderTabs = () => {
+        const pages = TENANT_GENERAL_TABS.map((page) => {
+            return {
+                ...page,
+                title: (
+                    <div className={b('tab-label')}>
+                        {page.icon}
+                        {page.title}
+                    </div>
+                ),
+            };
+        });
+        return (
+            <div className={b('tabs')}>
+                <Tabs
+                    items={pages}
+                    activeTab={generalTab as string}
+                    wrapTo={({id}, node) => {
+                        const path = createHref(routes.tenant, undefined, {
+                            ...queryParams,
+                            name: tenantName as string,
+                            [TenantTabsGroups.general]: id,
+                        });
+                        return (
+                            <Link to={path} key={id} className={b('tab')}>
+                                {node}
+                            </Link>
+                        );
+                    }}
+                    allowNotSelected
+                />
+            </div>
+        );
+    };
+
+    const renderTabContent = () => {
+        const {type, additionalTenantInfo, additionalNodesInfo} = props;
+        switch (generalTab) {
+            case TenantGeneralTabsIds.query: {
+                return <QueryEditor path={tenantName as string} theme={theme} type={type} />;
+            }
+            default: {
+                return (
+                    <Diagnostics
+                        type={type}
+                        additionalTenantInfo={additionalTenantInfo}
+                        additionalNodesInfo={additionalNodesInfo}
+                    />
+                );
+            }
+        }
+    };
+
+    const renderContent = () => {
+        if (!tenantName) {
+            return null;
+        }
+        return (
+            <div className={b()}>
+                {renderTabs()}
+                {renderTabContent()}
+            </div>
+        );
+    };
+
+    return renderContent();
+}
+
+export default ObjectGeneral;

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.scss

@@ -0,0 +1,165 @@
+@import '../../../styles/mixins.scss';
+
+.object-summary {
+    position: relative;
+
+    display: flex;
+    overflow: hidden;
+    flex-grow: 1;
+    flex-direction: column;
+
+    width: 100%;
+    height: 100%;
+    max-height: 100%;
+
+    &__overview-wrapper {
+        overflow: auto;
+
+        padding: 0 12px 16px;
+    }
+
+    &_hidden {
+        visibility: hidden;
+    }
+
+    &__action-button {
+        position: absolute;
+        top: 12px;
+        right: 4px;
+
+        background-color: var(--yc-color-base-background);
+        &_hidden {
+            visibility: hidden;
+        }
+    }
+
+    &__loader {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    &__tree {
+        display: flex;
+        overflow: scroll;
+        flex: 0 0 auto;
+        flex-direction: column;
+
+        height: 100%;
+        padding: 0 12px 12px;
+
+        .tree-view_item {
+            margin: 0;
+            padding: 2px 0;
+        }
+
+        & > div > .tree-view {
+            padding-bottom: 15px;
+        }
+    }
+
+    &__tree-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        padding: 12px 12px 8px;
+        @include sticky-top();
+    }
+
+    &__tree-title {
+        font-weight: 600;
+    }
+
+    &__sticky-top {
+        z-index: 5;
+        @include sticky-top();
+    }
+
+    &__tabs {
+        padding: 8px 12px 16px;
+    }
+
+    &__tab {
+        margin-right: 40px;
+
+        text-decoration: none;
+
+        &:first-letter {
+            text-transform: uppercase;
+        }
+    }
+
+    &__info {
+        overflow: hidden;
+    }
+
+    &__info-controls {
+        display: flex;
+        gap: 4px;
+    }
+
+    &__info-action-button {
+        background-color: var(--yc-color-base-background);
+        &_hidden {
+            display: none;
+        }
+    }
+
+    &__rotated90 {
+        transform: rotate(-90deg);
+    }
+    &__rotated180 {
+        transform: rotate(180deg);
+    }
+    &__rotated270 {
+        transform: rotate(90deg);
+    }
+
+    &__info-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+
+        padding: 12px 12px 10px;
+
+        border-bottom: 1px solid var(--yc-color-line-generic);
+    }
+
+    &__info-title {
+        display: flex;
+        overflow: hidden;
+        align-items: center;
+
+        font-weight: 600;
+    }
+
+    &__path-name {
+        overflow: hidden;
+
+        text-overflow: ellipsis;
+    }
+
+    &__entity-type {
+        display: inline-block;
+
+        margin-right: 5px;
+        padding: 3px 8px;
+
+        font-weight: 400;
+        text-transform: lowercase;
+
+        border-radius: 3px;
+        background-color: var(--yc-color-base-generic);
+
+        &_error {
+            padding: 3px 0;
+
+            background-color: transparent;
+        }
+    }
+
+    .yc-button__text {
+        margin: 0 6px;
+    }
+}

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -0,0 +1,310 @@
+import React, {useEffect, useReducer} from 'react';
+import {useDispatch, useSelector} from 'react-redux';
+import {Link} from 'react-router-dom';
+import cn from 'bem-cn-lite';
+import {useHistory, useLocation} from 'react-router';
+import qs from 'qs';
+import _ from 'lodash';
+
+import {Button, HelpTooltip, Loader, Tabs} from '@yandex-cloud/uikit';
+//@ts-ignore
+import SplitPane from '../../../components/SplitPane';
+//@ts-ignore
+import SchemaNode from '../Schema/SchemaNode/SchemaNode';
+//@ts-ignore
+import Acl from '../Acl/Acl';
+//@ts-ignore
+import SchemaViewer from '../Schema/SchemaViewer/SchemaViewer';
+import CopyToClipboard from '../../../components/CopyToClipboard/CopyToClipboard';
+//@ts-ignore
+import InfoViewer from '../../../components/InfoViewer/InfoViewer';
+//@ts-ignore
+import Icon from '../../../components/Icon/Icon';
+
+import {OLAP_TABLE_TYPE, TABLE_TYPE} from '../Tenant';
+
+import {
+    DEFAULT_IS_TENANT_COMMON_INFO_COLLAPSED,
+    DEFAULT_SIZE_TENANT_SUMMARY_KEY,
+    //@ts-ignore
+} from '../../../utils/constants';
+import {
+    TenantGeneralTabsIds,
+    TenantInfoTabsIds,
+    TenantTabsGroups,
+    TENANT_INFO_TABS,
+    TENANT_SCHEMA_TAB,
+} from '../TenantPages';
+import routes, {createHref} from '../../../routes';
+import {
+    PaneVisibilityActionTypes,
+    paneVisibilityToggleReducerCreator,
+    PaneVisibilityToggleButtons,
+} from '../utils/paneVisibilityToggleHelpers';
+//@ts-ignore
+import {setShowPreview} from '../../../store/reducers/schema';
+
+import './ObjectSummary.scss';
+const b = cn('object-summary');
+
+const getInitialIsSummaryCollapsed = () => {
+    return Boolean(localStorage.getItem(DEFAULT_IS_TENANT_COMMON_INFO_COLLAPSED));
+};
+
+const initialTenantCommonInfoState = {
+    triggerExpand: false,
+    triggerCollapse: false,
+    collapsed: getInitialIsSummaryCollapsed(),
+};
+
+function prepareOlapTableSchema(tableSchema: any) {
+    const {Name, Schema = {}} = tableSchema;
+    const {Columns, KeyColumnNames} = Schema;
+    const KeyColumnIds = KeyColumnNames?.map((name: string) => {
+        const column = Columns?.find((el: any) => el.Name === name);
+        return column.Id;
+    });
+
+    return {
+        Columns,
+        KeyColumnNames,
+        Name,
+        KeyColumnIds,
+    };
+}
+
+interface ObjectSummaryProps {
+    type: string;
+    onCollapseSummary: VoidFunction;
+    onExpandSummary: VoidFunction;
+    isCollapsed: boolean;
+    additionalTenantInfo?: any
+}
+
+function ObjectSummary(props: ObjectSummaryProps) {
+    const dispatch = useDispatch();
+    const [commonInfoVisibilityState, dispatchCommonInfoVisibilityState] = useReducer(
+        paneVisibilityToggleReducerCreator(DEFAULT_IS_TENANT_COMMON_INFO_COLLAPSED),
+        initialTenantCommonInfoState,
+    );
+    const {
+        data,
+        currentSchemaPath,
+        currentSchema: currentItem = {},
+        loading: loadingSchema,
+    } = useSelector((state: any) => state.schema);
+
+    const location = useLocation();
+
+    const history = useHistory();
+
+    const queryParams = qs.parse(location.search, {
+        ignoreQueryPrefix: true,
+    });
+
+    const {name: tenantName, info: infoTab} = queryParams;
+    const tenantData = _.get(data[tenantName as string], 'PathDescription.Self');
+
+    const tableSchema =
+        currentItem?.PathDescription?.Table || currentItem?.PathDescription?.OlapTableDescription;
+
+    const schema =
+        props.type === OLAP_TABLE_TYPE ? prepareOlapTableSchema(tableSchema) : tableSchema;
+
+    useEffect(() => {
+        const {type} = props;
+        const isTable = type === TABLE_TYPE || type === OLAP_TABLE_TYPE;
+
+        if (type && !isTable && !TENANT_INFO_TABS.find((el) => el.id === infoTab)) {
+            history.push({
+                pathname: location.pathname,
+                search: qs.stringify({...queryParams, info: TenantInfoTabsIds.overview}),
+            });
+        }
+    }, [props.type]);
+
+    const renderTabs = () => {
+        const {type} = props;
+        const isTable = type === TABLE_TYPE || type === OLAP_TABLE_TYPE;
+        const tabsItems = isTable ? [...TENANT_INFO_TABS, ...TENANT_SCHEMA_TAB] : TENANT_INFO_TABS;
+
+        return (
+            <div className={b('tabs')}>
+                <Tabs
+                    items={tabsItems}
+                    activeTab={infoTab as string}
+                    wrapTo={({id}, node) => {
+                        const path = createHref(routes.tenant, undefined, {
+                            ...queryParams,
+                            name: tenantName as string,
+                            [TenantTabsGroups.info]: id,
+                        });
+                        return (
+                            <Link to={path} key={id} className={b('tab')}>
+                                {node}
+                            </Link>
+                        );
+                    }}
+                    allowNotSelected
+                />
+            </div>
+        );
+    };
+
+    const renderObjectOverview = () => {
+        const startTimeInMilliseconds = tenantData?.CreateStep / 1000;
+        let createTime = 'Unknown';
+        if (startTimeInMilliseconds) {
+            createTime = new Date(startTimeInMilliseconds).toUTCString();
+        }
+        return (
+            <div className={b('overview-wrapper')}>
+                <InfoViewer info={[{label: 'Create time', value: createTime}]} />
+            </div>
+        );
+    };
+
+    const renderTabContent = () => {
+        switch (infoTab) {
+            case TenantInfoTabsIds.acl: {
+                return <Acl additionalTenantInfo={props.additionalTenantInfo}/>;
+            }
+            case TenantInfoTabsIds.schema: {
+                return loadingSchema ? renderLoader() : <SchemaViewer data={schema} />;
+            }
+            default: {
+                return renderObjectOverview();
+            }
+        }
+    };
+
+    const renderLoader = () => {
+        return (
+            <div className={b('loader')}>
+                <Loader size="m" />
+            </div>
+        );
+    };
+
+    const renderTree = () => {
+        return (
+            <div>
+                <div className={b('tree-header')}>
+                    <div className={b('tree-title')}>Navigation</div>
+                </div>
+                <div className={b('tree')}>
+                    {tenantData && <SchemaNode fullPath={tenantName as string} data={tenantData} isRoot />}
+                </div>
+            </div>
+        );
+    };
+
+    const onCollapseInfoHandler = () => {
+        dispatchCommonInfoVisibilityState(PaneVisibilityActionTypes.triggerCollapse);
+    };
+    const onExpandInfoHandler = () => {
+        dispatchCommonInfoVisibilityState(PaneVisibilityActionTypes.triggerExpand);
+    };
+
+    const onSplitStartDrugAdditional = () => {
+        dispatchCommonInfoVisibilityState(PaneVisibilityActionTypes.clear);
+    };
+
+    const onOpenPreview = () => {
+        dispatch(setShowPreview(true));
+        history.push(
+            createHref(routes.tenant, undefined, {
+                ...queryParams,
+                [TenantTabsGroups.general]: TenantGeneralTabsIds.query,
+            }),
+        );
+    };
+
+    const renderCommonInfoControls = () => {
+        const {type} = props;
+        const isTable = type === TABLE_TYPE || type === OLAP_TABLE_TYPE;
+        return (
+            <React.Fragment>
+                {isTable && (
+                    <Button view="flat-secondary" onClick={onOpenPreview} title="Show preview">
+                        <Icon name="tablePreview" viewBox={'0 0 16 16'} height={16} width={16} />
+                    </Button>
+                )}
+                <CopyToClipboard text={currentSchemaPath} title="Copy schema path" />
+                <PaneVisibilityToggleButtons
+                    onCollapse={onCollapseInfoHandler}
+                    onExpand={onExpandInfoHandler}
+                    isCollapsed={commonInfoVisibilityState.collapsed}
+                    initialDirection="bottom"
+                />
+            </React.Fragment>
+        );
+    };
+
+    const renderEntityTypeBadge = () => {
+        const {type} = props;
+        const {Status, Reason} = currentItem;
+
+        let message;
+        if (!type && Status && Reason) {
+            message = `${Status}: ${Reason}`;
+        }
+
+        return props.type ? (
+            <div className={b('entity-type')}>{type}</div>
+        ) : (
+            <div className={b('entity-type', {error: true})}>
+                <HelpTooltip content={message} offset={{left: 0}} />
+            </div>
+        );
+    };
+
+    const renderContent = () => {
+        if (!tenantName) {
+            return null;
+        }
+        return (
+            <div className={b()}>
+                <div className={b({hidden: props.isCollapsed})}>
+                    <SplitPane
+                        direction="vertical"
+                        defaultSizePaneKey={DEFAULT_SIZE_TENANT_SUMMARY_KEY}
+                        onSplitStartDrugAdditional={onSplitStartDrugAdditional}
+                        triggerCollapse={commonInfoVisibilityState.triggerCollapse}
+                        triggerExpand={commonInfoVisibilityState.triggerExpand}
+                        minSize={[200, 52]}
+                        collapsedSizes={[100, 0]}
+                    >
+                        {currentSchemaPath ? renderTree() : renderLoader()}
+                        <div className={b('info')}>
+                            <div className={b('sticky-top')}>
+                                <div className={b('info-header')}>
+                                    <div className={b('info-title')}>
+                                        {renderEntityTypeBadge()}
+                                        <div className={b('path-name')}>{currentSchemaPath}</div>
+                                    </div>
+                                    <div className={b('info-controls')}>
+                                        {renderCommonInfoControls()}
+                                    </div>
+                                </div>
+                                {renderTabs()}
+                            </div>
+                            {renderTabContent()}
+                        </div>
+                    </SplitPane>
+                </div>
+                <PaneVisibilityToggleButtons
+                    onCollapse={props.onCollapseSummary}
+                    onExpand={props.onExpandSummary}
+                    isCollapsed={props.isCollapsed}
+                    initialDirection="left"
+                    className={b('action-button')}
+                />
+            </div>
+        );
+    };
+
+    return renderContent();
+}
+
+export default ObjectSummary;

package/dist/containers/Tenant/Preview/Preview.js

@@ -4,21 +4,26 @@ import {connect} from 'react-redux';
 import cn from 'bem-cn-lite';
 
 import DataTable from '@yandex-cloud/react-data-table';
-import {Loader} from '@yandex-cloud/uikit';
+import {Loader, Button} from '@yandex-cloud/uikit';
+
+import Icon from '../../../components/Icon/Icon';
+import Fullscreen from '../../../components/Fullscreen/Fullscreen';
 
 import {sendQuery, setQueryOptions} from '../../../store/reducers/preview';
 import {showTooltip, hideTooltip} from '../../../store/reducers/tooltip';
 import {prepareQueryResponse} from '../../../utils/index';
 
-import {OLAP_TABLE_TYPE, TABLE_TYPE} from '../Schema/SchemaMain/SchemaMain';
-import {AutoFetcher} from '../../Cluster/Cluster';
+import {OLAP_TABLE_TYPE, TABLE_TYPE} from '../Tenant';
+import {AutoFetcher} from '../../../utils/autofetcher';
+import EnableFullscreenButton from '../../../components/EnableFullscreenButton/EnableFullscreenButton';
+import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
+import {setShowPreview} from '../../../store/reducers/schema';
 
 import './Preview.scss';
 
 const TABLE_SETTINGS = {
-    displayIndices: false,
-    syncHeadOnResize: true,
-    stickyHead: DataTable.MOVING,
+    ...DEFAULT_TABLE_SETTINGS,
+    stripedRows: true,
 };
 
 const b = cn('kv-preview');
@@ -90,6 +95,31 @@ class Preview extends React.Component {
         });
     };
 
+    onClosePreview = () => {
+        this.props.setShowPreview(false);
+    };
+
+    renderHeader = () => {
+        const {currentSchemaPath, error} = this.props;
+        return (
+            <div className={b('header')}>
+                <div className={b('title')}>
+                    Preview <div className={b('table-name')}>{currentSchemaPath}</div>
+                </div>
+                <div className={b('controls-left')}>
+                    <EnableFullscreenButton disabled={Boolean(error)} />
+                    <Button
+                        view="flat-secondary"
+                        onClick={this.onClosePreview}
+                        title="Close preview"
+                    >
+                        <Icon name="close" viewBox={'0 0 16 16'} width={16} height={16} />
+                    </Button>
+                </div>
+            </div>
+        );
+    };
+
     renderTable = () => {
         const {data, showTooltip} = this.props;
 
@@ -116,10 +146,12 @@ class Preview extends React.Component {
     };
 
     render() {
-        const {error, loading, data = [], type, wasLoaded} = this.props;
+        const {error, loading, data = [], type, wasLoaded, isFullscreen} = this.props;
+
+        let message;
 
         if (type !== TABLE_TYPE && type !== OLAP_TABLE_TYPE) {
-            return <div className={b('message-container')}>Not available</div>;
+            message = <div className={b('message-container')}>Not available</div>;
         }
 
         if (loading && !wasLoaded) {
@@ -131,16 +163,19 @@ class Preview extends React.Component {
         }
 
         if (error) {
-            return <div className={b('message-container')}>{error.data || error}</div>;
+            message = <div className={b('message-container')}>{error.data || error}</div>;
         }
 
         if (!loading && data.length === 0) {
-            return <div className={b('message-container')}>Table is empty</div>;
+            message = <div className={b('message-container')}>Table is empty</div>;
         }
 
+        const content = message ?? <div className={b('result')}>{this.renderTable()}</div>;
+
         return (
             <div className={b()}>
-                <div className={b('result')}>{this.renderTable()}</div>
+                {this.renderHeader()}
+                {isFullscreen ? <Fullscreen>{content}</Fullscreen> : content}
             </div>
         );
     }
@@ -148,7 +183,7 @@ class Preview extends React.Component {
 
 const mapStateToProps = (state) => {
     const {data = [], loading, error, wasLoaded} = state.preview;
-    const {autorefresh} = state.schema;
+    const {autorefresh, currentSchemaPath} = state.schema;
 
     return {
         data,
@@ -156,6 +191,8 @@ const mapStateToProps = (state) => {
         error,
         autorefresh,
         wasLoaded,
+        currentSchemaPath,
+        isFullscreen: state.fullscreen,
     };
 };
 
@@ -164,6 +201,7 @@ const mapDispatchToProps = {
     showTooltip,
     hideTooltip,
     setQueryOptions,
+    setShowPreview,
 };
 
 export default connect(mapStateToProps, mapDispatchToProps)(Preview);