ydb-embedded-ui 3.3.2 → 3.3.4

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

@@ -0,0 +1,8 @@
+.top-shards {
+    &__filters {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: baseline;
+        gap: 16px;
+    }
+}

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

@@ -0,0 +1,56 @@
+import {RadioButton} from '@gravity-ui/uikit';
+
+import {DateRange, DateRangeValues} from '../../../../../components/DateRange';
+
+import {
+    EShardsWorkloadMode,
+    IShardsWorkloadFilters,
+} from '../../../../../types/store/shardsWorkload';
+
+import {isEnumMember} from '../../../../../utils/typecheckers';
+
+import i18n from '../i18n';
+import {b} from '../TopShards';
+
+import './Filters.scss';
+
+interface FiltersProps {
+    value: IShardsWorkloadFilters;
+    onChange: (value: Partial<IShardsWorkloadFilters>) => void;
+    className?: string;
+}
+
+export const Filters = ({value, onChange, className}: FiltersProps) => {
+    const handleModeChange = (mode: string) => {
+        if (!isEnumMember(EShardsWorkloadMode, mode)) {
+            const values = Object.values(EShardsWorkloadMode).join(', ');
+            throw new Error(`Unexpected TopShards mode "${mode}". Should be one of: ${values}`);
+        }
+
+        onChange({mode});
+    };
+
+    const handleDateRangeChange = (dateRange: DateRangeValues) => {
+        onChange({
+            mode: EShardsWorkloadMode.History,
+            ...dateRange,
+        });
+    };
+
+    const from = value.mode === EShardsWorkloadMode.Immediate ? undefined : value.from;
+    const to = value.mode === EShardsWorkloadMode.Immediate ? undefined : value.to;
+
+    return (
+        <div className={b('filters', className)}>
+            <RadioButton value={value.mode} onUpdate={handleModeChange}>
+                <RadioButton.Option value={EShardsWorkloadMode.Immediate}>
+                    {i18n('filters.mode.immediate')}
+                </RadioButton.Option>
+                <RadioButton.Option value={EShardsWorkloadMode.History}>
+                    {i18n('filters.mode.history')}
+                </RadioButton.Option>
+            </RadioButton>
+            <DateRange from={from} to={to} onChange={handleDateRangeChange} />
+        </div>
+    );
+};

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

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

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

@@ -1,6 +1,7 @@
-.overloaded-shards {
+.top-shards {
     display: flex;
     flex-direction: column;
+    gap: 10px;
 
     height: 100%;
 
@@ -11,15 +12,6 @@
         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/{OverloadedShards/OverloadedShards.tsx → TopShards/TopShards.tsx}

@@ -2,10 +2,9 @@ import {useState, useContext, useEffect, useMemo} from 'react';
 import {useDispatch} from 'react-redux';
 import cn from 'bem-cn-lite';
 
-import DataTable, {Column, Settings, SortOrder} from '@yandex-cloud/react-data-table';
+import DataTable, {Column, Settings, SortOrder} from '@gravity-ui/react-data-table';
 import {Loader} from '@gravity-ui/uikit';
 
-import {DateRange, DateRangeValues} from '../../../../components/DateRange';
 import {InternalLink} from '../../../../components/InternalLink';
 
 import HistoryContext from '../../../../contexts/HistoryContext';
@@ -18,7 +17,7 @@ import {
     setShardsQueryFilters,
 } from '../../../../store/reducers/shardsWorkload';
 import {setCurrentSchemaPath, getSchema} from '../../../../store/reducers/schema';
-import type {IShardsWorkloadFilters} from '../../../../types/store/shardsWorkload';
+import {EShardsWorkloadMode, IShardsWorkloadFilters} from '../../../../types/store/shardsWorkload';
 
 import type {EPathType} from '../../../../types/api/schema';
 
@@ -31,10 +30,12 @@ import {getDefaultNodePath} from '../../../Node/NodePages';
 
 import {isColumnEntityType} from '../../utils/schema';
 
+import {Filters} from './Filters';
+
 import i18n from './i18n';
-import './OverloadedShards.scss';
+import './TopShards.scss';
 
-const b = cn('overloaded-shards');
+export const b = cn('top-shards');
 const bLink = cn('yc-link');
 
 const TABLE_SETTINGS: Settings = {
@@ -53,6 +54,7 @@ const tableColumnsNames = {
     NodeId: 'NodeId',
     PeakTime: 'PeakTime',
     InFlightTxCount: 'InFlightTxCount',
+    IntervalEnd: 'IntervalEnd',
 };
 
 function prepareCPUWorkloadValue(value: string) {
@@ -82,12 +84,18 @@ function dataTableToStringSortOrder(value: SortOrder | SortOrder[] = []) {
     return sortOrders.map(({columnId}) => columnId).join(',');
 }
 
-interface OverloadedShardsProps {
+function fillDateRangeFor(value: IShardsWorkloadFilters) {
+    value.to = Date.now();
+    value.from = value.to - HOUR_IN_SECONDS * 1000;
+    return value;
+}
+
+interface TopShardsProps {
     tenantPath: string;
     type?: EPathType;
 }
 
-export const OverloadedShards = ({tenantPath, type}: OverloadedShardsProps) => {
+export const TopShards = ({tenantPath, type}: TopShardsProps) => {
     const dispatch = useDispatch();
 
     const {autorefresh, currentSchemaPath} = useTypedSelector((state) => state.schema);
@@ -100,17 +108,20 @@ export const OverloadedShards = ({tenantPath, type}: OverloadedShardsProps) => {
         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
+    // default filters 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(),
-            };
+        const defaultValue = {...storeFilters};
+
+        if (!defaultValue.mode) {
+            defaultValue.mode = EShardsWorkloadMode.Immediate;
         }
 
-        return storeFilters;
+        if (!defaultValue.from && !defaultValue.to) {
+            fillDateRangeFor(defaultValue);
+        }
+
+        return defaultValue;
     });
 
     const [sortOrder, setSortOrder] = useState(tableColumnsNames.CPUCores);
@@ -143,18 +154,34 @@ export const OverloadedShards = ({tenantPath, type}: OverloadedShardsProps) => {
     const history = useContext(HistoryContext);
 
     const onSort = (newSortOrder?: SortOrder | SortOrder[]) => {
-        // omit information about sort order to disable ASC order, only DESC makes sense for overloaded shards
+        // omit information about sort order to disable ASC order, only DESC makes sense for top 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) => {
+    const handleFiltersChange = (value: Partial<IShardsWorkloadFilters>) => {
+        const newStateValue = {...value};
+        const isDateRangePristine =
+            !storeFilters.from && !storeFilters.to && !value.from && !value.to;
+
+        if (isDateRangePristine) {
+            switch (value.mode) {
+                case EShardsWorkloadMode.Immediate:
+                    newStateValue.from = newStateValue.to = undefined;
+                    break;
+                case EShardsWorkloadMode.History:
+                    // should default to the current datetime every time history mode activates
+                    fillDateRangeFor(newStateValue);
+                    break;
+            }
+        }
+
         dispatch(setShardsQueryFilters(value));
-        setFilters(value);
+        setFilters((state) => ({...state, ...newStateValue}));
     };
 
-    const tableColumns: Column<any>[] = useMemo(() => {
+    const tableColumns = useMemo(() => {
         const onSchemaClick = (schemaPath: string) => {
             return () => {
                 dispatch(setCurrentSchemaPath(schemaPath));
@@ -163,7 +190,7 @@ export const OverloadedShards = ({tenantPath, type}: OverloadedShardsProps) => {
             };
         };
 
-        return [
+        const columns: Column<any>[] = [
             {
                 name: tableColumnsNames.Path,
                 render: ({value: relativeNodePath}) => {
@@ -216,11 +243,6 @@ export const OverloadedShards = ({tenantPath, type}: OverloadedShardsProps) => {
                 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),
@@ -228,7 +250,22 @@ export const OverloadedShards = ({tenantPath, type}: OverloadedShardsProps) => {
                 sortable: false,
             },
         ];
-    }, [dispatch, history, tenantPath]);
+
+        if (filters.mode === EShardsWorkloadMode.History) {
+            // after NodeId
+            columns.splice(5, 0, {
+                name: tableColumnsNames.PeakTime,
+                render: ({value}) => formatDateTime(new Date(value as string).valueOf()),
+                sortable: false,
+            });
+            columns.push({
+                name: tableColumnsNames.IntervalEnd,
+                render: ({value}) => formatDateTime(new Date(value as string).getTime()),
+            });
+        }
+
+        return columns;
+    }, [dispatch, filters.mode, history, tenantPath]);
 
     const renderLoader = () => {
         return (
@@ -267,10 +304,8 @@ export const OverloadedShards = ({tenantPath, type}: OverloadedShardsProps) => {
 
     return (
         <div className={b()}>
-            <div className={b('controls')}>
-                {i18n('description')}
-                <DateRange from={filters.from} to={filters.to} onChange={handleDateRangeChange} />
-            </div>
+            <Filters value={filters} onChange={handleFiltersChange} />
+            {filters.mode === EShardsWorkloadMode.History && <div>{i18n('description')}</div>}
             {renderContent()}
         </div>
     );

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

@@ -0,0 +1,6 @@
+{
+  "no-data": "No data",
+  "filters.mode.immediate": "Immediate",
+  "filters.mode.history": "Historical",
+  "description": "Historical data only tracks shards with CPU load over 70%"
+}

package/dist/containers/Tenant/Diagnostics/{OverloadedShards → TopShards}/i18n/index.ts

@@ -3,7 +3,7 @@ import {i18n, Lang} from '../../../../../utils/i18n';
 import en from './en.json';
 import ru from './ru.json';
 
-const COMPONENT = 'ydb-diagnostics-overloaded-shards';
+const COMPONENT = 'ydb-diagnostics-top-shards';
 
 i18n.registerKeyset(Lang.En, COMPONENT, en);
 i18n.registerKeyset(Lang.Ru, COMPONENT, ru);

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

@@ -0,0 +1,6 @@
+{
+  "no-data": "Нет данных",
+  "filters.mode.immediate": "Мгновенные",
+  "filters.mode.history": "Исторические",
+  "description": "Исторические данные хранятся только о шардах с загрузкой CPU выше 70%"
+}

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

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

package/dist/containers/Tenant/ObjectSummary/ObjectSummary.tsx

@@ -26,6 +26,8 @@ import {
     TColumnTableDescription,
     TDirEntry,
 } from '../../../types/api/schema';
+
+import {formatDateTime} from '../../../utils';
 import {isColumnEntityType, isIndexTable, isTableType} from '../utils/schema';
 
 import {
@@ -201,7 +203,7 @@ function ObjectSummary(props: ObjectSummaryProps) {
             const startTimeInMilliseconds = Number(currentSchemaData?.CreateStep);
             let createTime = '';
             if (startTimeInMilliseconds) {
-                createTime = new Date(startTimeInMilliseconds).toUTCString();
+                createTime = formatDateTime(startTimeInMilliseconds);
             }
 
             component = <InfoViewer info={[{label: 'Create time', value: createTime}]} />;

package/dist/containers/Tenant/QueryEditor/QueryExplain/QueryExplain.js

@@ -1,28 +1,33 @@
 import React, {useEffect, useRef, useState} from 'react';
+import {useDispatch, useSelector} from 'react-redux';
 import cn from 'bem-cn-lite';
 import MonacoEditor from 'react-monaco-editor';
-import {Loader, RadioButton} from '@gravity-ui/uikit';
 import JSONTree from 'react-json-inspector';
-import {LANGUAGE_S_EXPRESSION_ID} from '../../../../utils/monaco';
+import 'react-json-inspector/json-inspector.css';
+
 import {
     TextOverflow,
     getYdbPlanNodeShape,
     getCompactTopology,
     getTopology,
-} from '@yandex-cloud/paranoid';
-import {renderExplainNode} from '../../../../utils';
-import {explainVersions} from '../../../../store/reducers/explainQuery';
-import QueryExecutionStatus from '../../../../components/QueryExecutionStatus/QueryExecutionStatus';
+} from '@gravity-ui/paranoid';
+import {Loader, RadioButton} from '@gravity-ui/uikit';
+
 import Divider from '../../../../components/Divider/Divider';
 import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
-import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers';
 import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
+import {QueryExecutionStatus} from '../../../../components/QueryExecutionStatus';
 
-import 'react-json-inspector/json-inspector.css';
-import './QueryExplain.scss';
-import {useDispatch, useSelector} from 'react-redux';
+import {explainVersions} from '../../../../store/reducers/explainQuery';
 import {disableFullscreen} from '../../../../store/reducers/fullscreen';
 
+import {renderExplainNode} from '../../../../utils';
+import {LANGUAGE_S_EXPRESSION_ID} from '../../../../utils/monaco';
+
+import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers';
+
+import './QueryExplain.scss';
+
 const b = cn('kv-query-explain');
 
 const EDITOR_OPTIONS = {
@@ -263,7 +268,7 @@ function QueryExplain(props) {
                 {!props.loading && (
                     <React.Fragment>
                         <div className={b('controls-right')}>
-                            <QueryExecutionStatus hasError={Boolean(props.error)} />
+                            <QueryExecutionStatus error={props.error} />
                             {!props.error && (
                                 <React.Fragment>
                                     <Divider />

package/dist/containers/Tenant/QueryEditor/QueryResult/QueryResult.js

@@ -1,20 +1,26 @@
 import React, {useEffect, useState} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import cn from 'bem-cn-lite';
-import {RadioButton} from '@gravity-ui/uikit';
 import JSONTree from 'react-json-inspector';
 
+import {RadioButton} from '@gravity-ui/uikit';
+
 import CopyToClipboard from '../../../../components/CopyToClipboard/CopyToClipboard';
 import Divider from '../../../../components/Divider/Divider';
+import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
 import Fullscreen from '../../../../components/Fullscreen/Fullscreen';
+import {QueryExecutionStatus} from '../../../../components/QueryExecutionStatus';
+
 import {disableFullscreen} from '../../../../store/reducers/fullscreen';
 
-import './QueryResult.scss';
+import {prepareQueryError} from '../../../../utils/query';
+
 import {PaneVisibilityToggleButtons} from '../../utils/paneVisibilityToggleHelpers';
-import QueryExecutionStatus from '../../../../components/QueryExecutionStatus/QueryExecutionStatus';
-import EnableFullscreenButton from '../../../../components/EnableFullscreenButton/EnableFullscreenButton';
+
 import ResultIssues from '../Issues/Issues';
 
+import './QueryResult.scss';
+
 const b = cn('kv-query-result');
 
 const resultOptionsIds = {
@@ -94,31 +100,39 @@ function QueryResult(props) {
     };
 
     const renderIssues = () => {
-        const error = props.error?.data;
-
-        const hasIssues = error?.issues && Array.isArray(error.issues);
-
-        return hasIssues ? (
-            <React.Fragment>
-                <ResultIssues data={error} />
-                {isFullscreen && (
-                    <Fullscreen>
-                        <div className={b('result', {fullscreen: true})}>
-                            <ResultIssues data={error} />
-                        </div>
-                    </Fullscreen>
-                )}
-            </React.Fragment>
-        ) : (
-            <span>{error?.data ?? error}</span>
-        );
+        const error = props.error;
+
+        const hasIssues = error?.data?.issues && Array.isArray(error.data.issues);
+
+        if (hasIssues) {
+            return (
+                <React.Fragment>
+                    <ResultIssues data={error.data} />
+                    {isFullscreen && (
+                        <Fullscreen>
+                            <div className={b('result', {fullscreen: true})}>
+                                <ResultIssues data={error.data} />
+                            </div>
+                        </Fullscreen>
+                    )}
+                </React.Fragment>
+            )
+        }
+
+        if (error) {
+            return (
+                <div className={b('error')}>
+                    {prepareQueryError(error)}
+                </div>
+            );
+        }
     };
 
     return (
         <React.Fragment>
             <div className={b('controls')}>
                 <div className={b('controls-right')}>
-                    <QueryExecutionStatus hasError={Boolean(props.error)} />
+                    <QueryExecutionStatus error={props.error} />
 
                     {props.stats && !props.error && (
                         <React.Fragment>

package/dist/containers/Tenant/QueryEditor/QueryResult/QueryResult.scss

@@ -20,6 +20,10 @@
         }
     }
 
+    &__error {
+        padding: 15px 10px;
+    }
+
     &__controls {
         position: sticky;
         z-index: 2;

package/dist/containers/Tenant/Schema/SchemaViewer/SchemaViewer.js

@@ -5,7 +5,7 @@ import cn from 'bem-cn-lite';
 import find from 'lodash/find';
 
 import Icon from '../../../../components/Icon/Icon';
-import DataTable from '@yandex-cloud/react-data-table';
+import DataTable from '@gravity-ui/react-data-table';
 import {DEFAULT_TABLE_SETTINGS} from '../../../../utils/constants';
 import './SchemaViewer.scss';
 

package/dist/containers/Tenants/Tenants.js

@@ -5,7 +5,7 @@ import {connect} from 'react-redux';
 import _ from 'lodash';
 import {escapeRegExp} from 'lodash/fp';
 
-import DataTable from '@yandex-cloud/react-data-table';
+import DataTable from '@gravity-ui/react-data-table';
 import {Loader, TextInput, Button} from '@gravity-ui/uikit';
 
 import EntityStatus from '../../components/EntityStatus/EntityStatus';
@@ -218,8 +218,9 @@ class Tenants extends React.Component {
                 },
                 accessor: ({Metrics = {}, CoresUsed}) => {
                     if (!isNaN(Number(CoresUsed))) {
-                        const cores = Math.round(Number(CoresUsed) * 100) / 100;
-                        return cores || '—';
+                        return Number(CoresUsed) * 100 > 1
+                            ? formatCPU(Number(CoresUsed) * 1_000_000)
+                            : '—';
                     } else {
                         return Number(Metrics.CPU) ? formatCPU(Number(Metrics.CPU)) : '—';
                     }

package/dist/routes.ts

@@ -16,6 +16,7 @@ const routes = {
     tablet: '/tablet/:id',
     tabletsFilters: '/tabletsFilters',
     clusterPage: '/clusters/:name',
+    auth: '/auth',
 };
 
 export const CLUSTER_PAGES = {

package/dist/services/api.js

@@ -185,7 +185,10 @@ export class YdbEmbeddedAPI extends AxiosWrapper {
                 timeout: 600000,
             },
             null,
-            {concurrentId},
+            {
+                concurrentId,
+                timeout: 9 * 60 * 1000,
+            },
         );
     }
     getExplainQuery(query, database) {

package/dist/store/reducers/authentication.js

@@ -34,21 +34,6 @@ const authentication = function (state = initialState, action) {
     }
 };
 
-export const setIsNotAuthenticated = () => {
-    return (dispatch) => {
-        dispatch({
-            type: SET_UNAUTHENTICATED.SUCCESS,
-        });
-    };
-};
-export const setIsAuthenticated = () => {
-    return (dispatch) => {
-        dispatch({
-            type: SET_AUTHENTICATED.SUCCESS,
-        });
-    };
-};
-
 export const authenticate = (user, password) => {
     return createApiRequest({
         request: window.api.authenticate(user, password),

package/dist/store/reducers/shardsWorkload.ts

@@ -6,6 +6,7 @@ import type {
     IShardsWorkloadFilters,
     IShardsWorkloadState,
 } from '../../types/store/shardsWorkload';
+import {EShardsWorkloadMode} from '../../types/store/shardsWorkload';
 
 import {parseQueryAPIExecuteResponse} from '../../utils/query';
 
@@ -51,7 +52,7 @@ function getFiltersConditions(filters?: IShardsWorkloadFilters) {
     return conditions.join(' AND ');
 }
 
-function createShardQuery(
+function createShardQueryHistorical(
     path: string,
     filters?: IShardsWorkloadFilters,
     sortOrder?: SortOrder[],
@@ -77,13 +78,36 @@ function createShardQuery(
     DataSize,
     NodeId,
     PeakTime,
-    InFlightTxCount
+    InFlightTxCount,
+    IntervalEnd
 FROM \`.sys/top_partitions_one_hour\`
 WHERE ${where}
 ${orderBy}
 LIMIT 20`;
 }
 
+function createShardQueryImmediate(path: string, sortOrder?: SortOrder[], tenantName?: string) {
+    const pathSelect = tenantName
+        ? `CAST(SUBSTRING(CAST(Path AS String), ${tenantName.length}) AS Utf8) AS Path`
+        : 'Path';
+
+    const orderBy = sortOrder ? `ORDER BY ${sortOrder.map(formatSortOrder).join(', ')}` : '';
+
+    return `SELECT
+    ${pathSelect},
+    TabletId,
+    CPUCores,
+    DataSize,
+    NodeId,
+    InFlightTxCount
+FROM \`.sys/partition_stats\`
+WHERE
+    Path='${path}'
+    OR Path LIKE '${path}/%'
+${orderBy}
+LIMIT 20`;
+}
+
 const queryAction = 'execute-scan';
 
 const shardsWorkload: Reducer<IShardsWorkloadState, IShardsWorkloadAction> = (
@@ -146,7 +170,10 @@ export const sendShardQuery = ({database, path = '', sortOrder, filters}: SendSh
             request: window.api.sendQuery(
                 {
                     schema: 'modern',
-                    query: createShardQuery(path, filters, sortOrder, database),
+                    query:
+                        filters?.mode === EShardsWorkloadMode.Immediate
+                            ? createShardQueryImmediate(path, sortOrder, database)
+                            : createShardQueryHistorical(path, filters, sortOrder, database),
                     database,
                     action: queryAction,
                 },

package/dist/store/reducers/storage.js

@@ -420,7 +420,7 @@ export const getUsageFilterOptions = createSelector(getVisibleEntitiesList, (ent
     entities.forEach((entity) => {
         const usage = getUsage(entity, 5);
 
-        if (!Object.hasOwn(items, usage)) {
+        if (!Object.prototype.hasOwnProperty.call(items, usage)) {
             items[usage] = 0;
         }
 

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

@@ -48,6 +48,9 @@ const paramSetup = {
         generalTab: {
             stateKey: 'tenant.diagnosticsTab',
         },
+        shardsMode: {
+            stateKey: 'shardsWorkload.filters.mode',
+        },
         shardsDateFrom: {
             stateKey: 'shardsWorkload.filters.from',
             type: 'number',