feat(TopShards): date range filter

Author: ariser

src/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;
+        }
+    }
+}

src/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>
+    );
+};

src/containers/Tenant/Diagnostics/TopShards/DateRange/index.ts

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

src/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;
+    }
 }

src/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>
     );

src/containers/Tenant/Diagnostics/TopShards/i18n/en.json

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

src/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);

src/containers/Tenant/Diagnostics/TopShards/i18n/ru.json

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