Merge pull request #204 from amosproj/refactor/frontend

refactor frontend

Author: iheziqi

frontend/src/App.tsx

@@ -15,93 +15,20 @@ import NamespaceGroup from './routes/namespace'
 import TenantGroup from './routes/tenant'
 import TopicGroup from './routes/topic'
 
-const allData: Array<SampleCluster> = []
-const allMessages: Array<SampleMessage> = []
-
+/**
+ * The main application component.
+ * It sets up the main routes for the application and also renders the main Dashboard and NavBar components.
+ *
+ * @component
+ * @returns The main application component rendered to the DOM.
+ */
 function App() {
-	const view = useAppSelector(selectView)
-	/** Landing Page Logic */
-	// const showLP = useAppSelector(selectShowLP)
-	/** End of Landing Page Logic */
-
-	/*const allTenants = allData
-		.map((item) => item.tenants)
-		.filter((el) => el.length > 0)
-		.flat()
-
-	const allNamespaces = allTenants
-		.map((tenant) => tenant.namespaces)
-		.filter((el) => el.length > 0)
-		.flat()
-
-	const allTopics = allNamespaces
-		.map((namespace) => namespace.topics)
-		.filter((el) => el.length > 0)
-		.flat()*/
-
-	/*const allMessages = allData
-		.flatMap((item) => item.namespaces)
-		.flatMap((namespace) => namespace.topics)
-		.map((topic) => topic.messages)
-		.filter((el) => el.length > 0)
-		.flat()*/
-
-	/*let filteredData:
-		| Array<SampleCluster>
-		| Array<SampleNamespace>
-		| Array<SampleTopic> = allData
-
-	if (view.selectedNav === 'namespace') {
-		filteredData = allNamespaces
-	} else if (view.selectedNav === 'topic') {
-		filteredData = allTopics
-	}*/
-
-	/*const selectNewElement = (
-		item: SampleCluster | SampleNamespace | SampleTopic
-	) => {
-		const selEl = getNewElementTag(item.tag, item.id)
-		console.log(selEl)
-		//dispatch(setNav(selEl[0]))
-	}*/
-
-	//can later on be replaced by the fetchDataThunk
-	/*const getData = () => {
-		fetch('dummy/dummyClusters.json', {
-			headers: {
-				'Content-Type': 'application/json',
-				Accept: 'application/json',
-			},
-		})
-			.then(function (response) {
-				return response.json()
-			})
-			.then(function (json) {
-				allData = json
-			})
-	}*/
-
-	/*const getMessages = () => {
-		fetch('dummy/dummyMessages.json', {
-			headers: {
-				'Content-Type': 'application/json',
-				Accept: 'application/json',
-			},
-		})
-			.then(function (response) {
-				return response.json()
-			})
-			.then(function (json) {
-				allMessages = json
-			})
-	}*/
-
 	return (
 		<>
 			<Router>
 				<div className="dashboard-container">
 					<NavBar />
-					<Dashboard completeMessages={allMessages} view={view.selectedNav}>
+					<Dashboard>
 						<Routes>
 							<Route path="/" element={<ClusterGroup />}></Route>
 							<Route path="/cluster" element={<ClusterGroup />}></Route>

frontend/src/Helpers.tsx

@@ -2,94 +2,6 @@
 // SPDX-FileCopyrightText: 2010-2021 Dirk Riehle <dirk@riehle.org
 // SPDX-FileCopyrightText: 2019 Georg Schwarz <georg. schwarz@fau.de>
 
-export function instanceOfSampleCluster(
-	object:
-		| SampleCluster
-		| SampleTenant
-		| SampleNamespace
-		| SampleTopic
-		| SampleMessage
-): object is SampleCluster {
-	if (object) {
-		return 'tenants' in object
-	} else return false
-}
-
-export function instanceOfSampleNamespace(
-	object:
-		| SampleCluster
-		| SampleTenant
-		| SampleNamespace
-		| SampleTopic
-		| SampleMessage
-): object is SampleNamespace {
-	if (object) {
-		return 'topics' in object
-	} else return false
-}
-
-export function instanceOfSampleTopic(
-	object:
-		| SampleCluster
-		| SampleTenant
-		| SampleNamespace
-		| SampleTopic
-		| SampleMessage
-): object is SampleTopic {
-	if (object) {
-		return 'topicStatsDto' in object
-	} else return false
-}
-
-export function instanceOfSampleTenant(
-	object:
-		| SampleCluster
-		| SampleTenant
-		| SampleNamespace
-		| SampleTopic
-		| SampleMessage
-): object is SampleTenant {
-	if (object) {
-		return 'tenantInfo' in object
-	} else return false
-}
-
-export function instanceOfSampleMessage(
-	object:
-		| SampleCluster
-		| SampleTenant
-		| SampleNamespace
-		| SampleTopic
-		| SampleMessage
-): object is SampleMessage {
-	if (object) {
-		return 'payload' in object
-	} else return false
-}
-
-export const flattenClustersToTenants = (myClusters: Array<SampleCluster>) => {
-	return myClusters
-		.map((cluster) => cluster.tenants)
-		.filter((el) => el.length > 0)
-		.flat()
-}
-
-export const flattenTenantsToNamespaces = (myTenants: Array<SampleTenant>) => {
-	return myTenants
-		.map((tenant) => tenant.namespaces)
-		.filter((el) => el.length > 0)
-		.flat()
-}
-
-export const flattenNamespacesToTopics = (
-	myNamespaces: Array<SampleNamespace>
-) => {
-	return myNamespaces
-		.map((namespace) => namespace.topics)
-		.filter((el) => el.length > 0)
-		.flat()
-}
-
 /**
  * Helper function to add comma separator if not the last element.
  * @param index the index of current element in array.