Merge pull request #232 from Breeding-Insight/feature/BI-1459

Feature/bi 1459

Author: timparsons

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

src/breeding-insight/model/import/ImportResponse.ts

@@ -17,15 +17,33 @@
 
 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;
+  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, jobType}: ImportResponse) {
+    super();
     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;
+    this.jobType = jobType;
   }
 }

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;
+  }
+}

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;
+}

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.data;
+      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;
+    }
+
+  }
+}

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"
+              >
+                Jobs
+              </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";
 

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

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

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: 'Jobs',
+      layout: layouts.userSideBar
+    },
+    component: JobManagement,
+    beforeEnter: processProgramNavigation
+  },
   {
     path: '/programs/:programId/brapi/authorize',
     name: 'brapi-authorize',

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>