ydb-embedded-ui 3.5.0 → 4.1.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # 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)
+
+
+### ⚠ BREAKING CHANGES
+
+* app no longer parses query responses from older ydb versions
+* v0.1 explain plans are no longer rendered
+
+### Features
+
+* enable explain-script parsing, remove deprecated code ([5c6e9a2](https://github.com/ydb-platform/ydb-embedded-ui/commit/5c6e9a21026ea9eb3e32650e6fdda89c7900e7e6))
+* **QueryEditor:** add explain query modes ([39ad943](https://github.com/ydb-platform/ydb-embedded-ui/commit/39ad9434c1622e22901e6cc1af1568e0edf6b434))
+* **QueryEditor:** display query duration ([967f102](https://github.com/ydb-platform/ydb-embedded-ui/commit/967f10296d2362709654172ed7318509286efc78))
+* remove support for explain v0.1 ([c8741a6](https://github.com/ydb-platform/ydb-embedded-ui/commit/c8741a69b82053185a07c7ba563455d4f28ecdce))
+
+
+### Bug Fixes
+
+* **query:** correctly process NetworkError on actions failure ([cf5bd6c](https://github.com/ydb-platform/ydb-embedded-ui/commit/cf5bd6c5c4c2972fec93b2dc9135c92c639fa5f9))
+* **QueryExplain:** do not request ast when missing ([54cf151](https://github.com/ydb-platform/ydb-embedded-ui/commit/54cf151452e17256173736450f5727085ea591ff))
+* **QueryExplain:** request AST if it is empty ([d028b4e](https://github.com/ydb-platform/ydb-embedded-ui/commit/d028b4ed08a98281baff81683204f1cbc1c20c37))
+
 ## [3.5.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v3.4.5...v3.5.0) (2023-04-18)
 
 

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/Tenant/QueryEditor/QueriesHistory/QueriesHistory.tsx

@@ -2,8 +2,9 @@ import React, {useRef, useState} from 'react';
 import cn from 'bem-cn-lite';
 import _ from 'lodash';
 import {Button, Popup} from '@gravity-ui/uikit';
+
 import TruncatedQuery from '../../../../components/TruncatedQuery/TruncatedQuery';
-import {useSelector} from 'react-redux';
+import {useTypedSelector} from '../../../../utils/hooks';
 
 import './QueriesHistory.scss';
 
@@ -17,8 +18,7 @@ interface QueriesHistoryProps {
 
 function QueriesHistory(props: QueriesHistoryProps) {
     const [isHistoryVisible, setIsHistoryVisible] = useState(false);
-    const history: string[] =
-        useSelector((state: any) => state.executeQuery.history?.queries) ?? [];
+    const history = useTypedSelector((state) => state.executeQuery.history.queries) ?? [];
     const anchor = useRef(null);
 
     const onShowHistoryClick = () => {

package/dist/containers/Tenant/QueryEditor/QueryDuration/QueryDuration.scss

@@ -0,0 +1,8 @@
+.ydb-query-duration {
+    display: flex;
+    align-items: center;
+
+    margin-left: 10px;
+
+    color: var(--yc-color-text-complementary);
+}

package/dist/containers/Tenant/QueryEditor/QueryDuration/QueryDuration.tsx

@@ -0,0 +1,21 @@
+import block from 'bem-cn-lite';
+
+import {formatDurationToShortTimeFormat, parseUsToMs} from '../../../../utils/timeParsers';
+
+import './QueryDuration.scss';
+
+interface QueryDurationProps {
+    duration?: string;
+}
+
+const b = block('ydb-query-duration');
+
+export const QueryDuration = ({duration}: QueryDurationProps) => {
+    if (!duration) {
+        return null;
+    }
+
+    const parsedDuration = formatDurationToShortTimeFormat(parseUsToMs(duration), 1);
+
+    return <span className={b()}>{parsedDuration}</span>;
+};