From aaf2c7a9330f0dc9201395e4e3795a3f963939f3 Mon Sep 17 00:00:00 2001
From: lishutong <lishutong@google.com>
Date: Thu, 22 Jul 2021 21:41:07 +0000
Subject: [PATCH] Refactor the frontend for batch generation.

Following part has been modified:

1. Add tabs for selection between single generation and batch
generation. (src/components/JobConfigure.vue)

2. Change the data structure of OTAConfiguration, now it only records
the flags. The source/target build will be provided when submit jobs.
(src/services/JobSubmission.js)

3. Seperate the OTAOptions as a single component, which only takes in
the flags for backend. The selection of source/target build will be in a
seperate component. (src/components/OTAOptions.vue,
src/components/SingleOTAOptions.vue).

4. Now the partition selection can takes in more than one build, but
only show the partition list of first one. Later on, this will be able
to show the intersection of the partition lists from all given builds.
(src/components/PartialCheckbox.vue)

Point 1 enables the possibility of the dynamical loading of single/batch
ota generation pages. Point 2,3,4 allow the OTAOptions components to
be reused for batch generation.

Test: Mannual tested.
Change-Id: I1a29fa7c605596d717d19da25d31b81ce5b8fcba
---
 tools/otagui/src/components/OTAOptions.vue    | 173 ++++++------------
 .../otagui/src/components/PartialCheckbox.vue |   2 +-
 .../src/components/SingleOTAOptions.vue       |  92 ++++++++++
 tools/otagui/src/services/JobSubmission.js    |  36 +++-
 tools/otagui/src/views/JobConfigure.vue       |  82 +++++++--
 5 files changed, 248 insertions(+), 137 deletions(-)
 create mode 100644 tools/otagui/src/components/SingleOTAOptions.vue

diff --git a/tools/otagui/src/components/OTAOptions.vue b/tools/otagui/src/components/OTAOptions.vue
index b194b59b3..6aee09fe0 100644
--- a/tools/otagui/src/components/OTAOptions.vue
+++ b/tools/otagui/src/components/OTAOptions.vue
@@ -1,76 +1,55 @@
 <template>
-  <form @submit.prevent="sendForm">
-    <FileSelect
-      v-if="input.isIncremental"
-      v-model="input.incremental"
-      label="Select the source file"
-      :options="targetDetails"
-    />
-    <FileSelect
-      v-model="input.target"
-      label="Select a target file"
-      :options="targetDetails"
-    />
-    <v-row>
-      <v-col
-        v-for="flag in basicFlags"
-        :key="flag.key"
-        cols="12"
-        md="4"
-      >
-        <BaseCheckbox
-          v-model="input[flag.key]"
-          :label="flag.label"
-        />
-      </v-col>
-    </v-row>
-    <div v-if="input.isPartial">
-      <v-divider />
-      <h3>Select Partitions</h3>
-      <PartialCheckbox
-        v-model="input.partial"
-        :labels="updatablePartitions"
+  <v-row>
+    <v-col
+      v-for="flag in basicFlags"
+      :key="flag.key"
+      cols="12"
+      md="4"
+    >
+      <BaseCheckbox
+        v-model="otaConfig[flag.key]"
+        :label="flag.label"
       />
-      <v-divider />
-    </div>
-    <v-btn
-      block
-      @click="moreOptions = !moreOptions"
-    >
-      More Options
-    </v-btn>
-    <v-row v-if="moreOptions">
-      <v-col
-        v-for="flag in extraFlags"
-        :key="flag.key"
-        cols="12"
-        md="4"
-      >
-        <BaseCheckbox
-          v-model="input[flag.key]"
-          :label="flag.label"
-        />
-      </v-col>
-    </v-row>
-    <v-divider class="my-5" />
-    <BaseInput
-      v-model="input.extra"
-      :label="'Extra Configurations'"
+    </v-col>
+  </v-row>
+  <div v-if="otaConfig.isPartial">
+    <v-divider />
+    <h3>Select Partitions</h3>
+    <PartialCheckbox
+      v-model="otaConfig.partial"
+      :labels="updatablePartitions"
     />
-    <v-divider class="my-5" />
-    <v-btn
-      block
-      type="submit"
+    <v-divider />
+  </div>
+  <v-btn
+    block
+    @click="moreOptions = !moreOptions"
+  >
+    More Options
+  </v-btn>
+  <v-row v-if="moreOptions">
+    <v-col
+      v-for="flag in extraFlags"
+      :key="flag.key"
+      cols="12"
+      md="4"
     >
-      Submit
-    </v-btn>
-  </form>
+      <BaseCheckbox
+        v-model="otaConfig[flag.key]"
+        :label="flag.label"
+      />
+    </v-col>
+  </v-row>
+  <v-divider class="my-5" />
+  <BaseInput
+    v-model="otaConfig.extra"
+    :label="'Extra Configurations'"
+  />
 </template>
 
 <script>
 import BaseInput from '@/components/BaseInput.vue'
 import BaseCheckbox from '@/components/BaseCheckbox.vue'
-import FileSelect from '@/components/FileSelect.vue'
 import PartialCheckbox from '@/components/PartialCheckbox.vue'
 import { OTAConfiguration, OTABasicFlags, OTAExtraFlags } from '@/services/JobSubmission.js'
 
@@ -78,7 +57,6 @@ export default {
   components: {
     BaseInput,
     BaseCheckbox,
-    FileSelect,
     PartialCheckbox,
   },
   props: {
@@ -86,18 +64,14 @@ export default {
       type: Array,
       default: () => [],
     },
-    incrementalSource: {
-      type: String,
-      default: '',
-    },
-    targetBuild: {
-      type: String,
-      default: '',
-    },
+    targetBuilds: {
+      type: Array,
+      default: () => []
+    }
   },
-  data() {
+  data () {
     return {
-      input: new OTAConfiguration(),
+      otaConfig: new OTAConfiguration(),
       moreOptions: false,
       basicFlags: OTABasicFlags,
       extraFlags: OTAExtraFlags
@@ -109,49 +83,24 @@ export default {
      * @return Array<String>
      */
     updatablePartitions() {
-      if (!this.input.target) return []
+      // TODO(lishutong): currently only give the partition list of first
+      // build, should use the intersections of the partitions of
+      // all given builds.
+      if (!this.targetBuilds | this.targetBuilds.length===0) return []
+      if (this.targetBuilds[0] === '') return []
       let target = this.targetDetails.filter(
-        (d) => d.path === this.input.target
+        (d) => d.path === this.targetBuilds[0]
       )
       return target[0].partitions
     },
-    checkIncremental() {
-      return this.input.isIncremental
-    },
   },
   watch: {
-    incrementalSource: {
-      handler: function () {
-        this.input.isIncremental = true
-        this.input.incremental = this.incrementalSource
+    otaConfig: {
+      handler () {
+        this.$emit('update:otaConfig', this.otaConfig)
       },
-    },
-    targetBuild: {
-      handler: function () {
-        this.input.target = this.targetBuild
-      },
-    },
-    checkIncremental: {
-      handler: function () {
-        this.$emit('update:isIncremental', this.checkIncremental)
-      },
-    },
-  },
-  methods: {
-    /**
-     * Send the configuration to the backend.
-     */
-    async sendForm() {
-      try {
-        let response_message = await this.input.sendForm()
-        alert(response_message)
-      } catch (err) {
-        alert(
-          'Job cannot be started properly for the following reasons: ' + err
-        )
-      }
-      this.input = new OTAInput()
-    },
-  },
+      deep: true
+    }
+  }
 }
 </script>
\ No newline at end of file
diff --git a/tools/otagui/src/components/PartialCheckbox.vue b/tools/otagui/src/components/PartialCheckbox.vue
index d18d011fb..9e716c36a 100644
--- a/tools/otagui/src/components/PartialCheckbox.vue
+++ b/tools/otagui/src/components/PartialCheckbox.vue
@@ -38,7 +38,7 @@ export default {
       default: new Array(),
     },
     modelValue: {
-      type: String,
+      type: Array,
       required: true
     },
   },
diff --git a/tools/otagui/src/components/SingleOTAOptions.vue b/tools/otagui/src/components/SingleOTAOptions.vue
new file mode 100644
index 000000000..39addf8fc
--- /dev/null
+++ b/tools/otagui/src/components/SingleOTAOptions.vue
@@ -0,0 +1,92 @@
+<template>
+  <form @submit.prevent="sendForm">
+    <FileSelect
+      v-if="otaConfig.isIncremental"
+      v-model="incrementalSource"
+      label="Select the source file"
+      :options="targetDetails"
+    />
+    <FileSelect
+      v-model="targetBuild"
+      label="Select a target file"
+      :options="targetDetails"
+    />
+    <OTAOptions
+      :targetDetails="targetDetails"
+      :targetBuilds="[targetBuild]"
+      @update:otaConfig="otaConfig=$event"
+    />
+    <v-divider class="my-5" />
+    <v-btn
+      block
+      type="submit"
+    >
+      Submit
+    </v-btn>
+  </form>
+</template>
+
+<script>
+import OTAOptions from '@/components/OTAOptions.vue'
+import FileSelect from '@/components/FileSelect.vue'
+import { OTAConfiguration } from '@/services/JobSubmission.js'
+
+export default {
+  components: {
+    OTAOptions,
+    FileSelect,
+  },
+  props: {
+    targetDetails: {
+      type: Array,
+      default: () => [],
+    }
+  },
+  data() {
+    return {
+      incrementalSource: '',
+      targetBuild: '',
+      otaConfig: new OTAConfiguration(),
+    }
+  },
+  computed: {
+    checkIncremental() {
+      return this.otaConfig.isIncremental
+    },
+  },
+  watch: {
+    checkIncremental: {
+      handler: function () {
+        this.$emit('update:isIncremental', this.checkIncremental)
+      },
+    },
+  },
+  created() {
+    this.$emit('update:isIncremental', this.checkIncremental)
+    this.$emit('update:handler', this.setIncrementalSource, this.setTargetBuild)
+  },
+  methods: {
+    /**
+     * Send the configuration to the backend.
+     */
+    async sendForm() {
+      try {
+        let response_message = await this.otaConfig.sendForm(
+          this.targetBuild, this.incrementalSource)
+        alert(response_message)
+        this.otaConfig.reset()
+      } catch (err) {
+        alert(
+          'Job cannot be started properly for the following reasons: ' + err
+        )
+      }
+    },
+    setIncrementalSource (build) {
+      this.incrementalSource = build
+    },
+    setTargetBuild (build) {
+      this.targetBuild = build
+    }
+  },
+}
+</script>
\ No newline at end of file
diff --git a/tools/otagui/src/services/JobSubmission.js b/tools/otagui/src/services/JobSubmission.js
index f6acfb54e..4c97486f1 100644
--- a/tools/otagui/src/services/JobSubmission.js
+++ b/tools/otagui/src/services/JobSubmission.js
@@ -21,32 +21,50 @@ export class OTAConfiguration {
      * disable checkboxes of which dependencies are not fulfilled.
      */
     this.verbose = false,
-    this.target = '',
-    this.incremental = '',
     this.isIncremental = false,
     this.partial = [],
     this.isPartial = false,
     this.extra_keys = [],
-    this.extra = '',
-    this.id = uuid.v1()
+    this.extra = ''
   }
 
   /**
-   * Start the generation process, will throw an error if not succeed
+   * Start an OTA package generation from target build to incremental source.
+   * Throw an error if not succeed, otherwise will return the message from
+   * the backend.
+   * @param {String} targetBuild
+   * @param {String} incrementalSource
+   * @return String
    */
-  async sendForm() {
+  async sendForm(targetBuild, incrementalSource='') {
+    let jsonOptions = Object.assign({}, this)
+    jsonOptions.target = targetBuild
+    jsonOptions.incremental = incrementalSource
+    jsonOptions.id = uuid.v1()
     for (let flag of OTAExtraFlags) {
-      if (this[flag.key]) {
-        this.extra_keys.push(flag.key)
+      if (jsonOptions[flag.key]) {
+        jsonOptions.extra_keys.push(flag.key)
       }
     }
     try {
-      let response = await ApiServices.postInput(JSON.stringify(this), this.id)
+      let response = await ApiServices.postInput(JSON.stringify(jsonOptions), jsonOptions.id)
       return response.data
     } catch (err) {
       throw err
     }
   }
+
+  /**
+   * Reset all the flags being set in this object.
+   */
+  reset() {
+    for (let flag of OTAExtraFlags) {
+      if (this[flag.key]) {
+        delete this[flag.key]
+      }
+    }
+    this.constructor()
+  }
 }
 
 export const OTABasicFlags = [
diff --git a/tools/otagui/src/views/JobConfigure.vue b/tools/otagui/src/views/JobConfigure.vue
index 40e55e056..afd7252ae 100644
--- a/tools/otagui/src/views/JobConfigure.vue
+++ b/tools/otagui/src/views/JobConfigure.vue
@@ -1,14 +1,24 @@
 <template>
   <v-row>
     <v-col
+      id="dynamic-component-demo"
       cols="12"
       md="6"
     >
-      <OTAOptions
+      <button
+        v-for="tab in tabs"
+        :key="tab.label"
+        :class="['tab-button', { active: currentTab === tab.component }]"
+        @click="currentTab = tab.component"
+      >
+        {{ tab.label }}
+      </button>
+      <component
+        :is="currentTab"
+        class="tab-component"
         :targetDetails="targetDetails"
-        :incrementalSource="incrementalSource"
-        :targetBuild="targetBuild"
         @update:isIncremental="isIncremental = $event"
+        @update:handler="setHandler"
       />
     </v-col>
     <v-divider vertical />
@@ -17,10 +27,12 @@
       md="6"
       class="library"
     >
+      <!-- the key-binding refresh has to be used to reload the methods-->
       <BuildLibrary
+        :refresh="refresh"
         :isIncremental="isIncremental"
-        @update:incrementalSource="incrementalSource = $event"
-        @update:targetBuild="targetBuild = $event"
+        @update:incrementalSource="addIncrementalSource"
+        @update:targetBuild="addTargetBuild"
         @update:targetDetails="targetDetails = $event"
       />
     </v-col>
@@ -28,28 +40,68 @@
 </template>
 
 <script>
-import OTAOptions from '@/components/OTAOptions.vue'
+import SingleOTAOptions from '@/components/SingleOTAOptions.vue'
 import BuildLibrary from '@/components/BuildLibrary.vue'
 
 export default {
   components: {
-    OTAOptions,
-    BuildLibrary
+    SingleOTAOptions,
+    BuildLibrary,
   },
   data() {
     return {
-      incrementalSource: '',
-      targetBuild: '',
       targetDetails: [],
-      isIncremental: false
+      isIncremental: false,
+      currentTab: 'SingleOTAOptions',
+      refresh: false,
+      tabs: [
+        {label: 'Single OTA', component: 'SingleOTAOptions'},
+      ],
     }
   },
+  methods: {
+    setHandler(addIncrementalSource, addTargetBuild) {
+      this.refresh = true,
+      this.addIncrementalSource = addIncrementalSource
+      this.addTargetBuild = addTargetBuild
+      this.refresh = false
+    },
+    addIncrementalSource: () => {},
+    addTargetBuild: () => {}
+  }
 }
 </script>
 
 <style scoped>
-  .library {
-    overflow: scroll;
-    height:calc(100vh - 80px);
-  }
+.library {
+  overflow: scroll;
+  height: calc(100vh - 80px);
+}
+
+.tab-component {
+  border: 3px solid #eee;
+  border-radius: 2px;
+  padding: 20px;
+}
+
+.tab-button {
+  padding: 6px 10px;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+  border: 1px solid #ccc;
+  cursor: pointer;
+  background: #f0f0f0;
+  margin-bottom: -1px;
+  margin-right: -1px;
+}
+.tab-button:hover {
+  background: #e0e0e0;
+}
+.tab-button.active {
+  background: #e0e0e0;
+}
+.demo-tab {
+  border: 1px solid #ccc;
+  padding: 10px;
+}
 </style>>
\ No newline at end of file