From 6700d52cc817b019308cbc16b1b87302a9d3fec0 Mon Sep 17 00:00:00 2001
From: R-Sourabh <rsourabh002@gmail.com>
Date: Tue, 17 Sep 2024 20:43:05 +0530
Subject: [PATCH 01/14] Implemented: added the ui displays the file
 information(#680)

---
 src/components/JobConfiguration.vue | 40 +++++++++++++++++++++++++----
 1 file changed, 35 insertions(+), 5 deletions(-)

diff --git a/src/components/JobConfiguration.vue b/src/components/JobConfiguration.vue
index 77926a83..86f2b4b9 100644
--- a/src/components/JobConfiguration.vue
+++ b/src/components/JobConfiguration.vue
@@ -112,6 +112,30 @@
       </ion-checkbox>
     </ion-item>
   </div>
+  <section>
+    <ion-item lines="none">
+      <h1>Import logs</h1>
+      <ion-button  slot="end">View details</ion-button>
+    </ion-item>
+
+    <ion-list>
+      <ion-item>
+        <ion-icon slot="start" :icon="fileTrayFullOutline" />
+        <ion-label class="ion-text-wrap">Files received </ion-label>
+        <ion-label slot="end" class="ion-text-wrap">14</ion-label>
+      </ion-item>
+      <ion-item>
+        <ion-icon slot="start" :icon="codeWorkingOutline" />
+        <ion-label class="ion-text-wrap">Files processed</ion-label>
+        <ion-label slot="end" class="ion-text-wrap">14</ion-label>
+      </ion-item>
+      <ion-item lines="none">
+        <ion-icon slot="start" :icon="warningOutline" />
+        <ion-label class="ion-text-wrap">Files with errors</ion-label>
+        <ion-label slot="end" class="ion-text-wrap">14</ion-label>
+      </ion-item>
+    </ion-list>
+  </section>
 
 </template>
 
@@ -138,7 +162,9 @@ import {
 import {
   addOutline,
   calendarClearOutline,
+  codeWorkingOutline,
   flashOutline,
+  fileTrayFullOutline,
   listCircleOutline,
   copyOutline,
   timeOutline,
@@ -146,7 +172,8 @@ import {
   syncOutline,
   personCircleOutline,
   pinOutline,
-  refreshOutline
+  refreshOutline,
+  warningOutline
 } from "ionicons/icons";
 import JobHistoryModal from '@/components/JobHistoryModal.vue'
 import { Plugins } from '@capacitor/core';
@@ -525,10 +552,12 @@ export default defineComponent({
       Actions,
       addOutline,
       calendarClearOutline,
+      codeWorkingOutline,
       copyOutline,
       DateTime,
       listCircleOutline,
       flashOutline,
+      fileTrayFullOutline,
       hasPermission,
       isCustomRunTime,
       getNowTimestamp,
@@ -540,17 +569,18 @@ export default defineComponent({
       personCircleOutline,
       pinOutline,
       refreshOutline,
-      translate
+      translate,
+      warningOutline
     };
   }
 });
 </script>
 
 <style scoped>
-ion-list {
-  margin: 0 0 var(--spacer-base);
+section {
+  margin-top: var(--spacer-sm);
+  margin-bottom: var(--spacer-sm);
 }
-
 .actions > ion-button {
   margin: var(--spacer-sm);
 }

From c20f9112849e8d5853e2936c76d4c5c4b6da6e5b Mon Sep 17 00:00:00 2001
From: R-Sourabh <rsourabh002@gmail.com>
Date: Wed, 18 Sep 2024 18:57:18 +0530
Subject: [PATCH 02/14] Implemented: the proposed UI for the DataManager Logs
 in Job Manager(#680)

---
 src/components/DownloadLogsFilePopover.vue |  43 ++++
 src/components/ImportLogsDetail.vue        | 238 +++++++++++++++++++++
 src/components/JobConfiguration.vue        |  23 +-
 src/router/index.ts                        |   6 +
 4 files changed, 301 insertions(+), 9 deletions(-)
 create mode 100644 src/components/DownloadLogsFilePopover.vue
 create mode 100644 src/components/ImportLogsDetail.vue

diff --git a/src/components/DownloadLogsFilePopover.vue b/src/components/DownloadLogsFilePopover.vue
new file mode 100644
index 00000000..ea430c24
--- /dev/null
+++ b/src/components/DownloadLogsFilePopover.vue
@@ -0,0 +1,43 @@
+<template>
+  <ion-content>
+    <ion-list>
+      <ion-list-header>Log Id</ion-list-header>
+      <ion-item button>
+        Log file
+      </ion-item>
+      <ion-item button>
+        Uploaded file
+      </ion-item>
+      <ion-item button lines="none">
+        Failed records
+      </ion-item>    
+    </ion-list>
+  </ion-content>
+</template>
+
+<script lang="ts">
+import {
+  IonContent,
+  IonItem,
+  IonList,
+  IonListHeader,
+} from "@ionic/vue";
+import { defineComponent } from "vue";
+import { translate } from "@hotwax/dxp-components";
+
+export default defineComponent({
+  name: "DownloadLogsFilePopover",
+  components: { 
+    IonContent,
+    IonItem,
+    IonList,
+    IonListHeader
+  },
+  setup() {
+
+    return {
+      translate
+    }
+  }
+});
+</script> 
\ No newline at end of file
diff --git a/src/components/ImportLogsDetail.vue b/src/components/ImportLogsDetail.vue
new file mode 100644
index 00000000..d69245bf
--- /dev/null
+++ b/src/components/ImportLogsDetail.vue
@@ -0,0 +1,238 @@
+<template>
+  <ion-page>
+    <ion-header>
+      <ion-toolbar>
+        <ion-back-button slot="start" default-href="/pipeline" />
+        <ion-title>{{ translate("Import logs")}}</ion-title>
+      </ion-toolbar>
+    </ion-header>
+
+    <ion-content>
+      <div class="header">
+        <div class="search ion-padding">
+          <section>
+            <ion-item lines="none">
+              <h1>Import logs</h1>
+            </ion-item>
+            <ion-list>
+              <ion-item>
+                <ion-icon slot="start" :icon="pulseOutline" />
+                <ion-label>Job</ion-label>
+                <ion-label slot="end" class="ion-text-wrap">Job Id</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-icon slot="start" :icon="fileTrayFullOutline" />
+                <ion-label>Files received</ion-label>
+                <ion-label slot="end">14</ion-label>
+              </ion-item>
+              <ion-item>
+                <ion-icon slot="start" :icon="codeWorkingOutline" />
+                <ion-label>Files processed</ion-label>
+                <ion-label slot="end">14</ion-label>
+              </ion-item>
+              <ion-item lines="none">
+                <ion-icon slot="start" :icon="warningOutline" />
+                <ion-label>Files with errors</ion-label>
+                <ion-label slot="end">14</ion-label>
+              </ion-item>
+            </ion-list>
+          </section>
+        </div>
+        <div class="filters ion-padding">
+          <ion-label lines="none">
+            <p class="overline">Config Id</p>
+            <h1>Config Name</h1>
+          </ion-label>
+          <ion-list>
+            <ion-item>
+              <ion-icon slot="start" :icon="shareSocialOutline" />
+              <ion-label>Multithreading</ion-label>
+              <ion-label slot="end">facilityId</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-icon slot="start" :icon="globeOutline" />
+              <ion-label>SFTP</ion-label>
+              <ion-label slot="end" class="ion-text-wrap">path/SFTP</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-icon slot="start" :icon="optionsOutline" />
+              <ion-label>Mode</ion-label>
+              <ion-label slot="end">Queued</ion-label>
+            </ion-item>
+          </ion-list>
+        </div>
+      </div>
+
+      <div class="ion-padding">
+        <ion-chip outline>
+          <ion-label>All</ion-label>
+          <ion-icon :icon="checkmarkOutline"/>
+        </ion-chip>
+        <ion-chip outline>
+          <ion-label>Failed log</ion-label>
+        </ion-chip>
+        <ion-chip outline>
+          <ion-label>Failed records</ion-label>
+        </ion-chip>
+      </div>
+
+      <div class="list-item">
+        <ion-item lines="none">
+          <ion-icon slot="start" :icon="documentTextOutline" />
+          <ion-label>
+            <p class="overline">Log id</p>
+            File Name
+            <p>07/09/2024 10:00 PM</p>
+          </ion-label>
+        </ion-item>
+
+        <ion-label>
+          07/09/2024 10:00 PM
+          <p>Started</p>
+        </ion-label>
+
+        <ion-label>
+          07/09/2024 10:00 PM
+          <p>Finished</p>
+        </ion-label>
+        
+        <ion-badge color="success">Finished</ion-badge>
+
+        <ion-label>
+          <ion-icon slot="start" :icon="cloudDownloadOutline" />
+          <p>Failed records</p>
+        </ion-label>
+
+        <ion-button fill="clear" color="medium" @click="openDownloadLogsFilePopover($event)">
+          <ion-icon slot="icon-only" :icon="ellipsisVerticalOutline" />
+        </ion-button>
+      </div>
+
+      <div class="list-item">
+        <ion-item lines="none">
+          <ion-icon slot="start" :icon="documentTextOutline" />
+          <ion-label>
+            <p class="overline">Log id</p>
+            File Name
+            <p>07/09/2024 10:00 PM</p>
+          </ion-label>
+        </ion-item>
+
+        <ion-label>
+          07/09/2024 10:00 PM
+          <p>Started</p>
+        </ion-label>
+
+        <ion-label>
+          07/09/2024 10:00 PM
+          <p>Finished</p>
+        </ion-label>
+        
+        <ion-badge color="danger">Failed</ion-badge>
+
+        <ion-label>
+          <ion-icon slot="start" :icon="cloudDownloadOutline" />
+          <p>Failed records</p>
+        </ion-label>
+
+        <ion-button fill="clear" color="medium" @click="openDownloadLogsFilePopover($event)">
+          <ion-icon slot="icon-only" :icon="ellipsisVerticalOutline" />
+        </ion-button>
+      </div>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script>
+import { checkmarkOutline, codeWorkingOutline, cloudDownloadOutline, documentTextOutline, ellipsisVerticalOutline, fileTrayFullOutline, globeOutline, optionsOutline, pulseOutline, shareSocialOutline, warningOutline } from "ionicons/icons";
+import { IonBackButton, IonBadge, IonButton, IonChip, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonPage, IonTitle, IonToolbar, popoverController } from "@ionic/vue";
+import { defineComponent } from 'vue'
+import { translate } from '@hotwax/dxp-components'
+import DownloadLogsFilePopover from "./DownloadLogsFilePopover.vue";
+
+export default defineComponent ({
+  name: "ImportLogsDetail",
+  components: {
+    IonBackButton,
+    IonBadge,
+    IonButton,
+    IonChip,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonPage,
+    IonTitle,
+    IonToolbar,
+  },
+  methods : {
+    async openDownloadLogsFilePopover(event) {
+      const popover = await popoverController.create({
+        component: DownloadLogsFilePopover,
+        showBackdrop: false,
+        event: event
+      });
+      return popover.present()
+    }
+  },
+  setup() {
+    return {
+      checkmarkOutline,
+      codeWorkingOutline,
+      cloudDownloadOutline,
+      documentTextOutline,
+      ellipsisVerticalOutline,
+      fileTrayFullOutline,
+      globeOutline,
+      optionsOutline,
+      pulseOutline,
+      shareSocialOutline,
+      warningOutline,
+      translate
+    }
+  }
+})
+</script>
+
+<style scoped>
+section {
+  overflow: hidden;
+  border: var(--border-medium);
+  border-radius: 16px;
+}
+
+.list-item {
+  --columns-desktop: 6;
+  border-bottom : 1px solid var(--ion-color-medium);
+}
+
+.list-item > ion-item {
+  width: 100%;
+}
+
+.header {
+  display: grid;
+  grid: "search filters"
+        /1fr 1fr;
+}
+
+.search {
+  grid-area: search;
+}
+
+.filters {
+  grid-area: filters;
+  align-self: end;
+}
+
+@media (max-width: 991px) {
+  .header {
+    grid: "search"
+          "filters"
+          / auto;
+    padding: 0;
+  }
+}
+</style> 
\ No newline at end of file
diff --git a/src/components/JobConfiguration.vue b/src/components/JobConfiguration.vue
index 86f2b4b9..34387aa0 100644
--- a/src/components/JobConfiguration.vue
+++ b/src/components/JobConfiguration.vue
@@ -112,31 +112,31 @@
       </ion-checkbox>
     </ion-item>
   </div>
+  <!-- Import logs -->
   <section>
     <ion-item lines="none">
       <h1>Import logs</h1>
-      <ion-button  slot="end">View details</ion-button>
+      <ion-button slot="end" fill="clear" @click="openImportLogsDetails()">View details</ion-button>
     </ion-item>
-
+    <ion-progress-bar></ion-progress-bar>
     <ion-list>
       <ion-item>
         <ion-icon slot="start" :icon="fileTrayFullOutline" />
-        <ion-label class="ion-text-wrap">Files received </ion-label>
-        <ion-label slot="end" class="ion-text-wrap">14</ion-label>
+        <ion-label>Files received</ion-label>
+        <ion-label slot="end">14</ion-label>
       </ion-item>
       <ion-item>
         <ion-icon slot="start" :icon="codeWorkingOutline" />
-        <ion-label class="ion-text-wrap">Files processed</ion-label>
-        <ion-label slot="end" class="ion-text-wrap">14</ion-label>
+        <ion-label>Files processed</ion-label>
+        <ion-label slot="end">14</ion-label>
       </ion-item>
       <ion-item lines="none">
         <ion-icon slot="start" :icon="warningOutline" />
-        <ion-label class="ion-text-wrap">Files with errors</ion-label>
-        <ion-label slot="end" class="ion-text-wrap">14</ion-label>
+        <ion-label>Files with errors</ion-label>
+        <ion-label slot="end">14</ion-label>
       </ion-item>
     </ion-list>
   </section>
-
 </template>
 
 <script lang="ts">
@@ -153,6 +153,7 @@ import {
   IonLabel,
   IonList,
   IonModal,
+  IonProgressBar,
   IonRow,
   IonSelect,
   IonSelectOption,
@@ -200,6 +201,7 @@ export default defineComponent({
     IonLabel,
     IonList,
     IonModal,
+    IonProgressBar,
     IonRow,
     IonSelect,
     IonSelectOption,
@@ -252,6 +254,9 @@ export default defineComponent({
     }
   },
   methods: {
+    openImportLogsDetails() {
+      this.router.push({ name: 'ImportLogsDetail', replace: false });
+    },
     getDateTime(time: any) {
       return DateTime.fromMillis(time).toISO()
     },
diff --git a/src/router/index.ts b/src/router/index.ts
index 10f36458..c03f78a7 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -13,6 +13,7 @@ import Miscellaneous from '@/views/Miscellaneous.vue'
 import Reports from '@/views/Reports.vue'
 import BulkEditor from '@/views/BulkEditor.vue'
 import Settings from "@/views/Settings.vue"
+import ImportLogsDetail from "@/components/ImportLogsDetail.vue"
 import store from '@/store'
 import { hasPermission } from '@/authorization';
 import { showToast } from '@/utils'
@@ -63,6 +64,11 @@ const routes: Array<RouteRecordRaw> = [
       permissionId: "APP_PIPELINE_VIEW"
     }
   },
+  {
+    path: '/import-logs-detail',
+    name: 'ImportLogsDetail',
+    component: ImportLogsDetail,
+  },
   {
     path: '/inventory',
     name: 'Inventory',

From ab257395bcd93fad51e33adb20eecdde31d17114 Mon Sep 17 00:00:00 2001
From: R-Sourabh <rsourabh002@gmail.com>
Date: Fri, 20 Sep 2024 19:59:44 +0530
Subject: [PATCH 03/14] Implemented: Updated the DataManager Logs page to be
 dynamic in Job Manager(#680)

---
 src/components/DownloadLogsFilePopover.vue |   8 +-
 src/components/ImportLogsDetail.vue        | 210 ++++++++++++---------
 src/components/JobConfiguration.vue        |  31 +--
 src/locales/en.json                        |  14 ++
 src/router/index.ts                        |   3 +-
 src/services/JobService.ts                 |  21 ++-
 src/store/modules/job/JobState.ts          |   1 +
 src/store/modules/job/actions.ts           |  62 ++++++
 src/store/modules/job/getters.ts           |   3 +
 src/store/modules/job/index.ts             |   1 +
 src/store/modules/job/mutation-types.ts    |   3 +-
 src/store/modules/job/mutations.ts         |   3 +
 src/views/Pipeline.vue                     |   3 +
 13 files changed, 256 insertions(+), 107 deletions(-)

diff --git a/src/components/DownloadLogsFilePopover.vue b/src/components/DownloadLogsFilePopover.vue
index ea430c24..5a9c5eed 100644
--- a/src/components/DownloadLogsFilePopover.vue
+++ b/src/components/DownloadLogsFilePopover.vue
@@ -1,15 +1,15 @@
 <template>
   <ion-content>
     <ion-list>
-      <ion-list-header>Log Id</ion-list-header>
+      <ion-list-header>{{ translate('Log Id') }}</ion-list-header>
       <ion-item button>
-        Log file
+        {{ translate('Log file') }}
       </ion-item>
       <ion-item button>
-        Uploaded file
+        {{ translate('Uploaded file') }}
       </ion-item>
       <ion-item button lines="none">
-        Failed records
+        {{ translate('Failed records') }}
       </ion-item>    
     </ion-list>
   </ion-content>
diff --git a/src/components/ImportLogsDetail.vue b/src/components/ImportLogsDetail.vue
index d69245bf..e8786c83 100644
--- a/src/components/ImportLogsDetail.vue
+++ b/src/components/ImportLogsDetail.vue
@@ -12,132 +12,105 @@
         <div class="search ion-padding">
           <section>
             <ion-item lines="none">
-              <h1>Import logs</h1>
+              <h1>{{ translate('Import logs') }}</h1>
             </ion-item>
             <ion-list>
               <ion-item>
                 <ion-icon slot="start" :icon="pulseOutline" />
-                <ion-label>Job</ion-label>
-                <ion-label slot="end" class="ion-text-wrap">Job Id</ion-label>
+                <ion-label>{{ translate('Job') }}</ion-label>
+                <ion-label slot="end" class="ion-text-wrap">{{ currentJob.jobId }}</ion-label>
               </ion-item>
               <ion-item>
                 <ion-icon slot="start" :icon="fileTrayFullOutline" />
-                <ion-label>Files received</ion-label>
-                <ion-label slot="end">14</ion-label>
+                <ion-label>{{ translate('Files received') }}</ion-label>
+                <ion-label slot="end">{{ getDataLogs.length }}</ion-label>
               </ion-item>
               <ion-item>
                 <ion-icon slot="start" :icon="codeWorkingOutline" />
-                <ion-label>Files processed</ion-label>
-                <ion-label slot="end">14</ion-label>
+                <ion-label>{{ translate('Files processed') }}</ion-label>
+                <ion-label slot="end">{{ getProcessedFileCount() }}</ion-label>
               </ion-item>
               <ion-item lines="none">
                 <ion-icon slot="start" :icon="warningOutline" />
-                <ion-label>Files with errors</ion-label>
-                <ion-label slot="end">14</ion-label>
+                <ion-label>{{ translate('Files with errors') }}</ion-label>
+                <ion-label slot="end">{{ getErrorFileCount() }}</ion-label>
               </ion-item>
             </ion-list>
           </section>
         </div>
         <div class="filters ion-padding">
           <ion-label lines="none">
-            <p class="overline">Config Id</p>
-            <h1>Config Name</h1>
+            <p class="overline">{{ currentJob.runtimeData?.configId }}</p>
+            <h1>{{ configDetails[0]?.description }}</h1>
           </ion-label>
           <ion-list>
             <ion-item>
               <ion-icon slot="start" :icon="shareSocialOutline" />
-              <ion-label>Multithreading</ion-label>
-              <ion-label slot="end">facilityId</ion-label>
+              <ion-label>{{ translate('Multithreading') }}</ion-label>
+              <ion-label slot="end">{{ currentJob.runtimeData?.groupBy ? currentJob.runtimeData?.groupBy : "-" }}</ion-label>
             </ion-item>
             <ion-item>
               <ion-icon slot="start" :icon="globeOutline" />
-              <ion-label>SFTP</ion-label>
-              <ion-label slot="end" class="ion-text-wrap">path/SFTP</ion-label>
+              <ion-label class="ion-text-wrap">{{ translate('SFTP') }}</ion-label>
+              <ion-label class="ion-text-wrap" slot="end">{{ configDetails[0]?.importPath }}</ion-label>
             </ion-item>
             <ion-item>
               <ion-icon slot="start" :icon="optionsOutline" />
-              <ion-label>Mode</ion-label>
-              <ion-label slot="end">Queued</ion-label>
+              <ion-label>{{ translate('Mode') }}</ion-label>
+              <ion-label slot="end">{{ configDetails[0]?.executionModeId ? configDetails[0]?.executionModeId : "-"}}</ion-label>
             </ion-item>
           </ion-list>
         </div>
       </div>
 
       <div class="ion-padding">
-        <ion-chip outline>
-          <ion-label>All</ion-label>
-          <ion-icon :icon="checkmarkOutline"/>
-        </ion-chip>
-        <ion-chip outline>
-          <ion-label>Failed log</ion-label>
-        </ion-chip>
-        <ion-chip outline>
-          <ion-label>Failed records</ion-label>
+        <ion-chip v-for="(chip, index) in chips" :key="index" outline @click="updateLogs(chip.label)">
+          <ion-label>{{ chip.label }}</ion-label>
+          <ion-icon v-if="chip.selected" :icon="checkmarkOutline" />
         </ion-chip>
       </div>
-
-      <div class="list-item">
-        <ion-item lines="none">
-          <ion-icon slot="start" :icon="documentTextOutline" />
+      
+      <div class="empty-state" v-if="isLoading">
+        <ion-spinner name="crescent" />
+      </div>
+      <div v-else-if="filteredLogs.length" >
+        <div class="list-item" v-for="(log, index) in filteredLogs" :key="index">
+          <ion-item lines="none">
+            <ion-icon slot="start" :icon="documentTextOutline" />
+            <ion-label>
+              <p class="overline">{{ log.logId }}</p>
+              {{ log.contentName }}
+              <p>{{ getDateTime(log.createdDate) }}</p>
+            </ion-label>
+          </ion-item>
+  
           <ion-label>
-            <p class="overline">Log id</p>
-            File Name
-            <p>07/09/2024 10:00 PM</p>
+            {{ getDateTime(log.startDateTime) }}
+            <p>{{ translate('Started') }}</p>
           </ion-label>
-        </ion-item>
-
-        <ion-label>
-          07/09/2024 10:00 PM
-          <p>Started</p>
-        </ion-label>
-
-        <ion-label>
-          07/09/2024 10:00 PM
-          <p>Finished</p>
-        </ion-label>
-        
-        <ion-badge color="success">Finished</ion-badge>
-
-        <ion-label>
-          <ion-icon slot="start" :icon="cloudDownloadOutline" />
-          <p>Failed records</p>
-        </ion-label>
-
-        <ion-button fill="clear" color="medium" @click="openDownloadLogsFilePopover($event)">
-          <ion-icon slot="icon-only" :icon="ellipsisVerticalOutline" />
-        </ion-button>
-      </div>
-
-      <div class="list-item">
-        <ion-item lines="none">
-          <ion-icon slot="start" :icon="documentTextOutline" />
+  
           <ion-label>
-            <p class="overline">Log id</p>
-            File Name
-            <p>07/09/2024 10:00 PM</p>
+            {{ getDateTime(log.finishDateTime) }}
+            <p>{{ translate('Finished') }}</p>
           </ion-label>
-        </ion-item>
-
-        <ion-label>
-          07/09/2024 10:00 PM
-          <p>Started</p>
-        </ion-label>
-
-        <ion-label>
-          07/09/2024 10:00 PM
-          <p>Finished</p>
-        </ion-label>
-        
-        <ion-badge color="danger">Failed</ion-badge>
-
-        <ion-label>
-          <ion-icon slot="start" :icon="cloudDownloadOutline" />
-          <p>Failed records</p>
-        </ion-label>
-
-        <ion-button fill="clear" color="medium" @click="openDownloadLogsFilePopover($event)">
-          <ion-icon slot="icon-only" :icon="ellipsisVerticalOutline" />
-        </ion-button>
+          
+          <ion-badge color="success" v-if="log.statusId === 'SERVICE_FINISHED'">{{ translate('Finished') }}</ion-badge>
+          <ion-badge color="danger" v-if="log.statusId === 'SERVICE_FAILED'">{{ translate('Failed') }}</ion-badge>
+          <ion-badge color="success" v-if="log.statusId === 'SERVICE_RUNNING' || log.statusId === 'SERVICE_QUEUED'">{{ translate('Running') }}</ion-badge>
+  
+          <ion-label v-if="log.errorRecordContentId">
+            <ion-icon slot="start" :icon="cloudDownloadOutline" />
+            <p>{{ translate('Failed records') }}</p>
+          </ion-label>
+          <div v-else></div>
+  
+          <ion-button fill="clear" color="medium" @click="openDownloadLogsFilePopover($event)">
+            <ion-icon slot="icon-only" :icon="ellipsisVerticalOutline" />
+          </ion-button>
+        </div>
+      </div>
+      <div v-else class="empty-state">
+        {{ translate('No logs found') }}
       </div>
     </ion-content>
   </ion-page>
@@ -145,10 +118,12 @@
 
 <script>
 import { checkmarkOutline, codeWorkingOutline, cloudDownloadOutline, documentTextOutline, ellipsisVerticalOutline, fileTrayFullOutline, globeOutline, optionsOutline, pulseOutline, shareSocialOutline, warningOutline } from "ionicons/icons";
-import { IonBackButton, IonBadge, IonButton, IonChip, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonPage, IonTitle, IonToolbar, popoverController } from "@ionic/vue";
+import { IonBackButton, IonBadge, IonButton, IonChip, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonPage, IonSpinner, IonTitle, IonToolbar, popoverController } from "@ionic/vue";
 import { defineComponent } from 'vue'
+import { mapGetters, useStore } from 'vuex'
 import { translate } from '@hotwax/dxp-components'
-import DownloadLogsFilePopover from "./DownloadLogsFilePopover.vue";
+import { DateTime } from 'luxon'
+import DownloadLogsFilePopover from "@/components/DownloadLogsFilePopover.vue";
 
 export default defineComponent ({
   name: "ImportLogsDetail",
@@ -164,10 +139,59 @@ export default defineComponent ({
     IonLabel,
     IonList,
     IonPage,
+    IonSpinner,
     IonTitle,
     IonToolbar,
   },
+  data() {
+    return {
+      configDetails: {},
+      chips: [
+        { label: 'All', selected: true },
+        { label: 'Failed logs', selected: false },
+        { label: 'Failed records', selected: false }
+      ],
+      filteredLogs: [],
+      isLoading: true,
+    }
+  },
+  computed: {
+    ...mapGetters({
+      currentJob: 'job/getCurrentJob',
+      getDataLogs: 'job/getDataLogs',
+      getJob: 'job/getJob',
+    }),
+  },
+  async mounted() {
+    await this.fetchJobs();
+    this.updateLogs('All');
+    const job = await this.getJob(this.$route.params.jobId)
+    this.filteredLogs = await this.store.dispatch('job/fetchDataManagerLogs', job.runtimeData?.configId)
+    this.configDetails = await this.store.dispatch('job/fetchDataManagerConfig', job.runtimeData?.configId)
+    this.isLoading = false;
+  },
   methods : {
+    updateLogs(label) {
+      if (label === 'All') {
+        this.filteredLogs = this.getDataLogs
+      } else if (label === 'Failed logs') {
+        this.filteredLogs = this.getDataLogs.filter(log => log.statusId === 'SERVICE_FAILED')
+      } else if (label === 'Failed records') {
+        this.filteredLogs = this.getDataLogs.filter(log => log.errorRecordContentId !== null)
+      }
+      this.chips.map((chip) => {
+        chip.selected = chip.label === label;
+      });
+    },
+    getDateTime(time) {
+      return DateTime.fromMillis(time).toLocaleString(DateTime.DATETIME_SHORT).replace(',', '')
+    },
+    getProcessedFileCount() {
+      return this.getDataLogs.filter((log) => log.statusId === "SERVICE_FINISHED").length
+    },
+    getErrorFileCount() {
+      return this.getDataLogs.filter((log) => log.errorRecordContentId !== null).length
+    },
     async openDownloadLogsFilePopover(event) {
       const popover = await popoverController.create({
         component: DownloadLogsFilePopover,
@@ -175,9 +199,16 @@ export default defineComponent ({
         event: event
       });
       return popover.present()
-    }
+    },
+    async fetchJobs(){
+      await this.store.dispatch("job/fetchJobs", {
+        "inputFields": this.$route.params.jobId
+      });
+    },
   },
   setup() {
+    const store = useStore();
+
     return {
       checkmarkOutline,
       codeWorkingOutline,
@@ -190,7 +221,8 @@ export default defineComponent ({
       pulseOutline,
       shareSocialOutline,
       warningOutline,
-      translate
+      translate,
+      store
     }
   }
 })
diff --git a/src/components/JobConfiguration.vue b/src/components/JobConfiguration.vue
index 34387aa0..5ba31743 100644
--- a/src/components/JobConfiguration.vue
+++ b/src/components/JobConfiguration.vue
@@ -113,27 +113,27 @@
     </ion-item>
   </div>
   <!-- Import logs -->
-  <section>
+  <section v-if="currentJob.runtimeData?.configId">
     <ion-item lines="none">
-      <h1>Import logs</h1>
-      <ion-button slot="end" fill="clear" @click="openImportLogsDetails()">View details</ion-button>
+      <h1>{{ translate('Import logs') }}</h1>
+      <ion-button slot="end" fill="clear" @click="openImportLogsDetails()">{{ translate('View details') }}</ion-button>
     </ion-item>
-    <ion-progress-bar></ion-progress-bar>
+    <ion-progress-bar :value="(getProcessedFileCount() + getErrorFileCount()) / getDataLogs.length * 0.1"></ion-progress-bar>
     <ion-list>
       <ion-item>
         <ion-icon slot="start" :icon="fileTrayFullOutline" />
-        <ion-label>Files received</ion-label>
-        <ion-label slot="end">14</ion-label>
+        <ion-label>{{ translate('Files received') }}</ion-label>
+        <ion-label slot="end">{{ getDataLogs.length }}</ion-label>
       </ion-item>
       <ion-item>
         <ion-icon slot="start" :icon="codeWorkingOutline" />
-        <ion-label>Files processed</ion-label>
-        <ion-label slot="end">14</ion-label>
+        <ion-label>{{ translate('Files processed') }}</ion-label>
+        <ion-label slot="end">{{ getProcessedFileCount() }}</ion-label>
       </ion-item>
       <ion-item lines="none">
         <ion-icon slot="start" :icon="warningOutline" />
-        <ion-label>Files with errors</ion-label>
-        <ion-label slot="end">14</ion-label>
+        <ion-label>{{ translate('Files with errors') }}</ion-label>
+        <ion-label slot="end">{{ getErrorFileCount() }}</ion-label>
       </ion-item>
     </ion-list>
   </section>
@@ -244,6 +244,7 @@ export default defineComponent({
       currentEComStore: 'user/getCurrentEComStore',
       currentJob: 'job/getCurrentJob',
       pendingJobs: 'job/getPendingJobs',
+      getDataLogs: 'job/getDataLogs',
     }),
     isRequiredParametersMissing() {
       return this.customRequiredParameters.some((parameter: any) => !parameter.value?.trim())
@@ -254,8 +255,16 @@ export default defineComponent({
     }
   },
   methods: {
+    getProcessedFileCount() {
+      if(this.getDataLogs && this.getDataLogs.length) {
+        return this.getDataLogs?.filter((log: any) => log.statusId === "SERVICE_FINISHED").length
+      }
+    },
+    getErrorFileCount() {
+      return this.getDataLogs?.filter((log: any) => log.errorRecordContentId !== null).length
+    },
     openImportLogsDetails() {
-      this.router.push({ name: 'ImportLogsDetail', replace: false });
+      this.router.push({ name: 'ImportLogsDetail', params: { jobId: this.currentJob.systemJobEnumId }, replace: true });
     },
     getDateTime(time: any) {
       return DateTime.fromMillis(time).toISO()
diff --git a/src/locales/en.json b/src/locales/en.json
index a0250ee1..f3fbb218 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -88,12 +88,16 @@
   "Every 6 hours": "Every 6 hours",
   "Every day": "Every day",
   "Failed": "Failed",
+  "Failed records": "Failed records",
   "Failed job reason": "Failed job reason",
   "Failed to schedule service(s)": "Failed to schedule {count} service(s)",
   "Fetching TimeZones": "Fetching TimeZones",
   "File upload status": "File upload status",
   "Filters": "Filters",
   "Finished": "Finished",
+  "Files received": "Files received",
+  "Files processed": "Files processed",
+  "Files with errors": "Files with errors",
   "Frequency": "Frequency",
   "Fulfilled": "Fulfilled",
   "Fulfillment": "Fulfillment",
@@ -120,6 +124,8 @@
   "Inventory": "Inventory",
   "Inventory cost": "Inventory cost",
   "Inventory level update": "Inventory level update",
+  "Import logs": "Import logs",
+  "Job": "Job",
   "Job details": "Job details",
   "Job runtime has passed. The job data has refreshed. Please try again.": "Job runtime has passed. The job data has refreshed. Please try again.",
   "Job runtime has passed. Please refresh to get the latest job data in order to perform any action.": "Job runtime has passed. Please refresh to get the latest job data in order to perform any action.",
@@ -129,6 +135,8 @@
   "Last Shopify Order ID": "Last Shopify Order ID",
   "Loading": "Loading",
   "Login": "Login",
+  "Log Id": "Log Id",
+  "Log file": "Log file",
   "Logging in": "Logging in",
   "Logging out": "Logging out",
   "Logout": "Logout",
@@ -137,6 +145,8 @@
   "More jobs": "More jobs",
   "More parameters": "More parameters",
   "More options": "More options",
+  "Mode": "Mode",
+  "Multithreading": "Multithreading",
   "Name": "Name",
   "New broker run": "New broker run",
   "New orders": "New orders",
@@ -144,6 +154,7 @@
   "No": "No",
   "no eCommerce selected": "no eCommerce selected",
   "No frequency found": "No frequency found",
+  "No logs found": "No logs found",
   "No jobs found": "No jobs found",
   "No jobs have run yet": "No jobs have run yet",
   "No parameters available": "No parameters available",
@@ -243,6 +254,7 @@
   "Service updated successfully": "Service updated successfully",
   "Services have been scheduled in bulk": "Services have been scheduled in bulk",
   "Settings": "Settings",
+  "SFTP": "SFTP",
   "Ship packed orders": "Ship packed orders",
   "Shipping": "Shipping",
   "Shop Config": "Shop Config",
@@ -302,11 +314,13 @@
   "Update promise date": "Update promise date",
   "Update shipping dates in Shopify": "Update shipping dates in Shopify",
   "Upload": "Upload",
+  "Uploaded file": "Uploaded file",
   "Upload Pending Process": "Upload Pending Process",
   "Use POs to manage catalog": "Use POs to manage catalog",
   "Username": "Username",
   "Version: ": "Version: {appVersion}",
   "View catalog": "View catalog",
+  "View details": "View details",
   "Webhook subscribed successfully": "Webhook subscribed successfully",
   "Webhook unsubscribed successfully": "Webhook unsubscribed successfully",
   "Webhooks": "Webhooks",
diff --git a/src/router/index.ts b/src/router/index.ts
index c03f78a7..eb5a9c43 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -65,9 +65,10 @@ const routes: Array<RouteRecordRaw> = [
     }
   },
   {
-    path: '/import-logs-detail',
+    path: '/import-logs-detail/:jobId',
     name: 'ImportLogsDetail',
     component: ImportLogsDetail,
+    beforeEnter: authGuard,
   },
   {
     path: '/inventory',
diff --git a/src/services/JobService.ts b/src/services/JobService.ts
index dbc2577d..50a2d926 100644
--- a/src/services/JobService.ts
+++ b/src/services/JobService.ts
@@ -64,6 +64,23 @@ const cancelJob = async (payload: any): Promise <any> => {
     data: payload
   });
 }
+
+const fetchDataManagerLogs = async (payload: any): Promise <any> => {
+  return api ({
+    url: "performFind",
+    method: "get",
+    params: payload
+  })
+}
+
+const fetchDataManagerConfig = async (payload: any): Promise <any> => {
+  return api ({
+    url: "performFind",
+    method: "get",
+    params: payload
+  })
+}
+
 const fetchJobPreviousOccurrence = async (payload: any): Promise <any>  => {
   try {
     const params = {
@@ -118,5 +135,7 @@ export const JobService = {
   scheduleJob,
   updateAutoCancelDays,
   getAutoCancelDays,
-  cancelJob
+  cancelJob,
+  fetchDataManagerLogs,
+  fetchDataManagerConfig
 }
\ No newline at end of file
diff --git a/src/store/modules/job/JobState.ts b/src/store/modules/job/JobState.ts
index 7e1f5c3e..a1f8ecc5 100644
--- a/src/store/modules/job/JobState.ts
+++ b/src/store/modules/job/JobState.ts
@@ -33,4 +33,5 @@ export default interface JobState {
       runtime: any,
       frequency: any,
     },
+    logs: any
 }
\ No newline at end of file
diff --git a/src/store/modules/job/actions.ts b/src/store/modules/job/actions.ts
index c63bc496..f5285121 100644
--- a/src/store/modules/job/actions.ts
+++ b/src/store/modules/job/actions.ts
@@ -260,6 +260,68 @@ const actions: ActionTree<JobState, RootState> = {
       showToast(translate("Something went wrong"));
     })
   },
+
+  async fetchDataManagerLogs ({ commit }, params) {
+    let logs;
+    const payload = {
+      "inputFields":  {
+        "statusId": ["SERVICE_CANCELLED", "SERVICE_CRASHED", "SERVICE_FAILED", "SERVICE_FINISHED", "SERVICE_PENDING", "SERVICE_RUNNING", "SERVICE_QUEUED"],
+        "statusId_op": "in",
+        "systemJobEnumId_op": "not-empty",
+        "configId": params
+      } as any,
+      "fieldList": ["statusId", "logId", "createdDate", "startDateTime", "finishDateTime", "errorRecordContentId", "contentName"],
+      "noConditionFind": "Y",
+      "viewSize": 10,
+      "viewIndex": 0,
+      "entityName": "DataManagerLogAndContent",
+    }
+
+    await JobService.fetchDataManagerLogs(payload).then((resp: any) => {
+      if (resp.status === 200 && resp.data.docs?.length > 0 && !hasError(resp)) {
+        if (resp.data.docs) {
+          logs = resp.data.docs
+          commit(types.JOB_DATA_MANAGER_LOGS, { logs });
+        } else {
+          commit(types.JOB_DATA_MANAGER_LOGS, []);
+        }
+      }
+    }).catch((err) => {
+      commit(types.JOB_DATA_MANAGER_LOGS, []);
+      logger.error(err);
+      showToast(translate("Something went wrong"));
+    })
+    return logs;
+  },
+  
+  async fetchDataManagerConfig({ commit }, params) {
+    let resp;
+    const payload = {
+      "inputFields":  {
+        "configId": params
+      } as any,
+      "fieldList": ["importPath", "multiThreading", "description", "executionModeId"],
+      "noConditionFind": "Y",
+      "viewSize": 1,
+      "viewIndex": 0,
+      "entityName": "DataManagerConfig",
+    }
+    
+    try {
+      resp = await JobService.fetchDataManagerConfig(payload);
+      if (resp.status === 200 && resp.data.docs?.length > 0 && !hasError(resp)) {
+        if (resp.data.docs) {
+          return resp.data.docs;
+        } else {
+          throw resp.data
+        }
+      }
+    } catch (err) {
+      logger.error(err);
+    }
+    return resp;
+  },
+
   async fetchMiscellaneousJobs({ commit, dispatch, state }, payload){
     const fetchJobRequests = [];
     const params = {
diff --git a/src/store/modules/job/getters.ts b/src/store/modules/job/getters.ts
index 1656ba35..04fb06f6 100644
--- a/src/store/modules/job/getters.ts
+++ b/src/store/modules/job/getters.ts
@@ -85,6 +85,9 @@ const getters: GetterTree <JobState, RootState> = {
     getGlobalFreq: (state) => {
       return state.bulk.frequency;
     },
+    getDataLogs: (state) => {
+      return state.logs
+    }
   }
 
   export default getters;
\ No newline at end of file
diff --git a/src/store/modules/job/index.ts b/src/store/modules/job/index.ts
index 71a6ccb4..04a1e5ac 100644
--- a/src/store/modules/job/index.ts
+++ b/src/store/modules/job/index.ts
@@ -42,6 +42,7 @@ const jobModule: Module<JobState, RootState> = {
         runtime: '',
         frequency: '',
       },
+      logs: []
     },
     getters,
     actions,
diff --git a/src/store/modules/job/mutation-types.ts b/src/store/modules/job/mutation-types.ts
index 9a020e3e..4115e9c6 100644
--- a/src/store/modules/job/mutation-types.ts
+++ b/src/store/modules/job/mutation-types.ts
@@ -13,4 +13,5 @@ export const JOB_PIPELINE_FILTERS_CLEARED = SN_JOB + '/PIPELINE_FILTERS_CLEARED'
 export const JOB_BULK_UPDATED = SN_JOB + '/BULK_UPDATED'
 export const JOB_BULK_FREQUENCY_UPDATED = SN_JOB + '/BULK_FREQUENCY_UPDATED'
 export const JOB_BULK_RUNTIME_UPDATED = SN_JOB + '/BULK_DATA_UPDATED'
-export const JOB_BULK_CLEARED = SN_JOB + '/BULK_CLEARED'
\ No newline at end of file
+export const JOB_BULK_CLEARED = SN_JOB + '/BULK_CLEARED'
+export const JOB_DATA_MANAGER_LOGS = SN_JOB + '/DATA_MANAGER_LOGS'
\ No newline at end of file
diff --git a/src/store/modules/job/mutations.ts b/src/store/modules/job/mutations.ts
index 4b54d3da..e73d61ef 100644
--- a/src/store/modules/job/mutations.ts
+++ b/src/store/modules/job/mutations.ts
@@ -64,6 +64,9 @@ const mutations: MutationTree <JobState> = {
             runtime: '',
             frequency: ''
         }
+    },
+    [types.JOB_DATA_MANAGER_LOGS] (state, payload) {
+        state.logs = payload.logs
     }
 }
 export default mutations;
\ No newline at end of file
diff --git a/src/views/Pipeline.vue b/src/views/Pipeline.vue
index 2e8164fd..8dc2f2d6 100644
--- a/src/views/Pipeline.vue
+++ b/src/views/Pipeline.vue
@@ -608,6 +608,9 @@ export default defineComponent({
       this.freqType = appFreqType ? appFreqType[1] : "default"
 
       await this.store.dispatch('job/updateCurrentJob', { job });
+      if (job.runtimeData?.configId) {
+        await this.store.dispatch('job/fetchDataManagerLogs', job.runtimeData?.configId)
+      }
       if(!this.isDesktop && job?.jobId) {
         this.router.push({ name: 'JobDetails', params: { jobId: job?.jobId, category: "pipeline" } });
         return;

From edd8a3978f381c17edd3c8197b4aa75b8ae75282 Mon Sep 17 00:00:00 2001
From: R-Sourabh <rsourabh002@gmail.com>
Date: Fri, 20 Sep 2024 20:25:15 +0530
Subject: [PATCH 04/14] Update JobConfiguration.vue

---
 src/components/JobConfiguration.vue | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/src/components/JobConfiguration.vue b/src/components/JobConfiguration.vue
index 5ba31743..913f2d8a 100644
--- a/src/components/JobConfiguration.vue
+++ b/src/components/JobConfiguration.vue
@@ -256,9 +256,7 @@ export default defineComponent({
   },
   methods: {
     getProcessedFileCount() {
-      if(this.getDataLogs && this.getDataLogs.length) {
-        return this.getDataLogs?.filter((log: any) => log.statusId === "SERVICE_FINISHED").length
-      }
+      return this.getDataLogs?.filter((log: any) => log.statusId === "SERVICE_FINISHED").length
     },
     getErrorFileCount() {
       return this.getDataLogs?.filter((log: any) => log.errorRecordContentId !== null).length

From f3b879bbceca25f53a93e5ad42461c04694045f0 Mon Sep 17 00:00:00 2001
From: R-Sourabh <rsourabh002@gmail.com>
Date: Wed, 25 Sep 2024 20:20:04 +0530
Subject: [PATCH 05/14] Implemented: Enable downloading different types of log
 files(#680)

---
 src/components/DownloadLogsFilePopover.vue | 50 +++++++++++-
 src/components/ImportLogsDetail.vue        | 93 ++++++++++++----------
 src/components/JobConfiguration.vue        | 12 +--
 src/services/JobService.ts                 | 20 ++++-
 src/store/modules/job/JobState.ts          |  5 +-
 src/store/modules/job/actions.ts           | 72 ++++++++++++-----
 src/store/modules/job/getters.ts           |  5 +-
 src/store/modules/job/index.ts             |  5 +-
 src/store/modules/job/mutation-types.ts    |  3 +-
 src/store/modules/job/mutations.ts         |  7 +-
 src/utils/index.ts                         | 18 ++++-
 11 files changed, 209 insertions(+), 81 deletions(-)

diff --git a/src/components/DownloadLogsFilePopover.vue b/src/components/DownloadLogsFilePopover.vue
index 5a9c5eed..27f2f66c 100644
--- a/src/components/DownloadLogsFilePopover.vue
+++ b/src/components/DownloadLogsFilePopover.vue
@@ -2,13 +2,13 @@
   <ion-content>
     <ion-list>
       <ion-list-header>{{ translate('Log Id') }}</ion-list-header>
-      <ion-item button>
+      <ion-item button @click="downloadLogFile('logFile')">
         {{ translate('Log file') }}
       </ion-item>
-      <ion-item button>
+      <ion-item button :lines="log?.errorRecordContentId ? undefined : 'none'" @click="downloadLogFile('uploadedFle')">
         {{ translate('Uploaded file') }}
       </ion-item>
-      <ion-item button lines="none">
+      <ion-item v-if="log?.errorRecordContentId" button lines="none" @click="downloadLogFile('failedRecords')">
         {{ translate('Failed records') }}
       </ion-item>    
     </ion-list>
@@ -21,9 +21,14 @@ import {
   IonItem,
   IonList,
   IonListHeader,
+  popoverController
 } from "@ionic/vue";
+import { mapGetters } from 'vuex';
 import { defineComponent } from "vue";
 import { translate } from "@hotwax/dxp-components";
+import { JobService } from "@/services/JobService";
+import { responseFileType, showToast } from '@/utils';
+import logger from "@/logger";
 
 export default defineComponent({
   name: "DownloadLogsFilePopover",
@@ -33,8 +38,45 @@ export default defineComponent({
     IonList,
     IonListHeader
   },
-  setup() {
+  computed: {
+    ...mapGetters({
+      getDataResourceId: 'job/getDataResourceIds',
+    }),
+  },  
+  props: ["log"],
+  methods: {
+    async downloadLogFile(type: any) {
+      let contentIdType;
+      let dataResource = {} as any;
+
+      if (type === 'logFile') {
+        contentIdType = 'logFileContentId';
+      } else if (type === 'failedRecords') {
+        contentIdType = 'errorRecordContentId';
+      } else if (type === 'uploadedFle') {
+        dataResource.dataResourceId = this.log.dataResourceId;
+        dataResource.name = this.log.contentName
+      } 
+
+      if (contentIdType) {
+        dataResource = this.getDataResourceId(this.log[contentIdType]);
+      }
 
+      if (dataResource) {
+        try {
+          const response = await JobService.downloadCsv({
+            dataResourceId: dataResource.dataResourceId
+          });
+          responseFileType(response.data, dataResource.name);
+        } catch (error) {
+          showToast(translate('Error downloading file'))
+          logger.error(error)
+        }
+      }
+      popoverController.dismiss();
+    }
+  },
+  setup() {
     return {
       translate
     }
diff --git a/src/components/ImportLogsDetail.vue b/src/components/ImportLogsDetail.vue
index e8786c83..fd7fd609 100644
--- a/src/components/ImportLogsDetail.vue
+++ b/src/components/ImportLogsDetail.vue
@@ -9,7 +9,7 @@
 
     <ion-content>
       <div class="header">
-        <div class="search ion-padding">
+        <div class="ion-padding">
           <section>
             <ion-item lines="none">
               <h1>{{ translate('Import logs') }}</h1>
@@ -17,47 +17,47 @@
             <ion-list>
               <ion-item>
                 <ion-icon slot="start" :icon="pulseOutline" />
-                <ion-label>{{ translate('Job') }}</ion-label>
+                {{ translate('Job') }}
                 <ion-label slot="end" class="ion-text-wrap">{{ currentJob.jobId }}</ion-label>
               </ion-item>
               <ion-item>
                 <ion-icon slot="start" :icon="fileTrayFullOutline" />
-                <ion-label>{{ translate('Files received') }}</ion-label>
+                {{ translate('Files received') }}
                 <ion-label slot="end">{{ getDataLogs.length }}</ion-label>
               </ion-item>
               <ion-item>
                 <ion-icon slot="start" :icon="codeWorkingOutline" />
-                <ion-label>{{ translate('Files processed') }}</ion-label>
+                {{ translate('Files processed') }}
                 <ion-label slot="end">{{ getProcessedFileCount() }}</ion-label>
               </ion-item>
               <ion-item lines="none">
                 <ion-icon slot="start" :icon="warningOutline" />
-                <ion-label>{{ translate('Files with errors') }}</ion-label>
+                {{ translate('Files with errors') }}
                 <ion-label slot="end">{{ getErrorFileCount() }}</ion-label>
               </ion-item>
             </ion-list>
           </section>
         </div>
-        <div class="filters ion-padding">
+        <div class="config ion-padding">
           <ion-label lines="none">
             <p class="overline">{{ currentJob.runtimeData?.configId }}</p>
-            <h1>{{ configDetails[0]?.description }}</h1>
+            <h1>{{ configDetails?.description }}</h1>
           </ion-label>
           <ion-list>
             <ion-item>
               <ion-icon slot="start" :icon="shareSocialOutline" />
-              <ion-label>{{ translate('Multithreading') }}</ion-label>
+              {{ translate('Multithreading') }}
               <ion-label slot="end">{{ currentJob.runtimeData?.groupBy ? currentJob.runtimeData?.groupBy : "-" }}</ion-label>
             </ion-item>
             <ion-item>
               <ion-icon slot="start" :icon="globeOutline" />
-              <ion-label class="ion-text-wrap">{{ translate('SFTP') }}</ion-label>
-              <ion-label class="ion-text-wrap" slot="end">{{ configDetails[0]?.importPath }}</ion-label>
+              {{ translate('SFTP') }}
+              <ion-label class="ion-text-wrap" slot="end">{{ configDetails?.importPath }}</ion-label>
             </ion-item>
             <ion-item>
               <ion-icon slot="start" :icon="optionsOutline" />
-              <ion-label>{{ translate('Mode') }}</ion-label>
-              <ion-label slot="end">{{ configDetails[0]?.executionModeId ? configDetails[0]?.executionModeId : "-"}}</ion-label>
+              {{ translate('Mode') }}
+              <ion-label slot="end">{{ configDetails?.executionModeId ? configDetails?.executionModeId : "-"}}</ion-label>
             </ion-item>
           </ion-list>
         </div>
@@ -66,14 +66,14 @@
       <div class="ion-padding">
         <ion-chip v-for="(chip, index) in chips" :key="index" outline @click="updateLogs(chip.label)">
           <ion-label>{{ chip.label }}</ion-label>
-          <ion-icon v-if="chip.selected" :icon="checkmarkOutline" />
+          <ion-icon v-if="selectedChip === chip.label" :icon="checkmarkOutline" />
         </ion-chip>
       </div>
       
       <div class="empty-state" v-if="isLoading">
         <ion-spinner name="crescent" />
       </div>
-      <div v-else-if="filteredLogs.length" >
+      <div v-else-if="filteredLogs?.length" >
         <div class="list-item" v-for="(log, index) in filteredLogs" :key="index">
           <ion-item lines="none">
             <ion-icon slot="start" :icon="documentTextOutline" />
@@ -97,14 +97,16 @@
           <ion-badge color="success" v-if="log.statusId === 'SERVICE_FINISHED'">{{ translate('Finished') }}</ion-badge>
           <ion-badge color="danger" v-if="log.statusId === 'SERVICE_FAILED'">{{ translate('Failed') }}</ion-badge>
           <ion-badge color="success" v-if="log.statusId === 'SERVICE_RUNNING' || log.statusId === 'SERVICE_QUEUED'">{{ translate('Running') }}</ion-badge>
-  
-          <ion-label v-if="log.errorRecordContentId">
+          
+          <div class="ion-text-center" lines="none" v-if="log.errorRecordContentId" button @click="downloadCsv(log?.errorRecordContentId)">
             <ion-icon slot="start" :icon="cloudDownloadOutline" />
-            <p>{{ translate('Failed records') }}</p>
-          </ion-label>
+            <ion-label>
+              <p>{{ translate('Failed records') }}</p>
+            </ion-label>
+          </div>
           <div v-else></div>
   
-          <ion-button fill="clear" color="medium" @click="openDownloadLogsFilePopover($event)">
+          <ion-button fill="clear" color="medium" @click="openDownloadLogsFilePopover(log, $event)">
             <ion-icon slot="icon-only" :icon="ellipsisVerticalOutline" />
           </ion-button>
         </div>
@@ -121,9 +123,12 @@ import { checkmarkOutline, codeWorkingOutline, cloudDownloadOutline, documentTex
 import { IonBackButton, IonBadge, IonButton, IonChip, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonPage, IonSpinner, IonTitle, IonToolbar, popoverController } from "@ionic/vue";
 import { defineComponent } from 'vue'
 import { mapGetters, useStore } from 'vuex'
+import { responseFileType } from '@/utils';
 import { translate } from '@hotwax/dxp-components'
 import { DateTime } from 'luxon'
 import DownloadLogsFilePopover from "@/components/DownloadLogsFilePopover.vue";
+import { JobService } from "@/services/JobService";
+import logger from '@/logger';
 
 export default defineComponent ({
   name: "ImportLogsDetail",
@@ -146,10 +151,11 @@ export default defineComponent ({
   data() {
     return {
       configDetails: {},
+      selectedChip: 'All',
       chips: [
-        { label: 'All', selected: true },
-        { label: 'Failed logs', selected: false },
-        { label: 'Failed records', selected: false }
+        { label: 'All' },
+        { label: 'Failed logs' },
+        { label: 'Failed records' }
       ],
       filteredLogs: [],
       isLoading: true,
@@ -160,18 +166,21 @@ export default defineComponent ({
       currentJob: 'job/getCurrentJob',
       getDataLogs: 'job/getDataLogs',
       getJob: 'job/getJob',
+      getDataResourceId: 'job/getDataResourceIds'
     }),
   },
   async mounted() {
     await this.fetchJobs();
-    this.updateLogs('All');
     const job = await this.getJob(this.$route.params.jobId)
+    await this.store.dispatch('job/updateCurrentJob', { job });
     this.filteredLogs = await this.store.dispatch('job/fetchDataManagerLogs', job.runtimeData?.configId)
     this.configDetails = await this.store.dispatch('job/fetchDataManagerConfig', job.runtimeData?.configId)
+    this.updateLogs('All');
     this.isLoading = false;
   },
   methods : {
     updateLogs(label) {
+      this.selectedChip = label
       if (label === 'All') {
         this.filteredLogs = this.getDataLogs
       } else if (label === 'Failed logs') {
@@ -179,12 +188,9 @@ export default defineComponent ({
       } else if (label === 'Failed records') {
         this.filteredLogs = this.getDataLogs.filter(log => log.errorRecordContentId !== null)
       }
-      this.chips.map((chip) => {
-        chip.selected = chip.label === label;
-      });
     },
     getDateTime(time) {
-      return DateTime.fromMillis(time).toLocaleString(DateTime.DATETIME_SHORT).replace(',', '')
+      return DateTime.fromMillis(time).toFormat("dd/MM/yyyy H:mm a")
     },
     getProcessedFileCount() {
       return this.getDataLogs.filter((log) => log.statusId === "SERVICE_FINISHED").length
@@ -192,11 +198,12 @@ export default defineComponent ({
     getErrorFileCount() {
       return this.getDataLogs.filter((log) => log.errorRecordContentId !== null).length
     },
-    async openDownloadLogsFilePopover(event) {
+    async openDownloadLogsFilePopover(log, event) {
       const popover = await popoverController.create({
         component: DownloadLogsFilePopover,
         showBackdrop: false,
-        event: event
+        event: event,
+        componentProps: { log }
       });
       return popover.present()
     },
@@ -205,6 +212,19 @@ export default defineComponent ({
         "inputFields": this.$route.params.jobId
       });
     },
+    async downloadCsv(id) {
+      try {
+        const dataResource = this.getDataResourceId(id);
+        if (dataResource) {
+          const response = await JobService.downloadCsv({
+            dataResourceId: dataResource.dataResourceId
+          });
+          responseFileType(response.data, dataResource.name);
+        }
+      } catch (error) {
+        logger.error(error);
+      }
+    }
   },
   setup() {
     const store = useStore();
@@ -246,25 +266,16 @@ section {
 
 .header {
   display: grid;
-  grid: "search filters"
-        /1fr 1fr;
-}
-
-.search {
-  grid-area: search;
+  grid-template-columns: repeat(2, 1fr);
 }
 
-.filters {
-  grid-area: filters;
+.config {
   align-self: end;
 }
 
 @media (max-width: 991px) {
   .header {
-    grid: "search"
-          "filters"
-          / auto;
-    padding: 0;
+    grid-template-columns: 1fr;
   }
 }
 </style> 
\ No newline at end of file
diff --git a/src/components/JobConfiguration.vue b/src/components/JobConfiguration.vue
index 913f2d8a..292d4b9a 100644
--- a/src/components/JobConfiguration.vue
+++ b/src/components/JobConfiguration.vue
@@ -113,26 +113,26 @@
     </ion-item>
   </div>
   <!-- Import logs -->
-  <section v-if="currentJob.runtimeData?.configId">
+  <section v-if="currentJob.runtimeData?.configId && getDataLogs?.length">
     <ion-item lines="none">
       <h1>{{ translate('Import logs') }}</h1>
       <ion-button slot="end" fill="clear" @click="openImportLogsDetails()">{{ translate('View details') }}</ion-button>
     </ion-item>
-    <ion-progress-bar :value="(getProcessedFileCount() + getErrorFileCount()) / getDataLogs.length * 0.1"></ion-progress-bar>
+    <ion-progress-bar :value="(getProcessedFileCount() - getErrorFileCount()) / getDataLogs.length"></ion-progress-bar>
     <ion-list>
       <ion-item>
         <ion-icon slot="start" :icon="fileTrayFullOutline" />
-        <ion-label>{{ translate('Files received') }}</ion-label>
+        {{ translate('Files received') }}
         <ion-label slot="end">{{ getDataLogs.length }}</ion-label>
       </ion-item>
       <ion-item>
         <ion-icon slot="start" :icon="codeWorkingOutline" />
-        <ion-label>{{ translate('Files processed') }}</ion-label>
+        {{ translate('Files processed') }}
         <ion-label slot="end">{{ getProcessedFileCount() }}</ion-label>
       </ion-item>
       <ion-item lines="none">
         <ion-icon slot="start" :icon="warningOutline" />
-        <ion-label>{{ translate('Files with errors') }}</ion-label>
+        {{ translate('Files with errors') }}
         <ion-label slot="end">{{ getErrorFileCount() }}</ion-label>
       </ion-item>
     </ion-list>
@@ -262,7 +262,7 @@ export default defineComponent({
       return this.getDataLogs?.filter((log: any) => log.errorRecordContentId !== null).length
     },
     openImportLogsDetails() {
-      this.router.push({ name: 'ImportLogsDetail', params: { jobId: this.currentJob.systemJobEnumId }, replace: true });
+      this.router.replace({ path: `/import-logs-detail/${this.currentJob.systemJobEnumId}` })
     },
     getDateTime(time: any) {
       return DateTime.fromMillis(time).toISO()
diff --git a/src/services/JobService.ts b/src/services/JobService.ts
index 50a2d926..2fdd4821 100644
--- a/src/services/JobService.ts
+++ b/src/services/JobService.ts
@@ -73,6 +73,14 @@ const fetchDataManagerLogs = async (payload: any): Promise <any> => {
   })
 }
 
+const fetchDataResource = async (payload: any): Promise <any> => {
+  return api ({
+    url: "performFind",
+    method: "get",
+    params: payload
+  })
+}
+
 const fetchDataManagerConfig = async (payload: any): Promise <any> => {
   return api ({
     url: "performFind",
@@ -81,6 +89,14 @@ const fetchDataManagerConfig = async (payload: any): Promise <any> => {
   })
 }
 
+const downloadCsv = async (payload: any): Promise <any> => {
+  return api ({
+    url: "DownloadCsvFile",
+    method: "get",
+    params: payload
+  })
+}
+
 const fetchJobPreviousOccurrence = async (payload: any): Promise <any>  => {
   try {
     const params = {
@@ -137,5 +153,7 @@ export const JobService = {
   getAutoCancelDays,
   cancelJob,
   fetchDataManagerLogs,
-  fetchDataManagerConfig
+  fetchDataResource,
+  fetchDataManagerConfig,
+  downloadCsv
 }
\ No newline at end of file
diff --git a/src/store/modules/job/JobState.ts b/src/store/modules/job/JobState.ts
index a1f8ecc5..5ebae996 100644
--- a/src/store/modules/job/JobState.ts
+++ b/src/store/modules/job/JobState.ts
@@ -33,5 +33,8 @@ export default interface JobState {
       runtime: any,
       frequency: any,
     },
-    logs: any
+    logs: {
+      list: any,
+      contentDataResource: any
+    }
 }
\ No newline at end of file
diff --git a/src/store/modules/job/actions.ts b/src/store/modules/job/actions.ts
index f5285121..10aaf7e9 100644
--- a/src/store/modules/job/actions.ts
+++ b/src/store/modules/job/actions.ts
@@ -261,60 +261,88 @@ const actions: ActionTree<JobState, RootState> = {
     })
   },
 
-  async fetchDataManagerLogs ({ commit }, params) {
-    let logs;
+  async fetchDataManagerLogs ({ commit, dispatch }, params) {
+    commit(types.JOB_DATA_MANAGER_LOGS_UPDATED, []);
+    let logs = [] as any
     const payload = {
       "inputFields":  {
         "statusId": ["SERVICE_CANCELLED", "SERVICE_CRASHED", "SERVICE_FAILED", "SERVICE_FINISHED", "SERVICE_PENDING", "SERVICE_RUNNING", "SERVICE_QUEUED"],
         "statusId_op": "in",
         "systemJobEnumId_op": "not-empty",
         "configId": params
-      } as any,
-      "fieldList": ["statusId", "logId", "createdDate", "startDateTime", "finishDateTime", "errorRecordContentId", "contentName"],
+      },
+      "fieldList": ["statusId", "logId", "createdDate", "startDateTime", "finishDateTime", "logFileContentId", "errorRecordContentId", "contentName", "dataResourceId"],
       "noConditionFind": "Y",
-      "viewSize": 10,
-      "viewIndex": 0,
+      "viewSize": 250,
       "entityName": "DataManagerLogAndContent",
     }
 
     await JobService.fetchDataManagerLogs(payload).then((resp: any) => {
       if (resp.status === 200 && resp.data.docs?.length > 0 && !hasError(resp)) {
-        if (resp.data.docs) {
-          logs = resp.data.docs
-          commit(types.JOB_DATA_MANAGER_LOGS, { logs });
-        } else {
-          commit(types.JOB_DATA_MANAGER_LOGS, []);
-        }
+        logs = resp.data.docs
+        dispatch('fetchDataResource', logs)
+      } else {
+        throw resp.data
       }
     }).catch((err) => {
-      commit(types.JOB_DATA_MANAGER_LOGS, []);
       logger.error(err);
-      showToast(translate("Something went wrong"));
     })
+    commit(types.JOB_DATA_MANAGER_LOGS_UPDATED, logs);
     return logs;
   },
+
+  async fetchDataResource({ commit }, logs) {
+    let dataResourceIds = {};
+    // Extract logFileContentId and errorRecordContentId from logs
+    const contentIds = [].concat(...logs.map((log: any) => [log.logFileContentId, log.errorRecordContentId].filter(id => id)));
+  
+    const payload = {
+      "inputFields": {
+        "coContentId": contentIds
+      },
+      "fieldList": ["coContentId", "coDataResourceId", "coContentName"], 
+      "noConditionFind": "Y",
+      "viewSize": 250,
+      "entityName": "DataResourceContentView"
+    }
+  
+    await JobService.fetchDataResource(payload).then((resp: any) => {
+      if (resp.status === 200 && resp.data.docs?.length > 0 && !hasError(resp)) {
+        dataResourceIds = contentIds.reduce((acc: any, id: string) => {
+          const contentId = resp.data.docs.find((doc: any) => doc.coContentId === id);
+          if (contentId) {
+            acc[id] = {
+              dataResourceId: contentId.coDataResourceId,
+              name: contentId.coContentName
+            };
+          }
+          return acc;
+        }, {});
+      }
+    }).catch((err: any) => {
+      logger.error(err);
+    })
+    commit(types.JOB_DATA_RESOURCE_IDS_UPDATED, dataResourceIds);
+  },
   
   async fetchDataManagerConfig({ commit }, params) {
-    let resp;
+    let resp = {} as any
     const payload = {
       "inputFields":  {
         "configId": params
-      } as any,
+      },
       "fieldList": ["importPath", "multiThreading", "description", "executionModeId"],
       "noConditionFind": "Y",
       "viewSize": 1,
-      "viewIndex": 0,
       "entityName": "DataManagerConfig",
     }
     
     try {
       resp = await JobService.fetchDataManagerConfig(payload);
       if (resp.status === 200 && resp.data.docs?.length > 0 && !hasError(resp)) {
-        if (resp.data.docs) {
-          return resp.data.docs;
-        } else {
-          throw resp.data
-        }
+        return resp.data.docs[0];
+      } else {
+        throw resp.data
       }
     } catch (err) {
       logger.error(err);
diff --git a/src/store/modules/job/getters.ts b/src/store/modules/job/getters.ts
index 04fb06f6..0115466d 100644
--- a/src/store/modules/job/getters.ts
+++ b/src/store/modules/job/getters.ts
@@ -86,7 +86,10 @@ const getters: GetterTree <JobState, RootState> = {
       return state.bulk.frequency;
     },
     getDataLogs: (state) => {
-      return state.logs
+      return state.logs.list
+    },
+    getDataResourceIds: (state) => (contentId: string) => {
+      return state.logs.contentDataResource[contentId];
     }
   }
 
diff --git a/src/store/modules/job/index.ts b/src/store/modules/job/index.ts
index 04a1e5ac..690e891a 100644
--- a/src/store/modules/job/index.ts
+++ b/src/store/modules/job/index.ts
@@ -42,7 +42,10 @@ const jobModule: Module<JobState, RootState> = {
         runtime: '',
         frequency: '',
       },
-      logs: []
+      logs: {
+        list: [],
+        contentDataResource: []
+      }
     },
     getters,
     actions,
diff --git a/src/store/modules/job/mutation-types.ts b/src/store/modules/job/mutation-types.ts
index 4115e9c6..f6d7120e 100644
--- a/src/store/modules/job/mutation-types.ts
+++ b/src/store/modules/job/mutation-types.ts
@@ -14,4 +14,5 @@ export const JOB_BULK_UPDATED = SN_JOB + '/BULK_UPDATED'
 export const JOB_BULK_FREQUENCY_UPDATED = SN_JOB + '/BULK_FREQUENCY_UPDATED'
 export const JOB_BULK_RUNTIME_UPDATED = SN_JOB + '/BULK_DATA_UPDATED'
 export const JOB_BULK_CLEARED = SN_JOB + '/BULK_CLEARED'
-export const JOB_DATA_MANAGER_LOGS = SN_JOB + '/DATA_MANAGER_LOGS'
\ No newline at end of file
+export const JOB_DATA_MANAGER_LOGS_UPDATED = SN_JOB + '/DATA_MANAGER_LOGS_UPDATED'
+export const JOB_DATA_RESOURCE_IDS_UPDATED = SN_JOB + '/DATA_RESOURCE_IDS_UPDATED'
\ No newline at end of file
diff --git a/src/store/modules/job/mutations.ts b/src/store/modules/job/mutations.ts
index e73d61ef..fceda164 100644
--- a/src/store/modules/job/mutations.ts
+++ b/src/store/modules/job/mutations.ts
@@ -65,8 +65,11 @@ const mutations: MutationTree <JobState> = {
             frequency: ''
         }
     },
-    [types.JOB_DATA_MANAGER_LOGS] (state, payload) {
-        state.logs = payload.logs
+    [types.JOB_DATA_MANAGER_LOGS_UPDATED] (state, payload) {
+        state.logs.list = payload
+    },
+    [types.JOB_DATA_RESOURCE_IDS_UPDATED] (state, payload) {
+        state.logs.contentDataResource = payload
     }
 }
 export default mutations;
\ No newline at end of file
diff --git a/src/utils/index.ts b/src/utils/index.ts
index ed6bbccd..0f9b7965 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -341,6 +341,21 @@ const copyToClipboard = async (value: string, text?: string) => {
   });
 }
 
+const responseFileType = (response: any, fileName: string) => {
+  let data;
+  
+  if (typeof response === 'object') {
+    data = JSON.stringify(response)
+  } else {
+    data = response
+  }
+  saveFile(data, fileName);
+}
+
+const saveFile = async (data: any, fileName: string) => {
+  const blob = new Blob([data], {type: "text/plain;charset=utf-8"})
+  saveAs(blob, fileName);
+}
 
 export {
   copyToClipboard,
@@ -358,5 +373,6 @@ export {
   jsonToCsv,
   JsonToCsvOption,
   isFutureDate,
-  prepareRuntime
+  prepareRuntime,
+  responseFileType
 }

From a6863d9252504566e55c7dd053b0d044d16091a4 Mon Sep 17 00:00:00 2001
From: R-Sourabh <rsourabh002@gmail.com>
Date: Tue, 1 Oct 2024 15:54:58 +0530
Subject: [PATCH 06/14] Improved: resolved comments , change state & getter
 name, added locale text refactor job actions(#680)

---
 src/components/DownloadLogsFilePopover.vue |  39 +++-----
 src/components/ImportLogsDetail.vue        | 103 +++++++++++++--------
 src/components/JobConfiguration.vue        |  12 +--
 src/locales/en.json                        |   3 +
 src/services/JobService.ts                 |   4 +-
 src/store/modules/job/JobState.ts          |   5 +-
 src/store/modules/job/actions.ts           |  58 ++++--------
 src/store/modules/job/getters.ts           |   7 +-
 src/store/modules/job/index.ts             |   5 +-
 src/store/modules/job/mutation-types.ts    |   3 +-
 src/store/modules/job/mutations.ts         |   5 +-
 src/utils/index.ts                         |   9 +-
 12 files changed, 113 insertions(+), 140 deletions(-)

diff --git a/src/components/DownloadLogsFilePopover.vue b/src/components/DownloadLogsFilePopover.vue
index 27f2f66c..88026a13 100644
--- a/src/components/DownloadLogsFilePopover.vue
+++ b/src/components/DownloadLogsFilePopover.vue
@@ -1,16 +1,16 @@
 <template>
   <ion-content>
     <ion-list>
-      <ion-list-header>{{ translate('Log Id') }}</ion-list-header>
+      <ion-list-header>{{ dataManagerLog.logId }}</ion-list-header>
       <ion-item button @click="downloadLogFile('logFile')">
         {{ translate('Log file') }}
       </ion-item>
-      <ion-item button :lines="log?.errorRecordContentId ? undefined : 'none'" @click="downloadLogFile('uploadedFle')">
+      <ion-item button @click="downloadLogFile('uploadedFile')">
         {{ translate('Uploaded file') }}
       </ion-item>
-      <ion-item v-if="log?.errorRecordContentId" button lines="none" @click="downloadLogFile('failedRecords')">
+      <ion-item button :disabled="!dataManagerLog?.errorRecordContentId" lines="none" @click="downloadLogFile('failedRecords')">
         {{ translate('Failed records') }}
-      </ion-item>    
+      </ion-item>
     </ion-list>
   </ion-content>
 </template>
@@ -23,11 +23,10 @@ import {
   IonListHeader,
   popoverController
 } from "@ionic/vue";
-import { mapGetters } from 'vuex';
 import { defineComponent } from "vue";
 import { translate } from "@hotwax/dxp-components";
 import { JobService } from "@/services/JobService";
-import { responseFileType, showToast } from '@/utils';
+import { saveDataFile, showToast } from '@/utils';
 import logger from "@/logger";
 
 export default defineComponent({
@@ -38,36 +37,28 @@ export default defineComponent({
     IonList,
     IonListHeader
   },
-  computed: {
-    ...mapGetters({
-      getDataResourceId: 'job/getDataResourceIds',
-    }),
-  },  
-  props: ["log"],
+  props: ["dataManagerLog"],
   methods: {
     async downloadLogFile(type: any) {
-      let contentIdType;
       let dataResource = {} as any;
 
       if (type === 'logFile') {
-        contentIdType = 'logFileContentId';
+        dataResource.dataResourceId = this.dataManagerLog.logFileDataResourceId
+        dataResource.name = this.dataManagerLog.logFileContentName
+      } else if (type === 'uploadedFile') {
+        dataResource.name = this.dataManagerLog.contentName
+        dataResource.dataResourceId = this.dataManagerLog.dataResourceId
       } else if (type === 'failedRecords') {
-        contentIdType = 'errorRecordContentId';
-      } else if (type === 'uploadedFle') {
-        dataResource.dataResourceId = this.log.dataResourceId;
-        dataResource.name = this.log.contentName
-      } 
-
-      if (contentIdType) {
-        dataResource = this.getDataResourceId(this.log[contentIdType]);
+        dataResource.dataResourceId = this.dataManagerLog.errorRecordDataResourceId
+        dataResource.name = this.dataManagerLog.errorRecordContentName
       }
 
       if (dataResource) {
         try {
-          const response = await JobService.downloadCsv({
+          const response = await JobService.fetchFileData({
             dataResourceId: dataResource.dataResourceId
           });
-          responseFileType(response.data, dataResource.name);
+          saveDataFile(response.data, dataResource.name);
         } catch (error) {
           showToast(translate('Error downloading file'))
           logger.error(error)
diff --git a/src/components/ImportLogsDetail.vue b/src/components/ImportLogsDetail.vue
index fd7fd609..f8518bca 100644
--- a/src/components/ImportLogsDetail.vue
+++ b/src/components/ImportLogsDetail.vue
@@ -23,7 +23,7 @@
               <ion-item>
                 <ion-icon slot="start" :icon="fileTrayFullOutline" />
                 {{ translate('Files received') }}
-                <ion-label slot="end">{{ getDataLogs.length }}</ion-label>
+                <ion-label slot="end">{{ getDataManagerLogs.length }}</ion-label>
               </ion-item>
               <ion-item>
                 <ion-icon slot="start" :icon="codeWorkingOutline" />
@@ -64,17 +64,17 @@
       </div>
 
       <div class="ion-padding">
-        <ion-chip v-for="(chip, index) in chips" :key="index" outline @click="updateLogs(chip.label)">
-          <ion-label>{{ chip.label }}</ion-label>
-          <ion-icon v-if="selectedChip === chip.label" :icon="checkmarkOutline" />
+        <ion-chip v-for="filter in dataManagerLogFilters" :key="filter.id" outline @click="filterDataManagerLogs(filter.id)">
+          <ion-label>{{ filter.label }}</ion-label>
+          <ion-icon v-if="selectedFilter === filter.id" :icon="checkmarkOutline" />
         </ion-chip>
       </div>
       
       <div class="empty-state" v-if="isLoading">
         <ion-spinner name="crescent" />
       </div>
-      <div v-else-if="filteredLogs?.length" >
-        <div class="list-item" v-for="(log, index) in filteredLogs" :key="index">
+      <div v-else-if="dataManagerLogList?.length" >
+        <div class="list-item" v-for="(log, index) in dataManagerLogList" :key="index">
           <ion-item lines="none">
             <ion-icon slot="start" :icon="documentTextOutline" />
             <ion-label>
@@ -93,12 +93,10 @@
             {{ getDateTime(log.finishDateTime) }}
             <p>{{ translate('Finished') }}</p>
           </ion-label>
+
+          <ion-badge v-if="log.statusId" :color="log.statusId === 'SERVICE_FAILED' ? 'danger' : 'success'">{{ translate(getStatusDesc(log.statusId)) }}</ion-badge>
           
-          <ion-badge color="success" v-if="log.statusId === 'SERVICE_FINISHED'">{{ translate('Finished') }}</ion-badge>
-          <ion-badge color="danger" v-if="log.statusId === 'SERVICE_FAILED'">{{ translate('Failed') }}</ion-badge>
-          <ion-badge color="success" v-if="log.statusId === 'SERVICE_RUNNING' || log.statusId === 'SERVICE_QUEUED'">{{ translate('Running') }}</ion-badge>
-          
-          <div class="ion-text-center" lines="none" v-if="log.errorRecordContentId" button @click="downloadCsv(log?.errorRecordContentId)">
+          <div class="ion-text-center" lines="none" v-if="log.errorRecordContentId" button @click="downloadErrorRecordFile(log)">
             <ion-icon slot="start" :icon="cloudDownloadOutline" />
             <ion-label>
               <p>{{ translate('Failed records') }}</p>
@@ -123,7 +121,7 @@ import { checkmarkOutline, codeWorkingOutline, cloudDownloadOutline, documentTex
 import { IonBackButton, IonBadge, IonButton, IonChip, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonList, IonPage, IonSpinner, IonTitle, IonToolbar, popoverController } from "@ionic/vue";
 import { defineComponent } from 'vue'
 import { mapGetters, useStore } from 'vuex'
-import { responseFileType } from '@/utils';
+import { saveDataFile, hasError } from '@/utils';
 import { translate } from '@hotwax/dxp-components'
 import { DateTime } from 'luxon'
 import DownloadLogsFilePopover from "@/components/DownloadLogsFilePopover.vue";
@@ -151,59 +149,60 @@ export default defineComponent ({
   data() {
     return {
       configDetails: {},
-      selectedChip: 'All',
-      chips: [
-        { label: 'All' },
-        { label: 'Failed logs' },
-        { label: 'Failed records' }
+      selectedFilter: 'All',
+      dataManagerLogFilters: [
+        { id: 'ALL', label: 'All' },
+        { id: 'FAILED_LOGS', label: 'Failed logs' },
+        { id: 'FAILED_RECORDS', label: 'Failed records' }
       ],
-      filteredLogs: [],
+      dataManagerLogList: [],
       isLoading: true,
     }
   },
   computed: {
     ...mapGetters({
       currentJob: 'job/getCurrentJob',
-      getDataLogs: 'job/getDataLogs',
+      getDataManagerLogs: 'job/getDataManagerLogs',
       getJob: 'job/getJob',
-      getDataResourceId: 'job/getDataResourceIds'
+      getStatusDesc: 'util/getStatusDesc',
     }),
   },
   async mounted() {
     await this.fetchJobs();
     const job = await this.getJob(this.$route.params.jobId)
     await this.store.dispatch('job/updateCurrentJob', { job });
-    this.filteredLogs = await this.store.dispatch('job/fetchDataManagerLogs', job.runtimeData?.configId)
-    this.configDetails = await this.store.dispatch('job/fetchDataManagerConfig', job.runtimeData?.configId)
-    this.updateLogs('All');
+    await this.fetchDataManagerConfig(job.runtimeData?.configId)
+    await this.store.dispatch('job/fetchDataManagerLogs', job.runtimeData?.configId)
+    await this.store.dispatch('job/fetchDataResource', this.getDataManagerLogs)
+    this.filterDataManagerLogs('ALL');
     this.isLoading = false;
   },
   methods : {
-    updateLogs(label) {
-      this.selectedChip = label
-      if (label === 'All') {
-        this.filteredLogs = this.getDataLogs
-      } else if (label === 'Failed logs') {
-        this.filteredLogs = this.getDataLogs.filter(log => log.statusId === 'SERVICE_FAILED')
-      } else if (label === 'Failed records') {
-        this.filteredLogs = this.getDataLogs.filter(log => log.errorRecordContentId !== null)
+    filterDataManagerLogs(id) {
+      this.selectedFilter = id
+      if (id === 'ALL') {
+        this.dataManagerLogList = this.getDataManagerLogs
+      } else if (id === 'FAILED_LOGS') {
+        this.dataManagerLogList = this.getDataManagerLogs.filter(log => log.statusId === 'SERVICE_FAILED')
+      } else if (id === 'FAILED_RECORDS') {
+        this.dataManagerLogList = this.getDataManagerLogs.filter(log => log.errorRecordContentId !== null)
       }
     },
     getDateTime(time) {
       return DateTime.fromMillis(time).toFormat("dd/MM/yyyy H:mm a")
     },
     getProcessedFileCount() {
-      return this.getDataLogs.filter((log) => log.statusId === "SERVICE_FINISHED").length
+      return this.getDataManagerLogs.filter((log) => log.statusId === "SERVICE_FINISHED").length
     },
     getErrorFileCount() {
-      return this.getDataLogs.filter((log) => log.errorRecordContentId !== null).length
+      return this.getDataManagerLogs.filter((log) => log.errorRecordContentId !== null).length
     },
-    async openDownloadLogsFilePopover(log, event) {
+    async openDownloadLogsFilePopover(dataManagerLog, event) {
       const popover = await popoverController.create({
         component: DownloadLogsFilePopover,
         showBackdrop: false,
         event: event,
-        componentProps: { log }
+        componentProps: { dataManagerLog }
       });
       return popover.present()
     },
@@ -212,14 +211,36 @@ export default defineComponent ({
         "inputFields": this.$route.params.jobId
       });
     },
-    async downloadCsv(id) {
+    async fetchDataManagerConfig(configId) {
+      let resp = {}
+      const payload = {
+        "inputFields":  {
+          "configId": configId
+        },
+        "fieldList": ["importPath", "multiThreading", "description", "executionModeId"],
+        "noConditionFind": "Y",
+        "viewSize": 1,
+        "entityName": "DataManagerConfig",
+      }
+      
+      try {
+        resp = await JobService.fetchDataManagerConfig(payload);
+        if (resp.status === 200 && resp.data.docs?.length > 0 && !hasError(resp)) {
+          this.configDetails = resp.data.docs[0];
+        } else {
+          throw resp.data
+        }
+      } catch (err) {
+        logger.error(err);
+      }
+    },
+    async downloadErrorRecordFile(dataManagerLog) {
       try {
-        const dataResource = this.getDataResourceId(id);
-        if (dataResource) {
-          const response = await JobService.downloadCsv({
-            dataResourceId: dataResource.dataResourceId
+        if (dataManagerLog?.errorRecordDataResourceId) {
+          const response = await JobService.fetchFileData({
+            dataResourceId: dataManagerLog.errorRecordDataResourceId
           });
-          responseFileType(response.data, dataResource.name);
+          saveDataFile(response.data, dataManagerLog?.errorRecordContentName);
         }
       } catch (error) {
         logger.error(error);
diff --git a/src/components/JobConfiguration.vue b/src/components/JobConfiguration.vue
index 292d4b9a..5e39c2fd 100644
--- a/src/components/JobConfiguration.vue
+++ b/src/components/JobConfiguration.vue
@@ -113,17 +113,17 @@
     </ion-item>
   </div>
   <!-- Import logs -->
-  <section v-if="currentJob.runtimeData?.configId && getDataLogs?.length">
+  <section v-if="currentJob.runtimeData?.configId && getDataManagerLogs?.length">
     <ion-item lines="none">
       <h1>{{ translate('Import logs') }}</h1>
       <ion-button slot="end" fill="clear" @click="openImportLogsDetails()">{{ translate('View details') }}</ion-button>
     </ion-item>
-    <ion-progress-bar :value="(getProcessedFileCount() - getErrorFileCount()) / getDataLogs.length"></ion-progress-bar>
+    <ion-progress-bar :value="(getProcessedFileCount() - getErrorFileCount()) / getDataManagerLogs.length"></ion-progress-bar>
     <ion-list>
       <ion-item>
         <ion-icon slot="start" :icon="fileTrayFullOutline" />
         {{ translate('Files received') }}
-        <ion-label slot="end">{{ getDataLogs.length }}</ion-label>
+        <ion-label slot="end">{{ getDataManagerLogs.length }}</ion-label>
       </ion-item>
       <ion-item>
         <ion-icon slot="start" :icon="codeWorkingOutline" />
@@ -244,7 +244,7 @@ export default defineComponent({
       currentEComStore: 'user/getCurrentEComStore',
       currentJob: 'job/getCurrentJob',
       pendingJobs: 'job/getPendingJobs',
-      getDataLogs: 'job/getDataLogs',
+      getDataManagerLogs: 'job/getDataManagerLogs',
     }),
     isRequiredParametersMissing() {
       return this.customRequiredParameters.some((parameter: any) => !parameter.value?.trim())
@@ -256,10 +256,10 @@ export default defineComponent({
   },
   methods: {
     getProcessedFileCount() {
-      return this.getDataLogs?.filter((log: any) => log.statusId === "SERVICE_FINISHED").length
+      return this.getDataManagerLogs?.filter((log: any) => log.statusId === "SERVICE_FINISHED").length
     },
     getErrorFileCount() {
-      return this.getDataLogs?.filter((log: any) => log.errorRecordContentId !== null).length
+      return this.getDataManagerLogs?.filter((log: any) => log.errorRecordContentId !== null).length
     },
     openImportLogsDetails() {
       this.router.replace({ path: `/import-logs-detail/${this.currentJob.systemJobEnumId}` })
diff --git a/src/locales/en.json b/src/locales/en.json
index f3fbb218..a2975e89 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -65,6 +65,7 @@
   "Custom": "Custom",
   "Custom frequency": "Custom frequency",
   "Custom Parameters": "Custom Parameters",
+  "Crashed": "Crashed",
   "Create batches and schedule brokering for different orders.": "Create batches and schedule brokering for different orders.",
   "Create or update order fulfillment history records from FTP.": "Create or update order fulfillment history records from FTP.",
   "Create new brokering job": "Create new brokering job",
@@ -78,6 +79,7 @@
   "Dismiss": "Dismiss",
   "Don't cancel": "Don't cancel",
   "Don't skip": "Don't skip",
+  "Draft": "Draft",
   "eCom Store": "eCom Store",
   "eCommerce": "eCommerce",
   "eCommerce stores are directly connected to one Shop Config. If your OMS is connected to multiple eCommerce stores selling the same catalog operating as one Company, you may have multiple Shop Configs for the selected Product Store.": "eCommerce stores are directly connected to one Shop Config. If your OMS is connected to multiple eCommerce stores selling the same catalog operating as one Company, you may have multiple Shop Configs for the selected Product Store.",
@@ -198,6 +200,7 @@
   "Promise date change": "Promise date change",
   "Promise date changes": "Promise date changes",
   "Provide a future date and time": "Provide a future date and time",
+  "Queued": "Queued",
   "Ready to create an app?": "Ready to create an app?",
   "Realtime adjustments": "Realtime adjustments",
   "Realtime POS sales": "Realtime POS sales",
diff --git a/src/services/JobService.ts b/src/services/JobService.ts
index 2fdd4821..4eb37197 100644
--- a/src/services/JobService.ts
+++ b/src/services/JobService.ts
@@ -89,7 +89,7 @@ const fetchDataManagerConfig = async (payload: any): Promise <any> => {
   })
 }
 
-const downloadCsv = async (payload: any): Promise <any> => {
+const fetchFileData = async (payload: any): Promise <any> => {
   return api ({
     url: "DownloadCsvFile",
     method: "get",
@@ -155,5 +155,5 @@ export const JobService = {
   fetchDataManagerLogs,
   fetchDataResource,
   fetchDataManagerConfig,
-  downloadCsv
+  fetchFileData
 }
\ No newline at end of file
diff --git a/src/store/modules/job/JobState.ts b/src/store/modules/job/JobState.ts
index 5ebae996..92e34579 100644
--- a/src/store/modules/job/JobState.ts
+++ b/src/store/modules/job/JobState.ts
@@ -33,8 +33,5 @@ export default interface JobState {
       runtime: any,
       frequency: any,
     },
-    logs: {
-      list: any,
-      contentDataResource: any
-    }
+    dataManagerLogs: any
 }
\ No newline at end of file
diff --git a/src/store/modules/job/actions.ts b/src/store/modules/job/actions.ts
index 10aaf7e9..e222156d 100644
--- a/src/store/modules/job/actions.ts
+++ b/src/store/modules/job/actions.ts
@@ -261,15 +261,14 @@ const actions: ActionTree<JobState, RootState> = {
     })
   },
 
-  async fetchDataManagerLogs ({ commit, dispatch }, params) {
+  async fetchDataManagerLogs({ commit, dispatch }, configId) {
     commit(types.JOB_DATA_MANAGER_LOGS_UPDATED, []);
     let logs = [] as any
     const payload = {
       "inputFields":  {
         "statusId": ["SERVICE_CANCELLED", "SERVICE_CRASHED", "SERVICE_FAILED", "SERVICE_FINISHED", "SERVICE_PENDING", "SERVICE_RUNNING", "SERVICE_QUEUED"],
-        "statusId_op": "in",
         "systemJobEnumId_op": "not-empty",
-        "configId": params
+        "configId": configId
       },
       "fieldList": ["statusId", "logId", "createdDate", "startDateTime", "finishDateTime", "logFileContentId", "errorRecordContentId", "contentName", "dataResourceId"],
       "noConditionFind": "Y",
@@ -280,7 +279,6 @@ const actions: ActionTree<JobState, RootState> = {
     await JobService.fetchDataManagerLogs(payload).then((resp: any) => {
       if (resp.status === 200 && resp.data.docs?.length > 0 && !hasError(resp)) {
         logs = resp.data.docs
-        dispatch('fetchDataResource', logs)
       } else {
         throw resp.data
       }
@@ -291,8 +289,7 @@ const actions: ActionTree<JobState, RootState> = {
     return logs;
   },
 
-  async fetchDataResource({ commit }, logs) {
-    let dataResourceIds = {};
+  async fetchDataResource({ commit, state }, logs) {
     // Extract logFileContentId and errorRecordContentId from logs
     const contentIds = [].concat(...logs.map((log: any) => [log.logFileContentId, log.errorRecordContentId].filter(id => id)));
   
@@ -308,48 +305,25 @@ const actions: ActionTree<JobState, RootState> = {
   
     await JobService.fetchDataResource(payload).then((resp: any) => {
       if (resp.status === 200 && resp.data.docs?.length > 0 && !hasError(resp)) {
-        dataResourceIds = contentIds.reduce((acc: any, id: string) => {
-          const contentId = resp.data.docs.find((doc: any) => doc.coContentId === id);
-          if (contentId) {
-            acc[id] = {
-              dataResourceId: contentId.coDataResourceId,
-              name: contentId.coContentName
-            };
+        logs.forEach((log: any) => {
+          const logFileDataResource = resp.data.docs.find((doc: any) => doc.coContentId === log.logFileContentId);
+          if (logFileDataResource) {
+            log.logFileDataResourceId = logFileDataResource.coDataResourceId;
+            log.logFileContentName = logFileDataResource.coContentName;
+          }
+  
+          const errorRecordDataResource = resp.data.docs.find((doc: any) => doc.coContentId === log.errorRecordContentId);
+          if (errorRecordDataResource) {
+            log.errorRecordDataResourceId = errorRecordDataResource.coDataResourceId;
+            log.errorRecordContentName = errorRecordDataResource.coContentName;
           }
-          return acc;
-        }, {});
+        });
       }
     }).catch((err: any) => {
       logger.error(err);
     })
-    commit(types.JOB_DATA_RESOURCE_IDS_UPDATED, dataResourceIds);
-  },
-  
-  async fetchDataManagerConfig({ commit }, params) {
-    let resp = {} as any
-    const payload = {
-      "inputFields":  {
-        "configId": params
-      },
-      "fieldList": ["importPath", "multiThreading", "description", "executionModeId"],
-      "noConditionFind": "Y",
-      "viewSize": 1,
-      "entityName": "DataManagerConfig",
-    }
-    
-    try {
-      resp = await JobService.fetchDataManagerConfig(payload);
-      if (resp.status === 200 && resp.data.docs?.length > 0 && !hasError(resp)) {
-        return resp.data.docs[0];
-      } else {
-        throw resp.data
-      }
-    } catch (err) {
-      logger.error(err);
-    }
-    return resp;
+    commit(types.JOB_DATA_MANAGER_LOGS_UPDATED, logs);
   },
-
   async fetchMiscellaneousJobs({ commit, dispatch, state }, payload){
     const fetchJobRequests = [];
     const params = {
diff --git a/src/store/modules/job/getters.ts b/src/store/modules/job/getters.ts
index 0115466d..9ff94838 100644
--- a/src/store/modules/job/getters.ts
+++ b/src/store/modules/job/getters.ts
@@ -85,11 +85,8 @@ const getters: GetterTree <JobState, RootState> = {
     getGlobalFreq: (state) => {
       return state.bulk.frequency;
     },
-    getDataLogs: (state) => {
-      return state.logs.list
-    },
-    getDataResourceIds: (state) => (contentId: string) => {
-      return state.logs.contentDataResource[contentId];
+    getDataManagerLogs: (state) => {
+      return state.dataManagerLogs
     }
   }
 
diff --git a/src/store/modules/job/index.ts b/src/store/modules/job/index.ts
index 690e891a..6849eed6 100644
--- a/src/store/modules/job/index.ts
+++ b/src/store/modules/job/index.ts
@@ -42,10 +42,7 @@ const jobModule: Module<JobState, RootState> = {
         runtime: '',
         frequency: '',
       },
-      logs: {
-        list: [],
-        contentDataResource: []
-      }
+      dataManagerLogs: []
     },
     getters,
     actions,
diff --git a/src/store/modules/job/mutation-types.ts b/src/store/modules/job/mutation-types.ts
index f6d7120e..87498883 100644
--- a/src/store/modules/job/mutation-types.ts
+++ b/src/store/modules/job/mutation-types.ts
@@ -14,5 +14,4 @@ export const JOB_BULK_UPDATED = SN_JOB + '/BULK_UPDATED'
 export const JOB_BULK_FREQUENCY_UPDATED = SN_JOB + '/BULK_FREQUENCY_UPDATED'
 export const JOB_BULK_RUNTIME_UPDATED = SN_JOB + '/BULK_DATA_UPDATED'
 export const JOB_BULK_CLEARED = SN_JOB + '/BULK_CLEARED'
-export const JOB_DATA_MANAGER_LOGS_UPDATED = SN_JOB + '/DATA_MANAGER_LOGS_UPDATED'
-export const JOB_DATA_RESOURCE_IDS_UPDATED = SN_JOB + '/DATA_RESOURCE_IDS_UPDATED'
\ No newline at end of file
+export const JOB_DATA_MANAGER_LOGS_UPDATED = SN_JOB + '/DATA_MANAGER_LOGS_UPDATED'
\ No newline at end of file
diff --git a/src/store/modules/job/mutations.ts b/src/store/modules/job/mutations.ts
index fceda164..77963a05 100644
--- a/src/store/modules/job/mutations.ts
+++ b/src/store/modules/job/mutations.ts
@@ -66,10 +66,7 @@ const mutations: MutationTree <JobState> = {
         }
     },
     [types.JOB_DATA_MANAGER_LOGS_UPDATED] (state, payload) {
-        state.logs.list = payload
+        state.dataManagerLogs = payload
     },
-    [types.JOB_DATA_RESOURCE_IDS_UPDATED] (state, payload) {
-        state.logs.contentDataResource = payload
-    }
 }
 export default mutations;
\ No newline at end of file
diff --git a/src/utils/index.ts b/src/utils/index.ts
index 0f9b7965..313e99ca 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -341,18 +341,15 @@ const copyToClipboard = async (value: string, text?: string) => {
   });
 }
 
-const responseFileType = (response: any, fileName: string) => {
+const saveDataFile = async (response: any, fileName: string) => {
   let data;
-  
+
   if (typeof response === 'object') {
     data = JSON.stringify(response)
   } else {
     data = response
   }
-  saveFile(data, fileName);
-}
 
-const saveFile = async (data: any, fileName: string) => {
   const blob = new Blob([data], {type: "text/plain;charset=utf-8"})
   saveAs(blob, fileName);
 }
@@ -374,5 +371,5 @@ export {
   JsonToCsvOption,
   isFutureDate,
   prepareRuntime,
-  responseFileType
+  saveDataFile
 }

From 37a38e4e188da9aafad9a2057132b124a117a8c0 Mon Sep 17 00:00:00 2001
From: R-Sourabh <rsourabh002@gmail.com>
Date: Thu, 3 Oct 2024 11:54:41 +0530
Subject: [PATCH 07/14] Improved: changed component name, udpate
 fetchDataManagerLogs payload and made changes in the css(#680)

---
 ...gsDetail.vue => DataManagerLogDetails.vue} | 63 +++++++++----------
 src/router/index.ts                           |  6 +-
 src/store/modules/job/actions.ts              |  5 +-
 3 files changed, 36 insertions(+), 38 deletions(-)
 rename src/components/{ImportLogsDetail.vue => DataManagerLogDetails.vue} (87%)

diff --git a/src/components/ImportLogsDetail.vue b/src/components/DataManagerLogDetails.vue
similarity index 87%
rename from src/components/ImportLogsDetail.vue
rename to src/components/DataManagerLogDetails.vue
index f8518bca..ff372e81 100644
--- a/src/components/ImportLogsDetail.vue
+++ b/src/components/DataManagerLogDetails.vue
@@ -8,37 +8,35 @@
     </ion-header>
 
     <ion-content>
-      <div class="header">
-        <div class="ion-padding">
-          <section>
+      <div class="header ion-padding">
+        <section>
+          <ion-item lines="none">
+            <h1>{{ translate('Import logs') }}</h1>
+          </ion-item>
+          <ion-list>
+            <ion-item>
+              <ion-icon slot="start" :icon="pulseOutline" />
+              {{ translate('Job') }}
+              <ion-label slot="end" class="ion-text-wrap">{{ currentJob.jobId }}</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-icon slot="start" :icon="fileTrayFullOutline" />
+              {{ translate('Files received') }}
+              <ion-label slot="end">{{ getDataManagerLogs.length }}</ion-label>
+            </ion-item>
+            <ion-item>
+              <ion-icon slot="start" :icon="codeWorkingOutline" />
+              {{ translate('Files processed') }}
+              <ion-label slot="end">{{ getProcessedFileCount() }}</ion-label>
+            </ion-item>
             <ion-item lines="none">
-              <h1>{{ translate('Import logs') }}</h1>
+              <ion-icon slot="start" :icon="warningOutline" />
+              {{ translate('Files with errors') }}
+              <ion-label slot="end">{{ getErrorFileCount() }}</ion-label>
             </ion-item>
-            <ion-list>
-              <ion-item>
-                <ion-icon slot="start" :icon="pulseOutline" />
-                {{ translate('Job') }}
-                <ion-label slot="end" class="ion-text-wrap">{{ currentJob.jobId }}</ion-label>
-              </ion-item>
-              <ion-item>
-                <ion-icon slot="start" :icon="fileTrayFullOutline" />
-                {{ translate('Files received') }}
-                <ion-label slot="end">{{ getDataManagerLogs.length }}</ion-label>
-              </ion-item>
-              <ion-item>
-                <ion-icon slot="start" :icon="codeWorkingOutline" />
-                {{ translate('Files processed') }}
-                <ion-label slot="end">{{ getProcessedFileCount() }}</ion-label>
-              </ion-item>
-              <ion-item lines="none">
-                <ion-icon slot="start" :icon="warningOutline" />
-                {{ translate('Files with errors') }}
-                <ion-label slot="end">{{ getErrorFileCount() }}</ion-label>
-              </ion-item>
-            </ion-list>
-          </section>
-        </div>
-        <div class="config ion-padding">
+          </ion-list>
+        </section>
+        <div class="config-details">
           <ion-label lines="none">
             <p class="overline">{{ currentJob.runtimeData?.configId }}</p>
             <h1>{{ configDetails?.description }}</h1>
@@ -129,7 +127,7 @@ import { JobService } from "@/services/JobService";
 import logger from '@/logger';
 
 export default defineComponent ({
-  name: "ImportLogsDetail",
+  name: "DataManagerLogDetails",
   components: {
     IonBackButton,
     IonBadge,
@@ -270,7 +268,7 @@ export default defineComponent ({
 </script>
 
 <style scoped>
-section {
+.header > section {
   overflow: hidden;
   border: var(--border-medium);
   border-radius: 16px;
@@ -288,9 +286,10 @@ section {
 .header {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
+  grid-gap: var(--spacer-sm);
 }
 
-.config {
+.config-details {
   align-self: end;
 }
 
diff --git a/src/router/index.ts b/src/router/index.ts
index eb5a9c43..422003b5 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -13,7 +13,7 @@ import Miscellaneous from '@/views/Miscellaneous.vue'
 import Reports from '@/views/Reports.vue'
 import BulkEditor from '@/views/BulkEditor.vue'
 import Settings from "@/views/Settings.vue"
-import ImportLogsDetail from "@/components/ImportLogsDetail.vue"
+import DataManagerLogDetails from "@/components/DataManagerLogDetails.vue"
 import store from '@/store'
 import { hasPermission } from '@/authorization';
 import { showToast } from '@/utils'
@@ -66,8 +66,8 @@ const routes: Array<RouteRecordRaw> = [
   },
   {
     path: '/import-logs-detail/:jobId',
-    name: 'ImportLogsDetail',
-    component: ImportLogsDetail,
+    name: 'DataManagerLogDetails',
+    component: DataManagerLogDetails,
     beforeEnter: authGuard,
   },
   {
diff --git a/src/store/modules/job/actions.ts b/src/store/modules/job/actions.ts
index e222156d..01ee8a81 100644
--- a/src/store/modules/job/actions.ts
+++ b/src/store/modules/job/actions.ts
@@ -261,12 +261,11 @@ const actions: ActionTree<JobState, RootState> = {
     })
   },
 
-  async fetchDataManagerLogs({ commit, dispatch }, configId) {
+  async fetchDataManagerLogs({ commit }, configId) {
     commit(types.JOB_DATA_MANAGER_LOGS_UPDATED, []);
     let logs = [] as any
     const payload = {
       "inputFields":  {
-        "statusId": ["SERVICE_CANCELLED", "SERVICE_CRASHED", "SERVICE_FAILED", "SERVICE_FINISHED", "SERVICE_PENDING", "SERVICE_RUNNING", "SERVICE_QUEUED"],
         "systemJobEnumId_op": "not-empty",
         "configId": configId
       },
@@ -289,7 +288,7 @@ const actions: ActionTree<JobState, RootState> = {
     return logs;
   },
 
-  async fetchDataResource({ commit, state }, logs) {
+  async fetchDataResource({ commit }, logs) {
     // Extract logFileContentId and errorRecordContentId from logs
     const contentIds = [].concat(...logs.map((log: any) => [log.logFileContentId, log.errorRecordContentId].filter(id => id)));
   

From 80bf970c4acff366dd6ba610353301d1da570068 Mon Sep 17 00:00:00 2001
From: R-Sourabh <rsourabh002@gmail.com>
Date: Wed, 23 Oct 2024 15:39:28 +0530
Subject: [PATCH 08/14] Improved: Used jobId instead of jobSystemEnumId, and
 fetching data logs using jobId instead of configId (#680).

---
 src/components/JobConfiguration.vue           | 84 +++++++++++--------
 src/router/index.ts                           |  3 +-
 src/store/modules/job/actions.ts              |  4 +-
 .../DataManagerLogDetails.vue                 |  5 +-
 src/views/Pipeline.vue                        |  8 +-
 5 files changed, 60 insertions(+), 44 deletions(-)
 rename src/{components => views}/DataManagerLogDetails.vue (98%)

diff --git a/src/components/JobConfiguration.vue b/src/components/JobConfiguration.vue
index 5e39c2fd..5543b0c6 100644
--- a/src/components/JobConfiguration.vue
+++ b/src/components/JobConfiguration.vue
@@ -19,33 +19,45 @@
 
       <ion-item>
         <ion-icon slot="start" :icon="timeOutline" />
-        <ion-select interface="popover" :placeholder="translate('Select')" :value="runTime" @ionChange="updateRunTime($event)">
-          <div slot="label" class="ion-text-wrap">{{ translate("Run time") }}</div>
-          <ion-select-option v-for="runTime in runTimes" :key="runTime.value" :value="runTime.value">{{ translate(runTime.label) }}</ion-select-option>
-        </ion-select>
-        <!-- TODO: display a button when we are not having a runtime and open the datetime component
-        on click of that button
-        Currently, when mapping the same datetime component for label and button so it's not working so for
-        now commented the button and added a fallback string -->
-        <!-- <ion-button id="open-run-time-modal" size="small" fill="outline" color="medium" v-show="!currentJob?.runTime">{{ translate("Select run time") }}</ion-button> -->
-        <ion-modal class="date-time-modal" :is-open="isDateTimeModalOpen" @didDismiss="() => isDateTimeModalOpen = false">
-          <ion-content force-overscroll="false">
-            <ion-datetime          
-              show-default-buttons
-              hour-cycle="h23"
-              :value="runTime ? (isCustomRunTime(runTime) ? getDateTime(runTime) : getDateTime(DateTime.now().toMillis() + runTime)) : getNowTimestamp()"
-              @ionChange="updateCustomTime($event)"
-            />
-          </ion-content>
-        </ion-modal>
+        <template v-if="historyJobConfig">
+          <ion-label class="ion-text-wrap">{{ translate("Run time") }}</ion-label>
+          <ion-label slot="end">{{ currentJob.runTime ? getTime(currentJob.runTime) : '' }}</ion-label>
+        </template>
+        <template v-else>
+          <ion-select interface="popover" :placeholder="translate('Select')" :value="runTime" @ionChange="updateRunTime($event)">
+            <div slot="label" class="ion-text-wrap">{{ translate("Run time") }}</div>
+            <ion-select-option v-for="runTime in runTimes" :key="runTime.value" :value="runTime.value">{{ translate(runTime.label) }}</ion-select-option>
+          </ion-select>
+          <!-- TODO: display a button when we are not having a runtime and open the datetime component
+          on click of that button
+          Currently, when mapping the same datetime component for label and button so it's not working so for
+          now commented the button and added a fallback string -->
+          <!-- <ion-button id="open-run-time-modal" size="small" fill="outline" color="medium" v-show="!currentJob?.runTime">{{ translate("Select run time") }}</ion-button> -->
+          <ion-modal class="date-time-modal" :is-open="isDateTimeModalOpen" @didDismiss="() => isDateTimeModalOpen = false">
+            <ion-content force-overscroll="false">
+              <ion-datetime          
+                show-default-buttons
+                hour-cycle="h23"
+                :value="runTime ? (isCustomRunTime(runTime) ? getDateTime(runTime) : getDateTime(DateTime.now().toMillis() + runTime)) : getNowTimestamp()"
+                @ionChange="updateCustomTime($event)"
+              />
+            </ion-content>
+          </ion-modal>
+        </template>
       </ion-item>
 
       <ion-item>
         <ion-icon slot="start" :icon="timerOutline" />
-        <ion-select :value="jobStatus" :interface-options="{ header: translate('Frequency') }" interface="popover" :placeholder="translate('Disabled')" @ionChange="jobStatus = $event.detail.value" @ionDismiss="jobStatus == 'CUSTOM' && setCustomFrequency()">
-          <div slot="label" class="ion-text-wrap">{{ translate("Schedule") }}</div>
-          <ion-select-option v-for="freq in frequencyOptions" :key="freq.id" :value="freq.id">{{ freq.description }}</ion-select-option>
-        </ion-select>
+        <template v-if="historyJobConfig">
+          <ion-label class="ion-text-wrap">{{ translate("Schedule") }}</ion-label>
+          <ion-label slot="end">{{ currentJob.tempExprId ? temporalExpr(currentJob.tempExprId)?.description : "🙃" }}</ion-label>
+        </template>
+        <template v-else>
+          <ion-select :value="jobStatus" :interface-options="{ header: translate('Frequency') }" interface="popover" :placeholder="translate('Disabled')" @ionChange="jobStatus = $event.detail.value" @ionDismiss="jobStatus == 'CUSTOM' && setCustomFrequency()">
+            <div slot="label" class="ion-text-wrap">{{ translate("Schedule") }}</div>
+            <ion-select-option v-for="freq in frequencyOptions" :key="freq.id" :value="freq.id">{{ freq.description }}</ion-select-option>
+          </ion-select>
+        </template>
       </ion-item>
 
       <ion-item lines="none">
@@ -76,20 +88,20 @@
       </ion-item> -->
     </ion-list>
 
-    <div class="actions desktop-only">
+    <div class="actions desktop-only" :disabled="historyJobConfig">
       <div>
-        <ion-button size="small" fill="outline" color="medium" :disabled="!hasPermission(Actions.APP_JOB_UPDATE) || currentJob.statusId === 'SERVICE_DRAFT' || isRefreshRequired" @click="skipJob(currentJob)">{{ translate("Skip once") }}</ion-button>
-        <ion-button size="small" fill="outline" color="danger" :disabled="!hasPermission(Actions.APP_JOB_UPDATE) || currentJob.statusId === 'SERVICE_DRAFT' || isRefreshRequired" @click="cancelJob(currentJob)">{{ translate("Disable") }}</ion-button>
+        <ion-button size="small" fill="outline" color="medium" :disabled="!hasPermission(Actions.APP_JOB_UPDATE) || currentJob.statusId === 'SERVICE_DRAFT' || isRefreshRequired || historyJobConfig" @click="skipJob(currentJob)">{{ translate("Skip once") }}</ion-button>
+        <ion-button size="small" fill="outline" color="danger" :disabled="!hasPermission(Actions.APP_JOB_UPDATE) || currentJob.statusId === 'SERVICE_DRAFT' || isRefreshRequired || historyJobConfig" @click="cancelJob(currentJob)">{{ translate("Disable") }}</ion-button>
       </div>
       <div>
-        <ion-button :disabled="!hasPermission(Actions.APP_JOB_UPDATE) || isRequiredParametersMissing || isRefreshRequired" size="small" fill="outline" @click="saveChanges()">{{ translate("Save changes") }}</ion-button>
+        <ion-button :disabled="!hasPermission(Actions.APP_JOB_UPDATE) || isRequiredParametersMissing || isRefreshRequired || historyJobConfig" size="small" fill="outline" @click="saveChanges()">{{ translate("Save changes") }}</ion-button>
       </div>
     </div>
 
     <div class=" actions mobile-only">
-      <ion-button size="small" expand="block" fill="outline" color="medium" :disabled="!hasPermission(Actions.APP_JOB_UPDATE) || status === 'SERVICE_DRAFT' || isRefreshRequired" @click="skipJob(currentJob)">{{ translate("Skip once") }}</ion-button>
-      <ion-button size="small" expand="block" fill="outline" color="danger" :disabled="!hasPermission(Actions.APP_JOB_UPDATE) || status === 'SERVICE_DRAFT' || isRefreshRequired" @click="cancelJob(currentJob)">{{ translate("Disable") }}</ion-button>
-      <ion-button :disabled="!hasPermission(Actions.APP_JOB_UPDATE) || isRequiredParametersMissing || isRefreshRequired" expand="block" @click="saveChanges()">{{ translate("Save changes") }}</ion-button>
+      <ion-button size="small" expand="block" fill="outline" color="medium" :disabled="!hasPermission(Actions.APP_JOB_UPDATE) || status === 'SERVICE_DRAFT' || isRefreshRequired || historyJobConfig" @click="skipJob(currentJob)">{{ translate("Skip once") }}</ion-button>
+      <ion-button size="small" expand="block" fill="outline" color="danger" :disabled="!hasPermission(Actions.APP_JOB_UPDATE) || status === 'SERVICE_DRAFT' || isRefreshRequired || historyJobConfig" @click="cancelJob(currentJob)">{{ translate("Disable") }}</ion-button>
+      <ion-button :disabled="!hasPermission(Actions.APP_JOB_UPDATE) || isRequiredParametersMissing || isRefreshRequired || historyJobConfig" expand="block" @click="saveChanges()">{{ translate("Save changes") }}</ion-button>
     </div>
   </section>
   <div class="more-actions">
@@ -97,7 +109,7 @@
       <ion-icon slot="start" :icon="timeOutline" />
       {{ translate("History") }}
     </ion-item>
-    <ion-item :disabled="!hasPermission(Actions.APP_JOB_UPDATE)" @click="runNow(currentJob)" button>
+    <ion-item :disabled="!hasPermission(Actions.APP_JOB_UPDATE) || historyJobConfig" @click="runNow(currentJob)" button>
       <ion-icon slot="start" :icon="flashOutline" />
       {{ translate("Run now") }}
     </ion-item>
@@ -105,7 +117,7 @@
       <ion-icon slot="start"  :icon="copyOutline" />
       {{ translate("Copy details") }}
     </ion-item>
-    <ion-item @click="updatePinnedJobs(currentJob?.systemJobEnumId)" button>
+    <ion-item :disabled="historyJobConfig" @click="updatePinnedJobs(currentJob?.systemJobEnumId)" button>
       <ion-icon slot="start" :icon="pinOutline" />
       <ion-checkbox :checked="pinnedJobs && pinnedJobs.includes(currentJob.systemJobEnumId)">
         <ion-label>{{ translate("Pin job") }}</ion-label>
@@ -113,7 +125,7 @@
     </ion-item>
   </div>
   <!-- Import logs -->
-  <section v-if="currentJob.runtimeData?.configId && getDataManagerLogs?.length">
+  <section v-if="historyJobConfig && currentJob.runtimeData?.configId && getDataManagerLogs?.length">
     <ion-item lines="none">
       <h1>{{ translate('Import logs') }}</h1>
       <ion-button slot="end" fill="clear" @click="openImportLogsDetails()">{{ translate('View details') }}</ion-button>
@@ -234,7 +246,7 @@ export default defineComponent({
     this.generateRunTimes(this.runTime)
     this.generateFrequencyOptions(this.jobStatus)
   },
-  props: ["isBrokerJob", "status", "type"],
+  props: ["isBrokerJob", "status", "type", "historyJobConfig"],
   computed: {
     ...mapGetters({
       pinnedJobs: 'user/getPinnedJobs',
@@ -245,6 +257,7 @@ export default defineComponent({
       currentJob: 'job/getCurrentJob',
       pendingJobs: 'job/getPendingJobs',
       getDataManagerLogs: 'job/getDataManagerLogs',
+      temporalExpr: 'job/getTemporalExpr'
     }),
     isRequiredParametersMissing() {
       return this.customRequiredParameters.some((parameter: any) => !parameter.value?.trim())
@@ -262,7 +275,8 @@ export default defineComponent({
       return this.getDataManagerLogs?.filter((log: any) => log.errorRecordContentId !== null).length
     },
     openImportLogsDetails() {
-      this.router.replace({ path: `/import-logs-detail/${this.currentJob.systemJobEnumId}` })
+      const jobId = this.currentJob.jobId
+      this.router.push({ name: 'DataManagerLogDetails', params: { jobId } })
     },
     getDateTime(time: any) {
       return DateTime.fromMillis(time).toISO()
diff --git a/src/router/index.ts b/src/router/index.ts
index 422003b5..1d5b85a2 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -13,7 +13,7 @@ import Miscellaneous from '@/views/Miscellaneous.vue'
 import Reports from '@/views/Reports.vue'
 import BulkEditor from '@/views/BulkEditor.vue'
 import Settings from "@/views/Settings.vue"
-import DataManagerLogDetails from "@/components/DataManagerLogDetails.vue"
+import DataManagerLogDetails from "@/views/DataManagerLogDetails.vue"
 import store from '@/store'
 import { hasPermission } from '@/authorization';
 import { showToast } from '@/utils'
@@ -69,6 +69,7 @@ const routes: Array<RouteRecordRaw> = [
     name: 'DataManagerLogDetails',
     component: DataManagerLogDetails,
     beforeEnter: authGuard,
+    props: true
   },
   {
     path: '/inventory',
diff --git a/src/store/modules/job/actions.ts b/src/store/modules/job/actions.ts
index 01ee8a81..5be9ba13 100644
--- a/src/store/modules/job/actions.ts
+++ b/src/store/modules/job/actions.ts
@@ -261,13 +261,13 @@ const actions: ActionTree<JobState, RootState> = {
     })
   },
 
-  async fetchDataManagerLogs({ commit }, configId) {
+  async fetchDataManagerLogs({ commit }, jobId) {
     commit(types.JOB_DATA_MANAGER_LOGS_UPDATED, []);
     let logs = [] as any
     const payload = {
       "inputFields":  {
         "systemJobEnumId_op": "not-empty",
-        "configId": configId
+        "createdByJobId": jobId
       },
       "fieldList": ["statusId", "logId", "createdDate", "startDateTime", "finishDateTime", "logFileContentId", "errorRecordContentId", "contentName", "dataResourceId"],
       "noConditionFind": "Y",
diff --git a/src/components/DataManagerLogDetails.vue b/src/views/DataManagerLogDetails.vue
similarity index 98%
rename from src/components/DataManagerLogDetails.vue
rename to src/views/DataManagerLogDetails.vue
index ff372e81..3181a132 100644
--- a/src/components/DataManagerLogDetails.vue
+++ b/src/views/DataManagerLogDetails.vue
@@ -165,12 +165,13 @@ export default defineComponent ({
       getStatusDesc: 'util/getStatusDesc',
     }),
   },
+  props: ['jobId'],
   async mounted() {
     await this.fetchJobs();
-    const job = await this.getJob(this.$route.params.jobId)
+    const job = await this.getJob(this.jobId)
     await this.store.dispatch('job/updateCurrentJob', { job });
     await this.fetchDataManagerConfig(job.runtimeData?.configId)
-    await this.store.dispatch('job/fetchDataManagerLogs', job.runtimeData?.configId)
+    await this.store.dispatch('job/fetchDataManagerLogs', job.jobId)
     await this.store.dispatch('job/fetchDataResource', this.getDataManagerLogs)
     this.filterDataManagerLogs('ALL');
     this.isLoading = false;
diff --git a/src/views/Pipeline.vue b/src/views/Pipeline.vue
index 8dc2f2d6..35721089 100644
--- a/src/views/Pipeline.vue
+++ b/src/views/Pipeline.vue
@@ -180,7 +180,7 @@
           </div>
 
           <div v-else>
-          <ion-card v-for="job in jobHistory" :key="job.jobId">
+          <ion-card v-for="job in jobHistory" :key="job.jobId" @click="viewJobConfiguration(job)">
             <ion-card-header>
               <div>
                 <ion-card-subtitle class="overline">{{ job.parentJobId }}</ion-card-subtitle>
@@ -237,8 +237,8 @@
           </div>          
         </section>
 
-        <aside class="desktop-only" v-if="isDesktop" v-show="segmentSelected === 'pending' && currentJob && Object.keys(currentJob).length">
-          <JobConfiguration :status="currentJobStatus" :type="freqType" :key="currentJob"/>
+        <aside class="desktop-only" v-if="isDesktop" v-show="(segmentSelected === 'pending' || segmentSelected === 'history') && currentJob && Object.keys(currentJob).length">
+          <JobConfiguration :status="currentJobStatus" :type="freqType" :historyJobConfig="segmentSelected === 'history'" :key="currentJob"/>
         </aside>
       </main>
     </ion-content>
@@ -609,7 +609,7 @@ export default defineComponent({
 
       await this.store.dispatch('job/updateCurrentJob', { job });
       if (job.runtimeData?.configId) {
-        await this.store.dispatch('job/fetchDataManagerLogs', job.runtimeData?.configId)
+        await this.store.dispatch('job/fetchDataManagerLogs', job.jobId)
       }
       if(!this.isDesktop && job?.jobId) {
         this.router.push({ name: 'JobDetails', params: { jobId: job?.jobId, category: "pipeline" } });

From 7cd2050c23449e2bb0f702d10403aae2ccc68b98 Mon Sep 17 00:00:00 2001
From: R-Sourabh <rsourabh002@gmail.com>
Date: Wed, 23 Oct 2024 18:05:33 +0530
Subject: [PATCH 09/14] Improved: added function to fetch job info of history
 jobs(#680)

---
 src/views/DataManagerLogDetails.vue | 38 +++++++++++++++++++----------
 1 file changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/views/DataManagerLogDetails.vue b/src/views/DataManagerLogDetails.vue
index 3181a132..95565352 100644
--- a/src/views/DataManagerLogDetails.vue
+++ b/src/views/DataManagerLogDetails.vue
@@ -17,7 +17,7 @@
             <ion-item>
               <ion-icon slot="start" :icon="pulseOutline" />
               {{ translate('Job') }}
-              <ion-label slot="end" class="ion-text-wrap">{{ currentJob.jobId }}</ion-label>
+              <ion-label slot="end" class="ion-text-wrap">{{ currentJob?.jobId }}</ion-label>
             </ion-item>
             <ion-item>
               <ion-icon slot="start" :icon="fileTrayFullOutline" />
@@ -38,7 +38,7 @@
         </section>
         <div class="config-details">
           <ion-label lines="none">
-            <p class="overline">{{ currentJob.runtimeData?.configId }}</p>
+            <p class="overline">{{ currentJob?.runtimeData?.configId }}</p>
             <h1>{{ configDetails?.description }}</h1>
           </ion-label>
           <ion-list>
@@ -147,6 +147,7 @@ export default defineComponent ({
   data() {
     return {
       configDetails: {},
+      currentJob: {},
       selectedFilter: 'All',
       dataManagerLogFilters: [
         { id: 'ALL', label: 'All' },
@@ -159,19 +160,16 @@ export default defineComponent ({
   },
   computed: {
     ...mapGetters({
-      currentJob: 'job/getCurrentJob',
       getDataManagerLogs: 'job/getDataManagerLogs',
-      getJob: 'job/getJob',
       getStatusDesc: 'util/getStatusDesc',
     }),
   },
   props: ['jobId'],
   async mounted() {
-    await this.fetchJobs();
-    const job = await this.getJob(this.jobId)
-    await this.store.dispatch('job/updateCurrentJob', { job });
-    await this.fetchDataManagerConfig(job.runtimeData?.configId)
-    await this.store.dispatch('job/fetchDataManagerLogs', job.jobId)
+    this.currentJob = await this.fetchJobHistory(this.jobId);
+    await this.store.dispatch('job/updateCurrentJob', this.currentJob);
+    await this.fetchDataManagerConfig(this.currentJob?.runtimeData.configId)
+    await this.store.dispatch('job/fetchDataManagerLogs', this.currentJob.jobId)
     await this.store.dispatch('job/fetchDataResource', this.getDataManagerLogs)
     this.filterDataManagerLogs('ALL');
     this.isLoading = false;
@@ -205,10 +203,24 @@ export default defineComponent ({
       });
       return popover.present()
     },
-    async fetchJobs(){
-      await this.store.dispatch("job/fetchJobs", {
-        "inputFields": this.$route.params.jobId
-      });
+    async fetchJobHistory(jobId) {
+      let resp;
+
+      try {
+        resp = await JobService.fetchJobInformation({
+          "inputFields": {
+            "jobId": jobId
+          },
+          "noConditionFind": "Y"
+        })
+        if(resp.status === 200 && resp.data.docs?.length > 0 && !hasError(resp)) {
+          return resp.data.docs[0];
+        } else {
+          return [];
+        }
+      } catch(err) {
+        logger.error(err);
+      }
     },
     async fetchDataManagerConfig(configId) {
       let resp = {}

From 3f2f3f6b307fd9abcd975a866ab402d18e3cd29b Mon Sep 17 00:00:00 2001
From: R-Sourabh <rsourabh002@gmail.com>
Date: Mon, 28 Oct 2024 18:19:04 +0530
Subject: [PATCH 10/14] Improved: updated the actions method & added function
 to disable save on customparameter modal(#680)

- added condition to fetch logs only for history segment.
---
 src/components/JobParameterModal.vue |  6 +++++-
 src/store/modules/job/actions.ts     | 25 ++++++++++++++-----------
 src/views/DataManagerLogDetails.vue  |  9 +++++----
 src/views/Pipeline.vue               |  4 ++--
 4 files changed, 26 insertions(+), 18 deletions(-)

diff --git a/src/components/JobParameterModal.vue b/src/components/JobParameterModal.vue
index db0659c7..7a7b8826 100644
--- a/src/components/JobParameterModal.vue
+++ b/src/components/JobParameterModal.vue
@@ -8,7 +8,7 @@
       </ion-buttons>
       <ion-title>{{ translate('Custom Parameters') }}</ion-title>
       <ion-buttons slot="end">
-        <ion-button color="primary" :disabled="currentJob.statusId === 'SERVICE_PENDING'" @click="save()">{{ translate('Save') }}</ion-button>
+        <ion-button color="primary" :disabled="isSaveDisabledByStatus(currentJob.statusId)" @click="save()">{{ translate('Save') }}</ion-button>
       </ion-buttons>
     </ion-toolbar>
   </ion-header>
@@ -119,6 +119,10 @@ export default defineComponent({
 
       return JSON.stringify(res);
     },
+    isSaveDisabledByStatus(statusId: any) {
+      const invalidStatuses = ["SERVICE_PENDING", "SERVICE_CANCELLED", "SERVICE_CRASHED", "SERVICE_FAILED", "SERVICE_FINISHED"];
+      return invalidStatuses.includes(statusId);
+    },
     save() {
       modalController.dismiss({ dismissed: true, customOptionalParameters: this.customOptionalParametersValue, customRequiredParameters: this.customRequiredParametersValue })
     }
diff --git a/src/store/modules/job/actions.ts b/src/store/modules/job/actions.ts
index 5be9ba13..0df0fdcf 100644
--- a/src/store/modules/job/actions.ts
+++ b/src/store/modules/job/actions.ts
@@ -275,15 +275,16 @@ const actions: ActionTree<JobState, RootState> = {
       "entityName": "DataManagerLogAndContent",
     }
 
-    await JobService.fetchDataManagerLogs(payload).then((resp: any) => {
-      if (resp.status === 200 && resp.data.docs?.length > 0 && !hasError(resp)) {
-        logs = resp.data.docs
+    try {
+      const resp = await JobService.fetchDataManagerLogs(payload);
+      if (resp.data.docs?.length > 0 && !hasError(resp)) {
+        logs = resp.data.docs;
       } else {
-        throw resp.data
+        throw resp.data;
       }
-    }).catch((err) => {
+    } catch (err) {
       logger.error(err);
-    })
+    }
     commit(types.JOB_DATA_MANAGER_LOGS_UPDATED, logs);
     return logs;
   },
@@ -294,7 +295,8 @@ const actions: ActionTree<JobState, RootState> = {
   
     const payload = {
       "inputFields": {
-        "coContentId": contentIds
+        "coContentId": contentIds,
+        "coContentId_op": "in"
       },
       "fieldList": ["coContentId", "coDataResourceId", "coContentName"], 
       "noConditionFind": "Y",
@@ -302,8 +304,9 @@ const actions: ActionTree<JobState, RootState> = {
       "entityName": "DataResourceContentView"
     }
   
-    await JobService.fetchDataResource(payload).then((resp: any) => {
-      if (resp.status === 200 && resp.data.docs?.length > 0 && !hasError(resp)) {
+    try {
+      const resp = await JobService.fetchDataResource(payload);
+      if (resp.data.docs?.length > 0 && !hasError(resp)) {
         logs.forEach((log: any) => {
           const logFileDataResource = resp.data.docs.find((doc: any) => doc.coContentId === log.logFileContentId);
           if (logFileDataResource) {
@@ -318,9 +321,9 @@ const actions: ActionTree<JobState, RootState> = {
           }
         });
       }
-    }).catch((err: any) => {
+    } catch (err) {
       logger.error(err);
-    })
+    }
     commit(types.JOB_DATA_MANAGER_LOGS_UPDATED, logs);
   },
   async fetchMiscellaneousJobs({ commit, dispatch, state }, payload){
diff --git a/src/views/DataManagerLogDetails.vue b/src/views/DataManagerLogDetails.vue
index 95565352..d13fbea7 100644
--- a/src/views/DataManagerLogDetails.vue
+++ b/src/views/DataManagerLogDetails.vue
@@ -213,13 +213,14 @@ export default defineComponent ({
           },
           "noConditionFind": "Y"
         })
-        if(resp.status === 200 && resp.data.docs?.length > 0 && !hasError(resp)) {
+        if(resp.data.docs?.length > 0 && !hasError(resp)) {
           return resp.data.docs[0];
         } else {
-          return [];
+          return {}
         }
       } catch(err) {
-        logger.error(err);
+        logger.error(err)
+        return {}
       }
     },
     async fetchDataManagerConfig(configId) {
@@ -236,7 +237,7 @@ export default defineComponent ({
       
       try {
         resp = await JobService.fetchDataManagerConfig(payload);
-        if (resp.status === 200 && resp.data.docs?.length > 0 && !hasError(resp)) {
+        if (resp.data.docs?.length > 0 && !hasError(resp)) {
           this.configDetails = resp.data.docs[0];
         } else {
           throw resp.data
diff --git a/src/views/Pipeline.vue b/src/views/Pipeline.vue
index 35721089..91697354 100644
--- a/src/views/Pipeline.vue
+++ b/src/views/Pipeline.vue
@@ -188,7 +188,7 @@
               </div>
               <div>
                 <ion-badge v-if="job.cancelDateTime || job.finishDateTime" color="dark">{{ job.statusId == "SERVICE_CANCELLED" || job.statusId == "SERVICE_CRASHED" ?  timeFromNow(job.cancelDateTime) : timeFromNow(job.finishDateTime) }}</ion-badge>
-                <ion-badge v-if="job.statusId" :color="job.statusId === 'SERVICE_FINISHED' ? 'success' : 'danger'" @click="job.statusId === 'SERVICE_FAILED' ? openFailedJobReason(job) : ''">{{ job.statusDesc }}</ion-badge>
+                <ion-badge v-if="job.statusId" :color="job.statusId === 'SERVICE_FINISHED' ? 'success' : 'danger'" @click.stop="job.statusId === 'SERVICE_FAILED' ? openFailedJobReason(job) : ''">{{ job.statusDesc }}</ion-badge>
               </div>
             </ion-card-header>
 
@@ -608,7 +608,7 @@ export default defineComponent({
       this.freqType = appFreqType ? appFreqType[1] : "default"
 
       await this.store.dispatch('job/updateCurrentJob', { job });
-      if (job.runtimeData?.configId) {
+      if (this.segmentSelected === 'history' && job.runtimeData?.configId) {
         await this.store.dispatch('job/fetchDataManagerLogs', job.jobId)
       }
       if(!this.isDesktop && job?.jobId) {

From 89b8b4a69e70f5c4806e690d0911b186b26b25b8 Mon Sep 17 00:00:00 2001
From: R-Sourabh <rsourabh002@gmail.com>
Date: Tue, 29 Oct 2024 14:21:19 +0530
Subject: [PATCH 11/14] Improved: displaying the job time on the Job
 Configuration card according to the history segment (#680)

---
 src/components/JobConfiguration.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/JobConfiguration.vue b/src/components/JobConfiguration.vue
index 5543b0c6..835f2abe 100644
--- a/src/components/JobConfiguration.vue
+++ b/src/components/JobConfiguration.vue
@@ -6,7 +6,8 @@
       <ion-button fill="outline" slot="end" v-if="isRefreshRequired" @click="refreshCurrentJob">
         <ion-icon :icon="refreshOutline" slot="icon-only" />
       </ion-button>
-      <ion-badge slot="end" color="dark" v-if="currentJob?.runTime && currentJob.statusId !== 'SERVICE_DRAFT' && !isRefreshRequired">{{ translate("running") }} {{ timeTillJob(currentJob.runTime) }}</ion-badge>
+      <ion-badge slot="end" color="dark" v-if="currentJob.cancelDateTime || currentJob.finishDateTime">{{ currentJob.statusId == "SERVICE_CANCELLED" || currentJob.statusId == "SERVICE_CRASHED" ?  timeFromNow(currentJob.cancelDateTime) : timeFromNow(currentJob.finishDateTime) }}</ion-badge>
+      <ion-badge slot="end" color="dark" v-else-if="currentJob?.runTime && currentJob.statusId !== 'SERVICE_DRAFT' && !isRefreshRequired">{{ translate("running") }} {{ timeTillJob(currentJob.runTime) }}</ion-badge>
     </ion-item>
 
     <ion-list>
@@ -483,6 +484,10 @@ export default defineComponent({
       const timeDiff = DateTime.fromMillis(time).diff(DateTime.local());
       return DateTime.local().plus(timeDiff).toRelative();
     },
+    timeFromNow (time: any) {
+      const timeDiff = DateTime.fromMillis(time).diff(DateTime.local());
+      return DateTime.local().plus(timeDiff).toRelative();
+    },
     async viewJobHistory(job: any) {
       const jobHistoryModal = await modalController.create({
         component: JobHistoryModal,

From 2c9dd31c3c1948ebecd3a0628d10fdbac42c34cc Mon Sep 17 00:00:00 2001
From: R-Sourabh <rsourabh002@gmail.com>
Date: Mon, 11 Nov 2024 20:12:40 +0530
Subject: [PATCH 12/14] Improved: removed timeFromNow and used existing
 timeTillJob function, added isDesktop property for history segment(#680)

---
 src/components/JobConfiguration.vue  | 6 +-----
 src/components/JobParameterModal.vue | 6 +-----
 src/views/Pipeline.vue               | 4 ++--
 3 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/src/components/JobConfiguration.vue b/src/components/JobConfiguration.vue
index 835f2abe..ec43e91e 100644
--- a/src/components/JobConfiguration.vue
+++ b/src/components/JobConfiguration.vue
@@ -6,7 +6,7 @@
       <ion-button fill="outline" slot="end" v-if="isRefreshRequired" @click="refreshCurrentJob">
         <ion-icon :icon="refreshOutline" slot="icon-only" />
       </ion-button>
-      <ion-badge slot="end" color="dark" v-if="currentJob.cancelDateTime || currentJob.finishDateTime">{{ currentJob.statusId == "SERVICE_CANCELLED" || currentJob.statusId == "SERVICE_CRASHED" ?  timeFromNow(currentJob.cancelDateTime) : timeFromNow(currentJob.finishDateTime) }}</ion-badge>
+      <ion-badge slot="end" color="dark" v-if="currentJob.cancelDateTime || currentJob.finishDateTime">{{ currentJob.statusId == "SERVICE_CANCELLED" || currentJob.statusId == "SERVICE_CRASHED" ?  timeTillJob(currentJob.cancelDateTime) : timeTillJob(currentJob.finishDateTime) }}</ion-badge>
       <ion-badge slot="end" color="dark" v-else-if="currentJob?.runTime && currentJob.statusId !== 'SERVICE_DRAFT' && !isRefreshRequired">{{ translate("running") }} {{ timeTillJob(currentJob.runTime) }}</ion-badge>
     </ion-item>
 
@@ -484,10 +484,6 @@ export default defineComponent({
       const timeDiff = DateTime.fromMillis(time).diff(DateTime.local());
       return DateTime.local().plus(timeDiff).toRelative();
     },
-    timeFromNow (time: any) {
-      const timeDiff = DateTime.fromMillis(time).diff(DateTime.local());
-      return DateTime.local().plus(timeDiff).toRelative();
-    },
     async viewJobHistory(job: any) {
       const jobHistoryModal = await modalController.create({
         component: JobHistoryModal,
diff --git a/src/components/JobParameterModal.vue b/src/components/JobParameterModal.vue
index 7a7b8826..d53320f4 100644
--- a/src/components/JobParameterModal.vue
+++ b/src/components/JobParameterModal.vue
@@ -8,7 +8,7 @@
       </ion-buttons>
       <ion-title>{{ translate('Custom Parameters') }}</ion-title>
       <ion-buttons slot="end">
-        <ion-button color="primary" :disabled="isSaveDisabledByStatus(currentJob.statusId)" @click="save()">{{ translate('Save') }}</ion-button>
+        <ion-button color="primary" :disabled="currentJob.statusId !== 'SERVICE_DRAFT'" @click="save()">{{ translate('Save') }}</ion-button>
       </ion-buttons>
     </ion-toolbar>
   </ion-header>
@@ -119,10 +119,6 @@ export default defineComponent({
 
       return JSON.stringify(res);
     },
-    isSaveDisabledByStatus(statusId: any) {
-      const invalidStatuses = ["SERVICE_PENDING", "SERVICE_CANCELLED", "SERVICE_CRASHED", "SERVICE_FAILED", "SERVICE_FINISHED"];
-      return invalidStatuses.includes(statusId);
-    },
     save() {
       modalController.dismiss({ dismissed: true, customOptionalParameters: this.customOptionalParametersValue, customRequiredParameters: this.customRequiredParametersValue })
     }
diff --git a/src/views/Pipeline.vue b/src/views/Pipeline.vue
index 91697354..fa9f8f55 100644
--- a/src/views/Pipeline.vue
+++ b/src/views/Pipeline.vue
@@ -180,7 +180,7 @@
           </div>
 
           <div v-else>
-          <ion-card v-for="job in jobHistory" :key="job.jobId" @click="viewJobConfiguration(job)">
+          <ion-card v-for="job in jobHistory" :key="job.jobId" @click="viewJobConfiguration(job)" :button="isDesktop">
             <ion-card-header>
               <div>
                 <ion-card-subtitle class="overline">{{ job.parentJobId }}</ion-card-subtitle>
@@ -608,7 +608,7 @@ export default defineComponent({
       this.freqType = appFreqType ? appFreqType[1] : "default"
 
       await this.store.dispatch('job/updateCurrentJob', { job });
-      if (this.segmentSelected === 'history' && job.runtimeData?.configId) {
+      if (!this.isDesktop && this.segmentSelected === 'history' && job.runtimeData?.configId) {
         await this.store.dispatch('job/fetchDataManagerLogs', job.jobId)
       }
       if(!this.isDesktop && job?.jobId) {

From 0e6ba955e5f7ded915de4fe60ae6367fd1852562 Mon Sep 17 00:00:00 2001
From: R-Sourabh <rsourabh002@gmail.com>
Date: Wed, 13 Nov 2024 14:53:55 +0530
Subject: [PATCH 13/14] Improved: added support to show DataManagerLogs for
 mobile view(#680)

---
 src/views/DataManagerLogDetails.vue | 4 ++--
 src/views/JobDetails.vue            | 6 +++++-
 src/views/Pipeline.vue              | 2 +-
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/views/DataManagerLogDetails.vue b/src/views/DataManagerLogDetails.vue
index d13fbea7..5d80031d 100644
--- a/src/views/DataManagerLogDetails.vue
+++ b/src/views/DataManagerLogDetails.vue
@@ -83,12 +83,12 @@
           </ion-item>
   
           <ion-label>
-            {{ getDateTime(log.startDateTime) }}
+            {{ log.startDateTime ? getDateTime(log.startDateTime) : '-' }}
             <p>{{ translate('Started') }}</p>
           </ion-label>
   
           <ion-label>
-            {{ getDateTime(log.finishDateTime) }}
+            {{ log.finishDateTime ? getDateTime(log.finishDateTime) : '-' }}
             <p>{{ translate('Finished') }}</p>
           </ion-label>
 
diff --git a/src/views/JobDetails.vue b/src/views/JobDetails.vue
index 4266336b..ebe0fac9 100644
--- a/src/views/JobDetails.vue
+++ b/src/views/JobDetails.vue
@@ -9,7 +9,7 @@
 
     <ion-content>
       <InitialJobConfiguration v-if="jobCategory === 'initial-load'" :type='type' :shopifyOrderId='lastShopifyOrderId' :key="currentJob" />
-      <JobConfiguration v-else :status="currentJob?.status === 'SERVICE_DRAFT' ? currentJob?.status : currentJob?.tempExprId" :type="freqType" :key="currentJob"/>
+      <JobConfiguration v-else :status="currentJob?.status === 'SERVICE_DRAFT' ? currentJob?.status : currentJob?.tempExprId" :type="freqType" :key="currentJob" :historyJobConfig="checkJobStatus(currentJob?.statusId)"/>
     </ion-content>
   </ion-page>
 </template>
@@ -87,6 +87,10 @@ export default defineComponent({
         const jobFreqTypeId = (Object.keys(this.jobFrequencyType).find((enumId: any) => enumId === id)) as any;
         this.freqType = (id && jobFreqTypeId) && this.jobFrequencyType[jobFreqTypeId];
       }
+    },
+    checkJobStatus(statusId: string) {
+      const statuses = ["SERVICE_CANCELLED", "SERVICE_CRASHED", "SERVICE_FAILED", "SERVICE_FINISHED", "SERVICE_RUNNING", "SERVICE_QUEUED"];
+      return statuses.includes(statusId);
     }
   },
   mounted() {
diff --git a/src/views/Pipeline.vue b/src/views/Pipeline.vue
index fa9f8f55..de90cbc7 100644
--- a/src/views/Pipeline.vue
+++ b/src/views/Pipeline.vue
@@ -608,7 +608,7 @@ export default defineComponent({
       this.freqType = appFreqType ? appFreqType[1] : "default"
 
       await this.store.dispatch('job/updateCurrentJob', { job });
-      if (!this.isDesktop && this.segmentSelected === 'history' && job.runtimeData?.configId) {
+      if(this.segmentSelected === 'history' && job.runtimeData?.configId) {
         await this.store.dispatch('job/fetchDataManagerLogs', job.jobId)
       }
       if(!this.isDesktop && job?.jobId) {

From 80479862a4b222319f3e2c0f9d6f5f1d20c321cd Mon Sep 17 00:00:00 2001
From: R-Sourabh <rsourabh002@gmail.com>
Date: Wed, 13 Nov 2024 18:31:57 +0530
Subject: [PATCH 14/14] Improved: changed the function name to downloadFile in
 DownloadLogsFilePopover and parameter type(#680)

---
 src/components/DownloadLogsFilePopover.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/components/DownloadLogsFilePopover.vue b/src/components/DownloadLogsFilePopover.vue
index 88026a13..ab9e78bc 100644
--- a/src/components/DownloadLogsFilePopover.vue
+++ b/src/components/DownloadLogsFilePopover.vue
@@ -2,13 +2,13 @@
   <ion-content>
     <ion-list>
       <ion-list-header>{{ dataManagerLog.logId }}</ion-list-header>
-      <ion-item button @click="downloadLogFile('logFile')">
+      <ion-item button @click="downloadFile('logFile')">
         {{ translate('Log file') }}
       </ion-item>
-      <ion-item button @click="downloadLogFile('uploadedFile')">
+      <ion-item button @click="downloadFile('uploadedFile')">
         {{ translate('Uploaded file') }}
       </ion-item>
-      <ion-item button :disabled="!dataManagerLog?.errorRecordContentId" lines="none" @click="downloadLogFile('failedRecords')">
+      <ion-item button :disabled="!dataManagerLog?.errorRecordContentId" lines="none" @click="downloadFile('failedRecords')">
         {{ translate('Failed records') }}
       </ion-item>
     </ion-list>
@@ -39,7 +39,7 @@ export default defineComponent({
   },
   props: ["dataManagerLog"],
   methods: {
-    async downloadLogFile(type: any) {
+    async downloadFile(type: string) {
       let dataResource = {} as any;
 
       if (type === 'logFile') {
@@ -53,7 +53,7 @@ export default defineComponent({
         dataResource.name = this.dataManagerLog.errorRecordContentName
       }
 
-      if (dataResource) {
+      if (dataResource.dataResourceId) {
         try {
           const response = await JobService.fetchFileData({
             dataResourceId: dataResource.dataResourceId