feat: agent包管理修改

# Reviewed, transaction id: 9559

frontend/src/components/common/navigation.vue

@@ -238,7 +238,7 @@ export default class NodemanNavigation extends Mixins(routerBackMixin) {
     const navList = JSON.parse(JSON.stringify(this.navList[this.activeIndex].children || [])) as ISideMenuConfig[];
     // 过滤隐藏Agent包管理菜单
     navList?.forEach((item) => {
-      if (item.name === 'nav_Agent状态') {
+      if (item.name === 'nav_Agent') {
         item.children = item.children?.filter((child: { name: string; }) => child.name !== 'agentPackage');
       }
     });

frontend/src/components/setup-table/install-table.vue

@@ -44,7 +44,7 @@
                       batch: config.getBatch ? config.getBatch.call(_self) : config.batch,
                       isBatchIconShow: !!table.data.length
                         && (config.getBatch ? config.getBatch.call(_self) : config.batch),
-                      type: config.type,
+                      type: getHeadType({}, config),
                       subTitle: config.subTitle,
                       options: getCellInputOptions({}, config),
                       multiple: !!config.multiple,
@@ -282,6 +282,29 @@ export default class SetupTable extends Vue {
   private get apList() {
     return this.aps || AgentStore.apList;
   }
+  private pkgVersionList: any = [];
+  // 获取agent包版本
+  private async getPkgVersions() {
+    const {
+      pkg_info,
+    } = await AgentStore.apiGetPkgVersion({
+      project: 'gse_agent',
+      os: '',
+      cpu_arch: ''
+    });
+    console.log("🚀 ~ SetupTable ~ getPkgVersions ~ pkg_info:", pkg_info)
+    const builtinTags = ['stable', 'latest', 'test'];
+    this.pkgVersionList.splice(0, this.pkgVersionList.length, ...pkg_info.map(item => ({
+      ...item,
+      id: item.version,
+      name: item.version,
+      tags: item.tags.filter(tag => builtinTags.includes(tag.name)).map(tag => ({
+        className: tag.name,
+        description: tag.description,
+        name: tag.description,
+      })),
+    })));
+  }
   private get channelList() {
     return AgentStore.channelList;
   }
@@ -314,9 +337,11 @@ export default class SetupTable extends Vue {
 
   private created() {
     this.handleInit();
+    
   }
   private mounted() {
     this.handleScroll();
+    this.getPkgVersions();
     window.addEventListener('resize', this.initTableHead);
   }
   private beforeDestroy() {
@@ -400,6 +425,17 @@ export default class SetupTable extends Vue {
     }
     row.validator = {};
   }
+  /**
+   * 获取表头类型
+   * @param {Object} row 当前行
+   * @param {Object} config 当前配置项
+   */
+  private getHeadType(row: ISetupRow, config: ISetupHead): string {
+    if (config.prop === 'version' && config.batch) {
+      return 'select';
+    }
+    return config.type;
+  }
   /**
    * 获取select框的options数据
    * @param {Object} row 当前行
@@ -413,6 +449,8 @@ export default class SetupTable extends Vue {
       }));
     } if (config.type === 'select') {
       return config.getOptions ? config.getOptions.call(this, row) : config.options;
+    } if (config.prop === 'version') {
+      return this.pkgVersionList;
     }
     return [];
   }

frontend/src/router/navigation-config.ts

@@ -17,7 +17,7 @@ export const navConfig: INavConfig[] = [
           },
           {
             title: 'nav_Agent包管理',
-            icon: 'nc-state',
+            icon: 'nc-package-2',
             path: '/agent-manager/package',
             name: 'agentPackage',
           },

frontend/src/types/agent/pkg-manage.ts

@@ -35,6 +35,7 @@ export interface IPkgParams {
   version?: string; // ,分隔
   created_time_before?: string; // 2022-10-01T00:00:00
   created_time_after?: string;
+  ordering?: string;
 }
 
 export interface IPkgQuickOpt {

frontend/src/views/agent/config/editTableConfig.ts

@@ -299,7 +299,7 @@ export const config: ISetupHead[] = [
     readonly: false,
     noRequiredMark: false,
     placeholder: window.i18n.t('请选择'),
-    batch: false,
+    batch: true,
     default: '',
     width: 100,
     parentProp: 'install_info',

frontend/src/views/agent/package/index.vue

@@ -37,7 +37,7 @@
             </bk-compose-form-item>
           </div>
           <div class="optional-wrapper">
-            <ul class="optional-list">
+            <ul class="optional-list ">
               <li
                 v-for="(optItem, index) in dimensionOptionalList"
                 :class="['optional-item', { 'is-all': !index, selected: optItem.id === dimensionOptional }]"
@@ -54,7 +54,7 @@
         </div>
 
         <div class="package-select-result" v-bkloading="{ isLoading }">
-          <PackageCols :rows="tableData" :maxHeight="tableHeight" :pagetion="pagetion" @pagetion="pagetionChange" />
+          <PackageCols :rows="tableData" :maxHeight="tableHeight" :pagetion="pagetion" @pagetion="pagetionChange" @orderChange="orderChange"/>
           <bk-pagination
             ext-cls="pagination"
             size="small"
@@ -91,6 +91,8 @@ import {
 } from '@/types/agent/pkg-manage';
 
 type PkgQuickType = 'os_cpu_arch' | 'version';
+// 排序类型
+type PkgOrderType = 'version' | '-version';
 
 export default defineComponent({
   components: {
@@ -105,7 +107,8 @@ export default defineComponent({
       dimension: PkgQuickType;
       dimensionOptional: string;
       uploadShow: boolean;
-      pagetion: IPagination
+      pagetion: IPagination;
+      ordering: PkgOrderType;
     }>({
       isLoading: true,
       panels: [
@@ -123,6 +126,7 @@ export default defineComponent({
         limitList: [20, 50, 100, 200]
       },
       uploadShow: false,
+      ordering: 'version'
     });
 
     // 可选维度
@@ -225,6 +229,7 @@ export default defineComponent({
         project: state.active,
         page: state.pagetion.current,
         pagesize: state.pagetion.limit,
+        ordering: state.ordering
       };
       if (state.dimensionOptional !== 'all') {
         if (state.dimension === 'os_cpu_arch') {
@@ -302,6 +307,10 @@ export default defineComponent({
       });
       getTableData();
     };
+    const orderChange = (type: PkgOrderType) => {
+      state.ordering = type;
+      getTableData();
+    };
 
     const updateTabActive = async (type: PkgType = 'gse_agent') => {
       if (type !== state.active) {
@@ -335,6 +344,7 @@ export default defineComponent({
       updateTabActive,
       getTableData,
       pagetionChange,
+      orderChange,
       handlePageChange,
       handlePageLimitChange
     };
@@ -415,14 +425,16 @@ export default defineComponent({
     overflow-x: hidden;
     overflow-y: auto;
   }
+  
   .optional-item {
     display: flex;
     align-items: center;
-    padding: 0 16px 0 18px;
     height: 36px;
+    padding: 0 16px 0 18px;
     cursor: pointer;
+    position: relative;
     &:hover {
-      background-color: $bgOptHover;
+      background-color: #F5F7FA;
     }
     &.selected {
       color: $primaryFontColor;
@@ -435,7 +447,18 @@ export default defineComponent({
         background-color: #a3c5fd;
        }
     }
+    /* 全选 行内容区域下划线 */
+    &.is-all::after {
+      content: '';                        /* 伪元素内容为空 */
+      position: absolute;                 /* 绝对定位 */
+      bottom: 0;                          /* 定位到盒子的底部 */
+      left: 18px;                         /* 左边距为内边距宽度 */
+      right: 16px;                        /* 右边距为内边距宽度 */
+      height: 1px;                        /* 边框高度 */
+      background-color: #EAEBF0;      /* 边框颜色 */
+    }
   }
+  
   .option-icon-image {
     margin-right: 6px;
     flex-basis: 0;