allow to clear logs

Author: gallayl

frontend/src/pages/services/service-logs.tsx

@@ -1,28 +1,63 @@
 import { createComponent, Shade } from '@furystack/shades'
-import { Button, Icon, icons, PageContainer, PageHeader, Paper } from '@furystack/shades-common-components'
+import { Button, Icon, icons, NotyService, PageContainer, PageHeader, Paper } from '@furystack/shades-common-components'
 
 import { LogViewer } from '../../components/log-viewer.js'
+import { ServicesApiClient } from '../../services/api-clients/services-api-client.js'
 
 type ServiceLogsProps = {
   serviceId: string
 }
 
 export const ServiceLogs = Shade<ServiceLogsProps>({
   shadowDomName: 'shade-service-logs',
-  render: ({ props }) => {
+  render: ({ props, injector }) => {
+    const api = injector.getInstance(ServicesApiClient)
+    const notyService = injector.getInstance(NotyService)
+
+    const handleClearLogs = async () => {
+      try {
+        await api.call({
+          method: 'DELETE',
+          action: '/services/:id/logs',
+          url: { id: props.serviceId },
+        })
+        notyService.emit('onNotyAdded', {
+          title: 'Logs cleared',
+          body: 'Service logs have been cleared.',
+          type: 'success',
+        })
+      } catch (error) {
+        notyService.emit('onNotyAdded', {
+          title: 'Error',
+          body: error instanceof Error ? error.message : 'Failed to clear logs',
+          type: 'error',
+        })
+      }
+    }
+
     return (
       <PageContainer>
         <PageHeader
           icon="📋"
           title="Service Logs"
           actions={
-            <Button
-              variant="outlined"
-              onclick={() => history.back()}
-              startIcon={<Icon icon={icons.chevronLeft} size="small" />}
-            >
-              Back
-            </Button>
+            <div style={{ display: 'flex', gap: '8px' }}>
+              <Button
+                variant="outlined"
+                color="error"
+                onclick={() => void handleClearLogs()}
+                startIcon={<Icon icon={icons.trash} size="small" />}
+              >
+                Clear Logs
+              </Button>
+              <Button
+                variant="outlined"
+                onclick={() => history.back()}
+                startIcon={<Icon icon={icons.chevronLeft} size="small" />}
+              >
+                Back
+              </Button>
+            </div>
           }
         />
         <Paper style={{ flex: '1', overflow: 'hidden' }}>