Merge "Use material design for OTAGUI." am: 2793164968 am: d0c2bead51
Original change: https://android-review.googlesource.com/c/platform/development/+/1764186 Change-Id: I269775abb255706a4e9f6e81332295565a6dc0bc
This commit is contained in:
Kelvin Zhang
@@ -1,16 +1,41 @@
|
||||
<template>
|
||||
<div id="app">
|
||||
<div id="nav">
|
||||
<router-link :to="{ name: 'Create' }">
|
||||
Create Jobs
|
||||
</router-link> |
|
||||
<router-link :to="{ name: 'JobList' }">
|
||||
Jobs Status
|
||||
</router-link> |
|
||||
<router-link :to="{ name: 'About' }">
|
||||
About
|
||||
</router-link>
|
||||
</div>
|
||||
<router-view />
|
||||
</div>
|
||||
<v-app>
|
||||
<v-app-bar
|
||||
rounded
|
||||
color="primary"
|
||||
>
|
||||
<v-app-bar-title> OTA Dashboard </v-app-bar-title>
|
||||
<v-spacer />
|
||||
<v-btn
|
||||
v-for="link in links"
|
||||
:key="`${link}-header-link`"
|
||||
:to="{ name: link }"
|
||||
class="ml-5"
|
||||
color="primary"
|
||||
>
|
||||
{{ link }}
|
||||
</v-btn>
|
||||
</v-app-bar>
|
||||
<v-main>
|
||||
<v-container fluid>
|
||||
<router-view />
|
||||
</v-container>
|
||||
</v-main>
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
links: ['Create', 'JobList', 'About'],
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
h3 {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@@ -1,12 +1,17 @@
|
||||
<template>
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="modelValue"
|
||||
class="field"
|
||||
v-bind="$attrs"
|
||||
@change="$emit('update:modelValue', $event.target.checked)"
|
||||
<label
|
||||
v-if="label"
|
||||
class="checkbox"
|
||||
>
|
||||
<label v-if="label"> {{ label }} </label>
|
||||
<input
|
||||
type="checkbox"
|
||||
:checked="modelValue"
|
||||
class="field"
|
||||
v-bind="$attrs"
|
||||
@change="$emit('update:modelValue', $event.target.checked)"
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -14,12 +19,27 @@ export default {
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
default: ''
|
||||
default: '',
|
||||
},
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
}
|
||||
}
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.checkbox {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding-left: 35px;
|
||||
margin-bottom: 12px;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
</style>
|
||||
@@ -1,11 +1,19 @@
|
||||
<template>
|
||||
<label class="file-select">
|
||||
<div class="select-button">
|
||||
<span v-if="label">{{ label }}</span>
|
||||
<label class="file-select ma-5">
|
||||
<div
|
||||
class="select-button"
|
||||
@dragover="dragover"
|
||||
@dragleave="dragleave"
|
||||
@drop="drop"
|
||||
>
|
||||
<span v-if="label">{{ !fileName ? label : '' }}</span>
|
||||
<span v-else>Select File</span>
|
||||
<div v-if="fileName"> File selected: {{ fileName }}</div>
|
||||
</div>
|
||||
<input
|
||||
ref="file"
|
||||
type="file"
|
||||
accept=".zip"
|
||||
@change="handleFileChange"
|
||||
>
|
||||
</label>
|
||||
@@ -16,31 +24,53 @@ export default {
|
||||
props: {
|
||||
label: {
|
||||
type: String,
|
||||
default: ''
|
||||
default: '',
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fileName: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
handleFileChange(e) {
|
||||
this.$emit('file-select', e.target.files)
|
||||
}
|
||||
}
|
||||
handleFileChange(event) {
|
||||
this.$emit('file-select', this.$refs.file.files)
|
||||
this.fileName = this.$refs.file.files[0].name
|
||||
},
|
||||
dragover(event) {
|
||||
event.preventDefault()
|
||||
if (!event.currentTarget.classList.contains('file-hover')) {
|
||||
event.currentTarget.classList.add('file-hover')
|
||||
}
|
||||
},
|
||||
dragleave(event) {
|
||||
event.currentTarget.classList.remove('file-hover')
|
||||
},
|
||||
drop(event) {
|
||||
event.preventDefault()
|
||||
this.$refs.file.files = event.dataTransfer.files
|
||||
this.handleFileChange(event)
|
||||
event.currentTarget.classList.remove('file-hover')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.file-select > .select-button {
|
||||
padding: 1rem;
|
||||
|
||||
color: white;
|
||||
background-color: #2EA169;
|
||||
|
||||
border-radius: .3rem;
|
||||
|
||||
padding: 3rem;
|
||||
border-radius: 0.3rem;
|
||||
border: 4px dashed #eaebec;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.file-select > input[type="file"] {
|
||||
.file-select > input[type='file'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.file-hover {
|
||||
background-color: #95e995;
|
||||
}
|
||||
</style>
|
||||
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<label> {{ label }} </label>
|
||||
<h3> {{ label }} </h3>
|
||||
<br>
|
||||
<input
|
||||
v-bind="$attrs"
|
||||
@@ -24,3 +24,10 @@ export default{
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
input {
|
||||
width: 100%;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
</style>
|
||||
@@ -1,20 +1,24 @@
|
||||
<template>
|
||||
<label v-if="label"> {{ label }} </label>
|
||||
<select
|
||||
:value="modelValue"
|
||||
class="field"
|
||||
v-bind="$attrs"
|
||||
@change="$emit('update:modelValue', $event.target.value)"
|
||||
>
|
||||
<option
|
||||
v-for="option in options"
|
||||
:key="option.file_name"
|
||||
:value="option.path"
|
||||
:selected="option.path === modelValue"
|
||||
<h3 v-if="label">
|
||||
{{ label }}
|
||||
</h3>
|
||||
<div class="dropdown">
|
||||
<select
|
||||
:value="modelValue"
|
||||
class="dropdown-select"
|
||||
v-bind="$attrs"
|
||||
@change="$emit('update:modelValue', $event.target.value)"
|
||||
>
|
||||
{{ option.file_name }}
|
||||
</option>
|
||||
</select>
|
||||
<option
|
||||
v-for="option in options"
|
||||
:key="option.file_name"
|
||||
:value="option.path"
|
||||
:selected="option.path === modelValue"
|
||||
>
|
||||
{{ option.file_name }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -28,12 +32,88 @@ export default {
|
||||
},
|
||||
modelValue: {
|
||||
type: [String, Number],
|
||||
default: ''
|
||||
default: '',
|
||||
},
|
||||
options: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
}
|
||||
required: true,
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dropdown {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
background: #f2f2f2;
|
||||
border: 1px solid;
|
||||
border-color: white #f7f7f7 whitesmoke;
|
||||
border-radius: 3px;
|
||||
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
|
||||
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.dropdown:before,
|
||||
.dropdown:after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 9px;
|
||||
right: 10px;
|
||||
width: 0;
|
||||
border: 4px dashed;
|
||||
border-color: #888888 transparent;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.dropdown:before {
|
||||
border-bottom-style: solid;
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.dropdown:after {
|
||||
margin-top: 7px;
|
||||
border-top-style: solid;
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.dropdown-select {
|
||||
position: relative;
|
||||
width: 130%;
|
||||
margin: 0;
|
||||
padding: 6px 8px 6px 10px;
|
||||
color: #62717a;
|
||||
text-shadow: 0 1px white;
|
||||
background: #f2f2f2;
|
||||
background: rgba(
|
||||
0,
|
||||
0,
|
||||
0,
|
||||
0
|
||||
) !important;
|
||||
border: 0;
|
||||
border-radius: 0;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.dropdown-select:focus {
|
||||
z-index: 3;
|
||||
width: 100%;
|
||||
color: #394349;
|
||||
outline: 2px solid #49aff2;
|
||||
outline: 2px solid -webkit-focus-ring-color;
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.dropdown-select > option {
|
||||
margin: 3px;
|
||||
padding: 6px 8px;
|
||||
text-shadow: none;
|
||||
background: #f2f2f2;
|
||||
border-radius: 3px;
|
||||
cursor: pointer;
|
||||
}
|
||||
</style>
|
||||
@@ -1,21 +1,21 @@
|
||||
<template>
|
||||
<ul v-if="job">
|
||||
<li>Start Time: {{ formDate(job.start_time) }}</li>
|
||||
<li> <strong> Start Time: </strong> {{ formDate(job.start_time) }}</li>
|
||||
<li v-if="job.finish_time > 0">
|
||||
Finish Time: {{ formDate(job.finish_time) }}
|
||||
<strong> Finish Time: </strong> {{ formDate(job.finish_time) }}
|
||||
</li>
|
||||
<li v-if="job.isIncremental">
|
||||
Incremental source: {{ job.incremental_name }}
|
||||
<strong> Incremental source: </strong> {{ job.incremental_name }}
|
||||
</li>
|
||||
<li v-if="job.isIncremental && buildDetail">
|
||||
Incremental source version: {{ job.incremental_build_version }}
|
||||
<strong> Incremental source version: </strong> {{ job.incremental_build_version }}
|
||||
</li>
|
||||
<li>Target source: {{ job.target_name }}</li>
|
||||
<li> <strong> Target source: </strong> {{ job.target_name }}</li>
|
||||
<li v-if="buildDetail">
|
||||
Target source version: {{ job.target_build_version }}
|
||||
<strong> Target source version: </strong> {{ job.target_build_version }}
|
||||
</li>
|
||||
<li v-if="job.isPartial">
|
||||
Partial: {{ job.partial }}
|
||||
<strong> Partial: </strong> {{ job.partial }}
|
||||
</li>
|
||||
</ul>
|
||||
</template>
|
||||
@@ -42,3 +42,10 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
ul > li {
|
||||
list-style: none;
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@@ -4,6 +4,7 @@
|
||||
<span>Status of Job.{{ job.id }}</span>
|
||||
<h4>{{ job.status }}</h4>
|
||||
<div v-show="active">
|
||||
<v-divider class="my-3" />
|
||||
<JobConfiguration
|
||||
:job="job"
|
||||
:build-detail="false"
|
||||
|
||||
@@ -1,24 +1,32 @@
|
||||
<template>
|
||||
<ul v-bind="$attrs">
|
||||
<button
|
||||
type="button"
|
||||
@click="revertAllSelection"
|
||||
v-text="selectAllText[selectAll]"
|
||||
/>
|
||||
<br>
|
||||
<li
|
||||
<v-btn
|
||||
block
|
||||
type="button"
|
||||
class="my-5"
|
||||
@click="revertAllSelection"
|
||||
>
|
||||
{{ selectAllText[selectAll] }}
|
||||
</v-btn>
|
||||
<v-row class="mb-5">
|
||||
<v-col
|
||||
v-for="label in labels"
|
||||
:key="label"
|
||||
cols="4"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
:value="label"
|
||||
:checked="modelValue.get(label)"
|
||||
@change="updateSelected($event.target.value)"
|
||||
<label
|
||||
v-if="label"
|
||||
class="checkbox"
|
||||
>
|
||||
<label v-if="label"> {{ label }} </label>
|
||||
</li>
|
||||
</ul>
|
||||
<input
|
||||
type="checkbox"
|
||||
:value="label"
|
||||
:checked="modelValue.get(label)"
|
||||
@change="updateSelected($event.target.value)"
|
||||
>
|
||||
{{ label }}
|
||||
</label>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -69,4 +77,17 @@ ul > li {
|
||||
top: 0px;
|
||||
height: 50px;
|
||||
}
|
||||
|
||||
.checkbox {
|
||||
display: block;
|
||||
position: relative;
|
||||
padding-left: 35px;
|
||||
margin-bottom: 12px;
|
||||
cursor: pointer;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
</style>
|
||||
@@ -5,8 +5,9 @@
|
||||
:job="job"
|
||||
:build-detail="true"
|
||||
/>
|
||||
<v-divider class="my-5" />
|
||||
<div>
|
||||
<h4>STDERR</h4>
|
||||
<h3>STDERR</h3>
|
||||
<div
|
||||
ref="stderr"
|
||||
class="stderr"
|
||||
@@ -14,7 +15,7 @@
|
||||
{{ job.stderr }}
|
||||
<p ref="stderrBottom" />
|
||||
</div>
|
||||
<h4>STDOUT</h4>
|
||||
<h3>STDOUT</h3>
|
||||
<div
|
||||
ref="stdout"
|
||||
class="stdout"
|
||||
@@ -23,11 +24,13 @@
|
||||
<p ref="stdoutBottom" />
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<a
|
||||
v-if="job.status == 'Finished'"
|
||||
:href="download"
|
||||
> Download </a>
|
||||
<v-divider class="my-5" />
|
||||
<div class="download">
|
||||
<a
|
||||
v-if="job.status == 'Finished'"
|
||||
:href="download"
|
||||
> Download </a>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -101,6 +104,12 @@ export default {
|
||||
.stderr,
|
||||
.stdout {
|
||||
overflow: scroll;
|
||||
height: 200px;
|
||||
height: 160px;
|
||||
}
|
||||
|
||||
.download {
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
font-size: 160%;
|
||||
}
|
||||
</style>
|
||||
@@ -8,9 +8,12 @@
|
||||
@mouseover="mouseOver(job.id, true)"
|
||||
@mouseout="mouseOver(job.id, false)"
|
||||
/>
|
||||
<button @click="updateStatus">
|
||||
<v-btn
|
||||
block
|
||||
@click="updateStatus"
|
||||
>
|
||||
Update
|
||||
</button>
|
||||
</v-btn>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
||||
@@ -1,98 +1,106 @@
|
||||
<template>
|
||||
<div>
|
||||
<form @submit.prevent="sendForm">
|
||||
<UploadFile @file-uploaded="fetchTargetList" />
|
||||
<br>
|
||||
<FileSelect
|
||||
v-if="input.isIncremental"
|
||||
v-model="input.incremental"
|
||||
label="Select the source file"
|
||||
:options="targetDetails"
|
||||
/>
|
||||
<FileSelect
|
||||
v-model="input.target"
|
||||
label="Select the target file"
|
||||
:options="targetDetails"
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
@click="fetchTargetList"
|
||||
>
|
||||
Update File List
|
||||
</button>
|
||||
<div>
|
||||
<BaseCheckbox
|
||||
v-model="input.verbose"
|
||||
:label="'Verbose'"
|
||||
/>  
|
||||
<BaseCheckbox
|
||||
v-model="input.isIncremental"
|
||||
:label="'Incremental'"
|
||||
<v-row>
|
||||
<v-col cols="6">
|
||||
<form @submit.prevent="sendForm">
|
||||
<FileSelect
|
||||
v-if="input.isIncremental"
|
||||
v-model="input.incremental"
|
||||
label="Select the source file"
|
||||
:options="targetDetails"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<BaseCheckbox
|
||||
v-model="input.isPartial"
|
||||
:label="'Partial'"
|
||||
<FileSelect
|
||||
v-model="input.target"
|
||||
label="Select a target file"
|
||||
:options="targetDetails"
|
||||
/>
|
||||
<PartialCheckbox
|
||||
v-if="input.isPartial"
|
||||
v-model="partitionInclude"
|
||||
:labels="updatePartitions"
|
||||
/>
|
||||
<div v-if="input.isPartial">
|
||||
Partial list: {{ partitionList }}
|
||||
</div>
|
||||
</div>
|
||||
<br>
|
||||
<BaseInput
|
||||
v-model="input.extra"
|
||||
:label="'Extra Configurations'"
|
||||
/>
|
||||
<br>
|
||||
<button type="submit">
|
||||
Submit
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
<div>
|
||||
<ul>
|
||||
<h4>Build Library</h4>
|
||||
<strong>
|
||||
Careful: Use a same filename will overwrite the original build.
|
||||
</strong>
|
||||
<br>
|
||||
<button @click="updateBuildLib">
|
||||
Refresh the build Library (use with cautions)
|
||||
</button>
|
||||
<li
|
||||
v-for="targetDetail in targetDetails"
|
||||
:key="targetDetail.file_name"
|
||||
>
|
||||
<div>
|
||||
<h5>Build File Name: {{ targetDetail.file_name }}</h5>
|
||||
Uploaded time: {{ formDate(targetDetail.time) }}
|
||||
<br>
|
||||
Build ID: {{ targetDetail.build_id }}
|
||||
<br>
|
||||
Build Version: {{ targetDetail.build_version }}
|
||||
<br>
|
||||
Build Flavor: {{ targetDetail.build_flavor }}
|
||||
<br>
|
||||
<button
|
||||
:disabled="!input.isIncremental"
|
||||
@click="selectIncremental(targetDetail.path)"
|
||||
<v-row>
|
||||
<v-col
|
||||
cols="4"
|
||||
align="center"
|
||||
>
|
||||
Select as Incremental File
|
||||
</button>
|
||||
 
|
||||
<button @click="selectTarget(targetDetail.path)">
|
||||
Select as Target File
|
||||
</button>
|
||||
<BaseCheckbox
|
||||
v-model="input.verbose"
|
||||
:label="'Verbose'"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col
|
||||
cols="4"
|
||||
align="center"
|
||||
>
|
||||
<BaseCheckbox
|
||||
v-model="input.isIncremental"
|
||||
:label="'Incremental'"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col
|
||||
cols="4"
|
||||
align="center"
|
||||
>
|
||||
<BaseCheckbox
|
||||
v-model="input.isPartial"
|
||||
:label="'Partial'"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<div>
|
||||
<PartialCheckbox
|
||||
v-if="input.isPartial"
|
||||
v-model="partitionInclude"
|
||||
:labels="updatePartitions"
|
||||
/>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<v-divider class="my-5" />
|
||||
<BaseInput
|
||||
v-model="input.extra"
|
||||
:label="'Extra Configurations'"
|
||||
/>
|
||||
<v-divider class="my-5" />
|
||||
<v-btn
|
||||
block
|
||||
type="submit"
|
||||
>
|
||||
Submit
|
||||
</v-btn>
|
||||
</form>
|
||||
</v-col>
|
||||
<v-divider vertical />
|
||||
<v-col cols="6">
|
||||
<ul>
|
||||
<h3>Build Library</h3>
|
||||
<UploadFile @file-uploaded="fetchTargetList" />
|
||||
<li
|
||||
v-for="targetDetail in targetDetails"
|
||||
:key="targetDetail.file_name"
|
||||
>
|
||||
<div>
|
||||
<h3> Build File Name: {{ targetDetail.file_name }} </h3>
|
||||
<strong> Uploaded time: </strong> {{ formDate(targetDetail.time) }}
|
||||
<br>
|
||||
<strong> Build ID: </strong> {{ targetDetail.build_id }}
|
||||
<br>
|
||||
<strong> Build Version: </strong> {{ targetDetail.build_version }}
|
||||
<br>
|
||||
<strong> Build Flavor: </strong> {{ targetDetail.build_flavor }}
|
||||
<br>
|
||||
<v-btn
|
||||
:disabled="!input.isIncremental"
|
||||
@click="selectIncremental(targetDetail.path)"
|
||||
>
|
||||
Select as Incremental File
|
||||
</v-btn>
|
||||
 
|
||||
<v-btn @click="selectTarget(targetDetail.path)">
|
||||
Select as Target File
|
||||
</v-btn>
|
||||
</div>
|
||||
<v-divider class="my-5" />
|
||||
</li>
|
||||
<v-btn @click="updateBuildLib">
|
||||
Refresh the build Library (use with cautions)
|
||||
</v-btn>
|
||||
</ul>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@@ -146,7 +154,7 @@ export default {
|
||||
handler: function () {
|
||||
this.input.partial = this.partitionList
|
||||
},
|
||||
}
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.resetInput()
|
||||
@@ -213,4 +221,7 @@ export default {
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
ul > li {
|
||||
list-style: none
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user