From 2ad7328834808ff8254c952fb4c8ab10f16cebdc Mon Sep 17 00:00:00 2001
From: lishutong <lishutong@google.com>
Date: Tue, 13 Jul 2021 15:08:55 +0000
Subject: [PATCH] Add data table in OTAGUI.

Use data table for build library and task monitoring.

Test: Mannual tested.
Change-Id: Icefd6bd27c98fe6b213ade7239ad4918fa9a9485
---
 tools/otagui/src/components/OTAJobTable.vue | 114 ++++++++++++++++++++
 tools/otagui/src/views/JobList.vue          |  49 +++++----
 2 files changed, 140 insertions(+), 23 deletions(-)
 create mode 100644 tools/otagui/src/components/OTAJobTable.vue

diff --git a/tools/otagui/src/components/OTAJobTable.vue b/tools/otagui/src/components/OTAJobTable.vue
new file mode 100644
index 000000000..ae5931129
--- /dev/null
+++ b/tools/otagui/src/components/OTAJobTable.vue
@@ -0,0 +1,114 @@
+<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'
+
+export default {
+  components: {
+    TableLite
+  },
+  props: {
+    jobs: {
+      type: Array,
+      required: true
+    }
+  },
+  data () {
+    return {
+      rows: null,
+      columns: [
+        {
+          label: "Source build",
+          field: "incremental_name",
+          sortable: true
+        },
+        {
+          label: "Target build",
+          field: "target_name",
+          sortable: true
+        },
+        {
+          label: "Status",
+          field: "status",
+          sortable: true,
+          display: function (row) {
+            return (
+              "<a href=/check/" + row.id + '>'
+              + row.status
+              + "</a>"
+            );
+          }
+        },
+        {
+          label: "Partial",
+          field: "isPartial",
+          sortable: true
+        },
+        {
+          label: "Start Time",
+          field: "start_time",
+          sortable: true,
+          display: function (row) {
+            return FormDate.formDate(row.start_time)
+          }
+        },
+        {
+          label: "Finish Time",
+          field: "finish_time",
+          sortable: true,
+          display: function (row) {
+            return FormDate.formDate(row.finish_time)
+          }
+        }
+      ],
+      sortable: {
+        order: "start_time",
+        sort: "desc",
+      },
+      isReSearch: false,
+      isLoading: false,
+      total: 0
+    }
+  },
+  created() {
+    this.rows = this.jobs
+    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)
+    }
+  }
+}
+</script>
\ No newline at end of file
diff --git a/tools/otagui/src/views/JobList.vue b/tools/otagui/src/views/JobList.vue
index 9cdf2ae36..1bf30edd2 100644
--- a/tools/otagui/src/views/JobList.vue
+++ b/tools/otagui/src/views/JobList.vue
@@ -1,30 +1,42 @@
 <template>
-  <div class="jobs">
-    <JobDisplay
+  <OTAJobTable
+    v-if="jobs"
+    :jobs="jobs"
+  />
+  <v-row>
+    <v-cow
       v-for="job in jobs"
       :key="job.id"
-      :job="job"
-      :active="overStatus.get(job.id)"
-      @mouseover="mouseOver(job.id, true)"
-      @mouseout="mouseOver(job.id, false)"
-    />
-    <v-btn
-      block
-      @click="updateStatus"
+      cols="3"
+      sm="12"
+      class="ma-5"
     >
-      Update
-    </v-btn>
-  </div>
+      <JobDisplay
+        :job="job"
+        :active="overStatus.get(job.id)"
+        @mouseover="mouseOver(job.id, true)"
+        @mouseout="mouseOver(job.id, false)"
+      />
+    </v-cow>
+  </v-row>
+  <v-btn
+    block
+    @click="updateStatus"
+  >
+    Update
+  </v-btn>
 </template>
 
 <script>
 import JobDisplay from '@/components/JobDisplay.vue'
 import ApiService from '../services/ApiService.js'
+import OTAJobTable from '@/components/OTAJobTable.vue'
 
 export default {
   name: 'JobList',
   components: {
     JobDisplay,
+    OTAJobTable
   },
   data() {
     return {
@@ -50,13 +62,4 @@ export default {
   }
 }
 
-</script>
-
-<style scoped>
-.jobs {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-</style>
+</script>
\ No newline at end of file