Merge branch 'dev/1.10.5' into dev/1.11.0

src/components/ArrayEditorTable.vue

@@ -7,14 +7,14 @@
     </el-table-column>
     <el-table-column v-if="!disabled" width="100">
       <template #header>
-        <a href="javascript:;" class="btn" @click="addColumn">
+        <el-button link type="primary" @click="addColumn">
           {{ $t('Base.add') }}
-        </a>
+        </el-button>
       </template>
       <template #default="{ $index }">
-        <a href="javascript:;" class="btn" @click="deleteItem($index)">
+        <el-button link type="primary" @click="deleteItem($index)">
           {{ $t('Base.delete') }}
-        </a>
+        </el-button>
       </template>
     </el-table-column>
   </el-table>

src/components/Buttons/CreateButton.vue

@@ -1,15 +1,19 @@
 <template>
-  <el-button type="primary" :icon="Plus">
-    <template v-if="!$slots.default">
-      {{ t('Base.create') }}
-    </template>
+  <el-button type="primary" :icon="Plus" v-if="noText"></el-button>
+  <el-button type="primary" :icon="Plus" v-else>
+    <template v-if="!$slots.default">{{ t('Base.create') }}</template>
     <slot />
   </el-button>
 </template>
 
 <script setup lang="ts">
 import { Plus } from '@element-plus/icons-vue'
 import { useI18n } from 'vue-i18n'
+import { defineProps } from 'vue'
+
+defineProps<{
+  noText?: boolean
+}>()
 
 const { t } = useI18n()
 </script>

src/components/Buttons/RefreshButton.vue

@@ -1,6 +1,7 @@
 <template>
-  <el-button type="primary" :icon="Refresh">
-    <template v-if="!$slots.default && !noText">
+  <el-button type="primary" :icon="Refresh" v-if="noText"></el-button>
+  <el-button type="primary" :icon="Refresh" v-else>
+    <template v-if="!$slots.default">
       {{ t('Base.refresh') }}
     </template>
     <slot />

src/components/Buttons/SearchButton.vue

@@ -1,6 +1,7 @@
 <template>
-  <el-button type="primary" plain :icon="Search">
-    <template v-if="!noText">{{ t('search') }}</template>
+  <el-button type="primary" plain :icon="Search" v-if="noText"></el-button>
+  <el-button type="primary" plain :icon="Search" v-else>
+    <template>{{ tl('search') }}</template>
   </el-button>
 </template>
 
@@ -13,5 +14,5 @@ defineProps<{
   noText?: boolean
 }>()
 
-const { t } = useI18nTl('Base')
+const { tl } = useI18nTl('Base')
 </script>

src/components/Buttons/ShowMoreButton.vue

@@ -0,0 +1,36 @@
+<template>
+  <el-tooltip :content="!showMoreQuery ? t('Base.showMore') : t('Base.lessMore')" placement="top">
+    <el-button
+      class="icon-button"
+      plain
+      :icon="showMoreQuery ? ArrowUp : ArrowDown"
+      @click="showMoreQuery = !showMoreQuery"
+    >
+    </el-button>
+  </el-tooltip>
+</template>
+
+<script setup lang="ts">
+import { ArrowUp, ArrowDown } from '@element-plus/icons-vue'
+import { useI18n } from 'vue-i18n'
+import { defineProps, defineEmits, computed } from 'vue'
+
+const { t } = useI18n()
+
+const props = defineProps<{
+  modelValue: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: boolean): void
+}>()
+
+const showMoreQuery = computed({
+  get() {
+    return props.modelValue
+  },
+  set(value) {
+    emit('update:modelValue', value)
+  },
+})
+</script>

src/components/Buttons/index.ts

@@ -3,3 +3,4 @@ export { default as SearchButton } from './SearchButton.vue'
 export { default as TableButton } from './TableButton.vue'
 export { default as RefreshButton } from './RefreshButton.vue'
 export { default as ResetButton } from './ResetButton.vue'
+export { default as ShowMoreButton } from './ShowMoreButton.vue'

src/components/ObjectArrayEditor.vue

@@ -22,8 +22,8 @@
           <CustomFormItem :prop="getProp($index, key)" :rules="getFormItemRules(key)">
             <SchemaFormItem
               v-model="arr[$index][key]"
-              :type="(value.type as any)"
-              :symbols="(value.symbols as string[] | number[] | undefined)"
+              :type="(value as any).type"
+              :symbols="(value as any).symbols"
               :custom-props="value.componentProps"
               :property="value"
               :items="value.items"
@@ -34,14 +34,14 @@
     </el-table-column>
     <el-table-column width="80px" v-if="!disabled">
       <template #header>
-        <a href="javascript:;" @click="addItem">
+        <el-button link type="primary" @click="addItem">
           {{ $t('Base.add') }}
-        </a>
+        </el-button>
       </template>
       <template #default="{ $index }">
-        <a href="javascript:;" @click="deleteItem($index)">
+        <el-button link type="primary" @click="deleteItem($index)">
           {{ $t('Base.delete') }}
-        </a>
+        </el-button>
       </template>
     </el-table-column>
   </el-table>
@@ -61,8 +61,8 @@
           >
             <SchemaFormItem
               v-model="item[key]"
-              :type="(value.type as any)"
-              :symbols="(value.symbols  as string[] | number[] | undefined)"
+              :type="(value as any).type"
+              :symbols="(value as any).symbols"
             />
           </CustomFormItem>
         </div>

src/components/global-components.ts

@@ -1,5 +1,12 @@
 import CustomInputPassword from './CustomInputPassword.vue'
-import { CreateButton, TableButton, RefreshButton, SearchButton } from './Buttons'
+import {
+  CreateButton,
+  TableButton,
+  RefreshButton,
+  SearchButton,
+  ResetButton,
+  ShowMoreButton,
+} from './Buttons'
 import type { App } from 'vue'
 
 export default {
@@ -9,5 +16,7 @@ export default {
     app.component('TableButton', TableButton)
     app.component('RefreshButton', RefreshButton)
     app.component('SearchButton', SearchButton)
+    app.component('ResetButton', ResetButton)
+    app.component('ShowMoreButton', ShowMoreButton)
   },
 }

src/i18n/General.ts

@@ -255,4 +255,28 @@ export default {
     zh: '持久会话中消息保留时长，超期的消息不会发送到订阅者。',
     en: 'The duration of message retention in a persistent session,  messages that expire are not delivered to subscribers.',
   },
+  enableForceShutdown: {
+    zh: '启用强制关闭',
+    en: 'Enable Force Shutdown',
+  },
+  enableForceShutdownDesc: {
+    zh: '启用 <code>force_shutdown</code>（强制关闭）功能，当进程堆内存或邮箱大小超过设定值时强制关闭进程',
+    en: 'Enable <code>force_shutdown</code> feature. Process will be forcibly shutdown when heap memory or mailbox size exceeds the set value',
+  },
+  maxHeapSize: {
+    zh: '最大堆内存',
+    en: 'Max Heap Size',
+  },
+  maxHeapSizeDesc: {
+    zh: '进程的最大堆内存大小。如果启用了强制关闭功能，超过此限制的进程将自动退出或被强制终止。进程消息队列（邮箱）中的消息也是堆的一部分。进程关闭可分为以下两种情况：\n- 进程在运行时主动检查当前堆大小，发现超出限制后主动退出\n- 底层调度系统在为进程执行垃圾回收后检查当前堆大小，发现超出限制后强制终止进程\n\n注意：上述两种情况产生的错误日志会有所不同。前者生成的日志类似于 <code>...errorContext: connection_shutdown, reason: #{max => 2097152, reason => proc_heap_too_large, value => 2787348}..</code>，后者生成的日志类似于 <code>...Context: maximum heap size reached...</code>。',
+    en: 'The maximum heap size of the process. If the force_shutdown is enabled, processes that exceed this limit will automatically exit or be forcibly killed. Messages in the process message queue (mailbox) are also part of the heap. The shutdown of a process can be divided into the following two situations:\n- The process actively checks the current heap size during its own operation, and actively exits after finding that it exceeds the limit.\n- The underlying scheduling system checks the current heap size after performing garbage collection for the process, and forcibly kills the process after finding that it exceeds the limit.\n\nNote: The Error logs generated by the above two will be different. The log generated by the former is similar to <code>...errorContext: connection_shutdown, reason: #{max => 2097152, reason => proc_heap_too_large, value => 2787348}..</code>, and the log generated by the latter is similar to <code>...Context: maximum heap size reached...</code>.',
+  },
+  maxMailboxSize: {
+    zh: '最大邮箱大小',
+    en: 'Max Mailbox Size',
+  },
+  maxMailboxSizeDesc: {
+    zh: 'EMQX 为每个客户端连接创建至少一个轻量级进程。每个进程都有自己的消息队列（邮箱）来保存来自其他进程（如 MQTT 消息）的消息，以便进程可以随时从消息队列（邮箱）中读取消息。如果系统繁忙或进程因繁忙的套接字而挂起，消息队列可能会积累大量消息。为避免过度使用内存，当进程的消息队列长度超过此值时，EMQX 将强制关闭该进程。',
+    en: 'EMQX creates at least one lightweight process for each client connection. Each process has its own message queue (aka mailbox) to hold messages from other processes (e.g. MQTT messages) so that the process can read messages from the message queue (mailbox) at any time. If the system is busy or the process hangs due to a busy socket (see <code>high_watermark</code>), the message queue can accumulate many messages. To avoid excessive memory usage, EMQX will force a process to shut down when the length of its message queue exceeds <code>max_mailbox_size</code>.',
+  },
 }

src/i18n/components.ts

@@ -287,6 +287,10 @@ export default {
     zh: '会话持久化',
     en: 'Durable Sessions',
   },
+  'mqtt-force-shutdown': {
+    zh: '强制关闭',
+    en: 'Force Shutdown',
+  },
   /* For Quick Panel Start */
   'rule-create': {
     zh: '创建规则',

src/router/index.ts

@@ -504,6 +504,11 @@ export const routes: Array<RouteRecordRaw> = [
         name: 'mqtt-system-topic',
         component: () => import('@/views/Config/BasicConfig/SystemTopics.vue'),
       },
+      {
+        path: 'force-shutdown',
+        name: 'mqtt-force-shutdown',
+        component: () => import('@/views/Config/BasicConfig/ForceShutdown.vue'),
+      },
     ],
   },
   // log config
@@ -617,7 +622,7 @@ export function toLogin(path?: string): void {
   currentPath !== '/login' &&
     router.push({
       path: '/login',
-      query: { to: path ? path : currentPath ?? undefined },
+      query: { to: path ? path : (currentPath ?? undefined) },
     })
 }
 

src/style/normalize.scss

@@ -256,6 +256,7 @@
     & + .el-dropdown {
       margin-left: 0;
       margin-right: 12px;
+      vertical-align: middle;
     }
   }
 }

src/types/config.d.ts

@@ -1,4 +1,5 @@
 import { ComponentPublicInstance } from 'vue'
+import { EmqxForceShutdown } from './schemas/configs.schemas'
 
 export interface SubTabComponent extends ComponentPublicInstance {
   index: number
@@ -171,7 +172,7 @@ export interface Zone {
   mqtt: Mqtt
   stats: Stats
   flapping_detect: FlappingDetect
-  force_shutdown: ForceShutdown
+  force_shutdown: EmqxForceShutdown
   conn_congestion: ConnCongestion
   force_gc: ForceGc
   overload_protection: OverloadProtection
@@ -220,12 +221,6 @@ export interface FlappingDetect {
   ban_time: string
 }
 
-export interface ForceShutdown {
-  enable: boolean
-  max_message_queue_len: number
-  max_heap_size: string
-}
-
 export interface ConnCongestion {
   enable_alarm: boolean
   min_alarm_sustain_duration: string

src/views/Auth/components/AuthnManager.vue

@@ -32,7 +32,7 @@
           <authn-users-import @uploadedData="loadData" />
         </template>
         <el-tooltip :content="$t('Base.add')" placement="top">
-          <CreateButton class="icon-button" @click="addCommand"><span /></CreateButton>
+          <CreateButton class="icon-button" @click="addCommand" no-text />
         </el-tooltip>
       </div>
     </div>
@@ -149,7 +149,7 @@ const prop = defineProps({
 })
 
 const { t } = useI18n()
-let record = ref<DataManagerItem>(createRawUserForm())
+const record = ref<DataManagerItem>(createRawUserForm())
 const tableData = ref([])
 const lockTable = ref(false)
 const dialogVisible = ref(false)
@@ -255,7 +255,7 @@ const handleDelete = (row: DataManagerItem) => {
 }
 
 const save = async () => {
-  let validation = await recordForm.value.validate()
+  const validation = await recordForm.value.validate()
   if (!validation) {
     return
   }

src/views/Auth/components/AuthzManager.vue

@@ -24,7 +24,9 @@
         </template>
       </div>
       <el-tooltip :content="$t('Base.add')" placement="top">
-        <CreateButton class="icon-button" @click="handleAdd"><span /></CreateButton>
+        <CreateButton class="icon-button" @click="handleAdd">
+          <template v-if="false"></template>
+        </CreateButton>
       </el-tooltip>
     </div>
     <el-table
@@ -211,28 +213,30 @@
               </el-table-column>
               <el-table-column align="right" max-width="160px">
                 <template #header>
-                  <a href="javascript:;" class="btn" @click="addColumn">
+                  <el-button link type="primary" class="btn" @click="addColumn">
                     {{ $t('Base.add') }}
-                  </a>
+                  </el-button>
                 </template>
                 <template #default="{ row, $index }">
-                  <a
-                    href="javascript:;"
-                    :class="['btn', { disabled: $index === 0 }]"
+                  <el-button
+                    link
+                    type="primary"
+                    :disabled="$index === 0"
                     @click="handleUp(row, $index)"
                   >
                     {{ $t('Base.up') }}
-                  </a>
-                  <a
-                    href="javascript:;"
-                    :class="['btn', { disabled: $index === rulesData.length - 1 }]"
+                  </el-button>
+                  <el-button
+                    link
+                    type="primary"
+                    :disabled="$index === rulesData.length - 1"
                     @click="handleDown(row, $index)"
                   >
                     {{ $t('Base.down') }}
-                  </a>
-                  <a href="javascript:;" class="btn" @click="deleteItem(row, $index)">
+                  </el-button>
+                  <el-button link type="primary" class="btn" @click="deleteItem(row, $index)">
                     {{ $t('Base.delete') }}
-                  </a>
+                  </el-button>
                 </template>
               </el-table-column>
             </el-table>
@@ -661,12 +665,13 @@ export default defineComponent({
   }
   .form-table {
     .cell {
-      .btn.disabled {
-        cursor: not-allowed;
-        color: var(--color-text-placeholder);
-      }
-      .btn + .btn {
-        margin-left: 8px;
+      .el-button {
+        padding: 0;
+        margin-right: 0;
+        border: none;
+        & + .el-button {
+          margin-left: 8px;
+        }
       }
     }
   }