ydb-embedded-ui 4.13.0 → 4.15.0

package/CHANGELOG.md

@@ -1,5 +1,30 @@
 # Changelog
 
+## [4.15.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.14.0...v4.15.0) (2023-08-17)
+
+
+### Features
+
+* **SchemaTree:** add actions for topic ([#507](https://github.com/ydb-platform/ydb-embedded-ui/issues/507)) ([6700136](https://github.com/ydb-platform/ydb-embedded-ui/commit/670013629cb68425e670969323a2ef466ef7c018))
+* **Storage:** sort on backend ([#510](https://github.com/ydb-platform/ydb-embedded-ui/issues/510)) ([034a89a](https://github.com/ydb-platform/ydb-embedded-ui/commit/034a89a9844021c5ea3a73c8f6456e35128078c0))
+* **Storage:** v2 api and backend filters ([#506](https://github.com/ydb-platform/ydb-embedded-ui/issues/506)) ([ce4bf6d](https://github.com/ydb-platform/ydb-embedded-ui/commit/ce4bf6d0ef154b87a7b3a44d56281230b2b5b554))
+
+## [4.14.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.13.0...v4.14.0) (2023-08-11)
+
+
+### Features
+
+* **Nodes:** filter and sort on backend ([#503](https://github.com/ydb-platform/ydb-embedded-ui/issues/503)) ([2e8ab8e](https://github.com/ydb-platform/ydb-embedded-ui/commit/2e8ab8e9965db61ec281f7340b89dd3967b639df))
+* **Query:** add explanation to query duration ([#501](https://github.com/ydb-platform/ydb-embedded-ui/issues/501)) ([a5f5140](https://github.com/ydb-platform/ydb-embedded-ui/commit/a5f5140a23864147d8495e3c6b94709e5e710a9b))
+
+
+### Bug Fixes
+
+* **Header:** add icons for nodes and tablets ([#500](https://github.com/ydb-platform/ydb-embedded-ui/issues/500)) ([862660c](https://github.com/ydb-platform/ydb-embedded-ui/commit/862660c1928c2c2b626e4417cd043f0bd5a65df9))
+* **Query:** fix query method selector help text ([#504](https://github.com/ydb-platform/ydb-embedded-ui/issues/504)) ([65cdf9e](https://github.com/ydb-platform/ydb-embedded-ui/commit/65cdf9ee93277c193cc1ad036b2cb38d2ae15b71))
+* **Query:** transfer API calls to a new line ([#499](https://github.com/ydb-platform/ydb-embedded-ui/issues/499)) ([de3d540](https://github.com/ydb-platform/ydb-embedded-ui/commit/de3d5404310f32ba05598bb99a1afb1b65ab45a1))
+* **SchemaTree:** transfer Show Preview to SchemaTree ([#505](https://github.com/ydb-platform/ydb-embedded-ui/issues/505)) ([46220c4](https://github.com/ydb-platform/ydb-embedded-ui/commit/46220c4b2cd111acf12712b4693744c52aaf7231))
+
 ## [4.13.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.12.0...v4.13.0) (2023-08-04)
 
 

package/dist/components/Tablet/Tablet.scss

@@ -1,17 +1,8 @@
 .tablet {
-    display: flex;
-    justify-content: center;
-
-    width: 23px;
-    height: 18px;
-
-    font-size: 10px;
     cursor: pointer;
-    text-transform: uppercase;
 
     color: var(--yc-color-text-complementary);
-    border: 1px solid var(--yc-color-base-generic-medium-hover);
-    border-radius: 4px;
+    border-color: var(--yc-color-base-generic-medium-hover);
 
     &__wrapper {
         margin-right: 2px;
@@ -25,12 +16,6 @@
         padding: 10px;
     }
 
-    &__type {
-        line-height: 17px;
-
-        color: var(--yc-color-text-complementary);
-    }
-
     &_status_gray {
         background-color: var(--yc-color-text-complementary);
     }

package/dist/components/Tablet/Tablet.tsx

@@ -5,6 +5,7 @@ import {getTabletLabel} from '../../utils/constants';
 import routes, {createHref} from '../../routes';
 
 import {ContentWithPopup} from '../ContentWithPopup/ContentWithPopup';
+import {TabletIcon} from '../TabletIcon/TabletIcon';
 import {InternalLink} from '../InternalLink';
 import {TabletTooltipContent} from '../TooltipsContent';
 
@@ -18,10 +19,11 @@ interface TabletProps {
 }
 
 export const Tablet = ({tablet = {}, tenantName}: TabletProps) => {
-    const {TabletId: id, NodeId} = tablet;
+    const {TabletId: id, NodeId, Type} = tablet;
     const status = tablet.Overall?.toLowerCase();
 
-    const tabletPath = id && createHref(routes.tablet, {id}, {nodeId: NodeId, tenantName});
+    const tabletPath =
+        id && createHref(routes.tablet, {id}, {nodeId: NodeId, tenantName, type: Type});
 
     return (
         <ContentWithPopup
@@ -29,9 +31,7 @@ export const Tablet = ({tablet = {}, tenantName}: TabletProps) => {
             content={<TabletTooltipContent data={tablet} className={b('popup-content')} />}
         >
             <InternalLink to={tabletPath}>
-                <div className={b({status})}>
-                    <div className={b('type')}>{[getTabletLabel(tablet.Type)]}</div>
-                </div>
+                <TabletIcon className={b({status})} text={getTabletLabel(tablet.Type)} />
             </InternalLink>
         </ContentWithPopup>
     );

package/dist/components/TabletIcon/TabletIcon.scss

@@ -0,0 +1,17 @@
+.tablet-icon {
+    display: flex;
+    justify-content: center;
+
+    width: 23px;
+    height: 16px;
+
+    font-size: 10px;
+    text-transform: uppercase;
+
+    border: 1px solid;
+    border-radius: 4px;
+
+    &__type {
+        line-height: 14px;
+    }
+}

package/dist/components/TabletIcon/TabletIcon.tsx

@@ -0,0 +1,18 @@
+import cn from 'bem-cn-lite';
+
+import './TabletIcon.scss';
+
+interface TabletIconProps {
+    text?: string;
+    className?: string;
+}
+
+const b = cn('tablet-icon');
+
+export const TabletIcon = ({text, className}: TabletIconProps) => {
+    return (
+        <div className={b(null, className)}>
+            <div className={b('type')}>{text || 'T'}</div>
+        </div>
+    );
+};

package/dist/containers/App/App.js

@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 import ContentWrapper, {Content} from './Content';
 import AsideNavigation from '../AsideNavigation/AsideNavigation';
 
-import {getUser} from '../../store/reducers/authentication';
+import {getUser} from '../../store/reducers/authentication/authentication';
 import {registerLanguages} from '../../utils/monaco';
 
 import './App.scss';

package/dist/containers/AsideNavigation/AsideNavigation.tsx

@@ -18,7 +18,7 @@ import userChecked from '../../assets/icons/user-check.svg';
 import settingsIcon from '../../assets/icons/settings.svg';
 import supportIcon from '../../assets/icons/support.svg';
 
-import {logout} from '../../store/reducers/authentication';
+import {logout} from '../../store/reducers/authentication/authentication';
 import {getParsedSettingValue, setSettingValue} from '../../store/reducers/settings/settings';
 import {TENANT_PAGE, TENANT_PAGES_IDS} from '../../store/reducers/tenant/constants';
 import routes, {TENANT, createHref, parseQuery} from '../../routes';

package/dist/containers/Authentication/Authentication.tsx

@@ -5,7 +5,7 @@ import cn from 'bem-cn-lite';
 
 import {Button, TextInput, Icon, Link as ExternalLink} from '@gravity-ui/uikit';
 
-import {authenticate} from '../../store/reducers/authentication';
+import {authenticate} from '../../store/reducers/authentication/authentication';
 import {useTypedSelector} from '../../utils/hooks';
 
 import ydbLogoIcon from '../../assets/icons/ydb.svg';

package/dist/containers/Header/Header.scss

@@ -15,6 +15,8 @@
         align-items: center;
 
         &__icon {
+            display: flex;
+
             margin-right: 3px;
         }
     }

package/dist/containers/Header/Header.tsx

@@ -3,7 +3,7 @@ import {useHistory, useLocation} from 'react-router';
 import {useDispatch} from 'react-redux';
 import block from 'bem-cn-lite';
 
-import {Breadcrumbs, Icon} from '@gravity-ui/uikit';
+import {Breadcrumbs} from '@gravity-ui/uikit';
 
 import {ExternalLinkWithIcon} from '../../components/ExternalLinkWithIcon/ExternalLinkWithIcon';
 
@@ -91,12 +91,7 @@ function Header({mainPage}: HeaderProps) {
                             }
                             return (
                                 <span className={b('breadcrumb')}>
-                                    <Icon
-                                        width={16}
-                                        height={16}
-                                        data={icon}
-                                        className={b('breadcrumb__icon')}
-                                    />
+                                    <div className={b('breadcrumb__icon')}>{icon}</div>
                                     {text}
                                 </span>
                             );

package/dist/containers/Header/{breadcrumbs.ts → breadcrumbs.tsx}

@@ -1,5 +1,9 @@
-import nodesRightIcon from '@gravity-ui/icons/svgs/nodes-right.svg';
-import databaseIcon from '@gravity-ui/icons/svgs/database.svg';
+import {
+    NodesRight as ClusterIcon,
+    Database as DatabaseIcon,
+    Cpu as ComputeNodeIcon,
+    HardDrive as StorageNodeIcon,
+} from '@gravity-ui/icons';
 
 import type {
     BreadcrumbsOptions,
@@ -15,8 +19,9 @@ import {
     TENANT_PAGE,
     TENANT_PAGES_IDS,
 } from '../../store/reducers/tenant/constants';
+import {TabletIcon} from '../../components/TabletIcon/TabletIcon';
 import routes, {createHref} from '../../routes';
-import {CLUSTER_DEFAULT_TITLE} from '../../utils/constants';
+import {CLUSTER_DEFAULT_TITLE, getTabletLabel} from '../../utils/constants';
 
 import {getClusterPath} from '../Cluster/utils';
 import {TenantTabsGroups, getTenantPath} from '../Tenant/TenantPages';
@@ -29,7 +34,7 @@ const prepareTenantName = (tenantName: string) => {
 export interface RawBreadcrumbItem {
     text: string;
     link?: string;
-    icon?: SVGIconData;
+    icon?: JSX.Element;
 }
 
 const getClusterBreadcrumbs = (
@@ -42,7 +47,7 @@ const getClusterBreadcrumbs = (
         {
             text: clusterName || CLUSTER_DEFAULT_TITLE,
             link: getClusterPath(clusterTab, query),
-            icon: nodesRightIcon,
+            icon: <ClusterIcon />,
         },
     ];
 };
@@ -56,7 +61,7 @@ const getTenantBreadcrumbs = (
     const text = tenantName ? prepareTenantName(tenantName) : 'Tenant';
     const link = tenantName ? getTenantPath({...query, name: tenantName}) : undefined;
 
-    return [...getClusterBreadcrumbs(options, query), {text, link, icon: databaseIcon}];
+    return [...getClusterBreadcrumbs(options, query), {text, link, icon: <DatabaseIcon />}];
 };
 
 const getNodeBreadcrumbs = (options: NodeBreadcrumbsOptions, query = {}): RawBreadcrumbItem[] => {
@@ -81,8 +86,13 @@ const getNodeBreadcrumbs = (options: NodeBreadcrumbsOptions, query = {}): RawBre
 
     const text = nodeId ? `Node ${nodeId}` : 'Node';
     const link = nodeId ? getDefaultNodePath(nodeId, query) : undefined;
+    const icon = isStorageNode ? <StorageNodeIcon /> : <ComputeNodeIcon />;
 
-    breadcrumbs.push({text, link});
+    breadcrumbs.push({
+        text,
+        link,
+        icon,
+    });
 
     return breadcrumbs;
 };
@@ -123,12 +133,13 @@ const getTabletBreadcrubms = (
     options: TabletBreadcrumbsOptions,
     query = {},
 ): RawBreadcrumbItem[] => {
-    const {tabletId} = options;
+    const {tabletId, tabletType} = options;
 
     const breadcrumbs = getTabletsBreadcrubms(options, query);
 
     breadcrumbs.push({
         text: tabletId || 'Tablet',
+        icon: <TabletIcon text={getTabletLabel(tabletType)} />,
     });
 
     return breadcrumbs;

package/dist/containers/Nodes/Nodes.tsx

@@ -3,9 +3,11 @@ import cn from 'bem-cn-lite';
 import {useDispatch} from 'react-redux';
 
 import DataTable from '@gravity-ui/react-data-table';
+import {ASCENDING} from '@gravity-ui/react-data-table/build/esm/lib/constants';
 
 import type {EPathType} from '../../types/api/schema';
 import type {ProblemFilterValue} from '../../store/reducers/settings/types';
+import type {NodesSortParams} from '../../store/reducers/nodes/types';
 
 import {AccessDenied} from '../../components/Errors/403';
 import {Illustration} from '../../components/Illustration';
@@ -17,7 +19,13 @@ import {TableWithControlsLayout} from '../../components/TableWithControlsLayout/
 import {ResponseError} from '../../components/Errors/ResponseError';
 
 import {DEFAULT_TABLE_SETTINGS, USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY} from '../../utils/constants';
-import {useAutofetcher, useSetting, useTypedSelector} from '../../utils/hooks';
+import {
+    useAutofetcher,
+    useSetting,
+    useTypedSelector,
+    useNodesRequestParams,
+    useTableSort,
+} from '../../utils/hooks';
 import {AdditionalNodesInfo, isUnavailableNode, NodesUptimeFilterValues} from '../../utils/nodes';
 
 import {
@@ -26,6 +34,8 @@ import {
     setSearchValue,
     resetNodesState,
     getComputeNodes,
+    setDataWasNotLoaded,
+    setSort,
 } from '../../store/reducers/nodes/nodes';
 import {selectFilteredNodes} from '../../store/reducers/nodes/selectors';
 import {changeFilter, ProblemFilterValues} from '../../store/reducers/settings/settings';
@@ -58,8 +68,16 @@ export const Nodes = ({path, type, additionalNodesInfo = {}}: NodesProps) => {
         dispatch(resetNodesState());
     }, [dispatch, path]);
 
-    const {wasLoaded, loading, error, nodesUptimeFilter, searchValue, totalNodes} =
-        useTypedSelector((state) => state.nodes);
+    const {
+        wasLoaded,
+        loading,
+        error,
+        nodesUptimeFilter,
+        searchValue,
+        sortOrder = ASCENDING,
+        sortValue = 'NodeId',
+        totalNodes,
+    } = useTypedSelector((state) => state.nodes);
     const problemFilter = useTypedSelector((state) => state.settings.problemFilter);
     const {autorefresh} = useTypedSelector((state) => state.schema);
 
@@ -67,18 +85,39 @@ export const Nodes = ({path, type, additionalNodesInfo = {}}: NodesProps) => {
 
     const [useNodesEndpoint] = useSetting(USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY);
 
-    const fetchNodes = useCallback(() => {
-        // For not DB entities we always use /compute endpoint instead of /nodes
-        // since /nodes can return data only for tenants
-        if (path && (!useNodesEndpoint || !isDatabaseEntityType(type))) {
-            dispatch(getComputeNodes({path}));
-        } else {
-            dispatch(getNodes({tenant: path}));
-        }
-    }, [dispatch, path, type, useNodesEndpoint]);
+    const requestParams = useNodesRequestParams({
+        filter: searchValue,
+        problemFilter,
+        nodesUptimeFilter,
+        sortOrder,
+        sortValue,
+    });
+
+    const fetchNodes = useCallback(
+        (isBackground) => {
+            if (!isBackground) {
+                dispatch(setDataWasNotLoaded());
+            }
+
+            const params = requestParams || {};
+
+            // For not DB entities we always use /compute endpoint instead of /nodes
+            // since /nodes can return data only for tenants
+            if (path && (!useNodesEndpoint || !isDatabaseEntityType(type))) {
+                dispatch(getComputeNodes({path, ...params}));
+            } else {
+                dispatch(getNodes({tenant: path, ...params}));
+            }
+        },
+        [dispatch, path, type, useNodesEndpoint, requestParams],
+    );
 
     useAutofetcher(fetchNodes, [fetchNodes], isClusterNodes ? true : autorefresh);
 
+    const [sort, handleSort] = useTableSort({sortValue, sortOrder}, (sortParams) =>
+        dispatch(setSort(sortParams as NodesSortParams)),
+    );
+
     const handleSearchQueryChange = (value: string) => {
         dispatch(setSearchValue(value));
     };
@@ -132,10 +171,8 @@ export const Nodes = ({path, type, additionalNodesInfo = {}}: NodesProps) => {
                 data={nodes || []}
                 columns={columns}
                 settings={DEFAULT_TABLE_SETTINGS}
-                initialSortOrder={{
-                    columnId: 'NodeId',
-                    order: DataTable.ASCENDING,
-                }}
+                sortOrder={sort}
+                onSort={handleSort}
                 emptyDataMessage={i18n('empty.default')}
                 rowClassName={(row) => b('node', {unavailable: isUnavailableNode(row)})}
             />

package/dist/containers/Nodes/getNodesColumns.tsx

@@ -6,26 +6,42 @@ import ProgressViewer from '../../components/ProgressViewer/ProgressViewer';
 import {TabletsStatistic} from '../../components/TabletsStatistic';
 import {NodeHostWrapper} from '../../components/NodeHostWrapper/NodeHostWrapper';
 
-import type {NodeAddress} from '../../utils/nodes';
+import {isSortableNodesProperty, type NodeAddress} from '../../utils/nodes';
 import {formatBytesToGigabyte} from '../../utils/index';
 
 import type {NodesPreparedEntity} from '../../store/reducers/nodes/types';
 
+const NODES_COLUMNS_IDS = {
+    NodeId: 'NodeId',
+    Host: 'Host',
+    DC: 'DC',
+    Rack: 'Rack',
+    Version: 'Version',
+    Uptime: 'Uptime',
+    Memory: 'Memory',
+    CPU: 'CPU',
+    LoadAverage: 'LoadAverage',
+    Tablets: 'Tablets',
+};
+
 interface GetNodesColumnsProps {
     tabletsPath?: string;
     getNodeRef?: (node?: NodeAddress) => string | null;
 }
 
-export function getNodesColumns({tabletsPath, getNodeRef}: GetNodesColumnsProps) {
+export function getNodesColumns({
+    tabletsPath,
+    getNodeRef,
+}: GetNodesColumnsProps): Column<NodesPreparedEntity>[] {
     const columns: Column<NodesPreparedEntity>[] = [
         {
-            name: 'NodeId',
+            name: NODES_COLUMNS_IDS.NodeId,
             header: '#',
             width: '80px',
             align: DataTable.RIGHT,
         },
         {
-            name: 'Host',
+            name: NODES_COLUMNS_IDS.Host,
             render: ({row}) => {
                 return <NodeHostWrapper node={row} getNodeRef={getNodeRef} />;
             },
@@ -33,21 +49,21 @@ export function getNodesColumns({tabletsPath, getNodeRef}: GetNodesColumnsProps)
             align: DataTable.LEFT,
         },
         {
-            name: 'DataCenter',
+            name: NODES_COLUMNS_IDS.DC,
             header: 'DC',
             align: DataTable.LEFT,
             render: ({row}) => (row.DataCenter ? row.DataCenter : '—'),
             width: '60px',
         },
         {
-            name: 'Rack',
+            name: NODES_COLUMNS_IDS.Rack,
             header: 'Rack',
             align: DataTable.LEFT,
             render: ({row}) => (row.Rack ? row.Rack : '—'),
             width: '80px',
         },
         {
-            name: 'Version',
+            name: NODES_COLUMNS_IDS.Version,
             width: '200px',
             align: DataTable.LEFT,
             render: ({row}) => {
@@ -55,14 +71,14 @@ export function getNodesColumns({tabletsPath, getNodeRef}: GetNodesColumnsProps)
             },
         },
         {
-            name: 'Uptime',
+            name: NODES_COLUMNS_IDS.Uptime,
             header: 'Uptime',
             sortAccessor: ({StartTime}) => StartTime && -StartTime,
             align: DataTable.RIGHT,
             width: '110px',
         },
         {
-            name: 'MemoryUsed',
+            name: NODES_COLUMNS_IDS.Memory,
             header: 'Memory',
             sortAccessor: ({MemoryUsed = 0}) => Number(MemoryUsed),
             defaultOrder: DataTable.DESCENDING,
@@ -77,7 +93,7 @@ export function getNodesColumns({tabletsPath, getNodeRef}: GetNodesColumnsProps)
             width: '120px',
         },
         {
-            name: 'PoolStats',
+            name: NODES_COLUMNS_IDS.CPU,
             header: 'CPU',
             sortAccessor: ({PoolStats = []}) =>
                 PoolStats.reduce((acc, item) => {
@@ -93,7 +109,7 @@ export function getNodesColumns({tabletsPath, getNodeRef}: GetNodesColumnsProps)
             width: '120px',
         },
         {
-            name: 'LoadAverage',
+            name: NODES_COLUMNS_IDS.LoadAverage,
             header: 'Load average',
             sortAccessor: ({LoadAverage = []}) =>
                 LoadAverage.slice(0, 1).reduce((acc, item) => acc + item, 0),
@@ -112,7 +128,7 @@ export function getNodesColumns({tabletsPath, getNodeRef}: GetNodesColumnsProps)
             width: '140px',
         },
         {
-            name: 'Tablets',
+            name: NODES_COLUMNS_IDS.Tablets,
             width: '430px',
             render: ({row}) => {
                 return row.Tablets ? (
@@ -129,5 +145,7 @@ export function getNodesColumns({tabletsPath, getNodeRef}: GetNodesColumnsProps)
         },
     ];
 
-    return columns;
+    return columns.map((column) => {
+        return {...column, sortable: isSortableNodesProperty(column.name)};
+    });
 }