Seperate the ota_analysis from OTAgui.

The default entry point is /analyseOTA in production enviroment. This is
for the deployment on android.github.io/.

Test: Mannual tested.
Change-Id: Ic77277024b34b67b9964be8cf4f1592cebf5c5e8

tools/ota_analysis/.eslintignore

@@ -0,0 +1 @@
+src/services/update_metadata_pb.js

tools/ota_analysis/.eslintrc.json

@@ -0,0 +1,21 @@
+{
+  "env": {
+    "browser": true,
+    "es6": true,
+    "node": true
+  },
+  "parserOptions": {
+    "parser": "babel-eslint"
+  },
+  "extends": [
+    "plugin:vue/recommended"
+  ],
+  "rules": {
+    "indent": [
+      "error",
+      2
+    ],
+    "vue/no-multiple-template-root": 0,
+    "vue/attribute-hyphenation": 0
+  }
+}

tools/ota_analysis/.gitignore

@@ -0,0 +1,28 @@
+.DS_Store
+node_modules
+/dist
+/target
+/output
+stderr*
+stdout*
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+*.db

tools/ota_analysis/.prettierrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  singleQuote: true,
+  semi: false,
+  useTabs: false
+}

tools/ota_analysis/babel.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@vue/cli-plugin-babel/preset"]
+};

tools/ota_analysis/src/App.vue

@@ -0,0 +1,347 @@
+<template>
+  <div id="nav">
+    <router-link :to="{ name: 'Analysis' }">
+      Analysis
+    </router-link> |
+    <router-link :to="{ name: 'About' }">
+      About
+    </router-link>
+  </div>
+  <div id="app">
+    <router-view />
+  </div>
+</template>
+
+<style>
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+
+#nav {
+  padding: 30px;
+}
+
+#nav a {
+  font-weight: bold;
+  color: #2c3e50;
+}
+
+#nav a.router-link-exact-active {
+  color: #42b983;
+}
+
+h4 {
+  font-size: 20px;
+  text-align: center;
+}
+html {
+  -webkit-text-size-adjust: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+body {
+  margin: 0;
+  font-family: "Open Sans", sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+}
+#app {
+  box-sizing: border-box;
+  width: 500px;
+  padding: 0 20px 20px;
+  margin: 0 auto;
+}
+hr {
+  box-sizing: content-box;
+  height: 0;
+  overflow: visible;
+}
+a {
+  color: #39b982;
+  font-weight: 600;
+  background-color: transparent;
+}
+img {
+  border-style: none;
+  width: 100%;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  display: flex;
+  align-items: center;
+  font-family: "Montserrat", sans-serif;
+}
+h1 {
+  font-size: 50px;
+  font-weight: 700;
+}
+h2 {
+  font-size: 38px;
+  font-weight: 700;
+}
+h3 {
+  font-size: 28px;
+  font-weight: 700;
+}
+h4 {
+  font-size: 21px;
+  font-weight: 700;
+}
+h5 {
+  font-size: 16px;
+  font-weight: 700;
+}
+h6 {
+  font-size: 15px;
+  font-weight: 700;
+}
+b,
+strong {
+  font-weight: bolder;
+}
+small {
+  font-size: 80%;
+}
+.eyebrow {
+  font-size: 20px;
+}
+.-text-primary {
+  color: #39b982;
+}
+.-text-base {
+  color: #000;
+}
+.-text-error {
+  color: tomato;
+}
+.-text-gray {
+  color: rgba(0, 0, 0, 0.5);
+}
+.-shadow {
+  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.13);
+}
+.badge {
+  display: inline-flex;
+  height: 26px;
+  width: auto;
+  padding: 0 7px;
+  margin: 0 5px;
+  background: transparent;
+  border-radius: 13px;
+  font-size: 13px;
+  font-weight: 400;
+  line-height: 26px;
+}
+.badge.-fill-gradient {
+  background: linear-gradient(to right, #16c0b0, #84cf6a);
+  color: #fff;
+}
+button,
+label,
+input,
+optgroup,
+select,
+textarea {
+  display: inline-flex;
+  font-family: "Open sans", sans-serif;
+  font-size: 100%;
+  line-height: 1.15;
+  margin: 0;
+}
+button,
+input {
+  overflow: visible;
+}
+button,
+select {
+  text-transform: none;
+}
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: none;
+}
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 2px solid #39b982;
+}
+label {
+  color: rgba(0, 0, 0, 0.5);
+  font-weight: 700;
+}
+input,
+textarea {
+  box-sizing: border-box;
+  border: solid 1px rgba(0, 0, 0, 0.4);
+}
+input.error,
+select.error {
+  margin-bottom: 0;
+}
+input + p.errorMessage {
+  margin-bottom: 24px;
+}
+textarea {
+  width: 100%;
+  overflow: auto;
+  font-size: 20px;
+}
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box;
+  padding: 0;
+  margin-right: 0.5rem;
+}
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+[type="search"] {
+  -webkit-appearance: textfield;
+  outline-offset: -2px;
+}
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+[type="text"],
+[type="number"],
+[type="search"],
+[type="password"] {
+  height: 52px;
+  width: 100%;
+  padding: 0 10px;
+  font-size: 20px;
+}
+[type="text"]:focus,
+[type="number"]:focus,
+[type="search"]:focus,
+[type="password"]:focus {
+  border-color: #39b982;
+}
+::-webkit-file-upload-button {
+  -webkit-appearance: button;
+  font: inherit;
+}
+[hidden] {
+  display: none;
+}
+.error {
+  border: 1px solid red;
+}
+select {
+  width: 100%;
+  height: 52px;
+  padding: 0 24px 0 10px;
+  vertical-align: middle;
+  background: #fff
+    url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23343a40' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E")
+    no-repeat right 12px center;
+  background-size: 8px 10px;
+  border: solid 1px rgba(0, 0, 0, 0.4);
+  border-radius: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+}
+select:focus {
+  border-color: #39b982;
+  outline: 0;
+}
+select:focus::ms-value {
+  color: #000;
+  background: #fff;
+}
+select::ms-expand {
+  opacity: 0;
+}
+.field {
+  margin-bottom: 24px;
+}
+.error {
+  border: 1px solid red;
+}
+.errorMessage {
+  color: red;
+}
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: space-between;
+  height: 52px;
+  padding: 0 40px;
+  background: transparent;
+  border: none;
+  border-radius: 6px;
+  text-align: center;
+  font-weight: 600;
+  white-space: nowrap;
+  transition: all 0.2s linear;
+}
+.button:hover {
+  -webkit-transform: scale(1.02);
+  transform: scale(1.02);
+  box-shadow: 0 7px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+.button:active {
+  -webkit-transform: scale(1);
+  transform: scale(1);
+  box-shadow: none;
+}
+.button:focus {
+  outline: 0;
+}
+.button:disabled {
+  -webkit-transform: scale(1);
+  transform: scale(1);
+  box-shadow: none;
+}
+.button + .button {
+  margin-left: 1em;
+}
+.button.-fill-gradient {
+  background: linear-gradient(to right, #16c0b0, #84cf6a);
+  color: #ffffff;
+}
+.button.-fill-gray {
+  background: rgba(0, 0, 0, 0.5);
+  color: #ffffff;
+}
+.button.-size-small {
+  height: 32px;
+}
+.button.-icon-right {
+  text-align: left;
+  padding: 0 20px;
+}
+.button.-icon-right > .icon {
+  margin-left: 10px;
+}
+.button.-icon-left {
+  text-align: right;
+  padding: 0 20px;
+}
+.button.-icon-left > .icon {
+  margin-right: 10px;
+}
+.button.-icon-center {
+  padding: 0 20px;
+}
+</style>

tools/ota_analysis/src/components/BaseFile.vue

@@ -0,0 +1,46 @@
+<template>
+  <label class="file-select">
+    <div class="select-button">
+      <span v-if="label">{{ label }}</span>
+      <span v-else>Select File</span>
+    </div>
+    <input
+      type="file"
+      @change="handleFileChange"
+    >
+  </label>
+</template>
+
+<script>
+export default {
+  props: {
+    label: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    handleFileChange(e) {
+      this.$emit('file-select', e.target.files)
+    }
+  }
+}
+</script>
+
+<style scoped>
+.file-select > .select-button {
+  padding: 1rem;
+
+  color: white;
+  background-color: #2EA169;
+
+  border-radius: .3rem;
+
+  text-align: center;
+  font-weight: bold;
+}
+
+.file-select > input[type="file"] {
+  display: none;
+}
+</style>

tools/ota_analysis/src/components/PartialCheckbox.vue

@@ -0,0 +1,72 @@
+<template>
+  <ul v-bind="$attrs">
+    <button
+      type="button"
+      @click="revertAllSelection"
+      v-text="selectAllText[selectAll]"
+    />
+    <br>
+    <li
+      v-for="label in labels"
+      :key="label"
+    >
+      <input
+        type="checkbox"
+        :value="label"
+        :checked="modelValue.get(label)"
+        @change="updateSelected($event.target.value)"
+      >
+      <label v-if="label"> {{ label }} </label>
+    </li>
+  </ul>
+</template>
+
+<script>
+export default {
+  props: {
+    labels: {
+      type: Array,
+      default: new Array(),
+    },
+    modelValue: {
+      type: Map,
+      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>
+
+<style scoped>
+ul > li {
+  display: inline-block;
+  list-style-type: none;
+  margin-left: 5%;
+  margin-right: 5%;
+  top: 0px;
+  height: 50px;
+}
+</style>

tools/ota_analysis/src/main.js

@@ -0,0 +1,9 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+
+createApp(App)
+  .use(store)
+  .use(router)
+  .mount('#app')

tools/ota_analysis/src/router/index.js

@@ -0,0 +1,70 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import PackageAnalysis from '@/views/PackageAnalysis.vue'
+import About from '@/views/About.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'Analysis',
+    component: PackageAnalysis,
+    meta: {
+      title: 'Analyse OTA package - from AOSP'
+    }
+  },
+  {
+    path: '/About',
+    name: 'About',
+    component: About
+  }
+]
+
+const router = createRouter({
+  history: createWebHistory(process.env.BASE_URL),
+  routes
+})
+
+// This callback runs before every route change, including on page load.
+router.beforeEach((to, from, next) => {
+  // This goes through the matched routes from last to first, finding the closest route with a title.
+  // e.g., if we have `/some/deep/nested/route` and `/some`, `/deep`, and `/nested` have titles,
+  // `/nested`'s will be chosen.
+  const nearestWithTitle = to.matched.slice().reverse().find(r => r.meta && r.meta.title);
+
+  // Find the nearest route element with meta tags.
+  const nearestWithMeta = to.matched.slice().reverse().find(r => r.meta && r.meta.metaTags);
+
+  const previousNearestWithMeta = from.matched.slice().reverse().find(r => r.meta && r.meta.metaTags);
+
+  // If a route with a title was found, set the document (page) title to that value.
+  if(nearestWithTitle) {
+    document.title = nearestWithTitle.meta.title;
+  } else if(previousNearestWithMeta) {
+    document.title = previousNearestWithMeta.meta.title;
+  }
+
+  // Remove any stale meta tags from the document using the key attribute we set below.
+  Array.from(document.querySelectorAll('[data-vue-router-controlled]')).map(el => el.parentNode.removeChild(el));
+
+  // Skip rendering meta tags if there are none.
+  if(!nearestWithMeta) return next();
+
+  // Turn the meta tag definitions into actual elements in the head.
+  nearestWithMeta.meta.metaTags.map(tagDef => {
+    const tag = document.createElement('meta');
+
+    Object.keys(tagDef).forEach(key => {
+      tag.setAttribute(key, tagDef[key]);
+    });
+
+    // We use this to track which meta tags we create so we don't interfere with other ones.
+    tag.setAttribute('data-vue-router-controlled', '');
+
+    return tag;
+  })
+  // Add the meta tags to the document head.
+    .forEach(tag => document.head.appendChild(tag));
+
+  next();
+});
+
+export default router

tools/ota_analysis/src/store/index.js

@@ -0,0 +1,8 @@
+import { createStore } from 'vuex'
+
+export default createStore({
+  state: {},
+  mutations: {},
+  actions: {},
+  modules: {}
+})

tools/ota_analysis/src/views/About.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="about">
+    <p>A GUI for the Android OTA generating.</p>
+  </div>
+</template>

tools/ota_analysis/vue.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  publicPath: process.env.NODE_ENV === 'production'
+    ? '/analyseOTA/'
+    : '/'
+}

tools/otagui/src/App.vue

@@ -7,9 +7,6 @@
       <router-link :to="{ name: 'JobList' }">
         Jobs Status
       </router-link> |
-      <router-link :to="{ name: 'Analysis' }">
-        Analysis
-      </router-link> |
       <router-link :to="{ name: 'About' }">
         About
       </router-link>

tools/otagui/src/router/index.js

@@ -3,7 +3,6 @@ import JobList from '@/views/JobList.vue'
 import JobDetails from '@/views/JobDetails.vue'
 import About from '@/views/About.vue'
 import SimpleForm from '@/views/SimpleForm.vue'
-import PackageAnalysis from '@/views/PackageAnalysis.vue'
 
 const routes = [
   {
@@ -26,11 +25,6 @@ const routes = [
     path: '/create',
     name: 'Create',
     component: SimpleForm
-  },
-  {
-    path: '/analysis',
-    name: 'Analysis',
-    component: PackageAnalysis
   }
 ]