Merge changes If4e8ff72,I53d861fb am: 91496f424d am: b797b91fca

Original change: https://android-review.googlesource.com/c/platform/development/+/1770026

Change-Id: I19be31d438bfcb203a6369ccac9da7a3e1f97351

tools/otagui/src/components/BuildTable.vue

@@ -0,0 +1,85 @@
+<template>
+  <TableLite
+    :columns="columns"
+    :is-re-search="isReSearch"
+    :is-loading="isLoading"
+    :rows="rows"
+    :sortable="sortable"
+    :total="total"
+    @do-search="doSearch"
+  />
+</template>
+
+<script>
+import TableLite from 'vue3-table-lite'
+import FormDate from '../services/FormDate.js'
+import { TableSort } from '../services/TableService.js'
+
+export default {
+  components: {
+    TableLite
+  },
+  props: {
+    builds: {
+      type: Array,
+      required: true
+    }
+  },
+  data () {
+    return {
+      rows: null,
+      columns: [
+        {
+          label: "Build Name",
+          field: "file_name",
+          sortable: true
+        },
+        {
+          label: "Upload Time",
+          field: "time",
+          sortable: true,
+          display: function (row) {
+            return FormDate.formDate(row.time)
+          }
+        },
+        {
+          label: "Build ID",
+          field: "build_id",
+          sortable: true
+        },
+        {
+          label: "Build Version",
+          field: "build_version",
+          sortable: true
+        },
+        {
+          label: "Build Flavor",
+          field: "build_flavor",
+          sortable: true
+        }
+      ],
+      sortable: {
+        order: "time",
+        sort: "desc",
+      },
+      isReSearch: false,
+      isLoading: false,
+      total: 0
+    }
+  },
+  created() {
+    this.rows = TableSort(this.builds, this.sortable.order, this.sortable.sort, 0, 10)
+    this.total = this.builds.length
+  },
+  methods: {
+    doSearch(offset, limit, order, sort) {
+      this.isLoading = true
+      this.sortable.order = order
+      this.sortable.sort = sort
+      this.rows = TableSort(this.builds, order, sort, offset, limit)
+      this.total = this.builds.length
+      this.isLoading = false
+    }
+  }
+}
+</script>

tools/otagui/src/components/JobDisplay.vue

@@ -36,8 +36,8 @@ export default {
 
 <style>
 .job-display {
-  padding: 20px;
-  width: 250px;
+  padding: 5%;
+  width: 90%;
   cursor: pointer;
   border: 1px solid #39495c;
   margin-bottom: 18px;

tools/otagui/src/components/OTAJobTable.vue

@@ -13,6 +13,7 @@
 <script>
 import TableLite from 'vue3-table-lite'
 import FormDate from '../services/FormDate.js'
+import { TableSort } from '../services/TableService.js'
 
 export default {
   components: {
@@ -70,7 +71,7 @@ export default {
           display: function (row) {
             return FormDate.formDate(row.finish_time)
           }
-        }
+        },
       ],
       sortable: {
         order: "start_time",
@@ -82,32 +83,17 @@ export default {
     }
   },
   created() {
-    this.rows = this.jobs
+    this.rows = TableSort(this.jobs, this.sortable.order, this.sortable.sort, 0, 10)
     this.total = this.jobs.length
   },
   methods: {
-    sort(arr, key, sortOrder, offset, limit) {
-      let orderNumber = 1
-      if (sortOrder==="asc") {
-        orderNumber = -1
-      }
-      return arr.sort(function(a, b) {
-        var keyA = a[key],
-          keyB = b[key];
-        if (keyA < keyB) return -1*orderNumber;
-        if (keyA > keyB) return 1*orderNumber;
-        return 0;
-      }).slice(offset, limit);
-    },
     doSearch(offset, limit, order, sort) {
       this.isLoading = true
-      setTimeout(() => {
-        this.sortable.order = order
-        this.sortable.sort = sort
-        this.rows = this.sort(this.jobs, order, sort, offset, limit)
-        this.total = this.jobs.length
-      }, 600)
-      setTimeout(() => {this.isLoading=false}, 1000)
+      this.sortable.order = order
+      this.sortable.sort = sort
+      this.rows = TableSort(this.jobs, order, sort, offset, limit)
+      this.total = this.jobs.length
+      this.isLoading = false
     }
   }
 }

tools/otagui/src/services/TableService.js

@@ -0,0 +1,13 @@
+export function TableSort(arr, key, sortOrder, offset, limit) {
+  let orderNumber = 1
+  if (sortOrder==="desc") {
+    orderNumber = -1
+  }
+  return arr.sort(function(a, b) {
+    var keyA = a[key],
+      keyB = b[key];
+    if (keyA < keyB) return -orderNumber;
+    if (keyA > keyB) return orderNumber;
+    return 0;
+  }).slice(offset, offset + limit);
+}

tools/otagui/src/views/JobList.vue

@@ -4,12 +4,11 @@
     :jobs="jobs"
   />
   <v-row>
-    <v-cow
+    <v-col
       v-for="job in jobs"
       :key="job.id"
-      cols="3"
-      sm="12"
-      class="ma-5"
+      cols="12"
+      sm="3"
     >
       <JobDisplay
         :job="job"
@@ -17,7 +16,7 @@
         @mouseover="mouseOver(job.id, true)"
         @mouseout="mouseOver(job.id, false)"
       />
-    </v-cow>
+    </v-col>
   </v-row>
   <v-btn
     block

tools/otagui/src/views/SimpleForm.vue

@@ -68,6 +68,10 @@
       <ul>
         <h3>Build Library</h3>
         <UploadFile @file-uploaded="fetchTargetList" />
+        <BuildTable
+          v-if="targetDetails.length>0"
+          :builds="targetDetails"
+        />
         <li
           v-for="targetDetail in targetDetails"
           :key="targetDetail.file_name"
@@ -111,6 +115,7 @@ import ApiService from '../services/ApiService.js'
 import UploadFile from '@/components/UploadFile.vue'
 import PartialCheckbox from '@/components/PartialCheckbox.vue'
 import FormDate from '../services/FormDate.js'
+import BuildTable from '@/components/BuildTable.vue'
 import { uuid } from 'vue-uuid'
 
 export default {
@@ -120,6 +125,7 @@ export default {
     UploadFile,
     FileSelect,
     PartialCheckbox,
+    BuildTable
   },
   data() {
     return {