Render JobQueue tab form descriprion data from API

src/store/modules/normalizers.js

@@ -105,15 +105,20 @@ export const parseTuples = (tuples, key) => {
   return tuples.reduce((accum, item) => {
     if (key === 'rate_limit') {
       accum[item.tuple[0]] = item.tuple[1]
+    } else if ((item.tuple[0] === ':sslopts' && item.tuple[1].length === 0) || // should be removed
+      (item.tuple[0] === ':tlsopts' && item.tuple[1].length === 0)) {
+      accum[item.tuple[0]] = {}
     } else if (Array.isArray(item.tuple[1]) &&
-       (typeof item.tuple[1][0] === 'object' && !Array.isArray(item.tuple[1][0])) && item.tuple[1][0]['tuple']) {
+      (typeof item.tuple[1][0] === 'object' && !Array.isArray(item.tuple[1][0])) && item.tuple[1][0]['tuple']) {
       nonAtomsTuples.includes(item.tuple[0])
         ? accum[item.tuple[0]] = parseNonAtomTuples(item.tuple[1])
         : accum[item.tuple[0]] = parseTuples(item.tuple[1])
     } else if (Array.isArray(item.tuple[1])) {
       accum[item.tuple[0]] = item.tuple[1]
+    } else if (item.tuple[0] === ':ip') {
+      accum[item.tuple[0]] = item.tuple[1].tuple.join('.')
     } else if (item.tuple[1] && typeof item.tuple[1] === 'object' && 'tuple' in item.tuple[1]) {
-      accum[item.tuple[0]] = item.tuple[1]['tuple'].join('.')
+      accum[item.tuple[0]] = { [item.tuple[1].tuple[0]]: item.tuple[1].tuple[1] }
     } else if (item.tuple[1] && typeof item.tuple[1] === 'object') {
       nonAtomsObjects.includes(item.tuple[0])
         ? accum[item.tuple[0]] = parseNonAtomObject(item.tuple[1])

src/views/settings/components/Inputs.vue

@@ -13,7 +13,6 @@
       v-if="setting.type === 'integer'"
       :value="data[setting.key]"
       :placeholder="setting.suggestions[0].toString()"
-      :step="100"
       :min="0"
       size="large"
       class="top-margin"
@@ -69,7 +68,7 @@
       @input="updateSetting($event, settingsGroup.key, setting.key)">
       <template slot="prepend">:</template>
     </el-input>
-    <div v-if="editableKeyword(setting.type)">
+    <div v-if="editableKeywordWithSelect(setting.type)">
       <div v-for="([key, value], index) in editableKeywordData(data)" :key="index" class="setting-input">
         <el-input :value="key" placeholder="key" class="name-input" @input="parseEditableKeyword($event, 'key', index)"/> :
         <el-select :value="value" multiple filterable allow-create class="value-input" @change="parseEditableKeyword($event, 'value', index)"/>
@@ -77,6 +76,39 @@
       </div>
       <el-button icon="el-icon-plus" circle @click="addRowToEditableKeyword"/>
     </div>
+    <div v-if="editableKeywordWithInteger(setting.type)">
+      <div v-for="([key, value], index) in editableKeywordData(data)" :key="index" class="setting-input">
+        <el-input :value="key" placeholder="key" class="name-input" @input="parseEditableKeyword($event, 'key', index)"/> :
+        <el-input-number :value="value" :min="0" size="large" class="value-input" @change="parseEditableKeyword($event, 'value', index)"/>
+        <el-button icon="el-icon-minus" circle @click="deleteEditableKeywordRow(index)"/>
+      </div>
+      <el-button icon="el-icon-plus" circle @click="addRowToEditableKeyword"/>
+    </div>
+    <div v-if="setting.key === ':prune'">
+      <el-radio-group v-model="prune">
+        <el-radio label=":disabled">Disabled</el-radio>
+        <el-radio label=":maxlen">Limit-based</el-radio>
+        <el-radio label=":maxage">Time-based</el-radio>
+      </el-radio-group>
+      <el-form-item v-if="prune === ':maxlen'" label="max length" label-width="100" label-position="left">
+        <el-input-number
+          :value="data[setting.key][':maxlen']"
+          :min="0"
+          placeholder="1500"
+          size="large"
+          class="top-margin"
+          @change="updateSetting($event, settingsGroup.key, setting.key)"/>
+      </el-form-item>
+      <el-form-item v-if="prune === ':maxage'" label="max age" label-width="100" label-position="left">
+        <el-input-number
+          :value="data[setting.key][':maxage']"
+          :min="0"
+          placeholder="3600"
+          size="large"
+          class="top-margin"
+          @change="updateSetting($event, settingsGroup.key, setting.key)"/>
+      </el-form-item>
+    </div>
     <p class="expl">{{ setting.description }}</p>
   </el-form-item>
 </template>
@@ -119,6 +151,11 @@ export default {
       set: function(value) {
         this.processNestedData([value], this.settingsGroup.key, this.setting.key, this.data[this.setting.key])
       }
+    },
+    prune() {
+      return this.data[this.setting.key] === ':disabled'
+        ? ':disabled'
+        : Object.keys(this.data[this.setting.key])[0]
     }
   },
   methods: {
@@ -137,7 +174,12 @@ export default {
       console.log(updatedValue)
       this.updateSetting(updatedValue, this.settingsGroup.key, this.setting.key)
     },
-    editableKeyword(type) {
+    editableKeywordWithInteger(type) {
+      return Array.isArray(type)
+        ? type.includes('keyword') && type.includes('integer')
+        : false
+    },
+    editableKeywordWithSelect(type) {
       return Array.isArray(type)
         ? type.includes('keyword') && type.findIndex(el => el.includes('list') && el.includes('string')) !== -1
         : false
@@ -159,6 +201,9 @@ export default {
       const updatedValue = { ...this.$store.state.settings.settings[tab][inputName], ...{ [childName]: value }}
       this.updateSetting(updatedValue, tab, inputName)
     },
+    toggleAtomTuple(value, tab, input) {
+      console.log(value)
+    },
     updateSetting(value, tab, input) {
       this.$store.dispatch('UpdateSettings', { tab, data: { [input]: value }})
     }

src/views/settings/components/JobQueue.vue

@@ -1,48 +1,10 @@
 <template>
-  <div>
-    <el-form ref="queues" :model="queues" :label-width="labelWidth">
-      <el-form-item label="Job queues:"/>
-      <el-form-item label="Outgoing federation">
-        <el-input-number :value="queues.federator_outgoing" :step="1" :min="0" size="large" @change="updateSetting($event, 'queues', 'federator_outgoing')"/>
-      </el-form-item>
-      <el-form-item label="Incoming federation">
-        <el-input-number :value="queues.federator_incoming" :step="1" :min="0" size="large" @change="updateSetting($event, 'queues', 'federator_incoming')"/>
-      </el-form-item>
-      <el-form-item label="Email sender">
-        <el-input-number :value="queues.mailer" :step="1" :min="0" size="large" @change="updateSetting($event, 'queues', 'mailer')"/>
-      </el-form-item>
-      <el-form-item label="Transmogrifier">
-        <el-input-number :value="queues.transmogrifier" :step="1" :min="0" size="large" @change="updateSetting($event, 'queues', 'transmogrifier')"/>
-      </el-form-item>
-      <el-form-item label="Web push notifications">
-        <el-input-number :value="queues.web_push" :step="1" :min="0" size="large" @change="updateSetting($event, 'queues', 'web_push')"/>
-      </el-form-item>
-      <el-form-item label="Scheduled activities">
-        <el-input-number :value="queues.scheduled_activities" :step="1" :min="0" size="large" @change="updateSetting($event, 'queues', 'scheduled_activities')"/>
-      </el-form-item>
-      <el-form-item label="Background">
-        <el-input-number :value="queues.background" :step="1" :min="0" size="large" @change="updateSetting($event, 'queues', 'background')"/>
-      </el-form-item>
+  <div v-if="!loading">
+    <el-form ref="obanQueuesData" :model="obanQueuesData" :label-width="labelWidth">
+      <setting :settings-group="obanQueues" :data="obanQueuesData"/>
     </el-form>
-    <div class="line"/>
-    <el-form ref="retryQueue" :model="retryQueue" :label-width="labelWidth">
-      <el-form-item label="Retry queue:"/>
-      <el-form-item label="Enabled">
-        <el-switch :value="retryQueue.enabled" @change="updateSetting($event, 'Pleroma.Web.Federator.RetryQueue', 'enabled')"/>
-        <p class="expl">If set to true, failed federation jobs will be retried</p>
-      </el-form-item>
-      <el-form-item label="Max jobs">
-        <el-input-number :value="retryQueue.max_jobs" :step="1" :min="0" size="large" @change="updateSetting($event, 'Pleroma.Web.Federator.RetryQueue', 'max_jobs')"/>
-        <p class="expl">The maximum amount of parallel federation jobs running at the same time.</p>
-      </el-form-item>
-      <el-form-item label="Initial timeout (s)">
-        <el-input-number :value="retryQueue.initial_timeout" :step="1" :min="0" size="large" @change="updateSetting($event, 'Pleroma.Web.Federator.RetryQueue', 'initial_timeout')"/>
-        <p class="expl">The initial timeout in seconds</p>
-      </el-form-item>
-      <el-form-item label="Max retries">
-        <el-input-number :value="retryQueue.max_retries" :step="1" :min="0" size="large" @change="updateSetting($event, 'Pleroma.Web.Federator.RetryQueue', 'max_retries')"/>
-        <p class="expl">The maximum number of times a federation job is retried</p>
-      </el-form-item>
+    <el-form ref="workersData" :model="workersData" :label-width="labelWidth">
+      <setting :settings-group="workers" :data="workersData"/>
       <el-form-item>
         <el-button type="primary" @click="onSubmit">Submit</el-button>
       </el-form-item>
@@ -53,19 +15,35 @@
 <script>
 import i18n from '@/lang'
 import { mapGetters } from 'vuex'
+import Setting from './Setting'
 
 export default {
   name: 'JobQueue',
+  components: { Setting },
   computed: {
     ...mapGetters([
-      'queues',
-      'retryQueue'
+      'settings'
     ]),
     isMobile() {
       return this.$store.state.app.device === 'mobile'
     },
     labelWidth() {
-      return this.isMobile ? '100px' : '210px'
+      return this.isMobile ? '100px' : '240px'
+    },
+    loading() {
+      return this.settings.loading
+    },
+    obanQueues() {
+      return this.settings.description.find(setting => setting.key === 'Oban')
+    },
+    obanQueuesData() {
+      return this.settings.settings['Oban']
+    },
+    workers() {
+      return this.settings.description.find(setting => setting.key === ':workers')
+    },
+    workersData() {
+      return this.settings.settings[':workers']
     }
   },
   methods: {