--story=117792797 【集群管理】自研云VPC-CNI网络插件配置 (merge request !1915)

Squash merge branch 'fix/vpc-cni' into 'master' feat: 优化接口请求逻辑 TAPD: --story=117792797
TencentBlueKing · Jul 23, 2024 · 73238ff · 73238ff
1 parent a581ce2
commit 73238ff
Show file tree

Hide file tree

Showing 13 changed files with 90 additions and 38 deletions.
diff --git a/bcs-ui/frontend/src/components/echarts.vue b/bcs-ui/frontend/src/components/echarts.vue
@@ -47,11 +47,13 @@ export default {
 
       if (this.autoResize) {
         this.resizeObserver = new ResizeObserver((entries) => {
-          for (const entry of entries) {
-            if (entry.target === this.$el) {
-              this.chart?.resize();
+          window.requestAnimationFrame(() => {
+            for (const entry of entries) {
+              if (entry.target === this.$el) {
+                this.chart?.resize();
+              }
             }
-          }
+          });
         });
         this.resizeObserver.observe(this.$el);
       }

diff --git a/bcs-ui/frontend/src/images/rtx.svg b/bcs-ui/frontend/src/images/rtx.svg
diff --git a/bcs-ui/frontend/src/views/app/app-footer.vue b/bcs-ui/frontend/src/views/app/app-footer.vue
@@ -6,19 +6,20 @@
         <a :href="PAAS_HOST" target="_blank">{{ $t('blueking.desktop') }}</a>
       </div>
       <p>
-        {{ config.footerCopyright }}
+        {{ config.footerCopyrightContent }}
       </p>
     </div>
     <div v-else>
       <div class="mb5 link">
         <span v-html="config.i18n.footerInfoHTML"></span>
       </div>
-      <p>{{ config.footerCopyright }}</p>
+      <p>{{ config.footerCopyrightContent }}</p>
     </div>
   </div>
 </template>
 <script lang="ts">
-import { defineComponent, computed } from 'vue';
+import { defineComponent } from 'vue';
+
 import usePlatform from '@/composables/use-platform';
 
 export default defineComponent({
@@ -45,4 +46,7 @@ export default defineComponent({
     color: #3a84ff;
   }
 }
+>>> .link-item {
+  color: #3a84ff;
+}
 </style>
diff --git a/bcs-ui/frontend/src/views/app/navigation.vue b/bcs-ui/frontend/src/views/app/navigation.vue
@@ -161,7 +161,7 @@ import BcsMd from '@/components/bcs-md/index.vue';
 import useCalcHeight from '@/composables/use-calc-height';
 import usePlatform from '@/composables/use-platform';
 import $i18n from '@/i18n/i18n-setup';
-import logoSvg from '@/images/bcs.svg';
+import logoSvg from '@/images/rtx.svg';
 import $router from '@/router';
 import $store from '@/store';
 import SystemLog from '@/views/app/log.vue';

diff --git a/bcs-ui/frontend/src/views/app/project-selector.vue b/bcs-ui/frontend/src/views/app/project-selector.vue
@@ -76,10 +76,11 @@
   </div>
 </template>
 <script lang="ts">
-import { computed, defineComponent, onBeforeMount, onMounted, ref, watch } from 'vue';
+import { computed, defineComponent, onBeforeMount, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
 import useProjects, { IProjectPerm } from '../project-manage/project/use-project';
 
+import { bus } from '@/common/bus';
 import cancelRequest from '@/common/cancel-request';
 import { IProject } from '@/composables/use-app';
 import useDebouncedRef from '@/composables/use-debounce';
@@ -212,10 +213,19 @@ export default defineComponent({
     });
 
     onMounted(() => {
+      bus.$on('refresh-project-list', async () => {
+        loading.value = true;
+        await handleInitProjectList();
+        loading.value = false;
+      });
       // hack 禁用select输入框
       selectRef.value?.$refs?.createInput?.setAttribute('readonly', true);
     });
 
+    onBeforeUnmount(() => {
+      bus.$off('refresh-project-list');
+    });
+
     return {
       perms,
       projectCode,

diff --git a/bcs-ui/frontend/src/views/cluster-manage/detail/network.vue b/bcs-ui/frontend/src/views/cluster-manage/detail/network.vue
@@ -7,7 +7,7 @@
       </bk-form-item>
       <bk-form-item :label="$t('cluster.create.label.privateNet.text')">
         <LoadingIcon v-if="vpcLoading">{{ $t('generic.status.loading') }}...</LoadingIcon>
-        <span v-else>{{ vpc }}</span>
+        <span v-else>{{ vpc || '--' }}</span>
       </bk-form-item>
       <bk-form-item :label="$t('cluster.labels.networkType')">
         {{ networkType }}
@@ -29,7 +29,7 @@
           {{ clusterData.networkSettings &&clusterData.networkSettings.serviceIPv4CIDR
             ? clusterData.networkSettings.serviceIPv4CIDR : '--' }}
         </bk-form-item>
-        <VpcCniDetail :cluster-i-d="clusterId" />
+        <VpcCniDetail :data="clusterData" />
       </template>
       <!-- 其他网络插件: Global Route -->
       <template v-else>
@@ -130,7 +130,7 @@
               </bcs-switcher>
             </bk-form-item>
             <VpcCniDetail
-              :cluster-i-d="clusterId"
+              :data="clusterData"
               v-if="clusterData.networkSettings?.enableVPCCni
                 && (['RUNNING', ''].includes(clusterData.networkSettings?.status))" />
           </template>

diff --git a/bcs-ui/frontend/src/views/cluster-manage/detail/vpc-cni-detail.vue b/bcs-ui/frontend/src/views/cluster-manage/detail/vpc-cni-detail.vue
@@ -55,10 +55,11 @@ import AddSubnetDialog from './add-subnet-dialog.vue';
 
 import { cloudSubnets } from '@/api/modules/cluster-manager';
 import { countIPsInCIDR } from '@/common/util';
+import { ICluster } from '@/composables/use-app';
 import $i18n from '@/i18n/i18n-setup';
 
 interface Props {
-  clusterID: string
+  data: ICluster
 }
 
 const props = defineProps<Props>();
@@ -137,7 +138,7 @@ const handleShowSubnetsDialog = () => {
 const handleConfirmAddSubnet = async () => {
   showSubnets.value = false;
   subnetLoading.value = true;
-  await getClusterDetail(props.clusterID, true);// 获取最新的子网ID
+  await getClusterDetail(props.data?.clusterID, true);// 获取最新的子网ID
   await handleGetSubnets();
   subnetLoading.value = false;
 };
@@ -165,11 +166,11 @@ const objectSpanMethod = ({ row, column }) => {
   }
 };
 
-watch(() => props.clusterID, async () => {
-  if (!props?.clusterID) return;
+watch(() => props.data?.clusterID, async () => {
+  if (!props.data?.clusterID) return;
 
+  clusterData.value = props.data;// 初始化值，不用再请求一次详情
   subnetLoading.value = true;
-  await getClusterDetail(props.clusterID, true);
   await handleGetSubnets();
   subnetLoading.value = false;
 }, { immediate: true });

diff --git a/bcs-ui/frontend/src/views/plugin-manage/tools/log-collector/log-collector.vue b/bcs-ui/frontend/src/views/plugin-manage/tools/log-collector/log-collector.vue
@@ -142,6 +142,14 @@
           <bcs-button
             theme="primary"
             class="w-[88px] mt-[16px]"
+            v-authority="{
+              actionId: 'cluster_view',
+              resourceName: curCluster?.clusterName,
+              permCtx: {
+                project_id: curProject.projectID,
+                cluster_id: clusterId
+              }
+            }"
             @click="confirmUpdate">
             {{ $t('logCollector.action.enable') }}
           </bcs-button>
@@ -155,6 +163,14 @@
         <bcs-button
           theme="primary"
           class="w-[88px] mt-[16px]"
+          v-authority="{
+            actionId: 'cluster_view',
+            resourceName: curCluster?.clusterName,
+            permCtx: {
+              project_id: curProject.projectID,
+              cluster_id: clusterId
+            }
+          }"
           @click="confirmUpdate">{{ $t('logCollector.action.reInstall') }}</bcs-button>
       </bcs-exception>
       <template v-else>
@@ -396,6 +412,7 @@ import usePageConf from '@/composables/use-page';
 import useTableSearch from '@/composables/use-search';
 import $i18n from '@/i18n/i18n-setup';
 import $router from '@/router';
+import $store from '@/store';
 
 const { curClusterId, clusterList } = useCluster();
 
@@ -409,6 +426,8 @@ const handleShowList = () => {
   // handleGetLogCollectorRules();
 };
 
+const curProject = computed(() => $store.state.curProject);
+
 watch(clusterId, () => {
   handleInitData();
 });

diff --git a/bcs-ui/frontend/src/views/project-manage/cloudtoken/googleCloud.vue b/bcs-ui/frontend/src/views/project-manage/cloudtoken/googleCloud.vue
@@ -92,10 +92,11 @@
       </bcs-table-column>
       <bcs-table-column :label="$t('googleCloud.label.operate')" width="100" show-overflow-tooltip>
         <template #default="{ row }">
-          <span v-bk-tooltips="{
-            content: $t('importGoogleCloud.tips.disabledTips'),
-            disabled: !row.clusters.length
-          }">
+          <span
+            v-bk-tooltips="{
+              content: $t('importGoogleCloud.tips.disabledTips'),
+              disabled: !row.clusters.length
+            }">
             <bcs-button
               text
               :disabled="!!row.clusters.length"

diff --git a/bcs-ui/frontend/src/views/project-manage/project/project.vue b/bcs-ui/frontend/src/views/project-manage/project/project.vue
@@ -82,7 +82,7 @@
     <ProjectCreate
       v-model="showCreateDialog"
       :project-data="curProjectData"
-      @finished="handleGetProjectList"></ProjectCreate>
+      @finished="handleUpdateProjectList" />
   </div>
 </template>
 <script lang="ts">
@@ -91,6 +91,7 @@ import { defineComponent, onMounted, ref, watch } from 'vue';
 import ProjectCreate from './project-create.vue';
 import useProjects from './use-project';
 
+import { bus } from '@/common/bus';
 import useDebouncedRef from '@/composables/use-debounce';
 import $router from '@/router';
 
@@ -156,6 +157,12 @@ export default defineComponent({
       isLoading.value = false;
     };
 
+    // 更新项目列表和顶部项目选择器
+    function handleUpdateProjectList() {
+      handleGetProjectList();
+      bus.$emit('refresh-project-list');
+    }
+
     onMounted(() => {
       handleGetProjectList();
     });
@@ -173,6 +180,7 @@ export default defineComponent({
       handlePageChange,
       handleLimitChange,
       handleGetProjectList,
+      handleUpdateProjectList,
     };
   },
 });

diff --git a/bcs-ui/frontend/src/views/resource-view/workload/detail/container-detail.vue b/bcs-ui/frontend/src/views/resource-view/workload/detail/container-detail.vue
@@ -103,7 +103,7 @@
         </Metric>
       </div>
       <bcs-tab class="workload-tab" :active.sync="activePanel" type="card" :label-height="42">
-        <bcs-tab-panel name="ports" :label="$t('dashboard.network.portmapping')">
+        <bcs-tab-panel name="ports" :label="$t('dashboard.network.portmapping')" render-directive="if">
           <bk-table :data="ports">
             <bk-table-column label="Name" prop="name">
               <template #default="{ row }">
@@ -119,7 +119,7 @@
             <bk-table-column label="Protocol" prop="protocol"></bk-table-column>
           </bk-table>
         </bcs-tab-panel>
-        <bcs-tab-panel name="command" :label="$t('dashboard.workload.container.command')">
+        <bcs-tab-panel name="command" :label="$t('dashboard.workload.container.command')" render-directive="if">
           <bk-table :data="command">
             <bk-table-column label="Command" prop="command">
               <template #default="{ row }">
@@ -133,7 +133,7 @@
             </bk-table-column>
           </bk-table>
         </bcs-tab-panel>
-        <bcs-tab-panel name="volumes" :label="$t('k8s.volume')">
+        <bcs-tab-panel name="volumes" :label="$t('k8s.volume')" render-directive="if">
           <bk-table :data="volumes">
             <bk-table-column label="Host Path" prop="name"></bk-table-column>
             <bk-table-column label="Mount Path" prop="mountPath"></bk-table-column>
@@ -144,19 +144,19 @@
             </bk-table-column>
           </bk-table>
         </bcs-tab-panel>
-        <bcs-tab-panel name="env" :label="$t('dashboard.workload.container.env')">
+        <bcs-tab-panel name="env" :label="$t('dashboard.workload.container.env')" render-directive="if">
           <bk-table :data="envs" v-bkloading="{ isLoading: envsTableLoading }">
             <bk-table-column label="Key" prop="name"></bk-table-column>
             <bk-table-column label="Value" prop="value"></bk-table-column>
           </bk-table>
         </bcs-tab-panel>
-        <bcs-tab-panel name="label" :label="$t('k8s.label')">
+        <bcs-tab-panel name="label" :label="$t('k8s.label')" render-directive="if">
           <bk-table :data="labels">
             <bk-table-column label="Key" prop="key"></bk-table-column>
             <bk-table-column label="Value" prop="val"></bk-table-column>
           </bk-table>
         </bcs-tab-panel>
-        <bcs-tab-panel name="resources" :label="$t('dashboard.workload.container.limits')">
+        <bcs-tab-panel name="resources" :label="$t('dashboard.workload.container.limits')" render-directive="if">
           <bk-table :data="resources">
             <bk-table-column label="Cpu">
               <template #default="{ row }">

diff --git a/bcs-ui/frontend/src/views/resource-view/workload/detail/pod-detail.vue b/bcs-ui/frontend/src/views/resource-view/workload/detail/pod-detail.vue
@@ -104,7 +104,8 @@
         <bcs-tab-panel
           name="container"
           :label="$t('dashboard.workload.container.title')"
-          v-bkloading="{ isLoading: containerLoading }">
+          v-bkloading="{ isLoading: containerLoading }"
+          render-directive="if">
           <bk-table :data="container">
             <bk-table-column :label="$t('dashboard.workload.container.name')" prop="name">
               <template #default="{ row }">
@@ -159,7 +160,7 @@
             </bk-table-column>
           </bk-table>
         </bcs-tab-panel>
-        <bcs-tab-panel name="event" :label="$t('generic.label.event')">
+        <bcs-tab-panel name="event" :label="$t('generic.label.event')" render-directive="if">
           <EventQueryTable
             class="min-h-[360px]"
             hide-cluster-and-namespace
@@ -169,7 +170,7 @@
             :name="name">
           </EventQueryTable>
         </bcs-tab-panel>
-        <bcs-tab-panel name="conditions" :label="$t('k8s.conditions')">
+        <bcs-tab-panel name="conditions" :label="$t('k8s.conditions')" render-directive="if">
           <bk-table :data="conditions">
             <bk-table-column :label="$t('generic.label.type')" prop="type"></bk-table-column>
             <bk-table-column :label="$t('generic.label.status')" prop="status">
@@ -194,7 +195,11 @@
             </bk-table-column>
           </bk-table>
         </bcs-tab-panel>
-        <bcs-tab-panel name="storage" :label="$t('generic.label.storage')" v-bkloading="{ isLoading: storageLoading }">
+        <bcs-tab-panel
+          name="storage"
+          :label="$t('generic.label.storage')"
+          v-bkloading="{ isLoading: storageLoading }"
+          render-directive="if">
           <div class="storage storage-pvcs">
             <div class="title">PersistentVolumeClaims</div>
             <bk-table :data="storageTableData.pvcs">
@@ -295,13 +300,13 @@
             </bk-table>
           </div>
         </bcs-tab-panel>
-        <bcs-tab-panel name="label" :label="$t('k8s.label')">
+        <bcs-tab-panel name="label" :label="$t('k8s.label')" render-directive="if">
           <bk-table :data="labels">
             <bk-table-column label="Key" prop="key"></bk-table-column>
             <bk-table-column label="Value" prop="value"></bk-table-column>
           </bk-table>
         </bcs-tab-panel>
-        <bcs-tab-panel name="annotations" :label="$t('k8s.annotation')">
+        <bcs-tab-panel name="annotations" :label="$t('k8s.annotation')" render-directive="if">
           <bk-table :data="annotations">
             <bk-table-column label="Key" prop="key"></bk-table-column>
             <bk-table-column label="Value" prop="value"></bk-table-column>