Add data table in OTAGUI.
Use data table for build library and task monitoring.
Test: Mannual tested.
Change-Id: Icefd6bd27c98fe6b213ade7239ad4918fa9a9485
diff --git a/tools/otagui/src/components/OTAJobTable.vue b/tools/otagui/src/components/OTAJobTable.vue
new file mode 100644
index 0000000..ae59311
--- /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 9cdf2ae..1bf30ed 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 @@
}
}
-</script>
-
-<style scoped>
-.jobs {
- display: flex;
- flex-direction: column;
- align-items: center;
-}
-
-</style>
+</script>
\ No newline at end of file
