sam/admin-fe
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Render Logger settings using description API data

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

20
src/views/settings/components/Inputs.vue
View file

@ -28,17 +28,7 @@
:key="index"/>
</el-select>
<el-select
v-if="Array.isArray(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')"
v-if="renderMultipleSelect(setting.type)"
:value="data[setting.key]"
multiple
filterable
@ -201,6 +191,14 @@ export default {
const updatedValue = { ...this.$store.state.settings.settings[tab][inputName], ...{ [childName]: value }}
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) {
console.log(value)
},

226
src/views/settings/components/Logger.vue
View file

@ -1,169 +1,20 @@
<template>
<div>
<el-form ref="loggerBackends" :model="loggerBackends" :label-width="labelWidth">
<el-form-item label="Backends">
<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>
<div v-if="!loading">
<el-form ref="loggerData" :model="loggerData" :label-width="labelWidth">
<setting :settings-group="logger" :data="loggerData"/>
</el-form>
<div class="line"/>
<el-form ref="consoleLogger" :model="consoleLogger" :label-width="labelWidth">
<el-form-item label="Console logger:"/>
<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 ref="consoleData" :model="consoleData" :label-width="labelWidth">
<setting :settings-group="console" :data="consoleData"/>
</el-form>
<div class="line"/>
<el-form ref="exsyslogger" :model="exsyslogger" :label-width="labelWidth">
<el-form-item label="ExSyslogger:"/>
<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 that’s 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 ref="exsysloggerData" :model="exsysloggerData" :label-width="labelWidth">
<setting :settings-group="exsyslogger" :data="exsysloggerData"/>
</el-form>
<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="Webhook URL">
<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>
<setting :settings-group="quack" :data="quackData"/>
<el-form-item>
<el-button type="primary" @click="onSubmit">Submit</el-button>
</el-form-item>
@ -174,44 +25,57 @@
<script>
import { mapGetters } from 'vuex'
import i18n from '@/lang'
import { options } from './options'
import Setting from './Setting'
export default {
name: 'Logger',
components: { Setting },
computed: {
...mapGetters([
'consoleLogger',
'exsyslogger',
'level',
'loggerBackends',
'meta',
'webhookUrl'
'settings'
]),
loggerBackendsValue() {
return this.loggerBackends.value ? this.loggerBackends.value.map(el => JSON.stringify(el)) : []
console() {
return this.settings.description.find(setting => setting.key === ':console')
},
loggerBackendsOptions() {
return options.loggerBackendsOptions
consoleData() {
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() {
return this.$store.state.app.device === 'mobile'
},
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: {
processNestedData(value, tab, section, input) {
const updatedValue = { ...this.$store.state.settings.settings[tab][section], ...{ [input]: value }}
this.updateSetting(updatedValue, tab, section)
},
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 }})
},
// updateloggerBackends(value, tab, input) {
// const parseValue = value.map(el => JSON.parse(el))
// this.$store.dispatch('UpdateSettings', { tab, data: { [input]: parseValue }})
// },
async onSubmit() {
try {
await this.$store.dispatch('SubmitChanges')