ydb-embedded-ui 4.5.1 → 4.6.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## [4.6.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.5.2...v4.6.0) (2023-06-13)
+
+
+### Features
+
+* **QueryEditor:** add data and query modes ([#422](https://github.com/ydb-platform/ydb-embedded-ui/issues/422)) ([c142f03](https://github.com/ydb-platform/ydb-embedded-ui/commit/c142f03e9caeab4dcf1d34b3988e949a94213932))
+* rework navigation, update breadcrumbs ([#418](https://github.com/ydb-platform/ydb-embedded-ui/issues/418)) ([2d807d6](https://github.com/ydb-platform/ydb-embedded-ui/commit/2d807d6a52e13edcf2a7e1591672224339d91949))
+
+
+### Bug Fixes
+
+* **Diagnostics:** remove unneded tenantInfo fetch ([#420](https://github.com/ydb-platform/ydb-embedded-ui/issues/420)) ([ccaafe4](https://github.com/ydb-platform/ydb-embedded-ui/commit/ccaafe4ec9346ee1ec2ebd2a62600274f2175bfb))
+
+## [4.5.2](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.5.1...v4.5.2) (2023-06-06)
+
+
+### Bug Fixes
+
+* **Versions:** enable table dynamic render ([#416](https://github.com/ydb-platform/ydb-embedded-ui/issues/416)) ([3c877ea](https://github.com/ydb-platform/ydb-embedded-ui/commit/3c877ea88a0c4036213b38099676f473cf3ac2d6))
+
 ## [4.5.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v4.5.0...v4.5.1) (2023-06-02)
 
 

package/dist/components/FullNodeViewer/FullNodeViewer.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 
 import InfoViewer from '../InfoViewer/InfoViewer';
 import ProgressViewer from '../ProgressViewer/ProgressViewer';
-import PoolUsage from '../PoolUsage/PoolUsage';
+import {PoolUsage} from '../PoolUsage/PoolUsage';
 
 import {LOAD_AVERAGE_TIME_INTERVALS} from '../../utils/constants';
 import {calcUptime} from '../../utils';

package/dist/components/NodeHostWrapper/NodeHostWrapper.tsx

@@ -16,7 +16,7 @@ const b = block('ydb-node-host-wrapper');
 
 interface NodeHostWrapperProps {
     node: INodesPreparedEntity;
-    getNodeRef?: (node?: NodeAddress) => string;
+    getNodeRef?: (node?: NodeAddress) => string | null;
 }
 
 export const NodeHostWrapper = ({node, getNodeRef}: NodeHostWrapperProps) => {

package/dist/components/PoolUsage/PoolUsage.scss

@@ -1,4 +1,4 @@
-.pool-usage {
+.ydb-pool-usage {
     font-size: var(--yc-text-body-2-font-size);
     line-height: var(--yc-text-body-2-line-height);
     &__info {

package/dist/components/PoolUsage/PoolUsage.tsx

@@ -0,0 +1,50 @@
+import block from 'bem-cn-lite';
+
+import type {TPoolStats} from '../../types/api/nodes';
+
+import './PoolUsage.scss';
+
+const b = block('ydb-pool-usage');
+
+const getLineType = (fillWidth: number) => {
+    let fillColor = 'green';
+    if (fillWidth > 60 && fillWidth <= 80) {
+        fillColor = 'yellow';
+    } else if (fillWidth > 80) {
+        fillColor = 'red';
+    }
+
+    return fillColor;
+};
+
+interface PoolUsageProps {
+    data?: TPoolStats;
+}
+
+export const PoolUsage = ({data: pool = {}}: PoolUsageProps) => {
+    const {Threads, Name = 'Unknown', Usage = 0} = pool;
+    const dataExist = Usage && Threads;
+
+    const value = Math.floor(Usage * 100);
+    const fillWidth = value > 100 ? 100 : value;
+
+    return (
+        <div className={b()}>
+            <div className={b('info')}>
+                <div className={b('pool-name')}>{Name}</div>
+                {dataExist && (
+                    <div className={b('value')}>
+                        <div className={b('percents')}>{value < 1 ? '<1' : value}%</div>
+                        <div className={b('threads')}>(×{Threads})</div>
+                    </div>
+                )}
+            </div>
+            <div className={b('visual')}>
+                <div
+                    className={b('usage-line', {type: getLineType(fillWidth)})}
+                    style={{width: `${fillWidth}%`}}
+                />
+            </div>
+        </div>
+    );
+};

package/dist/containers/App/Content.js

@@ -5,7 +5,7 @@ import {connect} from 'react-redux';
 
 import {ThemeProvider} from '@gravity-ui/uikit';
 
-import routes, {createHref, CLUSTER_PAGES} from '../../routes';
+import routes, {createHref} from '../../routes';
 
 import Cluster from '../Cluster/Cluster';
 import Tenant from '../Tenant/Tenant';
@@ -23,6 +23,7 @@ import './App.scss';
 import PropTypes from 'prop-types';
 import HistoryContext from '../../contexts/HistoryContext';
 import Authentication from '../Authentication/Authentication';
+import {clusterTabsIds} from '../Cluster/utils';
 
 const b = cn('app');
 
@@ -44,7 +45,7 @@ export function Content(props) {
                     <Route path={routes.tabletsFilters} component={TabletsFilters} />
                     <Redirect
                         to={createHref(routes.cluster, {
-                            activeTab: CLUSTER_PAGES.tenants.id,
+                            activeTab: clusterTabsIds.tenants,
                         })}
                     />
                 </Switch>

package/dist/containers/AsideNavigation/AsideNavigation.tsx

@@ -9,11 +9,7 @@ import {AsideHeader, MenuItem as AsideHeaderMenuItem, FooterItem} from '@gravity
 
 import signOutIcon from '../../assets/icons/signOut.svg';
 import signInIcon from '../../assets/icons/signIn.svg';
-import databaseIcon from '../../assets/icons/server.svg';
-import storageIcon from '../../assets/icons/storage.svg';
-import clusterIcon from '../../assets/icons/cluster.svg';
 import ydbLogoIcon from '../../assets/icons/ydb.svg';
-import databasesIcon from '../../assets/icons/databases.svg';
 import userSecret from '../../assets/icons/user-secret.svg';
 import userChecked from '../../assets/icons/user-check.svg';
 import settingsIcon from '../../assets/icons/settings.svg';
@@ -21,7 +17,7 @@ import supportIcon from '../../assets/icons/support.svg';
 
 import {UserSettings} from '../UserSettings/UserSettings';
 
-import routes, {createHref, CLUSTER_PAGES} from '../../routes';
+import routes, {createHref} from '../../routes';
 
 import {logout} from '../../store/reducers/authentication';
 import {getParsedSettingValue, setSettingValue} from '../../store/reducers/settings/settings';
@@ -115,46 +111,8 @@ interface AsideNavigationProps {
     setSettingValue: (name: string, value: string) => void;
 }
 
-const items: MenuItem[] = [
-    {
-        id: CLUSTER_PAGES.tenants.id,
-        title: 'Databases',
-        icon: databasesIcon,
-        iconSize: 20,
-        location: createHref(routes.cluster, {
-            activeTab: CLUSTER_PAGES.tenants.id,
-        }),
-        locationKeys: ['/tenant'],
-    },
-    {
-        id: CLUSTER_PAGES.nodes.id,
-        title: 'Nodes',
-        icon: databaseIcon,
-        iconSize: 20,
-        location: createHref(routes.cluster, {activeTab: CLUSTER_PAGES.nodes.id}),
-        locationKeys: ['/node'],
-    },
-    {
-        id: CLUSTER_PAGES.storage.id,
-        title: 'Storage',
-        icon: storageIcon,
-        iconSize: 20,
-        location: createHref(routes.cluster, {
-            activeTab: CLUSTER_PAGES.storage.id,
-        }),
-        locationKeys: ['/storage'],
-    },
-    {
-        id: CLUSTER_PAGES.cluster.id,
-        title: 'Cluster',
-        icon: clusterIcon,
-        iconSize: 20,
-        location: createHref(routes.cluster, {
-            activeTab: CLUSTER_PAGES.cluster.id,
-        }),
-        locationKeys: ['/cluster/cluster'],
-    },
-];
+// FIXME: add items or delete
+const items: MenuItem[] = [];
 
 enum Panel {
     UserSettings = 'UserSettings',
@@ -172,17 +130,13 @@ function AsideNavigation(props: AsideNavigationProps) {
 
     const menuItems: AsideHeaderMenuItem[] = React.useMemo(() => {
         const {pathname} = location;
-        const isClusterPage = pathname === '/cluster';
         const menuItems: AsideHeaderMenuItem[] = items.map((item) => {
             const locationKeysCoincidence = item.locationKeys?.filter((key) =>
                 pathname.startsWith(key),
             );
-            let current =
+            const current =
                 (locationKeysCoincidence && locationKeysCoincidence.length > 0) ||
                 item.location.startsWith(pathname);
-            if (isClusterPage && item.id !== CLUSTER_PAGES.tenants.id) {
-                current = false;
-            }
             return {
                 id: item.id,
                 title: item.title,

package/dist/containers/Cluster/Cluster.scss

@@ -2,57 +2,16 @@
 
 .cluster {
     overflow: auto;
+    flex-grow: 1;
 
-    padding: 0 20px;
-    @include flex-container();
-
-    &_tab_cluster {
-        padding: 0px;
-    }
-
-    &__tab {
-        text-decoration: none;
-
-        &:first-letter {
-            text-transform: uppercase;
-        }
-    }
-
-    &__format-label {
-        margin-right: 15px;
-    }
-
-    &__title {
-        text-align: center;
-    }
+    height: 100%;
+    padding: 20px 20px 0px;
 
-    &__tooltip {
-        animation: none !important;
-    }
-
-    &__search {
-        width: 255px;
-        margin: 0 15px 0 0;
-    }
-
-    &__tablets {
-        padding: 0 !important;
-
-        .tablets-viewer__grid {
-            grid-template-columns: 125px;
-        }
-    }
-
-    &__controls {
-        display: flex;
-        justify-content: space-between;
+    @include flex-container();
 
-        margin: 17px 0;
-    }
+    &__content {
+        overflow: auto;
 
-    &__table-wrapper {
-        display: flex;
-        flex: 1 1 auto;
-        flex-direction: column;
+        height: 100%;
     }
 }

package/dist/containers/Cluster/Cluster.tsx

@@ -1,51 +1,133 @@
-import {useRouteMatch} from 'react-router';
+import {useEffect, useMemo} from 'react';
+import {useLocation, useRouteMatch} from 'react-router';
+import {useDispatch} from 'react-redux';
 import cn from 'bem-cn-lite';
+import qs from 'qs';
+
+import {Tabs} from '@gravity-ui/uikit';
 
 import type {AdditionalClusterProps, AdditionalVersionsProps} from '../../types/additionalProps';
-import routes, {CLUSTER_PAGES} from '../../routes';
+import type {AdditionalNodesInfo} from '../../utils/nodes';
+import routes from '../../routes';
 
-import {ClusterInfo} from './ClusterInfo/ClusterInfo';
+import {setHeader} from '../../store/reducers/header';
+import {getClusterInfo} from '../../store/reducers/cluster/cluster';
+import {getClusterNodes} from '../../store/reducers/clusterNodes/clusterNodes';
+import {parseNodesToVersionsValues, parseVersionsToVersionToColorMap} from '../../utils/versions';
+import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
+
+import {InternalLink} from '../../components/InternalLink';
 import Tenants from '../Tenants/Tenants';
 import {Nodes} from '../Nodes/Nodes';
 import Storage from '../Storage/Storage';
+import {Versions} from '../Versions/Versions';
+
+import {ClusterInfo} from './ClusterInfo/ClusterInfo';
+import {ClusterTab, clusterTabs, clusterTabsIds, getClusterPath} from './utils';
 
 import './Cluster.scss';
 
 const b = cn('cluster');
 
 interface ClusterProps {
-    additionalTenantsInfo?: any;
-    additionalNodesInfo?: any;
+    additionalTenantsInfo?: unknown;
+    additionalNodesInfo?: AdditionalNodesInfo;
     additionalClusterProps?: AdditionalClusterProps;
     additionalVersionsProps?: AdditionalVersionsProps;
 }
 
 function Cluster({
+    additionalClusterProps,
     additionalTenantsInfo,
     additionalNodesInfo,
-    additionalClusterProps,
     additionalVersionsProps,
 }: ClusterProps) {
-    const match = useRouteMatch<{activeTab?: string}>(routes.cluster);
-    const activeTab = match?.params?.activeTab ?? CLUSTER_PAGES.tenants.id;
-    const renderRoutes = () => {
+    const dispatch = useDispatch();
+
+    const match = useRouteMatch<{activeTab: string}>(routes.cluster);
+    const {activeTab = clusterTabsIds.tenants} = match?.params || {};
+
+    const location = useLocation();
+    const queryParams = qs.parse(location.search, {
+        ignoreQueryPrefix: true,
+    });
+    const {clusterName} = queryParams;
+
+    const {
+        data: cluster = {},
+        loading: clusterLoading,
+        wasLoaded: clusterWasLoaded,
+        error: clusterError,
+    } = useTypedSelector((state) => state.cluster);
+    const {
+        nodes,
+        loading: nodesLoading,
+        wasLoaded: nodesWasLoaded,
+    } = useTypedSelector((state) => state.clusterNodes);
+
+    const {Name} = cluster;
+
+    const infoLoading = (clusterLoading && !clusterWasLoaded) || (nodesLoading && !nodesWasLoaded);
+
+    useEffect(() => {
+        dispatch(getClusterNodes());
+    }, [dispatch]);
+
+    useAutofetcher(
+        () => dispatch(getClusterInfo(clusterName ? String(clusterName) : undefined)),
+        [dispatch, clusterName],
+        true,
+    );
+
+    useEffect(() => {
+        dispatch(
+            setHeader([
+                {
+                    text: Name || 'Cluster',
+                    link: getClusterPath(),
+                },
+            ]),
+        );
+    }, [dispatch, Name]);
+
+    const versionToColor = useMemo(() => {
+        if (additionalVersionsProps?.getVersionToColorMap) {
+            return additionalVersionsProps?.getVersionToColorMap();
+        }
+        return parseVersionsToVersionToColorMap(cluster?.Versions);
+    }, [additionalVersionsProps, cluster]);
+
+    const versionsValues = useMemo(() => {
+        return parseNodesToVersionsValues(nodes, versionToColor);
+    }, [nodes, versionToColor]);
+
+    const renderTab = () => {
         switch (activeTab) {
-            case CLUSTER_PAGES.tenants.id: {
+            case clusterTabsIds.tenants: {
                 return <Tenants additionalTenantsInfo={additionalTenantsInfo} />;
             }
-            case CLUSTER_PAGES.nodes.id: {
+            case clusterTabsIds.nodes: {
                 return <Nodes additionalNodesInfo={additionalNodesInfo} />;
             }
-            case CLUSTER_PAGES.storage.id: {
+            case clusterTabsIds.storage: {
                 return <Storage additionalNodesInfo={additionalNodesInfo} />;
             }
-            case CLUSTER_PAGES.cluster.id: {
-                return (
-                    <ClusterInfo
-                        additionalClusterProps={additionalClusterProps}
-                        additionalVersionsProps={additionalVersionsProps}
-                    />
-                );
+            case clusterTabsIds.versions: {
+                return <Versions versionToColor={versionToColor} />;
+            }
+            default: {
+                return null;
+            }
+        }
+    };
+
+    const getTabEntityCount = (tabId: ClusterTab) => {
+        switch (tabId) {
+            case clusterTabsIds.tenants: {
+                return cluster?.Tenants;
+            }
+            case clusterTabsIds.nodes: {
+                return cluster?.NodesTotal;
             }
             default: {
                 return null;
@@ -53,7 +135,41 @@ function Cluster({
         }
     };
 
-    return <div className={b({tab: activeTab})}>{renderRoutes()}</div>;
+    return (
+        <div className={b()}>
+            <ClusterInfo
+                cluster={cluster}
+                versionsValues={versionsValues}
+                loading={infoLoading}
+                error={clusterError}
+                additionalClusterProps={additionalClusterProps}
+            />
+
+            <div>
+                <Tabs
+                    size="l"
+                    allowNotSelected={true}
+                    activeTab={activeTab as string}
+                    items={clusterTabs.map((item) => {
+                        return {
+                            ...item,
+                            title: `${item.title} ${getTabEntityCount(item.id) || ''}`,
+                        };
+                    })}
+                    wrapTo={({id}, node) => {
+                        const path = getClusterPath(id as ClusterTab, queryParams);
+                        return (
+                            <InternalLink to={path} key={id}>
+                                {node}
+                            </InternalLink>
+                        );
+                    }}
+                />
+            </div>
+
+            <div className={b('content')}>{renderTab()}</div>
+        </div>
+    );
 }
 
 export default Cluster;

package/dist/containers/Cluster/ClusterInfo/ClusterInfo.scss

@@ -1,31 +1,48 @@
 @import '../../../styles/mixins';
 
 .cluster-info {
-    $_: &;
-    $progress_width: 100%;
+    width: 100%;
 
-    display: flex;
-    flex: 1 1 auto;
-    flex-direction: column;
+    &__header {
+        display: flex;
 
-    width: 100%;
+        width: fit-content;
+        margin-bottom: 20px;
 
-    font-size: var(--yc-text-body-2-font-size);
-    line-height: var(--yc-text-body-2-line-height);
+        cursor: pointer;
 
-    &__header {
-        padding: 20px;
+        &__expand-button {
+            margin-left: 6px;
 
-        border-bottom: 1px solid var(--yc-color-line-generic);
-        background: var(--yc-color-base-background);
+            &_rotate {
+                transform: rotate(180deg);
+            }
+        }
     }
 
-    &__title {
-        display: flex;
-        align-items: center;
+    &__title .entity-status__name {
+        font-size: var(--yc-text-header-1-font-size);
+        font-weight: var(--yc-text-header-font-weight);
+        line-height: var(--yc-text-header-1-line-height);
+    }
+
+    &__title-skeleton {
+        width: 20%;
+        min-width: 200px;
+        height: var(--yc-text-header-1-line-height);
+    }
 
-        margin-top: 16px;
+    &__error {
+        font-size: var(--yc-text-body-2-font-size);
+        line-height: var(--yc-text-body-2-line-height);
+    }
+
+    &__info {
         margin-bottom: 20px;
+
+        &_hidden {
+            display: none;
+        }
     }
 
     &__metric-field {
@@ -38,7 +55,7 @@
         align-items: center;
 
         & .tablet {
-            margin-bottom: 2px;
+            margin-top: 2px;
         }
     }