ydb-embedded-ui 3.0.1 → 3.2.0

package/CHANGELOG.md

@@ -1,5 +1,31 @@
 # Changelog
 
+## [3.2.0](https://github.com/ydb-platform/ydb-embedded-ui/compare/v3.1.0...v3.2.0) (2023-01-09)
+
+
+### Features
+
+* **Nodes:** display rack in table ([3b8cdd5](https://github.com/ydb-platform/ydb-embedded-ui/commit/3b8cdd5b472f98132b2faaa9b71b8911750545a6))
+* **StorageNodes:** display datacenter in table ([4507bfd](https://github.com/ydb-platform/ydb-embedded-ui/commit/4507bfde839b0aafa3722828b7528885c6ac8f84))
+* **TopQueries:** date range filter ([b9a8e95](https://github.com/ydb-platform/ydb-embedded-ui/commit/b9a8e9504fa68556a724b214ee91b73ec900d37e))
+* **TopQueries:** filter by query text ([2c8ea97](https://github.com/ydb-platform/ydb-embedded-ui/commit/2c8ea97dd215ea59165cf05315bc5809cf7fafd7))
+
+
+### Bug Fixes
+
+* **InfoViewer:** min width for values ([64a4fd4](https://github.com/ydb-platform/ydb-embedded-ui/commit/64a4fd4de16738a9e2fac9cb4fba94eafc938762))
+* **Nodes:** open external link in new tab ([b7c3ddd](https://github.com/ydb-platform/ydb-embedded-ui/commit/b7c3ddd1e611f2b61466e3eda51f3341f8407588))
+* **TopQueries:** proper table dynamic render type ([9add6ca](https://github.com/ydb-platform/ydb-embedded-ui/commit/9add6ca9fbfe0475caf1586070a800210320cee6))
+* **TopShards:** rename to overloaded shards ([d9978bd](https://github.com/ydb-platform/ydb-embedded-ui/commit/d9978bdd84b9a883e4eefcac7f85f856da55d770))
+* **UserSettings:** treat invertedDisks settings as string ([ad7742a](https://github.com/ydb-platform/ydb-embedded-ui/commit/ad7742a6bf0be59c2b9cbbf947aaa66f79d748be))
+
+## [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)
 
 

package/README.md

@@ -15,6 +15,8 @@ Local viewer for YDB clusters
 3) Open [http://localhost:3000](http://localhost:3000) to view it in the browser. The page will reload if you make edits.\
    You will also see any lint errors in the console.
 
+For API reference, open Swagger UI on http://localhost:8765/viewer/api/.
+
 ### Making a production bundle.
 
 Base command `npm run build` builds the app for production to the `build` folder.\

package/dist/components/DateRange/DateRange.scss

@@ -0,0 +1,11 @@
+.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/components/DateRange/DateRange.tsx

@@ -0,0 +1,75 @@
+import {ChangeEventHandler} from 'react';
+import cn from 'bem-cn-lite';
+
+import './DateRange.scss';
+
+const b = cn('date-range');
+
+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(null, className)}>
+            <input
+                type="datetime-local"
+                value={startISO || ''}
+                max={endISO}
+                onChange={handleFromChange}
+                className={b('input')}
+            />
+            —
+            <input
+                type="datetime-local"
+                min={startISO}
+                value={endISO || ''}
+                onChange={handleToChange}
+                className={b('input')}
+            />
+        </div>
+    );
+};

package/dist/components/DateRange/index.ts

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

package/dist/components/Illustration/Illustration.tsx

@@ -1,8 +1,8 @@
-import {useEffect, useState} from 'react';
+import {ImgHTMLAttributes, useEffect, useState} from 'react';
 import cn from 'bem-cn-lite';
 import {useThemeValue} from '@gravity-ui/uikit';
 
-export interface IllustrationProps {
+export interface IllustrationProps extends ImgHTMLAttributes<HTMLImageElement> {
     name: string;
     className?: string;
 }
@@ -38,12 +38,5 @@ export const Illustration = ({name, className, ...props}: IllustrationProps) =>
         }
     }, [srcGetter]);
 
-    return (
-        <img
-            alt={name}
-            src={src}
-            className={b(null, className)}
-            {...props}
-        />
-    );
-}
+    return <img alt={name} src={src} className={b(null, className)} {...props} />;
+};

package/dist/components/InfoViewer/InfoViewer.scss

@@ -54,6 +54,8 @@
     &__value {
         display: flex;
 
+        min-width: 120px;
+
         word-break: break-all;
     }
 

package/dist/containers/Storage/DiskStateProgressBar/DiskStateProgressBar.tsx

@@ -27,7 +27,7 @@ function DiskStateProgressBar({
     diskAllocatedPercent = -1,
     severity,
 }: DiskStateProgressBarProps) {
-    const inverted = useSelector((state) => getSettingValue(state, INVERTED_DISKS_KEY));
+    const inverted = useSelector((state) => JSON.parse(getSettingValue(state, INVERTED_DISKS_KEY)));
 
     const renderAllocatedPercent = () => {
         return (

package/dist/containers/Storage/StorageNodes/StorageNodes.tsx

@@ -16,6 +16,8 @@ import './StorageNodes.scss';
 enum TableColumnsIds {
     NodeId = 'NodeId',
     FQDN = 'FQDN',
+    DataCenter = 'DataCenter',
+    Rack = 'Rack',
     uptime = 'uptime',
     PDisks = 'PDisks',
     Missing = 'Missing',
@@ -36,6 +38,8 @@ interface StorageNodesProps {
 const tableColumnsNames: Record<TableColumnsIdsValues, string> = {
     NodeId: 'Node ID',
     FQDN: 'FQDN',
+    DataCenter: 'DC',
+    Rack: 'Rack',
     uptime: 'Uptime',
     PDisks: 'PDisks',
     Missing: 'Missing',
@@ -96,6 +100,18 @@ function StorageNodes({
             },
             align: DataTable.LEFT,
         },
+        {
+            name: TableColumnsIds.DataCenter,
+            header: tableColumnsNames[TableColumnsIds.DataCenter],
+            render: ({row}) => row.DataCenter || '—',
+            align: DataTable.LEFT,
+        },
+        {
+            name: TableColumnsIds.Rack,
+            header: tableColumnsNames[TableColumnsIds.Rack],
+            render: ({row}) => row.Rack || '—',
+            align: DataTable.LEFT,
+        },
         {
             name: TableColumnsIds.uptime,
             header: tableColumnsNames[TableColumnsIds.uptime],

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

@@ -9,11 +9,10 @@ import {Switch, Tabs} from '@gravity-ui/uikit';
 
 import {Loader} from '../../../components/Loader';
 
-//@ts-ignore
-import TopQueries from './TopQueries/TopQueries';
+import {TopQueries} from './TopQueries';
 //@ts-ignore
 import DetailedOverview from './DetailedOverview/DetailedOverview';
-import {TopShards} from './TopShards';
+import {OverloadedShards} from './OverloadedShards';
 //@ts-ignore
 import Storage from '../../Storage/Storage';
 //@ts-ignore
@@ -130,8 +129,8 @@ function Diagnostics(props: DiagnosticsProps) {
                     />
                 );
             }
-            case GeneralPagesIds.topShards: {
-                return <TopShards tenantPath={tenantNameString} type={type} />;
+            case GeneralPagesIds.overloadedShards: {
+                return <OverloadedShards tenantPath={tenantNameString} type={type} />;
             }
             case GeneralPagesIds.nodes: {
                 return (

package/dist/containers/Tenant/Diagnostics/DiagnosticsPages.ts

@@ -3,7 +3,7 @@ import {EPathType} from '../../../types/api/schema';
 export enum GeneralPagesIds {
     'overview' = 'Overview',
     'topQueries' = 'topQueries',
-    'topShards' = 'topShards',
+    'overloadedShards' = 'overloadedShards',
     'nodes' = 'Nodes',
     'tablets' = 'Tablets',
     'storage' = 'Storage',
@@ -29,9 +29,9 @@ const topQueries = {
     title: 'Top queries',
 };
 
-const topShards = {
-    id: GeneralPagesIds.topShards,
-    title: 'Top shards',
+const overloadedShards = {
+    id: GeneralPagesIds.overloadedShards,
+    title: 'Overloaded shards',
 };
 
 const nodes = {
@@ -75,7 +75,7 @@ const consumers = {
 export const DATABASE_PAGES = [
     overview,
     topQueries,
-    topShards,
+    overloadedShards,
     nodes,
     tablets,
     storage,
@@ -83,9 +83,9 @@ export const DATABASE_PAGES = [
     describe,
 ];
 
-export const TABLE_PAGES = [overview, topShards, graph, tablets, hotKeys, describe];
+export const TABLE_PAGES = [overview, overloadedShards, graph, tablets, hotKeys, describe];
 
-export const DIR_PAGES = [overview, topShards, describe];
+export const DIR_PAGES = [overview, overloadedShards, describe];
 
 export const CDC_STREAM_PAGES = [overview, consumers, describe];
 export const TOPIC_PAGES = [overview, consumers, describe];

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

@@ -0,0 +1,27 @@
+.overloaded-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 {
+        overflow: auto;
+        flex-grow: 1;
+    }
+}

package/dist/containers/Tenant/Diagnostics/{TopShards/TopShards.tsx → OverloadedShards/OverloadedShards.tsx}

@@ -5,27 +5,36 @@ import cn from 'bem-cn-lite';
 import DataTable, {Column, Settings, SortOrder} from '@yandex-cloud/react-data-table';
 import {Loader} from '@gravity-ui/uikit';
 
+import {DateRange, DateRangeValues} from '../../../../components/DateRange';
 import InternalLink from '../../../../components/InternalLink/InternalLink';
 
 import HistoryContext from '../../../../contexts/HistoryContext';
 
 import routes, {createHref} from '../../../../routes';
 
-import {sendShardQuery, setShardQueryOptions} from '../../../../store/reducers/shardsWorkload';
+import {
+    sendShardQuery,
+    setShardsState,
+    setShardsQueryFilters,
+} from '../../../../store/reducers/shardsWorkload';
 import {setCurrentSchemaPath, getSchema} from '../../../../store/reducers/schema';
+import type {IShardsWorkloadFilters} from '../../../../types/store/shardsWorkload';
 
 import type {EPathType} from '../../../../types/api/schema';
 
-import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
+import {formatDateTime, formatNumber} from '../../../../utils';
+import {DEFAULT_TABLE_SETTINGS, HOUR_IN_SECONDS} from '../../../../utils/constants';
 import {useAutofetcher, useTypedSelector} from '../../../../utils/hooks';
-import {i18n} from '../../../../utils/i18n';
 import {prepareQueryError} from '../../../../utils/query';
 
+import {getDefaultNodePath} from '../../../Node/NodePages';
+
 import {isColumnEntityType} from '../../utils/schema';
 
-import './TopShards.scss';
+import i18n from './i18n';
+import './OverloadedShards.scss';
 
-const b = cn('top-shards');
+const b = cn('overloaded-shards');
 const bLink = cn('yc-link');
 
 const TABLE_SETTINGS: Settings = {
@@ -41,16 +50,15 @@ const tableColumnsNames = {
     CPUCores: 'CPUCores',
     DataSize: 'DataSize',
     Path: 'Path',
+    NodeId: 'NodeId',
+    PeakTime: 'PeakTime',
+    InFlightTxCount: 'InFlightTxCount',
 };
 
 function prepareCPUWorkloadValue(value: string) {
     return `${(Number(value) * 100).toFixed(2)}%`;
 }
 
-function prepareDateSizeValue(value: number) {
-    return new Intl.NumberFormat(i18n.lang).format(value);
-}
-
 function stringToDataTableSortOrder(value: string): SortOrder[] | undefined {
     return value
         ? value.split(',').map((columnId) => ({
@@ -74,12 +82,12 @@ function dataTableToStringSortOrder(value: SortOrder | SortOrder[] = []) {
     return sortOrders.map(({columnId}) => columnId).join(',');
 }
 
-interface TopShardsProps {
+interface OverloadedShardsProps {
     tenantPath: string;
     type?: EPathType;
 }
 
-export const TopShards = ({tenantPath, type}: TopShardsProps) => {
+export const OverloadedShards = ({tenantPath, type}: OverloadedShardsProps) => {
     const dispatch = useDispatch();
 
     const {autorefresh, currentSchemaPath} = useTypedSelector((state) => state.schema);
@@ -87,10 +95,24 @@ export const TopShards = ({tenantPath, type}: TopShardsProps) => {
     const {
         loading,
         data: {result: data = undefined} = {},
+        filters: storeFilters,
         error,
         wasLoaded,
     } = useTypedSelector((state) => state.shardsWorkload);
 
+    // default date range should be the last hour, but shouldn't propagate into URL until user interacts with the control
+    // redux initial value can't be used, as it synchronizes with URL
+    const [filters, setFilters] = useState<IShardsWorkloadFilters>(() => {
+        if (!storeFilters?.from && !storeFilters?.to) {
+            return {
+                from: Date.now() - HOUR_IN_SECONDS * 1000,
+                to: Date.now(),
+            };
+        }
+
+        return storeFilters;
+    });
+
     const [sortOrder, setSortOrder] = useState(tableColumnsNames.CPUCores);
 
     useAutofetcher(
@@ -100,32 +122,38 @@ export const TopShards = ({tenantPath, type}: TopShardsProps) => {
                     database: tenantPath,
                     path: currentSchemaPath,
                     sortOrder: stringToQuerySortOrder(sortOrder),
+                    filters,
                 }),
             );
         },
-        [dispatch, currentSchemaPath, tenantPath, sortOrder],
+        [dispatch, tenantPath, currentSchemaPath, sortOrder, filters],
         autorefresh,
     );
 
     // don't show loader for requests triggered by table sort, only for path change
     useEffect(() => {
         dispatch(
-            setShardQueryOptions({
+            setShardsState({
                 wasLoaded: false,
                 data: undefined,
             }),
         );
-    }, [dispatch, currentSchemaPath, tenantPath]);
+    }, [dispatch, currentSchemaPath, tenantPath, filters]);
 
     const history = useContext(HistoryContext);
 
     const onSort = (newSortOrder?: SortOrder | SortOrder[]) => {
-        // omit information about sort order to disable ASC order, only DESC makes sense for top shards
+        // omit information about sort order to disable ASC order, only DESC makes sense for overloaded shards
         // use a string (and not the DataTable default format) to prevent reference change,
         // which would cause an excess state change, to avoid repeating requests
         setSortOrder(dataTableToStringSortOrder(newSortOrder));
     };
 
+    const handleDateRangeChange = (value: DateRangeValues) => {
+        dispatch(setShardsQueryFilters(value));
+        setFilters(value);
+    };
+
     const tableColumns: Column<any>[] = useMemo(() => {
         const onSchemaClick = (schemaPath: string) => {
             return () => {
@@ -161,7 +189,7 @@ export const TopShards = ({tenantPath, type}: TopShardsProps) => {
                 name: tableColumnsNames.DataSize,
                 header: 'DataSize (B)',
                 render: ({value}) => {
-                    return prepareDateSizeValue(value as number);
+                    return formatNumber(value as number);
                 },
                 align: DataTable.RIGHT,
             },
@@ -176,6 +204,29 @@ export const TopShards = ({tenantPath, type}: TopShardsProps) => {
                 },
                 sortable: false,
             },
+            {
+                name: tableColumnsNames.NodeId,
+                render: ({value: nodeId}) => {
+                    return (
+                        <InternalLink to={getDefaultNodePath(nodeId as string)}>
+                            {nodeId as string}
+                        </InternalLink>
+                    );
+                },
+                align: DataTable.RIGHT,
+                sortable: false,
+            },
+            {
+                name: tableColumnsNames.PeakTime,
+                render: ({value}) => formatDateTime(new Date(value as string).valueOf()),
+                sortable: false,
+            },
+            {
+                name: tableColumnsNames.InFlightTxCount,
+                render: ({value}) => formatNumber(value as number),
+                align: DataTable.RIGHT,
+                sortable: false,
+            },
         ];
     }, [dispatch, history, tenantPath]);
 
@@ -192,12 +243,12 @@ export const TopShards = ({tenantPath, type}: TopShardsProps) => {
             return renderLoader();
         }
 
-        if (!data || data.length === 0 || isColumnEntityType(type)) {
-            return 'No data';
+        if (error && !error.isCancelled) {
+            return <div className="error">{prepareQueryError(error)}</div>;
         }
 
-        if (error && !error.isCancelled) {
-            return prepareQueryError(error);
+        if (!data || isColumnEntityType(type)) {
+            return i18n('no-data');
         }
 
         return (
@@ -216,6 +267,10 @@ export const TopShards = ({tenantPath, type}: TopShardsProps) => {
 
     return (
         <div className={b()}>
+            <div className={b('controls')}>
+                {i18n('description')}
+                <DateRange from={filters.from} to={filters.to} onChange={handleDateRangeChange} />
+            </div>
             {renderContent()}
         </div>
     );

package/dist/containers/Tenant/Diagnostics/OverloadedShards/i18n/en.json

@@ -0,0 +1,4 @@
+{
+  "no-data": "No data",
+  "description": "Shards with CPU load over 70% are listed"
+}

package/dist/containers/Tenant/Diagnostics/OverloadedShards/i18n/index.ts

@@ -0,0 +1,11 @@
+import {i18n, Lang} from '../../../../../utils/i18n';
+
+import en from './en.json';
+import ru from './ru.json';
+
+const COMPONENT = 'ydb-diagnostics-overloaded-shards';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

package/dist/containers/Tenant/Diagnostics/OverloadedShards/i18n/ru.json

@@ -0,0 +1,4 @@
+{
+  "no-data": "Нет данных",
+  "description": "Отображаются шарды с загрузкой CPU выше 70%"
+}

package/dist/containers/Tenant/Diagnostics/OverloadedShards/index.ts

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

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

@@ -1,43 +1,40 @@
 @import '../../../../styles/mixins.scss';
 
 .kv-top-queries {
+    display: flex;
+    flex-direction: column;
+
     height: 100%;
 
     @include query-data-table;
-    &__message-container {
-        padding: 15px 0;
-    }
 
     &__loader {
         display: flex;
         justify-content: center;
     }
 
-    &__owner-container {
-        margin: 10px;
+    &__controls {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 16px;
 
-        .yc-staff-card {
-            display: inline-block;
-        }
+        margin-bottom: 10px;
     }
 
-    &__text {
-        font-size: var(--yc-text-body-1-font-size);
-        line-height: var(--yc-text-body-1-line-height);
-
-        color: var(--yc-color-text-primary);
-
-        &::first-letter {
-            color: var(--yc-color-text-danger);
-        }
+    &__search {
+        @include search();
     }
 
-    &__result &__table-content {
-        & .data-table {
+    &__result {
+        overflow: auto;
+        flex-grow: 1;
+
+        .data-table {
             &,
             &__table {
                 width: 100%;
             }
+
             &__td {
                 vertical-align: top;
                 white-space: pre;