feat: 功能依赖项错误页面展示 (#1392)

webfe/package_vue/package.json

@@ -18,9 +18,11 @@
     "@babel/helper-module-imports": "^7.0.0",
     "@blueking/babel-preset-bk": "^2.1.0-beta7",
     "@blueking/bkui-form": "0.0.23",
+    "@blueking/bkui-library": "^0.0.0-beta.6",
     "@blueking/cli-service-webpack": "0.0.0-beta.73",
     "@blueking/eslint-config-bk": "^2.1.0-beta.12",
-    "@blueking/log": "^2.0.16",
+    "@blueking/functional-dependency": "^0.0.1-beta.12",
+    "@blueking/log": "^2.1.4",
     "@blueking/login-modal": "^1.0.1",
     "@blueking/notice-component-vue2": "^2.0.4",
     "@blueking/stylelint-config-bk": "^2.1.0-beta.9",

webfe/package_vue/src/language/lang/en.js

@@ -2513,7 +2513,6 @@ export default {
   '删除后，将不再采集相关日志。': 'After deletion, the related logs will no longer be collected.',
   '相对于构建目录的路径，若留空，默认为构建目录下名为 “Dockerfile” 的文件': 'Path relative to the build directory; if left empty, the default is a file named "Dockerfile" under the build directory.',
   '请输入镜像 Tag': 'Please enter the image Tag',
-  '默认已采集和清洗：标准输出、开发框架定义日志路径中的日志。': 'By default, standard output and logs from paths defined by the development framework have been collected and cleansed.',
   暂不支持自定义日志采集规则: 'Custom log collection rules are not supported at the moment',
   '自定义日志采集/清洗规则、日志导出等功能需要部署“蓝鲸日志平台”，由蓝鲸日志平台提供。': 'Customizing log collection/cleansing rules, log export, and other features require the deployment of "Blue Whale Log Platform," provided by the Blue Whale Log Platform.',
   '由小写字母组成，长度小于 16 个字符': 'Consists of lowercase letters and is less than 16 characters long',
@@ -2628,4 +2627,12 @@ export default {
   查看迁移进度: 'View Migration Progress',
   '已选择 <span>{d}</span> 个组织，<span class="s2">{s}</span> 个用户': 'Selected <span>{d}</span> organizations and <span class="s2">{s}</span> users',
   '仅影响 蓝鲸桌面 上应用的可见范围': 'Only affects the visibility of applications on the BK Desktop',
+  暂无监控告警功能: 'No monitoring and alerting functionality available',
+  '开发者中心与蓝鲸监控平台无缝集成，应用部署后便可自动开启资源使用率、进程异常等告警配置。': 'The Developer Center is seamlessly integrated with the BlueKing Monitoring Platform. After application deployment, you can automatically enable alerts for resource usage, process anomalies, and more.',
+  暂无自定义日志采集等高级功能: 'No custom log collection and other advanced features available',
+  '平台默认采集了标准输出日志、访问日志、开发框架定义的文件日志。部署蓝鲸监控平台后，可以通过自定义日志采集、清洗规则采集任意文件日志，还能提供日志导出、日志关键字告警等功能。': 'The platform automatically collects standard output logs, access logs, and file logs defined by the development framework. After deploying the BlueKing Monitoring Platform, you can collect any file logs through custom log collection and cleaning rules, and also provide log export, log keyword alerts, and other features.',
+  '暂无蓝鲸 APM 增强功能': 'No BlueKing APM enhanced functionality available',
+  '应用部署后自动接入蓝鲸监控平台，即可获得应用性能管理（APM）以及 Trace 检索等全面可观测性方案，帮助您实时洞察应用状态并优化用户体验。': 'After the application is deployed and automatically connected to the BlueKing Monitoring Platform, you can obtain comprehensive observability solutions such as Application Performance Management (APM) and Trace retrieval, helping you gain real-time insights into the application status and optimize user experience.',
+  '如需要该功能，需要部署：': 'If this functionality is required, you need to deploy:',
+  '1. 蓝鲸监控：监控日志套餐': '1. BlueKing Monitoring: Monitoring and Logging Package',
 };

webfe/package_vue/src/language/lang/zh.js

@@ -2653,7 +2653,6 @@ export default {
   '删除后，将不再采集相关日志。': '删除后，将不再采集相关日志。',
   '相对于构建目录的路径，若留空，默认为构建目录下名为 “Dockerfile” 的文件': '相对于构建目录的路径，若留空，默认为构建目录下名为 “Dockerfile” 的文件',
   '请输入镜像 Tag': '请输入镜像 Tag',
-  '默认已采集和清洗：标准输出、开发框架定义日志路径中的日志。': '默认已采集和清洗：标准输出、开发框架定义日志路径中的日志。',
   暂不支持自定义日志采集规则: '暂不支持自定义日志采集规则',
   '自定义日志采集/清洗规则、日志导出等功能需要部署“蓝鲸日志平台”，由蓝鲸日志平台提供。': '自定义日志采集/清洗规则、日志导出等功能需要部署“蓝鲸日志平台”，由蓝鲸日志平台提供。',
   '由小写字母组成，长度小于 16 个字符': '由小写字母组成，长度小于 16 个字符',
@@ -2768,4 +2767,12 @@ export default {
   查看迁移进度: '查看迁移进度',
   '已选择 <span>{d}</span> 个组织，<span class="s2">{s}</span> 个用户': '已选择 <span>{d}</span> 个组织，<span class="s2">{s}</span> 个用户',
   '仅影响 蓝鲸桌面 上应用的可见范围': '仅影响 蓝鲸桌面 上应用的可见范围',
+  暂无监控告警功能: '暂无监控告警功能',
+  '开发者中心与蓝鲸监控平台无缝集成，应用部署后便可自动开启资源使用率、进程异常等告警配置。': '开发者中心与蓝鲸监控平台无缝集成，应用部署后便可自动开启资源使用率、进程异常等告警配置。',
+  暂无自定义日志采集等高级功能: '暂无自定义日志采集等高级功能',
+  '平台默认采集了标准输出日志、访问日志、开发框架定义的文件日志。部署蓝鲸监控平台后，可以通过自定义日志采集、清洗规则采集任意文件日志，还能提供日志导出、日志关键字告警等功能。': '平台默认采集了标准输出日志、访问日志、开发框架定义的文件日志。部署蓝鲸监控平台后，可以通过自定义日志采集、清洗规则采集任意文件日志，还能提供日志导出、日志关键字告警等功能。',
+  '暂无蓝鲸 APM 增强功能': '暂无蓝鲸 APM 增强功能',
+  '应用部署后自动接入蓝鲸监控平台，即可获得应用性能管理（APM）以及 Trace 检索等全面可观测性方案，帮助您实时洞察应用状态并优化用户体验。': '应用部署后自动接入蓝鲸监控平台，即可获得应用性能管理（APM）以及 Trace 检索等全面可观测性方案，帮助您实时洞察应用状态并优化用户体验。',
+  '如需要该功能，需要部署：': '如需要该功能，需要部署：',
+  '1. 蓝鲸监控：监控日志套餐': '1. 蓝鲸监控：监控日志套餐',
 };

webfe/package_vue/src/main.js

@@ -75,9 +75,13 @@ import { renderHeader } from '@/common/utils';
 
 // markdown样式
 import 'github-markdown-css';
+
 // 代码高亮
 import 'highlight.js/styles/github.css';
 
+// 功能依赖css
+import '@blueking/functional-dependency/vue2/vue2.css';
+
 window.$ = $;
 
 Vue.config.devtools = true;

webfe/package_vue/src/views/dev-center/app/engine/cloud-deployment/index.vue

@@ -36,7 +36,7 @@
               </bk-button>
             </template>
             <bk-tab-panel
-              v-for="(panel, index) in curTabPanels"
+              v-for="(panel, index) in panels"
               v-bind="panel"
               :key="index"
             ></bk-tab-panel>
@@ -134,7 +134,7 @@ export default {
     },
 
     routerRefs() {
-      const curPenel = this.curTabPanels.find(e => e.name === this.active);
+      const curPenel = this.panels.find(e => e.name === this.active);
       return curPenel ? curPenel.ref : 'process';
     },
 
@@ -148,15 +148,7 @@ export default {
     },
 
     firstTabActiveName() {
-      return this.curTabPanels[0].name;
-    },
-
-    curTabPanels() {
-      // 可观测性配置接入featureflag
-      if (!this.userFeature.PHALANX) {
-        this.panels = this.panels.filter(v => v.ref !== 'observability');
-      }
-      return this.panels;
+      return this.panels[0].name;
     },
 
     // 是否需要保存操作按钮

webfe/package_vue/src/views/dev-center/app/engine/cloud-deployment/observability-config/alarm-strategy.vue

@@ -2,7 +2,7 @@
   <div class="alarm-strategy mt25">
     <div class="top-title mb20">
       <h4>{{ $t('告警策略') }}</h4>
-      <p class="tips">
+      <p class="tips" v-if="curAppInfo.feature?.PHALANX">
         {{ $t('告警策略对应用下所有模块都生效，如需新增或编辑告警策略请直接到蓝鲸监控平台操作。') }}
         <!-- 未部署不展示 -->
         <a v-if="strategyLink" :href="strategyLink" target="_blank">
@@ -11,7 +11,11 @@
         </a>
       </p>
     </div>
-    <div v-bkloading="{ isLoading: isLoading, zIndex: 10 }">
+
+    <div
+      v-bkloading="{ isLoading: isLoading, zIndex: 10 }"
+      v-if="curAppInfo.feature?.PHALANX"
+    >
       <!-- 策略列表 -->
       <bk-table
         v-if="alarmStrategyList?.length"
@@ -99,7 +103,9 @@
           prop="is_enabled"
         >
           <template slot-scope="{ row }">
-            <span :class="['tag', row.is_enabled ? 'enable' : 'deactivate' ]">{{ row.is_enabled ? '启用' : '停用' }}</span>
+            <span :class="['tag', row.is_enabled ? 'enable' : 'deactivate']">
+              {{ row.is_enabled ? $t('启用') : $t('停用') }}
+            </span>
           </template>
         </bk-table-column>
       </bk-table>
@@ -116,13 +122,25 @@
         </div>
       </div>
     </div>
+    <FunctionalDependency
+      v-else
+      mode="partial"
+      :title="$t('暂无监控告警功能')"
+      :functional-desc="$t('开发者中心与蓝鲸监控平台无缝集成，应用部署后便可自动开启资源使用率、进程异常等告警配置。')"
+      :guide-title="$t('如需要该功能，需要部署：')"
+      :guide-desc-list="[$t('1. 蓝鲸监控：监控日志套餐')]"
+      @gotoMore="gotoMore"
+    />
   </div>
 </template>
 
-<script>import { THRESHOLD_MAP, LEVEL_MAP } from '@/common/constants.js';
+<script>
+import FunctionalDependency from '@blueking/functional-dependency/vue2/index.umd.min.js';
+import { THRESHOLD_MAP, LEVEL_MAP } from '@/common/constants.js';
 
 export default {
   name: 'AlarmStrategy',
+  components: { FunctionalDependency },
   data() {
     return {
       alarmStrategyList: [],
@@ -140,6 +158,9 @@ export default {
     appCode() {
       return this.$route.params.id;
     },
+    curAppInfo() {
+      return this.$store.state.curAppInfo || {};
+    },
   },
   created() {
     this.getAlarmStrategies();
@@ -230,6 +251,10 @@ export default {
         },
       });
     },
+    // 了解更多
+    gotoMore() {
+      window.open(this.GLOBAL.DOC.DEPLOYMENT_MAINTENANCE, '_blank');
+    },
   },
 };
 </script>

webfe/package_vue/src/views/dev-center/app/engine/cloud-deployment/observability-config/index.vue

@@ -2,17 +2,14 @@
   <div class="observability-config">
     <div class="top-title mb20">
       <h4>{{ $t('日志采集') }}</h4>
-      <p class="tips" v-if="curAppInfo.feature?.ENABLE_BK_LOG_COLLECTOR">
+      <p class="tips" v-if="enableBkLogCollector">
         {{ $t('默认已采集和清洗：标准输出、开发框架定义日志路径中的日志，也可以添加自定义日志采集规则。') }}
       </p>
-      <p class="tips" v-else>
-        {{ $t('默认已采集和清洗：标准输出、开发框架定义日志路径中的日志。') }}
-      </p>
     </div>
     <!-- 采集规则 -->
     <section class="collection-rules">
       <bk-button
-        v-if="curAppInfo.feature?.ENABLE_BK_LOG_COLLECTOR"
+        v-if="enableBkLogCollector"
         theme="primary"
         class="mb16"
         @click="handleAddCollectionRule"
@@ -21,7 +18,7 @@
         {{ $t('新增采集规则') }}
       </bk-button>
       <div
-        v-if="curAppInfo.feature?.ENABLE_BK_LOG_COLLECTOR"
+        v-if="enableBkLogCollector"
         v-bkloading="{ isLoading: isTableLoading, zIndex: 10 }"
       >
         <bk-table
@@ -118,15 +115,15 @@
           </div>
         </div>
       </div>
-      <section
+      <FunctionalDependency
         v-else
-        class="empty"
-      >
-        <div class="empty-content">
-          <div class="title">{{ $t('暂不支持自定义日志采集规则') }}</div>
-          <div class="sub-title">{{ $t('自定义日志采集/清洗规则、日志导出等功能需要部署“蓝鲸日志平台”，由蓝鲸日志平台提供。') }}</div>
-        </div>
-      </section>
+        mode="partial"
+        :title="$t('暂无自定义日志采集等高级功能')"
+        :functional-desc="$t('平台默认采集了标准输出日志、访问日志、开发框架定义的文件日志。部署蓝鲸监控平台后，可以通过自定义日志采集、清洗规则采集任意文件日志，还能提供日志导出、日志关键字告警等功能。')"
+        :guide-title="$t('如需要该功能，需要部署：')"
+        :guide-desc-list="[$t('1. 蓝鲸监控：监控日志套餐')]"
+        @gotoMore="gotoMore"
+      />
     </section>
 
     <!-- 告警策略 -->
@@ -238,10 +235,12 @@
   </div>
 </template>
 
-<script>import i18n from '@/language/i18n.js';
+<script>
+import i18n from '@/language/i18n.js';
 import alarmStrategy from './alarm-strategy.vue';
+import FunctionalDependency from '@blueking/functional-dependency/vue2/index.umd.min.js';
 export default {
-  components: { alarmStrategy },
+  components: { alarmStrategy, FunctionalDependency },
   data() {
     return {
       isTableLoading: false,
@@ -315,9 +314,12 @@ export default {
     curAppInfo() {
       return this.$store.state.curAppInfo || {};
     },
+    enableBkLogCollector() {
+      return this.curAppInfo.feature?.ENABLE_BK_LOG_COLLECTOR || false;
+    },
   },
   created() {
-    if (this.curAppInfo.feature?.ENABLE_BK_LOG_COLLECTOR) {
+    if (this.enableBkLogCollector) {
       this.getLogCollectionRuleList();
     }
     this.getCustomLogCollectionRule();
@@ -515,7 +517,6 @@ export default {
 
     // 页容量变化回调
     handleLimitChange(currentLimit) {
-      console.log('currentLimit', currentLimit);
       this.pagination.limit = currentLimit;
       this.pagination.current = 1;
     },
@@ -533,6 +534,11 @@ export default {
         },
       });
     },
+
+    // 了解更多
+    gotoMore() {
+      window.open(this.GLOBAL.DOC.DEPLOYMENT_MAINTENANCE, '_blank');
+    },
   },
 };
 </script>