bugfix: 插件管理-节点列表页面加载异常 (closed #334)

TencentBlueKing · Dec 14, 2021 · 9355193 · 9355193
1 parent 2d26641
commit 9355193
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 54 deletions.
diff --git a/dev_log/2.1.358/daoqgong_202112131514.yaml b/dev_log/2.1.358/daoqgong_202112131514.yaml
@@ -0,0 +1,3 @@
+---
+bugfix:
+  - "节点列表页面加载异常 (fixed #334)"
diff --git a/frontend/src/views/plugin/plugin-list/plugin-list-table.vue b/frontend/src/views/plugin/plugin-list/plugin-list-table.vue
@@ -197,14 +197,61 @@ export default class PluginRuleTable extends Mixins(FormLabelMixin, HeaderRender
       this.nodeListTable.doLayout();
     });
   }
+  @Watch('pluginNames')
+  private handleResetFilterField(val: string[]) {
+    const plugin = val.map(name => ({
+      name,
+      id: name,
+      checked: true,
+      disabled: false,
+    }));
+    this.filterField.splice(this.filterField.length, 0, ...plugin);
+  }
 
   private currentIp = '';
   private currentHostId = -1;
   private currentHostStatus = '';
   private showSlider = false;
   // 本地存储Key
   private localMark = 'plugin_list_table';
-  private filterField: ITabelFliter[] = [];
+  private filterField: ITabelFliter[] = [
+    {
+      checked: true,
+      disabled: true,
+      name: 'IP',
+      id: 'inner_ip',
+    },
+    {
+      checked: true,
+      disabled: false,
+      name: window.i18n.t('节点类型'),
+      id: 'node_type',
+    },
+    {
+      checked: true,
+      disabled: false,
+      name: window.i18n.t('云区域'),
+      id: 'bk_cloud_id',
+    },
+    {
+      checked: true,
+      disabled: false,
+      name: window.i18n.t('归属业务'),
+      id: 'bk_biz_name',
+    },
+    {
+      checked: true,
+      disabled: false,
+      name: window.i18n.t('操作系统'),
+      id: 'os_type',
+    },
+    // {
+    //   checked: true,
+    //   disabled: false,
+    //   name: window.i18n.t('Agent状态'),
+    //   id: 'agent_status'
+    // },
+  ];
   private popoverIns: any = null;
   private loading = false;
   private detailData: IPluginStatus[] = [];
@@ -225,54 +272,6 @@ export default class PluginRuleTable extends Mixins(FormLabelMixin, HeaderRender
     return this.runningCount - this.excludeData.length;
   }
 
-  private created() {
-    const plugin = this.pluginNames.map(name => ({
-      name,
-      id: name,
-      checked: true,
-      disabled: false,
-    }));
-    this.filterField = [
-      {
-        checked: true,
-        disabled: true,
-        name: 'IP',
-        id: 'inner_ip',
-      },
-      {
-        checked: true,
-        disabled: false,
-        name: window.i18n.t('节点类型'),
-        id: 'node_type',
-      },
-      {
-        checked: true,
-        disabled: false,
-        name: window.i18n.t('云区域'),
-        id: 'bk_cloud_id',
-      },
-      {
-        checked: true,
-        disabled: false,
-        name: window.i18n.t('归属业务'),
-        id: 'bk_biz_name',
-      },
-      {
-        checked: true,
-        disabled: false,
-        name: window.i18n.t('操作系统'),
-        id: 'os_type',
-      },
-      // {
-      //   checked: true,
-      //   disabled: false,
-      //   name: window.i18n.t('Agent状态'),
-      //   id: 'agent_status'
-      // },
-      ...plugin,
-    ];
-  }
-
   private getColumnShowStatus(id: string) {
     const item = this.filterField.find(item => item.id === id);
     return !!item?.checked;

diff --git a/frontend/src/views/plugin/plugin-list/plugin-list.vue b/frontend/src/views/plugin/plugin-list/plugin-list.vue
@@ -12,7 +12,6 @@
       @plugin-operate="handlePluginOperate">
     </PluginListOperate>
     <PluginListTable
-      v-if="showHostTable"
       v-bkloading="{ isLoading: tableLoading }"
       class="plugin-node-table"
       :table-list="tableList"
@@ -173,7 +172,6 @@ export default class PluginList extends Mixins(HeaderFilterMixins) {
   ];
   private mixisPluginName: string[] = []; // 插件的状态和版本筛选条件组合到了一起
   private pluginStatusMap: { [key: string]: string[] } = {}; // 插件的状态列表
-  private showHostTable = false;
 
   private get selectedAllDisabled() {
     const statusCondition = this.searchSelectValue.find(item => item.id === 'status');
@@ -234,9 +232,11 @@ export default class PluginList extends Mixins(HeaderFilterMixins) {
   // 拉取筛选条件 并 插入插件名称项
   public async getFilterData() {
     const [
-      list,
+      data,
       { list: data2 },
     ] = await Promise.all([PluginStore.getFilterList(), PluginStore.pluginPkgList({ simple_all: true })]);
+    this.mixisPluginName = data.filter(item => item.children && !item.children.length).map(item => item.id);
+    const list = data.filter(item => !item.children || item.children.length);
     if (data2.length) {
       const pluginName = this.pluginName || this.$route.params.pluginName;
       const pluginItem = {
@@ -283,6 +283,7 @@ export default class PluginList extends Mixins(HeaderFilterMixins) {
       }
     }
     this.filterData.splice(0, 0, ...list);
+    return Promise.resolve(true);
   }
   public async getPluginFilter() {
     await PluginStore.getFilterList({ category: 'plugin_version' }).then((data) => {
@@ -299,17 +300,16 @@ export default class PluginList extends Mixins(HeaderFilterMixins) {
           }
         }
       });
-      this.mixisPluginName = statusName;
       this.filterData.splice(this.filterData.length, 0, ...data.filter(item => !statusReg.test(item.id)));
     });
-    this.showHostTable = true;
   }
 
   public async getHostList(params: ISearchParams) {
     const data: IHostData = await PluginStore.getHostList(params);
     const { list, total } = data;
     this.tableList = list;
     this.pagination.count = total;
+    return Promise.resolve(true);
   }
 
   // 获取请求参数