summaryrefslogtreecommitdiffstats
path: root/webapp/src/components/IpxeBuilderModuleConfig.vue
diff options
context:
space:
mode:
authorJannik Schönartz2019-01-15 04:39:31 +0100
committerJannik Schönartz2019-01-15 04:39:31 +0100
commitffc5050fcdd0efed4f01d7f1f20465cadd9c9f5b (patch)
tree52fa04038927c99b737a5afbcecddd0ae65070f8 /webapp/src/components/IpxeBuilderModuleConfig.vue
parent[webapp/datatable] Add search clear + show all selected button (diff)
downloadbas-ffc5050fcdd0efed4f01d7f1f20465cadd9c9f5b.tar.gz
bas-ffc5050fcdd0efed4f01d7f1f20465cadd9c9f5b.tar.xz
bas-ffc5050fcdd0efed4f01d7f1f20465cadd9c9f5b.zip
[ipxe builder] Add ipxe builder module
EFI and BIOS version can be build and configured Fancy log to see the stdout and stderr
Diffstat (limited to 'webapp/src/components/IpxeBuilderModuleConfig.vue')
-rw-r--r--webapp/src/components/IpxeBuilderModuleConfig.vue224
1 files changed, 224 insertions, 0 deletions
diff --git a/webapp/src/components/IpxeBuilderModuleConfig.vue b/webapp/src/components/IpxeBuilderModuleConfig.vue
new file mode 100644
index 0000000..e4f619a
--- /dev/null
+++ b/webapp/src/components/IpxeBuilderModuleConfig.vue
@@ -0,0 +1,224 @@
+<i18n>
+{
+ "en": {
+ "efi": "EFI",
+ "bios": "BIOS",
+ "general": "general.h",
+ "console": "console.h",
+ "script": "Embedded script (EMBED=)",
+ "trust": "Embedded certificate (TRUST=)",
+ "ipxe": "iPXE",
+ "buildIpxe": "Build iPXE",
+ "scriptSaved": "Embedded script saved successfully",
+ "certificateSaved": "Certificate saved successfully",
+ "generalSaved": "general.h saved successfully",
+ "consoleSaved": "console.h saved successfully",
+ "buildingIpxe": "Building iPXE ...",
+ "cleanIpxe": "Clean iPXE",
+ "cleaningIpxe": "Cleaning iPXE ..."
+ },
+ "de": {
+ "efi": "EFI",
+ "bios": "BIOS",
+ "general": "general.h",
+ "console": "console.h",
+ "script": "Eingebettetes Skript (EMBED=)",
+ "trust": "Eingebettetes Zertifikat (TRUST=)",
+ "ipxe": "iPXE",
+ "buildIpxe": "iPXE bauen",
+ "scriptSaved": "Eingebettetes Skript wurde erfolgreich gespeichert",
+ "certificateSaved": "Zertifikat wurde erfolgreich gespeichert",
+ "generalSaved": "general.h wurde erfolgreich gespeichert",
+ "consoleSaved": "console.h wurde erfolgreich gespeichert",
+ "buildingIpxe": "iPXE wird gebaut ...",
+ "cleanIpxe": "iPXE aufräumen",
+ "cleaningIpxe": "iPXE wird aufgeräumt .."
+ }
+}
+</i18n>
+
+<template>
+ <div>
+
+ <v-subheader>{{ $t('ipxe') }}</v-subheader>
+ <v-card style="padding-left: 24px;padding-right: 24px; padding-top: 12px; padding-bottom: 12px; height: 50vh; overflow: auto;" ref="log">
+ <template v-for="(entry, index) in log">
+ <pre :class="entry.status + '--text'" style="margin-bottom: 0px" :key="index"><span>{{ entry.date }} {{ entry.msg }}</span></pre>
+ </template>
+ </v-card>
+ <div class="text-xs-right">
+ <v-btn flat color="error" @click="cleanIpxe"><v-icon left>delete</v-icon>{{ $t('cleanIpxe') }}</v-btn>
+ <v-btn flat color="primary" @click="buildIpxe"><v-icon left>gavel</v-icon>{{ $t('buildIpxe') }}</v-btn>
+ </div>
+
+ <v-subheader></v-subheader>
+ <v-expansion-panel v-model="scriptExpanded">
+ <v-expansion-panel-content>
+ <div slot="header">{{ $t('script') }}</div>
+ <v-card>
+ <codemirror class="script-editor" ref="script" v-model="script"></codemirror>
+ </v-card>
+ <!--<v-divider></v-divider>-->
+ <div class="text-xs-right">
+ <v-btn flat color="error" @click="undo('script')"><v-icon left>undo</v-icon>{{ $t('undo') }}</v-btn>
+ <v-btn flat color="success" @click="redo('script')"><v-icon left>redo</v-icon>{{ $t('redo') }}</v-btn>
+ <v-btn color="primary" @click="save('script')"><v-icon left>save</v-icon>{{ $t('save') }}</v-btn>
+ </div>
+ </v-expansion-panel-content>
+ </v-expansion-panel>
+
+ <v-subheader></v-subheader>
+ <v-expansion-panel v-model="certificateExpanded">
+ <v-expansion-panel-content>
+ <div slot="header">{{ $t('trust') }}</div>
+ <v-card>
+ <codemirror class="script-editor" ref="certificate" v-model="certificate"></codemirror>
+ </v-card>
+ <!--<v-divider></v-divider>-->
+ <div class="text-xs-right">
+ <v-btn flat color="error" @click="undo('certificate')"><v-icon left>undo</v-icon>{{ $t('undo') }}</v-btn>
+ <v-btn flat color="success" @click="redo('certificate')"><v-icon left>redo</v-icon>{{ $t('redo') }}</v-btn>
+ <v-btn color="primary" @click="save('certificate')"><v-icon left>save</v-icon>{{ $t('save') }}</v-btn>
+ </div>
+ </v-expansion-panel-content>
+ </v-expansion-panel>
+
+ <v-subheader></v-subheader>
+ <v-expansion-panel v-model="generalExpanded">
+ <v-expansion-panel-content>
+ <div slot="header">{{ $t('general') }}</div>
+ <v-card>
+ <codemirror class="script-editor" ref="general" v-model="general"></codemirror>
+ </v-card>
+ <!--<v-divider></v-divider>-->
+ <div class="text-xs-right">
+ <v-btn flat color="error" @click="undo('general')"><v-icon left>undo</v-icon>{{ $t('undo') }}</v-btn>
+ <v-btn flat color="success" @click="redo('general')"><v-icon left>redo</v-icon>{{ $t('redo') }}</v-btn>
+ <v-btn color="primary" @click="save('general')"><v-icon left>save</v-icon>{{ $t('save') }}</v-btn>
+ </div>
+ </v-expansion-panel-content>
+ </v-expansion-panel>
+
+ <v-subheader></v-subheader>
+ <v-expansion-panel v-model="consoleExpanded">
+ <v-expansion-panel-content>
+ <div slot="header">{{ $t('console') }}</div>
+ <v-card>
+ <codemirror class="script-editor" ref="console" v-model="console"></codemirror>
+ </v-card>
+ <!--<v-divider></v-divider>-->
+ <div class="text-xs-right">
+ <v-btn flat color="error" @click="undo('console')"><v-icon left>undo</v-icon>{{ $t('undo') }}</v-btn>
+ <v-btn flat color="success" @click="redo('console')"><v-icon left>redo</v-icon>{{ $t('redo') }}</v-btn>
+ <v-btn color="primary" @click="save('console')"><v-icon left>save</v-icon>{{ $t('save') }}</v-btn>
+ </div>
+ </v-expansion-panel-content>
+ </v-expansion-panel>
+
+ </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import axios from 'axios'
+
+export default {
+ name: 'IpxeBuilder',
+ props: ['ipxeVersion'],
+ components: {
+ },
+ data () {
+ return {
+ tabs: 0,
+ script: '',
+ certificate: '',
+ general: '',
+ console: '',
+ scriptExpanded: null,
+ certificateExpanded: null,
+ generalExpanded: null,
+ consoleExpanded: null,
+ log: []
+ }
+ },
+ computed: {
+ ...mapGetters(['tabsDark', 'tabsColor', 'tabsSliderColor'])
+ },
+ watch: {
+ scriptExpanded: function () {
+ if (this.scriptExpanded === 0) this.$refs.script.refresh()
+ },
+ certificateExpanded: function () {
+ if (this.certificateExpanded === 0) this.$refs.certificate.refresh()
+ },
+ generalExpanded: function () {
+ if (this.generalExpanded === 0) this.$refs.general.refresh()
+ },
+ consoleExpanded: function () {
+ if (this.consoleExpanded === 0) this.$refs.console.refresh()
+ }
+ },
+ methods: {
+ save (apiPath) {
+ axios.put('/api/ipxe/' + this.ipxeVersion + '/' + 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 })
+ })
+ },
+ undo (element) {
+ this.$refs[element].codemirror.undo()
+ },
+ redo (element) {
+ this.$refs[element].codemirror.redo()
+ },
+ buildIpxe () {
+ axios.get('/api/ipxe/' + this.ipxeVersion + '/build').then(result => {
+ this.$snackbar({ color: 'primary', text: this.$tc('buildingIpxe') })
+ })
+ },
+ cleanIpxe () {
+ axios.get('/api/ipxe/' + this.ipxeVersion + '/clean').then(result => {
+ this.$snackbar({ color: 'primary', text: this.$tc('cleaningIpxe') })
+ })
+ }
+ },
+ created () {
+ // Load the data.
+ axios.get('/api/ipxe/' + this.ipxeVersion + '/script').then(result => {
+ this.script = result.data
+ })
+ axios.get('/api/ipxe/' + this.ipxeVersion + '/certificate').then(result => {
+ this.certificate = result.data
+ })
+ axios.get('/api/ipxe/' + this.ipxeVersion + '/general').then(result => {
+ this.general = result.data
+ })
+ axios.get('/api/ipxe/' + this.ipxeVersion + '/console').then(result => {
+ this.console = result.data
+ })
+
+ axios.get('/api/ipxe/' + this.ipxeVersion + '/log').then(result => {
+ var lines = result.data.split('\n')
+ for (var line in lines) {
+ if (lines[line] === '') continue
+ var attr = lines[line].split('\t')
+ this.log.push({ date: attr[0], status: attr[1], msg: attr[2] })
+ }
+ })
+
+ // Socket io event listeners
+ this.$socket.on(this.ipxeVersion + ' log', entry => {
+ this.log.push({ msg: entry.msg, status: entry.status, date: entry.date })
+ })
+ },
+ updated () {
+ this.$refs.log.$el.scrollTop = this.$refs.log.$el.scrollHeight
+ }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+
+</style>