1<template>
2  <PartialCheckbox
3    v-model="partitionInclude"
4    :labels="updatePartitions"
5  />
6  <div v-if="echartsData">
7    <PieChart :echartsData="echartsData" />
8  </div>
9  <v-divider />
10  <v-row>
11    <v-col
12      cols="12"
13      md="6"
14    >
15      <v-btn
16        block
17        @click="updateChart('blocks')"
18      >
19        Analyse Installed Blocks (in target build)
20      </v-btn>
21    </v-col>
22    <v-col
23      cols="12"
24      md="6"
25    >
26      <v-btn
27        block
28        @click="updateChart('payload')"
29      >
30        Analyse Payload Composition
31      </v-btn>
32    </v-col>
33  </v-row>
34  <v-row>
35    <v-col
36      cols="12"
37      md="6"
38      class="tooltip"
39    >
40      <v-btn
41        :disabled="manifest.nonAB"
42        block
43        @click="updateChart('COWmerge')"
44      >
45        Analyse COW Merge Operations
46      </v-btn>
47      <span
48        v-if="manifest.nonAB"
49        class="tooltiptext"
50      >
51        This function is only supported in A/B OTA
52      </span>
53    </v-col>
54    <v-col
55      cols="12"
56      md="6"
57    >
58      <v-btn
59        block
60        :disabled="!targetFile"
61        @click="updateChart('extensions')"
62      >
63        Analyse File Extensions
64      </v-btn>
65    </v-col>
66  </v-row>
67  <v-row>
68    <v-col
69      cols="12"
70      md="6"
71    />
72    <v-col
73      cols="12"
74      md="6"
75    >
76      <BaseFile
77        v-if="!demo"
78        label="Drag and drop or Select The target Android build"
79        @file-select="selectBuild"
80      />
81    </v-col>
82  </v-row>
83</template>
84
85<script>
86import axios from 'axios'
87import PartialCheckbox from '@/components/PartialCheckbox.vue'
88import PieChart from '@/components/PieChart.vue'
89import BaseFile from '@/components/BaseFile.vue'
90import { analysePartitions } from '../services/payload_composition.js'
91import { chromeos_update_engine as update_metadata_pb } from '../services/update_metadata_pb.js'
92
93export default {
94  components: {
95    PartialCheckbox,
96    PieChart,
97    BaseFile,
98  },
99  props: {
100    manifest: {
101      type: update_metadata_pb.DeltaArchiveManifest,
102      default: () => [],
103    },
104    demo: {
105      type: Boolean,
106      default: false
107    }
108  },
109  data() {
110    return {
111      partitionInclude: new Map(),
112      echartsData: null,
113      listData: '',
114      targetFile: null,
115    }
116  },
117  computed: {
118    updatePartitions() {
119      return this.manifest.partitions.map((partition) => {
120        return partition.partitionName
121      })
122    },
123  },
124  async mounted() {
125    if (this.demo) {
126      try {
127        const download = await axios.get(
128          './files/cf_x86_target_file_demo.zip',
129          {responseType: 'blob'}
130        )
131        this.targetFile = new File([download.data], 'target_demo.zip')
132      } catch (err) {
133        console.log('Please put a proper example target file in /public/files/')
134      }
135    }
136  },
137  methods: {
138    async updateChart(metrics) {
139      let partitionSelected = this.manifest.partitions.filter((partition) =>
140        this.partitionInclude.get(partition.partitionName)
141      )
142      try {
143        this.echartsData = await analysePartitions(
144          metrics,
145          partitionSelected,
146          this.manifest.blockSize,
147          this.targetFile
148        )
149      } catch (err) {
150        alert('Cannot be processed for the following issue: ', err)
151      }
152    },
153    selectBuild(files) {
154      //TODO(lishutong) check the version of target file is same to the OTA target
155      this.targetFile = files[0]
156    },
157  },
158}
159</script>
160
161<style scoped>
162.list-data {
163  text-align: center;
164}
165.tooltip {
166  position: relative;
167  display: inline-block;
168}
169
170.tooltip .tooltiptext {
171  visibility: hidden;
172  width: 120px;
173  background-color: black;
174  color: #fff;
175  text-align: center;
176  border-radius: 6px;
177  padding: 5px 0;
178  position: absolute;
179  z-index: 1;
180}
181
182.tooltip:hover .tooltiptext {
183  visibility: visible;
184}
185</style>