Add a button to download flow run logs

src/components/FlowRunLogs.vue

@@ -3,9 +3,8 @@
     <p-list-header>
       <template #controls>
         <LogLevelSelect v-model:selected="logLevel" />
-      </template>
-      <template #sort>
         <LogsSort v-model:selected="logsSort" />
+        <FlowRunLogsDownloadButton :flow-run />
       </template>
     </p-list-header>
 
@@ -45,6 +44,7 @@
   import { differenceInSeconds } from 'date-fns'
   import { ref, computed } from 'vue'
   import { LogLevelSelect, LogsContainer, LogsSort } from '@/components'
+  import FlowRunLogsDownloadButton from '@/components/FlowRunLogsDownloadButton.vue'
   import { useLogsSort, useWorkspaceApi } from '@/compositions'
   import { usePaginatedSubscription } from '@/compositions/usePaginatedSubscription'
   import { isTerminalStateType } from '@/models'

src/components/FlowRunLogsDownloadButton.vue

@@ -0,0 +1,33 @@
+<template>
+  <p-tooltip text="Download a csv of all logs" avoid-collisions>
+    <p-button class="flow-run-logs-download-button" icon="Download" :loading @click="download" />
+  </p-tooltip>
+</template>
+
+<script lang="ts" setup>
+  import { showToast } from '@prefecthq/prefect-design'
+  import { ref } from 'vue'
+  import { useWorkspaceApi } from '@/compositions'
+  import { FlowRun } from '@/models/FlowRun'
+
+  const { flowRun } = defineProps<{
+    flowRun: FlowRun,
+  }>()
+
+  const api = useWorkspaceApi()
+  const loading = ref(false)
+
+  async function download(): Promise<void> {
+    loading.value = true
+
+    try {
+      await api.flowRuns.downloadFlowRunLogsCsv(flowRun.id, flowRun.name)
+    } catch (error) {
+      console.error(error)
+
+      showToast('There was an error downloading logs', 'error')
+    }
+
+    loading.value = false
+  }
+</script>

src/services/WorkspaceFlowRunsApi.ts

@@ -146,4 +146,20 @@ export class WorkspaceFlowRunsApi extends WorkspaceApi {
     return this.delete(`/${flowRunId}`)
   }
 
+  public async downloadFlowRunLogsCsv(flowRunId: string, flowRunName: string | null): Promise<void> {
+    const { data } = await this.get<string>(`/${flowRunId}/download-logs-csv`, {
+      responseType: 'stream',
+    })
+
+    const url = URL.createObjectURL(new Blob([data]))
+    const link = document.createElement('a')
+    const filename = flowRunName ?? 'logs'
+
+    link.href = url
+    link.setAttribute('download', `${filename}.csv`)
+    link.click()
+
+    URL.revokeObjectURL(url)
+  }
+
 }