Merge pull request #80 from ymaheshwari1/#64

Implemented: support to display the run history for the current run(#64)

src/components/GroupHistoryModal.vue

@@ -0,0 +1,56 @@
+<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>{{ translate("Group history") }}</ion-title>
+    </ion-toolbar>
+  </ion-header>
+
+  <ion-content>
+    <ion-list>
+      <ion-item v-for="history in groupHistory" :key="history.jobRunId">
+        <ion-label>
+          <h3>{{ getTime(history.startTime) }}</h3>
+          <p>{{ getDate(history.startTime) }}</p>
+        </ion-label>
+        <ion-badge color="dark">{{ getTime(history.endTime - history.startTime) }}</ion-badge>
+      </ion-item>
+    </ion-list>
+  </ion-content>
+</template>
+
+<script setup lang="ts">
+import { translate } from "@/i18n";
+import {
+  IonBadge,
+  IonButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonTitle,
+  IonToolbar,
+  modalController,
+} from "@ionic/vue";
+import { closeOutline } from "ionicons/icons";
+import { defineProps } from "vue";
+import { getDate, getTime } from "@/utils";
+
+defineProps({
+  groupHistory: {
+    required: true,
+    default: {}
+  }
+})
+
+function closeModal() {
+  modalController.dismiss();
+}
+</script>

src/locales/en.json

@@ -48,9 +48,11 @@
   "Filters": "Filters",
   "facility group": "facility group",
   "Group": "Group",
+  "Group history": "Group history",
   "greater": "greater",
   "greater than or equal to": "greater than or equal to",
   "High": "High",
+  "History": "History",
   "Inventory Filters": "Inventory Filters",
   "Inventory rule created successfully": "Inventory rule created successfully",
   "Inventory Sort": "Inventory Sort",
@@ -74,6 +76,7 @@
   "New Run": "New Run",
   "New routing created": "New routing created",
   "Next rule": "Next rule",
+  "No available history for this group": "No available history for this group",
   "No archived routings": "No archived routings",
   "No runs scheduled": "No runs scheduled",
   "No time zone found": "No time zone found",
@@ -138,5 +141,6 @@
   "Updating inventory rules and filters": "Updating inventory rules and filters",
   "Username": "Username",
   "Version:": "Version: ",
+  "View All": "View All",
   "value": "value"
 }

src/services/RoutingService.ts

@@ -22,6 +22,20 @@ const fetchRoutingScheduleInformation = async (routingGroupId: string): Promise<
   });
 }
 
+const fetchRoutingHistory = async (routingGroupId: string): Promise<any> => {
+  return api({
+    url: `groups/${routingGroupId}/routingRuns`,
+    method: "GET"
+  });
+}
+
+const fetchGroupHistory = async (jobName: string): Promise<any> => {
+  return api({
+    url: `serviceJobRuns/${jobName}`,
+    method: "GET"
+  });
+}
+
 const createRoutingGroup = async (payload: any): Promise<any> => {
   return api({
     url: "groups",
@@ -130,9 +144,11 @@ export const OrderRoutingService = {
   deleteRoutingFilter,
   deleteRuleAction,
   deleteRuleCondition,
+  fetchGroupHistory,
   fetchOrderRouting,
   fetchRoutingGroupInformation,
   fetchRoutingGroups,
+  fetchRoutingHistory,
   fetchRoutingScheduleInformation,
   fetchRule,
   runNow,

src/utils/index.ts

@@ -26,11 +26,19 @@ const sortSequence = (sequence: Array<Group | Route | Rule>) => {
 }
 
 const getTime = (time: any) => {
-  return time ? DateTime.fromMillis(time).toLocaleString(DateTime.DATETIME_MED) : "-";
+  return time ? DateTime.fromMillis(time).toLocaleString(DateTime.TIME_24_WITH_SECONDS) : "-";
 }
 
 const getTimeFromSeconds = (time: any) => {
   return time ? DateTime.fromSeconds(time).toLocaleString(DateTime.DATETIME_MED) : "-";
 }
 
-export { getTime, getTimeFromSeconds, showToast, hasError, sortSequence }
+function getDate(runTime: any) {
+  return DateTime.fromMillis(runTime).toLocaleString(DateTime.DATE_MED);
+}
+
+function getDateAndTime(time: any) {
+  return time ? DateTime.fromMillis(time).toLocaleString(DateTime.DATETIME_MED) : "-";
+}
+
+export { getDate, getDateAndTime, getTime, getTimeFromSeconds, showToast, hasError, sortSequence }

src/views/BrokeringRoute.vue

@@ -57,7 +57,7 @@
         <section class="ion-padding">
           <main>
             <ion-item lines="none">
-              {{ translate("Description") }}
+              <h2>{{ translate("Description") }}</h2>
               <ion-button fill="clear" slot="end" @click="isDescUpdating ? updateGroupDescription() : (isDescUpdating = !isDescUpdating)">
                 {{ translate(isDescUpdating ? "Save" : "Edit") }}
               </ion-button>
@@ -66,13 +66,26 @@
               <ion-textarea v-if="isDescUpdating" aria-label="description" v-model="description"></ion-textarea>
               <ion-label v-else>{{ description }}</ion-label>
             </ion-item>
+            <ion-item lines="none">
+              <h2>{{ translate("History") }}</h2>
+              <ion-button v-if="groupHistory.length" fill="clear" @click="showGroupHistory" slot="end">{{ translate("View All") }}</ion-button>
+            </ion-item>
+            <p class="empty-state" v-if="!groupHistory.length">{{ translate("No available history for this group") }}</p>
+            <ion-item v-else>
+              <ion-label>
+                <h3>{{ getTime(groupHistory[0].startTime) }}</h3>
+                <p>{{ getDate(groupHistory[0].startTime) }}</p>
+              </ion-label>
+              <ion-badge color="dark">{{ getTime(groupHistory[0].endTime - groupHistory[0].startTime) }}</ion-badge>
+            </ion-item>
           </main>
           <aside>
             <ion-card>
               <ion-card-header>
                 <ion-card-title>
                   {{ translate("Scheduler") }}
                 </ion-card-title>
+                <ion-badge>{{ timeTillJobUsingSeconds(job.nextExecutionDateTime) }}</ion-badge>
               </ion-card-header>
               <ion-item v-show="typeof isOmsConnectionExist === 'boolean' && !isOmsConnectionExist" lines="none">
                 <ion-label color="danger" class="ion-text-wrap">
@@ -104,10 +117,10 @@
               </div>
             </div>
             <ion-item>
-              {{ `Created at ${getTime(currentRoutingGroup.createdDate)}` }}
+              {{ `Created at ${getDateAndTime(currentRoutingGroup.createdDate)}` }}
             </ion-item>
             <ion-item>
-              {{ `Updated at ${getTime(currentRoutingGroup.lastUpdatedStamp)}` }}
+              {{ `Updated at ${getDateAndTime(currentRoutingGroup.lastUpdatedStamp)}` }}
             </ion-item>
           </aside>
         </section>
@@ -132,9 +145,10 @@ import ArchivedRoutingModal from "@/components/ArchivedRoutingModal.vue"
 import { OrderRoutingService } from "@/services/RoutingService";
 import logger from "@/logger";
 import { DateTime } from "luxon";
-import { hasError, getTime, getTimeFromSeconds, showToast, sortSequence } from "@/utils";
+import { hasError, getDate, getDateAndTime, getTime, getTimeFromSeconds, showToast, sortSequence } from "@/utils";
 import emitter from "@/event-bus";
 import { translate } from "@/i18n";
+import GroupHistoryModal from "@/components/GroupHistoryModal.vue"
 
 const router = useRouter();
 const store = useStore();
@@ -153,6 +167,7 @@ let hasUnsavedChanges = ref(false)
 
 let job = ref({}) as any
 let orderRoutings = ref([]) as any
+let groupHistory = ref([]) as any
 
 const currentRoutingGroup: any = computed((): Group => store.getters["orderRouting/getCurrentRoutingGroup"])
 const currentEComStore = computed(() => store.getters["user/getCurrentEComStore"])
@@ -161,6 +176,7 @@ const getStatusDesc = computed(() => (id: string) => store.getters["util/getStat
 
 onIonViewWillEnter(async () => {
   await store.dispatch("orderRouting/fetchCurrentRoutingGroup", props.routingGroupId)
+  await fetchGroupHistory()
   store.dispatch("util/fetchStatusInformation")
 
   job.value = currentRoutingGroup.value["schedule"] ? JSON.parse(JSON.stringify(currentRoutingGroup.value))["schedule"] : {}
@@ -232,6 +248,27 @@ async function saveChanges() {
   return alert.present();
 }
 
+async function fetchGroupHistory() {
+  groupHistory.value = []
+
+  if(!currentRoutingGroup.value?.jobName) {
+    return;
+  }
+
+  try {
+    const resp = await OrderRoutingService.fetchGroupHistory(currentRoutingGroup.value.jobName)
+
+    if(!hasError(resp)) {
+      // Sorting the history based on startTime, as we does not get the records in sorted order from api
+      groupHistory.value = resp.data.sort((a: any, b: any) => b.startTime - a.startTime)
+    } else {
+      throw resp.data;
+    }
+  } catch(err) {
+    logger.error(err)
+  }
+}
+
 async function saveSchedule() {
   // If this is the first time then we are fetching the omsConnection status, as if the value of isOmsConnectionExist value is a boolean it means we have previously fetched the connection status
   if(typeof isOmsConnectionExist.value !== "boolean") {
@@ -267,6 +304,14 @@ async function saveSchedule() {
   }
 }
 
+function timeTillJobUsingSeconds(time: any) {
+  if(!time) {
+    return;
+  }
+  const timeDiff = DateTime.fromSeconds(time).diff(DateTime.local());
+  return DateTime.local().plus(timeDiff).toRelative();
+}
+
 async function disable() {
   const alert = await alertController
     .create({
@@ -546,6 +591,15 @@ async function updateRoutingGroup(payload: any) {
   emitter.emit("dismissLoader")
   return routingGroupId
 }
+
+async function showGroupHistory() {
+  const groupHistoryModal = await modalController.create({
+    component: GroupHistoryModal,
+    componentProps: { groupHistory: groupHistory.value }
+  })
+
+  groupHistoryModal.present();
+}
 </script>
 
 <style scoped>

src/views/BrokeringRuns.vue

@@ -36,10 +36,10 @@
               <ion-label slot="end">{{ group.runTime ? group.runTime : "-" }}</ion-label>
             </ion-item>
             <ion-item>
-              {{ getTime(group.createdDate) }}
+              {{ getDateAndTime(group.createdDate) }}
             </ion-item>
             <ion-item lines="none">
-              {{ getTime(group.lastUpdatedStamp) }}
+              {{ getDateAndTime(group.lastUpdatedStamp) }}
             </ion-item>
           </ion-card>
         </section>
@@ -54,7 +54,7 @@
 <script setup lang="ts">
 import { translate } from "@/i18n";
 import { Group } from "@/types";
-import { getTime, showToast } from "@/utils";
+import { getDateAndTime, showToast } from "@/utils";
 import { IonButton, IonButtons, IonCard, IonCardHeader, IonCardTitle, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonPage, IonSpinner, IonTitle, IonToolbar, alertController, onIonViewWillEnter } from "@ionic/vue";
 import { addOutline } from "ionicons/icons"
 import { computed, ref } from "vue";