feat(streaming): streaming config

src/App.vue

@@ -12,6 +12,7 @@ import useUpdateBaseInfo from '@/hooks/useUpdateBaseInfo'
 import { DashboardSamlBackend } from '@/types/schemas/dashboardSingleSignOn.schemas'
 import { waitAMoment } from './common/tools'
 import { omit } from 'lodash'
+import useStreamingStatus from './hooks/useStreamingStatus'
 
 const store = useStore()
 const lang = computed(() => {
@@ -98,6 +99,9 @@ const handleQuery = async () => {
   }
 }
 handleQuery()
+
+const { getStreamingIsEnabled } = useStreamingStatus()
+getStreamingIsEnabled()
 </script>
 
 <style lang="scss"></style>

src/api/streaming.ts

@@ -16,11 +16,11 @@ import {
   StreamingMetrics,
 } from '@/types/typeAlias'
 
-export const getConfig = (): Promise<StreamingConfig> => {
+export const getStreamingConfig = (): Promise<StreamingConfig> => {
   return http.get('/streaming/config')
 }
 
-export const updateConfig = (data: StreamingConfig): Promise<StreamingConfig> => {
+export const updateStreamingConfig = (data: StreamingConfig): Promise<StreamingConfig> => {
   return http.put('/streaming/config', data)
 }
 

src/hooks/useMenus.ts

@@ -1,12 +1,17 @@
+import type { ComputedRef } from 'vue'
+import { computed } from 'vue'
+import useStreamingStatus from './useStreamingStatus'
+
 export interface Menu {
   title: string
   path?: string
   icon?: string
   children?: Menu[]
+  disabled?: boolean
 }
 
 export default (): {
-  menuList: Array<Menu>
+  menuList: ComputedRef<Menu[]>
 } => {
   const monitoring = [
     { title: 'dashboard', path: '/dashboard' },
@@ -65,13 +70,26 @@ export default (): {
     { title: 'message-transform', path: '/message-transform' },
   ]
 
-  const streaming = [
+  const { isStreamingEnabled } = useStreamingStatus()
+  const streaming = computed(() => [
     { title: 'streaming-overview', path: '/streaming-overview' },
-    { title: 'stream', path: '/stream' },
-    { title: 'consumer-group', path: '/consumer-group' },
-    { title: 'streaming-authn', path: '/streaming-authn' },
-    { title: 'streaming-authz', path: '/streaming-authz' },
-  ]
+    { title: 'stream', path: '/stream', disabled: !isStreamingEnabled.value },
+    {
+      title: 'consumer-group',
+      path: '/consumer-group',
+      disabled: !isStreamingEnabled.value,
+    },
+    {
+      title: 'streaming-authn',
+      path: '/streaming-authn',
+      disabled: !isStreamingEnabled.value,
+    },
+    {
+      title: 'streaming-authz',
+      path: '/streaming-authz',
+      disabled: !isStreamingEnabled.value,
+    },
+  ])
 
   const diagnose = [
     { title: 'websocket', path: '/websocket' },
@@ -90,7 +108,7 @@ export default (): {
     { title: 'hot-upgrade', path: '/hot-upgrade' },
   ]
 
-  const menuList = [
+  const menuList = computed(() => [
     {
       title: 'monitoring',
       icon: 'icon-monitoring',
@@ -109,7 +127,7 @@ export default (): {
     {
       title: 'streaming',
       icon: 'icon-Stream',
-      children: streaming,
+      children: streaming.value,
     },
     {
       title: 'management',
@@ -126,7 +144,7 @@ export default (): {
       icon: 'icon-system',
       children: system,
     },
-  ]
+  ])
 
   return {
     menuList,

src/hooks/useStreamingStatus.ts

@@ -0,0 +1,25 @@
+import { getStreamingConfig } from '@/api/streaming'
+import type { ComputedRef } from 'vue'
+import { computed } from 'vue'
+import { useStore } from 'vuex'
+
+export default (): {
+  isStreamingEnabled: ComputedRef<boolean>
+  getStreamingIsEnabled: () => Promise<void>
+} => {
+  const { state, commit } = useStore()
+  const isStreamingEnabled = computed(() => state.isStreamingEnabled)
+  const updateStreamingStatus = (isStreamingEnabled: boolean) => {
+    commit('SET_IS_STREAMING_ENABLED', isStreamingEnabled)
+  }
+  const getStreamingIsEnabled = async () => {
+    try {
+      const { enable } = await getStreamingConfig()
+      updateStreamingStatus(enable ?? false)
+      return Promise.resolve()
+    } catch (error) {
+      return Promise.reject(error)
+    }
+  }
+  return { isStreamingEnabled, getStreamingIsEnabled }
+}

src/i18n/Streaming.js

@@ -0,0 +1,42 @@
+export default {
+  endpoints: {
+    zh: '端点',
+    en: 'Endpoints',
+  },
+  streamingPlaceholder: {
+    zh: '请先启用 Streaming',
+    en: 'Please enable streaming first',
+  },
+  streamingConfigurations: {
+    zh: 'Streaming 配置',
+    en: 'Streaming Configurations',
+  },
+  hornbillEndpoints: {
+    zh: 'Hornbill 端点',
+    en: 'Hornbill Endpoints',
+  },
+  hornbillEndpointsDesc: {
+    zh: `Hornbill 节点的 http 接口端点，使用逗号分隔多个地址。<br />
+例如：<code>127.0.0.1:8080, 127.0.0.1:8081</code><br />
+未指定端口时，默认值为 8080。`,
+    en: `The http interface endpoints of the Hornbill nodes to be linked, use commas to separate multiple addresses.<br />
+i.e: <code>127.0.0.1:8080, 127.0.0.1:8081</code><br />
+When the port is not specified, its default value is 8080.`,
+  },
+  streamingEndpoints: {
+    zh: 'Streaming 端点',
+    en: 'Streaming Endpoints',
+  },
+  streamingEndpointsDesc: {
+    zh: `Hornbill 节点的 kafka 接口端点，使用逗号分隔多个地址。<br />
+例如：<code>127.0.0.1:9092, 127.0.0.1:9093</code><br />
+未指定端口时，默认值为 9092。`,
+    en: `The streaming interface endpoints of the Hornbill nodes to be linked, use commas to separate multiple addresses.<br />
+i.e: <code>127.0.0.1:9092,127.0.0.1:9093</code><br />
+When the port is not specified, its default value is 9092.`,
+  },
+  enableStreaming: {
+    zh: '启用 Streaming',
+    en: 'Enable Streaming',
+  },
+}

src/router/index.ts

@@ -1011,6 +1011,11 @@ export const routes: Array<RouteRecordRaw> = [
         name: 'streaming-overview',
         component: () => import('@/views/Streaming/StreamingOverview.vue'),
       },
+      {
+        path: 'config',
+        name: 'streaming-config',
+        component: () => import('@/views/Streaming/StreamingConfig.vue'),
+      },
     ],
   },
   // Stream

src/store/index.ts

@@ -74,6 +74,7 @@ export default createStore({
     ruleEventRequest: undefined as undefined | Promise<any>,
     abortControllers: [] as AbortController[],
     clientTableColumns: getClientTableColumns(),
+    isStreamingEnabled: true,
     /* rule page start */
     isTesting: false,
     savedAfterDataChange: false,
@@ -190,6 +191,9 @@ export default createStore({
       state.clientTableColumns = columns
       localStorage.setItem('clientTableColumns', JSON.stringify(columns))
     },
+    SET_IS_STREAMING_ENABLED(state, isStreamingEnabled) {
+      state.isStreamingEnabled = isStreamingEnabled
+    },
     /* rule page start */
     SET_IS_TESTING(state, isTesting) {
       state.isTesting = isTesting

src/views/Base/LeftBar.vue

@@ -7,7 +7,8 @@
         router
         :collapse-transition="false"
       >
-        <template v-for="(menu, i) in menus" :key="menu.title">
+        <template v-for="(menu, i) in menuList" :key="menu.title">
+          <!-- LEVEL 1 -->
           <el-sub-menu
             v-if="menu.children"
             :index="'' + i"
@@ -21,18 +22,21 @@
               </p>
             </template>
             <el-scrollbar>
+              <!-- LEVEL 2 -->
               <template v-for="item in menu.children" :key="item.title">
-                <el-menu-item v-if="!item.children" :index="item.path">
+                <el-menu-item v-if="!item.children" :index="item.path" :disabled="item.disabled">
                   <template #title>
                     <p class="menu-item-title">
                       {{ $t(`components.${item.title}`) }}
                     </p>
                   </template>
                 </el-menu-item>
+                <!-- LEVEL 2 -->
                 <el-menu-item-group v-else>
                   <template #title>
                     <p class="menu-item-title group-name">{{ $t(`components.${item.title}`) }}</p>
                   </template>
+                  <!-- LEVEL 3 -->
                   <el-menu-item
                     v-for="level3Item in item.children"
                     :index="level3Item.path"
@@ -48,6 +52,7 @@
               </template>
             </el-scrollbar>
           </el-sub-menu>
+          <!-- LEVEL 1 -->
           <el-menu-item v-else :key="menu.title" :index="menu.path">
             <i v-show="leftBarCollapse" :class="['iconfont', menu.icon]"></i>
             <p class="menu-item-title first-level">
@@ -70,7 +75,6 @@ import { useStore } from 'vuex'
 export default defineComponent({
   name: 'Leftbar',
   setup() {
-    const menus = ref<Menu[]>([])
     const store = useStore()
     const route = useRoute()
     const leftBarCollapse = computed(() => {
@@ -100,13 +104,12 @@ export default defineComponent({
 
     const { menuList } = useMenus()
 
-    menus.value = menuList
     return {
       store,
       theme,
       leftBarCollapse,
       defaultSelectedKeys,
-      menus,
+      menuList,
       needFixedHeight,
     }
   },

src/views/Base/QuickPanel.vue

@@ -85,26 +85,34 @@ const { t, tl } = useI18nTl('Base')
 const createChildReg = (path: string) => new RegExp(`${path}(/(\\w|-)+)+$`)
 
 const { menuList } = useMenus()
-const findParentAndBlock = (path: string) => {
+const getInfoByPath = (path: string) => {
   let parent: Menu | any = undefined
+  let disabled = false
   const walk = (menuItem: Menu): boolean => {
     if (menuItem.path) {
       const isTarget = menuItem.path === path
       const isChild = createChildReg(menuItem.path).test(path)
       if (isChild) {
         parent = menuItem
       }
+      if (isTarget && menuItem.disabled !== undefined) {
+        disabled = menuItem.disabled
+      }
       return isTarget || isChild
     } else if (menuItem.children) {
       return menuItem.children.some((item: Menu) => walk(item))
     }
     return false
   }
 
-  const block = menuList.find((item) => walk(item))
+  const block = menuList.value.find((item) => walk(item))
   return {
+    /**
+     * if path is from level 3, parent is level 2; if path is from level 2, there is no parent
+     */
     parentLabel: parent ? t(`components.${parent.title}`) : undefined,
     blockTitle: block ? t(`components.${block.title}`) : '',
+    disabled,
   }
 }
 
@@ -125,8 +133,10 @@ const generateMenuItems = (totalRoutes: Array<RouteRecordRaw>): Array<MenuItem>
       const label = te(`components.${labelKey as string}`)
         ? t(`components.${labelKey as string}`)
         : titleCase(route.name as string)
-      const { parentLabel, blockTitle } = findParentAndBlock(path)
-      ret.push({ path, name: route.name, label, parentLabel, blockTitle })
+      const { parentLabel, blockTitle, disabled } = getInfoByPath(path)
+      if (!disabled) {
+        ret.push({ path, name: route.name, label, parentLabel, blockTitle })
+      }
     }
     if (route.children && level === 0) {
       route.children.forEach((child) => {