✨ Read script executions from batch execution detail

4sh · Aug 7, 2024 · 8d6a1b3 · 8d6a1b3
1 parent 3562a86
commit 8d6a1b3
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 441 deletions.
diff --git a/modules/ui/src/lib/components/molecules/M_scriptItem.svelte b/modules/ui/src/lib/components/molecules/M_scriptItem.svelte
@@ -8,7 +8,7 @@
     let status = scriptExecution.status
 </script>
 
-<div class="scriptItem {active ? '_isActive' : ''} grid-x">
+<div class="scriptItem {active ? '_isActive' : ''} grid-x" on:click>
     <div class="scriptItem-icon _{status} cell shrink grid-x align-middle align-center">
         <A_icon type="{status === ExecutionStatus.COMPLETED ? 'task_alt' :
                        status === ExecutionStatus.IN_PROGRESS ? 'autorenew' :

diff --git a/modules/ui/src/lib/components/organisms/O_scriptDetail.svelte b/modules/ui/src/lib/components/organisms/O_scriptDetail.svelte
@@ -1,18 +1,22 @@
-<script>
+<script lang="ts">
     import A_icon from "$lib/components/atoms/A_icon.svelte";
     import A_tag from "$lib/components/atoms/form/A_tag.svelte";
+    import type {ScriptExecutionDetail} from "$lib/domain/execution/Execution";
+    import {ExecutionStatus} from '$lib/domain/execution/Execution';
+
+    export let scriptExecution: ScriptExecutionDetail
 </script>
 
 <div class="oScript cell auto">
     <div class="oScript-mainTitle">
-        Script Name
+        {scriptExecution.script.name}
     </div>
     <div class=" oScript-container grid-x align-middle">
         <div class="oScript-title cell shrink">
             Statut :
         </div>
         <div class="oScript-data cell shrink">
-            En cours
+            {scriptExecution.status}
         </div>
         <div class="oScript-icon cell shrink grid-x align-middle align-center">
             <A_icon type="autorenew" size="light"></A_icon>
@@ -29,23 +33,27 @@
             Date de début d’exécution :
         </div>
         <div class="oScript-data cell shrink">
-            12/09/2022 à 17h30
+            {scriptExecution.startDate.toLocaleDateString()}
         </div>
     </div>
     <div class=" oScript-container grid-x align-middle">
         <div class="oScript-title cell shrink">
             Temps d’exécution :
         </div>
         <div class="oScript-data cell shrink">
-            2 : 27 : 34
+            {scriptExecution.durationInMs} ms
         </div>
     </div>
     <div class=" oScript-container grid-x align-middle">
         <div class="oScript-title cell shrink">
             Date de fin d’exécution :
         </div>
         <div class="oScript-data cell shrink">
-            En cours
+            {#if scriptExecution.status === ExecutionStatus.COMPLETED || scriptExecution.status === ExecutionStatus.ERROR}
+                {scriptExecution.endDate.toLocaleDateString()}
+            {:else}
+                En cours
+            {/if}
         </div>
     </div>
     <div class=" oScript-container grid-x align-middle _column">

diff --git a/modules/ui/src/lib/components/organisms/O_scriptList.svelte b/modules/ui/src/lib/components/organisms/O_scriptList.svelte
@@ -2,16 +2,26 @@
     import {Svroller} from "svrollbar";
     import M_scriptItem from "$lib/components/molecules/M_scriptItem.svelte";
     import type {ScriptExecutionDetail} from '$lib/domain/execution/Execution';
+    import {createEventDispatcher} from 'svelte';
 
+    const dispatch = createEventDispatcher();
     export let scriptsExecutions: ScriptExecutionDetail[]
+    export let activeScriptExecutionId: string;
+
+    function onScriptItemClick(scriptExecution: ScriptExecutionDetail) {
+        dispatch('scriptExecutionSelection', scriptExecution);
+    }
 </script>
 
 <div class="scriptList cell auto grid-y">
     <div class="scriptList-content cell auto">
         <Svroller>
             <div class="scriptList-content-scroller">
                 {#each scriptsExecutions as scriptExecution}
-                    <M_scriptItem scriptExecution="{scriptExecution}"></M_scriptItem>
+                    <M_scriptItem scriptExecution="{scriptExecution}"
+                                  active="{activeScriptExecutionId === scriptExecution.id}"
+                                  on:click={() => onScriptItemClick(scriptExecution)}>
+                    </M_scriptItem>
                 {/each}
             </div>
         </Svroller>