chore(Bundle/TabletErrors): add path filter [YTFRONT-4119]

packages/ui/src/shared/tablet-errors-manager.ts

@@ -1,5 +1,5 @@
 import axios, {AxiosResponse, CancelToken} from 'axios';
-import {YTError} from '../ytsaurus-ui.ui/types';
+import {YTError} from '../@types/types';
 
 export const TABLET_ERRORS_MANAGER_POST_ACTIONS = new Set([
     'tablet_errors_by_bundle',
@@ -22,14 +22,21 @@ export type TableMethodErrorsCount = {
     method_counts: Record<string, number>;
 };
 
+export type TabletErrorsByBundleResponse = {
+    all_methods: Array<string>;
+    presented_methods: Array<string>;
+    errors: Array<TableMethodErrorsCount>;
+    fixed_end_timestamp: unknown;
+    total_row_count: number;
+};
+
 export type TabletErrorsBaseParams = {
     start_timestamp: number;
     end_timestamp: number;
     methods?: Array<string>;
     count_limit: number;
     offset: number;
-    tablet_id?: string;
-    fixed_end_timestamp?: number;
+    fixed_end_timestamp?: unknown;
 };
 
 export type TabletMethodError = {
@@ -57,13 +64,11 @@ export type TabletError = {
 
 export type TabletErrorsApi = {
     tablet_errors_by_bundle: {
-        body: TabletErrorsBaseParams & {tablet_cell_bundle: string};
-        response: {
-            errors: Array<TableMethodErrorsCount>;
-        };
+        body: TabletErrorsBaseParams & {tablet_cell_bundle: string; table_path?: string};
+        response: TabletErrorsByBundleResponse;
     };
     tablet_errors_by_table: {
-        body: TabletErrorsBaseParams & {table_path: string; table_id: string};
+        body: TabletErrorsBaseParams & {table_path: string; table_id: string; tablet_id?: string};
         response: MethodErrors;
     };
     tablet_errors_by_table_and_timestamp: {

packages/ui/src/ui/pages/tablet-errors-by-bundle/TabletErrorsByBundle.tsx

@@ -14,11 +14,12 @@ import DataTableYT, {
 } from '../../components/DataTableYT/DataTableYT';
 import Error from '../../components/Error/Error';
 import {
-    getTabletErrorsByBundle,
+    getTabletErrorsByBundleData,
     getTabletErrorsByBundleError,
     getTabletErrorsByBundleLoaded,
     getTabletErrorsByBundleLoading,
     getTabletErrorsByBundleMethodsFilter,
+    getTabletErrorsByBundlePageCount,
     getTabletErrorsByBundlePageFilter,
     getTabletErrorsByBundleTimeRangeFilter,
 } from '../../store/selectors/tablet-errors/tablet-errors-by-bundle';
@@ -63,10 +64,11 @@ export function TabletErrorsByBundle({bundle}: {bundle: string}) {
 }
 
 function useTabletErrorsColumns(loading: boolean) {
-    const {errors: data = []} = useSelector(getTabletErrorsByBundle) ?? {};
+    const {errors: data = []} = useSelector(getTabletErrorsByBundleData) ?? {};
     const pageFilter = useSelector(getTabletErrorsByBundlePageFilter);
     const teMethods = useSelector(getTabletErrorsByBundleMethodsFilter);
     const teTime = useSelector(getTabletErrorsByBundleTimeRangeFilter);
+    const pageCount = useSelector(getTabletErrorsByBundlePageCount);
 
     const columns = React.useMemo(() => {
         type Method = keyof (typeof data)[number]['method_counts'];
@@ -85,7 +87,7 @@ function useTabletErrorsColumns(loading: boolean) {
                         column="Path"
                         loading={loading}
                         pageIndex={pageFilter}
-                        pageCount={100}
+                        pageCount={pageCount}
                     />
                 ),
                 render({row}) {
@@ -126,7 +128,7 @@ function useTabletErrorsColumns(loading: boolean) {
         ];
 
         return res;
-    }, [data, loading, teMethods, teTime]);
+    }, [data, loading, teMethods, teTime, pageCount]);
 
     return {data, columns};
 }

packages/ui/src/ui/pages/tablet-errors-by-bundle/TabletErrorsByBundleToolbar.scss

@@ -0,0 +1,5 @@
+.yt-tablet-errors-by-bundle-toolbar {
+    &__path-filter {
+        width: 300px;
+    }
+}

packages/ui/src/ui/pages/tablet-errors-by-bundle/TabletErrorsByBundleToolbar.tsx

@@ -7,10 +7,14 @@ import Select from '../../components/Select/Select';
 import SimplePagination from '../../components/Pagination/SimplePagination';
 import {Toolbar} from '../../components/WithStickyToolbar/Toolbar/Toolbar';
 import {YTTimeline} from '../../components/common/YTTimeline';
+import TextInputWithDebounce from '../../components/TextInputWithDebounce/TextInputWithDebounce';
 
 import {
+    getTabletErrorsByBundleData,
     getTabletErrorsByBundleMethodsFilter,
+    getTabletErrorsByBundlePageCount,
     getTabletErrorsByBundlePageFilter,
+    getTabletErrorsByBundleTablePathFilter,
     getTabletErrorsByBundleTimeRangeFilter,
 } from '../../store/selectors/tablet-errors/tablet-errors-by-bundle';
 import {
@@ -19,20 +23,9 @@ import {
 } from '../../store/reducers/tablet-errors/tablet-errors-by-bundle';
 import {loadTabletErrorsByBundle} from '../../store/actions/tablet-errors/tablet-errors-by-bundle';
 
-const block = cn('yt-tablet-errors-toolbar');
+import './TabletErrorsByBundleToolbar.scss';
 
-const ALL_METHODS = [
-    'Execute',
-    'Multiread',
-    'PullRows',
-    'GetTabletInfo',
-    'ReadDynamicStore',
-    'FetchTabletStores',
-    'FetchTableRows',
-    'GetOrderedTabletSafeTrimRowCount',
-    'Write',
-    'Trim',
-].map((value) => ({value, text: value}));
+const block = cn('yt-tablet-errors-by-bundle-toolbar');
 
 export function TabletErrorsByBundleToolbar({
     bundle,
@@ -43,20 +36,32 @@ export function TabletErrorsByBundleToolbar({
 }) {
     const dispatch = useDispatch();
 
+    const {all_methods = []} = useSelector(getTabletErrorsByBundleData) ?? {};
     const methodsFilter = useSelector(getTabletErrorsByBundleMethodsFilter);
     const timeRangeFilter = useSelector(getTabletErrorsByBundleTimeRangeFilter);
     const pageFilter = useSelector(getTabletErrorsByBundlePageFilter);
-    const {from, to} = useTabletErrorsLoad(bundle, {methodsFilter, timeRangeFilter, pageFilter});
+    const tablePathFilter = useSelector(getTabletErrorsByBundleTablePathFilter);
+    const pageCount = useSelector(getTabletErrorsByBundlePageCount);
+
+    const {from, to} = useTabletErrorsLoad(bundle, {
+        methodsFilter,
+        timeRangeFilter,
+        pageFilter,
+        tablePathFilter,
+    });
 
     return (
         <div className={block(null, className)}>
             <YTTimeline
                 from={from}
                 to={to}
                 shortcut={timeRangeFilter.shortcutValue}
-                onUpdate={(data) => {
-                    console.log({data});
-                    dispatch(tabletErrorsByBundleActions.updateFilter({timeRangeFilter: data}));
+                onUpdate={({from, to, shortcutValue}) => {
+                    dispatch(
+                        tabletErrorsByBundleActions.updateFilter({
+                            timeRangeFilter: {from, to, shortcutValue},
+                        }),
+                    );
                 }}
                 hasRuler={true}
             />
@@ -67,7 +72,7 @@ export function TabletErrorsByBundleToolbar({
                             <SimplePagination
                                 value={pageFilter}
                                 min={0}
-                                max={100}
+                                max={Math.max(0, pageCount - 1)}
                                 onChange={(v) => {
                                     dispatch(
                                         tabletErrorsByBundleActions.updateFilter({pageFilter: v}),
@@ -76,13 +81,31 @@ export function TabletErrorsByBundleToolbar({
                             />
                         ),
                     },
+                    {
+                        node: (
+                            <TextInputWithDebounce
+                                className={block('path-filter')}
+                                placeholder={'Table path...'}
+                                value={tablePathFilter}
+                                onUpdate={(value) => {
+                                    dispatch(
+                                        tabletErrorsByBundleActions.updateFilter({
+                                            tablePathFilter: value,
+                                        }),
+                                    );
+                                }}
+                            />
+                        ),
+                    },
                     {
                         node: (
                             <Select
                                 multiple
                                 label="Methods:"
                                 value={methodsFilter}
-                                items={ALL_METHODS}
+                                items={all_methods.map((value) => {
+                                    return {value, text: value};
+                                })}
                                 onUpdate={(v) =>
                                     dispatch(
                                         tabletErrorsByBundleActions.updateFilter({
@@ -108,7 +131,11 @@ function useTabletErrorsLoad(
         timeRangeFilter,
         methodsFilter,
         pageFilter,
-    }: Pick<TabletErrorsByBundleState, 'timeRangeFilter' | 'methodsFilter' | 'pageFilter'>,
+        tablePathFilter,
+    }: Pick<
+        TabletErrorsByBundleState,
+        'timeRangeFilter' | 'methodsFilter' | 'pageFilter' | 'tablePathFilter'
+    >,
 ) {
     const dispatch = useDispatch();
 
@@ -120,9 +147,10 @@ function useTabletErrorsLoad(
                 start_timestamp: Math.floor(from / 1000),
                 end_timestamp: Math.ceil(to / 1000),
                 methods: methodsFilter.length ? methodsFilter : undefined,
+                ...(tablePathFilter ? {table_path: tablePathFilter} : {}),
             }),
         );
-    }, [bundle, dispatch, timeRangeFilter, methodsFilter, pageFilter]);
+    }, [bundle, dispatch, timeRangeFilter, methodsFilter, pageFilter, tablePathFilter]);
     return calcFromTo(timeRangeFilter);
 }
 

packages/ui/src/ui/store/actions/tablet-errors/tablet-errors-by-bundle.ts

@@ -4,6 +4,7 @@ import {fetchFromTabletErrorsApi, TabletErrorsApi} from '../../../../shared/tabl
 import {getCluster} from '../../../store/selectors/global';
 import {tabletErrorsByBundleActions} from '../../../store/reducers/tablet-errors/tablet-errors-by-bundle';
 import CancelHelper from '../../../utils/cancel-helper';
+import {getTabletErrorsByBundleData} from '../../../store/selectors/tablet-errors/tablet-errors-by-bundle';
 
 type AsyncAction<T = Promise<void>> = ThunkAction<T, RootState, unknown, any>;
 
@@ -13,14 +14,15 @@ export function loadTabletErrorsByBundle(
     page: number,
     params: Pick<
         TabletErrorsApi['tablet_errors_by_bundle']['body'],
-        'tablet_cell_bundle' | 'start_timestamp' | 'end_timestamp' | 'methods'
+        'tablet_cell_bundle' | 'start_timestamp' | 'end_timestamp' | 'methods' | 'table_path'
     >,
 ): AsyncAction {
     return (dispatch, getState) => {
         dispatch(tabletErrorsByBundleActions.onRequest({bundle: params.tablet_cell_bundle}));
 
         const state = getState();
         const cluster = getCluster(state);
+        const data = getTabletErrorsByBundleData(state);
 
         return fetchFromTabletErrorsApi(
             'tablet_errors_by_bundle',
@@ -29,10 +31,18 @@ export function loadTabletErrorsByBundle(
                 ...params,
                 offset: page * 100,
                 count_limit: 100,
+                ...(page !== 0 && data?.fixed_end_timestamp
+                    ? {fixed_end_timestamp: data?.fixed_end_timestamp}
+                    : {}),
             },
             cancelHelper.removeAllAndGenerateNextToken(),
         ).then(({data}) => {
-            dispatch(tabletErrorsByBundleActions.onSuccess({data}));
+            dispatch(
+                tabletErrorsByBundleActions.onSuccess({
+                    data,
+                    ...(page === 0 ? {total_row_count: data.total_row_count} : {}),
+                }),
+            );
         });
     };
 }

packages/ui/src/ui/store/reducers/tablet-errors/tablet-errors-by-bundle.ts

@@ -10,22 +10,25 @@ export type TabletErrorsByBundleState = {
 
     bundle: string;
     data: TabletErrorsApi['tablet_errors_by_bundle']['response'] | undefined;
+    total_row_count: number | undefined;
 
     timeRangeFilter:
         | {shortcutValue: string; from?: number; to?: number}
         | {from: number; to: number; shortcutValue?: undefined};
 
     methodsFilter: Array<string>;
     pageFilter: number;
+    tablePathFilter: string;
 };
 
 const persistentState: Pick<
     TabletErrorsByBundleState,
-    `timeRangeFilter` | 'methodsFilter' | 'pageFilter'
+    `timeRangeFilter` | 'methodsFilter' | 'pageFilter' | `tablePathFilter`
 > = {
     timeRangeFilter: {shortcutValue: '1d'},
     methodsFilter: [],
     pageFilter: 0,
+    tablePathFilter: '',
 };
 
 const ephemeralState: Omit<TabletErrorsByBundleState, keyof typeof persistentState> = {
@@ -34,6 +37,7 @@ const ephemeralState: Omit<TabletErrorsByBundleState, keyof typeof persistentSta
     error: undefined,
     bundle: '',
     data: undefined,
+    total_row_count: undefined,
 };
 
 export const initialState: TabletErrorsByBundleState = {...persistentState, ...ephemeralState};
@@ -47,15 +51,23 @@ const tabletErrorsByBundleSlice = createSlice({
             {payload: {bundle}}: PayloadAction<Pick<TabletErrorsByBundleState, 'bundle'>>,
         ) {
             if (bundle != state.bundle) {
-                return {...state, bundle, data: undefined, loading: true};
+                return {
+                    ...state,
+                    bundle,
+                    data: undefined,
+                    total_row_count: undefined,
+                    loading: true,
+                };
             }
             return {...state, loading: true};
         },
         onSuccess(
             state,
-            {payload: {data}}: PayloadAction<Pick<TabletErrorsByBundleState, 'data'>>,
+            {
+                payload,
+            }: PayloadAction<Pick<TabletErrorsByBundleState, 'data'> & {total_row_count?: number}>,
         ) {
-            return {...state, data, loading: false, loaded: true, error: undefined};
+            return {...state, ...payload, loading: false, loaded: true, error: undefined};
         },
         onError(
             state,

packages/ui/src/ui/store/reducers/tablet-errors/url-mapping.ts

@@ -25,6 +25,10 @@ export const tabletErrorsByBundleParams: LocationParameters = {
         initialState: initialState.methodsFilter,
         options: parseSerializeArrayString,
     },
+    tePath: {
+        stateKey: 'tabletErrors.tabletErrorsByBundle.tablePathFilter',
+        initialState: initialState.tablePathFilter,
+    },
 };
 
 export function getTabletErrorsByBundlereparedState(state: RootState, {query}: {query: RootState}) {

packages/ui/src/ui/store/selectors/tablet-errors/tablet-errors-by-bundle.ts

@@ -1,6 +1,7 @@
+import {ROWS_PER_PAGE} from '../../../constants/pagination';
 import {RootState} from '../../../store/reducers';
 
-export const getTabletErrorsByBundle = (state: RootState) =>
+export const getTabletErrorsByBundleData = (state: RootState) =>
     state.tabletErrors.tabletErrorsByBundle.data;
 
 export const getTabletErrorsByBundleLoading = (state: RootState) =>
@@ -20,3 +21,12 @@ export const getTabletErrorsByBundleMethodsFilter = (state: RootState) =>
 
 export const getTabletErrorsByBundlePageFilter = (state: RootState) =>
     state.tabletErrors.tabletErrorsByBundle.pageFilter;
+
+export const getTabletErrorsByBundleTablePathFilter = (state: RootState) =>
+    state.tabletErrors.tabletErrorsByBundle.tablePathFilter;
+
+export const getTabletErrorsByBundlePageCount = (state: RootState) =>
+    Math.max(
+        Math.ceil((state.tabletErrors.tabletErrorsByBundle.total_row_count ?? 0) / ROWS_PER_PAGE),
+        1,
+    );