forked from AkkomaGang/admin-fe
Render Logger settings using description API data
This commit is contained in:
Angelina Filippova
parent
ab0fc5786c
commit
915c7449dd
2 changed files with 54 additions and 192 deletions
|
|
@ -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)
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -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 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>
|
</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')
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue