ydb-embedded-ui 0.1.0 → 1.0.1

package/dist/containers/Tenant/Schema/SchemaNodeActions/SchemaNodeActions.tsx

@@ -0,0 +1,125 @@
+import {useDispatch} from 'react-redux';
+import {useHistory} from 'react-router';
+import cn from 'bem-cn-lite';
+import {DropdownMenu} from '@yandex-cloud/uikit';
+import qs from 'qs';
+
+import {changeUserInput} from '../../../../store/reducers/executeQuery';
+import {setShowPreview} from '../../../../store/reducers/schema';
+import routes, {createHref} from '../../../../routes';
+
+import './SchemaNodeActions.scss';
+import {TenantGeneralTabsIds, TenantTabsGroups} from '../../TenantPages';
+import createToast from '../../../../utils/createToast';
+
+const b = cn('kv-schema-node-actions');
+
+const createTableTemplate = (path: string) => {
+    return `CREATE TABLE \`${path}/my_table\`
+(
+    \`id\` Uint64,
+    \`name\` String,
+    PRIMARY KEY (\`id\`)
+);`;
+};
+
+const alterTableTemplate = (path: string) => {
+    return `ALTER TABLE \`${path}\`
+    ADD COLUMN is_deleted Bool;`;
+};
+const selectQueryTemplate = (path: string) => {
+    return `SELECT \`id\`, \`name\`
+    FROM \`${path}\`
+    ORDER BY \`id\`
+    LIMIT 10;`;
+};
+const upsertQueryTemplate = (path: string) => {
+    return `UPSERT INTO \`${path}\`
+    ( \`id\`, \`name\` )
+VALUES ( );`;
+};
+
+interface SchemaNodeActionsProps {
+    name: string;
+    isTableType: boolean;
+}
+
+function SchemaNodeActions({name, isTableType}: SchemaNodeActionsProps) {
+    const dispatch = useDispatch();
+    const history = useHistory();
+
+    const queryParams = qs.parse(location.search, {
+        ignoreQueryPrefix: true,
+    });
+
+    const onCreateTableClick = () => {
+        dispatch(changeUserInput({input: createTableTemplate(name)}));
+    };
+
+    const onAlterTableClick = () => {
+        dispatch(changeUserInput({input: alterTableTemplate(name)}));
+    };
+
+    const onSelectQueryClick = () => {
+        dispatch(changeUserInput({input: selectQueryTemplate(name)}));
+    };
+
+    const onUpsertQueryClick = () => {
+        dispatch(changeUserInput({input: upsertQueryTemplate(name)}));
+    };
+
+    const onCopyPathClick = () => {
+        navigator.clipboard
+            .writeText(name)
+            .then(() => {
+                createToast({
+                    name: 'Copied',
+                    title: 'Path was copied to clipboard successfully',
+                    type: 'success',
+                });
+            })
+            .catch(() => {
+                createToast({
+                    name: 'Not copied',
+                    title: 'Path was not copied to clipboard successfully',
+                    type: 'error',
+                });
+            });
+    };
+
+    const onOpenPreviewClick = () => {
+        dispatch(setShowPreview(true));
+        history.push(
+            createHref(routes.tenant, undefined, {
+                ...queryParams,
+                [TenantTabsGroups.general]: TenantGeneralTabsIds.query,
+            }),
+        );
+    };
+
+    const copyItem = {text: 'Copy path', action: onCopyPathClick};
+
+    const tableItems = [
+        [{text: 'Open preview', action: onOpenPreviewClick}, copyItem],
+        [
+            {text: 'Alter table', action: onAlterTableClick},
+            {text: 'Select query', action: onSelectQueryClick},
+            {text: 'Upsert query', action: onUpsertQueryClick},
+        ],
+    ];
+
+    const catalogItems = [[copyItem], [{text: 'Create table', action: onCreateTableClick}]];
+
+    const items = isTableType ? tableItems : catalogItems;
+
+    return (
+        <DropdownMenu
+            items={items}
+            switcherWrapperClassName={b()}
+            popupClassName={b('popup')}
+            popupPlacement={['bottom-end']}
+        />
+    );
+}
+
+export default SchemaNodeActions;

package/dist/containers/Tenant/Schema/SchemaTree/SchemaTree.js

@@ -33,14 +33,14 @@ class SchemaTree extends React.Component {
 
     renderLoader() {
         return (
-            <div className="loader">
-                <Loader size="l" />
+            <div className={b('loader')}>
+                <Loader size="m" />
             </div>
         );
     }
 
     removeArrow = () => {
-        // А как еще эту задачу решить, кроме как лезть в DOM?
+        // And how else to solve this problem, except to get into the DOM?
         const nodeWithArrow =
             // eslint-disable-next-line react/no-find-dom-node
             ReactDOM.findDOMNode(this)?.parentNode?.parentNode?.querySelector('.tree-view_arrow');
@@ -75,12 +75,13 @@ class SchemaTree extends React.Component {
                 </div>
             );
         } else {
-            return this.renderLoader();
+            return null;
         }
     };
 
     render() {
         const {loading, wasLoaded, error, currentSchema: schema} = this.props;
+
         if (loading && !wasLoaded) {
             return this.renderLoader();
         } else if (

package/dist/containers/Tenant/Schema/SchemaTree/SchemaTree.scss

@@ -2,12 +2,16 @@
 
 .schema {
     .tree-view_item {
-        padding: 2px 0;
         margin: 0;
+        padding: 2px 0;
     }
 
     .tree-view_children {
-        padding-left: 15px;
         margin: 0;
+        padding-left: 15px;
+    }
+    &__loader {
+        display: flex;
+        justify-content: center;
     }
 }

package/dist/containers/Tenant/Schema/SchemaViewer/SchemaViewer.js

@@ -1,19 +1,29 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
-import './SchemaViewer.scss';
 
 import find from 'lodash/find';
 
 import Icon from '../../../../components/Icon/Icon';
+import DataTable from '@yandex-cloud/react-data-table';
+import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
+import './SchemaViewer.scss';
 
 const b = cn('schema-viewer');
 
+const SchemaViewerColumns = {
+    id: 'Id',
+    name: 'Name',
+    key: 'Key',
+    type: 'Type',
+};
+
 class SchemaViewer extends React.Component {
     static propTypes = {
         data: PropTypes.arrayOf(PropTypes.object),
     };
-    render() {
+
+    renderTable() {
         const {data = {}} = this.props;
         const keyColumnsIds = data.KeyColumnIds ?? [];
         const keyColumns = keyColumnsIds.map((key) => {
@@ -22,42 +32,51 @@ class SchemaViewer extends React.Component {
         });
         const restColumns = data.Columns?.filter((item) => !keyColumnsIds.includes(item.Id)) ?? [];
 
-        const columns = [...keyColumns, ...restColumns];
+        const columns = [
+            {
+                name: SchemaViewerColumns.id,
+                width: 40,
+            },
+            {
+                name: SchemaViewerColumns.key,
+                width: 40,
+                sortAccessor: (row) => {
+                    return keyColumnsIds.includes(row.Id) ? 1 : 0;
+                },
+                render: ({row}) => {
+                    return keyColumnsIds.includes(row.Id) ? (
+                        <div className={b('key-icon')}>
+                            <Icon name="key" viewBox="0 0 12 7" width={12} height={7} />
+                        </div>
+                    ) : null;
+                },
+            },
+            {
+                name: SchemaViewerColumns.name,
+                width: 100,
+            },
+            {
+                name: SchemaViewerColumns.type,
+                width: 100,
+            },
+        ];
 
+        const tableData = [...keyColumns, ...restColumns];
         return (
-            <div className={b()}>
-                <div className={b('title')}>Schema</div>
-                {columns.length > 0 ? (
-                    <table className={b('table')}>
-                        {columns.map((info, key) => (
-                            <tr key={key} className={b('row')}>
-                                <td>
-                                    {keyColumnsIds.includes(info.Id) && (
-                                        <div className={b('key-icon')}>
-                                            <Icon
-                                                name="key"
-                                                viewBox="0 0 12 7"
-                                                width={12}
-                                                height={7}
-                                            />
-                                        </div>
-                                    )}
-                                </td>
-                                <td className={b('type')}>
-                                    <span>{info.Type}</span>
-                                </td>
-                                <td className={b('name')}>
-                                    <span>{info.Name}</span>
-                                </td>
-                            </tr>
-                        ))}
-                    </table>
-                ) : (
-                    <div>no schema data</div>
-                )}
-            </div>
+            <DataTable
+                theme="yandex-cloud"
+                data={tableData}
+                columns={columns}
+                settings={DEFAULT_TABLE_SETTINGS}
+                dynamicRender={true}
+                initialSortOrder={{columnId: SchemaViewerColumns.key, order: DataTable.DESCENDING}}
+            />
         );
     }
+
+    render() {
+        return <div className={b()}>{this.renderTable()}</div>;
+    }
 }
 
 export default SchemaViewer;

package/dist/containers/Tenant/Schema/SchemaViewer/SchemaViewer.scss

@@ -1,28 +1,7 @@
 .schema-viewer {
-    &__title {
-        font-weight: 500;
-    }
-    &__row {
-        position: relative;
-        margin-bottom: 5px;
-    }
+    padding: 0px 12px;
     &__key-icon {
         display: flex;
         align-items: center;
     }
-    &__table {
-        background: none;
-        text-align: left;
-        margin-top: -6px;
-
-        td {
-            padding: 5px 2px;
-        }
-    }
-    &__type {
-        color: var(--yc-color-text-secondary);
-    }
-    &__name {
-        padding-left: 10px !important;
-    }
 }

package/dist/containers/Tenant/Tenant.scss

@@ -1,26 +1,21 @@
 @import '../../styles/mixins.scss';
 
 .tenant-page {
-    overflow: auto;
+    overflow: hidden;
 
     font-size: var(--yc-text-body2-font-size);
     line-height: var(--yc-text-body2-line-height);
+    @include flex-container();
 
     .yc-tabs {
         overflow: initial;
     }
 
-    &__tab-label {
-        display: flex;
-        align-items: center;
-        gap: 5px;
-    }
-
     &__loader {
         display: flex;
-        align-items: center;
         flex: 1 1 auto;
         justify-content: center;
+        align-items: center;
     }
 
     &__content {
@@ -32,32 +27,9 @@
         overflow: auto;
 
         height: 100%;
-
         padding-left: 20px;
     }
 
-    &__tabs {
-        padding: 0 15px;
-
-        &_schema {
-            overflow: auto;
-
-            height: 100%;
-            padding: 0;
-            @include flex-container();
-        }
-    }
-
-    &__tab {
-        margin-right: 40px;
-
-        text-decoration: none;
-
-        &:first-letter {
-            text-transform: uppercase;
-        }
-    }
-
     &__row {
         display: flex;
         align-items: flex-start;
@@ -90,5 +62,4 @@
         border-left: 1px solid rgba(0, 0, 0, 0.07);
         @include flex-container();
     }
-    @include flex-container();
 }

package/dist/containers/Tenant/Tenant.tsx

@@ -0,0 +1,161 @@
+import {useEffect, useMemo, useReducer} from 'react';
+import {useDispatch, useSelector} from 'react-redux';
+import cn from 'bem-cn-lite';
+import {useLocation} from 'react-router';
+import qs from 'qs';
+
+import ObjectSummary from './ObjectSummary/ObjectSummary';
+import {setHeader} from '../../store/reducers/header';
+import ObjectGeneral from './ObjectGeneral/ObjectGeneral';
+//@ts-ignore
+import SplitPane from '../../components/SplitPane';
+//@ts-ignore
+import {DEFAULT_IS_TENANT_SUMMARY_COLLAPSED, DEFAULT_SIZE_TENANT_KEY} from '../../utils/constants';
+//@ts-ignore
+import {disableAutorefresh, getSchema} from '../../store/reducers/schema';
+//@ts-ignore
+import {getSchemaAcl} from '../../store/reducers/schemaAcl';
+import {
+    PaneVisibilityActionTypes,
+    paneVisibilityToggleReducerCreator,
+} from './utils/paneVisibilityToggleHelpers';
+//@ts-ignore
+import {getTenantInfo, clearTenant} from '../../store/reducers/tenant';
+import routes, {CLUSTER_PAGES, createHref} from '../../routes';
+
+import './Tenant.scss';
+
+const b = cn('tenant-page');
+
+export const TABLE_TYPE = 'Table';
+export const OLAP_TABLE_TYPE = 'OlapTable';
+export const OLAP_STORE_TYPE = 'OlapStore';
+
+export function calcEntityType(currentPathType?: string) {
+    return currentPathType && currentPathType.replace('EPathType', '');
+}
+
+export function isTableType(currentPathType?: string) {
+    const type = calcEntityType(currentPathType);
+
+    if (type === TABLE_TYPE || type === OLAP_TABLE_TYPE) {
+        return true;
+    }
+    return false;
+}
+
+const getInitialIsSummaryCollapsed = () => {
+    return Boolean(localStorage.getItem(DEFAULT_IS_TENANT_SUMMARY_COLLAPSED));
+};
+
+const initialTenantSummaryState = {
+    triggerExpand: false,
+    triggerCollapse: false,
+    collapsed: getInitialIsSummaryCollapsed(),
+};
+
+interface TenantProps {
+    additionalTenantInfo: any;
+    additionalNodesInfo: any;
+}
+
+function Tenant(props: TenantProps) {
+    const [summaryVisibilityState, dispatchSummaryVisibilityAction] = useReducer(
+        paneVisibilityToggleReducerCreator(DEFAULT_IS_TENANT_SUMMARY_COLLAPSED),
+        initialTenantSummaryState,
+    );
+
+    const {currentSchemaPath, currentSchema: currentItem = {}} = useSelector(
+        (state: any) => state.schema,
+    );
+
+    const dispatch = useDispatch();
+
+    const location = useLocation();
+
+    const queryParams = qs.parse(location.search, {
+        ignoreQueryPrefix: true,
+    });
+
+    const {name} = queryParams;
+    const tenantName = name as string;
+
+    useEffect(() => {
+        const schemaPath = currentSchemaPath || tenantName;
+        dispatch(getSchema({path: tenantName}));
+        dispatch(getSchema({path: schemaPath}));
+        dispatch(getSchemaAcl({path: schemaPath}));
+    }, [tenantName, currentSchemaPath, dispatch]);
+
+    useEffect(() => {
+        dispatch(disableAutorefresh());
+    }, [currentSchemaPath, tenantName]);
+
+    useEffect(() => {
+        if (tenantName) {
+            dispatch(getTenantInfo({path: tenantName}));
+            dispatch(
+                setHeader([
+                    {
+                        text: CLUSTER_PAGES.tenants.title,
+                        link: createHref(routes.cluster, {activeTab: CLUSTER_PAGES.tenants.id}),
+                    },
+                    {
+                        text: tenantName.startsWith('/') ? tenantName.slice(1) : tenantName,
+                        link: createHref(routes.tenant, undefined, {
+                            name: tenantName,
+                        }),
+                    },
+                ]),
+            );
+        }
+        return () => {
+            dispatch(clearTenant());
+        };
+    }, [tenantName, dispatch]);
+
+    const currentPathType = currentItem.PathDescription?.Self?.PathType;
+
+    const entityType = useMemo(() => {
+        return calcEntityType(currentPathType);
+    }, [currentPathType]);
+
+    const onCollapseSummaryHandler = () => {
+        dispatchSummaryVisibilityAction(PaneVisibilityActionTypes.triggerCollapse);
+    };
+    const onExpandSummaryHandler = () => {
+        dispatchSummaryVisibilityAction(PaneVisibilityActionTypes.triggerExpand);
+    };
+
+    const onSplitStartDrugAdditional = () => {
+        dispatchSummaryVisibilityAction(PaneVisibilityActionTypes.clear);
+    };
+
+    return (
+        <div className={b()}>
+            <SplitPane
+                defaultSizePaneKey={DEFAULT_SIZE_TENANT_KEY}
+                defaultSizes={[25, 75]}
+                triggerCollapse={summaryVisibilityState.triggerCollapse}
+                triggerExpand={summaryVisibilityState.triggerExpand}
+                minSize={[36, 200]}
+                onSplitStartDrugAdditional={onSplitStartDrugAdditional}
+            >
+                <ObjectSummary
+                    type={entityType as string}
+                    onCollapseSummary={onCollapseSummaryHandler}
+                    onExpandSummary={onExpandSummaryHandler}
+                    isCollapsed={summaryVisibilityState.collapsed}
+                    additionalTenantInfo={props.additionalTenantInfo}
+                />
+                <ObjectGeneral
+                    type={entityType as string}
+                    additionalTenantInfo={props.additionalTenantInfo}
+                    additionalNodesInfo={props.additionalNodesInfo}
+                />
+            </SplitPane>
+        </div>
+    );
+}
+
+export default Tenant;

package/dist/containers/Tenant/TenantPages.tsx

@@ -0,0 +1,48 @@
+//@ts-ignore
+import Icon from '../../components/Icon/Icon';
+
+export enum TenantGeneralTabsIds {
+    query = 'query',
+    diagnostics = 'diagnostics',
+}
+export enum TenantInfoTabsIds {
+    overview = 'overview',
+    acl = 'acl',
+    schema = 'schema',
+}
+
+export enum TenantTabsGroups {
+    info = 'info',
+    general = 'general',
+    generalTab = 'generalTab'
+}
+
+export const TENANT_GENERAL_TABS = [
+    {
+        id: TenantGeneralTabsIds.query,
+        title: 'Query',
+        icon: <Icon name="query" viewBox="0 0 16 16" />,
+    },
+    {
+        id: TenantGeneralTabsIds.diagnostics,
+        title: 'Diagnostics',
+        icon: <Icon name="diagnostics" viewBox="0 0 17 16" />,
+    },
+];
+export const TENANT_INFO_TABS = [
+    {
+        id: TenantInfoTabsIds.overview,
+        title: 'Overview',
+    },
+    {
+        id: TenantInfoTabsIds.acl,
+        title: 'ACL',
+    },
+];
+
+export const TENANT_SCHEMA_TAB = [
+    {
+        id: TenantInfoTabsIds.schema,
+        title: 'Schema',
+    },
+];

package/dist/containers/Tenant/utils/ToggleButton.scss

@@ -0,0 +1,26 @@
+.kv-pane-visibility-button {
+    &_hidden {
+        display: none;
+    }
+
+    &_bottom {
+        transform: rotate(180deg);
+    }
+
+    &_bottom.rotate {
+        transform: rotate(0);
+    }
+    &_left {
+        transform: rotate(-90deg);
+    }
+
+    &_left.rotate {
+        transform: rotate(90deg);
+    }
+    &_top {
+    }
+
+    &_top.rotate {
+        transform: rotate(180deg);
+    }
+}