LineageOS/android_development
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge "Use material design for OTAGUI."

Browse Source
This commit is contained in:
Kelvin Zhang
2021-07-14 17:07:31 +00:00
committed by Gerrit Code Review
parent 1353136072 5781604572
commit 2793164968
11 changed files with 403 additions and 189 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
tools/otagui/src/App.vue
View File

@@ -1,16 +1,41 @@
<template> <template>
<div id="app"> <v-app>
<div id="nav"> <v-app-bar
<router-link :to="{ name: 'Create' }"> rounded
Create Jobs color="primary"
</router-link> | >
<router-link :to="{ name: 'JobList' }"> <v-app-bar-title> OTA Dashboard </v-app-bar-title>
Jobs Status <v-spacer />
</router-link> | <v-btn
<router-link :to="{ name: 'About' }"> v-for="link in links"
About :key="`${link}-header-link`"
</router-link> :to="{ name: link }"
</div> class="ml-5"
color="primary"
>
{{ link }}
</v-btn>
</v-app-bar>
<v-main>
<v-container fluid>
<router-view /> <router-view />
</div> </v-container>
</v-main>
</v-app>
</template> </template>
<script>
export default {
data() {
return {
links: ['Create', 'JobList', 'About'],
}
},
}
</script>
<style>
h3 {
text-align: center;
}
</style>

30
tools/otagui/src/components/BaseCheckbox.vue
View File

@@ -1,4 +1,8 @@
<template> <template>
<label
v-if="label"
class="checkbox"
>
<input <input
type="checkbox" type="checkbox"
:checked="modelValue" :checked="modelValue"
@@ -6,7 +10,8 @@
v-bind="$attrs" v-bind="$attrs"
@change="$emit('update:modelValue', $event.target.checked)" @change="$emit('update:modelValue', $event.target.checked)"
> >
<label v-if="label"> {{ label }} </label> {{ label }}
</label>
</template> </template>
<script> <script>
@@ -14,12 +19,27 @@ export default {
props: { props: {
label: { label: {
type: String, type: String,
default: '' default: '',
}, },
modelValue: { modelValue: {
type: Boolean, type: Boolean,
default: false default: false,
} },
} },
} }
</script> </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>

60
tools/otagui/src/components/BaseFile.vue
View File

@@ -1,11 +1,19 @@
<template> <template>
<label class="file-select"> <label class="file-select ma-5">
<div class="select-button"> <div
<span v-if="label">{{ label }}</span> class="select-button"
@dragover="dragover"
@dragleave="dragleave"
@drop="drop"
>
<span v-if="label">{{ !fileName ? label : '' }}</span>
<span v-else>Select File</span> <span v-else>Select File</span>
<div v-if="fileName"> File selected: {{ fileName }}</div>
</div> </div>
<input <input
ref="file"
type="file" type="file"
accept=".zip"
@change="handleFileChange" @change="handleFileChange"
> >
</label> </label>
@@ -16,31 +24,53 @@ export default {
props: { props: {
label: { label: {
type: String, type: String,
default: '' default: '',
},
},
data() {
return {
fileName: '',
} }
}, },
methods: { methods: {
handleFileChange(e) { handleFileChange(event) {
this.$emit('file-select', e.target.files) 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> </script>
<style scoped> <style scoped>
.file-select > .select-button { .file-select > .select-button {
padding: 1rem; padding: 3rem;
border-radius: 0.3rem;
color: white; border: 4px dashed #eaebec;
background-color: #2EA169;
border-radius: .3rem;
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
cursor: pointer;
} }
.file-select > input[type="file"] { .file-select > input[type='file'] {
display: none; display: none;
} }
.file-hover {
background-color: #95e995;
}
</style> </style>

9
tools/otagui/src/components/BaseInput.vue
View File

@@ -1,5 +1,5 @@
<template> <template>
<label> {{ label }} </label> <h3> {{ label }} </h3>
<br> <br>
<input <input
v-bind="$attrs" v-bind="$attrs"
@@ -24,3 +24,10 @@ export default{
} }
} }
</script> </script>
<style scoped>
input {
width: 100%;
background: #f2f2f2;
}
</style>

92
tools/otagui/src/components/FileSelect.vue
View File

@@ -1,8 +1,11 @@
<template> <template>
<label v-if="label"> {{ label }} </label> <h3 v-if="label">
{{ label }}
</h3>
<div class="dropdown">
<select <select
:value="modelValue" :value="modelValue"
class="field" class="dropdown-select"
v-bind="$attrs" v-bind="$attrs"
@change="$emit('update:modelValue', $event.target.value)" @change="$emit('update:modelValue', $event.target.value)"
> >
@@ -15,6 +18,7 @@
{{ option.file_name }} {{ option.file_name }}
</option> </option>
</select> </select>
</div>
</template> </template>
@@ -28,12 +32,88 @@ export default {
}, },
modelValue: { modelValue: {
type: [String, Number], type: [String, Number],
default: '' default: '',
}, },
options: { options: {
type: Array, type: Array,
required: true required: true,
} },
} },
} }
</script> </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>

21
tools/otagui/src/components/JobConfiguration.vue
View File

@@ -1,21 +1,21 @@
<template> <template>
<ul v-if="job"> <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"> <li v-if="job.finish_time > 0">
Finish Time: {{ formDate(job.finish_time) }} <strong> Finish Time: </strong> {{ formDate(job.finish_time) }}
</li> </li>
<li v-if="job.isIncremental"> <li v-if="job.isIncremental">
Incremental source: {{ job.incremental_name }} <strong> Incremental source: </strong> {{ job.incremental_name }}
</li> </li>
<li v-if="job.isIncremental && buildDetail"> <li v-if="job.isIncremental && buildDetail">
Incremental source version: {{ job.incremental_build_version }} <strong> Incremental source version: </strong> {{ job.incremental_build_version }}
</li> </li>
<li>Target source: {{ job.target_name }}</li> <li> <strong> Target source: </strong> {{ job.target_name }}</li>
<li v-if="buildDetail"> <li v-if="buildDetail">
Target source version: {{ job.target_build_version }} <strong> Target source version: </strong> {{ job.target_build_version }}
</li> </li>
<li v-if="job.isPartial"> <li v-if="job.isPartial">
Partial: {{ job.partial }} <strong> Partial: </strong> {{ job.partial }}
</li> </li>
</ul> </ul>
</template> </template>
@@ -42,3 +42,10 @@ export default {
}, },
} }
</script> </script>
<style scoped>
ul > li {
list-style: none;
text-align: center;
}
</style>

1
tools/otagui/src/components/JobDisplay.vue
View File

@@ -4,6 +4,7 @@
<span>Status of Job.{{ job.id }}</span> <span>Status of Job.{{ job.id }}</span>
<h4>{{ job.status }}</h4> <h4>{{ job.status }}</h4>
<div v-show="active"> <div v-show="active">
<v-divider class="my-3" />
<JobConfiguration <JobConfiguration
:job="job" :job="job"
:build-detail="false" :build-detail="false"

39
tools/otagui/src/components/PartialCheckbox.vue
View File

@@ -1,14 +1,21 @@
<template> <template>
<ul v-bind="$attrs"> <v-btn
<button block
type="button" type="button"
class="my-5"
@click="revertAllSelection" @click="revertAllSelection"
v-text="selectAllText[selectAll]" >
/> {{ selectAllText[selectAll] }}
<br> </v-btn>
<li <v-row class="mb-5">
<v-col
v-for="label in labels" v-for="label in labels"
:key="label" :key="label"
cols="4"
>
<label
v-if="label"
class="checkbox"
> >
<input <input
type="checkbox" type="checkbox"
@@ -16,9 +23,10 @@
:checked="modelValue.get(label)" :checked="modelValue.get(label)"
@change="updateSelected($event.target.value)" @change="updateSelected($event.target.value)"
> >
<label v-if="label"> {{ label }} </label> {{ label }}
</li> </label>
</ul> </v-col>
</v-row>
</template> </template>
<script> <script>
@@ -69,4 +77,17 @@ ul > li {
top: 0px; top: 0px;
height: 50px; 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> </style>

17
tools/otagui/src/views/JobDetails.vue
View File

@@ -5,8 +5,9 @@
:job="job" :job="job"
:build-detail="true" :build-detail="true"
/> />
<v-divider class="my-5" />
<div> <div>
<h4>STDERR</h4> <h3>STDERR</h3>
<div <div
ref="stderr" ref="stderr"
class="stderr" class="stderr"
@@ -14,7 +15,7 @@
{{ job.stderr }} {{ job.stderr }}
<p ref="stderrBottom" /> <p ref="stderrBottom" />
</div> </div>
<h4>STDOUT</h4> <h3>STDOUT</h3>
<div <div
ref="stdout" ref="stdout"
class="stdout" class="stdout"
@@ -23,12 +24,14 @@
<p ref="stdoutBottom" /> <p ref="stdoutBottom" />
</div> </div>
</div> </div>
<br> <v-divider class="my-5" />
<div class="download">
<a <a
v-if="job.status == 'Finished'" v-if="job.status == 'Finished'"
:href="download" :href="download"
> Download </a> > Download </a>
</div> </div>
</div>
</template> </template>
<script> <script>
@@ -101,6 +104,12 @@ export default {
.stderr, .stderr,
.stdout { .stdout {
overflow: scroll; overflow: scroll;
height: 200px; height: 160px;
}
.download {
margin: auto;
text-align: center;
font-size: 160%;
} }
</style> </style>

7
tools/otagui/src/views/JobList.vue
View File

@@ -8,9 +8,12 @@
@mouseover="mouseOver(job.id, true)" @mouseover="mouseOver(job.id, true)"
@mouseout="mouseOver(job.id, false)" @mouseout="mouseOver(job.id, false)"
/> />
<button @click="updateStatus"> <v-btn
block
@click="updateStatus"
>
Update Update
</button> </v-btn>
</div> </div>
</template> </template>

93
tools/otagui/src/views/SimpleForm.vue
View File

@@ -1,8 +1,7 @@
<template> <template>
<div> <v-row>
<v-col cols="6">
<form @submit.prevent="sendForm"> <form @submit.prevent="sendForm">
<UploadFile @file-uploaded="fetchTargetList" />
<br>
<FileSelect <FileSelect
v-if="input.isIncremental" v-if="input.isIncremental"
v-model="input.incremental" v-model="input.incremental"
@@ -11,88 +10,97 @@
/> />
<FileSelect <FileSelect
v-model="input.target" v-model="input.target"
label="Select the target file" label="Select a target file"
:options="targetDetails" :options="targetDetails"
/> />
<button <v-row>
type="button" <v-col
@click="fetchTargetList" cols="4"
align="center"
> >
Update File List
</button>
<div>
<BaseCheckbox <BaseCheckbox
v-model="input.verbose" v-model="input.verbose"
:label="'Verbose'" :label="'Verbose'"
/> &emsp; />
</v-col>
<v-col
cols="4"
align="center"
>
<BaseCheckbox <BaseCheckbox
v-model="input.isIncremental" v-model="input.isIncremental"
:label="'Incremental'" :label="'Incremental'"
/> />
</div> </v-col>
<div> <v-col
cols="4"
align="center"
>
<BaseCheckbox <BaseCheckbox
v-model="input.isPartial" v-model="input.isPartial"
:label="'Partial'" :label="'Partial'"
/> />
</v-col>
</v-row>
<div>
<PartialCheckbox <PartialCheckbox
v-if="input.isPartial" v-if="input.isPartial"
v-model="partitionInclude" v-model="partitionInclude"
:labels="updatePartitions" :labels="updatePartitions"
/> />
<div v-if="input.isPartial">
Partial list: {{ partitionList }}
</div> </div>
</div> <v-divider class="my-5" />
<br>
<BaseInput <BaseInput
v-model="input.extra" v-model="input.extra"
:label="'Extra Configurations'" :label="'Extra Configurations'"
/> />
<br> <v-divider class="my-5" />
<button type="submit"> <v-btn
block
type="submit"
>
Submit Submit
</button> </v-btn>
</form> </form>
</div> </v-col>
<div> <v-divider vertical />
<v-col cols="6">
<ul> <ul>
<h4>Build Library</h4> <h3>Build Library</h3>
<strong> <UploadFile @file-uploaded="fetchTargetList" />
Careful: Use a same filename will overwrite the original build.
</strong>
<br>
<button @click="updateBuildLib">
Refresh the build Library (use with cautions)
</button>
<li <li
v-for="targetDetail in targetDetails" v-for="targetDetail in targetDetails"
:key="targetDetail.file_name" :key="targetDetail.file_name"
> >
<div> <div>
<h5>Build File Name: {{ targetDetail.file_name }}</h5> <h3> Build File Name: {{ targetDetail.file_name }} </h3>
Uploaded time: {{ formDate(targetDetail.time) }} <strong> Uploaded time: </strong> {{ formDate(targetDetail.time) }}
<br> <br>
Build ID: {{ targetDetail.build_id }} <strong> Build ID: </strong> {{ targetDetail.build_id }}
<br> <br>
Build Version: {{ targetDetail.build_version }} <strong> Build Version: </strong> {{ targetDetail.build_version }}
<br> <br>
Build Flavor: {{ targetDetail.build_flavor }} <strong> Build Flavor: </strong> {{ targetDetail.build_flavor }}
<br> <br>
<button <v-btn
:disabled="!input.isIncremental" :disabled="!input.isIncremental"
@click="selectIncremental(targetDetail.path)" @click="selectIncremental(targetDetail.path)"
> >
Select as Incremental File Select as Incremental File
</button> </v-btn>
&emsp; &emsp;
<button @click="selectTarget(targetDetail.path)"> <v-btn @click="selectTarget(targetDetail.path)">
Select as Target File Select as Target File
</button> </v-btn>
</div> </div>
<v-divider class="my-5" />
</li> </li>
<v-btn @click="updateBuildLib">
Refresh the build Library (use with cautions)
</v-btn>
</ul> </ul>
</div> </v-col>
</v-row>
</template> </template>
<script> <script>
@@ -146,7 +154,7 @@ export default {
handler: function () { handler: function () {
this.input.partial = this.partitionList this.input.partial = this.partitionList
}, },
} },
}, },
created() { created() {
this.resetInput() this.resetInput()
@@ -213,4 +221,7 @@ export default {
</script> </script>
<style scoped> <style scoped>
ul > li {
list-style: none
}
</style> </style>