From 8a609acf15e3db6de9e90a300315a919e78a62d1 Mon Sep 17 00:00:00 2001
From: lishutong <lishutong@google.com>
Date: Tue, 29 Jun 2021 17:07:45 +0000
Subject: [PATCH 1/2] Use pie chart for visualization of anaylsis result.

echarts_data.js will take the raw data and convert it into vue-echarts
readable option. PieChart.vue take this option and render it into a
pie chart.

Test: Mannual tested.
Change-Id: I54af3603031f0e23afa743ffc420d240a1b07bb2
---
 .../src/components/PayloadComposition.vue     | 44 +++++++++-----
 tools/otagui/src/components/PieChart.vue      | 53 +++++++++++++++++
 tools/otagui/src/services/echarts_data.js     | 57 ++++++++++++++++++-
 3 files changed, 139 insertions(+), 15 deletions(-)
 create mode 100644 tools/otagui/src/components/PieChart.vue

diff --git a/tools/otagui/src/components/PayloadComposition.vue b/tools/otagui/src/components/PayloadComposition.vue
index 420b96df6..96a4884dd 100644
--- a/tools/otagui/src/components/PayloadComposition.vue
+++ b/tools/otagui/src/components/PayloadComposition.vue
@@ -3,28 +3,31 @@
     v-model="partitionInclude"
     :labels="updatePartitions"
   />
-  <button @click="updateChart">
-    Update the chart
+  <button @click="updateChart('blocks')">
+    Analyse Installed Blocks (in target build)
   </button>
-  <div
-    v-if="listData"
-    class="list-data"
-  >
-    <pre>
-      {{ listData }}
-    </pre>
+  <button @click="updateChart('payload')">
+    Analyse Payload Composition
+  </button>
+  <div v-if="echartsData">
+    <PieChart :echartsData="echartsData" />
   </div>
 </template>
 
 <script>
 import PartialCheckbox from '@/components/PartialCheckbox.vue'
-import { operatedBlockStatistics } from '../services/payload_composition.js'
+import PieChart from '@/components/PieChart.vue'
+import {
+  operatedBlockStatistics,
+  operatedPayloadStatistics,
+} from '../services/payload_composition.js'
 import { EchartsData } from '../services/echarts_data.js'
 import { chromeos_update_engine as update_metadata_pb } from '../services/update_metadata_pb.js'
 
 export default {
   components: {
     PartialCheckbox,
+    PieChart,
   },
   props: {
     manifest: {
@@ -52,12 +55,27 @@ export default {
     })
   },
   methods: {
-    updateChart() {
+    updateChart(metrics) {
       let partitionSelected = this.manifest.partitions.filter((partition) =>
         this.partitionInclude.get(partition.partitionName)
       )
-      let statisticsData = operatedBlockStatistics(partitionSelected)
-      this.echartsData = new EchartsData(statisticsData)
+      let statisticsData
+      switch (metrics) {
+      case 'blocks':
+        statisticsData = operatedBlockStatistics(partitionSelected)
+        this.echartsData = new EchartsData(
+          statisticsData,
+          'Operated blocks in target build'
+        )
+        break
+      case 'payload':
+        statisticsData = operatedPayloadStatistics(partitionSelected)
+        this.echartsData = new EchartsData(
+          statisticsData,
+          'Payload disk usage'
+        )
+        break
+      }
       this.listData = this.echartsData.listData()
     },
   },
diff --git a/tools/otagui/src/components/PieChart.vue b/tools/otagui/src/components/PieChart.vue
new file mode 100644
index 000000000..52c1f8e8a
--- /dev/null
+++ b/tools/otagui/src/components/PieChart.vue
@@ -0,0 +1,53 @@
+<template>
+  <v-chart
+    class="chart"
+    :option="getEchartsOption"
+  />
+</template>
+
+<script>
+import { use } from 'echarts/core'
+import { CanvasRenderer } from 'echarts/renderers'
+import { PieChart } from 'echarts/charts'
+import {
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+} from 'echarts/components'
+import VChart, { THEME_KEY } from 'vue-echarts'
+import { EchartsData } from '@/services/echarts_data.js'
+
+use([
+  CanvasRenderer,
+  PieChart,
+  TitleComponent,
+  TooltipComponent,
+  LegendComponent,
+])
+
+export default {
+  components: {
+    VChart,
+  },
+  provide: {
+    [THEME_KEY]: 'light',
+  },
+  props: {
+    echartsData: {
+      type: EchartsData,
+      required: true,
+    },
+  },
+  computed: {
+    getEchartsOption() {
+      return this.echartsData.getEchartsOption()
+    },
+  },
+}
+</script>
+
+<style scoped>
+.chart {
+  height: 400px;
+}
+</style>
\ No newline at end of file
diff --git a/tools/otagui/src/services/echarts_data.js b/tools/otagui/src/services/echarts_data.js
index faddeecc9..6e3b41c8d 100644
--- a/tools/otagui/src/services/echarts_data.js
+++ b/tools/otagui/src/services/echarts_data.js
@@ -1,9 +1,19 @@
-// This function will be used later for generating a pie chart through eCharts
 export class EchartsData {
-  constructor(statisticData) {
+  /**
+   * Given a set of [key, value] pairs and title, create an object for further
+   * usage in Vue-Echarts.
+   * @param {Map} statisticData
+   * @param {String} title
+   */
+  constructor(statisticData, title) {
     this.statisticData = statisticData
+    this.title = title
   }
 
+  /**
+   * Convert the raw data into a string.
+   * @return {String} A list of [key, value].
+   */
   listData() {
     let table = ''
     for (let [key, value] of this.statisticData) {
@@ -11,4 +21,47 @@ export class EchartsData {
     }
     return table
   }
+
+  /**
+   * Generate necessary parameters (option) for vue-echarts.
+   * Format of the parameters can be found here:
+   * https://echarts.apache.org/en/option.html
+   * @return {Object} an ECharts option object.
+   */
+  getEchartsOption() {
+    let option = new Object()
+    option.title = {
+      text: this.title,
+      left: "center"
+    }
+    option.tooltip = {
+      trigger: "item",
+      formatter: "{a} <br/>{b} : {c} ({d}%)"
+    }
+    option.legend = {
+      orient: "horizontal",
+      left: "top",
+      top: "10%",
+      data: Array.from(this.statisticData.keys())
+    }
+    option.series = [
+      {
+        name: this.title,
+        type: "pie",
+        radius: "55%",
+        center: ["50%", "60%"],
+        data: Array.from(this.statisticData).map((pair) => {
+          return { value: pair[1], name: pair[0] }
+        }),
+        emphasis: {
+          itemStyle: {
+            shadowBlur: 10,
+            shadowOffsetX: 0,
+            shadowColor: "rgba(0, 0, 0, 0.5)"
+          }
+        }
+      }
+    ]
+    return option
+  }
 }
\ No newline at end of file

From 18e0c887d8e96a698e20b111e9ab93b50aaa37b9 Mon Sep 17 00:00:00 2001
From: lishutong <lishutong@google.com>
Date: Wed, 30 Jun 2021 17:35:28 +0000
Subject: [PATCH 2/2] Add 'Select/Unselect All' in partition selection.

Now both OTA configuration and OTA analysis page support select/unselect
all partitions.

Test: Mannual tested.
Change-Id: I684912886f3d3da259aeafea6aea1e53ae4a1c9a
---
 .../otagui/src/components/PartialCheckbox.vue | 24 +++++++++++++++++++
 .../src/components/PayloadComposition.vue     |  5 ----
 tools/otagui/src/views/SimpleForm.vue         |  3 ++-
 3 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/tools/otagui/src/components/PartialCheckbox.vue b/tools/otagui/src/components/PartialCheckbox.vue
index fc7694fa6..3cd2de887 100644
--- a/tools/otagui/src/components/PartialCheckbox.vue
+++ b/tools/otagui/src/components/PartialCheckbox.vue
@@ -1,5 +1,11 @@
 <template>
   <ul v-bind="$attrs">
+    <button
+      type="button"
+      @click="revertAllSelection"
+      v-text="selectAllText[selectAll]"
+    />
+    <br>
     <li
       v-for="label in labels"
       :key="label"
@@ -27,11 +33,29 @@ export default {
       default: new Map(),
     },
   },
+  data() {
+    return {
+      selectAll: 1,
+      selectAllText: ['Select All', 'Unselect All'],
+    }
+  },
+  mounted() {
+    // Set the default value to be true once mounted
+    for (let key of this.labels) {
+      this.modelValue.set(key, true)
+    }
+  },
   methods: {
     updateSelected(newSelect) {
       this.modelValue.set(newSelect, !this.modelValue.get(newSelect))
       this.$emit('update:modelValue', this.modelValue)
     },
+    revertAllSelection() {
+      this.selectAll = 1 - this.selectAll
+      for (let key of this.modelValue.keys()) {
+        this.modelValue.set(key, Boolean(this.selectAll))
+      }
+    },
   },
 }
 </script>
diff --git a/tools/otagui/src/components/PayloadComposition.vue b/tools/otagui/src/components/PayloadComposition.vue
index 96a4884dd..47b67baf5 100644
--- a/tools/otagui/src/components/PayloadComposition.vue
+++ b/tools/otagui/src/components/PayloadComposition.vue
@@ -49,11 +49,6 @@ export default {
       })
     },
   },
-  mounted() {
-    this.manifest.partitions.forEach((partition) => {
-      this.partitionInclude.set(partition.partitionName, true)
-    })
-  },
   methods: {
     updateChart(metrics) {
       let partitionSelected = this.manifest.partitions.filter((partition) =>
diff --git a/tools/otagui/src/views/SimpleForm.vue b/tools/otagui/src/views/SimpleForm.vue
index 809f80f63..3ade7d5a5 100644
--- a/tools/otagui/src/views/SimpleForm.vue
+++ b/tools/otagui/src/views/SimpleForm.vue
@@ -125,6 +125,7 @@ export default {
   },
   computed: {
     updatePartitions() {
+      if (!this.input.target) return []
       let target = this.targetDetails.filter(
         (d) => d.path === this.input.target
       )
@@ -145,7 +146,7 @@ export default {
       handler: function () {
         this.input.partial = this.partitionList
       },
-    },
+    }
   },
   created() {
     this.resetInput()