#188 enable flush functionality in the frontend for the user

frontend/src/assets/styles/dashboard.scss

@@ -34,6 +34,17 @@
 		display: flex;
 		flex-direction: column;
 		gap: 64px;
+		position: relative;
+
+		.flush-cache-container {
+			top: -5px;
+			right: 0;
+			.flush-cache-button {
+				border-radius: $primary-radius;
+				background-color: $primary-white;
+				color: $primary-blue;
+			}
+		}
 	}
 
 	.secondary-dashboard {
@@ -105,7 +116,7 @@
 		overflow: auto;
 	}
 
-	.MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded {
+	.MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded:not(.MuiAlert-root) {
 		box-shadow: none;
 		border-top: 1px solid $primary-grey;
 		border-bottom: 1px solid $primary-grey;
@@ -127,10 +138,10 @@
 .message-box-wrapper.MuiBox-root {
 	background-color: $primary-white;
 	width: 80%;
-    height: 80vh;
+	height: 80vh;
 	top: 100px;
 	overflow-y: hidden;
-    padding-top: 0px;
+	padding-top: 0px;
 	position: relative;
 	margin: 0 auto;
 	border-radius: $primary-radius;
@@ -141,10 +152,10 @@
 		padding: 34px;
 		background-color: transparent;
 		overflow-y: scroll;
-		-ms-overflow-style: none;  /* Internet Explorer 10+ */
-		scrollbar-width: none;  /* Firefox */
-		&::-webkit-scrollbar { 
-			display: none;  /* Safari and Chrome */
+		-ms-overflow-style: none; /* Internet Explorer 10+ */
+		scrollbar-width: none; /* Firefox */
+		&::-webkit-scrollbar {
+			display: none; /* Safari and Chrome */
 		}
 		.message-filter-wrapper {
 			display: flex;

frontend/src/components/buttons/FlushCacheButton.tsx

@@ -0,0 +1,92 @@
+import * as React from 'react'
+import { Box, Button, Snackbar } from '@mui/material'
+import MuiAlert, { AlertProps } from '@mui/material/Alert'
+import config from '../../config'
+import axios from 'axios'
+
+const Alert = React.forwardRef<HTMLDivElement, AlertProps>(function Alert(
+	props,
+	ref
+) {
+	return <MuiAlert elevation={6} ref={ref} variant="filled" {...props} />
+})
+
+/**
+ * Flush backend-cache button component.
+ * When user clicks on it, it calls the backend api to flush the cache in backend
+ * to get the latest data in pulsar.
+ */
+export default function FlushCacheButton() {
+	const [open, setOpen] = React.useState(false)
+	const [error, setError] = React.useState(false)
+
+	/**
+	 * Call the backend api endpoint to flush the backend-cache
+	 */
+	const flushCache = () => {
+		const url = config.backendUrl + '/api/cache/flush'
+		axios
+			.get(url)
+			.then((response) => {
+				if (response.status !== 200) {
+					setError(true)
+				}
+				setError(false)
+			})
+			.catch((error) => {
+				console.log(error.message)
+				setError(true)
+			})
+	}
+
+	// when clicked, sends the request and set the open to true to get alert.
+	const handleClick = () => {
+		flushCache()
+		setOpen(true)
+	}
+
+	// closes alert.
+	const handleClose = (
+		event?: React.SyntheticEvent | Event,
+		reason?: string
+	) => {
+		if (reason === 'clickaway') {
+			return
+		}
+
+		setOpen(false)
+	}
+
+	return (
+		<Box sx={{ m: 1, position: 'absolute' }} className="flush-cache-container">
+			<Button
+				variant="contained"
+				onClick={handleClick}
+				className="flush-cache-button"
+				title="Flush the backend-cache to get live-data from apache pulsar"
+			>
+				Flush Cache
+			</Button>
+			<Snackbar
+				open={open}
+				autoHideDuration={3000}
+				onClose={handleClose}
+				anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
+			>
+				{error ? (
+					<Alert severity="error" onClose={handleClose} sx={{ width: '100%' }}>
+						Error when flush the cache
+					</Alert>
+				) : (
+					<Alert
+						onClose={handleClose}
+						severity="success"
+						sx={{ width: '100%' }}
+					>
+						Cache flushed!
+					</Alert>
+				)}
+			</Snackbar>
+		</Box>
+	)
+}

frontend/src/routes/cluster/index.tsx

@@ -10,6 +10,7 @@ import { selectCluster } from '../../store/filterSlice'
 import { selectTrigger } from '../requestTriggerSlice'
 import config from '../../config'
 import { Masonry } from 'react-plock'
+import FlushCacheButton from '../../components/buttons/FlushCacheButton'
 
 export interface ResponseCluster {
 	clusters: ClusterInfo[]
@@ -49,6 +50,7 @@ const ClusterGroup: React.FC = () => {
 				Tenants: {sumElements(data, 'numberOfTenants')}, Namespaces:{' '}
 				{sumElements(data, 'numberOfNamespaces')}
 			</h3>
+			<FlushCacheButton />
 			{loading ? (
 				<div className="main-card"> Loading...</div>
 			) : error ? (

frontend/src/routes/namespace/index.tsx

@@ -14,6 +14,7 @@ import NamespaceView from './NamespaceView'
 import { selectTrigger } from '../requestTriggerSlice'
 import config from '../../config'
 import { Masonry } from 'react-plock'
+import FlushCacheButton from '../../components/buttons/FlushCacheButton'
 
 export interface ResponseNamespace {
 	namespaces: NamespaceInfo[]
@@ -69,6 +70,7 @@ const NamespaceGroup: React.FC = () => {
 		<div>
 			<h2 className="dashboard-title">Available Namespaces ({data.length})</h2>
 			<h3 className="dashboard-subtitle">Topics: {sumTopics(data)}</h3>
+			<FlushCacheButton />
 			{loading ? (
 				<div className="main-card"> Loading...</div>
 			) : error ? (

frontend/src/routes/tenant/index.tsx

@@ -10,6 +10,7 @@ import TenantView from './TenantView'
 import { selectTrigger } from '../requestTriggerSlice'
 import config from '../../config'
 import { Masonry } from 'react-plock'
+import FlushCacheButton from '../../components/buttons/FlushCacheButton'
 
 export interface ResponseTenant {
 	tenants: TenantInfo[]
@@ -62,6 +63,7 @@ const TenantGroup: React.FC = () => {
 				Namespaces: {sumElements(data, 'numberOfNamespaces')}, Topics:{' '}
 				{sumElements(data, 'numberOfTopics')}
 			</h3>
+			<FlushCacheButton />
 			{loading ? (
 				<div className="main-card"> Loading...</div>
 			) : error ? (

frontend/src/routes/topic/index.tsx

@@ -19,6 +19,7 @@ import config from '../../config'
 import { Masonry } from 'react-plock'
 import { Pagination } from '@mui/material'
 import { Box } from '@mui/system'
+import FlushCacheButton from '../../components/buttons/FlushCacheButton'
 
 export interface ResponseTopic {
 	topics: TopicInfo[]
@@ -106,6 +107,7 @@ const TopicGroup: React.FC = () => {
 				Producers: {sumElements(data, 'producers')}, Subscriptions:{' '}
 				{sumElements(data, 'subscriptions')}
 			</h3>
+			<FlushCacheButton />
 			{loading ? (
 				<div className="main-card"> Loading...</div>
 			) : error ? (