ydb-embedded-ui 3.0.1 → 3.1.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # 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)
 
 

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,7 +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 {
+        overflow: auto;
+        flex-grow: 1;
+    }
 }

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

@@ -11,18 +11,28 @@ import HistoryContext from '../../../../contexts/HistoryContext';
 
 import routes, {createHref} from '../../../../routes';
 
-import {sendShardQuery, setShardQueryOptions} from '../../../../store/reducers/shardsWorkload';
+import {
+    sendShardQuery,
+    setShardQueryOptions,
+    setTopShardFilters,
+} 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 {DateRange, DateRangeValues} from './DateRange';
+
+import i18n from './i18n';
 import './TopShards.scss';
 
 const b = cn('top-shards');
@@ -41,16 +51,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) => ({
@@ -87,10 +96,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,10 +123,11 @@ export const TopShards = ({tenantPath, type}: TopShardsProps) => {
                     database: tenantPath,
                     path: currentSchemaPath,
                     sortOrder: stringToQuerySortOrder(sortOrder),
+                    filters,
                 }),
             );
         },
-        [dispatch, currentSchemaPath, tenantPath, sortOrder],
+        [dispatch, tenantPath, currentSchemaPath, sortOrder, filters],
         autorefresh,
     );
 
@@ -115,7 +139,7 @@ export const TopShards = ({tenantPath, type}: TopShardsProps) => {
                 data: undefined,
             }),
         );
-    }, [dispatch, currentSchemaPath, tenantPath]);
+    }, [dispatch, currentSchemaPath, tenantPath, filters]);
 
     const history = useContext(HistoryContext);
 
@@ -126,6 +150,11 @@ export const TopShards = ({tenantPath, type}: TopShardsProps) => {
         setSortOrder(dataTableToStringSortOrder(newSortOrder));
     };
 
+    const handleDateRangeChange = (value: DateRangeValues) => {
+        dispatch(setTopShardFilters(value));
+        setFilters(value);
+    };
+
     const tableColumns: Column<any>[] = useMemo(() => {
         const onSchemaClick = (schemaPath: string) => {
             return () => {
@@ -161,7 +190,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 +205,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 +244,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 +268,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/TopShards/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/TopShards/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-top-shards';
+
+i18n.registerKeyset(Lang.En, COMPONENT, en);
+i18n.registerKeyset(Lang.Ru, COMPONENT, ru);
+
+export default i18n.keyset(COMPONENT);

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

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

package/dist/store/reducers/shardsWorkload.ts

@@ -1,7 +1,11 @@
 import type {Reducer} from 'redux';
 
 import '../../services/api';
-import type {IShardsWorkloadAction, IShardsWorkloadState} from '../../types/store/shardsWorkload';
+import type {
+    IShardsWorkloadAction,
+    IShardsWorkloadFilters,
+    IShardsWorkloadState,
+} from '../../types/store/shardsWorkload';
 
 import {parseQueryAPIExecuteResponse} from '../../utils/query';
 
@@ -9,10 +13,12 @@ import {createRequestActionTypes, createApiRequest} from '../utils';
 
 export const SEND_SHARD_QUERY = createRequestActionTypes('query', 'SEND_SHARD_QUERY');
 const SET_SHARD_QUERY_OPTIONS = 'query/SET_SHARD_QUERY_OPTIONS';
+const SET_TOP_SHARDS_FILTERS = 'shardsWorkload/SET_TOP_SHARDS_FILTERS';
 
 const initialState = {
     loading: false,
     wasLoaded: false,
+    filters: {},
 };
 
 export interface SortOrder {
@@ -24,22 +30,56 @@ function formatSortOrder({columnId, order}: SortOrder) {
     return `${columnId} ${order}`;
 }
 
-function createShardQuery(path: string, sortOrder?: SortOrder[], tenantName?: string) {
-    const orderBy = sortOrder ? `ORDER BY ${sortOrder.map(formatSortOrder).join(', ')}` : '';
+function getFiltersConditions(filters?: IShardsWorkloadFilters) {
+    const conditions: string[] = [];
+
+    if (filters?.from && filters?.to && filters.from > filters.to) {
+        throw new Error('Invalid date range');
+    }
 
+    if (filters?.from) {
+        // matching `from` & `to` is an edge case
+        // other cases should not include the starting point, since intervals are stored using the ending time
+        const gt = filters.to === filters.from ? '>=' : '>';
+        conditions.push(`IntervalEnd ${gt} Timestamp('${new Date(filters.from).toISOString()}')`);
+    }
+
+    if (filters?.to) {
+        conditions.push(`IntervalEnd <= Timestamp('${new Date(filters.to).toISOString()}')`);
+    }
+
+    return conditions.join(' AND ');
+}
+
+function createShardQuery(
+    path: string,
+    filters?: IShardsWorkloadFilters,
+    sortOrder?: SortOrder[],
+    tenantName?: string,
+) {
     const pathSelect = tenantName
         ? `CAST(SUBSTRING(CAST(Path AS String), ${tenantName.length}) AS Utf8) AS Path`
         : 'Path';
 
+    let where = `Path='${path}' OR Path LIKE '${path}/%'`;
+
+    const filterConditions = getFiltersConditions(filters);
+    if (filterConditions.length) {
+        where = `(${where}) AND ${filterConditions}`;
+    }
+
+    const orderBy = sortOrder ? `ORDER BY ${sortOrder.map(formatSortOrder).join(', ')}` : '';
+
     return `SELECT
     ${pathSelect},
     TabletId,
     CPUCores,
-    DataSize
-FROM \`.sys/partition_stats\`
-WHERE
-    Path='${path}'
-    OR Path LIKE '${path}/%'
+    DataSize,
+    NodeId,
+    PeakTime,
+    InFlightTxCount
+FROM \`.sys/top_partitions_one_hour\`
+WHERE ${where}
 ${orderBy}
 LIMIT 20`;
 }
@@ -80,6 +120,14 @@ const shardsWorkload: Reducer<IShardsWorkloadState, IShardsWorkloadAction> = (
                 ...state,
                 ...action.data,
             };
+        case SET_TOP_SHARDS_FILTERS:
+            return {
+                ...state,
+                filters: {
+                    ...state.filters,
+                    ...action.filters,
+                },
+            };
         default:
             return state;
     }
@@ -89,21 +137,32 @@ interface SendShardQueryParams {
     database?: string;
     path?: string;
     sortOrder?: SortOrder[];
+    filters?: IShardsWorkloadFilters;
 }
 
-export const sendShardQuery = ({database, path = '', sortOrder}: SendShardQueryParams) => {
-    return createApiRequest({
-        request: window.api.sendQuery({
-            schema: 'modern',
-            query: createShardQuery(path, sortOrder, database),
-            database,
-            action: queryAction,
-        }, {
-            concurrentId: 'topShards',
-        }),
-        actions: SEND_SHARD_QUERY,
-        dataHandler: parseQueryAPIExecuteResponse,
-    });
+export const sendShardQuery = ({database, path = '', sortOrder, filters}: SendShardQueryParams) => {
+    try {
+        return createApiRequest({
+            request: window.api.sendQuery(
+                {
+                    schema: 'modern',
+                    query: createShardQuery(path, filters, sortOrder, database),
+                    database,
+                    action: queryAction,
+                },
+                {
+                    concurrentId: 'topShards',
+                },
+            ),
+            actions: SEND_SHARD_QUERY,
+            dataHandler: parseQueryAPIExecuteResponse,
+        });
+    } catch (error) {
+        return {
+            type: SEND_SHARD_QUERY.FAILURE,
+            error,
+        };
+    }
 };
 
 export function setShardQueryOptions(options: Partial<IShardsWorkloadState>) {
@@ -113,4 +172,11 @@ export function setShardQueryOptions(options: Partial<IShardsWorkloadState>) {
     } as const;
 }
 
+export function setTopShardFilters(filters: Partial<IShardsWorkloadFilters>) {
+    return {
+        type: SET_TOP_SHARDS_FILTERS,
+        filters,
+    } as const;
+}
+
 export default shardsWorkload;

package/dist/store/state-url-mapping.js

@@ -48,6 +48,14 @@ const paramSetup = {
         generalTab: {
             stateKey: 'tenant.diagnosticsTab',
         },
+        topShardsFrom: {
+            stateKey: 'shardsWorkload.filters.from',
+            type: 'number',
+        },
+        topShardsTo: {
+            stateKey: 'shardsWorkload.filters.to',
+            type: 'number',
+        },
     },
 };
 

package/dist/types/store/shardsWorkload.ts

@@ -1,18 +1,27 @@
-import {SEND_SHARD_QUERY, setShardQueryOptions} from '../../store/reducers/shardsWorkload';
+import {SEND_SHARD_QUERY, setShardQueryOptions, setTopShardFilters} from '../../store/reducers/shardsWorkload';
 import type {ApiRequestAction} from '../../store/utils';
 import type {IResponseError} from '../api/error';
 import type {IQueryResult} from './query';
 
+export interface IShardsWorkloadFilters {
+    /** ms from epoch */
+    from?: number;
+    /** ms from epoch */
+    to?: number;
+}
+
 export interface IShardsWorkloadState {
     loading: boolean;
     wasLoaded: boolean;
     data?: IQueryResult;
     error?: IResponseError;
+    filters: IShardsWorkloadFilters;
 }
 
 export type IShardsWorkloadAction =
     | ApiRequestAction<typeof SEND_SHARD_QUERY, IQueryResult, IResponseError>
-    | ReturnType<typeof setShardQueryOptions>;
+    | ReturnType<typeof setShardQueryOptions>
+    | ReturnType<typeof setTopShardFilters>;
 
 export interface IShardsWorkloadRootStateSlice {
     shardsWorkload: IShardsWorkloadState;

package/dist/utils/query.ts

@@ -186,5 +186,5 @@ export const prepareQueryResponse = (data?: KeyValueRow[]) => {
 };
 
 export function prepareQueryError(error: any) {
-    return error.data?.error?.message || error.data || error.statusText || JSON.stringify(error);
+    return error.data?.error?.message || error.message || error.data || error.statusText || JSON.stringify(error);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ydb-embedded-ui",
-  "version": "3.0.1",
+  "version": "3.1.0",
   "files": [
     "dist"
   ],