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

Extract Rate limiters into a separate tab

Browse source
This commit is contained in:
Angelina Filippova 2019-12-26 02:02:30 +03:00
parent 82c077112f
commit a3d8188801
6 changed files with 112 additions and 64 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/store/modules/normalizers.js
View file

@ -28,8 +28,10 @@ export const parseNonTuples = (key, value) => {
// REFACTOR
export const parseTuples = (tuples, key) => {
return tuples.reduce((accum, item) => {
if (key === 'rate_limit') {
accum[item.tuple[0]] = item.tuple[1]
if (key === ':rate_limit') {
accum[item.tuple[0]] = Array.isArray(item.tuple[1])
? item.tuple[1].map(el => el.tuple)
: item.tuple[1].tuple
} else if (item.tuple[0] === ':mascots') {
accum[item.tuple[0]] = item.tuple[1].reduce((acc, mascot) => {
return [...acc, { [mascot.tuple[0]]: { ...mascot.tuple[1], id: `f${(~~(Math.random() * 1e8)).toString(16)}` }}]
@ -150,7 +152,7 @@ const wrapValues = (settings, currentState) => {
return { 'tuple': [setting, wrapValues(value, currentState)] }
} else if (type === 'atom' && value.length > 0) {
return { 'tuple': [setting, `:${value}`] }
} else if (type.includes('tuple') && Array.isArray(value)) {
} else if (type.includes('tuple') && (type.includes('string') || type.includes('list') || type.includes('atom'))) {
return { 'tuple': [setting, { 'tuple': value }] }
} else if (type === 'map') {
const mapValue = Object.keys(value).reduce((acc, key) => {

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

@ -55,30 +55,6 @@
@input="update($event, settingGroup.group, settingGroup.key, settingParent, setting.key, setting.type, nested)">
<template slot="prepend">:</template>
</el-input>
<div v-if="settingGroup.key === ':rate_limit'">
<div v-if="!rateLimitAuthUsers">
<el-input :value="rateLimitAllUsers[0]" placeholder="scale" class="scale-input" @input="parseRateLimiter($event, setting.key, 'scale', 'oneLimit', rateLimitAllUsers)"/> :
<el-input :value="rateLimitAllUsers[1]" placeholder="limit" class="limit-input" @input="parseRateLimiter($event, setting.key, 'limit', 'oneLimit', rateLimitAllUsers)"/>
<div class="limit-button-container">
<el-button icon="el-icon-plus" circle @click="toggleLimits([{ 'tuple': [null, null] }, { 'tuple': [null, null] }], setting.key)"/>
<p class="expl limit-expl">Set different limits for unauthenticated and authenticated users</p>
</div>
</div>
<div v-if="rateLimitAuthUsers">
<el-form-item label="Authenticated users:">
<el-input :value="rateLimitAuthUsers[0]" placeholder="scale" class="scale-input" @input="parseRateLimiter($event, setting.key, 'scale', 'authUserslimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/> :
<el-input :value="rateLimitAuthUsers[1]" placeholder="limit" class="limit-input" @input="parseRateLimiter($event, setting.key, 'limit', 'authUserslimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/>
</el-form-item>
<el-form-item label="Unauthenticated users:">
<el-input :value="rateLimitUnauthUsers[0]" placeholder="scale" class="scale-input" @input="parseRateLimiter($event, setting.key, 'scale', 'unauthUsersLimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/> :
<el-input :value="rateLimitUnauthUsers[1]" placeholder="limit" class="limit-input" @input="parseRateLimiter($event, setting.key, 'limit', 'unauthUsersLimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/>
</el-form-item>
<div class="limit-button-container">
<el-button icon="el-icon-minus" circle @click="toggleLimits({ 'tuple': [null, null] }, setting.key)"/>
<p class="expl limit-expl">Set limit for all users</p>
</div>
</div>
</div>
<!-- special inputs -->
<auto-linker-input v-if="settingGroup.group === ':auto_linker'" :data="data" :setting-group="settingGroup" :setting="setting"/>
<mascots-input v-if="setting.key === ':mascots'" :data="data" :setting-group="settingGroup" :setting="setting"/>
@ -88,6 +64,7 @@
<ssl-options-input v-if="setting.key === ':ssl_options'" :setting-group="settingGroup" :setting-parent="settingParent" :setting="setting" :data="data" :nested="true" :custom-label-width="'100px'"/>
<backends-logger-input v-if="setting.key === ':backends'" :data="data" :setting-group="settingGroup" :setting="setting"/>
<prune-input v-if="setting.key === ':prune'" :data="data[setting.key]" :setting-group="settingGroup" :setting="setting"/>
<rate-limit-input v-if="settingGroup.key === ':rate_limit'" :data="data" :setting-group="settingGroup" :setting="setting"/>
<!-------------------->
<p class="expl">{{ setting.description }}</p>
</el-form-item>
@ -97,7 +74,7 @@
import AceEditor from 'vue2-ace-editor'
import 'brace/mode/elixir'
import 'default-passive-events'
import { AutoLinkerInput, BackendsLoggerInput, EditableKeywordInput, IconsInput, MascotsInput, ProxyUrlInput, PruneInput, SslOptionsInput } from './inputComponents'
import { AutoLinkerInput, BackendsLoggerInput, EditableKeywordInput, IconsInput, MascotsInput, ProxyUrlInput, PruneInput, RateLimitInput, SslOptionsInput } from './inputComponents'
export default {
name: 'Inputs',
@ -110,6 +87,7 @@ export default {
MascotsInput,
ProxyUrlInput,
PruneInput,
RateLimitInput,
SslOptionsInput
},
props: {
@ -180,19 +158,6 @@ export default {
labelWidth() {
return this.isMobile ? '100px' : '240px'
},
rateLimitAllUsers() {
return this.data[this.setting.key] ? Object.entries(this.data[this.setting.key])[0] : [null, null]
},
rateLimitAuthUsers() {
return Array.isArray(this.data[this.setting.key])
? Object.entries(this.data[this.setting.key][1])[0]
: false
},
rateLimitUnauthUsers() {
return Array.isArray(this.data[this.setting.key])
? Object.entries(this.data[this.setting.key][0])[0]
: false
},
rewritePolicyValue() {
return typeof this.data[this.setting.key] === 'string' ? [this.data[this.setting.key]] : this.data[this.setting.key]
},
@ -210,22 +175,6 @@ export default {
type === 'map' ||
(Array.isArray(type) && type.includes('keyword') && type.findIndex(el => el.includes('list') && el.includes('string')) !== -1)
},
parseRateLimiter(value, input, typeOfInput, typeOfLimit, currentValue) {
if (typeOfLimit === 'oneLimit') {
const valueToSend = typeOfInput === 'scale' ? { 'tuple': [value, currentValue[1]] } : { 'tuple': [currentValue[0], value] }
this.updateSetting(valueToSend, this.settingGroup.group, 'rate_limit', input)
} else if (typeOfLimit === 'authUserslimit') {
const valueToSend = typeOfInput === 'scale'
? [{ 'tuple': [currentValue[0][0], currentValue[0][1]] }, { 'tuple': [value, currentValue[1][1]] }]
: [{ 'tuple': [currentValue[0][0], currentValue[0][1]] }, { 'tuple': [currentValue[1][0], value] }]
this.updateSetting(valueToSend, this.settingGroup.group, 'rate_limit', input)
} else if (typeOfLimit === 'unauthUsersLimit') {
const valueToSend = typeOfInput === 'scale'
? [{ 'tuple': [value, currentValue[0][1]] }, { 'tuple': [currentValue[1][0], currentValue[1][1]] }]
: [{ 'tuple': [currentValue[0][0], value] }, { 'tuple': [currentValue[1][0], currentValue[1][1]] }]
this.updateSetting(valueToSend, this.settingGroup.group, 'rate_limit', input)
}
},
processNestedData(value, group, key, parentInput, parentType, childInput, childType) {
const valueExists = value => value[group] && value[group][key] && value[group][key][parentInput]
const updatedValueForState = valueExists(this.settings)
@ -246,9 +195,6 @@ export default {
this.setting.key === ':args'
)
},
toggleLimits(value, input) {
this.updateSetting(value, this.settingGroup.group, 'rate_limit', input)
},
update(value, group, key, parent, input, type, nested) {
nested
? this.processNestedData(value, group, key, parent.key, parent.type, input, type)

1
src/views/settings/components/inputComponents/MascotsInput.vue
View file

@ -19,7 +19,6 @@
</template>
<script>
export default {
name: 'MascotsInput',
props: {

100
src/views/settings/components/inputComponents/RateLimitInput.vue Normal file
View file

@ -0,0 +1,100 @@
<template>
<div>
<div v-if="!rateLimitAuthUsers">
<el-input :value="rateLimitAllUsers[0]" placeholder="scale" class="scale-input" @input="parseRateLimiter($event, setting.key, 'scale', 'oneLimit', rateLimitAllUsers)"/> :
<el-input :value="rateLimitAllUsers[1]" placeholder="limit" class="limit-input" @input="parseRateLimiter($event, setting.key, 'limit', 'oneLimit', rateLimitAllUsers)"/>
<div class="limit-button-container">
<el-button icon="el-icon-plus" circle @click="toggleLimits([{ '': '' }, { '': '' }], setting.key)"/>
<p class="expl limit-expl">Set different limits for unauthenticated and authenticated users</p>
</div>
</div>
<div v-if="rateLimitAuthUsers">
<el-form-item label="Authenticated users:">
<el-input :value="rateLimitAuthUsers[0]" placeholder="scale" class="scale-input" @input="parseRateLimiter($event, setting.key, 'scale', 'authUserslimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/> :
<el-input :value="rateLimitAuthUsers[1]" placeholder="limit" class="limit-input" @input="parseRateLimiter($event, setting.key, 'limit', 'authUserslimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/>
</el-form-item>
<el-form-item label="Unauthenticated users:">
<el-input :value="rateLimitUnauthUsers[0]" placeholder="scale" class="scale-input" @input="parseRateLimiter($event, setting.key, 'scale', 'unauthUsersLimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/> :
<el-input :value="rateLimitUnauthUsers[1]" placeholder="limit" class="limit-input" @input="parseRateLimiter($event, setting.key, 'limit', 'unauthUsersLimit', [rateLimitUnauthUsers, rateLimitAuthUsers])"/>
</el-form-item>
<div class="limit-button-container">
<el-button icon="el-icon-minus" circle @click="toggleLimits({ '': '' }, setting.key)"/>
<p class="expl limit-expl">Set limit for all users</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'RateLimitInput',
props: {
data: {
type: [Object, Array],
default: function() {
return {}
}
},
setting: {
type: Object,
default: function() {
return {}
}
},
settingGroup: {
type: Object,
default: function() {
return {}
}
}
},
computed: {
rateLimitAllUsers() {
return this.data[this.setting.key] ? this.data[this.setting.key] : ['', '']
},
rateLimitAuthUsers() {
return this.data[this.setting.key] && Array.isArray(this.data[this.setting.key][0])
? this.data[this.setting.key][0]
: false
},
rateLimitUnauthUsers() {
return this.data[this.setting.key] && Array.isArray(this.data[this.setting.key][1])
? this.data[this.setting.key][1]
: false
}
},
methods: {
parseRateLimiter(value, input, typeOfInput, typeOfLimit, currentValue) {
if (typeOfLimit === 'oneLimit') {
const valueToSend = typeOfInput === 'scale' ? { [value]: currentValue[1] } : { [currentValue[0]]: value }
this.updateSetting(valueToSend, this.settingGroup.group, this.settingGroup.key, input, this.setting.type)
} else if (typeOfLimit === 'authUserslimit') {
const valueToSend = typeOfInput === 'scale'
? [{ [currentValue[0][0]]: currentValue[0][1] }, { [value]: currentValue[1][1] }]
: [{ [currentValue[0][0]]: currentValue[0][1] }, { [currentValue[1][0]]: value }]
this.updateSetting(valueToSend, this.settingGroup.group, this.settingGroup.key, input, this.setting.type)
} else if (typeOfLimit === 'unauthUsersLimit') {
const valueToSend = typeOfInput === 'scale'
? [{ [value]: currentValue[0][1] }, { [currentValue[1][0]]: currentValue[1][1] }]
: [{ [currentValue[0][0]]: value }, { [currentValue[1][0]]: currentValue[1][1] }]
this.updateSetting(valueToSend, this.settingGroup.group, this.settingGroup.key, input, this.setting.type)
}
},
toggleLimits(value, input) {
this.updateSetting(value, this.settingGroup.group, this.settingGroup.key, input)
},
updateSetting(value, group, key, input, type) {
const updatedSettings = Array.isArray(value)
? value.map(element => { return { 'tuple': Object.entries(element)[0] } })
: { 'tuple': Object.entries(value)[0] }
this.$store.dispatch('UpdateSettings', { group, key, input, value: updatedSettings, type })
this.$store.dispatch('UpdateState', { group, key, input, value })
}
}
}
</script>
<style rel='stylesheet/scss' lang='scss'>
@import '../../styles/main';
@include settings
</style>

1
src/views/settings/components/inputComponents/index.js
View file

@ -5,4 +5,5 @@ export { default as EditableKeywordInput } from './EditableKeywordInput'
export { default as IconsInput } from './IconsInput'
export { default as ProxyUrlInput } from './ProxyUrlInput'
export { default as PruneInput } from './PruneInput'
export { default as RateLimitInput } from './RateLimitInput'
export { default as SslOptionsInput } from './SslOptionsInput'

6
src/views/settings/index.vue
View file

@ -53,13 +53,13 @@
<el-tab-pane :label="$t('settings.mrf')" lazy>
<mrf/>
</el-tab-pane>
<el-tab-pane :label="$t('settings.rateLimiters')" lazy>
<rate-limiters/>
</el-tab-pane>
<!--
<el-tab-pane :label="$t('settings.mediaProxy')" lazy>
<media-proxy/>
</el-tab-pane>
<el-tab-pane :label="$t('settings.rateLimiters')" lazy>
<rate-limiters/>
</el-tab-pane>
<el-tab-pane :label="$t('settings.relays')" lazy>
<relays/>
</el-tab-pane>