Merge changes I68491288,I54af3603

* changes:
  Add 'Select/Unselect All' in partition selection.
  Use pie chart for visualization of anaylsis result.

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>

tools/otagui/src/components/PayloadComposition.vue

@@ -3,28 +3,31 @@
     v-model="partitionInclude"
     :labels="updatePartitions"
   />
-  <button @click="updateChart">
+  <button @click="updateChart('blocks')">
-    Update the chart
+    Analyse Installed Blocks (in target build)
   </button>
-  <div
+  <button @click="updateChart('payload')">
-    v-if="listData"
+    Analyse Payload Composition
-    class="list-data"
+  </button>
-  >
+  <div v-if="echartsData">
-    <pre>
+    <PieChart :echartsData="echartsData" />
-      {{ listData }}
-    </pre>
   </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: {
@@ -46,18 +49,28 @@ export default {
       })
     },
   },
-  mounted() {
-    this.manifest.partitions.forEach((partition) => {
-      this.partitionInclude.set(partition.partitionName, true)
-    })
-  },
   methods: {
-    updateChart() {
+    updateChart(metrics) {
       let partitionSelected = this.manifest.partitions.filter((partition) =>
         this.partitionInclude.get(partition.partitionName)
       )
-      let statisticsData = operatedBlockStatistics(partitionSelected)
+      let statisticsData
-      this.echartsData = new EchartsData(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()
     },
   },

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>

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
+  }
 }

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()