Merge pull request #103 from fractal-analytics-platform/v0.3

Client v0.3 release

Author: rkpasia

package-lock.json

@@ -13,22 +13,22 @@
 		"format": "prettier --write ."
 	},
 	"devDependencies": {
-		"@playwright/test": "^1.25.0",
+		"@playwright/test": "^1.32.3",
 		"@sveltejs/adapter-auto": "^2.0.0",
-		"@sveltejs/kit": "^1.8.3",
-		"eslint": "^8.16.0",
+		"@sveltejs/kit": "^1.15.7",
+		"eslint": "^8.38.0",
 		"eslint-config-prettier": "^8.3.0",
 		"eslint-plugin-svelte3": "^4.0.0",
 		"prettier": "^2.6.2",
 		"prettier-plugin-svelte": "^2.7.0",
-		"svelte": "^3.44.0",
+		"svelte": "^3.58.0",
 		"svelte-check": "^2.7.1",
 		"typescript": "^4.7.4",
-		"vite": "^4.1.3"
+		"vite": "^4.2.2"
 	},
 	"type": "module",
 	"dependencies": {
-		"@vincjo/datatables": "^1.5.2",
+		"@vincjo/datatables": "^1.6.0",
 		"sweetalert2": "^11.4.37"
 	}
 }

package.json

@@ -21,7 +21,6 @@ export async function createProject(data) {
 
   const requestData = {
     name: data.get('projectName'),
-    project_dir: data.get('projectDirectory')
   }
 
   const headers = new Headers()

src/lib/api/v1/project/project_api.js

@@ -251,3 +251,42 @@ export async function applyWorkflow(projectId, workflowId, formData) {
 
   throw new PostResourceException(await response.json())
 }
+
+// Download a workflow job log as zip file
+export async function downloadWorkflowJobLog(workflowJobId) {
+
+    const response = await fetch(PUBLIC_FRACTAL_SERVER_HOST + `/api/v1/job/download/${workflowJobId}`, {
+      method: 'GET',
+      credentials: 'include',
+      mode: 'cors'
+    })
+
+    if (response.ok) {
+      // The API uses a StreamResponse to stream the zip file to the client
+      // Get a stream reader from the body
+      const reader = response.body.getReader()
+      // Read the stream and create a blob
+      const readableStream = new ReadableStream({
+        start(controller) {
+          return pump()
+          function pump() {
+            return reader.read().then(({ done, value }) => {
+              // When no more data needs to be consumed, close the stream
+              if (done) {
+                controller.close()
+                return
+              }
+              // Enqueue the next data chunk into our target stream
+              controller.enqueue(value)
+              return pump()
+            })
+          }
+        }
+      })
+      // Create a blob from the stream
+      const blob = await new Response(readableStream).blob()
+      return blob
+    }
+
+    throw new Error('The client was not able to retrieve the workflow job log from the server')
+}

src/lib/api/v1/workflow/workflow_api.js

@@ -35,8 +35,6 @@
             <ul class="list-group">
               <li class="list-group-item list-group-item-light fw-bold">Name</li>
               <li class="list-group-item">{project?.name}</li>
-              <li class="list-group-item list-group-item-light fw-bold">Directory</li>
-              <li class="list-group-item">{project?.project_dir}</li>
               <li class="list-group-item list-group-item-light fw-bold">Read only</li>
               <li class="list-group-item">{project?.read_only ? "Yes" : "No"}</li>
             </ul>

src/lib/components/projects/ProjectInfoModal.svelte

@@ -61,13 +61,6 @@
             <input name="projectName" type="text" class="form-control">
           </div>
         </div>
-        <div class="col-auto">
-          <div class="input-group">
-            <div class="input-group-text">Project directory</div>
-            <input name="projectDirectory" type="text" class="form-control">
-          </div>
-        </div>
-
         <div class="col-auto">
           <button type="submit" class="btn btn-primary">Create</button>
         </div>

src/lib/components/projects/ProjectsList.svelte

@@ -17,14 +17,16 @@
     cancel()
 
     const workflowFile = data.get('workflowFile')
-    console.log(workflowFile)
 
     if (workflowFile.name == '') {
       throw new Error('No workflow file specified')
     }
 
-    const workflowMetadata = await workflowFile.text().then(data => JSON.parse(data))
-    console.log(workflowMetadata)
+    const workflowMetadata = await workflowFile.text()
+      .then(data => JSON.parse(data))
+      .catch(() => {
+        throw new Error('The format of the selected file is not valid. Please select a valid workflow file.')
+      })
 
     // Request workflow import
     importing = true
@@ -58,7 +60,7 @@
 
   <div class="mb-3">
     <label for="workflowFile" class="form-label">Select a workflow file</label>
-    <input class="form-control" type="file" name="workflowFile" id="workflowFile">
+    <input class="form-control" accept="application/json" type="file" name="workflowFile" id="workflowFile">
   </div>
 
   <button class="btn btn-primary" disabled={importing}>

src/lib/components/projects/WorkflowImport.svelte

@@ -7,7 +7,15 @@ export async function loadProjectContext(projectId) {
   const context = get(contextProject)
 
   // If the context is already loaded, do not reload it
-  if (context.project !== undefined) return
+  if (context.project !== undefined) {
+    const currentProjectId = context.project.id
+
+    // If the project loaded is the same as the one we want to load, do not reload it
+    if (currentProjectId === projectId) {
+      return
+    }
+
+  }
 
   await getProject(projectId)
     .then((project) => {

src/lib/components/projects/controller.js

@@ -1,10 +1,11 @@
 <script>
   import { onMount } from 'svelte'
   import { page } from '$app/stores'
-  import { DataHandler } from '@vincjo/datatables'
+  import { DataHandler, check } from '@vincjo/datatables'
   import { loadProjectContext } from  '$lib/components/projects/controller'
   import { contextProject } from '$lib/stores/projectStores'
   import { getJobs } from '$lib/api/v1/project/project_api'
+  import { downloadWorkflowJobLog } from '$lib/api/v1/workflow/workflow_api'
   import StatusBadge from '$lib/components/jobs/StatusBadge.svelte'
   import TimestampBadge from '$lib/components/jobs/TimestampBadge.svelte'
   import JobInfoModal from '$lib/components/jobs/JobInfoModal.svelte'
@@ -45,37 +46,37 @@
     // Set filters
     const idFilter = $page.url.searchParams.get('id')
     if (idFilter) {
-      tableHandler.filter(idFilter, 'id')
+      tableHandler.filter(idFilter, 'id', check.isEqualTo)
     }
 
     let workflowQueryFilter = $page.url.searchParams.get('workflow')
     if (workflowQueryFilter) {
-      workflowFilter = workflowQueryFilter
+      tableHandler.filter(workflowQueryFilter, 'workflow_id', check.isEqualTo)
     }
 
     let inputDatasetQueryFilter = $page.url.searchParams.get('input_dataset')
     if (inputDatasetQueryFilter) {
-      inputDatasetFilter = inputDatasetQueryFilter
+      tableHandler.filter(inputDatasetQueryFilter, 'input_dataset_id', check.isEqualTo)
     }
 
     let outputDatasetQueryFilter = $page.url.searchParams.get('output_dataset')
     if (outputDatasetQueryFilter) {
-      outputDatasetFilter = outputDatasetQueryFilter
+      tableHandler.filter(outputDatasetQueryFilter, 'output_dataset_id', check.isEqualTo)
     }
 
     let statusQueryFilter = $page.url.searchParams.get('status')
     if (statusQueryFilter) {
-      statusFilter = statusQueryFilter
+      tableHandler.filter(statusQueryFilter, 'status', check.isEqualTo)
     }
 
   })
 
   setupTableHandler()
 
   // Filters
-  $: tableHandler.filter(workflowFilter, 'workflow_id')
-  $: tableHandler.filter(inputDatasetFilter, 'input_dataset_id')
-  $: tableHandler.filter(outputDatasetFilter, 'output_dataset_id')
+  $: tableHandler.filter(workflowFilter, 'workflow_id', check.isEqualTo)
+  $: tableHandler.filter(inputDatasetFilter, 'input_dataset_id', check.isEqualTo)
+  $: tableHandler.filter(outputDatasetFilter, 'output_dataset_id', check.isEqualTo)
   $: tableHandler.filter(statusFilter, 'status')
 
   async function loadProjectJobs() {
@@ -99,6 +100,30 @@
     rows = tableHandler.getRows()
   }
 
+  async function handleJobLogsDownload(jobId) {
+    console.log('Download job')
+
+    const downloadUrl = await downloadWorkflowJobLog(jobId)
+      .then(blob => {
+        // Create a download URL for the file
+        return URL.createObjectURL(blob)
+      })
+      .catch(error => {
+        console.error(error)
+      })
+
+    // Create a hidden link within the page to trigger the download of the file
+    const link = document.createElement('a')
+    // Append the link to the body
+    document.body.appendChild(link)
+    // Set the href of the link to the download URL
+    link.href = downloadUrl
+    link.download = `${jobId}_logs.zip`
+    // Trigger the download
+    link.click()
+    document.body.removeChild(link)
+  }
+
 </script>
 
 <div class="d-flex justify-content-between align-items-center">
@@ -246,6 +271,7 @@
                     <i class="bi-list-columns-reverse"></i>
                     Logs
                   </button>
+                  <button class="btn btn-light" on:click={handleJobLogsDownload.bind(this, row.id)}><i class="bi-arrow-down-circle"></i></button>
                 {/if}
               </td>
             </tr>

src/routes/projects/[id]/jobs/+page.svelte

@@ -398,21 +398,27 @@
         {#if workflow !== undefined && updatableWorkflowList.length == 0 }
           <p class="text-center mt-3">No workflow tasks yet, add one.</p>
         {:else if workflow !== undefined}
-          <ul class="list-group list-group-flush">
-            {#each updatableWorkflowList as workflowTask, i }
-              <li class="list-group-item" data-fs-target={workflowTask.id}>
-                <div class="d-flex justify-content-between align-items-center">
-                  <div>
-                    {workflowTask.task.name} #{workflowTask.id}
-                  </div>
-                  <div>
-                    <button class="btn btn-light" on:click|preventDefault={moveWorkflowTask.bind(this, i, 'up')}><i class="bi-arrow-up"></i></button>
-                    <button class="btn btn-light" on:click|preventDefault={moveWorkflowTask.bind(this, i, 'down')}><i class="bi-arrow-down"></i></button>
+          {#key updatableWorkflowList }
+            <ul class="list-group list-group-flush">
+              {#each updatableWorkflowList as workflowTask, i }
+                <li class="list-group-item" data-fs-target={workflowTask.id}>
+                  <div class="d-flex justify-content-between align-items-center">
+                    <div>
+                      {workflowTask.task.name} #{workflowTask.id}
+                    </div>
+                    <div>
+                      {#if i !== 0 }
+                        <button class="btn btn-light" on:click|preventDefault={moveWorkflowTask.bind(this, i, 'up')}><i class="bi-arrow-up"></i></button>
+                      {/if}
+                      {#if i !== updatableWorkflowList.length - 1 }
+                        <button class="btn btn-light" on:click|preventDefault={moveWorkflowTask.bind(this, i, 'down')}><i class="bi-arrow-down"></i></button>
+                      {/if}
+                    </div>
                   </div>
-                </div>
-              </li>
-            {/each}
-          </ul>
+                </li>
+              {/each}
+            </ul>
+          {/key}
         {/if}
 
       </div>