Render Logger settings using description API data

This commit is contained in:
Angelina Filippova 2019-11-12 19:39:38 +09:00
parent ab0fc5786c
commit 915c7449dd
2 changed files with 54 additions and 192 deletions

View file

@ -28,17 +28,7 @@
:key="index"/> :key="index"/>
</el-select> </el-select>
<el-select <el-select
v-if="Array.isArray(setting.type) && ( v-if="renderMultipleSelect(setting.type)"
(setting.type.includes('list') && setting.type.includes('module')) || (setting.type.includes('module') && setting.type.includes('atom')))"
:value="data[setting.key]"
multiple
filterable
allow-create
@change="updateSetting($event, settingsGroup.key, setting.key)">
<el-option v-for="(option, index) in setting.suggestions" :key="index" :value="option"/>
</el-select>
<el-select
v-if="Array.isArray(setting.type) && setting.type.includes('list') && setting.type.includes('string')"
:value="data[setting.key]" :value="data[setting.key]"
multiple multiple
filterable filterable
@ -201,6 +191,14 @@ export default {
const updatedValue = { ...this.$store.state.settings.settings[tab][inputName], ...{ [childName]: value }} const updatedValue = { ...this.$store.state.settings.settings[tab][inputName], ...{ [childName]: value }}
this.updateSetting(updatedValue, tab, inputName) this.updateSetting(updatedValue, tab, inputName)
}, },
renderMultipleSelect(type) {
return Array.isArray(type) && (
(type.includes('list') && type.includes('string')) ||
(type.includes('list') && type.includes('atom')) ||
(type.includes('list') && type.includes('module')) ||
(type.includes('module') && type.includes('atom'))
)
},
toggleAtomTuple(value, tab, input) { toggleAtomTuple(value, tab, input) {
console.log(value) console.log(value)
}, },

View file

@ -1,169 +1,20 @@
<template> <template>
<div> <div v-if="!loading">
<el-form ref="loggerBackends" :model="loggerBackends" :label-width="labelWidth"> <el-form ref="loggerData" :model="loggerData" :label-width="labelWidth">
<el-form-item label="Backends"> <setting :settings-group="logger" :data="loggerData"/>
<el-select :value="loggerBackendsValue" multiple filterable allow-create @change="updateloggerBackends($event, 'backends', 'value')">
<el-option
v-for="(item, index) in loggerBackendsOptions"
:key="index"
:label="item.label"
:value="item.value"/>
</el-select>
<p class="expl"><span class="code">:console</span> is used to send logs to stdout, <span class="code">{ExSyslogger, :ex_syslogger}</span> to log to syslog, and <span class="code">Quack.Logger</span> to log to Slack</p>
</el-form-item>
</el-form> </el-form>
<div class="line"/> <div class="line"/>
<el-form ref="consoleLogger" :model="consoleLogger" :label-width="labelWidth"> <el-form ref="consoleData" :model="consoleData" :label-width="labelWidth">
<el-form-item label="Console logger:"/> <setting :settings-group="console" :data="consoleData"/>
<el-form-item label="Level">
<el-select :value="consoleLogger.level" clearable @change="updateSetting($event, 'console', 'level')">
<el-option value=":debug" label=":debug - for debug-related messages"/>
<el-option value=":info" label=":info - for information of any kind"/>
<el-option value=":warn" label=":warn - for warnings"/>
<el-option value=":error" label=":error - for errors"/>
</el-select>
<p class="expl">The level to be logged by this backend. Note that messages are filtered by the general
<span class="code">:level</span> configuration for the <span class="code">:logger</span> application first.</p>
</el-form-item>
<el-form-item label="Format">
<el-input :value="consoleLogger.format" @input="updateSetting($event, 'console', 'format')"/>
<p class="expl">The format message used to print logs. </p>
</el-form-item>
<el-form-item label="Metadata">
<el-select :value="consoleLogger.metadata || []" multiple filterable allow-create @change="updateSetting($event, 'console', 'metadata')">
<el-option value=":all"/>
<el-option value=":request_id"/>
<el-option value=":line"/>
<el-option value=":user_id"/>
<el-option value=":application"/>
<el-option value=":function"/>
<el-option value=":file"/>
<el-option value=":pid"/>
<el-option value=":crash_reason"/>
<el-option value=":initial_call"/>
<el-option value=":registered_name"/>
<el-option value=":none"/>
</el-select>
</el-form-item>
<el-form-item label="Device">
<el-input :value="consoleLogger.device" @input="updateSetting($event, 'console', 'device')"/>
<p class="expl">The device to log error messages to. Defaults to <span class="code">:user</span>
but can be changed to something else such as <span class="code">:standard_error</span></p>
</el-form-item>
<el-form-item label="Max buffer">
<el-input-number :value="consoleLogger.max_buffer" :step="1" :min="0" size="large" @change="updateSetting($event, 'console', 'max_buffer')"/>
<p class="expl">Maximum events to buffer while waiting for a confirmation from the IO device (default: 32). Once the buffer is full, the backend will block until a confirmation is received.</p>
</el-form-item>
<el-form-item label="Colors:"/>
<el-form-item label="Enabled">
<el-switch :value="consoleLogger.colors.enabled" @change="processNestedData($event, 'console', 'colors', 'enabled')"/>
</el-form-item>
<el-form-item label="Debug message">
<el-input :value="consoleLogger.colors.debug" @input="processNestedData($event, 'console', 'colors', 'debug')"/>
<p class="expl">Defaults to: <span class="code">:cyan</span></p>
</el-form-item>
<el-form-item label="Info message">
<el-input :value="consoleLogger.colors.info" @input="processNestedData($event, 'console', 'colors', 'info')"/>
<p class="expl">Defaults to: <span class="code">:normal</span></p>
</el-form-item>
<el-form-item label="Warn message">
<el-input :value="consoleLogger.colors.warn" @input="processNestedData($event, 'console', 'colors', 'warn')"/>
<p class="expl">Defaults to: <span class="code">:yellow</span></p>
</el-form-item>
<el-form-item label="Error message">
<el-input :value="consoleLogger.colors.error" @input="processNestedData($event, 'console', 'colors', 'error')"/>
<p class="expl">Defaults to: <span class="code">:red</span></p>
</el-form-item>
</el-form> </el-form>
<div class="line"/> <div class="line"/>
<el-form ref="exsyslogger" :model="exsyslogger" :label-width="labelWidth"> <el-form ref="exsysloggerData" :model="exsysloggerData" :label-width="labelWidth">
<el-form-item label="ExSyslogger:"/> <setting :settings-group="exsyslogger" :data="exsysloggerData"/>
<el-form-item label="Level">
<el-select :value="exsyslogger.level" clearable @change="updateSetting($event, 'ex_syslogger', 'level')">
<el-option value=":debug" label=":debug - for debug-related messages"/>
<el-option value=":info" label=":info - for information of any kind"/>
<el-option value=":warn" label=":warn - for warnings"/>
<el-option value=":error" label=":error - for errors"/>
</el-select>
<p class="expl">Logging level. It defaults to <span class="code">:info.</span></p>
</el-form-item>
<el-form-item label="Format">
<el-input :value="exsyslogger.format" @input="updateSetting($event, 'ex_syslogger', 'format')"/>
<p class="expl">The format message used to print logs.</p>
</el-form-item>
<el-form-item label="Formatter">
<el-input :value="exsyslogger.formatter" @input="updateSetting($event, 'ex_syslogger', 'formatter')"/>
<p class="expl">Formatter that will be used to format the log. It default to <span class="code">Logger.Formatter</span></p>
</el-form-item>
<el-form-item label="Metadata">
<el-select :value="exsyslogger.metadata || []" multiple filterable allow-create @change="updateSetting($event, 'ex_syslogger', 'metadata')">
<el-option value=":all"/>
<el-option value=":request_id"/>
<el-option value=":line"/>
<el-option value=":user_id"/>
<el-option value=":application"/>
<el-option value=":function"/>
<el-option value=":file"/>
<el-option value=":pid"/>
<el-option value=":crash_reason"/>
<el-option value=":initial_call"/>
<el-option value=":registered_name"/>
<el-option value=":none"/>
</el-select>
</el-form-item>
<el-form-item label="Ident">
<el-input :value="exsyslogger.ident" @input="updateSetting($event, 'ex_syslogger', 'ident')"/>
<p class="expl">A string thats prepended to every message, and is typically set to the app name. It defaults to <span class="code">Elixir</span></p>
</el-form-item>
<el-form-item label="Facility">
<el-input :value="exsyslogger.facility" @input="updateSetting($event, 'ex_syslogger', 'facility')"/>
<p class="expl">Syslog facility to be used. It defaults to <span class="code">:local0</span></p>
</el-form-item>
<el-form-item label="Options">
<el-select :value="exsyslogger.option || []" multiple filterable allow-create @change="updateSetting($event, 'ex_syslogger', 'option')">
<el-option value=":pid"/>
<el-option value=":cons"/>
<el-option value=":odelay"/>
<el-option value=":ndelay"/>
<el-option value=":perror"/>
</el-select>
<p class="expl">Syslog option to be used. It defaults to <span class="code">:ndelay.</span></p>
</el-form-item>
</el-form> </el-form>
<div class="line"/> <div class="line"/>
<el-form ref="webhookUrl" :model="webhookUrl" :label-width="labelWidth"> <el-form ref="quackData" :model="quackData" :label-width="labelWidth">
<el-form-item label="Quack logger:"/> <el-form-item label="Quack logger:"/>
<el-form-item label="Webhook URL"> <setting :settings-group="quack" :data="quackData"/>
<el-input :value="webhookUrl.value" @input="updateSetting($event, 'webhook_url', 'value')"/>
</el-form-item>
</el-form>
<el-form ref="level" :model="level" :label-width="labelWidth">
<el-form-item label="Level">
<el-select :value="level.value" clearable @change="updateSetting($event, 'level', 'value')">
<el-option value=":debug" label=":debug - for debug-related messages"/>
<el-option value=":info" label=":info - for information of any kind"/>
<el-option value=":warn" label=":warn - for warnings"/>
<el-option value=":error" label=":error - for errors"/>
</el-select>
<p class="expl">Logging level. It defaults to <span class="code">:info.</span></p>
</el-form-item>
</el-form>
<el-form ref="meta" :model="meta" :label-width="labelWidth">
<el-form-item label="Metadata">
<el-select :value="meta.value || []" multiple filterable allow-create @change="updateSetting($event, 'meta', 'value')">
<el-option value=":all"/>
<el-option value=":module"/>
<el-option value=":function"/>
<el-option value=":file"/>
<el-option value=":application"/>
<el-option value=":line"/>
<el-option value=":pid"/>
<el-option value=":crash_reason"/>
<el-option value=":initial_call"/>
<el-option value=":registered_name"/>
<el-option value=":none"/>
</el-select>
</el-form-item>
<el-form-item> <el-form-item>
<el-button type="primary" @click="onSubmit">Submit</el-button> <el-button type="primary" @click="onSubmit">Submit</el-button>
</el-form-item> </el-form-item>
@ -174,44 +25,57 @@
<script> <script>
import { mapGetters } from 'vuex' import { mapGetters } from 'vuex'
import i18n from '@/lang' import i18n from '@/lang'
import { options } from './options' import Setting from './Setting'
export default { export default {
name: 'Logger', name: 'Logger',
components: { Setting },
computed: { computed: {
...mapGetters([ ...mapGetters([
'consoleLogger', 'settings'
'exsyslogger',
'level',
'loggerBackends',
'meta',
'webhookUrl'
]), ]),
loggerBackendsValue() { console() {
return this.loggerBackends.value ? this.loggerBackends.value.map(el => JSON.stringify(el)) : [] return this.settings.description.find(setting => setting.key === ':console')
}, },
loggerBackendsOptions() { consoleData() {
return options.loggerBackendsOptions return this.settings.settings[':logger'][':console']
}, },
exsyslogger() {
return this.settings.description.find(setting => setting.key === ':ex_syslogger')
},
exsysloggerData() {
return this.settings.settings[':logger'][':ex_syslogger']
},
// loggerBackendsValue() {
// return this.loggerBackends.value ? this.loggerBackends.value.map(el => JSON.stringify(el)) : []
// },
isMobile() { isMobile() {
return this.$store.state.app.device === 'mobile' return this.$store.state.app.device === 'mobile'
}, },
labelWidth() { labelWidth() {
return this.isMobile ? '100px' : '210px' return this.isMobile ? '100px' : '240px'
},
loading() {
return this.settings.loading
},
logger() {
return this.settings.description.find(setting => setting.group === ':logger')
},
loggerData() {
return this.settings.settings[':logger']
},
quack() {
return this.settings.description.find(setting => setting.group === ':quack')
},
quackData() {
return this.settings.settings[':quack']
} }
}, },
methods: { methods: {
processNestedData(value, tab, section, input) { // updateloggerBackends(value, tab, input) {
const updatedValue = { ...this.$store.state.settings.settings[tab][section], ...{ [input]: value }} // const parseValue = value.map(el => JSON.parse(el))
this.updateSetting(updatedValue, tab, section) // this.$store.dispatch('UpdateSettings', { tab, data: { [input]: parseValue }})
}, // },
updateloggerBackends(value, tab, input) {
const parseValue = value.map(el => JSON.parse(el))
this.$store.dispatch('UpdateSettings', { tab, data: { [input]: parseValue }})
},
updateSetting(value, tab, input) {
this.$store.dispatch('UpdateSettings', { tab, data: { [input]: value }})
},
async onSubmit() { async onSubmit() {
try { try {
await this.$store.dispatch('SubmitChanges') await this.$store.dispatch('SubmitChanges')