ydb-embedded-ui 4.19.2 → 4.20.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## [4.20.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.19.3...v4.20.0) (2023-10-19)
+
+
+### Features
+
+* add top nodes by memory table ([#562](https://github.com/ydb-platform/ydb-embedded-ui/issues/562)) ([0d4ccf2](https://github.com/ydb-platform/ydb-embedded-ui/commit/0d4ccf2a85251fadad66182ab7d6ccd54a58e6cf))
+* add top tables links ([#564](https://github.com/ydb-platform/ydb-embedded-ui/issues/564)) ([e9b918f](https://github.com/ydb-platform/ydb-embedded-ui/commit/e9b918f0abace890cfafd9d7b219be5b69cac820))
+* **Storage:** hide nodes table for node page ([#557](https://github.com/ydb-platform/ydb-embedded-ui/issues/557)) ([9a25a00](https://github.com/ydb-platform/ydb-embedded-ui/commit/9a25a002b28824f7e616ac8143dbde12de0b0fb7))
+* **TenantOverview:** add cpu tab to tenant diagnostics ([#550](https://github.com/ydb-platform/ydb-embedded-ui/issues/550)) ([3048f84](https://github.com/ydb-platform/ydb-embedded-ui/commit/3048f8478d97249da4f7b66c26ed55f6f21e0f81))
+
+
+### Bug Fixes
+
+* add loader for healthcheck ([#563](https://github.com/ydb-platform/ydb-embedded-ui/issues/563)) ([6caea3d](https://github.com/ydb-platform/ydb-embedded-ui/commit/6caea3dec8f901090b0f8f7c1796880d7dc90a99))
+* **LinkToSchemaObject:** fix schema link ([#566](https://github.com/ydb-platform/ydb-embedded-ui/issues/566)) ([6ca8a70](https://github.com/ydb-platform/ydb-embedded-ui/commit/6ca8a705b6ddacb1f845aabb7761fd22c0c3b4e0))
+
+## [4.19.3](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.19.2...v4.19.3) (2023-10-13)
+
+
+### Bug Fixes
+
+* fix ProgressViewer background ([#556](https://github.com/ydb-platform/ydb-embedded-ui/issues/556)) ([6234462](https://github.com/ydb-platform/ydb-embedded-ui/commit/62344629713059fdfb191d3b8a57742f864dad66))
+* **Storage:** display all groups by default ([#554](https://github.com/ydb-platform/ydb-embedded-ui/issues/554)) ([1da83f1](https://github.com/ydb-platform/ydb-embedded-ui/commit/1da83f19661ed8e49dd7c8a0930ce89a7c8c0185))
+
 ## [4.19.2](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.19.1...v4.19.2) (2023-10-12)
 
 

package/dist/components/LinkToSchemaObject/LinkToSchemaObject.tsx

@@ -0,0 +1,20 @@
+import type {Location} from 'history';
+
+import {Link, type LinkProps} from '@gravity-ui/uikit';
+
+import {createExternalUILink, parseQuery} from '../../routes';
+
+interface LinkToSchemaObjectProps extends LinkProps {
+    path: string;
+    location: Location;
+}
+
+export function LinkToSchemaObject({path, location, ...props}: LinkToSchemaObjectProps) {
+    const queryParams = parseQuery(location);
+    const pathToSchemaObject = createExternalUILink({
+        ...queryParams,
+        schema: path,
+    });
+
+    return <Link view="normal" href={pathToSchemaObject} {...props} />;
+}

package/dist/components/ProgressViewer/ProgressViewer.tsx

@@ -66,7 +66,8 @@ export function ProgressViewer({
     warningThreshold = 60,
     dangerThreshold = 80,
 }: ProgressViewerProps) {
-    let fillWidth = Math.round((parseFloat(String(value)) / parseFloat(String(capacity))) * 100);
+    let fillWidth =
+        Math.round((parseFloat(String(value)) / parseFloat(String(capacity))) * 100) || 0;
     fillWidth = fillWidth > 100 ? 100 : fillWidth;
     let valueText: number | string | undefined = value,
         capacityText: number | string | undefined = capacity,

package/dist/components/QueryExecutionStatus/QueryExecutionStatus.tsx

@@ -14,14 +14,15 @@ const b = cn('kv-query-execution-status');
 
 interface QueryExecutionStatusProps {
     className?: string;
-    error?: AxiosError | Record<string, any>;
+    // TODO: Remove Record<string, any> when ECONNABORTED error case is fully typed
+    error?: AxiosError | Record<string, any> | string;
 }
 
 export const QueryExecutionStatus = ({className, error}: QueryExecutionStatusProps) => {
     let icon: ReactNode;
     let label: string;
 
-    if (error?.code === 'ECONNABORTED') {
+    if (typeof error === 'object' && error?.code === 'ECONNABORTED') {
         icon = <UiKitIcon data={questionIcon} size={16} />;
         label = 'Connection aborted';
     } else {

package/dist/components/UsageLabel/UsageLabel.scss

@@ -0,0 +1,6 @@
+.ydb-usage-label {
+    &_overload {
+        color: var(--yc-color-text-light-primary);
+        background-color: var(--yc-color-base-danger-heavy);
+    }
+}

package/dist/components/UsageLabel/UsageLabel.tsx

@@ -0,0 +1,22 @@
+import cn from 'bem-cn-lite';
+
+import {Label, type LabelProps} from '@gravity-ui/uikit';
+
+const b = cn('ydb-usage-label');
+
+interface UsageLabelProps extends LabelProps {
+    value: number | string;
+    overloadThreshold?: number;
+}
+
+export function UsageLabel({value, overloadThreshold = 90, theme, ...props}: UsageLabelProps) {
+    return (
+        <Label
+            theme={theme}
+            className={b({overload: Number(value) >= overloadThreshold})}
+            {...props}
+        >
+            {value || 0}%
+        </Label>
+    );
+}

package/dist/containers/AsideNavigation/AsideNavigation.tsx

@@ -28,6 +28,7 @@ import {ASIDE_HEADER_COMPACT_KEY, TENANT_INITIAL_PAGE_KEY} from '../../utils/con
 import {getTenantPath} from '../Tenant/TenantPages';
 import {UserSettings} from '../UserSettings/UserSettings';
 
+import i18n from './i18n';
 import './AsideNavigation.scss';
 
 const b = cn('kv-navigation');
@@ -58,15 +59,19 @@ function YbdInternalUser({ydbUser, logout}: YbdInternalUserProps) {
     return (
         <div className={b('internal-user')}>
             <div className={b('user-info-wrapper')}>
-                <div className={b('ydb-internal-user-title')}>YDB user</div>
+                <div className={b('ydb-internal-user-title')}>{i18n('account.user')}</div>
                 {ydbUser && <div className={b('username')}>{ydbUser}</div>}
             </div>
             {ydbUser ? (
-                <Button view="flat-secondary" onClick={logout} title="logout">
+                <Button view="flat-secondary" title={i18n('account.logout')} onClick={logout}>
                     <Icon data={signOutIcon} size={16} />
                 </Button>
             ) : (
-                <Button view="flat-secondary" title="login" onClick={handleLoginClick}>
+                <Button
+                    view="flat-secondary"
+                    title={i18n('account.login')}
+                    onClick={handleLoginClick}
+                >
                     <Icon data={signInIcon} size={16} />
                 </Button>
             )}
@@ -91,7 +96,7 @@ function YdbUserDropdown({isCompact, popupAnchor, ydbUser}: YdbUserDropdownProps
             compact={isCompact}
             item={{
                 id: 'user-popup',
-                title: ydbUser?.login ?? 'Account',
+                title: ydbUser?.login ?? i18n('navigation-item.account'),
                 current: isUserDropdownVisible,
                 icon: iconData,
                 iconSize: 22,
@@ -142,7 +147,7 @@ export const useGetLeftNavigationItems = () => {
         const items: MenuItem[] = [
             {
                 id: TENANT_PAGES_IDS.query,
-                title: 'Query',
+                title: i18n('pages.query'),
                 icon: terminalIcon,
                 iconSize: 20,
                 location: getTenantPath({
@@ -152,7 +157,7 @@ export const useGetLeftNavigationItems = () => {
             },
             {
                 id: TENANT_PAGES_IDS.diagnostics,
-                title: 'Diagnostics',
+                title: i18n('pages.diagnostics'),
                 icon: pulseIcon,
                 iconSize: 20,
                 location: getTenantPath({
@@ -212,7 +217,7 @@ function AsideNavigation(props: AsideNavigationProps) {
                             compact={compact}
                             item={{
                                 id: 'documentation',
-                                title: 'Documentation',
+                                title: i18n('navigation-item.documentation'),
                                 icon: supportIcon,
                                 iconSize: 24,
                                 onItemClick: () => {
@@ -224,7 +229,7 @@ function AsideNavigation(props: AsideNavigationProps) {
                         <FooterItem
                             item={{
                                 id: 'user-settings',
-                                title: 'Settings',
+                                title: i18n('navigation-item.settings'),
                                 icon: settingsIcon,
                                 iconSize: 24,
                                 current: visiblePanel === Panel.UserSettings,

package/dist/containers/AsideNavigation/i18n/en.json

@@ -0,0 +1,13 @@
+{
+  "pages.query": "Query",
+  "pages.diagnostics": "Diagnostics",
+
+  "navigation-item.documentation": "Documentation",
+  "navigation-item.settings": "Settings",
+  "navigation-item.account": "Account",
+
+  "account.user": "YDB User",
+
+  "account.login": "Login",
+  "account.logout": "Logout"
+}

package/dist/containers/AsideNavigation/i18n/index.ts

@@ -0,0 +1,11 @@
+import {i18n, Lang} from '../../../utils/i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-aside-navigation';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

package/dist/containers/AsideNavigation/i18n/ru.json

@@ -0,0 +1,13 @@
+{
+  "pages.query": "Редактор запросов",
+  "pages.diagnostics": "Диагностика",
+
+  "navigation-item.documentation": "Документация",
+  "navigation-item.settings": "Настройки",
+  "navigation-item.account": "Аккаунт",
+
+  "account.user": "Пользователь YDB",
+
+  "account.login": "Войти",
+  "account.logout": "Выйти"
+}

package/dist/containers/Node/NodeStructure/Pdisk.tsx

@@ -1,29 +1,34 @@
 import {useState} from 'react';
 import cn from 'bem-cn-lite';
-import _ from 'lodash';
+import {isEmpty} from 'lodash/fp';
 
 import {ArrowToggle, Button, Popover} from '@gravity-ui/uikit';
 
-import DataTable, {Column, Settings} from '@gravity-ui/react-data-table';
-
-import EntityStatus from '../../../components/EntityStatus/EntityStatus';
-import InfoViewer from '../../../components/InfoViewer/InfoViewer';
-import {ProgressViewer} from '../../../components/ProgressViewer/ProgressViewer';
-import {Icon} from '../../../components/Icon';
-import {Vdisk} from './Vdisk';
+import DataTable, {type Column} from '@gravity-ui/react-data-table';
 
+import type {ValueOf} from '../../../types/common';
+import type {
+    PreparedStructurePDisk,
+    PreparedStructureVDisk,
+} from '../../../store/reducers/node/types';
+import {EVDiskState} from '../../../types/api/vdisk';
 import {bytesToGB, pad9} from '../../../utils/utils';
 import {formatStorageValuesToGb} from '../../../utils/dataFormatters/dataFormatters';
 import {getPDiskType} from '../../../utils/pdisk';
-
 import {DEFAULT_TABLE_SETTINGS} from '../../../utils/constants';
+import EntityStatus from '../../../components/EntityStatus/EntityStatus';
+import InfoViewer, {type InfoViewerItem} from '../../../components/InfoViewer/InfoViewer';
+import {ProgressViewer} from '../../../components/ProgressViewer/ProgressViewer';
+import {Icon} from '../../../components/Icon';
+
+import {Vdisk} from './Vdisk';
 import {valueIsDefined} from './NodeStructure';
 import {PDiskTitleBadge} from './PDiskTitleBadge';
 
 const b = cn('kv-node-structure');
 
 interface PDiskProps {
-    data: Record<string, any>;
+    data: PreparedStructurePDisk;
     unfolded?: boolean;
     id: string;
     selectedVdiskId?: string;
@@ -37,8 +42,7 @@ enum VDiskTableColumnsIds {
     Info = 'Info',
 }
 
-type VDiskTableColumnsIdsKeys = keyof typeof VDiskTableColumnsIds;
-type VDiskTableColumnsIdsValues = typeof VDiskTableColumnsIds[VDiskTableColumnsIdsKeys];
+type VDiskTableColumnsIdsValues = ValueOf<typeof VDiskTableColumnsIds>;
 
 const vDiskTableColumnsNames: Record<VDiskTableColumnsIdsValues, string> = {
     VDiskSlotId: 'Slot id',
@@ -47,39 +51,35 @@ const vDiskTableColumnsNames: Record<VDiskTableColumnsIdsValues, string> = {
     Info: '',
 };
 
-interface RowType {
-    id: string;
-    [VDiskTableColumnsIds.slotId]: number;
-    [VDiskTableColumnsIds.VDiskState]: string;
-    AllocatedSize: string;
-    AvailableSize: string;
-}
-
 function getColumns({
     pDiskId,
     selectedVdiskId,
     nodeHref,
 }: {
-    pDiskId: number;
+    pDiskId: number | undefined;
     selectedVdiskId?: string;
     nodeHref?: string | null;
 }) {
-    const columns: Column<RowType>[] = [
+    const columns: Column<PreparedStructureVDisk>[] = [
         {
-            name: VDiskTableColumnsIds.slotId as string,
+            name: VDiskTableColumnsIds.slotId,
             header: vDiskTableColumnsNames[VDiskTableColumnsIds.slotId],
             width: 100,
-            render: ({value, row}) => {
+            render: ({row}) => {
                 let vdiskInternalViewerLink = '';
 
-                if (nodeHref && value !== undefined) {
+                if (nodeHref && pDiskId !== undefined && row.VDiskSlotId !== undefined) {
                     vdiskInternalViewerLink +=
-                        nodeHref + 'actors/vdisks/vdisk' + pad9(pDiskId) + '_' + pad9(value);
+                        nodeHref +
+                        'actors/vdisks/vdisk' +
+                        pad9(pDiskId) +
+                        '_' +
+                        pad9(row.VDiskSlotId);
                 }
 
                 return (
                     <div className={b('vdisk-id', {selected: row.id === selectedVdiskId})}>
-                        <span>{value as number}</span>
+                        <span>{row.VDiskSlotId}</span>
                         {vdiskInternalViewerLink && (
                             <Button
                                 size="s"
@@ -96,17 +96,19 @@ function getColumns({
             align: DataTable.LEFT,
         },
         {
-            name: VDiskTableColumnsIds.VDiskState as string,
+            name: VDiskTableColumnsIds.VDiskState,
             header: vDiskTableColumnsNames[VDiskTableColumnsIds.VDiskState],
             width: 70,
-            render: ({value}) => {
-                return <EntityStatus status={value === 'OK' ? 'green' : 'red'} />;
+            render: ({row}) => {
+                return (
+                    <EntityStatus status={row.VDiskState === EVDiskState.OK ? 'green' : 'red'} />
+                );
             },
-            sortAccessor: (row) => (row[VDiskTableColumnsIds.VDiskState] === 'OK' ? 1 : 0),
+            sortAccessor: (row) => (row.VDiskState === EVDiskState.OK ? 1 : 0),
             align: DataTable.CENTER,
         },
         {
-            name: VDiskTableColumnsIds.Size as string,
+            name: VDiskTableColumnsIds.Size,
             header: vDiskTableColumnsNames[VDiskTableColumnsIds.Size],
             width: 100,
             render: ({row}) => {
@@ -123,7 +125,7 @@ function getColumns({
             align: DataTable.CENTER,
         },
         {
-            name: VDiskTableColumnsIds.Info as string,
+            name: VDiskTableColumnsIds.Info,
             header: vDiskTableColumnsNames[VDiskTableColumnsIds.Info],
             width: 70,
             render: ({row}) => {
@@ -150,10 +152,31 @@ function getColumns({
     return columns;
 }
 
-export function PDisk(props: PDiskProps) {
-    const [unfolded, setUnfolded] = useState(props.unfolded ?? false);
+export function PDisk({
+    id,
+    data,
+    selectedVdiskId,
+    nodeHref,
+    unfolded: unfoldedFromProps,
+}: PDiskProps) {
+    const [unfolded, setUnfolded] = useState(unfoldedFromProps ?? false);
+
+    const {
+        TotalSize = 0,
+        AvailableSize = 0,
+        Device,
+        Guid,
+        PDiskId,
+        Path,
+        Realtime,
+        State,
+        Category,
+        SerialNumber,
+        vDisks,
+    } = data;
 
-    const data = props.data ?? {};
+    const total = Number(TotalSize);
+    const available = Number(AvailableSize);
 
     const onOpenPDiskDetails = () => {
         setUnfolded(true);
@@ -163,15 +186,12 @@ export function PDisk(props: PDiskProps) {
     };
 
     const renderVDisks = () => {
-        const {selectedVdiskId, data, nodeHref} = props;
-        const {vDisks} = data;
-
         return (
             <DataTable
                 theme="yandex-cloud"
                 data={vDisks}
-                columns={getColumns({nodeHref, pDiskId: data.PDiskId, selectedVdiskId})}
-                settings={{...DEFAULT_TABLE_SETTINGS, dynamicRender: false} as Settings}
+                columns={getColumns({nodeHref, pDiskId: PDiskId, selectedVdiskId})}
+                settings={{...DEFAULT_TABLE_SETTINGS, dynamicRender: false}}
                 rowClassName={(row) => {
                     return row.id === selectedVdiskId ? b('selected-vdisk') : '';
                 }}
@@ -180,30 +200,16 @@ export function PDisk(props: PDiskProps) {
     };
 
     const renderPDiskDetails = () => {
-        if (_.isEmpty(data)) {
+        if (isEmpty(data)) {
             return <div>No information about PDisk</div>;
         }
-        const {nodeHref} = props;
-        const {
-            TotalSize,
-            AvailableSize,
-            Device,
-            Guid,
-            PDiskId,
-            Path,
-            Realtime,
-            State,
-            Category,
-            SerialNumber,
-        } = data;
-
         let pDiskInternalViewerLink = '';
 
         if (nodeHref) {
             pDiskInternalViewerLink += nodeHref + 'actors/pdisks/pdisk' + pad9(PDiskId);
         }
 
-        const pdiskInfo: any = [
+        const pdiskInfo: InfoViewerItem[] = [
             {
                 label: 'PDisk Id',
                 value: (
@@ -236,19 +242,19 @@ export function PDisk(props: PDiskProps) {
         }
         pdiskInfo.push({
             label: 'Allocated Size',
-            value: bytesToGB(TotalSize - AvailableSize),
+            value: bytesToGB(total - available),
         });
         pdiskInfo.push({
             label: 'Available Size',
-            value: bytesToGB(AvailableSize),
+            value: bytesToGB(available),
         });
-        if (Number(TotalSize) >= 0 && Number(AvailableSize) >= 0) {
+        if (total >= 0 && available >= 0) {
             pdiskInfo.push({
                 label: 'Size',
                 value: (
                     <ProgressViewer
-                        value={TotalSize - AvailableSize}
-                        capacity={TotalSize}
+                        value={total - available}
+                        capacity={total}
                         formatValues={formatStorageValuesToGb}
                         colorizeProgress={true}
                         className={b('size')}
@@ -286,24 +292,24 @@ export function PDisk(props: PDiskProps) {
     };
 
     return (
-        <div className={b('pdisk')} id={props.id}>
+        <div className={b('pdisk')} id={id}>
             <div className={b('pdisk-header')}>
                 <div className={b('pdisk-title-wrapper')}>
-                    <EntityStatus status={data.Device} />
+                    <EntityStatus status={Device} />
                     <PDiskTitleBadge
                         label="PDiskID"
-                        value={data.PDiskId}
+                        value={PDiskId}
                         className={b('pdisk-title-id')}
                     />
                     <PDiskTitleBadge value={getPDiskType(data)} className={b('pdisk-title-type')} />
                     <ProgressViewer
-                        value={data.TotalSize - data.AvailableSize}
-                        capacity={data.TotalSize}
+                        value={total - available}
+                        capacity={total}
                         formatValues={formatStorageValuesToGb}
                         colorizeProgress={true}
                         className={b('pdisk-title-size')}
                     />
-                    <PDiskTitleBadge label="VDisks" value={data.vDisks.length} />
+                    <PDiskTitleBadge label="VDisks" value={vDisks.length} />
                 </div>
                 <Button
                     onClick={unfolded ? onClosePDiskDetails : onOpenPDiskDetails}

package/dist/containers/Node/NodeStructure/Vdisk.tsx

@@ -1,43 +1,19 @@
 import React from 'react';
 import cn from 'bem-cn-lite';
 
-import {ProgressViewer} from '../../../components/ProgressViewer/ProgressViewer';
+import type {TVDiskStateInfo} from '../../../types/api/vdisk';
 import {
     formatStorageValuesToGb,
     stringifyVdiskId,
 } from '../../../utils/dataFormatters/dataFormatters';
 import {bytesToGB, bytesToSpeed} from '../../../utils/utils';
 import EntityStatus from '../../../components/EntityStatus/EntityStatus';
-import {valueIsDefined} from './NodeStructure';
 import InfoViewer from '../../../components/InfoViewer/InfoViewer';
+import {ProgressViewer} from '../../../components/ProgressViewer/ProgressViewer';
 
-const b = cn('kv-node-structure');
+import {valueIsDefined} from './NodeStructure';
 
-interface VdiskProps {
-    AllocatedSize?: string;
-    DiskSpace?: string;
-    FrontQueues?: string;
-    Guid?: string;
-    Replicated?: boolean;
-    VDiskState?: string;
-    VDiskId?: {
-        GroupId: number;
-        GroupGeneration: number;
-        Ring: number;
-        Domain: number;
-        VDisk: number;
-    };
-    VDiskSlotId?: number;
-    Kind?: string;
-    SatisfactionRank?: {FreshRank: {Flag: string}; LevelRank: {Flag: string}};
-    AvailableSize?: string;
-    HasUnreadableBlobs?: boolean;
-    IncarnationGuid?: string;
-    InstanceGuid?: string;
-    StoragePoolName?: string;
-    ReadThroughput?: string;
-    WriteThroughput?: string;
-}
+const b = cn('kv-node-structure');
 
 export function Vdisk({
     AllocatedSize,
@@ -57,7 +33,7 @@ export function Vdisk({
     StoragePoolName,
     ReadThroughput,
     WriteThroughput,
-}: VdiskProps) {
+}: TVDiskStateInfo) {
     const vdiskInfo = [];
 
     if (valueIsDefined(VDiskSlotId)) {
@@ -81,16 +57,16 @@ export function Vdisk({
             value: <EntityStatus status={DiskSpace} />,
         });
     }
-    if (valueIsDefined(SatisfactionRank?.FreshRank.Flag)) {
+    if (valueIsDefined(SatisfactionRank?.FreshRank?.Flag)) {
         vdiskInfo.push({
             label: 'Fresh Rank Satisfaction',
-            value: <EntityStatus status={SatisfactionRank?.FreshRank.Flag} />,
+            value: <EntityStatus status={SatisfactionRank?.FreshRank?.Flag} />,
         });
     }
-    if (valueIsDefined(SatisfactionRank?.LevelRank.Flag)) {
+    if (valueIsDefined(SatisfactionRank?.LevelRank?.Flag)) {
         vdiskInfo.push({
             label: 'Level Rank Satisfaction',
-            value: <EntityStatus status={SatisfactionRank?.LevelRank.Flag} />,
+            value: <EntityStatus status={SatisfactionRank?.LevelRank?.Flag} />,
         });
     }
     vdiskInfo.push({label: 'Replicated', value: Replicated ? 'Yes' : 'No'});

package/dist/containers/Nodes/Nodes.tsx

@@ -26,7 +26,11 @@ import {
     useNodesRequestParams,
     useTableSort,
 } from '../../utils/hooks';
-import {isUnavailableNode, NodesUptimeFilterValues} from '../../utils/nodes';
+import {
+    isSortableNodesProperty,
+    isUnavailableNode,
+    NodesUptimeFilterValues,
+} from '../../utils/nodes';
 
 import {
     getNodes,
@@ -153,10 +157,14 @@ export const Nodes = ({path, type, additionalNodesProps = {}}: NodesProps) => {
     };
 
     const renderTable = () => {
-        const columns = getNodesColumns({
+        const rawColumns = getNodesColumns({
             getNodeRef: additionalNodesProps.getNodeRef,
         });
 
+        const columns = rawColumns.map((column) => {
+            return {...column, sortable: isSortableNodesProperty(column.name)};
+        });
+
         if (nodes && nodes.length === 0) {
             if (
                 problemFilter !== ProblemFilterValues.ALL ||