From cdf499330dbf0211fda9b2153327ca06f93072a0 Mon Sep 17 00:00:00 2001
From: lishutong <lishutong@google.com>
Date: Mon, 26 Jul 2021 17:45:29 +0000
Subject: [PATCH] Add a demo page in OTA_analyzer.

Please put an ota package and its target build as cf_x86_demo.zip and
cf_x86_target_file_demo into this directory: /public/files/

This OTA package and target build do not have to be complete - only the
manifest part in OTA package and .map files in target build are
necessary. The previous one can be generated using:
https://source.corp.google.com/android/vendor/google_tradefederation/contrib/src/com/google/android/tradefed/ota/util/PayloadUtil.java;l=196;bpv=1;bpt=1?q=PayloadUtil&sq=package:android
The following one can be generated by unzip and keep the .map files
only, zip again.

Add a demo page, now the user can view the complete function of
OTA_analyzer without uploading their own ota packages / android build.

Test: Mannual tested.
Change-Id: I7552e0222fc40e9a4b1aff9750f74cd3ed3f4feb
---
 tools/ota_analysis/.gitignore                 |  1 +
 tools/ota_analysis/src/App.vue                |  2 +-
 .../src/components/PayloadComposition.vue     | 19 +++++
 tools/ota_analysis/src/router/index.js        |  6 ++
 tools/ota_analysis/src/views/Demo.vue         | 74 +++++++++++++++++++
 5 files changed, 101 insertions(+), 1 deletion(-)
 create mode 100644 tools/ota_analysis/src/views/Demo.vue

diff --git a/tools/ota_analysis/.gitignore b/tools/ota_analysis/.gitignore
index b81e39b9a..7cf69a02f 100644
--- a/tools/ota_analysis/.gitignore
+++ b/tools/ota_analysis/.gitignore
@@ -3,6 +3,7 @@ node_modules
 /dist
 /target
 /output
+/public
 stderr*
 stdout*
 
diff --git a/tools/ota_analysis/src/App.vue b/tools/ota_analysis/src/App.vue
index c0a6f7772..da111555b 100644
--- a/tools/ota_analysis/src/App.vue
+++ b/tools/ota_analysis/src/App.vue
@@ -28,7 +28,7 @@
 export default {
   data() {
     return {
-      links: ['Analysis', 'About'],
+      links: ['Analysis', 'Demo', 'About'],
     }
   },
 }
diff --git a/tools/ota_analysis/src/components/PayloadComposition.vue b/tools/ota_analysis/src/components/PayloadComposition.vue
index 6f8797301..587442b5d 100644
--- a/tools/ota_analysis/src/components/PayloadComposition.vue
+++ b/tools/ota_analysis/src/components/PayloadComposition.vue
@@ -66,6 +66,7 @@
       md="6"
     >
       <BaseFile
+        v-if="!demo"
         label="Drag and drop or Select The target Android build"
         @file-select="selectBuild"
       />
@@ -74,6 +75,7 @@
 </template>
 
 <script>
+import axios from 'axios'
 import PartialCheckbox from '@/components/PartialCheckbox.vue'
 import PieChart from '@/components/PieChart.vue'
 import BaseFile from '@/components/BaseFile.vue'
@@ -91,6 +93,10 @@ export default {
       type: update_metadata_pb.DeltaArchiveManifest,
       default: () => [],
     },
+    demo: {
+      type: Boolean,
+      default: false
+    }
   },
   data() {
     return {
@@ -107,6 +113,19 @@ export default {
       })
     },
   },
+  async mounted() {
+    if (this.demo) {
+      try {
+        const download = await axios.get(
+          './files/cf_x86_target_file_demo.zip',
+          {responseType: 'blob'}
+        )
+        this.targetFile = new File([download.data], 'target_demo.zip')
+      } catch (err) {
+        console.log('Please put a proper example target file in /public/files/')
+      }
+    }
+  },
   methods: {
     async updateChart(metrics) {
       let partitionSelected = this.manifest.partitions.filter((partition) =>
diff --git a/tools/ota_analysis/src/router/index.js b/tools/ota_analysis/src/router/index.js
index b751cbe2f..7899fb2d0 100644
--- a/tools/ota_analysis/src/router/index.js
+++ b/tools/ota_analysis/src/router/index.js
@@ -1,5 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
 import PackageAnalysis from '@/views/PackageAnalysis.vue'
+import Demo from'@/views/Demo.vue'
 import About from '@/views/About.vue'
 
 const routes = [
@@ -11,6 +12,11 @@ const routes = [
       title: 'Analyse OTA package - from AOSP'
     }
   },
+  {
+    path: '/Demo',
+    name: 'Demo',
+    component: Demo
+  },
   {
     path: '/About',
     name: 'About',
diff --git a/tools/ota_analysis/src/views/Demo.vue b/tools/ota_analysis/src/views/Demo.vue
new file mode 100644
index 000000000..0969dc011
--- /dev/null
+++ b/tools/ota_analysis/src/views/Demo.vue
@@ -0,0 +1,74 @@
+<template>
+  <v-row>
+    <v-col
+      cols="12"
+      md="6"
+    >
+      <PayloadDetail
+        v-if="zipFile && payload"
+        :zipFile="zipFile"
+        :payload="payload"
+      />
+    </v-col>
+    <v-divider
+      vertical
+    />
+    <v-col
+      cols="12"
+      md="6"
+    >
+      <PayloadComposition
+        v-if="zipFile && payload.manifest"
+        :manifest="payload.manifest"
+        :demo="true"
+      />
+    </v-col>
+  </v-row>
+</template>
+
+<script>
+import axios from 'axios'
+import PayloadDetail from '@/components/PayloadDetail.vue'
+import PayloadComposition from '@/components/PayloadComposition.vue'
+import { Payload } from '@/services/payload.js'
+
+export default {
+  components: {
+    PayloadDetail,
+    PayloadComposition,
+  },
+  data() {
+    return {
+      zipFile: null,
+      payload: null,
+    }
+  },
+  async created() {
+    // put cf_x86_demo.zip and cf_x86_target_file_demo into
+    // this directory: /public/files
+    try {
+      const download = await axios.get(
+        './files/cf_x86_demo.zip',
+        {responseType: 'blob'}
+      )
+      this.zipFile = new File([download.data], 'ota_demo.zip')
+      this.payload = new Payload(this.zipFile)
+      await this.payload.init()
+    } catch (err) {
+      console.log('Please put a proper example OTA in /public/files/')
+    }
+  },
+  methods: {
+    async unpackOTA(files) {
+      this.zipFile = files[0]
+      try {
+        this.payload = new Payload(this.zipFile)
+        await this.payload.init()
+      } catch (err) {
+        alert('Please check if this is a correct OTA package (.zip).')
+        console.log(err)
+      }
+    },
+  },
+}
+</script>