Merge branch 'dev/1.10.2' into enterprise

package.json

@@ -34,6 +34,7 @@
     "echarts": "^5.2.1",
     "element-plus": "~2.3.0",
     "genson-js": "^0.0.8",
+    "github-markdown-css": "^5.7.0",
     "highlight.js": "10.7.3",
     "hocon-parser": "^1.0.1",
     "js-base64": "^3.7.2",

src/api/common.ts

@@ -16,7 +16,7 @@ import { PostLogin200 } from '@/types/schemas/dashboard.schemas'
 
 //account
 export function login(user: { password: string; username: string }): Promise<PostLogin200> {
-  return http.post('/login', user)
+  return http.post('/login', user, { keepSpaces: true })
 }
 
 export function logout(username: string, backend: 'ldap' | 'local' = 'local') {

src/common/http.js

@@ -9,6 +9,7 @@ import { stringifyObjSafely } from '@emqx/shared-ui-utils'
 import _ from 'lodash'
 import { API_BASE_URL, REQUEST_TIMEOUT_CODE } from '@/common/constants'
 import { BAD_TOKEN, TOKEN_TIME_OUT, NAME_PWD_ERROR } from '@/common/customErrorCode'
+import { trimValues } from '@/common/tools'
 import i18n from '@/i18n'
 
 NProgress.configure({ showSpinner: false, trickleSpeed: 200 })
@@ -30,6 +31,14 @@ axios.interceptors.request.use(
     config.signal = controller.signal
     config.controller = controller
     store.commit('ADD_ABORT_CONTROLLER', controller)
+
+    if (
+      !config.keepSpaces &&
+      ['post', 'put'].includes(config.method) &&
+      typeof config.data === 'object'
+    ) {
+      config.data = trimValues(config.data)
+    }
     return config
   },
   (error) => {

src/common/tools.ts

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/explicit-module-boundary-types */
-import { cloneDeep, escape, get, isFunction, isObject, isUndefined, omit, set } from 'lodash'
+import { cloneDeep, escape, get, isFunction, isObject, isUndefined, omit, round, set } from 'lodash'
 import moment from 'moment'
 import { API_BASE_URL, COPY_SUFFIX } from './constants'
 import { ListDataWithPagination } from '@/types/common'
@@ -400,17 +400,17 @@ const ONE_MB = ONE_KB * 1024
 const ONE_GB = ONE_MB * 1024
 
 export const transMemorySizeNumToStr = (byte: number, toFixed?: number): string => {
-  const getNumPart = (num: number) => (toFixed ? num.toFixed(toFixed) : num)
+  const getNumPart = (num: number) => (toFixed ? round(num, toFixed) : num)
   if (byte < ONE_KB) {
-    return getNumPart(byte) + 'Byte'
+    return getNumPart(byte) + ' bytes'
   }
   if (byte < ONE_MB) {
-    return getNumPart(byte / ONE_KB) + 'KB'
+    return getNumPart(byte / ONE_KB) + ' KB'
   }
   if (byte < ONE_GB) {
-    return getNumPart(byte / ONE_MB) + 'MB'
+    return getNumPart(byte / ONE_MB) + ' MB'
   }
-  return getNumPart(byte / ONE_GB) + 'GB'
+  return getNumPart(byte / ONE_GB) + ' GB'
 }
 
 const memoryStrReg = new RegExp(`^(\\d+(\\.\\d+)?)(${usefulMemoryUnit.join('|')})$`)
@@ -749,6 +749,30 @@ export const accAdd = (arg1: number, arg2: number): number => {
   return (adjustedArg1 + adjustedArg2) / multiplier
 }
 
+type TrimValuesParam = string | Record<string, any> | Array<TrimValuesParam>
+export const trimValues = (obj: TrimValuesParam, omitKeys?: Array<string>) => {
+  const ret = cloneDeep(obj)
+  const handle = (val: TrimValuesParam): TrimValuesParam => {
+    // If the value is from a textarea, don't handle spaces
+    if (typeof val === 'string' && !/\n/.test(val)) {
+      return val.trim()
+    }
+    if (Array.isArray(val)) {
+      return val.map((item) => handle(item))
+    }
+    if (isObject(val)) {
+      Object.entries(val).forEach(([key, value]) => {
+        if (omitKeys?.includes(key)) {
+          return
+        }
+        val[key] = handle(value)
+      })
+    }
+    return val
+  }
+  return handle(ret)
+}
+
 const getDataFromParams = (params: string): Record<string, string> => {
   const str = params
   if (URLSearchParams) {

src/components/FormItemLabel.vue

@@ -3,7 +3,7 @@
   <InfoTooltip v-if="desc" v-bind="$attrs">
     <template #content>
       <template v-if="!descMarked">{{ desc }}</template>
-      <MarkdownContent v-else :content="desc" />
+      <MarkdownContent v-else :content="desc" in-tooltip />
     </template>
   </InfoTooltip>
 </template>

src/components/MarkdownContent.vue

@@ -1,7 +1,11 @@
 <template>
   <el-row class="markdown-content" :gutter="gutter">
     <el-col :span="showToc ? 18 : 24">
-      <div class="markdown-content" ref="containerEle"></div>
+      <div
+        class="markdown-content"
+        :class="{ 'markdown-body': !inTooltip }"
+        ref="containerEle"
+      ></div>
     </el-col>
     <el-col class="toc-list" v-if="showToc" :span="6">
       <div class="toc-title">{{ $t('Base.content') }}</div>
@@ -14,6 +18,7 @@
 
 <script setup lang="ts">
 /* eslint-disable @typescript-eslint/ban-ts-comment */
+import 'github-markdown-css/github-markdown.css'
 import { ref, defineProps, onMounted, onUnmounted, PropType, watch } from 'vue'
 import { marked } from 'marked'
 import xss from 'xss'
@@ -38,6 +43,14 @@ const props = defineProps({
     type: Number,
     default: 40,
   },
+  /**
+   * do not use github style in tooltip
+   */
+  inTooltip: {
+    required: false,
+    type: Boolean,
+    default: false,
+  },
 })
 
 const renderer = new marked.Renderer()

src/components/Metrics/OverviewMetrics.vue

@@ -156,6 +156,7 @@
         </el-row>
       </div>
     </div>
+    <slot name="custom-block" :data="currentMetrics"></slot>
     <!-- Node Status Table -->
     <div class="metric-block" v-if="$slots.table && !isFlowNode">
       <div class="block-hd">
@@ -186,7 +187,7 @@ import { Metrics, MetricsDataWithExtraData, SetItem } from '@/types/common'
 import { Close, Refresh } from '@element-plus/icons-vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { get } from 'lodash'
-import { computed, defineProps, inject, ref } from 'vue'
+import { computed, defineEmits, defineProps, inject, ref } from 'vue'
 import TypeMetrics from './TypeMetrics.vue'
 
 type MetricsData = MetricsDataWithExtraData<unknown>
@@ -224,6 +225,10 @@ const props = defineProps<{
   nodeStatusDesc?: string
   childrenTitle?: string
 }>()
+const emit = defineEmits<{
+  (e: 'metrics-change', totalMetrics: MetricsData): void
+  (e: 'node-change', node: string, isSelectedCluster: boolean): void
+}>()
 
 // Special handling of metric styles under Flow nodes
 const isFlowNode = inject('isFlowNode', false)
@@ -242,7 +247,9 @@ const selectedNode = ref(CLUSTER)
 const handleNodeChange = () => {
   rateData = getInitRateData()
   updateToView()
+  emit('node-change', selectedNode.value, selectedNode.value === CLUSTER)
 }
+emit('node-change', selectedNode.value, selectedNode.value === CLUSTER)
 
 const getMetricItemLabel = (key: string) => props.textMap[key]?.label || key
 const getMetricItemDesc = (key: string) => props.textMap[key]?.desc || ''
@@ -352,6 +359,7 @@ const getMetrics = async () => {
   try {
     metricsData.value = await props.requestMetrics()
     updateToView()
+    emit('metrics-change', metricsData.value)
   } catch (error) {
     //
   }
@@ -407,8 +415,6 @@ const { syncPolling } = useSyncPolling()
     line-height: 32px;
     color: var(--color-title-primary);
     font-weight: 400;
-  }
-  .metric-num {
     .unit {
       margin-left: 2px;
       font-size: 14px;
@@ -519,6 +525,26 @@ const { syncPolling } = useSyncPolling()
     }
   }
 
+  .num-container {
+    display: flex;
+    .metric-num {
+      margin-right: 8px;
+    }
+  }
+  .num-diff {
+    color: var(--color-primary);
+    line-height: 24px;
+    &.is-red {
+      color: #469cf7;
+    }
+    &.need-plus {
+      &:before {
+        content: '+';
+        margin-right: 2px;
+      }
+    }
+  }
+
   .metric-bar {
     .el-card__body {
       display: flex;

src/components/Metrics/TypeMetricsItem.vue

@@ -88,10 +88,10 @@ const oneDetailData = computed<DetailItem>(() => props.data.detail[0])
 
 const diff = ref(0)
 watch(
-  () => props.data.count,
+  () => props.data,
   (newVal, oldVal) => {
-    if (oldVal !== undefined && newVal !== undefined) {
-      diff.value = newVal - oldVal
+    if (oldVal?.count !== undefined && newVal?.count !== undefined) {
+      diff.value = newVal.count - oldVal.count
     }
   },
 )
@@ -127,26 +127,6 @@ watch(
     margin-right: 6px;
   }
 
-  .num-container {
-    display: flex;
-    .metric-num {
-      margin-right: 8px;
-    }
-  }
-  .num-diff {
-    color: var(--color-primary);
-    line-height: 24px;
-    &.is-red {
-      color: #469cf7;
-    }
-    &.need-plus {
-      &:before {
-        content: '+';
-        margin-right: 2px;
-      }
-    }
-  }
-
   .detail-trigger {
     display: flex;
     align-items: center;

src/components/ObjectArrayEditor.vue

@@ -9,7 +9,7 @@
           </label>
           <InfoTooltip v-if="value.description">
             <template #content>
-              <MarkdownContent :content="value.description" />
+              <MarkdownContent :content="value.description" in-tooltip />
             </template>
           </InfoTooltip>
         </template>

src/components/SchemaForm.tsx

@@ -737,7 +737,7 @@ const SchemaForm = defineComponent({
       const tooltipSlots = {
         content: () => (
           <el-scrollbar max-height="158px">
-            <MarkdownContent content={desc} gutter={0} />
+            <MarkdownContent content={desc} gutter={0} inTooltip={true} />
           </el-scrollbar>
         ),
       }