From 55f206861d7e544943cd0c582cd8d31f6bf3c5c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Zhukeda-=E6=9C=B1=E7=A7=91=E8=BE=BE?=
 <carlchu0113@gmail.com>
Date: Tue, 3 Sep 2024 17:43:20 +0800
Subject: [PATCH 1/3] =?UTF-8?q?feat:=20=E8=B5=84=E6=BA=90=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=20enable=5Fwebsocket=20=E5=AD=97=E6=AE=B5=20#=20Revie?=
 =?UTF-8?q?wed,=20transaction=20id:=2017269?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/resource-detail/index.vue  |  9 +++++++
 src/dashboard-front/src/css/common.css        |  3 +++
 src/dashboard-front/src/language/lang.ts      |  2 ++
 .../resource/setting/comps/front-config.vue   | 11 ++++++--
 .../src/views/resource/setting/detail.vue     | 25 +++++++++++++++++++
 .../overview/detail-mode/resource-details.vue |  9 +++++++
 6 files changed, 57 insertions(+), 2 deletions(-)

diff --git a/src/dashboard-front/src/components/resource-detail/index.vue b/src/dashboard-front/src/components/resource-detail/index.vue
index 7c96b3ecb..6f4ed1304 100644
--- a/src/dashboard-front/src/components/resource-detail/index.vue
+++ b/src/dashboard-front/src/components/resource-detail/index.vue
@@ -178,6 +178,15 @@
           </div>
         </bk-col>
       </bk-row> -->
+
+      <bk-row :class="{ 'ag-diff': checkDiff('localData.enable_websocket') }">
+        <bk-col :span="4">
+          <label class="ag-key">{{ $t("启用 WebSocket") }}:</label>
+        </bk-col>
+        <bk-col :span="10">
+          <div class="ag-value">{{ localData.enable_websocket ? $t("是") : $t("否") }}</div>
+        </bk-col>
+      </bk-row>
     </bk-container>
 
     <template v-if="localData.proxy?.backend_id">
diff --git a/src/dashboard-front/src/css/common.css b/src/dashboard-front/src/css/common.css
index 3e353ee2d..7a3b62d29 100644
--- a/src/dashboard-front/src/css/common.css
+++ b/src/dashboard-front/src/css/common.css
@@ -148,6 +148,9 @@
 .mt5 {
   margin-top: 5px !important;
 }
+.mt8 {
+  margin-top: 8px !important;
+}
 .mt10 {
   margin-top: 10px !important;
 }
diff --git a/src/dashboard-front/src/language/lang.ts b/src/dashboard-front/src/language/lang.ts
index 70b35a066..acd58c95d 100644
--- a/src/dashboard-front/src/language/lang.ts
+++ b/src/dashboard-front/src/language/lang.ts
@@ -1589,6 +1589,8 @@ const lang: ILANG = {
   '文件名需要跟资源名称完全一致才能导入，请检查文件名': ['Filename must matches resource name'],
   '已匹配到资源': ['Resource matched'],
   '未匹配到资源': ['Resource not matched'],
+  '启用 WebSocket': ['Enable WebSocket'],
+  '启用 WebSocket：': ['Enable WebSocket: '],
 
   // 变量的使用 $t('test', { vari1: 1, vari2: 2 })
   // // 变量的使用 $t('test', { vari1: 1, vari2: 2 })
diff --git a/src/dashboard-front/src/views/resource/setting/comps/front-config.vue b/src/dashboard-front/src/views/resource/setting/comps/front-config.vue
index 3a9ff1f38..b1ebe66b1 100644
--- a/src/dashboard-front/src/views/resource/setting/comps/front-config.vue
+++ b/src/dashboard-front/src/views/resource/setting/comps/front-config.vue
@@ -31,6 +31,12 @@
         </bk-checkbox>
       </div>
     </bk-form-item>
+    <bk-form-item
+      :label="t('启用 WebSocket')"
+      property="enable_websocket"
+      required>
+      <bk-switcher v-model="frontConfigData.enable_websocket" theme="primary" size="small"></bk-switcher>
+    </bk-form-item>
   </bk-form>
 </template>
 <script setup lang="ts">
@@ -58,6 +64,7 @@ const frontConfigData = ref({
   path: '',
   method: 'GET',
   match_subpath: false,
+  enable_websocket: false,
 });
 
 const cloneData = ref({
@@ -104,8 +111,8 @@ watch(
   () => props.detail,
   (val: any) => {
     if (Object.keys(val).length) {
-      const { path, method, match_subpath } = val;
-      frontConfigData.value = { path, method, match_subpath };
+      const { path, method, match_subpath, enable_websocket } = val;
+      frontConfigData.value = { path, method, match_subpath, enable_websocket };
       if (props.isClone) {
         cloneData.value = { path, method };
         setTimeout(() => {
diff --git a/src/dashboard-front/src/views/resource/setting/detail.vue b/src/dashboard-front/src/views/resource/setting/detail.vue
index 4991e1d74..cc32d7958 100644
--- a/src/dashboard-front/src/views/resource/setting/detail.vue
+++ b/src/dashboard-front/src/views/resource/setting/detail.vue
@@ -301,6 +301,29 @@
           </bk-popover>
         </div>
       </bk-form-item>
+      <!--  是否启用 websocket  -->
+      <bk-form-item class="form-item-cls">
+        <template #label>
+          <span class="label-cls">{{ t('启用 WebSocket：') }}</span>
+        </template>
+
+        <div v-if="!frontWsEdit" class="value-container">
+          <span>{{ formData?.enable_websocket ? t('是') : t('否') }}</span>
+          <span class="operate-btn">
+            <i @click="frontWsEdit = true" class="apigateway-icon icon-ag-edit-line"></i>
+          </span>
+        </div>
+
+        <div class="edit-name mt8" v-else>
+          <bk-switcher
+            v-model="formData.enable_websocket"
+            theme="primary"
+            size="small"
+            @change="handleEditSave"
+            class="method">
+          </bk-switcher>
+        </div>
+      </bk-form-item>
     </bk-form>
 
     <div class="title">{{ t('后端配置') }}</div>
@@ -579,6 +602,7 @@ const permEdit = ref<boolean>(false);
 const publicEdit = ref<boolean>(false);
 const frontMethodEdit = ref<boolean>(false);
 const frontPathEdit = ref<boolean>(false);
+const frontWsEdit = ref(false); // 是否启用websocket的编辑态
 const backMethodEdit = ref<boolean>(false);
 const backServicesEdit = ref<boolean>(false);
 const backPathEdit = ref<boolean>(false);
@@ -855,6 +879,7 @@ const handleEditSave = async () => {
     publicEdit.value = false;
     frontMethodEdit.value = false;
     frontPathEdit.value = false;
+    frontWsEdit.value = false;
     backMethodEdit.value = false;
     backServicesEdit.value = false;
     backPathEdit.value = false;
diff --git a/src/dashboard-front/src/views/stage/overview/detail-mode/resource-details.vue b/src/dashboard-front/src/views/stage/overview/detail-mode/resource-details.vue
index 00785fb79..c9ae34d25 100644
--- a/src/dashboard-front/src/views/stage/overview/detail-mode/resource-details.vue
+++ b/src/dashboard-front/src/views/stage/overview/detail-mode/resource-details.vue
@@ -140,6 +140,15 @@
                 <div class="ag-value">{{ currentSource.path }}</div>
               </bk-col>
             </bk-row>
+
+            <bk-row>
+              <bk-col :span="4">
+                <label class="ag-key">{{ $t("启用 Websocket") }}:</label>
+              </bk-col>
+              <bk-col :span="10">
+                <div class="ag-value">{{ currentSource.enable_websocket ? t('是') : t('否') }}</div>
+              </bk-col>
+            </bk-row>
           </bk-container>
 
           <p

From 9cb61c53dc6e13f7e1e3aa2bc4cf73b4f8e0fb85 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Zhukeda-=E6=9C=B1=E7=A7=91=E8=BE=BE?=
 <carlchu0113@gmail.com>
Date: Tue, 3 Sep 2024 17:43:20 +0800
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=E8=B5=84=E6=BA=90=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=20enable=5Fwebsocket=20=E5=AD=97=E6=AE=B5=20#=20Revie?=
 =?UTF-8?q?wed,=20transaction=20id:=2017355?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/resource-detail/index.vue  |  9 +++++++
 src/dashboard-front/src/css/common.css        |  3 +++
 src/dashboard-front/src/language/lang.ts      |  2 ++
 .../resource/setting/comps/front-config.vue   | 11 ++++++--
 .../src/views/resource/setting/detail.vue     | 25 +++++++++++++++++++
 .../version/components/resourceDetail.vue     |  9 +++++++
 .../overview/detail-mode/resource-details.vue |  9 +++++++
 7 files changed, 66 insertions(+), 2 deletions(-)

diff --git a/src/dashboard-front/src/components/resource-detail/index.vue b/src/dashboard-front/src/components/resource-detail/index.vue
index 7c96b3ecb..6f4ed1304 100644
--- a/src/dashboard-front/src/components/resource-detail/index.vue
+++ b/src/dashboard-front/src/components/resource-detail/index.vue
@@ -178,6 +178,15 @@
           </div>
         </bk-col>
       </bk-row> -->
+
+      <bk-row :class="{ 'ag-diff': checkDiff('localData.enable_websocket') }">
+        <bk-col :span="4">
+          <label class="ag-key">{{ $t("启用 WebSocket") }}:</label>
+        </bk-col>
+        <bk-col :span="10">
+          <div class="ag-value">{{ localData.enable_websocket ? $t("是") : $t("否") }}</div>
+        </bk-col>
+      </bk-row>
     </bk-container>
 
     <template v-if="localData.proxy?.backend_id">
diff --git a/src/dashboard-front/src/css/common.css b/src/dashboard-front/src/css/common.css
index 3e353ee2d..7a3b62d29 100644
--- a/src/dashboard-front/src/css/common.css
+++ b/src/dashboard-front/src/css/common.css
@@ -148,6 +148,9 @@
 .mt5 {
   margin-top: 5px !important;
 }
+.mt8 {
+  margin-top: 8px !important;
+}
 .mt10 {
   margin-top: 10px !important;
 }
diff --git a/src/dashboard-front/src/language/lang.ts b/src/dashboard-front/src/language/lang.ts
index 70b35a066..acd58c95d 100644
--- a/src/dashboard-front/src/language/lang.ts
+++ b/src/dashboard-front/src/language/lang.ts
@@ -1589,6 +1589,8 @@ const lang: ILANG = {
   '文件名需要跟资源名称完全一致才能导入，请检查文件名': ['Filename must matches resource name'],
   '已匹配到资源': ['Resource matched'],
   '未匹配到资源': ['Resource not matched'],
+  '启用 WebSocket': ['Enable WebSocket'],
+  '启用 WebSocket：': ['Enable WebSocket: '],
 
   // 变量的使用 $t('test', { vari1: 1, vari2: 2 })
   // // 变量的使用 $t('test', { vari1: 1, vari2: 2 })
diff --git a/src/dashboard-front/src/views/resource/setting/comps/front-config.vue b/src/dashboard-front/src/views/resource/setting/comps/front-config.vue
index 3a9ff1f38..b1ebe66b1 100644
--- a/src/dashboard-front/src/views/resource/setting/comps/front-config.vue
+++ b/src/dashboard-front/src/views/resource/setting/comps/front-config.vue
@@ -31,6 +31,12 @@
         </bk-checkbox>
       </div>
     </bk-form-item>
+    <bk-form-item
+      :label="t('启用 WebSocket')"
+      property="enable_websocket"
+      required>
+      <bk-switcher v-model="frontConfigData.enable_websocket" theme="primary" size="small"></bk-switcher>
+    </bk-form-item>
   </bk-form>
 </template>
 <script setup lang="ts">
@@ -58,6 +64,7 @@ const frontConfigData = ref({
   path: '',
   method: 'GET',
   match_subpath: false,
+  enable_websocket: false,
 });
 
 const cloneData = ref({
@@ -104,8 +111,8 @@ watch(
   () => props.detail,
   (val: any) => {
     if (Object.keys(val).length) {
-      const { path, method, match_subpath } = val;
-      frontConfigData.value = { path, method, match_subpath };
+      const { path, method, match_subpath, enable_websocket } = val;
+      frontConfigData.value = { path, method, match_subpath, enable_websocket };
       if (props.isClone) {
         cloneData.value = { path, method };
         setTimeout(() => {
diff --git a/src/dashboard-front/src/views/resource/setting/detail.vue b/src/dashboard-front/src/views/resource/setting/detail.vue
index 4991e1d74..cc32d7958 100644
--- a/src/dashboard-front/src/views/resource/setting/detail.vue
+++ b/src/dashboard-front/src/views/resource/setting/detail.vue
@@ -301,6 +301,29 @@
           </bk-popover>
         </div>
       </bk-form-item>
+      <!--  是否启用 websocket  -->
+      <bk-form-item class="form-item-cls">
+        <template #label>
+          <span class="label-cls">{{ t('启用 WebSocket：') }}</span>
+        </template>
+
+        <div v-if="!frontWsEdit" class="value-container">
+          <span>{{ formData?.enable_websocket ? t('是') : t('否') }}</span>
+          <span class="operate-btn">
+            <i @click="frontWsEdit = true" class="apigateway-icon icon-ag-edit-line"></i>
+          </span>
+        </div>
+
+        <div class="edit-name mt8" v-else>
+          <bk-switcher
+            v-model="formData.enable_websocket"
+            theme="primary"
+            size="small"
+            @change="handleEditSave"
+            class="method">
+          </bk-switcher>
+        </div>
+      </bk-form-item>
     </bk-form>
 
     <div class="title">{{ t('后端配置') }}</div>
@@ -579,6 +602,7 @@ const permEdit = ref<boolean>(false);
 const publicEdit = ref<boolean>(false);
 const frontMethodEdit = ref<boolean>(false);
 const frontPathEdit = ref<boolean>(false);
+const frontWsEdit = ref(false); // 是否启用websocket的编辑态
 const backMethodEdit = ref<boolean>(false);
 const backServicesEdit = ref<boolean>(false);
 const backPathEdit = ref<boolean>(false);
@@ -855,6 +879,7 @@ const handleEditSave = async () => {
     publicEdit.value = false;
     frontMethodEdit.value = false;
     frontPathEdit.value = false;
+    frontWsEdit.value = false;
     backMethodEdit.value = false;
     backServicesEdit.value = false;
     backPathEdit.value = false;
diff --git a/src/dashboard-front/src/views/resource/version/components/resourceDetail.vue b/src/dashboard-front/src/views/resource/version/components/resourceDetail.vue
index 9919c337f..d0d19988c 100644
--- a/src/dashboard-front/src/views/resource/version/components/resourceDetail.vue
+++ b/src/dashboard-front/src/views/resource/version/components/resourceDetail.vue
@@ -208,6 +208,15 @@
                               <div class="ag-value">{{ source.path }}</div>
                             </bk-col>
                           </bk-row>
+
+                          <bk-row>
+                            <bk-col :span="4">
+                              <label class="ag-key">{{ $t("启用 WebSocket") }}:</label>
+                            </bk-col>
+                            <bk-col :span="10">
+                              <div class="ag-value">{{ source.enable_websocket ? $t("是") : $t("否") }}</div>
+                            </bk-col>
+                          </bk-row>
                         </bk-container>
 
                         <template v-if="info.schema_version === '2.0'">
diff --git a/src/dashboard-front/src/views/stage/overview/detail-mode/resource-details.vue b/src/dashboard-front/src/views/stage/overview/detail-mode/resource-details.vue
index 00785fb79..c9ae34d25 100644
--- a/src/dashboard-front/src/views/stage/overview/detail-mode/resource-details.vue
+++ b/src/dashboard-front/src/views/stage/overview/detail-mode/resource-details.vue
@@ -140,6 +140,15 @@
                 <div class="ag-value">{{ currentSource.path }}</div>
               </bk-col>
             </bk-row>
+
+            <bk-row>
+              <bk-col :span="4">
+                <label class="ag-key">{{ $t("启用 Websocket") }}:</label>
+              </bk-col>
+              <bk-col :span="10">
+                <div class="ag-value">{{ currentSource.enable_websocket ? t('是') : t('否') }}</div>
+              </bk-col>
+            </bk-row>
           </bk-container>
 
           <p

From 0b446c9d9ae4dadb6eb226e1acfbc3b57b69bc36 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Zhukeda-=E6=9C=B1=E7=A7=91=E8=BE=BE?=
 <carlchu0113@gmail.com>
Date: Wed, 4 Sep 2024 15:48:43 +0800
Subject: [PATCH 3/3] Merge remote-tracking branch 'origin/ft-enable-ws' into
 ft-enable-ws # Reviewed, transaction id: 17356