ydb-embedded-ui 4.0.0 → 4.1.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Changelog
 
+## [4.1.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.0.0...v4.1.0) (2023-05-10)
+
+
+### Features
+
+* **Navigation:** remove legacy navigation setting support ([8544f11](https://github.com/ydb-platform/ydb-embedded-ui/commit/8544f114255ba44834d38cd9e709450c49e4a96a))
+
+
+### Bug Fixes
+
+* disable link and popover for unavailable nodes ([990a9fa](https://github.com/ydb-platform/ydb-embedded-ui/commit/990a9fa42a7133a6c40d07e11c3518240e18b4a9))
+
 ## [4.0.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v3.5.0...v4.0.0) (2023-04-28)
 
 

package/dist/components/ClusterInfo/ClusterInfo.tsx

@@ -15,7 +15,7 @@ import {Tablet} from '../Tablet';
 //@ts-ignore
 import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
 //@ts-ignore
-import {getClusterInfo} from '../../store/reducers/cluster';
+import {getClusterInfo} from '../../store/reducers/cluster/cluster';
 //@ts-ignore
 import {clusterName, backend, customBackend} from '../../store';
 
@@ -68,6 +68,8 @@ class ClusterInfo extends React.Component<ClusterInfoProps> {
         return 0;
     }
 
+    private autofetcher: any;
+
     componentDidMount() {
         const {setHeader} = this.props;
         setHeader([
@@ -107,8 +109,6 @@ class ClusterInfo extends React.Component<ClusterInfoProps> {
         return <div className={b(null, className)}>{helper || this.renderContent()}</div>;
     }
 
-    private autofetcher: any;
-
     private getInfo() {
         const {cluster = {}, additionalClusterInfo = [], singleClusterMode} = this.props;
         const {StorageTotal, StorageUsed} = cluster;

package/dist/{containers/Nodes/NodesTable.scss → components/NodeHostWrapper/NodeHostWrapper.scss}

@@ -1,12 +1,10 @@
-.ydb-nodes-table {
-    &__host-field-wrapper {
-        display: flex;
-    }
+.ydb-node-host-wrapper {
+    display: flex;
 
     &__host-wrapper {
         display: flex;
 
-        max-width: 330px;
+        width: 330px;
     }
 
     &__host {
@@ -21,7 +19,7 @@
 }
 
 .data-table__row:hover {
-    .ydb-nodes-table__external-button {
+    .ydb-node-host-wrapper__external-button {
         display: inline-flex;
     }
 }

package/dist/components/NodeHostWrapper/NodeHostWrapper.tsx

@@ -0,0 +1,60 @@
+import block from 'bem-cn-lite';
+
+import {Button, Popover, PopoverBehavior} from '@gravity-ui/uikit';
+
+import type {INodesPreparedEntity} from '../../types/store/nodes';
+import {getDefaultNodePath} from '../../containers/Node/NodePages';
+import {isUnavailableNode, NodeAddress} from '../../utils/nodes';
+
+import EntityStatus from '../EntityStatus/EntityStatus';
+import {NodeEndpointsTooltip} from '../Tooltips/NodeEndpointsTooltip/NodeEndpointsTooltip';
+import {IconWrapper} from '../Icon';
+
+import './NodeHostWrapper.scss';
+
+const b = block('ydb-node-host-wrapper');
+
+interface NodeHostWrapperProps {
+    node: INodesPreparedEntity;
+    getNodeRef?: (node?: NodeAddress) => string;
+}
+
+export const NodeHostWrapper = ({node, getNodeRef}: NodeHostWrapperProps) => {
+    if (!node.Host) {
+        return <span>—</span>;
+    }
+
+    const isNodeAvailable = !isUnavailableNode(node);
+    const nodeRef = isNodeAvailable && getNodeRef ? getNodeRef(node) + 'internal' : undefined;
+
+    return (
+        <div className={b()}>
+            <Popover
+                disabled={!isNodeAvailable}
+                content={<NodeEndpointsTooltip data={node} />}
+                placement={['top', 'bottom']}
+                behavior={PopoverBehavior.Immediate}
+            >
+                <div className={b('host-wrapper')}>
+                    <EntityStatus
+                        name={node.Host}
+                        status={node.SystemState}
+                        path={isNodeAvailable ? getDefaultNodePath(node.NodeId) : undefined}
+                        hasClipboardButton
+                        className={b('host')}
+                    />
+                    {nodeRef && (
+                        <Button
+                            size="s"
+                            href={nodeRef}
+                            className={b('external-button')}
+                            target="_blank"
+                        >
+                            <IconWrapper name="external" />
+                        </Button>
+                    )}
+                </div>
+            </Popover>
+        </div>
+    );
+};

package/dist/containers/AsideNavigation/AsideNavigation.tsx

@@ -1,4 +1,4 @@
-import React, {useEffect, useState} from 'react';
+import React, {useState} from 'react';
 import {connect} from 'react-redux';
 import {useLocation} from 'react-router';
 import {useHistory} from 'react-router-dom';
@@ -170,16 +170,6 @@ function AsideNavigation(props: AsideNavigationProps) {
         props.setSettingValue(ASIDE_HEADER_COMPACT_KEY, JSON.stringify(compact));
     };
 
-    // navigation managed its compact state internally before, and its approach is not compatible with settings
-    // to migrate, save the incoming value again; save only `false` because `true` is the default value
-    // assume it is safe to remove this code block if it is at least a few months old
-    // there a two of these, search for a similar comment
-    useEffect(() => {
-        if (props.compact === false) {
-            setIsCompact(props.compact);
-        }
-    }, []); // eslint-disable-line react-hooks/exhaustive-deps
-
     const menuItems: AsideHeaderMenuItem[] = React.useMemo(() => {
         const {pathname} = location;
         const isClusterPage = pathname === '/cluster';

package/dist/containers/Header/Header.tsx

@@ -8,7 +8,7 @@ import Divider from '../../components/Divider/Divider';
 import {Icon} from '../../components/Icon';
 
 import {clusterName as clusterNameLocation, backend, customBackend} from '../../store';
-import {getClusterInfo} from '../../store/reducers/cluster';
+import {getClusterInfo} from '../../store/reducers/cluster/cluster';
 import {getHostInfo} from '../../store/reducers/host';
 import {HeaderItemType} from '../../store/reducers/header';
 

package/dist/containers/Nodes/getNodesColumns.tsx

@@ -1,29 +1,22 @@
-import cn from 'bem-cn-lite';
 import DataTable, {Column} from '@gravity-ui/react-data-table';
-import {Button, Popover, PopoverBehavior} from '@gravity-ui/uikit';
+import {Popover} from '@gravity-ui/uikit';
 
-import {IconWrapper} from '../../components/Icon';
-import EntityStatus from '../../components/EntityStatus/EntityStatus';
 import PoolsGraph from '../../components/PoolsGraph/PoolsGraph';
 import ProgressViewer from '../../components/ProgressViewer/ProgressViewer';
 import {TabletsStatistic} from '../../components/TabletsStatistic';
-import {NodeEndpointsTooltip} from '../../components/Tooltips/NodeEndpointsTooltip/NodeEndpointsTooltip';
+import {NodeHostWrapper} from '../../components/NodeHostWrapper/NodeHostWrapper';
 
+import type {NodeAddress} from '../../utils/nodes';
 import {formatBytesToGigabyte} from '../../utils/index';
-import {INodesPreparedEntity} from '../../types/store/nodes';
-import {showTooltip as externalShowTooltip} from '../../store/reducers/tooltip';
-
-import {getDefaultNodePath} from '../Node/NodePages';
-
-import './NodesTable.scss';
 
-const b = cn('ydb-nodes-table');
+import type {INodesPreparedEntity} from '../../types/store/nodes';
+import {showTooltip as externalShowTooltip} from '../../store/reducers/tooltip';
 
 interface GetNodesColumnsProps {
     showTooltip: (...args: Parameters<typeof externalShowTooltip>) => void;
     hideTooltip: VoidFunction;
     tabletsPath?: string;
-    getNodeRef?: Function;
+    getNodeRef?: (node?: NodeAddress) => string;
 }
 
 export function getNodesColumns({
@@ -42,39 +35,7 @@ export function getNodesColumns({
         {
             name: 'Host',
             render: ({row}) => {
-                const nodeRef = getNodeRef ? getNodeRef(row) + 'internal' : undefined;
-                if (typeof row.Host === 'undefined') {
-                    return <span>—</span>;
-                }
-                return (
-                    <div className={b('host-field-wrapper')}>
-                        <Popover
-                            content={<NodeEndpointsTooltip data={row} />}
-                            placement={['top', 'bottom']}
-                            behavior={PopoverBehavior.Immediate}
-                        >
-                            <div className={b('host-wrapper')}>
-                                <EntityStatus
-                                    name={row.Host}
-                                    status={row.SystemState}
-                                    path={getDefaultNodePath(row.NodeId)}
-                                    hasClipboardButton
-                                    className={b('host')}
-                                />
-                                {nodeRef && (
-                                    <Button
-                                        size="s"
-                                        href={nodeRef}
-                                        className={b('external-button')}
-                                        target="_blank"
-                                    >
-                                        <IconWrapper name="external" />
-                                    </Button>
-                                )}
-                            </div>
-                        </Popover>
-                    </div>
-                );
+                return <NodeHostWrapper node={row} getNodeRef={getNodeRef} />;
             },
             width: '350px',
             align: DataTable.LEFT,

package/dist/containers/Storage/StorageNodes/StorageNodes.scss

@@ -20,18 +20,6 @@
             margin-right: 0px;
         }
     }
-    &__fqdn-field-wrapper {
-        width: 330px;
-    }
-    &__fqdn-wrapper {
-        display: flex;
-        align-items: center;
-
-        max-width: 330px;
-    }
-    &__fqdn {
-        overflow: hidden;
-    }
 
     &__group-id {
         font-weight: 500;
@@ -40,16 +28,4 @@
     &__node_unavailable {
         opacity: 0.6;
     }
-
-    &__external-button {
-        display: none;
-
-        margin-left: 4px;
-    }
-}
-
-.data-table__row:hover {
-    .global-storage-nodes__external-button {
-        display: inline-flex;
-    }
 }

package/dist/containers/Storage/StorageNodes/StorageNodes.tsx

@@ -2,11 +2,6 @@ import _ from 'lodash';
 import cn from 'bem-cn-lite';
 
 import DataTable, {Column, Settings, SortOrder} from '@gravity-ui/react-data-table';
-import {Button, Popover, PopoverBehavior} from '@gravity-ui/uikit';
-
-import {NodeEndpointsTooltip} from '../../../components/Tooltips/NodeEndpointsTooltip/NodeEndpointsTooltip';
-import EntityStatus from '../../../components/EntityStatus/EntityStatus';
-import {IconWrapper} from '../../../components/Icon';
 
 import {VisibleEntities} from '../../../store/reducers/storage';
 import {
@@ -15,7 +10,7 @@ import {
     NodesUptimeFilterValues,
 } from '../../../utils/nodes';
 
-import {getDefaultNodePath} from '../../Node/NodePages';
+import {NodeHostWrapper} from '../../../components/NodeHostWrapper/NodeHostWrapper';
 
 import {EmptyFilter} from '../EmptyFilter/EmptyFilter';
 import {PDisk} from '../PDisk';
@@ -100,39 +95,7 @@ function StorageNodes({
             header: tableColumnsNames[TableColumnsIds.FQDN],
             width: 350,
             render: ({row}) => {
-                const nodeRef = getNodeRef ? getNodeRef(row) + 'internal' : undefined;
-                if (!row.Host) {
-                    return <span>—</span>;
-                }
-                return (
-                    <div className={b('fqdn-field-wrapper')}>
-                        <Popover
-                            content={<NodeEndpointsTooltip data={row} />}
-                            placement={['top', 'bottom']}
-                            behavior={PopoverBehavior.Immediate}
-                        >
-                            <div className={b('fqdn-wrapper')}>
-                                <EntityStatus
-                                    name={row.Host}
-                                    showStatus={false}
-                                    path={getDefaultNodePath(row.NodeId)}
-                                    hasClipboardButton
-                                    className={b('fqdn')}
-                                />
-                                {nodeRef && (
-                                    <Button
-                                        size="s"
-                                        href={nodeRef}
-                                        className={b('external-button')}
-                                        target="_blank"
-                                    >
-                                        <IconWrapper name="external" />
-                                    </Button>
-                                )}
-                            </div>
-                        </Popover>
-                    </div>
-                );
+                return <NodeHostWrapper node={row} getNodeRef={getNodeRef} />;
             },
             align: DataTable.LEFT,
         },

package/dist/containers/Tenants/Tenants.js

@@ -20,7 +20,7 @@ import {formatCPU, formatBytesToGigabyte, formatNumber} from '../../utils';
 import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
 import {withSearch} from '../../HOCS';
 import {ALL, DEFAULT_TABLE_SETTINGS, TENANT_INITIAL_TAB_KEY} from '../../utils/constants';
-import {getTenantsInfo} from '../../store/reducers/tenants';
+import {getTenantsInfo} from '../../store/reducers/tenants/tenants';
 import {changeFilter, getSettingValue} from '../../store/reducers/settings';
 import {setHeader} from '../../store/reducers/header';