[grid] Session can be deleted via Grid UI

Author: VietND96

javascript/grid-ui/src/components/RunningSessions/RunningSessions.tsx

@@ -175,6 +175,12 @@ const Transition = React.forwardRef(function Transition (
 function RunningSessions (props) {
   const [rowOpen, setRowOpen] = useState('')
   const [rowLiveViewOpen, setRowLiveViewOpen] = useState('')
+  const [confirmDeleteOpen, setConfirmDeleteOpen] = useState(false)
+  const [sessionToDelete, setSessionToDelete] = useState('')
+  const [deleteLocation, setDeleteLocation] = useState('') // 'info' or 'liveview'
+  const [feedbackMessage, setFeedbackMessage] = useState('')
+  const [feedbackOpen, setFeedbackOpen] = useState(false)
+  const [feedbackSeverity, setFeedbackSeverity] = useState('success')
   const [order, setOrder] = useState<Order>('asc')
   const [orderBy, setOrderBy] = useState<keyof SessionData>('sessionDurationMillis')
   const [selected, setSelected] = useState<string[]>([])
@@ -244,6 +250,79 @@ function RunningSessions (props) {
 
   const isSelected = (name: string): boolean => selected.includes(name)
 
+  const handleDeleteConfirmation = (sessionId: string, location: string) => {
+    setSessionToDelete(sessionId)
+    setDeleteLocation(location)
+    setConfirmDeleteOpen(true)
+  }
+
+  const handleDeleteSession = async () => {
+    try {
+      const session = sessions.find(s => s.id === sessionToDelete)
+      if (!session) {
+        setFeedbackMessage('Session not found')
+        setFeedbackSeverity('error')
+        setConfirmDeleteOpen(false)
+        setFeedbackOpen(true)
+        return
+      }
+
+      let deleteUrl = ''
+
+      const parsed = JSON.parse(session.capabilities)
+      let wsUrl = parsed['webSocketUrl'] ?? ''
+      if (wsUrl.length > 0) {
+        try {
+          const url = new URL(origin)
+          const sessionUrl = new URL(wsUrl)
+          url.pathname = sessionUrl.pathname.split('/se/')[0] // Remove /se/ and everything after
+          url.protocol = sessionUrl.protocol === 'wss:' ? 'https:' : 'http:'
+          deleteUrl = url.href
+        } catch (error) {
+          deleteUrl = ''
+        }
+      }
+
+      if (!deleteUrl) {
+        const currentUrl = window.location.href
+        const baseUrl = currentUrl.split('/ui/')[0] // Remove /ui/ and everything after
+        deleteUrl = `${baseUrl}/session/${sessionToDelete}`
+      }
+
+      const response = await fetch(deleteUrl, {
+        method: 'DELETE'
+      })
+
+      if (response.ok) {
+        setFeedbackMessage('Session deleted successfully')
+        setFeedbackSeverity('success')
+        if (deleteLocation === 'liveview') {
+          handleDialogClose()
+        } else {
+          setRowOpen('')
+        }
+      } else {
+        setFeedbackMessage('Failed to delete session')
+        setFeedbackSeverity('error')
+      }
+    } catch (error) {
+      console.error('Error deleting session:', error)
+      setFeedbackMessage('Error deleting session')
+      setFeedbackSeverity('error')
+    }
+
+    setConfirmDeleteOpen(false)
+    setFeedbackOpen(true)
+    setSessionToDelete('')
+    setDeleteLocation('')
+  }
+
+  const handleCancelDelete = () => {
+    setConfirmDeleteOpen(false)
+    setSessionToDelete('')
+    setDeleteLocation('')
+  }
+
   const displaySessionInfo = (id: string): JSX.Element => {
     const handleInfoIconClick = (): void => {
       setRowOpen(id)
@@ -280,15 +359,15 @@ function RunningSessions (props) {
     try {
       const capabilities = JSON.parse(capabilitiesStr as string)
       const value = capabilities[key]
-      
+
       if (value === undefined || value === null) {
         return ''
       }
-      
+
       if (typeof value === 'object') {
         return JSON.stringify(value)
       }
-      
+
       return String(value)
     } catch (e) {
       return ''
@@ -307,11 +386,11 @@ function RunningSessions (props) {
       session.slot,
       origin
     )
-    
+
     selectedColumns.forEach(column => {
       sessionData[column] = getCapabilityValue(session.capabilities, column)
     })
-    
+
     return sessionData
   })
   const emptyRows = rowsPerPage - Math.min(rowsPerPage, rows.length - page * rowsPerPage)
@@ -328,14 +407,14 @@ function RunningSessions (props) {
       setRowLiveViewOpen(s)
     }
   }, [sessionId, sessions])
-  
+
   useEffect(() => {
     const dynamicHeadCells = selectedColumns.map(column => ({
       id: column,
       numeric: false,
       label: column
     }))
-    
+
     setHeadCells([...fixedHeadCells, ...dynamicHeadCells])
   }, [selectedColumns])
 
@@ -346,7 +425,7 @@ function RunningSessions (props) {
           <Paper sx={{ width: '100%', marginBottom: 2 }}>
             <EnhancedTableToolbar title='Running'>
               <Box display="flex" alignItems="center">
-                <ColumnSelector 
+                <ColumnSelector
                   sessions={sessions}
                   selectedColumns={selectedColumns}
                   onColumnSelectionChange={(columns) => {
@@ -532,6 +611,14 @@ function RunningSessions (props) {
                                 </Typography>
                               </DialogContent>
                               <DialogActions>
+                                <Button
+                                  onClick={() => handleDeleteConfirmation(row.id as string, 'info')}
+                                  color='error'
+                                  variant='contained'
+                                  sx={{ marginRight: 1 }}
+                                >
+                                  Delete
+                                </Button>
                                 <Button
                                   onClick={() => setRowOpen('')}
                                   color='primary'
@@ -586,6 +673,63 @@ function RunningSessions (props) {
           />
         </div>
       )}
+      {/* Confirmation Dialog */}
+      <Dialog
+        open={confirmDeleteOpen}
+        onClose={handleCancelDelete}
+        aria-labelledby='delete-confirmation-dialog'
+      >
+        <DialogTitle id='delete-confirmation-dialog'>
+          Confirm Session Deletion
+        </DialogTitle>
+        <DialogContent>
+          <Typography>
+            Are you sure you want to delete this session? This action cannot be undone.
+          </Typography>
+        </DialogContent>
+        <DialogActions>
+          <Button
+            onClick={handleCancelDelete}
+            color='primary'
+            variant='outlined'
+          >
+            Cancel
+          </Button>
+          <Button
+            onClick={handleDeleteSession}
+            color='error'
+            variant='contained'
+            autoFocus
+          >
+            Delete
+          </Button>
+        </DialogActions>
+      </Dialog>
+
+      {/* Feedback Dialog */}
+      <Dialog
+        open={feedbackOpen}
+        onClose={() => setFeedbackOpen(false)}
+        aria-labelledby='feedback-dialog'
+      >
+        <DialogTitle id='feedback-dialog'>
+          {feedbackSeverity === 'success' ? 'Success' : 'Error'}
+        </DialogTitle>
+        <DialogContent>
+          <Typography color={feedbackSeverity === 'success' ? 'success.main' : 'error.main'}>
+            {feedbackMessage}
+          </Typography>
+        </DialogContent>
+        <DialogActions>
+          <Button
+            onClick={() => setFeedbackOpen(false)}
+            color='primary'
+            variant='contained'
+          >
+            OK
+          </Button>
+        </DialogActions>
+      </Dialog>
     </Box>
   )
 }