summaryrefslogtreecommitdiffstats
path: root/webapp
diff options
context:
space:
mode:
authorJannik Schönartz2019-05-05 22:58:34 +0200
committerJannik Schönartz2019-05-05 22:58:34 +0200
commitc6141d8aba461e2ff7851087c5801fa2cd156265 (patch)
tree5a4e68ff879431f6c9c42ea02c0b9a9f837a2649 /webapp
parent[webapp] very small ui changes (diff)
downloadbas-c6141d8aba461e2ff7851087c5801fa2cd156265.tar.gz
bas-c6141d8aba461e2ff7851087c5801fa2cd156265.tar.xz
bas-c6141d8aba461e2ff7851087c5801fa2cd156265.zip
[ipxe builder] Merge efi and bios ipxe builder to one tab & add parameters ui
[server] Remove all req, res from the shell.js library Add ipxe config for the build parameters & parameter list Add api getter/setter methods for the ipxe config [webapp] Add ui for repository, branch and build targets Output: All of the scroll to bottom is now clickable
Diffstat (limited to 'webapp')
-rw-r--r--webapp/src/components/IpxeBuilderModule.vue18
-rw-r--r--webapp/src/components/IpxeBuilderModuleConfig.vue224
2 files changed, 203 insertions, 39 deletions
diff --git a/webapp/src/components/IpxeBuilderModule.vue b/webapp/src/components/IpxeBuilderModule.vue
index f72e6ef..e2c38ff 100644
--- a/webapp/src/components/IpxeBuilderModule.vue
+++ b/webapp/src/components/IpxeBuilderModule.vue
@@ -1,12 +1,10 @@
<i18n>
{
"en": {
- "efi": "EFI",
- "bios": "BIOS"
+ "ipxe": "iPXE"
},
"de": {
- "efi": "EFI",
- "bios": "BIOS"
+ "ipxe": "iPXE"
}
}
</i18n>
@@ -16,20 +14,14 @@
<v-layout>
<v-flex xl10 offset-xl1 lg12>
<v-card class="tabbar-card">
- <v-tabs v-model="tabs" grow :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor">
- <v-tab><v-icon class="tabbar-tabicon">memory</v-icon>{{ $t('efi') }}</v-tab>
- <v-tab><v-icon class="tabbar-tabicon">memory</v-icon>{{ $t('bios') }}</v-tab>
+ <v-tabs v-model="tabs" grow :dark="tabsDark" :color="tabsColor" :slider-color="tabsSliderColor" hide-slider>
+ <v-tab><v-icon class="tabbar-tabicon">memory</v-icon>{{ $t('ipxe') }}</v-tab>
</v-tabs>
</v-card>
-
<v-tabs-items v-model="tabs" style="padding-bottom: 20px">
<v-tab-item lazy :transition="false" :reverse-transition="false">
- <ipxe-builder-module-config :ipxeVersion="'efi'"></ipxe-builder-module-config>
- </v-tab-item>
- <v-tab-item lazy :transition="false" :reverse-transition="false">
- <ipxe-builder-module-config :ipxeVersion="'bios'"></ipxe-builder-module-config>
+ <ipxe-builder-module-config></ipxe-builder-module-config>
</v-tab-item>
-
</v-tabs-items>
</v-flex>
</v-layout>
diff --git a/webapp/src/components/IpxeBuilderModuleConfig.vue b/webapp/src/components/IpxeBuilderModuleConfig.vue
index 638de2d..230e82a 100644
--- a/webapp/src/components/IpxeBuilderModuleConfig.vue
+++ b/webapp/src/components/IpxeBuilderModuleConfig.vue
@@ -3,8 +3,10 @@
"en": {
"alreadyBuiling": "The iPXE building process not finished",
"bios": "BIOS",
+ "branchName": "Branch Name",
"buildingIpxe": "Building iPXE ...",
"buildIpxe": "Build iPXE",
+ "buildTargetsLabel": "Build Targets",
"cancelIpxe": "Cancel iPXE",
"certificateSaved": "Certificate saved successfully",
"cleaningIpxe": "Cleaning iPXE ...",
@@ -15,8 +17,11 @@
"general": "general.h",
"generalSaved": "general.h saved successfully",
"ipxe": "iPXE",
- "scripts": "Scripts",
+ "output": "Output",
+ "parameters": "Parameters",
+ "repoUrl": "Repository URL",
"script": "Embedded script (EMBED=)",
+ "scripts": "Scripts",
"scriptSaved": "Embedded script saved successfully",
"scrollDown": "Go to the bottom",
"trust": "Embedded certificate (TRUST=)"
@@ -24,8 +29,10 @@
"de": {
"alreadyBuiling": "Der iPXE build-Prozess ist noch nicht abgeschlossen",
"bios": "BIOS",
+ "branchName": "Branch Name",
"buildingIpxe": "iPXE wird gebaut ...",
"buildIpxe": "iPXE bauen",
+ "buildTargetsLabel": "Build Targets",
"cancelIpxe": "iPXE stoppen",
"certificateSaved": "Zertifikat wurde erfolgreich gespeichert",
"console": "console.h",
@@ -35,9 +42,12 @@
"efi": "EFI",
"general": "general.h",
"generalSaved": "general.h wurde erfolgreich gespeichert",
- "scripts": "Skripte",
"ipxe": "iPXE",
+ "output": "Output",
+ "parameters": "Parameter",
+ "repoUrl": "Repository URL",
"script": "Eingebettetes Skript (EMBED=)",
+ "scripts": "Skripte",
"scriptSaved": "Eingebettetes Skript wurde erfolgreich gespeichert",
"scrollDown": "Gehe nach unten",
"trust": "Eingebettetes Zertifikat (TRUST=)"
@@ -47,8 +57,116 @@
<template>
<div>
- <v-subheader>{{ $t('ipxe') }}</v-subheader>
+ <v-subheader>{{ $t('parameters') }}</v-subheader>
+ <v-card>
+ <v-card-text>
+ <v-layout wrap>
+
+ <v-flex lg5 md8 sm8 xs12 order-lg1 order-md1 order-sm1 order-xs2>
+ <v-layout column>
+ <div class="info-input">
+ <div class="info-heading"><v-icon>label</v-icon><span>{{ $t('repoUrl') }}</span></div>
+ <div v-if="!editParametersMode" class="info-text">{{ repoUrl }}</div>
+ <v-text-field v-else v-model="repoUrl" class="info-text pa-0" hide-details></v-text-field>
+ </div>
+ </v-layout>
+ </v-flex>
+
+ <v-flex lg4 md6 sm6 xs12 order-lg2 order-md4 order-sm4 order-xs3>
+ <v-layout column>
+ <div class="info-input">
+ <div class="info-heading"><v-icon>label</v-icon><span>{{ $t('branchName') }}</span></div>
+ <div v-if="!editParametersMode" class="info-text">{{ branchName }}</div>
+ <v-text-field v-else v-model="branchName" class="info-text pa-0" hide-details></v-text-field>
+ </div>
+ </v-layout>
+ </v-flex>
+
+ <v-flex lg9 md6 sm6 xs12 order-lg4 order-md3 order-sm3 order-xs4>
+ <v-layout column>
+ <div class="info-input">
+ <div class="info-heading"><v-icon>my_location</v-icon><span>{{ $t('buildTargetsLabel') }}</span></div>
+
+ <div v-if="!editParametersMode" class="non-selectable info-text">
+ <v-chip v-for="target in buildTargets" :key="target" small>
+ <span class="chip-text">{{ target }}</span>
+ </v-chip>
+ </div>
+ <v-select
+ class="info-text"
+ v-else-if="editParametersMode && !allowCustomTargets"
+ v-model="buildTargets"
+ :items=targets
+ multiple
+ small-chips
+ menu-props="offsetY"
+ >
+ </v-select>
+ <v-combobox
+ class="info-text"
+ v-else-if="editParametersMode && allowCustomTargets"
+ v-model="buildTargets"
+ :items="targets"
+ :search-input.sync="search"
+ hide-selected
+ multiple
+ persistent-hint
+ small-chips
+ deletable-chips
+ hide-details
+ dense
+ style="padding: 0px"
+ @input="createTarget"
+ >
+ <template #no-data>
+ <v-list-tile>
+ <v-list-tile-content>
+ <v-list-tile-title>
+ No results matching "<strong>{{ search }}</strong>". Press <kbd>enter</kbd> to create a new one
+ </v-list-tile-title>
+ </v-list-tile-content>
+ </v-list-tile>
+ </template>
+
+ <template #item="{ index, item }">
+ <v-list-tile-content>
+ {{ item }}
+ </v-list-tile-content>
+ <v-list-tile-action @click.stop>
+ <v-btn icon @click.stop.prevent="deleteTarget(item)">
+ <v-icon color="error">delete</v-icon>
+ </v-btn>
+ </v-list-tile-action>
+ </template>
+
+ </v-combobox>
+
+ </div>
+ </v-layout>
+ </v-flex>
+ <v-flex v-if="!editParametersMode" lg3 md4 sm4 xs12 order-lg3 order-md2 order-sm2 order-xs1 class="text-xs-right">
+ <div class="info-input">
+ <v-btn color="primary" flat @click="editParameters" class="info-buttons">
+ <v-icon left>create</v-icon>{{ $t('edit') }}
+ </v-btn>
+ </div>
+ </v-flex>
+
+ <v-flex v-else lg3 md4 sm4 xs12 order-lg3 order-md2 order-sm2 order-xs1 class="text-xs-right">
+ <div class="info-input">
+ <v-btn color="primary" flat @click="cancelEditParameters" class="info-buttons">{{ $t('cancel') }}</v-btn>
+ <v-btn color="primary" @click="submitParameters" class="info-buttons">
+ <v-icon left>save</v-icon>{{ $t('save') }}
+ </v-btn>
+ </div>
+ </v-flex>
+
+ </v-layout>
+ </v-card-text>
+ </v-card>
+
+ <v-subheader>{{ $t('output') }}</v-subheader>
<!--
<v-card v-on:wheel="manualScroll">
<div>
@@ -68,8 +186,8 @@
</template>
</v-card>
- <div class="scroll-overlay non-selectable" v-if="!autoscroll">
- <div @click="toTheBottom" style="cursor: pointer; height: 100%; display: flex; align-items: center;">
+ <div class="scroll-overlay non-selectable" v-if="!autoscroll" @click="toTheBottom" style="cursor: pointer">
+ <div style="height: 100%; display: flex; align-items: center;">
<v-icon style="margin-right: 10px">vertical_align_bottom</v-icon><pre>{{ $t('scrollDown') }}</pre>
</div>
</div>
@@ -139,31 +257,44 @@
<script>
import { mapGetters } from 'vuex'
-import axios from 'axios'
export default {
name: 'IpxeBuilderModuleConfig',
- props: ['ipxeVersion'],
components: {
},
data () {
return {
- tabs: 0,
- script: '',
+ allowCustomTargets: false,
+ autoscroll: true,
+ buildTargets: [],
+ branchName: '',
certificate: '',
- general: '',
console: '',
- log: [],
disableButtons: false,
- autoscroll: true
+ editParametersMode: false,
+ general: '',
+ log: [],
+ repoUrl: '',
+ script: '',
+ search: '',
+ tabs: 0,
+ targets: []
}
},
computed: {
...mapGetters(['tabsDark', 'tabsColor', 'tabsSliderColor'])
},
methods: {
+ createTarget (list) {
+ const index = list.length - 1
+ if (this.allowCustomTargets && this.targets.indexOf(list[index]) === -1) this.targets.push(list[index])
+ },
+ deleteTarget (item) {
+ const index = this.targets.indexOf(item)
+ if (this.allowCustomTargets) this.targets.splice(index, 1)
+ },
save (apiPath) {
- axios.put('/api/ipxe/' + this.ipxeVersion + '/' + apiPath, { data: this[apiPath] }).then(result => {
+ this.$http.put('/api/ipxe/' + apiPath, { data: this[apiPath] }).then(result => {
const saveMsg = apiPath + 'Saved'
if (result.data.status === 'SUCCESS') this.$snackbar({ color: 'success', text: this.$tc(saveMsg) })
else this.$snackbar({ color: 'error', text: result.data.error })
@@ -176,19 +307,19 @@ export default {
this.$refs[element].codemirror.redo()
},
buildIpxe () {
- axios.get('/api/ipxe/' + this.ipxeVersion + '/build').then(result => {
+ this.$http.get('/api/ipxe/build').then(result => {
if (result.data.status === 'SUCCESS') this.$snackbar({ color: 'primary', text: this.$tc('buildingIpxe') })
else if (result.data.status === 'ALREADY_BUILDING') this.$snackbar({ color: 'error', text: this.$tc('alreadyBuiling') })
})
},
cleanIpxe () {
- axios.get('/api/ipxe/' + this.ipxeVersion + '/clean').then(result => {
+ this.$http.get('/api/ipxe/clean').then(result => {
if (result.data.status === 'SUCCESS') this.$snackbar({ color: 'primary', text: this.$tc('cleaningIpxe') })
else if (result.data.status === 'ALREADY_BUILDING') this.$snackbar({ color: 'error', text: this.$tc('alreadyBuiling') })
})
},
cancelIpxe () {
- axios.get('/api/ipxe/' + this.ipxeVersion + '/cancel').then(result => {
+ this.$http.get('/api/ipxe/cancel').then(result => {
if (result.data.status === 'SUCCESS') this.$snackbar({ color: 'primary', text: this.$tc('cleaningIpxe') }) // TODO:
})
},
@@ -198,24 +329,48 @@ export default {
},
toTheBottom () {
this.autoscroll = true
+ },
+ editParameters () {
+ this.editParametersMode = true
+ },
+ cancelEditParameters () {
+ this.editParametersMode = false
+ },
+ getParameters () {
+ this.$http.get('/api/ipxe/config').then(config => {
+ config = config.data
+ this.branchName = config.branch
+ this.repoUrl = config.repository
+ this.targets = config.targets.list
+ this.buildTargets = config.targets.build
+ this.allowCustomTargets = config.targets.custom
+ })
+ },
+ submitParameters () {
+ const data = { repository: this.repoUrl, branch: this.branchName, buildTargets: this.buildTargets, targetList: this.targets }
+ this.$http.post('/api/ipxe/config', data).then(response => {
+ this.editParametersMode = false
+ })
}
},
created () {
+ this.getParameters()
+
// Load the data.
- axios.get('/api/ipxe/' + this.ipxeVersion + '/script').then(result => {
+ this.$http.get('/api/ipxe/script').then(result => {
this.script = result.data
})
- axios.get('/api/ipxe/' + this.ipxeVersion + '/certificate').then(result => {
+ this.$http.get('/api/ipxe/certificate').then(result => {
this.certificate = result.data
})
- axios.get('/api/ipxe/' + this.ipxeVersion + '/general').then(result => {
+ this.$http.get('/api/ipxe/general').then(result => {
this.general = result.data
})
- axios.get('/api/ipxe/' + this.ipxeVersion + '/console').then(result => {
+ this.$http.get('/api/ipxe/console').then(result => {
this.console = result.data
})
- axios.get('/api/ipxe/' + this.ipxeVersion + '/log?max=500').then(result => {
+ this.$http.get('/api/ipxe/log?max=500').then(result => {
var lines = result.data.split('\n')
for (var line in lines) {
if (lines[line] === '') continue
@@ -225,18 +380,18 @@ export default {
})
// Socket io event listeners
- this.$socket.on(this.ipxeVersion + ' log', entry => {
+ this.$socket.on('log', entry => {
this.log.push({ id: this.log.length, msg: entry.msg, status: entry.status, date: entry.date })
})
// Disable the buttons if a building process is running.
- axios.get('/api/ipxe/' + this.ipxeVersion + '/status').then(result => {
+ this.$http.get('/api/ipxe/status').then(result => {
this.disableButtons = result.data.data
})
- this.$socket.on(this.ipxeVersion + ' inProgress', inProgress => {
- this.disableButtons = inProgress
- })
+ // this.$socket.on('inProgress', inProgress => {
+ // this.disableButtons = inProgress
+ // })
},
updated () {
if (this.autoscroll) {
@@ -270,4 +425,21 @@ export default {
.subtabs {
z-index: 1;
}
+
+ .info-input {
+ margin: 20px;
+ }
+
+ .info-heading > span {
+ margin-left: 10px;
+ }
+
+ .info-buttons {
+ margin: 0;
+ }
+
+ .info-text {
+ margin-left: 34px;
+ font-family: 'Roboto Mono';
+ }
</style>