added clear button

ADVANCED.md

@@ -20,7 +20,7 @@ curl -s -i -H Canonical-Resource : endpoint-test http://localhost:8880/noisy_reg
 
 You can now access live results as follows:
  - [Diffy](http://localhost:8888)
-   ![Diffy](/images/diffy_diffy.png)
+   ![Diffy](/images/diffy_ui.png)
  - [Grafana Dashboards](http://localhost:3000/explore)
    - Loki (logs)
      ![Loki](/images/loki_diffy.png)

frontend/src/features/info/InfoView.tsx

@@ -1,10 +1,17 @@
-import { Grid, Typography } from '@mui/material';
-import { fetchinfo } from './infoApiSlice';
+import DeleteIcon from '@mui/icons-material/Delete';
+import { Alert, Grid, IconButton, Snackbar, Tooltip, Typography } from '@mui/material';
+import { useAppDispatch, useAppSelector } from '../../app/hooks'
+
+import { fetchinfo, useDeleteRequestsMutation } from './infoApiSlice';
+import { openDeleteRequestsAlert, closeDeleteRequestsAlert } from '../selections/selectionsSlice';
 
 export default function InfoView(){
-  const target = 'Unknown';
+  const dispatch = useAppDispatch();
   const info = fetchinfo();
-
+  const alertIsOpen = useAppSelector((state) => state.selections.deleteRequestAlertIsOpen);
+  const closeAlert = () => dispatch(closeDeleteRequestsAlert());
+  const [deleteRequests, { isLoading: isUpdating, isSuccess }] = useDeleteRequestsMutation();
+
     return     <Grid container>
     <Grid item xs={6}>
       <Typography>Candidate Server</Typography>
@@ -42,5 +49,22 @@ export default function InfoView(){
     <Grid item xs={6}>
       <Typography><strong>{info.relativeThreshold}%</strong> relative, <strong>{info.absoluteThreshold}%</strong> absolute</Typography>
     </Grid>
+    <Grid item xs={3}>
+      <Tooltip title="Delete all requests">
+        <IconButton
+          color="inherit"
+          aria-label="delete"
+          onClick={()=>deleteRequests().then(() => dispatch(openDeleteRequestsAlert()))}>
+          <DeleteIcon color="inherit"/>
+        </IconButton>
+      </Tooltip>
+    </Grid>
+    <Grid item xs={9}>
+      <Snackbar open={alertIsOpen} autoHideDuration={6000} onClose={closeAlert}>
+        <Alert onClose={closeAlert} severity="success" sx={{ width: '100%' }}>
+          All requests deleted!
+        </Alert>
+      </Snackbar>
+    </Grid>
   </Grid>
 }

frontend/src/features/info/infoApiSlice.ts

@@ -24,12 +24,20 @@ export const apiInfoSlice = createApi({
                 query(){
                     return '/info';
                 }
+            }),
+            deleteRequests: builder.mutation<string, void>({
+                query(){
+                    return {
+                        url: `/clear`,
+                        method: 'GET'
+                    }
+                },
             })
         }
     },
 });
 
-export const {useFetchInfoQuery} = apiInfoSlice;
+export const {useFetchInfoQuery, useDeleteRequestsMutation} = apiInfoSlice;
 export function fetchinfo(){
     const target = 'Unknown';
     return useFetchInfoQuery().data || {

frontend/src/features/selections/selectionsSlice.ts

@@ -2,6 +2,7 @@ import {createSlice, PayloadAction} from '@reduxjs/toolkit';
 interface Selections {
     noiseCancellationIsOn: boolean, // Noise cancellation from AppBarView
     infoIsOpen: boolean, // InfoView dialog
+    deleteRequestAlertIsOpen: boolean, // Alert that shows up inside info view when all reqests are deleted
     requestIsOpen: boolean, // RequestView Dialog
     endpointName: string|undefined, // Selected endpoint from EnpointsView
     fieldPrefix: string|undefined, // Selected field prefix from FieldsView
@@ -13,6 +14,7 @@ const initialState: Selections = {
     fieldPrefix: undefined,
     requestId: undefined,
     infoIsOpen: false,
+    deleteRequestAlertIsOpen: false,
     requestIsOpen: false
 };
 const slice = createSlice({
@@ -28,6 +30,12 @@ const slice = createSlice({
         closeInfoView(state){
             state.infoIsOpen = false;
         },
+        openDeleteRequestsAlert(state){
+            state.deleteRequestAlertIsOpen = true;
+        },
+        closeDeleteRequestsAlert(state){
+            state.deleteRequestAlertIsOpen = false;
+        },
         openRequestView(state){
             state.requestIsOpen = true;
         },
@@ -50,6 +58,8 @@ export const {
     toggleNoiseCancellation,
     openInfoView,
     closeInfoView,
+    openDeleteRequestsAlert,
+    closeDeleteRequestsAlert,
     openRequestView,
     closeRequestView,
     selectEndpoint,