ydb-embedded-ui 3.0.0 → 3.1.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # Changelog
 
+## [3.1.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v3.0.1...v3.1.0) (2022-12-13)
+
+
+### Features
+
+* **TopShards:** date range filter ([aab4396](https://github.com/ydb-platform/ydb-embedded-ui/commit/aab439600ec28d30799c4a7ef7a9c68fcacc148c))
+
+## [3.0.1](https://github.com/ydb-platform/ydb-embedded-ui/compare/v3.0.0...v3.0.1) (2022-12-12)
+
+
+### Bug Fixes
+
+* **Overview:** display titles for topic, stream and tableIndex ([2ee7889](https://github.com/ydb-platform/ydb-embedded-ui/commit/2ee788932d4f0a6fbe3e9e0526b8ba50e3103d76))
+* **SchemaOverview:** display entity name ([2d28a2a](https://github.com/ydb-platform/ydb-embedded-ui/commit/2d28a2ad30263e31bc3c8b783d4f42af92537624))
+* **TenantOverview:** display database type in title ([5f73eed](https://github.com/ydb-platform/ydb-embedded-ui/commit/5f73eed6f9043586885f8e68137d8f31923e8e3b))
+* **TopShards:** render a message for empty data ([8cda003](https://github.com/ydb-platform/ydb-embedded-ui/commit/8cda0038396b356b10033b44824933f711e1175e))
+
 ## [3.0.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v2.6.0...v3.0.0) (2022-12-05)
 
 

package/dist/components/ClusterInfo/ClusterInfo.tsx

@@ -58,7 +58,7 @@ interface ClusterInfoProps {
     className?: string;
     cluster?: ICluster;
     hideTooltip: VoidFunction;
-    showTooltip: VoidFunction;
+    showTooltip: Function;
     setHeader: any;
     getClusterInfo: (clusterName: string) => void;
     clusterTitle?: string;

package/dist/components/InfoViewer/InfoViewer.tsx

@@ -35,7 +35,7 @@ const InfoViewer = ({title, info, dots = true, size, className}: InfoViewerProps
                 ))}
             </div>
         ) : (
-            <>no {title} data</>
+            <>No {title} data</>
         )}
     </div>
 );

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

@@ -1,6 +1,7 @@
 import type {TEvDescribeSchemeResult, TCdcStreamDescription} from '../../../types/api/schema';
 import {useTypedSelector} from '../../../utils/hooks';
 import {selectSchemaData} from '../../../store/reducers/schema';
+import {getEntityName} from '../../../containers/Tenant/utils';
 
 import {formatCdcStreamItem, formatPQGroupItem, formatCommonItem} from '../formatters';
 import {InfoViewer, InfoViewerItem} from '..';
@@ -15,8 +16,10 @@ interface CDCStreamInfoProps {
 export const CDCStreamInfo = ({data, childrenPaths}: CDCStreamInfoProps) => {
     const pqGroupData = useTypedSelector((state) => selectSchemaData(state, childrenPaths?.[0]));
 
+    const entityName = getEntityName(data?.PathDescription);
+
     if (!data || !pqGroupData) {
-        return <div className="error">No Changefeed data</div>;
+        return <div className="error">No {entityName} data</div>;
     }
 
     const cdcStream = data.PathDescription?.CdcStreamDescription;
@@ -41,5 +44,5 @@ export const CDCStreamInfo = ({data, childrenPaths}: CDCStreamInfoProps) => {
         ),
     );
 
-    return <InfoViewer title={'Changefeed'} info={info} />;
+    return <InfoViewer title={entityName} info={info} />;
 };

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

@@ -1,6 +1,7 @@
 import type {TEvDescribeSchemeResult} from '../../../types/api/schema';
+import {getEntityName} from '../../../containers/Tenant/utils';
 
-import {formatCommonItem, formatPQGroupItem} from '../formatters';
+import {formatPQGroupItem} from '../formatters';
 import {InfoViewer, InfoViewerItem} from '..';
 
 interface PersQueueGrouopInfoProps {
@@ -8,15 +9,15 @@ interface PersQueueGrouopInfoProps {
 }
 
 export const PersQueueGroupInfo = ({data}: PersQueueGrouopInfoProps) => {
+    const entityName = getEntityName(data?.PathDescription);
+
     if (!data) {
-        return <div className="error">No PersQueueGroup data</div>;
+        return <div className="error">No {entityName} data</div>;
     }
 
     const pqGroup = data.PathDescription?.PersQueueGroup;
     const info: Array<InfoViewerItem> = [];
 
-    info.push(formatCommonItem('PathType', data.PathDescription?.Self?.PathType));
-
     info.push(formatPQGroupItem('Partitions', pqGroup?.Partitions || []));
     info.push(
         formatPQGroupItem(
@@ -25,5 +26,5 @@ export const PersQueueGroupInfo = ({data}: PersQueueGrouopInfoProps) => {
         ),
     );
 
-    return <>{info.length ? <InfoViewer info={info}></InfoViewer> : <>Empty</>}</>;
+    return <InfoViewer title={entityName} info={info} />;
 };

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

@@ -1,4 +1,5 @@
 import type {TEvDescribeSchemeResult, TIndexDescription} from '../../../types/api/schema';
+import {getEntityName} from '../../../containers/Tenant/utils';
 
 import {formatTableIndexItem} from '../formatters';
 import {InfoViewer, InfoViewerItem} from '..';
@@ -16,8 +17,10 @@ interface TableIndexInfoProps {
 }
 
 export const TableIndexInfo = ({data}: TableIndexInfoProps) => {
+    const entityName = getEntityName(data?.PathDescription);
+
     if (!data) {
-        return <div className="error">no index data</div>;
+        return <div className="error">No {entityName} data</div>;
     }
 
     const TableIndex = data.PathDescription?.TableIndex;
@@ -30,5 +33,5 @@ export const TableIndexInfo = ({data}: TableIndexInfoProps) => {
         }
     }
 
-    return <>{info.length ? <InfoViewer info={info}></InfoViewer> : <>Empty</>}</>;
+    return <InfoViewer title={entityName} info={info} />;
 };

package/dist/components/ProblemFilter/ProblemFilter.tsx

@@ -0,0 +1,18 @@
+import {RadioButton} from '@gravity-ui/uikit';
+
+import {ALL, PROBLEMS, IProblemFilterValues} from '../../utils/constants';
+
+interface ProblemFilterProps {
+    value: IProblemFilterValues;
+    onChange: (value: string) => void;
+    className?: string;
+}
+
+export const ProblemFilter = ({value, onChange, className}: ProblemFilterProps) => {
+    return (
+        <RadioButton value={value} onUpdate={onChange} className={className}>
+            <RadioButton.Option value={ALL}>{ALL}</RadioButton.Option>
+            <RadioButton.Option value={PROBLEMS}>{PROBLEMS}</RadioButton.Option>
+        </RadioButton>
+    );
+};

package/dist/components/ProblemFilter/index.ts

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

package/dist/components/UptimeFIlter/UptimeFilter.tsx

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

package/dist/containers/Nodes/Nodes.js

@@ -6,7 +6,7 @@ import {connect} from 'react-redux';
 import DataTable from '@yandex-cloud/react-data-table';
 import {Loader, TextInput, Label} from '@gravity-ui/uikit';
 
-import ProblemFilter, {problemFilterType} from '../../components/ProblemFilter/ProblemFilter';
+import {ProblemFilter} from '../../components/ProblemFilter';
 import {Illustration} from '../../components/Illustration';
 import {AccessDenied} from '../../components/Errors/403';
 import {UptimeFilter} from '../../components/UptimeFIlter';
@@ -46,7 +46,7 @@ class Nodes extends React.Component {
         hideTooltip: PropTypes.func,
         searchQuery: PropTypes.string,
         handleSearchQuery: PropTypes.func,
-        problemFilter: problemFilterType,
+        problemFilter: PropTypes.string,
         changeFilter: PropTypes.func,
         setHeader: PropTypes.func,
         className: PropTypes.string,

package/dist/containers/NodesViewer/NodesViewer.js

@@ -6,7 +6,7 @@ import {connect} from 'react-redux';
 import {TextInput, Label} from '@gravity-ui/uikit';
 import DataTable from '@yandex-cloud/react-data-table';
 
-import ProblemFilter, {problemFilterType} from '../../components/ProblemFilter/ProblemFilter';
+import {ProblemFilter} from '../../components/ProblemFilter';
 import {UptimeFilter} from '../../components/UptimeFIlter';
 import {Illustration} from '../../components/Illustration';
 
@@ -48,7 +48,7 @@ class NodesViewer extends React.PureComponent {
         handleSearchQuery: PropTypes.func,
         showTooltip: PropTypes.func,
         hideTooltip: PropTypes.func,
-        problemFilter: problemFilterType,
+        problemFilter: PropTypes.string,
         nodesUptimeFilter: PropTypes.string,
         setNodesUptimeFilter: PropTypes.func,
         changeFilter: PropTypes.func,

package/dist/containers/Pool/Pool.js

@@ -10,7 +10,7 @@ import ReactList from 'react-list';
 import EntityStatus from '../../components/EntityStatus/EntityStatus';
 import GroupTreeViewer from '../../components/GroupTreeViewer/GroupTreeViewer';
 import Breadcrumbs from '../../components/Breadcrumbs/Breadcrumbs';
-import ProblemFilter, {problemFilterType} from '../../components/ProblemFilter/ProblemFilter';
+import {ProblemFilter} from '../../components/ProblemFilter/ProblemFilter';
 import {Illustration} from '../../components/Illustration';
 
 import {getPoolInfo} from '../../store/reducers/pool';
@@ -38,7 +38,7 @@ class Pool extends React.Component {
         pool: PropTypes.object,
         poolName: PropTypes.string,
         match: PropTypes.object,
-        filter: problemFilterType,
+        filter: PropTypes.string,
         changeFilter: PropTypes.func,
     };
 

package/dist/containers/Tenant/Diagnostics/Diagnostics.tsx

@@ -13,8 +13,7 @@ import {Loader} from '../../../components/Loader';
 import TopQueries from './TopQueries/TopQueries';
 //@ts-ignore
 import DetailedOverview from './DetailedOverview/DetailedOverview';
-//@ts-ignore
-import TopShards from './TopShards/TopShards';
+import {TopShards} from './TopShards';
 //@ts-ignore
 import Storage from '../../Storage/Storage';
 //@ts-ignore
@@ -132,7 +131,7 @@ function Diagnostics(props: DiagnosticsProps) {
                 );
             }
             case GeneralPagesIds.topShards: {
-                return <TopShards path={tenantNameString} type={type} />;
+                return <TopShards tenantPath={tenantNameString} type={type} />;
             }
             case GeneralPagesIds.nodes: {
                 return (

package/dist/containers/Tenant/Diagnostics/Network/Network.js

@@ -9,7 +9,7 @@ import {Loader, Checkbox} from '@gravity-ui/uikit';
 
 import NodeNetwork from './NodeNetwork/NodeNetwork';
 import Icon from '../../../../components/Icon/Icon';
-import ProblemFilter, {problemFilterType} from '../../../../components/ProblemFilter/ProblemFilter';
+import {ProblemFilter} from '../../../../components/ProblemFilter';
 import {Illustration} from '../../../../components/Illustration';
 
 import {getNetworkInfo, setDataWasNotLoaded} from '../../../../store/reducers/network';
@@ -35,7 +35,7 @@ class Network extends React.Component {
         loading: PropTypes.bool,
         autorefresh: PropTypes.bool,
         path: PropTypes.string,
-        filter: problemFilterType,
+        filter: PropTypes.string,
         changeFilter: PropTypes.func,
     };
 

package/dist/containers/Tenant/Diagnostics/Overview/Overview.tsx

@@ -12,7 +12,10 @@ import {
     PersQueueGroupInfo,
 } from '../../../../components/InfoViewer/schemaInfo';
 
-import {EPathType, TColumnTableDescription} from '../../../../types/api/schema';
+import {
+    EPathType,
+    TEvDescribeSchemeResult,
+} from '../../../../types/api/schema';
 import {
     isEntityWithMergedImplementation,
     isColumnEntityType,
@@ -34,8 +37,9 @@ import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
 
 import './Overview.scss';
 
-function prepareOlapTableGeneral(tableData: TColumnTableDescription = {}, olapStats?: any[]) {
-    const {ColumnShardCount} = tableData;
+function prepareOlapTableGeneral(item?: TEvDescribeSchemeResult, olapStats?: any[]) {
+    const tableData = item?.PathDescription?.ColumnTableDescription;
+
     const Bytes = olapStats?.reduce((acc, el) => {
         acc += parseInt(el.Bytes) || 0;
         return acc;
@@ -51,8 +55,9 @@ function prepareOlapTableGeneral(tableData: TColumnTableDescription = {}, olapSt
 
     return {
         PathDescription: {
+            Self: item?.PathDescription?.Self,
             TableStats: {
-                ColumnShardCount,
+                ColumnShardCount: tableData?.ColumnShardCount,
                 Bytes: Bytes?.toLocaleString('ru-RU', {useGrouping: true}) ?? 0,
                 Rows: Rows?.toLocaleString('ru-RU', {useGrouping: true}) ?? 0,
                 Parts: tabletIds?.size ?? 0,
@@ -130,15 +135,12 @@ function Overview({type, tenantName, className}: OverviewProps) {
 
     useAutofetcher(fetchData, [fetchData], autorefresh);
 
-    const tableSchema =
-        currentItem?.PathDescription?.Table || currentItem?.PathDescription?.ColumnTableDescription;
-
     const schemaData = useMemo(() => {
         return isTableType(type) && isColumnEntityType(type)
             ? // process data for ColumnTable
-              prepareOlapTableGeneral(tableSchema, olapStats)
+              prepareOlapTableGeneral(currentItem, olapStats)
             : currentItem;
-    }, [type, tableSchema, olapStats, currentItem]);
+    }, [type, olapStats, currentItem]);
 
     const renderLoader = () => {
         return (

package/dist/containers/Tenant/Diagnostics/TenantOverview/TenantOverview.js

@@ -2,6 +2,7 @@ import React from 'react';
 import {connect} from 'react-redux';
 import cn from 'bem-cn-lite';
 import PropTypes from 'prop-types';
+import {Loader} from '@gravity-ui/uikit';
 
 import EntityStatus from '../../../../components/EntityStatus/EntityStatus';
 import InfoViewer from '../../../../components/InfoViewer/InfoViewer';
@@ -14,10 +15,11 @@ import {getTenantInfo} from '../../../../store/reducers/tenant';
 import {formatCPU} from '../../../../utils';
 import {bytesToGB} from '../../../../utils/utils';
 import {TABLET_STATES} from '../../../../utils/constants';
+import {AutoFetcher} from '../../../../utils/autofetcher';
+
+import {mapDatabaseTypeToDBName} from '../../utils/schema';
 
 import './TenantOverview.scss';
-import {AutoFetcher} from '../../../../utils/autofetcher';
-import {Loader} from '@gravity-ui/uikit';
 
 const b = cn('tenant-overview');
 
@@ -113,6 +115,7 @@ class TenantOverview extends React.Component {
             SystemTablets,
         } = tenant;
 
+        const tenantName = mapDatabaseTypeToDBName(Type);
         const memoryRaw = MemoryUsed ?? Metrics.Memory;
 
         const memory = (memoryRaw && bytesToGB(memoryRaw)) || 'no data';
@@ -147,7 +150,7 @@ class TenantOverview extends React.Component {
             this.renderLoader()
         ) : (
             <div className={b()}>
-                <div className={b('top-label')}>Database</div>
+                <div className={b('top-label')}>{tenantName}</div>
                 <div className={b('top')}>
                     {renderName(tenant)}
                     {this.props.additionalTenantInfo &&

package/dist/containers/Tenant/Diagnostics/TopShards/DateRange/DateRange.scss

@@ -0,0 +1,13 @@
+.top-shards {
+    &__date-range {
+        &-input {
+            min-width: 190px;
+            padding: 5px 8px;
+
+            color: var(--yc-color-text-primary);
+            border: 1px solid var(--yc-color-line-generic);
+            border-radius: var(--yc-border-radius-m);
+            background: transparent;
+        }
+    }
+}

package/dist/containers/Tenant/Diagnostics/TopShards/DateRange/DateRange.tsx

@@ -0,0 +1,75 @@
+import cn from 'bem-cn-lite';
+import {ChangeEventHandler} from 'react';
+
+import './DateRange.scss';
+
+const b = cn('top-shards');
+
+export interface DateRangeValues {
+    /** ms from epoch */
+    from?: number;
+    /** ms from epoch */
+    to?: number;
+}
+
+interface DateRangeProps extends DateRangeValues {
+    className?: string;
+    onChange?: (value: DateRangeValues) => void;
+}
+
+const toTimezonelessISOString = (timestamp?: number) => {
+    if (!timestamp || isNaN(timestamp)) {
+        return undefined;
+    }
+
+    // shift by local offset to treat toISOString output as local time
+    const shiftedTimestamp = timestamp - new Date().getTimezoneOffset() * 60 * 1000;
+    return new Date(shiftedTimestamp).toISOString().substring(0, 'yyyy-MM-DDThh:mm'.length);
+};
+
+export const DateRange = ({from, to, className, onChange}: DateRangeProps) => {
+    const handleFromChange: ChangeEventHandler<HTMLInputElement> = ({target: {value}}) => {
+        let newFrom = value ? new Date(value).getTime() : undefined;
+
+        // some browsers allow selecting time after the boundary specified in `max`
+        if (newFrom && to && newFrom > to) {
+            newFrom = to;
+        }
+
+        onChange?.({from: newFrom, to});
+    };
+
+    const handleToChange: ChangeEventHandler<HTMLInputElement> = ({target: {value}}) => {
+        let newTo = value ? new Date(value).getTime() : undefined;
+
+        // some browsers allow selecting time before the boundary specified in `min`
+        if (from && newTo && from > newTo) {
+            newTo = from;
+        }
+
+        onChange?.({from, to: newTo});
+    };
+
+    const startISO = toTimezonelessISOString(from);
+    const endISO = toTimezonelessISOString(to);
+
+    return (
+        <div className={b('date-range', className)}>
+            <input
+                type="datetime-local"
+                value={startISO}
+                max={endISO}
+                onChange={handleFromChange}
+                className={b('date-range-input')}
+            />
+            —
+            <input
+                type="datetime-local"
+                min={startISO}
+                value={endISO}
+                onChange={handleToChange}
+                className={b('date-range-input')}
+            />
+        </div>
+    );
+};

package/dist/containers/Tenant/Diagnostics/TopShards/DateRange/index.ts

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

package/dist/containers/Tenant/Diagnostics/TopShards/TopShards.scss

@@ -1,11 +1,27 @@
 .top-shards {
+    display: flex;
+    flex-direction: column;
+
+    height: 100%;
+
     background-color: var(--yc-color-base-background);
+
     &__loader {
         display: flex;
         justify-content: center;
     }
 
+    &__controls {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: baseline;
+        gap: 16px;
+
+        margin-bottom: 10px;
+    }
+
     &__table {
-        height: 100%;
+        overflow: auto;
+        flex-grow: 1;
     }
 }