BUGFIX: #118 fix navbar does not cleanup filter

Signed-off-by: Ziqi He <heziqi4399@gmail.com>

Author: iheziqi

frontend/src/components/NavBar.tsx

@@ -20,6 +20,10 @@ import logo from '../assets/images/team-logo-light.png'
 // import { Input } from '@mui/material'
 import { InfoModal } from './InfoModal'
 import { useLocation, useNavigate } from 'react-router-dom'
+import {
+	updateFilterAccordingToNav,
+	HierarchyInPulsar,
+} from '../store/filterSlice'
 
 //Removed 'Message' from this array for now
 const pages = ['Cluster', 'Tenant', 'Namespace', 'Topic', 'Message']
@@ -142,6 +146,11 @@ function NavBar() {
 								disabled={page.toLowerCase() == location.pathname.slice(1)}
 								onClick={() => {
 									handleClickOnNav(page)
+									dispatch(
+										updateFilterAccordingToNav(
+											page.toLowerCase() as HierarchyInPulsar
+										)
+									)
 								}}
 								sx={{ my: 2, color: 'white', display: 'block' }}
 							>

frontend/src/components/custom/CustomFilter.tsx

@@ -16,7 +16,9 @@ const CustomFilter: React.FC<CustomFilterProps> = ({
 	messages,
 	currentView,
 }) => {
+	// Options are what we've got from apis so far.
 	const options = useAppSelector(selectOptions)
+	// filters are displayed in filters.
 	const filters = useAppSelector(selectAllFilters)
 	const [clusterSearchQuery, setClusterSearchQuery] = useState('')
 	const [namespaceSearchQuery, setNamespaceSearchQuery] = useState('')

frontend/src/store/filterSlice.ts

@@ -10,6 +10,13 @@ import { ResponseTenant } from '../components/pages/tenant'
 import { ResponseNamespace } from '../components/pages/namespace'
 import { ResponseTopic } from '../components/pages/topic'
 
+export type HierarchyInPulsar =
+	| 'cluster'
+	| 'tenant'
+	| 'namespace'
+	| 'topic'
+	| 'message'
+
 export type FilterState = {
 	cluster: string[]
 	tenant: string[]
@@ -23,15 +30,17 @@ export type FilterState = {
 		allTopics: string[]
 		allMessages: string[]
 	}
+	view: UpdateSingleFilter['filterName']
 }
 
-type UpdateSingleFilter = {
-	filterName: 'cluster' | 'tenant' | 'namespace' | 'topic' | 'message'
+export type UpdateSingleFilter = {
+	filterName: HierarchyInPulsar
 	id: string
 }
 
 type UpdateDisplayedOptions = {
-	topologyLevel: 'cluster' | 'tenant' | 'namespace' | 'topic' | 'message'
+	// topologyLevel: 'cluster' | 'tenant' | 'namespace' | 'topic' | 'message'
+	topologyLevel: HierarchyInPulsar
 	options: string[]
 }
 
@@ -48,6 +57,7 @@ const initialState: FilterState = {
 		allTopics: [],
 		allMessages: [],
 	},
+	view: 'cluster',
 }
 
 const backendInstance = axios.create({
@@ -168,6 +178,35 @@ const filterSlice = createSlice({
 			state.topic = initialState.topic
 			state.message = initialState.message
 		},
+		// the filtering of lower views do not apply to higher views,
+		// those filters shall be reset when the user "goes up".
+		updateFilterAccordingToNav: (
+			state,
+			action: PayloadAction<UpdateSingleFilter['filterName']>
+		) => {
+			const lastView = state.view
+			const currentView = action.payload
+			const pulsarHierarchyArr: UpdateSingleFilter['filterName'][] = [
+				'cluster',
+				'tenant',
+				'namespace',
+				'topic',
+				'message',
+			]
+			const currentViewLevel = pulsarHierarchyArr.indexOf(currentView)
+			const lastViewLevel = pulsarHierarchyArr.indexOf(lastView)
+			// If the user goes to upper level in the pulasr hierarchy,
+			// reset all filters below that "upper level".
+			if (currentViewLevel < lastViewLevel) {
+				const filtersToReset = pulsarHierarchyArr.slice(currentViewLevel + 1)
+				// Resets all filters bellow the current view level.
+				filtersToReset.forEach((filterName) => {
+					console.log(filterName)
+					state[filterName] = initialState[filterName]
+				})
+			}
+			state.view = currentView
+		},
 	},
 	extraReducers(builder) {
 		builder.addCase(clusterOptionThunk.fulfilled, (state, action) => {
@@ -257,6 +296,7 @@ export const {
 	deleteFilter,
 	addFilterByDrillDown,
 	resetAllFilters,
+	updateFilterAccordingToNav,
 } = filterSlice.actions
 
 export default filterSlice.reducer