Skip to content

Commit

Permalink
chore(Bundles/TabletErrorsByBundle): better links [YTFRONT-4119]
Browse files Browse the repository at this point in the history
  • Loading branch information
ma-efremoff committed Nov 5, 2024
1 parent d8605e7 commit 983646c
Show file tree
Hide file tree
Showing 8 changed files with 111 additions and 29 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,9 @@ import {
getTabletErrorsByBundleError,
getTabletErrorsByBundleLoaded,
getTabletErrorsByBundleLoading,
getTabletErrorsByBundleMethodsFilter,
getTabletErrorsByBundlePageFilter,
getTabletErrorsByBundleTimeRangeFilter,
} from '../../store/selectors/tablet-errors/tablet-errors-by-bundle';

import Link from '../../components/Link/Link';
Expand Down Expand Up @@ -63,6 +65,8 @@ export function TabletErrorsByBundle({bundle}: {bundle: string}) {
function useTabletErrorsColumns(loading: boolean) {
const {errors: data = []} = useSelector(getTabletErrorsByBundle) ?? {};
const pageFilter = useSelector(getTabletErrorsByBundlePageFilter);
const teMethods = useSelector(getTabletErrorsByBundleMethodsFilter);
const teTime = useSelector(getTabletErrorsByBundleTimeRangeFilter);

const columns = React.useMemo(() => {
type Method = keyof (typeof data)[number]['method_counts'];
Expand All @@ -86,7 +90,15 @@ function useTabletErrorsColumns(loading: boolean) {
),
render({row}) {
return (
<Link url={makeNavigationLink({path: row.table_path})}>
<Link
url={makeNavigationLink({
path: row.table_path,
teMethods,
teTime,
navmode: 'tablet_errors',
teMode: 'request_errors',
})}
>
{row.table_path}
</Link>
);
Expand Down Expand Up @@ -114,7 +126,7 @@ function useTabletErrorsColumns(loading: boolean) {
];

return res;
}, [data, loading]);
}, [data, loading, teMethods, teTime]);

return {data, columns};
}
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import {YTError} from '../../../../../types';
import {TabletErrorsApi} from '../../../../../../shared/tablet-errors-manager';
import {mergeStateOnClusterChange} from '../../../utils';

export type TabletErrorsFromApiState = {
export type TabletErrorsByPathState = {
loading: boolean;
loaded: boolean;
error: YTError | undefined;
Expand All @@ -24,7 +24,7 @@ export type TabletErrorsFromApiState = {
};

const persistentState: Pick<
TabletErrorsFromApiState,
TabletErrorsByPathState,
'timeRangeFilter' | 'methodsFilter' | 'pageFilter' | 'tabletIdFilter'
> = {
timeRangeFilter: {shortcutValue: '1d'},
Expand All @@ -33,7 +33,7 @@ const persistentState: Pick<
tabletIdFilter: '',
};

const ephemeralState: Omit<TabletErrorsFromApiState, keyof typeof persistentState> = {
const ephemeralState: Omit<TabletErrorsByPathState, keyof typeof persistentState> = {
loading: false,
loaded: false,
error: undefined,
Expand All @@ -44,15 +44,15 @@ const ephemeralState: Omit<TabletErrorsFromApiState, keyof typeof persistentStat
dataParams: undefined,
};

export const initialState: TabletErrorsFromApiState = {...persistentState, ...ephemeralState};
export const initialState: TabletErrorsByPathState = {...persistentState, ...ephemeralState};

const tabletErrorsByPathSlice = createSlice({
name: 'navigation.tabs.tabletErrorsByPath',
initialState,
reducers: {
onRequest(
state,
{payload}: PayloadAction<Pick<TabletErrorsFromApiState, 'table_path' | 'table_id'>>,
{payload}: PayloadAction<Pick<TabletErrorsByPathState, 'table_path' | 'table_id'>>,
) {
const {table_path, table_id} = payload;
if (table_path != state.table_path || table_id !== state.table_id) {
Expand All @@ -65,12 +65,12 @@ const tabletErrorsByPathSlice = createSlice({
{
payload,
}: PayloadAction<
Pick<TabletErrorsFromApiState, 'data' | 'total_row_count' | 'dataParams'>
Pick<TabletErrorsByPathState, 'data' | 'total_row_count' | 'dataParams'>
>,
) {
return {...state, ...payload, loading: false, loaded: true, error: undefined};
},
onError(state, {payload: {error}}: PayloadAction<Pick<TabletErrorsFromApiState, 'error'>>) {
onError(state, {payload: {error}}: PayloadAction<Pick<TabletErrorsByPathState, 'error'>>) {
return {...state, error, loading: false};
},
updateFilter(state, {payload}: PayloadAction<Partial<typeof persistentState>>) {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ export type TabletErrorsByBundleState = {
data: TabletErrorsApi['tablet_errors_by_bundle']['response'] | undefined;

timeRangeFilter:
| {shortcutValue?: string; from?: number; to?: number}
| {shortcutValue: string; from?: number; to?: number}
| {from: number; to: number; shortcutValue?: undefined};

methodsFilter: Array<string>;
Expand All @@ -36,7 +36,7 @@ const ephemeralState: Omit<TabletErrorsByBundleState, keyof typeof persistentSta
data: undefined,
};

const initialState: TabletErrorsByBundleState = {...persistentState, ...ephemeralState};
export const initialState: TabletErrorsByBundleState = {...persistentState, ...ephemeralState};

const tabletErrorsByBundleSlice = createSlice({
name: 'tabletErrors.tabletErrorsByBundle',
Expand Down
34 changes: 34 additions & 0 deletions packages/ui/src/ui/store/reducers/tablet-errors/url-mapping.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import {produce} from 'immer';

import type {RootState} from '../../../store/reducers';
import {initialState} from './tablet-errors-by-bundle';
import {LocationParameters} from '../../../store/location';
import {
makeTimeRangeSerialization,
parseSerializeArrayString,
} from '../../../utils/parse-serialize';
import {updateByLocationParams} from '../../../utils/utils';

export const tabletErrorsByBundleParams: LocationParameters = {
teTime: {
stateKey: 'tabletErrors.tabletErrorsByBundle.timeRangeFilter',
initialState: initialState.timeRangeFilter,
options: makeTimeRangeSerialization(initialState.timeRangeFilter),
},
tePage: {
stateKey: 'tabletErrors.tabletErrorsByBundle.pageFilter',
initialState: initialState.pageFilter,
type: 'number',
},
teMethods: {
stateKey: 'tabletErrors.tabletErrorsByBundle.methodsFilter',
initialState: initialState.methodsFilter,
options: parseSerializeArrayString,
},
};

export function getTabletErrorsByBundlereparedState(state: RootState, {query}: {query: RootState}) {
return produce(state, (draft) => {
return updateByLocationParams({draft, query}, tabletErrorsByBundleParams);
});
}
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,25 @@ import {produce} from 'immer';
import {updateIfChanged} from '../../../utils/utils';
import {aclFiltersParams, getAclFiltersPreparedState} from '../acl/url-mapping';
import {parseSortState} from '../../../utils';
import {
getTabletErrorsByBundlereparedState,
tabletErrorsByBundleParams,
} from '../tablet-errors/url-mapping';

export const tabletsBundlesParams = {
activeBundle: {
stateKey: 'tablet_cell_bundles.activeBundle',
initialState: initialState.activeBundle,
},
...tabletErrorsByBundleParams,
};

export function getTabletsBundlesPreparedState(
state: RootState,
{query}: {query: RootState},
): RootState {
const queryTcb = query.tablet_cell_bundles;
return produce(state, (draft) => {
const res = produce(state, (draft) => {
const draftTcb = draft.tablet_cell_bundles;

updateIfChanged(draftTcb, 'activeBundle', queryTcb.activeBundle);
Expand All @@ -27,6 +32,7 @@ export function getTabletsBundlesPreparedState(
updateIfChanged(draftTcb, 'bundlesSort', queryTcb.bundlesSort);
updateIfChanged(draftTcb, 'bundlesTableMode', queryTcb.bundlesTableMode);
});
return getTabletErrorsByBundlereparedState(res, {query});
}

export const tabletsAllBundlesParams = {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import {Page} from '../../shared/constants/settings';
import {Tab as ComponentsTab} from '../constants/components/main';
import YT from '../config/yt-config';
import type {Tab as NavigationTab} from '../constants/navigation';
import {ValueOf} from '../types';
import {Page} from '../../../shared/constants/settings';
import {Tab as ComponentsTab} from '../../constants/components/main';
import YT from '../../config/yt-config';

export * from './navigation';

export function makeComponentsNodesUrl({host, cluster}: {host?: string; cluster?: string} = {}) {
return host
Expand All @@ -14,18 +14,6 @@ export function makeProxyUrl(cluster: string, address: string) {
return `/${cluster}/${Page.COMPONENTS}/${ComponentsTab.RPC_PROXIES}?host=${address}`;
}

export function makeNavigationLink(params: {
path: string;
cluster?: string;
navmode?: ValueOf<typeof NavigationTab>;
teMode?: 'request_errors';
}) {
const {cluster, ...rest} = params;
const res = `/${cluster || YT.cluster}/${Page.NAVIGATION}`;
const search = new URLSearchParams(rest).toString();
return search ? `${res}?${search}` : res;
}

export function makeSchedulingUrl({
pool,
poolTree,
Expand Down
22 changes: 22 additions & 0 deletions packages/ui/src/ui/utils/app-url/navigation.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
import {Page} from '../../../shared/constants/settings';
import YT from '../../config/yt-config';
import type {Tab as NavigationTab} from '../../constants/navigation';
import {ValueOf} from '../../types';

import {TabletErrorsByPathState} from '../../store/reducers/navigation/tabs/tablet-errors/tablet-errors-by-path';
import {navigationParams} from '../../store/reducers/navigation/url-mapping';
import {makeURLSearchParams} from './utils';

export function makeNavigationLink(params: {
path: string;
cluster?: string;
navmode?: ValueOf<typeof NavigationTab>;
teMode?: 'request_errors';
teTime?: TabletErrorsByPathState['timeRangeFilter'];
teMethods?: Array<string>;
}) {
const {cluster, ...rest} = params;
const res = `/${cluster || YT.cluster}/${Page.NAVIGATION}`;
const search = makeURLSearchParams(rest, navigationParams).toString();
return search ? `${res}?${search}` : res;
}
20 changes: 20 additions & 0 deletions packages/ui/src/ui/utils/app-url/utils.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import {LocationParameters} from '../../store/location';

export function makeURLSearchParams<T extends object>(params: T, info: LocationParameters) {
const res = new URLSearchParams();
Object.keys(params).reduce((acc, k) => {
const value = params[k as keyof T];
if (k in info) {
if (info[k].options?.serialize) {
const tmp = info[k].options?.serialize?.(value);
if (tmp !== undefined) {
res.append(k, tmp + '');
}
} else {
res.append(k, value + '');
}
}
return acc;
}, res);
return res;
}

0 comments on commit 983646c

Please sign in to comment.