From cde14061068d008f289cb69a65e1afa7d61d1007 Mon Sep 17 00:00:00 2001
From: Tim Parsons <tep46@cornell.edu>
Date: Tue, 19 Apr 2022 09:41:48 -0400
Subject: [PATCH 1/4] [BI-1459] - Create page to view jobs in a program

---
 src/breeding-insight/dao/ImportDAO.ts         |   9 +
 .../model/import/ImportResponse.ts            |  17 +-
 src/breeding-insight/service/ImportService.ts |  25 +++
 src/components/layouts/UserSideBarLayout.vue  |  11 +-
 .../expandableTable/ExpandableTable.vue       |  29 +++-
 src/router/index.ts                           |  11 ++
 src/views/Home.vue                            |  37 +----
 src/views/import/ImportTemplate.vue           |   2 +-
 src/views/program/JobManagement.vue           | 154 ++++++++++++++++++
 9 files changed, 249 insertions(+), 46 deletions(-)
 create mode 100644 src/views/program/JobManagement.vue

diff --git a/src/breeding-insight/dao/ImportDAO.ts b/src/breeding-insight/dao/ImportDAO.ts
index fd5ebf8ba..37573002a 100644
--- a/src/breeding-insight/dao/ImportDAO.ts
+++ b/src/breeding-insight/dao/ImportDAO.ts
@@ -99,6 +99,15 @@ export class ImportDAO {
     return new BiResponse(data);
   }
 
+  static async getProgramUploads(programId: string, includeMapping: boolean) {
+    const {data} = await api.call({
+      url: `${process.env.VUE_APP_BI_API_V1_PATH}/programs/${programId}/import/data?mapping=${includeMapping}`,
+      method: 'get'
+    }) as Response;
+
+    return new BiResponse(data);
+  }
+
   static async updateUploadData(programId: string, mappingId: string, uploadId: string, userInput: any, commit: boolean) {
     let url = `${process.env.VUE_APP_BI_API_V1_PATH}/programs/${programId}/import/mappings/${mappingId}/data/${uploadId}`;
     url += commit ? '/commit' : '/preview';
diff --git a/src/breeding-insight/model/import/ImportResponse.ts b/src/breeding-insight/model/import/ImportResponse.ts
index b766033be..99b41aabc 100644
--- a/src/breeding-insight/model/import/ImportResponse.ts
+++ b/src/breeding-insight/model/import/ImportResponse.ts
@@ -17,15 +17,30 @@
 
 import {ImportProgress} from "@/breeding-insight/model/import/ImportProgress";
 import {ImportPreview} from "@/breeding-insight/model/import/ImportPreview";
+import { User } from '@/breeding-insight/model/User';
 
 export class ImportResponse {
   importId?: string;
   progress?: ImportProgress;
   preview?: ImportPreview;
+  uploadFileName?: string;
+  importMappingName?:string;
+  importType?:string;
+  createdByUser?: User;
+  updatedByUser?: User;
+  createdAt?: Date;
+  updatedAt?: Date;
 
-  constructor({importId, progress, preview}: ImportResponse) {
+  constructor({importId, progress, preview, uploadFileName, importMappingName, importType, createdByUser, updatedByUser, createdAt, updatedAt}: ImportResponse) {
     this.importId = importId;
     this.progress = progress;
     this.preview = preview;
+    this.uploadFileName = uploadFileName;
+    this.importMappingName = importMappingName;
+    this.importType = importType;
+    this.createdByUser = createdByUser;
+    this.updatedByUser = updatedByUser;
+    this.createdAt = createdAt;
+    this.updatedAt = updatedAt;
   }
 }
\ No newline at end of file
diff --git a/src/breeding-insight/service/ImportService.ts b/src/breeding-insight/service/ImportService.ts
index 2f49e7112..40bb02bae 100644
--- a/src/breeding-insight/service/ImportService.ts
+++ b/src/breeding-insight/service/ImportService.ts
@@ -109,6 +109,31 @@ export class ImportService {
 
   }
 
+  static async getProgramUploads(programId: string, includeMapping: boolean): Promise<ImportResponse[]> {
+    if (!programId || programId === null) {
+      throw 'Program ID not provided';
+    }
+
+    try {
+      const response: BiResponse = await ImportDAO.getProgramUploads(programId, includeMapping);
+      const data: any = response.result;
+      if(data) {
+        const importResponse = data.map((response: ImportResponse) => new ImportResponse(response));
+        return importResponse;
+      } else {
+        return [];
+      }
+    } catch (e) {
+      if (e.response && e.response.statusText) {
+        e.errorMessage = e.response.statusText;
+      } else {
+        e.errorMessage = this.getUploadUnknown;
+      }
+      throw e;
+    }
+
+  }
+
   static async updateDataUpload(programId: string, mappingId: string, uploadId: string, userInput: any, commit: boolean) {
     if (!programId || programId === null) {
       throw 'Program ID not provided';
diff --git a/src/components/layouts/UserSideBarLayout.vue b/src/components/layouts/UserSideBarLayout.vue
index 7467bb633..43e1339ae 100644
--- a/src/components/layouts/UserSideBarLayout.vue
+++ b/src/components/layouts/UserSideBarLayout.vue
@@ -128,11 +128,19 @@
                 BrAPI
               </router-link>
             </li>
+            <li>
+              <router-link
+                  v-bind:to="{name: 'job-management', params: {programId: activeProgram.id}}"
+                  :id="jobManagementMenuId"
+              >
+                Job Management
+              </router-link>
+            </li>
             <li>
               <router-link
                   v-bind:to="{name: 'trials-studies', params: {programId: activeProgram.id}}"
               >
-                Trials and Studies - Beta
+                Trials and Studies <span class="ml-2 tag is-warning">Beta</span>
               </router-link>
             </li>
           </ul>
@@ -202,6 +210,7 @@
     private importFileMenuId: string = "usersidebarlayout-import-file-menu";
     private ontologyMenuId: string = "usersidebarlayout-ontology-menu";
     private programManagementMenuId: string = "usersidebarlayout-program-management-menu";
+    private jobManagementMenuId: string = "usersidebarlayout-job-management-menu";
     private brAPIMenuId: string = "usersidebarlayout-brapi-menu";
     private germplasmMenuId: string = "usersidebarlayout-germplasm-menu";
 
diff --git a/src/components/tables/expandableTable/ExpandableTable.vue b/src/components/tables/expandableTable/ExpandableTable.vue
index 092868095..4712aec6d 100644
--- a/src/components/tables/expandableTable/ExpandableTable.vue
+++ b/src/components/tables/expandableTable/ExpandableTable.vue
@@ -43,22 +43,24 @@
     >
 
       <slot></slot>
-      <b-table-column v-if="editable || archivable" v-slot="props" cell-class="has-text-right is-narrow" :th-attrs="(column) => ({scope:'col'})">
+      <b-table-column v-if="editable || details || archivable" v-slot="props" cell-class="has-text-right is-narrow" :th-attrs="(column) => ({scope:'col'})">
         <a
-            v-if="editable"
+            v-if="editable || details"
             data-testid="edit"
             v-on:click="props.toggleDetails(props.row)"
             v-on:keypress.enter.space="props.toggleDetails(props.row)"
             tabindex="0"
         >
-          Edit
+          <span v-if="editable">Edit</span>
+          <span v-if="details">Details</span>
+
+          <span v-if="(editable || details) && !isVisibleDetailRow(props.row)" class="icon is-small margin-right-2 has-vertical-align-middle">
+            <ChevronRightIcon size="1x" aria-hidden="true"></ChevronRightIcon>
+          </span>
+            <span v-if="(editable || details) && isVisibleDetailRow(props.row)" class="icon is-small margin-right-2 has-vertical-align-middle">
+            <ChevronDownIcon size="1x" aria-hidden="true"></ChevronDownIcon>
+          </span>
         </a>
-        <span v-if="editable && !isVisibleDetailRow(props.row)" class="icon is-small margin-right-2 has-vertical-align-middle">
-          <ChevronRightIcon size="1x" aria-hidden="true"></ChevronRightIcon>
-        </span>
-        <span v-if="editable && isVisibleDetailRow(props.row)" class="icon is-small margin-right-2 has-vertical-align-middle">
-          <ChevronDownIcon size="1x" aria-hidden="true"></ChevronDownIcon>
-        </span>
         <a
             v-if="archivable"
             v-on:click="$emit('remove', props.row.data)"
@@ -75,6 +77,7 @@
 
       <template v-slot:detail="props">
         <EditDataRowForm class="mb-0"
+                         v-if="editable"
                          v-bind:data-form-state="dataFormState"
                          v-on:submit="validateAndSubmit(props.row)"
                          v-on:cancel="cancelEditClicked(props.row)"
@@ -85,6 +88,12 @@
               name="edit"
           />
         </EditDataRowForm>
+
+        <slot
+            v-if="details"
+            v-bind:row="props.row.data"
+            name="detail"
+        />
       </template>
 
       <template v-slot:pagination>
@@ -128,6 +137,8 @@ export default class ExpandableTable extends Mixins(ValidationMixin) {
   rowClasses: any;
   @Prop()
   loading!: boolean;
+  @Prop()
+  details!: boolean;
 
   private tableRows: Array<TableRow<any>> = new Array<TableRow<any>>();
   private openDetail: Array<TableRow<any>> = new Array<TableRow<any>>();
diff --git a/src/router/index.ts b/src/router/index.ts
index a1818f7f7..f12c49b21 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -64,6 +64,7 @@ import Germplasm from "@/views/germplasm/Germplasm.vue";
 import GermplasmLists from "@/views/germplasm/GermplasmLists.vue";
 import GermplasmDetails from "@/views/germplasm/GermplasmDetails.vue";
 import ProgramConfiguration from "@/views/program/ProgramConfiguration.vue";
+import JobManagement from '@/views/program/JobManagement.vue';
 
 Vue.use(VueRouter);
 
@@ -378,6 +379,16 @@ const routes = [
     component: BrAPIInfo,
     beforeEnter: processProgramNavigation
   },
+  {
+    path: '/programs/:programId/jobs',
+    name: 'job-management',
+    meta: {
+      title: 'Job Management',
+      layout: layouts.userSideBar
+    },
+    component: JobManagement,
+    beforeEnter: processProgramNavigation
+  },
   {
     path: '/programs/:programId/brapi/authorize',
     name: 'brapi-authorize',
diff --git a/src/views/Home.vue b/src/views/Home.vue
index 73dc11cd9..4f053513e 100644
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@@ -21,37 +21,6 @@
     <div class="columns">
       <div class="column is-three-fifths">
         <p class="title">Welcome, {{ activeUser.name }}!</p>
-        <div class="columns is-mobile">
-          <div class="column">
-            <p class="title is-6">Last activity:</p>
-             <div class="columns is-mobile">
-               <div class="column is-narrow">
-                  <p>Data entry for trial Y4-03-10</p>
-               </div>
-               <div class="column is-narrow">
-                 <b-button class="button is-primary">RESUME</b-button>
-               </div>
-             </div>
-          </div>
-          <div class="column">
-            <p class="title is-6">Most common tasks:</p>
-            <p>Inventory</p>
-            <p>Trial Y4--02-10</p>
-            <p>Trial Y4-01-01</p>
-            <p>Experiments</p>
-          </div>
-        </div>
-
-        <div class="columns is-mobile">
-          <div class="column">
-            <p class="title is-6">Program Activity Log</p>
-            <p>Username | Type of activity here, data changed, etc. | 2019-12-12 4:08pm</p>
-            <p>Username | Type of activity here, data changed, etc. | 2019-12-12 4:08pm</p>
-            <p>Username | Type of activity here, data changed, etc. | 2019-12-12 4:08pm</p>
-            <p>Username | Type of activity here, data changed, etc. | 2019-12-12 4:08pm</p>
-            <p>Username | Type of activity here, data changed, etc. | 2019-12-12 4:08pm</p>
-          </div>
-        </div>
       </div>
       <div class="column">
         <div class="card">
@@ -68,9 +37,9 @@
               </div>
             </div>
           </div>
-          <footer class="card-footer">
-            <a href="#" class="card-footer-item">Edit</a>
-          </footer>
+<!--          <footer class="card-footer">-->
+<!--            <a href="#" class="card-footer-item">Edit</a>-->
+<!--          </footer>-->
         </div>
       </div>
     </div>
diff --git a/src/views/import/ImportTemplate.vue b/src/views/import/ImportTemplate.vue
index 7f08cac99..ff5b5af29 100644
--- a/src/views/import/ImportTemplate.vue
+++ b/src/views/import/ImportTemplate.vue
@@ -496,7 +496,7 @@ export default class ImportTemplate extends ProgramsBase {
             this.pagination.totalCount = previewResponse.preview.rows.length;
             this.pagination.pageSize = 10;
             this.pagination.currentPage = 1;
-            this.pagination.totalPages = 1;
+            this.pagination.totalPages = this.pagination.totalCount.valueOf() / this.pagination.pageSize.valueOf();
           }
         }
         return previewResponse;
diff --git a/src/views/program/JobManagement.vue b/src/views/program/JobManagement.vue
new file mode 100644
index 000000000..7aadf275a
--- /dev/null
+++ b/src/views/program/JobManagement.vue
@@ -0,0 +1,154 @@
+<!--
+  - See the NOTICE file distributed with this work for additional information
+  - regarding copyright ownership.
+  -
+  - Licensed under the Apache License, Version 2.0 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  -     http://www.apache.org/licenses/LICENSE-2.0
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -->
+
+<template>
+  <div id="program-job-management">
+    <h1 class="title">
+      Job Management
+    </h1>
+    <ExpandableTable
+        v-bind:records.sync="jobs"
+        v-bind:loading="loading"
+        v-bind:pagination="pagination"
+        v-bind:details="true"
+        v-bind:default-sort="['data.createdAt', 'asc']"
+    >
+      <b-table-column field="data.progress" label="Status" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
+        <span class="tag" :class="progressTagType(props.row.data.progress)">
+          {{ formatProgress(props.row.data.progress) }}
+        </span>
+      </b-table-column>
+      <b-table-column field="data.importType" label="Type" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
+        {{ props.row.data.importType}}
+      </b-table-column>
+      <b-table-column field="data.createdAt" label="Submitted At" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
+        {{ formatDate(props.row.data.createdAt) }}
+      </b-table-column>
+      <b-table-column field="data.createdAt" label="Last Updated" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
+        {{ formatDate(props.row.data.updatedAt) }}
+      </b-table-column>
+      <b-table-column field="data.progress.message" label="Status Message" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
+        {{ props.row.data.progress.message }}
+      </b-table-column>
+
+      <template v-slot:detail="{row}">
+        <div class="column">
+          <div>
+            <span class="has-text-weight-bold">Status Message: </span>{{ row.progress.message }}
+          </div>
+          <div>
+            <span class="has-text-weight-bold">Import Template Name: </span>{{ row.importMappingName}}
+          </div>
+          <div>
+            <span class="has-text-weight-bold">Uploaded By: </span>{{ row.createdByUser.name }}
+          </div>
+          <div>
+            <span class="has-text-weight-bold">Uploaded File: </span>{{ row.uploadFileName }}
+          </div>
+        </div>
+      </template>
+
+      <template v-slot:emptyMessage>
+          <p class="has-text-weight-bold">
+            Nothing has been processed.
+          </p>
+      </template>
+    </ExpandableTable>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator';
+import ImportInfoTemplateMessageBox from '@/components/file-import/ImportInfoTemplateMessageBox.vue';
+import ConfirmImportMessageBox from '@/components/trait/ConfirmImportMessageBox.vue';
+import ImportTemplate from '@/views/import/ImportTemplate.vue';
+import { AlertTriangleIcon } from 'vue-feather-icons';
+import BasicInputField from '@/components/forms/BasicInputField.vue';
+import ExpandableTable from '@/components/tables/expandableTable/ExpandableTable.vue';
+import { ImportService } from '@/breeding-insight/service/ImportService';
+import { mapGetters } from 'vuex';
+import { Program } from '@/breeding-insight/model/Program';
+import { Pagination } from '@/breeding-insight/model/BiResponse';
+import { PaginationController } from '@/breeding-insight/model/view_models/PaginationController';
+import { ImportProgress } from '@/breeding-insight/model/import/ImportProgress';
+import moment from 'moment';
+
+@Component({
+  components: {
+    ExpandableTable, ImportInfoTemplateMessageBox,
+    ConfirmImportMessageBox, ImportTemplate,
+    AlertTriangleIcon, BasicInputField
+  },
+  computed: {
+    ...mapGetters([
+      'activeProgram'
+    ])
+  }
+})
+export default class JobManagement extends Vue {
+
+  private activeProgram?: Program;
+  private jobs?: any[] = [];
+  private pagination: Pagination = new Pagination();
+  private paginationController: PaginationController = new PaginationController();
+  private loading = true;
+
+  mounted() {
+    this.getJobs();
+  }
+
+  formatDate(date: Date) {
+    return moment(date).format();
+  }
+
+  formatProgress(progress:ImportProgress) {
+    if(progress.statuscode === 202) {
+      return  "In Progress";
+    } else if(progress.statuscode === 200) {
+      return "Finished";
+    } else {
+      return "Processing Error";
+    }
+  }
+
+  progressTagType(progress:ImportProgress) {
+    if(progress.statuscode === 202) {
+      return  "is-warning";
+    } else if(progress.statuscode === 200) {
+      return "is-success";
+    } else {
+      return "is-error";
+    }
+  }
+
+  async getJobs() {
+    try {
+      this.jobs = await ImportService.getProgramUploads(this.activeProgram!.id!, false);
+      this.pagination.totalCount = this.jobs.length;
+      this.pagination.pageSize = 10;
+      this.pagination.currentPage = 1;
+      this.pagination.totalPages = this.pagination.totalCount.valueOf() / this.pagination.pageSize.valueOf();
+    } catch(e) {
+      this.$emit('show-error-notification', 'Error while trying to fetch process statuses');
+      throw e;
+    } finally {
+      this.loading = false;
+    }
+  }
+
+}
+</script>
\ No newline at end of file

From be1be4c2d886bf4b76c6b58c9dfcd103ef600410 Mon Sep 17 00:00:00 2001
From: Tim Parsons <tep46@cornell.edu>
Date: Wed, 20 Apr 2022 10:29:02 -0400
Subject: [PATCH 2/4] [BI-1459] - Adding Job data model

---
 src/breeding-insight/dao/ImportDAO.ts         |  9 ---
 src/breeding-insight/dao/JobDAO.ts            | 31 ++++++++
 .../model/import/ImportResponse.ts            |  7 +-
 src/breeding-insight/model/job/Job.ts         | 39 ++++++++++
 src/breeding-insight/model/job/JobDetail.ts   | 20 +++++
 src/breeding-insight/service/ImportService.ts | 25 ------
 src/breeding-insight/service/JobService.ts    | 48 ++++++++++++
 src/components/layouts/UserSideBarLayout.vue  |  2 +-
 src/router/index.ts                           |  2 +-
 src/views/program/JobManagement.vue           | 76 +++++++++++++------
 10 files changed, 198 insertions(+), 61 deletions(-)
 create mode 100644 src/breeding-insight/dao/JobDAO.ts
 create mode 100644 src/breeding-insight/model/job/Job.ts
 create mode 100644 src/breeding-insight/model/job/JobDetail.ts
 create mode 100644 src/breeding-insight/service/JobService.ts

diff --git a/src/breeding-insight/dao/ImportDAO.ts b/src/breeding-insight/dao/ImportDAO.ts
index 37573002a..fd5ebf8ba 100644
--- a/src/breeding-insight/dao/ImportDAO.ts
+++ b/src/breeding-insight/dao/ImportDAO.ts
@@ -99,15 +99,6 @@ export class ImportDAO {
     return new BiResponse(data);
   }
 
-  static async getProgramUploads(programId: string, includeMapping: boolean) {
-    const {data} = await api.call({
-      url: `${process.env.VUE_APP_BI_API_V1_PATH}/programs/${programId}/import/data?mapping=${includeMapping}`,
-      method: 'get'
-    }) as Response;
-
-    return new BiResponse(data);
-  }
-
   static async updateUploadData(programId: string, mappingId: string, uploadId: string, userInput: any, commit: boolean) {
     let url = `${process.env.VUE_APP_BI_API_V1_PATH}/programs/${programId}/import/mappings/${mappingId}/data/${uploadId}`;
     url += commit ? '/commit' : '/preview';
diff --git a/src/breeding-insight/dao/JobDAO.ts b/src/breeding-insight/dao/JobDAO.ts
new file mode 100644
index 000000000..a5e64b8fa
--- /dev/null
+++ b/src/breeding-insight/dao/JobDAO.ts
@@ -0,0 +1,31 @@
+/*
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import * as api from '@/util/api';
+import { BiResponse, Response } from '@/breeding-insight/model/BiResponse';
+
+export class JobDAO {
+
+  static async getProgramJobs(programId: string) {
+    const {data} = await api.call({
+      url: `${process.env.VUE_APP_BI_API_V1_PATH}/programs/${programId}/jobs`,
+      method: 'get'
+    }) as Response;
+
+    return new BiResponse(data);
+  }
+}
diff --git a/src/breeding-insight/model/import/ImportResponse.ts b/src/breeding-insight/model/import/ImportResponse.ts
index 99b41aabc..82c0f3e9c 100644
--- a/src/breeding-insight/model/import/ImportResponse.ts
+++ b/src/breeding-insight/model/import/ImportResponse.ts
@@ -18,8 +18,9 @@
 import {ImportProgress} from "@/breeding-insight/model/import/ImportProgress";
 import {ImportPreview} from "@/breeding-insight/model/import/ImportPreview";
 import { User } from '@/breeding-insight/model/User';
+import { JobDetail } from '@/breeding-insight/model/job/JobDetail';
 
-export class ImportResponse {
+export class ImportResponse extends JobDetail{
   importId?: string;
   progress?: ImportProgress;
   preview?: ImportPreview;
@@ -31,7 +32,8 @@ export class ImportResponse {
   createdAt?: Date;
   updatedAt?: Date;
 
-  constructor({importId, progress, preview, uploadFileName, importMappingName, importType, createdByUser, updatedByUser, createdAt, updatedAt}: ImportResponse) {
+  constructor({importId, progress, preview, uploadFileName, importMappingName, importType, createdByUser, updatedByUser, createdAt, updatedAt, jobType}: ImportResponse) {
+    super();
     this.importId = importId;
     this.progress = progress;
     this.preview = preview;
@@ -42,5 +44,6 @@ export class ImportResponse {
     this.updatedByUser = updatedByUser;
     this.createdAt = createdAt;
     this.updatedAt = updatedAt;
+    this.jobType = jobType;
   }
 }
\ No newline at end of file
diff --git a/src/breeding-insight/model/job/Job.ts b/src/breeding-insight/model/job/Job.ts
new file mode 100644
index 000000000..efa3897f1
--- /dev/null
+++ b/src/breeding-insight/model/job/Job.ts
@@ -0,0 +1,39 @@
+/*
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { User } from '@/breeding-insight/model/User';
+import { JobDetail } from '@/breeding-insight/model/job/JobDetail';
+
+export class Job {
+  statuscode?: number;
+  statusMessage?: string;
+  jobType?: string;
+  createdAt?: Date;
+  updatedAt?: Date;
+  createdByUser?: User;
+  jobDetail?: JobDetail;
+
+  constructor ({statuscode, statusMessage, jobType, createdAt, updatedAt, createdByUser, jobDetail}: Job) {
+    this.statuscode = statuscode;
+    this.statusMessage = statusMessage;
+    this.jobType = jobType;
+    this.createdAt = createdAt;
+    this.updatedAt = updatedAt;
+    this.createdByUser = createdByUser;
+    this.jobDetail = jobDetail;
+  }
+}
\ No newline at end of file
diff --git a/src/breeding-insight/model/job/JobDetail.ts b/src/breeding-insight/model/job/JobDetail.ts
new file mode 100644
index 000000000..f9f078f15
--- /dev/null
+++ b/src/breeding-insight/model/job/JobDetail.ts
@@ -0,0 +1,20 @@
+/*
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export class JobDetail {
+  jobType?: string;
+}
\ No newline at end of file
diff --git a/src/breeding-insight/service/ImportService.ts b/src/breeding-insight/service/ImportService.ts
index 40bb02bae..2f49e7112 100644
--- a/src/breeding-insight/service/ImportService.ts
+++ b/src/breeding-insight/service/ImportService.ts
@@ -109,31 +109,6 @@ export class ImportService {
 
   }
 
-  static async getProgramUploads(programId: string, includeMapping: boolean): Promise<ImportResponse[]> {
-    if (!programId || programId === null) {
-      throw 'Program ID not provided';
-    }
-
-    try {
-      const response: BiResponse = await ImportDAO.getProgramUploads(programId, includeMapping);
-      const data: any = response.result;
-      if(data) {
-        const importResponse = data.map((response: ImportResponse) => new ImportResponse(response));
-        return importResponse;
-      } else {
-        return [];
-      }
-    } catch (e) {
-      if (e.response && e.response.statusText) {
-        e.errorMessage = e.response.statusText;
-      } else {
-        e.errorMessage = this.getUploadUnknown;
-      }
-      throw e;
-    }
-
-  }
-
   static async updateDataUpload(programId: string, mappingId: string, uploadId: string, userInput: any, commit: boolean) {
     if (!programId || programId === null) {
       throw 'Program ID not provided';
diff --git a/src/breeding-insight/service/JobService.ts b/src/breeding-insight/service/JobService.ts
new file mode 100644
index 000000000..e7190d9e0
--- /dev/null
+++ b/src/breeding-insight/service/JobService.ts
@@ -0,0 +1,48 @@
+/*
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { BiResponse } from '@/breeding-insight/model/BiResponse';
+import { Job } from '@/breeding-insight/model/job/Job';
+import { JobDAO } from '@/breeding-insight/dao/JobDAO';
+
+export class JobService {
+  static getJobsUnknown: string = 'An unknown error occurred while retrieving job statuses';
+
+  static async getProgramJobs(programId: string): Promise<Job[]> {
+    if (!programId) {
+      throw 'Program ID not provided';
+    }
+
+    try {
+      const response: BiResponse = await JobDAO.getProgramJobs(programId);
+      const data: any = response.result;
+      if(data) {
+        return data.map((response: Job) => new Job(response));
+      } else {
+        return [];
+      }
+    } catch (e) {
+      if (e.response && e.response.statusText) {
+        e.errorMessage = e.response.statusText;
+      } else {
+        e.errorMessage = this.getJobsUnknown;
+      }
+      throw e;
+    }
+
+  }
+}
\ No newline at end of file
diff --git a/src/components/layouts/UserSideBarLayout.vue b/src/components/layouts/UserSideBarLayout.vue
index 43e1339ae..ac99c2a71 100644
--- a/src/components/layouts/UserSideBarLayout.vue
+++ b/src/components/layouts/UserSideBarLayout.vue
@@ -133,7 +133,7 @@
                   v-bind:to="{name: 'job-management', params: {programId: activeProgram.id}}"
                   :id="jobManagementMenuId"
               >
-                Job Management
+                Jobs
               </router-link>
             </li>
             <li>
diff --git a/src/router/index.ts b/src/router/index.ts
index f12c49b21..81c686410 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -383,7 +383,7 @@ const routes = [
     path: '/programs/:programId/jobs',
     name: 'job-management',
     meta: {
-      title: 'Job Management',
+      title: 'Jobs',
       layout: layouts.userSideBar
     },
     component: JobManagement,
diff --git a/src/views/program/JobManagement.vue b/src/views/program/JobManagement.vue
index 7aadf275a..52980ef46 100644
--- a/src/views/program/JobManagement.vue
+++ b/src/views/program/JobManagement.vue
@@ -18,46 +18,69 @@
 <template>
   <div id="program-job-management">
     <h1 class="title">
-      Job Management
+      Jobs
     </h1>
+
+    <button
+        class="button is-primary has-text-weight-bold is-pulled-right"
+        v-on:click="refresh"
+        data-testid="refreshJobsBtn"
+    >
+        Refresh
+    </button>
+
+    <div class="is-clearfix"></div>
+
     <ExpandableTable
         v-bind:records.sync="jobs"
         v-bind:loading="loading"
         v-bind:pagination="pagination"
         v-bind:details="true"
-        v-bind:default-sort="['data.createdAt', 'asc']"
+        v-bind:default-sort="['data.createdAt', 'desc']"
     >
-      <b-table-column field="data.progress" label="Status" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
-        <span class="tag" :class="progressTagType(props.row.data.progress)">
-          {{ formatProgress(props.row.data.progress) }}
+      <b-table-column field="data.statuscode" label="Status" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
+        <span class="tag" :class="progressTagType(props.row.data.statuscode)">
+          {{ formatProgress(props.row.data.statuscode) }}
         </span>
       </b-table-column>
-      <b-table-column field="data.importType" label="Type" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
-        {{ props.row.data.importType}}
+      <b-table-column field="data.jobType" label="Type" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
+        {{ props.row.data.jobType}}
+      </b-table-column>
+      <b-table-column field="data.createdByUser.name" label="Submitted By" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
+        {{ props.row.data.createdByUser.name}}
       </b-table-column>
       <b-table-column field="data.createdAt" label="Submitted At" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
         {{ formatDate(props.row.data.createdAt) }}
       </b-table-column>
-      <b-table-column field="data.createdAt" label="Last Updated" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
+      <b-table-column field="data.updatedAt" label="Last Updated" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
         {{ formatDate(props.row.data.updatedAt) }}
       </b-table-column>
-      <b-table-column field="data.progress.message" label="Status Message" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
-        {{ props.row.data.progress.message }}
+      <b-table-column field="data.statusMessage" label="Status Message" sortable v-slot="props" :th-attrs="(column) => ({scope:'col'})">
+        {{ props.row.data.statusMessage }}
       </b-table-column>
 
       <template v-slot:detail="{row}">
-        <div class="column">
+        <div class="column" v-if="row.jobDetail.jobType === 'IMPORT'">
+          <div>
+            <span class="has-text-weight-bold">Status Message: </span>{{ row.jobDetail.progress.message }}
+          </div>
           <div>
-            <span class="has-text-weight-bold">Status Message: </span>{{ row.progress.message }}
+            <span class="has-text-weight-bold">In Progress (count): </span>{{ row.jobDetail.progress.inProgress }}
           </div>
           <div>
-            <span class="has-text-weight-bold">Import Template Name: </span>{{ row.importMappingName}}
+            <span class="has-text-weight-bold">Complete (count): </span>{{ row.jobDetail.progress.finished }}
+          </div>
+          <div>
+            <span class="has-text-weight-bold">Total (count): </span>{{ row.jobDetail.progress.total }}
+          </div>
+          <div>
+            <span class="has-text-weight-bold">Import Template Name: </span>{{ row.jobDetail.importMappingName}}
           </div>
           <div>
             <span class="has-text-weight-bold">Uploaded By: </span>{{ row.createdByUser.name }}
           </div>
           <div>
-            <span class="has-text-weight-bold">Uploaded File: </span>{{ row.uploadFileName }}
+            <span class="has-text-weight-bold">Uploaded File: </span>{{ row.jobDetail.uploadFileName }}
           </div>
         </div>
       </template>
@@ -86,6 +109,8 @@ import { Pagination } from '@/breeding-insight/model/BiResponse';
 import { PaginationController } from '@/breeding-insight/model/view_models/PaginationController';
 import { ImportProgress } from '@/breeding-insight/model/import/ImportProgress';
 import moment from 'moment';
+import { JobService } from '@/breeding-insight/service/JobService';
+import { Job } from '@/breeding-insight/model/job/Job';
 
 @Component({
   components: {
@@ -102,7 +127,7 @@ import moment from 'moment';
 export default class JobManagement extends Vue {
 
   private activeProgram?: Program;
-  private jobs?: any[] = [];
+  private jobs?: Job[] = [];
   private pagination: Pagination = new Pagination();
   private paginationController: PaginationController = new PaginationController();
   private loading = true;
@@ -115,29 +140,34 @@ export default class JobManagement extends Vue {
     return moment(date).format();
   }
 
-  formatProgress(progress:ImportProgress) {
-    if(progress.statuscode === 202) {
+  formatProgress(statuscode:number) {
+    if(statuscode === 202) {
       return  "In Progress";
-    } else if(progress.statuscode === 200) {
+    } else if(statuscode === 200) {
       return "Finished";
     } else {
-      return "Processing Error";
+      return "Error";
     }
   }
 
-  progressTagType(progress:ImportProgress) {
-    if(progress.statuscode === 202) {
+  progressTagType(statuscode:number) {
+    if(statuscode === 202) {
       return  "is-warning";
-    } else if(progress.statuscode === 200) {
+    } else if(statuscode === 200) {
       return "is-success";
     } else {
       return "is-error";
     }
   }
 
+  refresh() {
+    this.loading = true;
+    this.getJobs();
+  }
+
   async getJobs() {
     try {
-      this.jobs = await ImportService.getProgramUploads(this.activeProgram!.id!, false);
+      this.jobs = await JobService.getProgramJobs(this.activeProgram!.id!);
       this.pagination.totalCount = this.jobs.length;
       this.pagination.pageSize = 10;
       this.pagination.currentPage = 1;

From 321251e84ed389cabe6959ae877281e55b8d6505 Mon Sep 17 00:00:00 2001
From: Tim Parsons <tep46@cornell.edu>
Date: Wed, 20 Apr 2022 10:30:10 -0400
Subject: [PATCH 3/4] [BI-1459] - Adding link to jobs page

Adding an info message to show after starting an import informing the user they can view the job on the jobs page
---
 src/components/trait/ConfirmImportMessageBox.vue | 16 +++++++++++++++-
 src/views/import/BrAPIImporter.vue               |  5 +++++
 2 files changed, 20 insertions(+), 1 deletion(-)

diff --git a/src/components/trait/ConfirmImportMessageBox.vue b/src/components/trait/ConfirmImportMessageBox.vue
index 2db028200..ca617a2c8 100644
--- a/src/components/trait/ConfirmImportMessageBox.vue
+++ b/src/components/trait/ConfirmImportMessageBox.vue
@@ -17,6 +17,11 @@
 
 <template>
   <div class="corfirm-import">
+    <article class="message is-warning" v-if="confirmImportState.saveStarted">
+      <div class="message-body">
+        Your import is being processed. You can view on its progress by going to the <router-link v-bind:to="{name: 'job-management', params:{programId: activeProgram.id}}">Jobs</router-link> page.
+      </div>
+    </article>
     <article class="message is-success">
       <div class="message-body">
         <nav class="columns">
@@ -59,11 +64,18 @@
   import {AlertTriangleIcon} from 'vue-feather-icons'
   import {StringFormatters} from '@/breeding-insight/utils/StringFormatters'
   import {DataFormEventBusHandler} from "@/components/forms/DataFormEventBusHandler";
+  import {mapGetters} from "vuex";
+  import { Program } from '@/breeding-insight/model/Program';
 
   @Component({
     components: {
       AlertTriangleIcon
-    }
+    },
+    computed: {
+      ...mapGetters([
+        'activeProgram',
+      ])
+    },
   })
   export default class ConfirmImportMessageBox extends Vue {
 
@@ -76,6 +88,8 @@
     @Prop()
     confirmImportState!: DataFormEventBusHandler;
 
+    private activeProgram?: Program;
+
     confirm() {
       this.$emit('confirm');
       this.confirmImportState.bus.$emit(DataFormEventBusHandler.SAVE_STARTED_EVENT);
diff --git a/src/views/import/BrAPIImporter.vue b/src/views/import/BrAPIImporter.vue
index 8cd816546..6d78b6e5b 100644
--- a/src/views/import/BrAPIImporter.vue
+++ b/src/views/import/BrAPIImporter.vue
@@ -333,6 +333,11 @@
       <template v-slot:write-display>
         <!-- In Progress -->
         <template v-if="currentImport.progress.statuscode == 202">
+          <article class="message is-warning">
+            <div class="message-body">
+              Your import is being processed. You can view on its progress by going to the <router-link v-bind:to="{name: 'job-management', params:{programId: activeProgram.id}}">Jobs</router-link> page.
+            </div>
+          </article>
           <ProgressBar
               v-bind:max="currentImport.progress.total"
               v-bind:value="currentImport.progress.finished"

From 0a3af5b7984600981bb6154dba0f9018f30ef303 Mon Sep 17 00:00:00 2001
From: timparsons <tep46@cornell.edu>
Date: Thu, 26 May 2022 23:27:29 -0400
Subject: [PATCH 4/4] [BI-1459] - Updating job response handling to match data
 model

---
 src/breeding-insight/service/JobService.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/breeding-insight/service/JobService.ts b/src/breeding-insight/service/JobService.ts
index e7190d9e0..8b1452e55 100644
--- a/src/breeding-insight/service/JobService.ts
+++ b/src/breeding-insight/service/JobService.ts
@@ -29,7 +29,7 @@ export class JobService {
 
     try {
       const response: BiResponse = await JobDAO.getProgramJobs(programId);
-      const data: any = response.result;
+      const data: any = response.result.data;
       if(data) {
         return data.map((response: Job) => new Job(response));
       } else {