Improved: resolved comments , change state & getter name, added local…

…e text refactor job actions(hotwax#680)

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)

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);

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}` })

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",

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
 }

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
 }