Implemented: modal to show failed job reason in history segment on pipeline page(#641)

src/locales/en.json

@@ -85,6 +85,7 @@
   "Every 6 hours": "Every 6 hours",
   "Every day": "Every day",
   "Failed": "Failed",
+  "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",

src/store/modules/job/actions.ts

@@ -52,7 +52,7 @@
         "shopId_fld1_grp": "2",
         "shopId_fld1_op": "empty"
       } as any,
-      "fieldList": [ "systemJobEnumId", "runTime", "tempExprId", "parentJobId", "serviceName", "jobId", "jobName", "statusId", "cancelDateTime", "finishDateTime", "startDateTime" , "enumTypeId", "enumName", "description", "runtimeDataId" ],
+      "fieldList": [ "systemJobEnumId", "runTime", "tempExprId", "parentJobId", "serviceName", "jobId", "jobName", "jobResult", "statusId", "cancelDateTime", "finishDateTime", "startDateTime" , "enumTypeId", "enumName", "description", "runtimeDataId" ],
       "noConditionFind": "Y",
       "viewSize": payload.viewSize,
       "viewIndex": payload.viewIndex,
@@ -681,7 +681,7 @@
     return resp;
   },
 
   async runServiceNow({ dispatch }, params) {
     let resp;
 
     const job = params.job

src/views/FailedJobReasonModal.vue

@@ -0,0 +1,58 @@
+<template>
+  <ion-header>
+    <ion-toolbar>
+      <ion-buttons slot="start">
+        <ion-button @click="closeModal">
+          <ion-icon slot="icon-only" :icon="closeOutline" />
+        </ion-button>
+      </ion-buttons>
+      <ion-title>{{ $t("Failed job reason") }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+  <ion-content>
+    <ion-item lines="none">
+      <p>{{ job.jobResult }}</p>
+    </ion-item>
+  </ion-content>
+</template>
+
+<script lang="ts">
+import {
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonTitle,
+  IonToolbar,
+  modalController,
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+import { closeOutline } from 'ionicons/icons';
+
+export default defineComponent({
+  name: "FailedJobReasonModal",
+  components: {
+    IonButton,
+    IonButtons,
+    IonContent,
+    IonHeader,
+    IonIcon,
+    IonItem,
+    IonTitle,
+    IonToolbar
+  },
+  props: ["job"],
+  methods: { 
+    closeModal() {
+      modalController.dismiss({ dismissed: true });
+    }
+  },
+  setup() {
+    return {
+      closeOutline
+    };
+  },
+});
+</script>

src/views/Pipeline.vue

@@ -179,7 +179,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'">{{ job.statusDesc }}</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>
               </div>
             </ion-card-header>
 
@@ -299,6 +299,7 @@ import { showToast } from '@/utils'
 import JobActionsPopover from '@/components/JobActionsPopover.vue'
 import { Actions, hasPermission } from '@/authorization'
 import Filters from '@/components/Filters.vue';
+import FailedJobReasonModal from '@/views/FailedJobReasonModal.vue'
 
 export default defineComponent({
   name: "Pipeline",
@@ -390,6 +391,14 @@ export default defineComponent({
       this.segmentSelected === 'running' ? this.getRunningJobs():
       this.getJobHistory();
     },
+    async openFailedJobReason(job: any) {
+      const jobHistoryModal = await modalController.create({
+        component: FailedJobReasonModal,
+        componentProps: { job }
+      });
+
+      return jobHistoryModal.present();
+    },
     getJobExecutionTime(startTime: any, endTime: any){
       if (startTime && endTime) {
         const timeDiff = DateTime.fromMillis(endTime).diff( DateTime.fromMillis(startTime))