From c72d06195dcb1769cd2c53f5f71f1f890851efde Mon Sep 17 00:00:00 2001 From: Kinplemelon Date: Fri, 6 Dec 2024 16:34:56 +0800 Subject: [PATCH] feat(streaming): streaming config --- src/App.vue | 4 + src/api/streaming.ts | 4 +- src/hooks/useMenus.ts | 38 +++-- src/hooks/useStreamingStatus.ts | 25 +++ src/i18n/Streaming.js | 42 +++++ src/router/index.ts | 5 + src/store/index.ts | 4 + src/views/Base/LeftBar.vue | 13 +- src/views/Base/QuickPanel.vue | 18 +- src/views/Streaming/StreamingConfig.vue | 161 ++++++++++++++++++ src/views/Streaming/StreamingOverview.vue | 92 ++++++---- .../Streaming/components/StreamingEmpty.vue | 29 ++++ 12 files changed, 380 insertions(+), 55 deletions(-) create mode 100644 src/hooks/useStreamingStatus.ts create mode 100644 src/i18n/Streaming.js create mode 100644 src/views/Streaming/StreamingConfig.vue create mode 100644 src/views/Streaming/components/StreamingEmpty.vue diff --git a/src/App.vue b/src/App.vue index 85233338b..52732e351 100644 --- a/src/App.vue +++ b/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() diff --git a/src/api/streaming.ts b/src/api/streaming.ts index f014caf37..a560811da 100644 --- a/src/api/streaming.ts +++ b/src/api/streaming.ts @@ -16,11 +16,11 @@ import { StreamingMetrics, } from '@/types/typeAlias' -export const getConfig = (): Promise => { +export const getStreamingConfig = (): Promise => { return http.get('/streaming/config') } -export const updateConfig = (data: StreamingConfig): Promise => { +export const updateStreamingConfig = (data: StreamingConfig): Promise => { return http.put('/streaming/config', data) } diff --git a/src/hooks/useMenus.ts b/src/hooks/useMenus.ts index a9118cd3e..69c2359c9 100644 --- a/src/hooks/useMenus.ts +++ b/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 + menuList: ComputedRef } => { 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, diff --git a/src/hooks/useStreamingStatus.ts b/src/hooks/useStreamingStatus.ts new file mode 100644 index 000000000..929f425c8 --- /dev/null +++ b/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 + getStreamingIsEnabled: () => Promise +} => { + 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 } +} diff --git a/src/i18n/Streaming.js b/src/i18n/Streaming.js new file mode 100644 index 000000000..c6a771c30 --- /dev/null +++ b/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 接口端点，使用逗号分隔多个地址。
+例如：127.0.0.1:8080, 127.0.0.1:8081
+未指定端口时，默认值为 8080。`, + en: `The http interface endpoints of the Hornbill nodes to be linked, use commas to separate multiple addresses.
+i.e: 127.0.0.1:8080, 127.0.0.1:8081
+When the port is not specified, its default value is 8080.`, + }, + streamingEndpoints: { + zh: 'Streaming 端点', + en: 'Streaming Endpoints', + }, + streamingEndpointsDesc: { + zh: `Hornbill 节点的 kafka 接口端点，使用逗号分隔多个地址。
+例如：127.0.0.1:9092, 127.0.0.1:9093
+未指定端口时，默认值为 9092。`, + en: `The streaming interface endpoints of the Hornbill nodes to be linked, use commas to separate multiple addresses.
+i.e: 127.0.0.1:9092,127.0.0.1:9093
+When the port is not specified, its default value is 9092.`, + }, + enableStreaming: { + zh: '启用 Streaming', + en: 'Enable Streaming', + }, +} diff --git a/src/router/index.ts b/src/router/index.ts index a80587853..a8a62e46f 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1011,6 +1011,11 @@ export const routes: Array = [ name: 'streaming-overview', component: () => import('@/views/Streaming/StreamingOverview.vue'), }, + { + path: 'config', + name: 'streaming-config', + component: () => import('@/views/Streaming/StreamingConfig.vue'), + }, ], }, // Stream diff --git a/src/store/index.ts b/src/store/index.ts index c14c46e74..23cf19888 100644 --- a/src/store/index.ts +++ b/src/store/index.ts @@ -74,6 +74,7 @@ export default createStore({ ruleEventRequest: undefined as undefined | Promise, 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 diff --git a/src/views/Base/LeftBar.vue b/src/views/Base/LeftBar.vue index 71a9afab3..8444800e8 100644 --- a/src/views/Base/LeftBar.vue +++ b/src/views/Base/LeftBar.vue @@ -7,7 +7,8 @@ router :collapse-transition="false" > -