ydb-embedded-ui 3.2.3 → 3.3.0

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # Changelog
 
+## [3.3.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v3.2.3...v3.3.0) (2023-01-30)
+
+
+### Features
+
+* **Nodes:** use /viewer/json/nodes endpoint ([226cc70](https://github.com/ydb-platform/ydb-embedded-ui/commit/226cc70dcb89262890856b4d0cb03eac0675256d))
+* **Overview:** display topic stats for topics and streams ([08e9fe0](https://github.com/ydb-platform/ydb-embedded-ui/commit/08e9fe0ee379715229474322a03ec668e26bdb9b))
+* **Storage:** display vdisks over pdisks ([bb5d1fa](https://github.com/ydb-platform/ydb-embedded-ui/commit/bb5d1fa5ae2953ca30b13df45340b7a1a63056cb))
+
+
+### Bug Fixes
+
+* add duration formatter ([e325d98](https://github.com/ydb-platform/ydb-embedded-ui/commit/e325d98845d29dea208debdfcb88d330c1d6daee))
+* add protobuf time formatters ([c74cd9d](https://github.com/ydb-platform/ydb-embedded-ui/commit/c74cd9d0949674414ba2c9754e3dcc5c2be622a5))
+* add verticalBars component ([053ffa8](https://github.com/ydb-platform/ydb-embedded-ui/commit/053ffa8fd460f89f4296a96fcf46a9267ac4cae3))
+* **PDisk:** grey color for unknown state ([54f7e15](https://github.com/ydb-platform/ydb-embedded-ui/commit/54f7e159aaddd932ccecddfb10265ee596fed1e2))
+* **Storage:** request only static nodes ([e91e136](https://github.com/ydb-platform/ydb-embedded-ui/commit/e91e136d7c72bea694c7a282c83d577cc60e5386))
+* **Topic:** add reducer for describe_topic ([7c61dc9](https://github.com/ydb-platform/ydb-embedded-ui/commit/7c61dc906452df2e1a77a2ff602916f6ea785df5))
+* update PDisks and VDisks tests ([3bf660e](https://github.com/ydb-platform/ydb-embedded-ui/commit/3bf660e41d92e1a32444872c5fb9d47209bef8b5))
+
 ## [3.2.3](https://github.com/ydb-platform/ydb-embedded-ui/compare/v3.2.2...v3.2.3) (2023-01-16)
 
 

package/dist/components/InfoViewer/InfoViewer.scss

@@ -42,6 +42,16 @@
         color: var(--yc-color-text-secondary);
     }
 
+    &__label-text {
+        &_multiline {
+            overflow: visible;
+
+            max-width: 180px;
+
+            white-space: normal;
+        }
+    }
+
     &__dots {
         display: flex;
         flex: 1 1 auto;

package/dist/components/InfoViewer/InfoViewer.tsx

@@ -14,11 +14,19 @@ interface InfoViewerProps {
     dots?: boolean;
     size?: 's';
     className?: string;
+    multilineLabels?: boolean;
 }
 
 const b = cn('info-viewer');
 
-const InfoViewer = ({title, info, dots = true, size, className}: InfoViewerProps) => (
+const InfoViewer = ({
+    title,
+    info,
+    dots = true,
+    size,
+    className,
+    multilineLabels,
+}: InfoViewerProps) => (
     <div className={b({size}, className)}>
         {title && <div className={b('title')}>{title}</div>}
         {info && info.length > 0 ? (
@@ -26,7 +34,9 @@ const InfoViewer = ({title, info, dots = true, size, className}: InfoViewerProps
                 {info.map((data, infoIndex) => (
                     <div className={b('row')} key={data.label + infoIndex}>
                         <div className={b('label')}>
-                            {data.label}
+                            <div className={b('label-text', {multiline: multilineLabels})}>
+                                {data.label}
+                            </div>
                             {dots && <div className={b('dots')} />}
                         </div>
 

package/dist/components/InfoViewer/formatters/cdcStream.ts

@@ -0,0 +1,10 @@
+import {TCdcStreamDescription} from '../../../types/api/schema';
+
+import {createInfoFormatter} from '../utils';
+
+export const formatCdcStreamItem = createInfoFormatter<TCdcStreamDescription>({
+    values: {
+        Mode: (value) => value?.substring('ECdcStreamMode'.length),
+        Format: (value) => value?.substring('ECdcStreamFormat'.length),
+    },
+});

package/dist/components/InfoViewer/formatters/index.ts

@@ -1,2 +1,5 @@
 export * from './common';
 export * from './schema';
+export * from './topicStats';
+export * from './pqGroup';
+export * from './cdcStream';

package/dist/components/InfoViewer/formatters/pqGroup.ts

@@ -0,0 +1,51 @@
+import {
+    EMeteringMode,
+    TPersQueueGroupDescription,
+    TPQPartitionConfig,
+    TPQTabletConfig,
+} from '../../../types/api/schema';
+import {formatBps, formatBytes, formatNumber} from '../../../utils';
+import {HOUR_IN_SECONDS} from '../../../utils/constants';
+
+import {createInfoFormatter} from '../utils';
+
+const EMeteringModeToNames: Record<EMeteringMode, string> = {
+    [EMeteringMode.METERING_MODE_REQUEST_UNITS]: 'request-units',
+    [EMeteringMode.METERING_MODE_RESERVED_CAPACITY]: 'reserved-capacity',
+};
+
+export const formatPQGroupItem = createInfoFormatter<TPersQueueGroupDescription>({
+    values: {
+        Partitions: (value) => formatNumber(value?.length || 0),
+        PQTabletConfig: (value) => {
+            const hours =
+                Math.round((value.PartitionConfig.LifetimeSeconds / HOUR_IN_SECONDS) * 100) / 100;
+            return `${formatNumber(hours)} hours`;
+        },
+    },
+    labels: {
+        Partitions: 'Partitions count',
+        PQTabletConfig: 'Retention',
+    },
+});
+
+export const formatPQTabletConfig = createInfoFormatter<TPQTabletConfig>({
+    values: {
+        Codecs: (value) => value && Object.values(value.Codecs || {}).join(', '),
+        MeteringMode: (value) => value && EMeteringModeToNames[value],
+    },
+    labels: {
+        MeteringMode: 'Metering mode',
+    },
+});
+
+export const formatPQPartitionConfig = createInfoFormatter<TPQPartitionConfig>({
+    values: {
+        StorageLimitBytes: formatBytes,
+        WriteSpeedInBytesPerSecond: formatBps,
+    },
+    labels: {
+        StorageLimitBytes: 'Retention storage',
+        WriteSpeedInBytesPerSecond: 'Partitions write speed',
+    },
+});

package/dist/components/InfoViewer/formatters/schema.ts

@@ -1,10 +1,4 @@
-import type {
-    TCdcStreamDescription,
-    TIndexDescription,
-    TPersQueueGroupDescription,
-} from '../../../types/api/schema';
-import {formatNumber} from '../../../utils';
-import {HOUR_IN_SECONDS} from '../../../utils/constants';
+import {TIndexDescription} from '../../../types/api/schema';
 
 import {createInfoFormatter} from '../utils';
 
@@ -20,25 +14,3 @@ export const formatTableIndexItem = createInfoFormatter<TIndexDescription>({
         DataColumnNames: 'Includes',
     },
 });
-
-export const formatCdcStreamItem = createInfoFormatter<TCdcStreamDescription>({
-    values: {
-        Mode: (value) => value?.substring('ECdcStreamMode'.length),
-        Format: (value) => value?.substring('ECdcStreamFormat'.length),
-    },
-});
-
-export const formatPQGroupItem = createInfoFormatter<TPersQueueGroupDescription>({
-    values: {
-        Partitions: (value) => formatNumber(value?.length || 0),
-        PQTabletConfig: (value) => {
-            const hours =
-                Math.round((value.PartitionConfig.LifetimeSeconds / HOUR_IN_SECONDS) * 100) / 100;
-            return `${formatNumber(hours)} hours`;
-        },
-    },
-    labels: {
-        Partitions: 'Partitions count',
-        PQTabletConfig: 'Retention',
-    },
-});

package/dist/components/InfoViewer/formatters/topicStats.tsx

@@ -0,0 +1,50 @@
+import type {MultipleWindowsStat} from '../../../types/api/consumer';
+import type {TopicStats} from '../../../types/api/topic';
+import {formatBytes} from '../../../utils';
+import {DAY_IN_SECONDS, HOUR_IN_SECONDS, MINUTE_IN_SECONDS} from '../../../utils/constants';
+
+import {
+    parseProtobufTimestampToMs,
+    parseProtobufDurationToMs,
+    formatDurationToShortTimeFormat,
+} from '../../../utils/timeParsers';
+
+import {VerticalBars} from '../../VerticalBars/VerticalBars';
+
+import {createInfoFormatter} from '../utils';
+
+export const prepareBytesWritten = (data?: MultipleWindowsStat) => {
+    return {
+        per_minute:
+            data && data.per_minute ? Math.floor(Number(data.per_minute) / MINUTE_IN_SECONDS) : 0,
+        per_hour: data && data.per_hour ? Math.floor(Number(data.per_hour) / HOUR_IN_SECONDS) : 0,
+        per_day: data && data.per_day ? Math.floor(Number(data.per_day) / DAY_IN_SECONDS) : 0,
+    };
+};
+
+export const formatTopicStats = createInfoFormatter<TopicStats>({
+    values: {
+        store_size_bytes: formatBytes,
+        min_last_write_time: (value) => {
+            if (!value) {
+                return formatDurationToShortTimeFormat(0);
+            }
+
+            const durationMs = Date.now() - parseProtobufTimestampToMs(value);
+
+            // Duration could be negative because of the difference between server and local time
+            // Usually it below 100ms, so it could be omitted
+            return formatDurationToShortTimeFormat(durationMs < 0 ? 0 : durationMs);
+        },
+        max_write_time_lag: (value) =>
+            formatDurationToShortTimeFormat(value ? parseProtobufDurationToMs(value) : 0),
+        bytes_written: (value) =>
+            value && <VerticalBars values={Object.values(prepareBytesWritten(value))} />,
+    },
+    labels: {
+        store_size_bytes: 'Store size',
+        min_last_write_time: 'Partitions max time since last write',
+        max_write_time_lag: 'Partitions max write time lag',
+        bytes_written: 'Average write speed',
+    },
+});

package/dist/components/InfoViewer/schemaInfo/index.ts

@@ -1,3 +1 @@
-export * from './CDCStreamInfo';
 export * from './TableIndexInfo';
-export * from './PersQueueGroupInfo';

package/dist/components/InfoViewer/utils.ts

@@ -1,5 +1,7 @@
 import type {ReactNode} from 'react';
 
+import {InfoViewerItem} from './InfoViewer';
+
 type LabelMap<T> = {
     [label in keyof T]?: string;
 };
@@ -40,3 +42,16 @@ export function createInfoFormatter<Shape extends Record<string, any>>({
         value: formatValue(label, value, valueFormatters || {}, defaultValueFormatter),
     });
 }
+
+export const formatObject = <Shape extends Record<string, any>>(
+    formatter: <Key extends keyof Shape>(value: Key, label: Shape[Key]) => InfoViewerItem,
+    obj?: Partial<Shape>,
+): InfoViewerItem[] => {
+    if (!obj) {
+        return [];
+    }
+
+    return Object.entries(obj)
+        .map(([label, value]) => formatter(label, value))
+        .filter(({value}) => Boolean(value));
+};

package/dist/components/InternalLink/InternalLink.tsx

@@ -0,0 +1,17 @@
+import {Link, LinkProps} from 'react-router-dom';
+import cn from 'bem-cn-lite';
+
+const bLink = cn('yc-link');
+
+interface InternalLinkProps extends Omit<LinkProps, 'to'> {
+    to?: LinkProps['to'];
+}
+
+export const InternalLink = ({className, to, onClick, ...props}: InternalLinkProps) =>
+    to ? (
+        <Link to={to} onClick={onClick} className={bLink({view: 'normal'}, className)} {...props} />
+    ) : (
+        <span className={className} onClick={onClick}>
+            {props.children}
+        </span>
+    );

package/dist/components/InternalLink/index.ts

@@ -0,0 +1 @@
+export * from './InternalLink';

package/dist/components/Tablet/Tablet.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import cn from 'bem-cn-lite';
 
-import InternalLink from '../InternalLink/InternalLink';
+import {InternalLink} from '../InternalLink';
 
 import {getTabletLabel} from '../../utils/constants';
 import routes, {createHref} from '../../routes';

package/dist/components/TabletsStatistic/TabletsStatistic.tsx

@@ -29,7 +29,7 @@ const prepareTablets = (tablets: ITablets) => {
 
 interface TabletsStatisticProps {
     tablets: ITablets;
-    path: string;
+    path: string | undefined;
     nodeIds: string[] | number[];
 }
 

package/dist/components/VerticalBars/VerticalBars.scss

@@ -0,0 +1,15 @@
+.ydb-bars {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-end;
+
+    height: 20px;
+
+    &__value {
+        width: 6px;
+        min-height: 3px;
+        margin-right: 2px;
+
+        background-color: var(--yc-color-infographics-info-heavy);
+    }
+}

package/dist/components/VerticalBars/VerticalBars.tsx

@@ -0,0 +1,38 @@
+import cn from 'bem-cn-lite';
+import {useMemo} from 'react';
+
+import './VerticalBars.scss';
+
+const b = cn('ydb-bars');
+
+const calculateValuesInPercents = (values: number[]) => {
+    const max = Math.max(...values);
+
+    if (!max) {
+        return values;
+    }
+
+    const res = [];
+
+    for (const value of values) {
+        res.push((value / max) * 100);
+    }
+
+    return res;
+};
+
+interface VerticalBarsProps {
+    values: number[];
+}
+
+export const VerticalBars = ({values}: VerticalBarsProps) => {
+    const preparedValues = useMemo(() => calculateValuesInPercents(values), [values]);
+
+    const getBars = () => {
+        return preparedValues.map((value, index) => {
+            return <div key={index} style={{height: `${value}%`}} className={b('value')} />;
+        });
+    };
+
+    return <div className={b()}>{getBars()}</div>;
+};

package/dist/components/VerticalBars/index.ts

@@ -0,0 +1 @@
+export * from './VerticalBars';

package/dist/containers/App/App.js

@@ -2,10 +2,6 @@ import React from 'react';
 import {connect} from 'react-redux';
 import PropTypes from 'prop-types';
 
-import {configure as configureUiKit} from '@gravity-ui/uikit';
-import {configure as configureYdbUiComponents} from 'ydb-ui-components';
-import {i18n, Lang} from '../../utils/i18n';
-
 import ContentWrapper, {Content} from './Content';
 import AsideNavigation from '../AsideNavigation/AsideNavigation';
 
@@ -24,13 +20,6 @@ class App extends React.Component {
         children: PropTypes.node,
     };
 
-    constructor(props) {
-        super(props);
-        i18n.setLang(Lang.En);
-        configureYdbUiComponents({lang: Lang.En});
-        configureUiKit({lang: Lang.En});
-    }
-
     componentDidMount() {
         const {isAuthenticated, getUser} = this.props;
         if (isAuthenticated) {

package/dist/containers/App/App.scss

@@ -1,6 +1,5 @@
 @import url('https://fonts.googleapis.com/css2?family=Rubik&display=swap');
 @import '../../styles/mixins.scss';
-@import './NodesTable';
 
 * {
     // FIXME: this is an overkill, potentially could break external components, needs refactoring

package/dist/containers/Cluster/Cluster.tsx

@@ -2,7 +2,7 @@ import cn from 'bem-cn-lite';
 //@ts-ignore
 import Tenants from '../Tenants/Tenants';
 //@ts-ignore
-import Nodes from '../Nodes/Nodes';
+import {Nodes} from '../Nodes/Nodes';
 //@ts-ignore
 import Storage from '../Storage/Storage';
 import routes, {CLUSTER_PAGES} from '../../routes';
@@ -28,7 +28,7 @@ function Cluster(props: ClusterProps) {
                 return <Tenants {...props} />;
             }
             case CLUSTER_PAGES.nodes.id: {
-                return <Nodes {...props} />;
+                return <Nodes additionalNodesInfo={props.additionalNodesInfo} />;
             }
             case CLUSTER_PAGES.storage.id: {
                 //@ts-ignore

package/dist/containers/Nodes/Nodes.scss

@@ -1,7 +1,11 @@
 @import '../../styles/mixins.scss';
 
-.cluster-nodes {
+.ydb-nodes {
     overflow: auto;
+    flex-grow: 1;
+
+    height: 100%;
+
     @include flex-container();
 
     &__search {

package/dist/containers/Nodes/Nodes.tsx

@@ -0,0 +1,196 @@
+import {useCallback, useEffect} from 'react';
+import cn from 'bem-cn-lite';
+import {useDispatch} from 'react-redux';
+
+import DataTable from '@yandex-cloud/react-data-table';
+
+import {AccessDenied} from '../../components/Errors/403';
+import {Illustration} from '../../components/Illustration';
+import {Loader} from '../../components/Loader';
+
+import {Search} from '../../components/Search';
+import {ProblemFilter} from '../../components/ProblemFilter';
+import {UptimeFilter} from '../../components/UptimeFIlter';
+import {EntitiesCount} from '../../components/EntitiesCount';
+
+import routes, {CLUSTER_PAGES, createHref} from '../../routes';
+
+import {
+    ALL,
+    DEFAULT_TABLE_SETTINGS,
+    USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY,
+} from '../../utils/constants';
+import {useAutofetcher, useTypedSelector} from '../../utils/hooks';
+import {NodesUptimeFilterValues} from '../../utils/nodes';
+
+import {setHeader} from '../../store/reducers/header';
+import {
+    getNodes,
+    getFilteredPreparedNodesList,
+    setNodesUptimeFilter,
+    setSearchValue,
+    resetNodesState,
+    getComputeNodes,
+} from '../../store/reducers/nodes';
+import {changeFilter, getSettingValue} from '../../store/reducers/settings';
+import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
+
+import {getNodesColumns} from './getNodesColumns';
+
+import './Nodes.scss';
+
+import i18n from './i18n';
+
+const b = cn('ydb-nodes');
+
+interface IAdditionalNodesInfo extends Record<string, unknown> {
+    getNodeRef?: Function;
+}
+
+interface NodesProps {
+    tenantPath?: string;
+    className?: string;
+    additionalNodesInfo?: IAdditionalNodesInfo;
+}
+
+export const Nodes = ({tenantPath, className, additionalNodesInfo = {}}: NodesProps) => {
+    const dispatch = useDispatch();
+
+    const isClusterNodes = !tenantPath;
+
+    // Since Nodes component is used in several places,
+    // we need to reset filters, searchValue and loading state
+    // in nodes reducer when path changes
+    useEffect(() => {
+        dispatch(resetNodesState());
+    }, [dispatch, tenantPath]);
+
+    const {wasLoaded, loading, error, nodesUptimeFilter, searchValue, totalNodes} =
+        useTypedSelector((state) => state.nodes);
+    const problemFilter = useTypedSelector((state) => state.settings.problemFilter);
+    const {autorefresh} = useTypedSelector((state) => state.schema);
+
+    const nodes = useTypedSelector(getFilteredPreparedNodesList);
+
+    const useNodesEndpoint = useTypedSelector((state) =>
+        getSettingValue(state, USE_NODES_ENDPOINT_IN_DIAGNOSTICS_KEY),
+    );
+
+    const fetchNodes = useCallback(() => {
+        if (tenantPath && !JSON.parse(useNodesEndpoint)) {
+            dispatch(getComputeNodes(tenantPath));
+        } else {
+            dispatch(getNodes({tenant: tenantPath}));
+        }
+    }, [dispatch, tenantPath, useNodesEndpoint]);
+
+    useAutofetcher(fetchNodes, [fetchNodes], isClusterNodes ? true : autorefresh);
+
+    useEffect(() => {
+        if (isClusterNodes) {
+            dispatch(
+                setHeader([
+                    {
+                        text: CLUSTER_PAGES.nodes.title,
+                        link: createHref(routes.cluster, {activeTab: CLUSTER_PAGES.nodes.id}),
+                    },
+                ]),
+            );
+        }
+    }, [dispatch, isClusterNodes]);
+
+    const handleSearchQueryChange = (value: string) => {
+        dispatch(setSearchValue(value));
+    };
+
+    const handleProblemFilterChange = (value: string) => {
+        dispatch(changeFilter(value));
+    };
+
+    const handleUptimeFilterChange = (value: string) => {
+        dispatch(setNodesUptimeFilter(value as NodesUptimeFilterValues));
+    };
+
+    const renderControls = () => {
+        return (
+            <div className={b('controls')}>
+                <Search
+                    onChange={handleSearchQueryChange}
+                    placeholder="Host name"
+                    className={b('search')}
+                    value={searchValue}
+                />
+                <ProblemFilter value={problemFilter} onChange={handleProblemFilterChange} />
+                <UptimeFilter value={nodesUptimeFilter} onChange={handleUptimeFilterChange} />
+                <EntitiesCount
+                    total={totalNodes}
+                    current={nodes?.length || 0}
+                    label={'Nodes'}
+                    loading={loading && !wasLoaded}
+                />
+            </div>
+        );
+    };
+
+    const onShowTooltip = (...args: Parameters<typeof showTooltip>) => {
+        dispatch(showTooltip(...args));
+    };
+
+    const onHideTooltip = () => {
+        dispatch(hideTooltip());
+    };
+
+    const renderTable = () => {
+        const columns = getNodesColumns({
+            showTooltip: onShowTooltip,
+            hideTooltip: onHideTooltip,
+            getNodeRef: additionalNodesInfo.getNodeRef,
+        });
+
+        if (nodes && nodes.length === 0) {
+            if (problemFilter !== ALL || nodesUptimeFilter !== NodesUptimeFilterValues.All) {
+                return <Illustration name="thumbsUp" width="200" />;
+            }
+        }
+
+        return (
+            <div className={b('table-wrapper')}>
+                <div className={b('table-content')}>
+                    <DataTable
+                        theme="yandex-cloud"
+                        data={nodes || []}
+                        columns={columns}
+                        settings={DEFAULT_TABLE_SETTINGS}
+                        initialSortOrder={{
+                            columnId: 'NodeId',
+                            order: DataTable.ASCENDING,
+                        }}
+                        emptyDataMessage={i18n('empty.default')}
+                    />
+                </div>
+            </div>
+        );
+    };
+
+    const renderContent = () => {
+        return (
+            <div className={b(null, className)}>
+                {renderControls()}
+                {renderTable()}
+            </div>
+        );
+    };
+
+    if (loading && !wasLoaded) {
+        return <Loader size={isClusterNodes ? 'l' : 'm'} />;
+    }
+
+    if (error) {
+        if (error.status === 403) {
+            return <AccessDenied />;
+        }
+        return <div>{error.statusText}</div>;
+    }
+
+    return renderContent();
+};

package/dist/containers/{App → Nodes}/NodesTable.scss

@@ -1,4 +1,4 @@
-.kv-nodes {
+.ydb-nodes-table {
     &__host-name-wrapper {
         display: flex;
     }
@@ -20,7 +20,7 @@
 }
 
 .data-table__row:hover {
-    .kv-nodes__external-button {
+    .ydb-nodes-table__external-button {
         display: inline-flex;
     }
 }