ydb-embedded-ui 2.4.4 → 2.6.0

package/CHANGELOG.md

@@ -1,5 +1,47 @@
 # Changelog
 
+## [2.6.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v2.5.0...v2.6.0) (2022-12-05)
+
+
+### Features
+
+* **Describe:** add topic data for CDCStream ([3a289d4](https://github.com/ydb-platform/ydb-embedded-ui/commit/3a289d4f6452e3f2d719c0d508f48b389fd044d7))
+* **Diagnostics:** add consumers tab for CdcStream ([22c6efd](https://github.com/ydb-platform/ydb-embedded-ui/commit/22c6efdd39d85ab1585943bc13d88cf03f9bc2ae))
+* **Overview:** add topic data for CDCStream ([be80545](https://github.com/ydb-platform/ydb-embedded-ui/commit/be80545df65a03820265875fedd98c6f181af491))
+
+
+### Bug Fixes
+
+* **Compute:** update data on path change ([1783240](https://github.com/ydb-platform/ydb-embedded-ui/commit/17832403623ae3e718f47aec508c834cd2e3458c))
+* **Diagnostics:** render db tabs for not root dbs ([7d46ce2](https://github.com/ydb-platform/ydb-embedded-ui/commit/7d46ce2783a58b1ae6e41cae6592e78f95d61bcc))
+* **Healthcheck:** render loader on path change ([ec40f19](https://github.com/ydb-platform/ydb-embedded-ui/commit/ec40f19c0b369de0b8d0658b4a1dd68c5c419c1c))
+* **InfoViewer:** allow multiline values ([17755dc](https://github.com/ydb-platform/ydb-embedded-ui/commit/17755dc2eae7b6fc0a56ff70da95679fc590dccb))
+* **Network:** update data on path change ([588c53f](https://github.com/ydb-platform/ydb-embedded-ui/commit/588c53f80a81376301216a77d9ead95cdff9812f))
+* **SchemaTree:** do not expand childless components ([90468de](https://github.com/ydb-platform/ydb-embedded-ui/commit/90468de74b74e00a66255ba042378c9d7e1cbc27))
+* **Storage:** update data on path change ([f5486bc](https://github.com/ydb-platform/ydb-embedded-ui/commit/f5486bcb2838b9e290c566089980533b4d22d035))
+* **Tablets:** fix postponed data update on path change ([d474c6c](https://github.com/ydb-platform/ydb-embedded-ui/commit/d474c6cb36597f0c720ef3bb8d0360ec73973e26))
+* **TopQueries:** update data on path change ([32d7720](https://github.com/ydb-platform/ydb-embedded-ui/commit/32d77208b8ef09682c41160c60a1a7742b0c6c4c))
+
+## [2.5.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v2.4.4...v2.5.0) (2022-11-25)
+
+
+### Features
+
+* **Nodes:** add uptime filter ([9bb4f66](https://github.com/ydb-platform/ydb-embedded-ui/commit/9bb4f664df8fadec5b5e612b2adb866c28415efa))
+* **NodesViewer:** add uptime filter ([a802442](https://github.com/ydb-platform/ydb-embedded-ui/commit/a8024422a09ff95e55c399d26046f5103cab3f89))
+* **Storage:** add nodes uptime filter ([d8cfea1](https://github.com/ydb-platform/ydb-embedded-ui/commit/d8cfea14369e8235d1f7ef86a9a3f34c05efdf5c))
+
+
+### Bug Fixes
+
+* **Consumers:** add autorefresh to useAutofetcher ([e0da2a1](https://github.com/ydb-platform/ydb-embedded-ui/commit/e0da2a11fcd18cb8ba808a07873a78cbf7191cdc))
+* **Consumers:** add loader ([a59f472](https://github.com/ydb-platform/ydb-embedded-ui/commit/a59f472fd7c9347bcde8cc21d4001f999fc88110))
+* **QueryExplain:** fix schema rerender on path change ([eb52978](https://github.com/ydb-platform/ydb-embedded-ui/commit/eb529787bf747bb2bf49bae65676011426341a23))
+* **Storage:** add message on empty nodes with small uptime ([70959ab](https://github.com/ydb-platform/ydb-embedded-ui/commit/70959ab90bd0f81ebab7712b7d34c0ca80f4dd0b))
+* **Storage:** fix uneven PDisks ([0269dba](https://github.com/ydb-platform/ydb-embedded-ui/commit/0269dbab0336ae5b8cbf43e1b52458e932527a66))
+* **StorageNodes:** fix message display on not empty data ([bb5fffa](https://github.com/ydb-platform/ydb-embedded-ui/commit/bb5fffa786cde3f680375f8e11e3893c52c4f6da))
+* **UsageFilter:** add min-width ([56b2701](https://github.com/ydb-platform/ydb-embedded-ui/commit/56b2701a17420e0322fac0223bce26e18a2f0e47))
+
 ## [2.4.4](https://github.com/ydb-platform/ydb-embedded-ui/compare/v2.4.3...v2.4.4) (2022-11-22)
 
 

package/dist/components/InfoViewer/InfoViewer.scss

@@ -24,10 +24,10 @@
 
     &__row {
         display: flex;
-        align-items: flex-end;
+        align-items: baseline;
 
         max-width: 100%;
-        height: 24px;
+        padding-top: 4px;
     }
 
     &__label {
@@ -54,7 +54,7 @@
     &__value {
         display: flex;
 
-        white-space: nowrap;
+        word-break: break-all;
     }
 
     &_size {

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

@@ -32,7 +32,8 @@ 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;
+            const hours =
+                Math.round((value.PartitionConfig.LifetimeSeconds / HOUR_IN_SECONDS) * 100) / 100;
             return `${formatNumber(hours)} hours`;
         },
     },

package/dist/components/InfoViewer/schemaInfo/CDCStreamInfo.tsx

@@ -1,44 +1,45 @@
 import type {TEvDescribeSchemeResult, TCdcStreamDescription} from '../../../types/api/schema';
+import {useTypedSelector} from '../../../utils/hooks';
+import {selectSchemaData} from '../../../store/reducers/schema';
 
-import {formatCdcStreamItem, formatCommonItem} from '../formatters';
+import {formatCdcStreamItem, formatPQGroupItem, formatCommonItem} from '../formatters';
 import {InfoViewer, InfoViewerItem} from '..';
 
-const DISPLAYED_FIELDS: Set<keyof TCdcStreamDescription> = new Set([
-    'Mode',
-    'Format',
-]);
+const DISPLAYED_FIELDS: Set<keyof TCdcStreamDescription> = new Set(['Mode', 'Format']);
 
 interface CDCStreamInfoProps {
     data?: TEvDescribeSchemeResult;
+    childrenPaths?: string[];
 }
 
-export const CDCStreamInfo = ({data}: CDCStreamInfoProps) => {
-    if (!data) {
-        return (
-            <div className="error">No CDC Stream data</div>
-        );
+export const CDCStreamInfo = ({data, childrenPaths}: CDCStreamInfoProps) => {
+    const pqGroupData = useTypedSelector((state) => selectSchemaData(state, childrenPaths?.[0]));
+
+    if (!data || !pqGroupData) {
+        return <div className="error">No Changefeed data</div>;
     }
 
-    const TableIndex = data.PathDescription?.CdcStreamDescription;
+    const cdcStream = data.PathDescription?.CdcStreamDescription;
+    const pqGroup = pqGroupData?.PathDescription?.PersQueueGroup;
+
     const info: Array<InfoViewerItem> = [];
 
-    info.push(formatCommonItem('PathType', data.PathDescription?.Self?.PathType));
     info.push(formatCommonItem('CreateStep', data.PathDescription?.Self?.CreateStep));
 
     let key: keyof TCdcStreamDescription;
-    for (key in TableIndex) {
+    for (key in cdcStream) {
         if (DISPLAYED_FIELDS.has(key)) {
-            info.push(formatCdcStreamItem(key, TableIndex?.[key]));
+            info.push(formatCdcStreamItem(key, cdcStream?.[key]));
         }
     }
 
-    return (
-        <>
-            {info.length ? (
-                <InfoViewer info={info}></InfoViewer>
-            ) : (
-                <>Empty</>
-            )}
-        </>
+    info.push(formatPQGroupItem('Partitions', pqGroup?.Partitions || []));
+    info.push(
+        formatPQGroupItem(
+            'PQTabletConfig',
+            pqGroup?.PQTabletConfig || {PartitionConfig: {LifetimeSeconds: 0}},
+        ),
     );
+
+    return <InfoViewer title={'Changefeed'} info={info} />;
 };

package/dist/components/InfoViewer/schemaInfo/PersQueueGroupInfo.tsx

@@ -9,9 +9,7 @@ interface PersQueueGrouopInfoProps {
 
 export const PersQueueGroupInfo = ({data}: PersQueueGrouopInfoProps) => {
     if (!data) {
-        return (
-            <div className="error">No PersQueueGroup data</div>
-        );
+        return <div className="error">No PersQueueGroup data</div>;
     }
 
     const pqGroup = data.PathDescription?.PersQueueGroup;
@@ -20,15 +18,12 @@ export const PersQueueGroupInfo = ({data}: PersQueueGrouopInfoProps) => {
     info.push(formatCommonItem('PathType', data.PathDescription?.Self?.PathType));
 
     info.push(formatPQGroupItem('Partitions', pqGroup?.Partitions || []));
-    info.push(formatPQGroupItem('PQTabletConfig', pqGroup?.PQTabletConfig || {PartitionConfig: {LifetimeSeconds: 0}}));
-
-    return (
-        <>
-            {info.length ? (
-                <InfoViewer info={info}></InfoViewer>
-            ) : (
-                <>Empty</>
-            )}
-        </>
+    info.push(
+        formatPQGroupItem(
+            'PQTabletConfig',
+            pqGroup?.PQTabletConfig || {PartitionConfig: {LifetimeSeconds: 0}},
+        ),
     );
+
+    return <>{info.length ? <InfoViewer info={info}></InfoViewer> : <>Empty</>}</>;
 };

package/dist/components/InfoViewer/schemaInfo/TableIndexInfo.tsx

@@ -17,9 +17,7 @@ interface TableIndexInfoProps {
 
 export const TableIndexInfo = ({data}: TableIndexInfoProps) => {
     if (!data) {
-        return (
-            <div className="error">no index data</div>
-        );
+        return <div className="error">no index data</div>;
     }
 
     const TableIndex = data.PathDescription?.TableIndex;
@@ -32,13 +30,5 @@ export const TableIndexInfo = ({data}: TableIndexInfoProps) => {
         }
     }
 
-    return (
-        <>
-            {info.length ? (
-                <InfoViewer info={info}></InfoViewer>
-            ) : (
-                <>Empty</>
-            )}
-        </>
-    );
+    return <>{info.length ? <InfoViewer info={info}></InfoViewer> : <>Empty</>}</>;
 };

package/dist/components/InfoViewer/schemaOverview/CDCStreamOverview.tsx

@@ -3,10 +3,7 @@ import type {TEvDescribeSchemeResult, TCdcStreamDescription} from '../../../type
 import {InfoViewer, InfoViewerItem} from '..';
 import {formatCdcStreamItem, formatCommonItem} from '../formatters';
 
-const DISPLAYED_FIELDS: Set<keyof TCdcStreamDescription> = new Set([
-    'Mode',
-    'Format',
-]);
+const DISPLAYED_FIELDS: Set<keyof TCdcStreamDescription> = new Set(['Mode', 'Format']);
 
 interface CDCStreamOverviewProps {
     data?: TEvDescribeSchemeResult;
@@ -14,9 +11,7 @@ interface CDCStreamOverviewProps {
 
 export const CDCStreamOverview = ({data}: CDCStreamOverviewProps) => {
     if (!data) {
-        return (
-            <div className="error">No CDC Stream data</div>
-        );
+        return <div className="error">No CDC Stream data</div>;
     }
 
     const TableIndex = data.PathDescription?.CdcStreamDescription;
@@ -32,13 +27,5 @@ export const CDCStreamOverview = ({data}: CDCStreamOverviewProps) => {
         }
     }
 
-    return (
-        <>
-            {info.length ? (
-                <InfoViewer info={info}></InfoViewer>
-            ) : (
-                <>Empty</>
-            )}
-        </>
-    );
+    return <>{info.length ? <InfoViewer info={info}></InfoViewer> : <>Empty</>}</>;
 };

package/dist/components/InfoViewer/schemaOverview/PersQueueGroupOverview.tsx

@@ -9,9 +9,7 @@ interface PersQueueGroupOverviewProps {
 
 export const PersQueueGroupOverview = ({data}: PersQueueGroupOverviewProps) => {
     if (!data) {
-        return (
-            <div className="error">No PersQueueGroup data</div>
-        );
+        return <div className="error">No PersQueueGroup data</div>;
     }
 
     const pqGroup = data.PathDescription?.PersQueueGroup;
@@ -21,15 +19,12 @@ export const PersQueueGroupOverview = ({data}: PersQueueGroupOverviewProps) => {
     info.push(formatCommonItem('CreateStep', data.PathDescription?.Self?.CreateStep));
 
     info.push(formatPQGroupItem('Partitions', pqGroup?.Partitions || []));
-    info.push(formatPQGroupItem('PQTabletConfig', pqGroup?.PQTabletConfig || {PartitionConfig: {LifetimeSeconds: 0}}));
-
-    return (
-        <>
-            {info.length ? (
-                <InfoViewer info={info}></InfoViewer>
-            ) : (
-                <>Empty</>
-            )}
-        </>
+    info.push(
+        formatPQGroupItem(
+            'PQTabletConfig',
+            pqGroup?.PQTabletConfig || {PartitionConfig: {LifetimeSeconds: 0}},
+        ),
     );
+
+    return <>{info.length ? <InfoViewer info={info}></InfoViewer> : <>Empty</>}</>;
 };

package/dist/components/InfoViewer/utils.ts

@@ -1,12 +1,12 @@
-import type {ReactNode} from "react";
+import type {ReactNode} from 'react';
 
 type LabelMap<T> = {
     [label in keyof T]?: string;
-}
+};
 
 type ValueFormatters<T> = {
     [label in keyof T]?: (value: T[label]) => ReactNode;
-}
+};
 
 function formatLabel<Shape>(label: keyof Shape, map: LabelMap<Shape>) {
     return map[label] ?? label;
@@ -25,9 +25,9 @@ function formatValue<Shape, Key extends keyof Shape>(
 }
 
 interface CreateInfoFormatterOptions<Shape> {
-    values?: ValueFormatters<Shape>,
-    labels?: LabelMap<Shape>,
-    defaultValueFormatter?: (value: Shape[keyof Shape]) => ReactNode,
+    values?: ValueFormatters<Shape>;
+    labels?: LabelMap<Shape>;
+    defaultValueFormatter?: (value: Shape[keyof Shape]) => ReactNode;
 }
 
 export function createInfoFormatter<Shape extends Record<string, any>>({

package/dist/components/Loader/Loader.scss

@@ -1,5 +1,8 @@
-@import '../../styles/mixins.scss';
+.ydb-loader {
+    display: flex;
+    flex: 1 1 auto;
+    justify-content: center;
+    align-items: center;
 
-.kv-loader {
-    @include loader();
+    height: 100%;
 }

package/dist/components/Loader/Loader.tsx

@@ -3,14 +3,16 @@ import {Loader as KitLoader, LoaderSize} from '@gravity-ui/uikit';
 
 import './Loader.scss';
 
-const b = cn('kv-loader');
+const b = cn('ydb-loader');
 
-function Loader({size = 'l'}: {size?: LoaderSize}) {
+interface LoaderProps {
+    size?: LoaderSize;
+}
+
+export const Loader = ({size = 'm'}: LoaderProps) => {
     return (
         <div className={b()}>
             <KitLoader size={size} />
         </div>
     );
-}
-
-export default Loader;
+};

package/dist/components/Loader/index.ts

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

package/dist/components/UptimeFIlter/UptimeFilter.tsx

@@ -0,0 +1,21 @@
+import {RadioButton} from '@gravity-ui/uikit';
+
+import {NodesUptimeFilterValues, NodesUptimeFilterTitles} from '../../utils/nodes';
+
+interface UptimeFilterProps {
+    value: keyof typeof NodesUptimeFilterValues;
+    onChange: (value: string) => void;
+}
+
+export const UptimeFilter = ({value, onChange}: UptimeFilterProps) => {
+    return (
+        <RadioButton value={value} onUpdate={onChange}>
+            <RadioButton.Option value={NodesUptimeFilterValues.All}>
+                {NodesUptimeFilterTitles[NodesUptimeFilterValues.All]}
+            </RadioButton.Option>
+            <RadioButton.Option value={NodesUptimeFilterValues.SmallUptime}>
+                {NodesUptimeFilterTitles[NodesUptimeFilterValues.SmallUptime]}
+            </RadioButton.Option>
+        </RadioButton>
+    );
+};

package/dist/components/UptimeFIlter/index.ts

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

package/dist/containers/Node/Node.scss

@@ -45,6 +45,7 @@
     }
 
     &__node-page-wrapper {
+        height: 100%;
         padding: 20px;
     }
 }

package/dist/containers/Node/Node.tsx

@@ -12,7 +12,7 @@ import Tablets from '../Tablets/Tablets';
 import Storage from '../Storage/Storage';
 import NodeOverview from './NodeOverview/NodeOverview';
 import NodeStructure from './NodeStructure/NodeStructure';
-import Loader from '../../components/Loader/Loader';
+import {Loader} from '../../components/Loader';
 import {BasicNodeViewer} from '../../components/BasicNodeViewer';
 
 import {getNodeInfo, resetNode} from '../../store/reducers/node';
@@ -132,12 +132,7 @@ function Node(props: NodeProps) {
             }
 
             case OVERVIEW: {
-                return (
-                    <NodeOverview
-                        node={node}
-                        className={b('overview-wrapper')}
-                    />
-                );
+                return <NodeOverview node={node} className={b('overview-wrapper')} />;
             }
 
             case STRUCTURE: {
@@ -155,7 +150,7 @@ function Node(props: NodeProps) {
     };
 
     if (loading && !wasLoaded) {
-        return <Loader />;
+        return <Loader size="l" />;
     } else if (error) {
         return <div>{error.statusText}</div>;
     } else {

package/dist/containers/Node/NodeStructure/NodeStructure.scss

@@ -10,12 +10,6 @@
     @include flex-container();
     @include body2-typography();
 
-    &__loader {
-        display: flex;
-        flex-grow: 1;
-        justify-content: center;
-    }
-
     &__pdisk {
         display: flex;
         flex-direction: column;

package/dist/containers/Node/NodeStructure/NodeStructure.tsx

@@ -6,7 +6,7 @@ import _ from 'lodash';
 import cn from 'bem-cn-lite';
 
 import {PDisk} from './Pdisk';
-import Loader from '../.././../components/Loader/Loader';
+import {Loader} from '../.././../components/Loader';
 
 import {getNodeStructure, selectNodeStructure} from '../../../store/reducers/node';
 

package/dist/containers/Nodes/Nodes.js

@@ -9,17 +9,19 @@ import {Loader, TextInput, Label} from '@gravity-ui/uikit';
 import ProblemFilter, {problemFilterType} from '../../components/ProblemFilter/ProblemFilter';
 import {Illustration} from '../../components/Illustration';
 import {AccessDenied} from '../../components/Errors/403';
+import {UptimeFilter} from '../../components/UptimeFIlter';
 
 import {hideTooltip, showTooltip} from '../../store/reducers/tooltip';
 import {withSearch} from '../../HOCS';
 import {AUTO_RELOAD_INTERVAL, ALL, DEFAULT_TABLE_SETTINGS} from '../../utils/constants';
 import {getFilteredNodes} from '../../store/reducers/clusterNodes';
-import {getNodes} from '../../store/reducers/nodes';
+import {getNodes, setNodesUptimeFilter} from '../../store/reducers/nodes';
 import {changeFilter} from '../../store/reducers/settings';
 import {setHeader} from '../../store/reducers/header';
 import routes, {CLUSTER_PAGES, createHref} from '../../routes';
 import {calcUptime} from '../../utils';
 import {getNodesColumns} from '../../utils/getNodesColumns';
+import {NodesUptimeFilterValues} from '../../utils/nodes';
 
 import './Nodes.scss';
 
@@ -44,12 +46,14 @@ class Nodes extends React.Component {
         hideTooltip: PropTypes.func,
         searchQuery: PropTypes.string,
         handleSearchQuery: PropTypes.func,
-        filter: problemFilterType,
+        problemFilter: problemFilterType,
         changeFilter: PropTypes.func,
         setHeader: PropTypes.func,
         className: PropTypes.string,
         singleClusterMode: PropTypes.bool,
         additionalNodesInfo: PropTypes.object,
+        nodesUptimeFilter: PropTypes.string,
+        setNodesUptimeFilter: PropTypes.func,
     };
 
     componentDidMount() {
@@ -73,12 +77,16 @@ class Nodes extends React.Component {
         this.props.handleSearchQuery(search);
     };
 
-    handleFilterChange = (filter) => {
-        this.props.changeFilter(filter);
+    handleProblemFilterChange = (value) => {
+        this.props.changeFilter(value);
+    };
+
+    handleUptimeFilterChange = (value) => {
+        this.props.setNodesUptimeFilter(value);
     };
 
     renderControls() {
-        const {searchQuery, filter, nodes} = this.props;
+        const {nodes, searchQuery, problemFilter, nodesUptimeFilter} = this.props;
 
         return (
             <div className={b('controls')}>
@@ -90,7 +98,8 @@ class Nodes extends React.Component {
                     hasClear
                     autoFocus
                 />
-                <ProblemFilter value={filter} onChange={this.handleFilterChange} />
+                <ProblemFilter value={problemFilter} onChange={this.handleProblemFilterChange} />
+                <UptimeFilter value={nodesUptimeFilter} onChange={this.handleUptimeFilterChange} />
                 <Label theme="info" size="m">{`Nodes: ${nodes?.length}`}</Label>
             </div>
         );
@@ -99,7 +108,8 @@ class Nodes extends React.Component {
     renderTable = () => {
         const {
             nodes = [],
-            filter,
+            problemFilter,
+            nodesUptimeFilter,
             searchQuery,
             showTooltip,
             hideTooltip,
@@ -126,7 +136,7 @@ class Nodes extends React.Component {
         }));
 
         if (preparedNodes.length === 0) {
-            if (filter !== ALL) {
+            if (problemFilter !== ALL || nodesUptimeFilter !== NodesUptimeFilterValues.All) {
                 return <Illustration name="thumbsUp" width="200" />;
             }
         }
@@ -177,7 +187,7 @@ class Nodes extends React.Component {
 }
 
 const mapStateToProps = (state) => {
-    const {wasLoaded, loading, error} = state.nodes;
+    const {wasLoaded, loading, error, nodesUptimeFilter} = state.nodes;
 
     const nodes = getFilteredNodes(state);
     return {
@@ -186,7 +196,8 @@ const mapStateToProps = (state) => {
         wasLoaded,
         loading,
         error,
-        filter: state.settings.problemFilter,
+        problemFilter: state.settings.problemFilter,
+        nodesUptimeFilter,
     };
 };
 
@@ -196,6 +207,7 @@ const mapDispatchToProps = {
     showTooltip,
     changeFilter,
     setHeader,
+    setNodesUptimeFilter,
 };
 
 export default withSearch(connect(mapStateToProps, mapDispatchToProps)(Nodes));