#123: add docs to frontend

Author: JulianTS

frontend/src/components/Dashboard.tsx

@@ -40,9 +40,10 @@ const Dashboard: React.FC<DashboardProps> = ({
 	const dispatch = useAppDispatch()
 	const navigate = useNavigate()
 
-	//used to navigate directly to /cluster instead of /
 	useEffect(() => {
+		// used to navigate directly from / to /cluster
 		if (location.pathname === '/') navigate('/cluster')
+		// fetch all filter options once beforehand
 		dispatch(fetchOptionsThunk())
 	}, [])
 
@@ -264,7 +265,9 @@ const Dashboard: React.FC<DashboardProps> = ({
 		}
 	}
 */
-
+	/**
+	 * Resets all filters and triggers another page request to update the currently displayed cards
+	 */
 	const resetFilters = () => {
 		dispatch(resetAllFilters())
 		dispatch(triggerRequest())

frontend/src/components/pages/cluster/index.tsx

@@ -13,13 +13,19 @@ export interface ResponseCluster {
 	clusters: string[]
 }
 
+/**
+ * Card group component for the cluster type.
+ * Displays the ClusterView cards, title, loading window and network error.
+ * @returns Rendered cluster view cards for the dashboard component
+ */
 const ClusterGroup: React.FC = () => {
 	const [data, setData] = useState<string[]>([])
 	const [error, setError] = useState<string | null>(null)
 	const [loading, setLoading] = useState<boolean>(true)
 	const url = 'http://localhost:8081/api/cluster/all'
 	const trigger = useAppSelector(selectTrigger)
 
+	//Sends get request to /cluster/all for general information everytime the trigger value changes
 	useEffect(() => {
 		// Sending GET request
 		axios

frontend/src/components/pages/namespace/index.tsx

@@ -17,6 +17,11 @@ export interface ResponseNamespace {
 	namespaces: NamespaceInfo[]
 }
 
+/**
+ * Card group component for the namespace type.
+ * Displays the NamespaceView cards, title, loading window and network error.
+ * @returns Rendered namespace view cards for the dashboard component
+ */
 const NamespaceGroup: React.FC = () => {
 	const [data, setData] = useState<NamespaceInfo[]>([])
 	const [error, setError] = useState<string | null>(null)
@@ -27,6 +32,7 @@ const NamespaceGroup: React.FC = () => {
 	const baseURL = 'http://localhost:8081/api/namespace/all/'
 	const trigger = useAppSelector(selectTrigger)
 
+	// Sends get request to /namespace/all for general information everytime the trigger value changes
 	useEffect(() => {
 		// Query parameters
 		const clusterQuery = clusterFilter

frontend/src/components/pages/requestTriggerSlice.tsx

@@ -13,6 +13,8 @@ const initialState: RequestTriggerState = {
 	trigger: false,
 }
 
+// Slice is mainly used to trigger the reload of the pages.
+// Separated from the other Slices to specifically avoid any sudden state changes by other reducers etc that would mess with the reload.
 const requestTriggerSlice = createSlice({
 	name: 'triggerControl',
 	initialState,

frontend/src/components/pages/tenant/index.tsx

@@ -13,6 +13,11 @@ export interface ResponseTenant {
 	tenants: TenantInfo[]
 }
 
+/**
+ * Card group component for the tenant type.
+ * Displays the TenantView cards, title, loading window and network error.
+ * @returns Rendered tenant view cards for the dashboard component
+ */
 const TenantGroup: React.FC = () => {
 	const [data, setData] = useState<TenantInfo[]>([])
 	const [error, setError] = useState<string | null>(null)
@@ -22,6 +27,7 @@ const TenantGroup: React.FC = () => {
 	const baseURL = 'http://localhost:8081/api/tenant/all'
 	const trigger = useAppSelector(selectTrigger)
 
+	// Sends get request to /cluster/all for general information everytime the trigger value changes
 	useEffect(() => {
 		// Query parameters
 		const clusterQuery = clusterFilter

frontend/src/components/pages/topic/index.tsx

@@ -18,6 +18,11 @@ export interface ResponseTopic {
 	topics: TopicInfo[]
 }
 
+/**
+ * Card group component for the topic type.
+ * Displays the TopicView cards, title, loading window and network error.
+ * @returns Rendered topic view cards for the dashboard component
+ */
 const TopicGroup: React.FC = () => {
 	const [data, setData] = useState<TopicInfo[]>([])
 	const [error, setError] = useState<string | null>(null)
@@ -30,6 +35,7 @@ const TopicGroup: React.FC = () => {
 	const baseURL = 'http://localhost:8081/api/topic/all'
 	const trigger = useAppSelector(selectTrigger)
 
+	// Sends get request to /cluster/all for general information everytime the trigger value changes
 	useEffect(() => {
 		// Query parameters
 		const clusterQuery = clusterFilter

frontend/src/store/filterSlice.ts

@@ -18,11 +18,13 @@ export type HierarchyInPulsar =
 	| 'message'
 
 export type FilterState = {
+	// used to keep track of what curently is filtered and what not:
 	cluster: string[]
 	tenant: string[]
 	namespace: string[]
 	topic: string[]
 	message: string[]
+	// used for displaying the options in the filter dropdowns:
 	displayedOptions: {
 		allClusters: string[]
 		allTenants: string[]
@@ -65,34 +67,57 @@ const backendInstance = axios.create({
 	timeout: 1000,
 })
 
+/**
+ * Fetches the general cluster information of cluster/all for filter options
+ * @returns {ResponseCluster} - unedited data from endpoint
+ */
 const clusterOptionThunk = createAsyncThunk(
 	'filterController/clusterOption',
 	async () => {
 		const response = await backendInstance.get('/cluster/all')
 		return response.data
 	}
 )
+
+/**
+ * Fetches the general tenant information of tenant/all for filter options
+ * @returns {ResponseTenant} - unedited data from endpoint
+ */
 const tenantOptionThunk = createAsyncThunk(
 	'filterController/tenantOption',
 	async () => {
 		const response = await backendInstance.get('/tenant/all')
 		return response.data
 	}
 )
+
+/**
+ * Fetches the general namespace information of namespace/all for filter options
+ * @returns {ResponseNamespace} - unedited data from endpoint
+ */
 const namespaceOptionThunk = createAsyncThunk(
 	'filterController/namespaceOption',
 	async () => {
 		const response = await backendInstance.get('/namespace/all')
 		return response.data
 	}
 )
+
+/**
+ * Fetches the general topic information of topic/all for filter options
+ * @returns {ResponseTopic} - unedited data from endpoint
+ */
 const topicOptionThunk = createAsyncThunk(
 	'filterController/topicOption',
 	async () => {
 		const response = await backendInstance.get('/topic/all')
 		return response.data
 	}
 )
+
+/**
+ * Dispatches all option thunks to fill the filter option arrays with information
+ */
 const fetchOptionsThunk = createAsyncThunk(
 	'filterController/fetchOptions',
 	async (_, thunkAPI) => {
@@ -123,19 +148,20 @@ const filterSlice = createSlice({
 		setTopic: (state, action: PayloadAction<string[]>) => {
 			state.topic = action.payload
 		},
-		// Adds query to one single filter (cluster, tenant, namespace, topic)
+		// Adds an Id to one single filter array (cluster, tenant, namespace, topic)
 		addFilter: (state, action: PayloadAction<UpdateSingleFilter>) => {
 			const filterName = action.payload.filterName
 			state[filterName].push(action.payload.id)
 		},
-		// Deletes query from one single filter (cluster, tenant, namespace, topic)
+		// Deletes Id from one single filter array (cluster, tenant, namespace, topic)
 		deleteFilter: (state, action: PayloadAction<UpdateSingleFilter>) => {
 			const filterName = action.payload.filterName
 			const query = action.payload.id
 			state[filterName] = state[filterName].filter((element) => {
 				return element !== query
 			})
 		},
+		// Adds Id to a filter array while resetting all other Id's in it. Specifically needed for Drill Down Buttons
 		addFilterByDrillDown: (
 			state,
 			action: PayloadAction<UpdateSingleFilter>
@@ -170,15 +196,16 @@ const filterSlice = createSlice({
 					)
 			}
 		},
+		// Resets all filter arrays / applied filters to initial state
 		resetAllFilters: (state) => {
-			//to not accidently delete the displayed options:
+			// only the filter arrays are affected
 			state.cluster = initialState.cluster
 			state.tenant = initialState.tenant
 			state.namespace = initialState.namespace
 			state.topic = initialState.topic
 			state.message = initialState.message
 		},
-		// the filtering of lower views do not apply to higher views,
+		// the filtering of lower views does not apply to higher views,
 		// those filters shall be reset when the user "goes up".
 		updateFilterAccordingToNav: (
 			state,