ydb-embedded-ui 4.4.2 → 4.5.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # Changelog
 
+## [4.5.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.4.2...v4.5.0) (2023-06-01)
+
+
+### Features
+
+* **ClusterInfo:** update versions bar, rework DC and Tablets fields ([#407](https://github.com/ydb-platform/ydb-embedded-ui/issues/407)) ([4824f0d](https://github.com/ydb-platform/ydb-embedded-ui/commit/4824f0d2be9d7bec3641302c88b39a3a87f37c18))
+
 ## [4.4.2](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.4.1...v4.4.2) (2023-05-29)
 
 

package/dist/components/ContentWithPopup/ContentWithPopup.tsx

@@ -0,0 +1,51 @@
+import {ReactNode, useRef, useState} from 'react';
+
+import {Popup, PopupProps} from '@gravity-ui/uikit';
+
+interface ContentWithPopupProps extends PopupProps {
+    content: ReactNode;
+    className?: string;
+    children?: ReactNode;
+}
+
+export const ContentWithPopup = ({
+    children,
+    content,
+    className,
+    hasArrow = true,
+    placement = ['top', 'bottom'],
+    ...props
+}: ContentWithPopupProps) => {
+    const [isPopupVisible, setIsPopupVisible] = useState(false);
+    const anchor = useRef(null);
+
+    const showPopup = () => {
+        setIsPopupVisible(true);
+    };
+
+    const hidePopup = () => {
+        setIsPopupVisible(false);
+    };
+
+    return (
+        <>
+            <Popup
+                anchorRef={anchor}
+                open={isPopupVisible}
+                placement={placement}
+                hasArrow={hasArrow}
+                {...props}
+            >
+                {content}
+            </Popup>
+            <span
+                className={className}
+                ref={anchor}
+                onMouseEnter={showPopup}
+                onMouseLeave={hidePopup}
+            >
+                {children}
+            </span>
+        </>
+    );
+};

package/dist/components/ExternalLinkWithIcon/ExternalLinkWithIcon.scss

@@ -0,0 +1,7 @@
+.ydb-external-link-with-icon {
+    display: flex;
+    flex-wrap: nowrap;
+    align-items: center;
+
+    white-space: nowrap;
+}

package/dist/components/ExternalLinkWithIcon/ExternalLinkWithIcon.tsx

@@ -0,0 +1,24 @@
+import block from 'bem-cn-lite';
+
+import {Link} from '@gravity-ui/uikit';
+
+import {IconWrapper} from '../Icon/Icon';
+
+import './ExternalLinkWithIcon.scss';
+
+const b = block('ydb-external-link-with-icon');
+
+interface ExternalLinkWithIconProps {
+    title: string;
+    url: string;
+}
+
+export const ExternalLinkWithIcon = ({title, url}: ExternalLinkWithIconProps) => {
+    return (
+        <Link href={url} target="_blank" className={b()}>
+            {title}
+            {'\u00a0'}
+            <IconWrapper name="external" viewBox={'0 0 16 16'} width={16} height={16} />
+        </Link>
+    );
+};

package/dist/components/NodeHostWrapper/NodeHostWrapper.tsx

@@ -7,7 +7,7 @@ import {getDefaultNodePath} from '../../containers/Node/NodePages';
 import {isUnavailableNode, NodeAddress} from '../../utils/nodes';
 
 import EntityStatus from '../EntityStatus/EntityStatus';
-import {NodeEndpointsTooltip} from '../Tooltips/NodeEndpointsTooltip/NodeEndpointsTooltip';
+import {NodeEndpointsTooltipContent} from '../TooltipsContent';
 import {IconWrapper} from '../Icon';
 
 import './NodeHostWrapper.scss';
@@ -31,7 +31,7 @@ export const NodeHostWrapper = ({node, getNodeRef}: NodeHostWrapperProps) => {
         <div className={b()}>
             <Popover
                 disabled={!isNodeAvailable}
-                content={<NodeEndpointsTooltip data={node} />}
+                content={<NodeEndpointsTooltipContent data={node} />}
                 placement={['top', 'bottom']}
                 behavior={PopoverBehavior.Immediate}
             >

package/dist/components/PoolBar/PoolBar.scss

@@ -1,4 +1,4 @@
-.pool-bar {
+.ydb-pool-bar {
     position: relative;
 
     width: 6px;
@@ -10,6 +10,11 @@
     border: 1px solid;
     border-radius: 1px;
 
+    &__popup-content {
+        width: 170px;
+        padding: 10px;
+    }
+
     &:last-child {
         margin-right: 0;
     }

package/dist/components/PoolBar/PoolBar.tsx

@@ -0,0 +1,39 @@
+import block from 'bem-cn-lite';
+
+import type {TPoolStats} from '../../types/api/nodes';
+
+import {ContentWithPopup} from '../ContentWithPopup/ContentWithPopup';
+import {PoolTooltipContent} from '../TooltipsContent';
+
+import './PoolBar.scss';
+
+const b = block('ydb-pool-bar');
+
+const getBarType = (usage: number) => {
+    if (usage >= 75) {
+        return 'danger';
+    } else if (usage >= 50 && usage < 75) {
+        return 'warning';
+    } else {
+        return 'normal';
+    }
+};
+
+interface PoolBarProps {
+    data?: TPoolStats;
+}
+
+export const PoolBar = ({data = {}}: PoolBarProps) => {
+    const {Usage: usage = 0} = data;
+    const usagePercents = Math.min(usage * 100, 100);
+    const type = getBarType(usagePercents);
+
+    return (
+        <ContentWithPopup
+            className={b({type})}
+            content={<PoolTooltipContent data={data} className={b('popup-content')} />}
+        >
+            <div style={{height: `${usagePercents}%`}} className={b('value', {type})} />
+        </ContentWithPopup>
+    );
+};

package/dist/components/PoolsGraph/PoolsGraph.scss

@@ -1,3 +1,3 @@
-.pools-graph {
+.ydb-pools-graph {
     display: flex;
 }

package/dist/components/PoolsGraph/PoolsGraph.tsx

@@ -0,0 +1,23 @@
+import block from 'bem-cn-lite';
+
+import type {TPoolStats} from '../../types/api/nodes';
+
+import {PoolBar} from '../PoolBar/PoolBar';
+
+import './PoolsGraph.scss';
+
+const b = block('ydb-pools-graph');
+
+interface PoolsGraphProps {
+    pools?: TPoolStats[];
+}
+
+export const PoolsGraph = ({pools = []}: PoolsGraphProps) => {
+    return (
+        <div className={b()}>
+            {pools.map((item, index) => (
+                <PoolBar key={index} data={item} />
+            ))}
+        </div>
+    );
+};

package/dist/components/Tablet/Tablet.scss

@@ -1,7 +1,6 @@
 .tablet {
     display: flex;
     justify-content: center;
-    align-items: center;
 
     width: 18px;
     height: 18px;
@@ -22,6 +21,10 @@
         }
     }
 
+    &__popup-content {
+        padding: 10px;
+    }
+
     &__type {
         line-height: 17px;
 

package/dist/components/Tablet/Tablet.tsx

@@ -1,12 +1,12 @@
-import {useRef} from 'react';
 import cn from 'bem-cn-lite';
 
 import type {TTabletStateInfo} from '../../types/api/tablet';
-import type {ShowTooltipFunction} from '../../types/store/tooltip';
 import {getTabletLabel} from '../../utils/constants';
 import routes, {createHref} from '../../routes';
 
+import {ContentWithPopup} from '../ContentWithPopup/ContentWithPopup';
 import {InternalLink} from '../InternalLink';
+import {TabletTooltipContent} from '../TooltipsContent';
 
 import './Tablet.scss';
 
@@ -14,46 +14,22 @@ const b = cn('tablet');
 
 interface TabletProps {
     tablet?: TTabletStateInfo;
-    onMouseEnter?: (...args: Parameters<ShowTooltipFunction>) => void;
-    onMouseLeave?: VoidFunction;
 }
 
-export const Tablet = ({
-    tablet = {},
-    onMouseEnter = () => {},
-    onMouseLeave = () => {},
-}: TabletProps) => {
-    const ref = useRef(null);
-
-    const _onTabletMouseEnter = () => {
-        onMouseEnter(ref.current, tablet, 'tablet');
-    };
-
-    const _onTabletClick = () => {
-        const {TabletId: id} = tablet;
-
-        if (id) {
-            onMouseLeave();
-        }
-    };
-
+export const Tablet = ({tablet = {}}: TabletProps) => {
     const {TabletId: id} = tablet;
     const status = tablet.Overall?.toLowerCase();
 
     return (
-        <InternalLink
-            onClick={_onTabletClick}
-            to={id && createHref(routes.tablet, {id})}
+        <ContentWithPopup
             className={b('wrapper')}
+            content={<TabletTooltipContent data={tablet} className={b('popup-content')} />}
         >
-            <div
-                ref={ref}
-                className={b({status})}
-                onMouseEnter={_onTabletMouseEnter}
-                onMouseLeave={onMouseLeave}
-            >
-                <div className={b('type')}>{[getTabletLabel(tablet.Type)]}</div>
-            </div>
-        </InternalLink>
+            <InternalLink to={id && createHref(routes.tablet, {id})}>
+                <div className={b({status})}>
+                    <div className={b('type')}>{[getTabletLabel(tablet.Type)]}</div>
+                </div>
+            </InternalLink>
+        </ContentWithPopup>
     );
 };

package/dist/components/{Tooltips/NodeEndpointsTooltip/NodeEndpointsTooltip.scss → TooltipsContent/NodeEndpointsTooltipContent/NodeEndpointsTooltipContent.scss}

@@ -1,4 +1,4 @@
-.ydb-node-endpoints-tooltip {
+.ydb-node-endpoints-tooltip-content {
     .info-viewer__value {
         min-width: 70px;
     }

package/dist/components/{Tooltips/NodeEndpointsTooltip/NodeEndpointsTooltip.tsx → TooltipsContent/NodeEndpointsTooltipContent/NodeEndpointsTooltipContent.tsx}

@@ -4,15 +4,15 @@ import type {TSystemStateInfo} from '../../../types/api/nodes';
 
 import {InfoViewer, InfoViewerItem} from '../../InfoViewer';
 
-import './NodeEndpointsTooltip.scss';
+import './NodeEndpointsTooltipContent.scss';
 
-const b = block('ydb-node-endpoints-tooltip');
+const b = block('ydb-node-endpoints-tooltip-content');
 
 interface NodeEdpointsTooltipProps {
     data?: TSystemStateInfo;
 }
 
-export const NodeEndpointsTooltip = ({data}: NodeEdpointsTooltipProps) => {
+export const NodeEndpointsTooltipContent = ({data}: NodeEdpointsTooltipProps) => {
     const info: InfoViewerItem[] = [];
 
     if (data?.Rack) {

package/dist/components/TooltipsContent/PoolTooltipContent/PoolTooltipContent.tsx

@@ -0,0 +1,24 @@
+import type {TPoolStats} from '../../../types/api/nodes';
+
+import {InfoViewer, createInfoFormatter, formatObject} from '../../InfoViewer';
+
+const formatPool = createInfoFormatter<TPoolStats>({
+    values: {
+        Usage: (value) => value && `${(Number(value) * 100).toFixed(2)} %`,
+    },
+    labels: {
+        Name: 'Pool',
+    },
+    defaultValueFormatter: (value) => value && String(value),
+});
+
+interface PoolTooltipContentProps {
+    data?: TPoolStats;
+    className?: string;
+}
+
+export const PoolTooltipContent = ({data = {}, className}: PoolTooltipContentProps) => {
+    const info = formatObject(formatPool, data);
+
+    return <InfoViewer className={className} info={info} dots={false} size={'s'} />;
+};

package/dist/components/TooltipsContent/TabletTooltipContent/TabletTooltipContent.tsx

@@ -0,0 +1,34 @@
+import type {TTabletStateInfo} from '../../../types/api/tablet';
+
+import {calcUptime} from '../../../utils';
+import {InfoViewer, createInfoFormatter, formatObject} from '../../InfoViewer';
+
+const formatTablet = createInfoFormatter<TTabletStateInfo>({
+    values: {
+        ChangeTime: (value) => calcUptime(value),
+    },
+    labels: {
+        TabletId: 'Tablet',
+    },
+    defaultValueFormatter: (value) => value && String(value),
+});
+
+interface TabletTooltipContentProps {
+    data?: TTabletStateInfo;
+    className?: string;
+}
+
+export const TabletTooltipContent = ({data = {}, className}: TabletTooltipContentProps) => {
+    const {TabletId, NodeId, State, Type, ChangeTime, Generation} = data;
+
+    const info = formatObject(formatTablet, {
+        TabletId,
+        NodeId,
+        State,
+        Type,
+        ChangeTime,
+        Generation,
+    });
+
+    return <InfoViewer className={className} info={info} dots={false} size={'s'} />;
+};

package/dist/components/TooltipsContent/index.ts

@@ -0,0 +1,3 @@
+export * from './NodeEndpointsTooltipContent/NodeEndpointsTooltipContent';
+export * from './TabletTooltipContent/TabletTooltipContent';
+export * from './PoolTooltipContent/PoolTooltipContent';

package/dist/containers/Cluster/Cluster.tsx

@@ -1,10 +1,10 @@
 import {useRouteMatch} from 'react-router';
 import cn from 'bem-cn-lite';
 
-import type {AdditionalVersionsProps} from '../../types/additionalProps';
+import type {AdditionalClusterProps, AdditionalVersionsProps} from '../../types/additionalProps';
 import routes, {CLUSTER_PAGES} from '../../routes';
 
-import {ClusterInfo} from '../ClusterInfo/ClusterInfo';
+import {ClusterInfo} from './ClusterInfo/ClusterInfo';
 import Tenants from '../Tenants/Tenants';
 import {Nodes} from '../Nodes/Nodes';
 import Storage from '../Storage/Storage';
@@ -14,32 +14,36 @@ import './Cluster.scss';
 const b = cn('cluster');
 
 interface ClusterProps {
-    additionalClusterInfo?: any;
     additionalTenantsInfo?: any;
     additionalNodesInfo?: any;
+    additionalClusterProps?: AdditionalClusterProps;
     additionalVersionsProps?: AdditionalVersionsProps;
 }
 
-function Cluster(props: ClusterProps) {
+function Cluster({
+    additionalTenantsInfo,
+    additionalNodesInfo,
+    additionalClusterProps,
+    additionalVersionsProps,
+}: ClusterProps) {
     const match = useRouteMatch<{activeTab?: string}>(routes.cluster);
     const activeTab = match?.params?.activeTab ?? CLUSTER_PAGES.tenants.id;
     const renderRoutes = () => {
         switch (activeTab) {
             case CLUSTER_PAGES.tenants.id: {
-                return <Tenants {...props} />;
+                return <Tenants additionalTenantsInfo={additionalTenantsInfo} />;
             }
             case CLUSTER_PAGES.nodes.id: {
-                return <Nodes additionalNodesInfo={props.additionalNodesInfo} />;
+                return <Nodes additionalNodesInfo={additionalNodesInfo} />;
             }
             case CLUSTER_PAGES.storage.id: {
-                //@ts-ignore
-                return <Storage {...props} />;
+                return <Storage additionalNodesInfo={additionalNodesInfo} />;
             }
             case CLUSTER_PAGES.cluster.id: {
                 return (
                     <ClusterInfo
-                        additionalClusterInfo={props.additionalClusterInfo}
-                        additionalVersionsProps={props.additionalVersionsProps}
+                        additionalClusterProps={additionalClusterProps}
+                        additionalVersionsProps={additionalVersionsProps}
                     />
                 );
             }

package/dist/containers/{ClusterInfo → Cluster/ClusterInfo}/ClusterInfo.scss

@@ -1,4 +1,4 @@
-@import '../../styles/mixins';
+@import '../../../styles/mixins';
 
 .cluster-info {
     $_: &;
@@ -20,14 +20,7 @@
         background: var(--yc-color-base-background);
     }
 
-    &__loader {
-        display: flex;
-        justify-content: center;
-
-        margin-top: 16px;
-    }
-
-    &__common {
+    &__title {
         display: flex;
         align-items: center;
 
@@ -35,16 +28,6 @@
         margin-bottom: 20px;
     }
 
-    &__title {
-        margin-bottom: 15px;
-
-        font-weight: 600;
-    }
-
-    &__url {
-        margin-right: 14px;
-    }
-
     &__metric-field {
         margin-top: -8px;
     }
@@ -54,8 +37,6 @@
         flex-wrap: wrap;
         align-items: center;
 
-        margin-left: 15px;
-
         & .tablet {
             margin-bottom: 2px;
         }
@@ -81,31 +62,18 @@
         margin-left: 15px;
         padding: 0 !important;
     }
-    &__clipboard-button {
-        display: flex;
-        align-items: center;
 
-        margin-left: 5px;
-    }
-    &__progress-label {
-        margin: 0 10px 0 0;
+    &__links {
+        display: flex;
+        flex-flow: row wrap;
 
-        font-weight: 200;
+        gap: 12px;
     }
 
-    &__version-progress {
+    &__clipboard-button {
         display: flex;
         align-items: center;
 
-        width: $progress_width;
-        margin-top: 20px;
-
-        & .yc-progress {
-            width: $progress_width;
-        }
-    }
-
-    & .yc-progress__stack {
-        cursor: pointer;
+        margin-left: 5px;
     }
 }