ydb-embedded-ui 6.6.1 → 6.8.0

package/dist/src/containers/Storage/Storage.js

@@ -11,7 +11,7 @@ import { filterGroups, filterNodes, getUsageFilterOptions, } from '../../store/r
 import { storageApi } from '../../store/reducers/storage/storage';
 import { storageTypeSchema, visibleEntitiesSchema } from '../../store/reducers/storage/types';
 import { DEFAULT_POLLING_INTERVAL, DEFAULT_TABLE_SETTINGS } from '../../utils/constants';
-import { useNodesRequestParams, useStorageRequestParams, useTableSort, useTypedSelector, } from '../../utils/hooks';
+import { useAutoRefreshInterval, useNodesRequestParams, useStorageRequestParams, useTableSort, useTypedSelector, } from '../../utils/hooks';
 import { NodesUptimeFilterValues, nodesUptimeFilterValuesSchema } from '../../utils/nodes';
 import { StorageControls } from './StorageControls/StorageControls';
 import { StorageGroups } from './StorageGroups/StorageGroups';
@@ -33,7 +33,7 @@ const UsageFilterParam = withDefault({
 }, []);
 export const Storage = ({ additionalNodesProps, tenant, nodeId }) => {
     var _a;
-    const { autorefresh } = useTypedSelector((state) => state.schema);
+    const [autorefresh] = useAutoRefreshInterval();
     const [queryParams, setQueryParams] = useQueryParams({
         type: StringParam,
         visible: StringParam,

package/dist/src/containers/Storage/StorageGroups/getStorageGroupsColumns.js

@@ -63,7 +63,8 @@ const erasureColumn = {
 const degradedColumn = {
     name: GROUPS_COLUMNS_IDS.Degraded,
     header: 'Degraded',
-    width: 100,
+    width: 110,
+    resizeMinWidth: 110,
     render: ({ row }) => row.Degraded ? (_jsxs(Label, { theme: getDegradedSeverity(row), children: ["Degraded: ", row.Degraded] })) : ('-'),
     align: DataTable.LEFT,
     defaultOrder: DataTable.DESCENDING,
@@ -71,8 +72,8 @@ const degradedColumn = {
 const usageColumn = {
     name: GROUPS_COLUMNS_IDS.Usage,
     header: 'Usage',
-    width: 100,
-    resizeMinWidth: 70,
+    width: 75,
+    resizeMinWidth: 75,
     render: ({ row }) => {
         // without a limit the usage can be evaluated as 0,
         // but the absence of a value is more clear

package/dist/src/containers/Tablets/Tablets.js

@@ -14,7 +14,7 @@ import { ETabletState } from '../../types/api/tablet';
 import { cn } from '../../utils/cn';
 import { DEFAULT_TABLE_SETTINGS } from '../../utils/constants';
 import { calcUptime } from '../../utils/dataFormatters/dataFormatters';
-import { useTypedDispatch, useTypedSelector } from '../../utils/hooks';
+import { useAutoRefreshInterval, useTypedDispatch, useTypedSelector } from '../../utils/hooks';
 import { mapTabletStateToLabelTheme } from '../../utils/tablet';
 import { getDefaultNodePath } from '../Node/NodePages';
 import i18n from './i18n';
@@ -26,7 +26,7 @@ const columns = [
             return i18n('Type');
         },
         render: ({ row }) => {
-            return (_jsxs("span", { children: [row.Type, " ", row.Leader ? _jsx(Text, { color: "secondary", children: "leader" }) : ''] }));
+            return (_jsxs("span", { children: [row.Type, " ", row.Leader ? '' : _jsx(Text, { color: "secondary", children: "follower" })] }));
         },
     },
     {
@@ -61,7 +61,7 @@ const columns = [
         align: 'right',
     },
     {
-        name: 'FQDN',
+        name: 'fqdn',
         get header() {
             return i18n('Node FQDN');
         },
@@ -111,8 +111,8 @@ function TabletActions(tablet) {
         }, buttonDisabled: isDisabledRestart || !isUserAllowedToMakeChanges, withPopover: true, popoverContent: i18n('controls.kill-not-allowed'), popoverDisabled: isUserAllowedToMakeChanges, children: _jsx(Icon, { data: ArrowsRotateRight }) }));
 }
 export function Tablets({ nodeId, path, className }) {
-    const { autorefresh } = useTypedSelector((state) => state.schema);
-    let params = skipToken;
+    const [autoRefreshInterval] = useAutoRefreshInterval();
+    let params = {};
     const node = nodeId === undefined ? undefined : String(nodeId);
     if (node !== undefined) {
         params = { nodes: [String(node)] };
@@ -120,11 +120,11 @@ export function Tablets({ nodeId, path, className }) {
     else if (path) {
         params = { path };
     }
-    const { currentData, isFetching, error } = tabletsApi.useGetTabletsInfoQuery(params, {
-        pollingInterval: autorefresh,
+    const { currentData, isFetching, error } = tabletsApi.useGetTabletsInfoQuery(Object.keys(params).length === 0 ? skipToken : params, {
+        pollingInterval: autoRefreshInterval,
     });
     const loading = isFetching && currentData === undefined;
-    const tablets = useTypedSelector((state) => selectTabletsWithFqdn(state, node, path));
+    const tablets = useTypedSelector((state) => selectTabletsWithFqdn(state, params));
     if (loading) {
         return _jsx(TableSkeleton, {});
     }

package/dist/src/containers/TabletsFilters/TabletsFilters.d.ts

@@ -1,57 +1,2 @@
-export class TabletsFilters extends React.Component<any, any, any> {
-    static propTypes: {
-        wasLoaded: PropTypes.Requireable<boolean>;
-        loading: PropTypes.Requireable<boolean>;
-        getTabletsInfo: PropTypes.Requireable<(...args: any[]) => any>;
-        timeoutForRequest: PropTypes.Requireable<number>;
-        path: PropTypes.Requireable<string>;
-        clearWasLoadingFlag: PropTypes.Requireable<(...args: any[]) => any>;
-        nodes: PropTypes.Requireable<any[]>;
-        tablets: PropTypes.Requireable<any[]>;
-        filteredTablets: PropTypes.Requireable<any[]>;
-        setStateFilter: PropTypes.Requireable<(...args: any[]) => any>;
-        setTypeFilter: PropTypes.Requireable<(...args: any[]) => any>;
-        stateFilter: PropTypes.Requireable<any[]>;
-        typeFilter: PropTypes.Requireable<any[]>;
-        error: PropTypes.Requireable<PropTypes.Requireable<string> | PropTypes.Requireable<object>>;
-        setHeader: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    static renderLoader(): import("react/jsx-runtime").JSX.Element;
-    static parseNodes: (nodes: any) => number[] | undefined;
-    static getStateFiltersFromColor: (color: any) => any;
-    static CONTROL_WIDTH: number;
-    static POPUP_WIDTH: number;
-    constructor(props: any);
-    constructor(props: any, context: any);
-    state: {
-        nodeFilter: never[];
-        tenantPath: string;
-        clusterName: string;
-    };
-    reloadDescriptor: number;
-    componentDidMount(): void;
-    componentDidUpdate(prevProps: any): void;
-    componentWillUnmount(): void;
-    makeRequest: () => void;
-    getTablets: () => void;
-    handleNodeFilterChange: (nodeFilter: any) => void;
-    handleStateFilterChange: (stateFilter: any) => void;
-    handleTypeFilterChange: (typeFilter: any) => void;
-    renderTablet: (index: any, key: any) => import("react/jsx-runtime").JSX.Element;
-    renderContent: () => import("react/jsx-runtime").JSX.Element;
-    renderView: () => import("react/jsx-runtime").JSX.Element;
-    render(): import("react/jsx-runtime").JSX.Element;
-}
-declare const _default: import("react-redux").ConnectedComponent<typeof TabletsFilters, {
-    path?: string | null | undefined;
-    setHeader?: ((...args: any[]) => any) | null | undefined;
-    context?: React.Context<import("react-redux").ReactReduxContextValue<any, import("redux").UnknownAction> | null> | undefined;
-    store?: import("redux").Store<any, import("redux").UnknownAction, unknown> | undefined;
-} | {
-    path?: string | null | undefined;
-    setHeader?: ((...args: any[]) => any) | null | undefined;
-    store?: import("redux").Store<any, import("redux").UnknownAction, unknown> | undefined;
-}>;
-export default _default;
-import React from 'react';
-import PropTypes from 'prop-types';
+import './TabletsFilters.scss';
+export declare function TabletsFilters(): import("react/jsx-runtime").JSX.Element;

package/dist/src/containers/TabletsFilters/TabletsFilters.js

@@ -1,200 +1,90 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { Loader, Select } from '@gravity-ui/uikit';
-import isEqual from 'lodash/isEqual';
 import map from 'lodash/map';
-import PropTypes from 'prop-types';
 import { Helmet } from 'react-helmet-async';
 import ReactList from 'react-list';
-import { connect } from 'react-redux';
+import { ArrayParam, StringParam, useQueryParams } from 'use-query-params';
+import { z } from 'zod';
 import { AccessDenied } from '../../components/Errors/403';
+import { ResponseError } from '../../components/Errors/ResponseError';
 import { Tablet } from '../../components/Tablet';
-import { parseQuery } from '../../routes';
 import { setHeaderBreadcrumbs } from '../../store/reducers/header/header';
-import { clearWasLoadingFlag, getFilteredTablets, getTablets, getTabletsInfo, setStateFilter, setTypeFilter, } from '../../store/reducers/tabletsFilters';
+import { nodesListApi } from '../../store/reducers/nodesList';
+import { tabletsApi } from '../../store/reducers/tablets';
+import { getFilteredTablets } from '../../store/reducers/tabletsFilters';
 import { cn } from '../../utils/cn';
-import { CLUSTER_DEFAULT_TITLE } from '../../utils/constants';
+import { AUTO_RELOAD_INTERVAL, CLUSTER_DEFAULT_TITLE } from '../../utils/constants';
+import { useTypedDispatch, useTypedSelector } from '../../utils/hooks';
 import { tabletColorToTabletState, tabletStates } from '../../utils/tablet';
 import i18n from './i18n';
 import './TabletsFilters.scss';
 const b = cn('tablets-filters');
-export class TabletsFilters extends React.Component {
-    constructor() {
-        super(...arguments);
-        this.state = {
-            nodeFilter: [],
-            tenantPath: '',
-            clusterName: '',
-        };
-        this.reloadDescriptor = -1;
-        this.makeRequest = () => {
-            const { nodeFilter, tenantPath } = this.state;
-            this.props.getTabletsInfo({ nodes: nodeFilter, path: [tenantPath] });
-        };
-        this.getTablets = () => {
-            const { timeoutForRequest } = this.props;
-            clearInterval(this.reloadDescriptor);
-            this.reloadDescriptor = setTimeout(() => {
-                this.makeRequest();
-                this.reloadDescriptor = -1;
-            }, timeoutForRequest);
-        };
-        this.handleNodeFilterChange = (nodeFilter) => {
-            this.setState({ nodeFilter }, () => {
-                this.props.clearWasLoadingFlag();
-                this.makeRequest();
-            });
-        };
-        this.handleStateFilterChange = (stateFilter) => {
-            const { setStateFilter } = this.props;
-            setStateFilter(stateFilter);
-        };
-        this.handleTypeFilterChange = (typeFilter) => {
-            const { setTypeFilter } = this.props;
-            setTypeFilter(typeFilter);
-        };
-        this.renderTablet = (index, key) => {
-            const { filteredTablets, size } = this.props;
-            return (_jsx(Tablet, { tablet: filteredTablets[index], tenantName: this.state.tenantPath, size: size, className: b('tablet') }, key));
-        };
-        this.renderContent = () => {
-            const { nodeFilter, tenantPath } = this.state;
-            const { tablets, filteredTablets, nodes, stateFilter, typeFilter, error } = this.props;
-            const states = tabletStates.map((item) => ({ value: item, content: item }));
-            const types = Array.from(new Set(...[map(tablets, (tblt) => tblt.Type)])).map((item) => ({
-                value: item,
-                content: item,
-            }));
-            const nodesForSelect = map(nodes, (node) => ({
-                content: node.Id,
-                value: node.Id,
-                meta: node.Host,
-            }));
-            return (_jsxs("div", { className: b(), children: [tenantPath ? (_jsx("div", { className: b('tenant'), children: _jsxs(React.Fragment, { children: [_jsx("span", { className: b('label'), children: "Database: " }), " ", tenantPath] }) })) : null, _jsx(MemoizedFilters, { nodesForSelect: nodesForSelect, nodeFilter: nodeFilter, onChangeNodes: this.handleNodeFilterChange, states: states, stateFilter: stateFilter, onChangeStates: this.handleStateFilterChange, types: types, typeFilter: typeFilter, onChangeTypes: this.handleTypeFilterChange }), error && _jsx("div", { className: "error", children: error }), filteredTablets.length > 0 ? (_jsx("div", { className: b('items'), children: _jsx(ReactList, { itemRenderer: this.renderTablet, length: filteredTablets.length, type: "uniform" }) })) : (!error && _jsx("div", { className: b('empty-message'), children: "no tablets" }))] }));
-        };
-        this.renderView = () => {
-            const { loading, wasLoaded, error } = this.props;
-            if (loading && !wasLoaded) {
-                return TabletsFilters.renderLoader();
-            }
-            else if (error && typeof error === 'object') {
-                if (error.status === 403) {
-                    return _jsx(AccessDenied, {});
-                }
-                return _jsx("div", { children: error.statusText });
-            }
-            else {
-                return this.renderContent();
-            }
-        };
+const stringArrayParam = z.preprocess((arg) => {
+    if (Array.isArray(arg)) {
+        return arg.filter(Boolean).sort();
     }
-    static renderLoader() {
-        return (_jsx("div", { className: 'loader', children: _jsx(Loader, { size: "l" }) }));
+    return [];
+}, z.string().array());
+const stateArrayParam = z.preprocess((arg) => {
+    if (Array.isArray(arg)) {
+        return arg
+            .flatMap((item) => tabletColorToTabletState[item] || item)
+            .filter(Boolean);
     }
-    componentDidMount() {
-        const { setStateFilter, setTypeFilter, setHeaderBreadcrumbs } = this.props;
-        const queryParams = parseQuery(this.props.location);
-        const { nodeIds, type, path, state, clusterName } = queryParams;
-        const nodes = TabletsFilters.parseNodes(nodeIds);
-        if (state) {
-            const stateFilter = TabletsFilters.getStateFiltersFromColor(state);
-            setStateFilter(stateFilter);
-        }
-        if (type) {
-            setTypeFilter([type]);
-        }
-        this.setState({ nodeFilter: nodes, tenantPath: path, clusterName }, () => {
-            this.makeRequest();
-        });
-        setHeaderBreadcrumbs('tablets', {
+    return [];
+}, z.string().array());
+const CONTROL_WIDTH = 220;
+const POPUP_WIDTH = 300;
+export function TabletsFilters() {
+    var _a;
+    const [params, setParams] = useQueryParams({
+        nodeIds: ArrayParam,
+        type: ArrayParam,
+        state: ArrayParam,
+        path: StringParam,
+        clusterName: StringParam,
+    });
+    const path = (_a = params.path) !== null && _a !== void 0 ? _a : undefined;
+    const dispatch = useTypedDispatch();
+    React.useEffect(() => {
+        dispatch(setHeaderBreadcrumbs('tablets', {
             tenantName: path,
-        });
-    }
-    componentDidUpdate(prevProps) {
-        const { loading, error } = this.props;
-        if (!error && prevProps.path && this.props.path && prevProps.path !== this.props.path) {
-            this.props.clearWasLoadingFlag();
-            this.getTablets();
+        }));
+    }, [dispatch, path]);
+    const nodeIds = stringArrayParam.parse(params.nodeIds);
+    const { currentData, isFetching, error } = tabletsApi.useGetTabletsInfoQuery({ nodes: nodeIds, path }, {
+        pollingInterval: AUTO_RELOAD_INTERVAL,
+    });
+    const { data: nodes } = nodesListApi.useGetNodesListQuery({}, { pollingInterval: AUTO_RELOAD_INTERVAL });
+    const loading = isFetching && currentData === undefined;
+    const stateFilter = stateArrayParam.parse(params.state);
+    const states = tabletStates.map((item) => ({ value: item, content: item }));
+    const typeFilter = stringArrayParam.parse(params.type);
+    const types = Array.from(new Set(...[map(currentData === null || currentData === void 0 ? void 0 : currentData.TabletStateInfo, (tblt) => tblt.Type)])).map((item) => ({
+        value: String(item),
+        content: item,
+    }));
+    const filteredTablets = useTypedSelector((state) => getFilteredTablets(state, { nodes: nodeIds, path }, stateFilter, typeFilter));
+    const renderTablet = (index, key) => (_jsx(Tablet, { tablet: filteredTablets[index], tenantName: path }, key));
+    const nodesForSelect = map(nodes, (node) => ({
+        content: node.Id,
+        value: String(node.Id),
+        data: node.Host,
+    }));
+    const renderView = () => {
+        if (loading) {
+            return (_jsx("div", { className: 'loader', children: _jsx(Loader, { size: "l" }) }));
         }
-        if (!error && !loading && this.reloadDescriptor === -1) {
-            this.getTablets();
+        if (error && typeof error === 'object' && 'status' in error && error.status === 403) {
+            return _jsx(AccessDenied, {});
         }
-    }
-    componentWillUnmount() {
-        clearInterval(this.reloadDescriptor);
-    }
-    render() {
-        const { tenantPath, clusterName } = this.state;
-        return (_jsxs(React.Fragment, { children: [_jsx(Helmet, { children: _jsx("title", { children: `${i18n('page.title')} — ${tenantPath || clusterName || CLUSTER_DEFAULT_TITLE}` }) }), this.renderView()] }));
-    }
-}
-TabletsFilters.propTypes = {
-    wasLoaded: PropTypes.bool,
-    loading: PropTypes.bool,
-    getTabletsInfo: PropTypes.func,
-    timeoutForRequest: PropTypes.number,
-    path: PropTypes.string,
-    clearWasLoadingFlag: PropTypes.func,
-    nodes: PropTypes.array,
-    tablets: PropTypes.array,
-    filteredTablets: PropTypes.array,
-    setStateFilter: PropTypes.func,
-    setTypeFilter: PropTypes.func,
-    stateFilter: PropTypes.array,
-    typeFilter: PropTypes.array,
-    error: PropTypes.oneOf([PropTypes.string, PropTypes.object]),
-    setHeader: PropTypes.func,
-};
-TabletsFilters.parseNodes = (nodes) => {
-    if (Array.isArray(nodes)) {
-        return nodes.map(Number).filter(Number.isInteger);
-    }
-};
-TabletsFilters.getStateFiltersFromColor = (color) => {
-    return tabletColorToTabletState[color] || [color];
-};
-TabletsFilters.CONTROL_WIDTH = 220;
-TabletsFilters.POPUP_WIDTH = 300;
-const Filters = ({ nodesForSelect, nodeFilter, onChangeNodes, states, stateFilter, onChangeStates, types, typeFilter, onChangeTypes, }) => {
-    return (_jsxs("div", { className: b('filters'), children: [_jsx("div", { className: b('filter-wrapper'), children: _jsx(Select, { multiple: true, label: "Node ID", width: TabletsFilters.CONTROL_WIDTH, popupWidth: TabletsFilters.POPUP_WIDTH, placeholder: "All", options: nodesForSelect, value: nodeFilter, onUpdate: onChangeNodes, renderOption: (option) => {
-                        return (_jsxs("div", { className: b('node'), children: [_jsx("div", { children: option.content }), _jsx("div", { className: b('node-meta'), title: option.meta, children: option.meta })] }));
-                    }, getOptionHeight: () => 40 }) }), _jsx("div", { className: b('filter-wrapper'), children: _jsx(Select, { multiple: true, label: "multiple", width: TabletsFilters.CONTROL_WIDTH, placeholder: "All", options: states, value: stateFilter, onUpdate: onChangeStates }) }), _jsx("div", { className: b('filter-wrapper'), children: _jsx(Select, { multiple: true, label: "Types", width: TabletsFilters.CONTROL_WIDTH, placeholder: "All", options: types, value: typeFilter, onUpdate: onChangeTypes }) })] }));
-};
-Filters.propTypes = {
-    nodesForSelect: PropTypes.array,
-    nodeFilter: PropTypes.array,
-    onChangeNodes: PropTypes.func,
-    states: PropTypes.array,
-    stateFilter: PropTypes.array,
-    onChangeStates: PropTypes.func,
-    types: PropTypes.array,
-    typeFilter: PropTypes.array,
-    onChangeTypes: PropTypes.func,
-};
-const MemoizedFilters = React.memo(Filters, (prevProps, nextProps) => {
-    return (isEqual(prevProps.nodeFilter, nextProps.nodeFilter) &&
-        isEqual(prevProps.stateFilter, nextProps.stateFilter) &&
-        isEqual(prevProps.typeFilter, nextProps.typeFilter));
-});
-const mapStateToProps = (state) => {
-    const { nodes, wasLoaded, loading, timeoutForRequest, stateFilter, typeFilter, error } = state.tabletsFilters;
-    return {
-        tablets: getTablets(state),
-        filteredTablets: getFilteredTablets(state),
-        nodes,
-        timeoutForRequest,
-        wasLoaded,
-        loading,
-        stateFilter,
-        typeFilter,
-        error,
+        return (_jsxs("div", { className: b(), children: [path ? (_jsxs("div", { className: b('tenant'), children: [_jsx("span", { className: b('label'), children: "Database: " }), " ", path] })) : null, _jsx(Filters, { nodesForSelect: nodesForSelect, nodeFilter: nodeIds, onChangeNodes: (n) => setParams({ nodeIds: n }), states: states, stateFilter: stateFilter, onChangeStates: (s) => setParams({ state: s }), types: types, typeFilter: typeFilter, onChangeTypes: (t) => setParams({ type: t }) }), error ? _jsx(ResponseError, { error: error }) : null, filteredTablets.length > 0 ? (_jsx("div", { className: b('items'), children: _jsx(ReactList, { itemRenderer: renderTablet, length: filteredTablets.length, type: "uniform" }) })) : (!error && _jsx("div", { className: b('empty-message'), children: "no tablets" }))] }));
     };
-};
-const mapDispatchToProps = {
-    getTabletsInfo,
-    clearWasLoadingFlag,
-    setStateFilter,
-    setTypeFilter,
-    setHeaderBreadcrumbs,
-};
-export default connect(mapStateToProps, mapDispatchToProps)(TabletsFilters);
+    return (_jsxs(React.Fragment, { children: [_jsx(Helmet, { children: _jsx("title", { children: `${i18n('page.title')} — ${path || params.clusterName || CLUSTER_DEFAULT_TITLE}` }) }), renderView()] }));
+}
+function Filters({ nodesForSelect, nodeFilter, onChangeNodes, states, stateFilter, onChangeStates, types, typeFilter, onChangeTypes, }) {
+    return (_jsxs("div", { className: b('filters'), children: [_jsx("div", { className: b('filter-wrapper'), children: _jsx(Select, { multiple: true, label: "Node ID", width: CONTROL_WIDTH, popupWidth: POPUP_WIDTH, placeholder: "All", options: nodesForSelect, value: nodeFilter, onUpdate: onChangeNodes, renderOption: (option) => {
+                        return (_jsxs("div", { className: b('node'), children: [_jsx("div", { children: option.content }), _jsx("div", { className: b('node-meta'), title: option.data, children: option.data })] }));
+                    }, getOptionHeight: () => 40 }) }), _jsx("div", { className: b('filter-wrapper'), children: _jsx(Select, { multiple: true, label: "multiple", width: CONTROL_WIDTH, placeholder: "All", options: states, value: stateFilter, onUpdate: onChangeStates }) }), _jsx("div", { className: b('filter-wrapper'), children: _jsx(Select, { multiple: true, label: "Types", width: CONTROL_WIDTH, placeholder: "All", options: types, value: typeFilter, onUpdate: onChangeTypes }) })] }));
+}

package/dist/src/containers/Tenant/Acl/Acl.d.ts

@@ -1,2 +1,4 @@
 import './Acl.scss';
-export declare const Acl: () => import("react/jsx-runtime").JSX.Element;
+export declare const Acl: ({ path }: {
+    path: string;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/src/containers/Tenant/Acl/Acl.js

@@ -1,17 +1,14 @@
+import { __rest } from "tslib";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
+import { DefinitionList } from '@gravity-ui/components';
 import { ResponseError } from '../../../components/Errors/ResponseError';
 import { Loader } from '../../../components/Loader';
-import { ResizeableDataTable } from '../../../components/ResizeableDataTable/ResizeableDataTable';
-import { getSchemaAcl, setAclWasNotLoaded } from '../../../store/reducers/schemaAcl/schemaAcl';
+import { schemaAclApi } from '../../../store/reducers/schemaAcl/schemaAcl';
 import { cn } from '../../../utils/cn';
-import { DEFAULT_TABLE_SETTINGS } from '../../../utils/constants';
-import { useTypedDispatch, useTypedSelector } from '../../../utils/hooks';
 import i18n from '../i18n';
 import './Acl.scss';
 const b = cn('ydb-acl');
-const ACL_COLUMNS_WIDTH_LS_KEY = 'aclTableColumnsWidth';
-const TABLE_SETTINGS = Object.assign(Object.assign({}, DEFAULT_TABLE_SETTINGS), { dynamicRender: false, stickyTop: 36 });
 const prepareLogin = (value) => {
     if (value && value.endsWith('@staff') && !value.startsWith('svc_')) {
         const login = value.split('@')[0];
@@ -19,77 +16,96 @@ const prepareLogin = (value) => {
     }
     return value;
 };
-const columns = [
-    {
-        name: 'AccessType',
-        header: 'Access Type',
-        sortable: false,
-        render: ({ row }) => row.AccessType,
-    },
-    {
-        name: 'AccessRights',
-        header: 'Access Rights',
-        render: ({ row }) => {
-            var _a;
-            return (_a = row.AccessRights) === null || _a === void 0 ? void 0 : _a.map((item, index) => {
-                return _jsx("div", { children: item }, index);
-            });
-        },
-        sortable: false,
-    },
-    {
-        name: 'Subject',
-        sortable: false,
-        render: ({ row }) => {
-            return prepareLogin(row.Subject);
-        },
-        width: 140,
-    },
-    {
-        name: 'InheritanceType',
-        header: 'Inheritance Type',
-        render: ({ row }) => {
-            var _a;
-            return (_a = row.InheritanceType) === null || _a === void 0 ? void 0 : _a.map((item, index) => {
-                return _jsx("div", { children: item }, index);
-            });
-        },
-        sortable: false,
-    },
-];
-export const Acl = () => {
-    const dispatch = useTypedDispatch();
-    const { currentSchemaPath } = useTypedSelector((state) => state.schema);
-    const { loading, error, acl, owner, wasLoaded } = useTypedSelector((state) => state.schemaAcl);
-    React.useEffect(() => {
-        if (currentSchemaPath) {
-            dispatch(getSchemaAcl({ path: currentSchemaPath }));
+const aclParams = ['access', 'type', 'inheritance'];
+const aclParamToName = {
+    access: 'Access',
+    type: 'Access type',
+    inheritance: 'Inheritance type',
+};
+const defaultInheritanceType = ['Object', 'Container'];
+const defaultAccessType = 'Allow';
+const defaultInheritanceTypeSet = new Set(defaultInheritanceType);
+function normalizeAcl(acl) {
+    return acl.map((ace) => {
+        const { AccessRules = [], AccessRights = [], AccessType, InheritanceType, Subject } = ace;
+        const access = AccessRules.concat(AccessRights);
+        //"Allow" is default access type. We want to show it only if it isn't default
+        const type = AccessType === defaultAccessType ? undefined : AccessType;
+        let inheritance;
+        // ['Object', 'Container'] - is default inheritance type. We want to show it only if it isn't default
+        if ((InheritanceType === null || InheritanceType === void 0 ? void 0 : InheritanceType.length) !== defaultInheritanceTypeSet.size ||
+            InheritanceType.some((t) => !defaultInheritanceTypeSet.has(t))) {
+            inheritance = InheritanceType;
         }
-        return () => {
-            // Ensures correct acl on path change
-            dispatch(setAclWasNotLoaded());
+        return {
+            access: access.length ? access : undefined,
+            type,
+            inheritance,
+            Subject,
         };
-    }, [currentSchemaPath, dispatch]);
-    const renderTable = () => {
-        if (!acl || !acl.length) {
-            return null;
-        }
-        return (_jsx(ResizeableDataTable, { columnsWidthLSKey: ACL_COLUMNS_WIDTH_LS_KEY, columns: columns, data: acl, settings: TABLE_SETTINGS }));
-    };
-    const renderOwner = () => {
-        if (!owner) {
-            return null;
+    });
+}
+function DefinitionValue({ value }) {
+    const normalizedValue = typeof value === 'string' ? [value] : value;
+    return (_jsx("div", { className: b('definition-content'), children: normalizedValue.map((el) => (_jsx("span", { children: el }, el))) }));
+}
+function getAclListItems(acl) {
+    if (!acl || !acl.length) {
+        return [];
+    }
+    const normalizedAcl = normalizeAcl(acl);
+    return normalizedAcl.map((_a) => {
+        var { Subject } = _a, data = __rest(_a, ["Subject"]);
+        const definedDataEntries = Object.entries(data).filter(([_key, value]) => Boolean(value));
+        if (definedDataEntries.length === 1 && definedDataEntries[0][0] === 'access') {
+            return {
+                name: Subject,
+                content: _jsx(DefinitionValue, { value: definedDataEntries[0][1] }),
+            };
         }
-        return (_jsxs("div", { className: b('owner-container'), children: [_jsx("span", { className: b('owner-label'), children: `${i18n('acl.owner')}: ` }), prepareLogin(owner)] }));
-    };
-    if (loading && !wasLoaded) {
+        return {
+            label: _jsx("span", { className: b('group-label'), children: Subject }),
+            items: aclParams
+                .map((key) => {
+                const value = data[key];
+                if (value) {
+                    return {
+                        name: aclParamToName[key],
+                        content: _jsx(DefinitionValue, { value: value }),
+                    };
+                }
+                return undefined;
+            })
+                .filter(Boolean),
+        };
+    });
+}
+function getOwnerItem(owner) {
+    const preparedOwner = prepareLogin(owner);
+    if (!preparedOwner) {
+        return [];
+    }
+    return [
+        {
+            name: _jsx("span", { className: b('owner'), children: preparedOwner }),
+            content: _jsx("span", { className: b('owner'), children: i18n('acl.owner') }),
+        },
+    ];
+}
+export const Acl = ({ path }) => {
+    const { currentData, isFetching, error } = schemaAclApi.useGetSchemaAclQuery({ path });
+    const loading = isFetching && !currentData;
+    const { acl, owner } = currentData || {};
+    const aclListItems = getAclListItems(acl);
+    const ownerItem = getOwnerItem(owner);
+    if (loading) {
         return _jsx(Loader, {});
     }
     if (error) {
         return _jsx(ResponseError, { error: error });
     }
-    if (!loading && !acl && !owner) {
+    if (!acl && !owner) {
         return _jsx(React.Fragment, { children: i18n('acl.empty') });
     }
-    return (_jsx("div", { className: b(), children: _jsxs("div", { className: b('result'), children: [renderOwner(), renderTable()] }) }));
+    return (_jsxs("div", { className: b(), children: [ownerItem.length ? (_jsx(DefinitionList, { items: ownerItem, nameMaxWidth: 200, className: b('owner-container') })) : null, aclListItems.length ? (_jsx(DefinitionList, { items: aclListItems, nameMaxWidth: 200, className: b('result') })) : null] }));
 };

package/dist/src/containers/Tenant/Acl/Acl.scss

@@ -1,17 +1,22 @@
 @import '../../../styles/mixins.scss';
 
 .ydb-acl {
-    &__result {
-        align-self: flex-start;
-    }
-
+    width: 100%;
     &__owner-container {
-        position: sticky;
-        z-index: 2;
-        top: 0;
-
+        padding-bottom: 25px;
+    }
+    &__result {
         padding-bottom: 16px;
+    }
 
-        background-color: var(--g-color-base-background);
+    &__owner {
+        font-weight: 600;
+    }
+    &__definition-content {
+        display: flex;
+        flex-direction: column;
+    }
+    &__group-label {
+        @include subheader-2-typography();
     }
 }