0ct0pu5/kafka-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Lint fixes

Browse source
This commit is contained in:
gokhanimral 2024-02-25 15:47:32 +04:00
parent 757c8f468f
commit f263e6f365
9 changed files with 74 additions and 95 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

76
kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/Filters.tsx
View file

@ -41,17 +41,18 @@ import { useRegisterFilter, useTopicDetails } from 'lib/hooks/api/topics';
import { InputLabel } from 'components/common/Input/InputLabel.styled';
import { getSerdeOptions } from 'components/Topics/Topic/SendMessage/utils';
import { useSerdes } from 'lib/hooks/api/topicMessages';
import { getTopicMessgesLastLoadedPage } from 'redux/reducers/topicMessages/selectors';
import { useAppSelector } from 'lib/hooks/redux';
import { showAlert } from 'lib/errorHandling';
import * as S from './Filters.styled';
import { getDefaultSerdeName } from './getDefaultSerdeName';
import {
filterOptions,
getOffsetFromSeekToParam,
getSelectedPartitionsFromSeekToParam,
getTimestampFromSeekToParam,
} from './utils';
import { getTopicMessgesLastLoadedPage } from 'redux/reducers/topicMessages/selectors';
import { useAppSelector } from 'lib/hooks/redux';
import { getDefaultSerdeName } from '../getDefaultSerdeName';
import * as S from './Filters.styled';
type Query = Record<string, string | string[] | number>;
@ -216,60 +217,60 @@ const Filters: React.FC<FiltersProps> = ({
);
};
const getPollingMode = (seekDirection: SeekDirection, seekType: SeekType): PollingMode => {
if (seekDirection == SeekDirection.FORWARD) {
const getPollingMode = (): PollingMode => {
if (seekDirection === SeekDirection.FORWARD) {
if (offset && currentSeekType === SeekType.OFFSET)
return PollingMode.FROM_OFFSET;
if (timestamp && currentSeekType === SeekType.TIMESTAMP)
return PollingMode.FROM_TIMESTAMP;
return PollingMode.EARLIEST;
}
if (seekDirection == SeekDirection.BACKWARD) {
if (seekDirection === SeekDirection.BACKWARD) {
if (offset && currentSeekType === SeekType.OFFSET)
return PollingMode.TO_OFFSET;
if (timestamp && currentSeekType === SeekType.TIMESTAMP)
return PollingMode.TO_TIMESTAMP;
return PollingMode.LATEST;
}
if (seekDirection == SeekDirection.TAILING)
return PollingMode.TAILING;
if (seekDirection === SeekDirection.TAILING) return PollingMode.TAILING;
return PollingMode.LATEST;
}
};
const getSmartFilterId = async (code: string) => {
try {
const filterId = await registerFilter.mutateAsync({
filterCode: code
filterCode: code,
});
return filterId;
} catch (e) {
// do nothing
showAlert('error', {
message: 'Error occured while registering smart filter',
});
return '';
}
}
};
const handleFiltersSubmit = async (cursor?: TopicMessageNextPageCursor) => {
if (!keySerde || !valueSerde)
return;
if (!keySerde || !valueSerde) return;
const props: Query = {
mode: getPollingMode(seekDirection, currentSeekType),
mode: getPollingMode(),
limit: PER_PAGE,
stringFilter: stringFilter,
offset: offset,
stringFilter,
offset,
timestamp: timestamp?.getTime() || 0,
keySerde: keySerde || searchParams.get('keySerde') || '',
valueSerde: valueSerde || searchParams.get('valueSerde') || '',
};
if (cursor?.id)
props.cursor = cursor?.id;
if (cursor?.id) props.cursor = cursor?.id;
if (selectedPartitions.length !== partitions.length) {
props.partitions = selectedPartitions.map((p) => p.value);
}
if (queryType === MessageFilterType.GROOVY_SCRIPT) {
props.smartFilterId = (await getSmartFilterId(activeFilter.code))?.id || '';
props.smartFilterId =
(await getSmartFilterId(activeFilter.code))?.id || '';
}
const newProps = omitBy(props, (v) => v === undefined || v === '');
@ -285,7 +286,7 @@ const Filters: React.FC<FiltersProps> = ({
setPage(1);
resetAllMessages();
handleFiltersSubmit();
}
};
const handleSSECancel = () => {
if (!source.current) return;
@ -360,11 +361,10 @@ const Filters: React.FC<FiltersProps> = ({
// eslint-disable-next-line consistent-return
React.useEffect(() => {
if (location.search?.length !== 0) {
if (page === currentPage)
return () => { };
if (page === currentPage) return () => {};
if (page <= lastLoadedPage) {
setCurrentPage(page);
return () => { };
return () => {};
}
const url = `${BASE_PARAMS.basePath}/api/clusters/${encodeURIComponent(
@ -413,7 +413,7 @@ const Filters: React.FC<FiltersProps> = ({
}
};
sse.onerror = (e) => {
sse.onerror = () => {
setIsFetching(false);
sse.close();
};
@ -434,7 +434,7 @@ const Filters: React.FC<FiltersProps> = ({
updateMeta,
updatePhase,
updateCursor,
setLastLoadedPage
setLastLoadedPage,
]);
React.useEffect(() => {
@ -463,19 +463,13 @@ const Filters: React.FC<FiltersProps> = ({
currentSeekType,
seekDirection,
keySerde,
valueSerde
valueSerde,
]);
React.useEffect(() => {
setPage(1);
resetAllMessages();
}, [
selectedPartitions,
offset,
timestamp,
stringFilter,
activeFilter,
]);
}, [selectedPartitions, offset, timestamp, stringFilter, activeFilter]);
React.useEffect(() => {
setIsTailing(isLive);
@ -567,9 +561,7 @@ const Filters: React.FC<FiltersProps> = ({
buttonType="secondary"
buttonSize="M"
disabled={isSubmitDisabled}
onClick={() =>
isFetching ? handleSSECancel() : handleSubmit()
}
onClick={() => (isFetching ? handleSSECancel() : handleSubmit())}
style={{ fontWeight: 500 }}
>
{isFetching ? 'Cancel' : 'Submit'}
@ -585,7 +577,11 @@ const Filters: React.FC<FiltersProps> = ({
/>
</div>
<S.ActiveSmartFilterWrapper>
<Search placeholder="Search" disabled={isTailing} onChange={setStringFilter} />
<Search
placeholder="Search"
disabled={isTailing}
onChange={setStringFilter}
/>
<Button buttonType="secondary" buttonSize="M" onClick={toggle}>
<PlusIcon />

0
kafka-ui-react-app/src/components/Topics/Topic/Messages/getDefaultSerdeName.ts → kafka-ui-react-app/src/components/Topics/Topic/Messages/Filters/getDefaultSerdeName.ts
View file

31
kafka-ui-react-app/src/components/Topics/Topic/Messages/Messages.tsx
View file

@ -1,12 +1,7 @@
import React, { useCallback, useMemo, useState } from 'react';
import TopicMessagesContext from 'components/contexts/TopicMessagesContext';
import { SeekDirection, SerdeUsage } from 'generated-sources';
import { SeekDirection } from 'generated-sources';
import { useSearchParams } from 'react-router-dom';
import { useSerdes } from 'lib/hooks/api/topicMessages';
import useAppParams from 'lib/hooks/useAppParams';
import { RouteParamsClusterTopic } from 'lib/paths';
import { getDefaultSerdeName } from 'components/Topics/Topic/Messages/getDefaultSerdeName';
import { MESSAGES_PER_PAGE } from 'lib/constants';
import MessagesTable from './MessagesTable';
import FiltersContainer from './Filters/FiltersContainer';
@ -32,33 +27,13 @@ export const SeekDirectionOptionsObj = {
export const SeekDirectionOptions = Object.values(SeekDirectionOptionsObj);
const Messages: React.FC = () => {
const [searchParams, setSearchParams] = useSearchParams();
const { clusterName, topicName } = useAppParams<RouteParamsClusterTopic>();
// const { data: serdes = {} } = useSerdes({
// clusterName,
// topicName,
// use: SerdeUsage.DESERIALIZE,
// });
// React.useEffect(() => {
// if (!searchParams.get('keySerde')) {
// searchParams.set('keySerde', getDefaultSerdeName(serdes.key || []));
// }
// if (!searchParams.get('valueSerde')) {
// searchParams.set('valueSerde', getDefaultSerdeName(serdes.value || []));
// }
// if (!searchParams.get('limit')) {
// searchParams.set('limit', MESSAGES_PER_PAGE);
// }
// setSearchParams(searchParams);
// }, [serdes]);
const [searchParams] = useSearchParams();
const defaultSeekValue = SeekDirectionOptions[0];
const [seekDirection, setSeekDirection] = React.useState<SeekDirection>(
(searchParams.get('seekDirection') as SeekDirection) ||
defaultSeekValue.value
defaultSeekValue.value
);
const [isLive, setIsLive] = useState<boolean>(

17
kafka-ui-react-app/src/components/Topics/Topic/Messages/MessagesTable.tsx
View file

@ -38,8 +38,7 @@ const MessagesTable: React.FC = () => {
const isNextPageButtonDisabled =
isPaginationDisabled || messages.length < Number(MESSAGES_PER_PAGE);
const isPrevPageButtonDisabled =
isPaginationDisabled || page === 1;
const isPrevPageButtonDisabled = isPaginationDisabled || page === 1;
const handleNextPage = () => {
// searchParams.set('page', String(Number(page || 1) + 1));
@ -75,16 +74,18 @@ const MessagesTable: React.FC = () => {
<TableHeaderCell title="Timestamp" />
<TableHeaderCell
title="Key"
previewText={`Preview ${keyFilters.length ? `(${keyFilters.length} selected)` : ''
}`}
previewText={`Preview ${
keyFilters.length ? `(${keyFilters.length} selected)` : ''
}`}
onPreview={() => setPreviewFor('key')}
/>
<TableHeaderCell
title="Value"
previewText={`Preview ${contentFilters.length
? `(${contentFilters.length} selected)`
: ''
}`}
previewText={`Preview ${
contentFilters.length
? `(${contentFilters.length} selected)`
: ''
}`}
onPreview={() => setPreviewFor('content')}
/>
<TableHeaderCell> </TableHeaderCell>

3
kafka-ui-react-app/src/components/common/Search/Search.tsx
View file

@ -47,8 +47,7 @@ const Search: React.FC<SearchProps> = ({
const clearSearchValue = () => {
if (onChange) {
onChange('');
}
else if (searchParams.get('q')) {
} else if (searchParams.get('q')) {
searchParams.set('q', '');
setSearchParams(searchParams);
}

4
kafka-ui-react-app/src/components/contexts/TopicMessagesContext.ts
View file

@ -4,8 +4,8 @@ import { SeekDirection } from 'generated-sources';
export interface ContextProps {
seekDirection: SeekDirection;
changeSeekDirection(val: string): void;
page: number,
setPage(page: number): void,
page: number;
setPage(page: number): void;
isLive: boolean;
}

15
kafka-ui-react-app/src/lib/hooks/api/topics.ts
View file

@ -16,7 +16,6 @@ import {
GetTopicDetailsRequest,
GetTopicsRequest,
MessageFilterRegistration,
RegisterFilterRequest,
Topic,
TopicConfig,
TopicCreation,
@ -108,9 +107,9 @@ const formatTopicCreation = (form: TopicFormData): TopicCreation => {
return replicationFactor.toString() !== ''
? {
...topicsvalue,
replicationFactor,
}
...topicsvalue,
replicationFactor,
}
: topicsvalue;
};
@ -338,7 +337,10 @@ export function useRegisterFilter(props: GetTopicDetailsRequest) {
const client = useQueryClient();
return useMutation(
(filter: MessageFilterRegistration) =>
messagesApi.registerFilter({ ...props, messageFilterRegistration: filter }),
messagesApi.registerFilter({
...props,
messageFilterRegistration: filter,
}),
{
onSuccess: () => {
showSuccessAlert({
@ -349,5 +351,6 @@ export function useRegisterFilter(props: GetTopicDetailsRequest) {
onError: (e) => {
showServerError(e as Response);
},
});
}
);
}

1
kafka-ui-react-app/src/redux/reducers/topicMessages/selectors.ts
View file

@ -34,7 +34,6 @@ export const getTopicMessgesLastLoadedPage = createSelector(
({ lastLoadedPage }) => lastLoadedPage
);
export const getIsTopicMessagesFetching = createSelector(
topicMessagesState,
({ isFetching }) => isFetching

22
kafka-ui-react-app/src/redux/reducers/topicMessages/topicMessagesSlice.ts
View file

@ -16,7 +16,7 @@ export const initialState: TopicMessagesState = {
messageEventType: '',
isFetching: false,
currentPage: 0,
lastLoadedPage: 0
lastLoadedPage: 0,
};
const topicMessagesSlice = createSlice({
@ -35,7 +35,7 @@ const topicMessagesSlice = createSlice({
return {
...state,
allMessages: allmessages,
messages: messages,
messages,
};
},
resetTopicMessages: (state) => {
@ -43,7 +43,7 @@ const topicMessagesSlice = createSlice({
...initialState,
currentPage: state.currentPage,
allMessages: state.allMessages,
}
};
},
resetAllTopicMessages: () => initialState,
updateTopicMessagesPhase: (state, action) => {
@ -63,14 +63,20 @@ const topicMessagesSlice = createSlice({
state.cursor = action.payload;
},
setTopicMessagesCurrentPage: (state, action) => {
if (state.currentPage != action.payload) {
const messages: TopicMessage[] = state.allMessages.slice((action.payload - 1) * PER_PAGE, (action.payload - 1) * PER_PAGE + PER_PAGE);
if (state.currentPage !== action.payload) {
const messages: TopicMessage[] = state.allMessages.slice(
(action.payload - 1) * PER_PAGE,
(action.payload - 1) * PER_PAGE + PER_PAGE
);
return {
...state,
currentPage: action.payload,
messages
}
messages,
};
}
return {
...state,
};
},
setTopicMessagesLastLoadedPage: (state, action) => {
state.lastLoadedPage = action.payload;
@ -88,7 +94,7 @@ export const {
updateTopicMessagesCursor,
setTopicMessagesCurrentPage,
setTopicMessagesLastLoadedPage,
resetAllTopicMessages
resetAllTopicMessages,
} = topicMessagesSlice.actions;
export default topicMessagesSlice.reducer;