-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Issues/1740 live tailing improvements (#1774)
* Implementing Context to the Topic messages pages * Using TopicContext in the Topics Topic MessageTable component * Using TopicContext variable in the Filters component * Fixing the Ordering of the Live mode Topic messaging * Fixing isLive parameter bug during page refresh * Minor code modification in Topic Filter Message page * Implement the correct seekType during live mode in url as well as in api call * Add Test cases to Messages and refactor eventSource Mock * Add initial Testing file for messages table * improve the MessagesTable test File * improve the MessagesTable test File + Filter Test File * improve the MessagesTable test File * Change the function name toggleSeekDirection to changeSeekDirection * change the name of the test suites to be more declarative * Display the table progress bar in live mode only when no data is fetched
- Loading branch information
Showing
10 changed files
with
325 additions
and
96 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
47 changes: 32 additions & 15 deletions
47
...react-app/src/components/Topics/Topic/Details/Messages/Filters/__tests__/Filters.spec.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
85 changes: 78 additions & 7 deletions
85
kafka-ui-react-app/src/components/Topics/Topic/Details/Messages/Messages.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,84 @@ | ||
| import React from 'react'; | ||
| import React, { useCallback, useMemo, useState } from 'react'; | ||
| import TopicMessagesContext from 'components/contexts/TopicMessagesContext'; | ||
| import { SeekDirection } from 'generated-sources'; | ||
| import { useLocation } from 'react-router'; | ||
|
|
||
| import FiltersContainer from './Filters/FiltersContainer'; | ||
| import MessagesTable from './MessagesTable'; | ||
|
|
||
| const Messages: React.FC = () => ( | ||
| <div> | ||
| <FiltersContainer /> | ||
| <MessagesTable /> | ||
| </div> | ||
| ); | ||
| export const SeekDirectionOptionsObj = { | ||
| [SeekDirection.FORWARD]: { | ||
| value: SeekDirection.FORWARD, | ||
| label: 'Oldest First', | ||
| isLive: false, | ||
| }, | ||
| [SeekDirection.BACKWARD]: { | ||
| value: SeekDirection.BACKWARD, | ||
| label: 'Newest First', | ||
| isLive: false, | ||
| }, | ||
| [SeekDirection.TAILING]: { | ||
| value: SeekDirection.TAILING, | ||
| label: 'Live Mode', | ||
| isLive: true, | ||
| }, | ||
| }; | ||
|
|
||
| export const SeekDirectionOptions = Object.values(SeekDirectionOptionsObj); | ||
|
|
||
| const Messages: React.FC = () => { | ||
| const location = useLocation(); | ||
|
|
||
| const searchParams = React.useMemo( | ||
| () => new URLSearchParams(location.search), | ||
| [location.search] | ||
| ); | ||
|
|
||
| const defaultSeekValue = SeekDirectionOptions[0]; | ||
|
|
||
| const [seekDirection, setSeekDirection] = React.useState<SeekDirection>( | ||
| (searchParams.get('seekDirection') as SeekDirection) || | ||
| defaultSeekValue.value | ||
| ); | ||
|
|
||
| const [isLive, setIsLive] = useState<boolean>( | ||
| SeekDirectionOptionsObj[seekDirection].isLive | ||
| ); | ||
|
|
||
| const changeSeekDirection = useCallback((val: string) => { | ||
| switch (val) { | ||
| case SeekDirection.FORWARD: | ||
| setSeekDirection(SeekDirection.FORWARD); | ||
| setIsLive(SeekDirectionOptionsObj[SeekDirection.FORWARD].isLive); | ||
| break; | ||
| case SeekDirection.BACKWARD: | ||
| setSeekDirection(SeekDirection.BACKWARD); | ||
| setIsLive(SeekDirectionOptionsObj[SeekDirection.BACKWARD].isLive); | ||
| break; | ||
| case SeekDirection.TAILING: | ||
| setSeekDirection(SeekDirection.TAILING); | ||
| setIsLive(SeekDirectionOptionsObj[SeekDirection.TAILING].isLive); | ||
| break; | ||
| default: | ||
| } | ||
| }, []); | ||
|
|
||
| const contextValue = useMemo( | ||
| () => ({ | ||
| seekDirection, | ||
| searchParams, | ||
| changeSeekDirection, | ||
| isLive, | ||
| }), | ||
| [seekDirection, searchParams, changeSeekDirection] | ||
| ); | ||
|
|
||
| return ( | ||
| <TopicMessagesContext.Provider value={contextValue}> | ||
| <FiltersContainer /> | ||
| <MessagesTable /> | ||
| </TopicMessagesContext.Provider> | ||
| ); | ||
| }; | ||
|
|
||
| export default Messages; |
Oops, something went wrong.