feat:Agent包管理开发--story=119532566 Agent包管理

TencentBlueKing · Nov 11, 2024 · 7bf1d65 · 7bf1d65
1 parent f14f01b
commit 7bf1d65
Show file tree

Hide file tree

Showing 52 changed files with 4,947 additions and 213 deletions.
diff --git a/frontend/src/api/modules/pkg_manage.js b/frontend/src/api/modules/pkg_manage.js
@@ -0,0 +1,33 @@
+import { request } from '../base';
+
+export const listPackage = request('GET', 'api/agent/package/');
+export const listPackageNew = request('POST', 'api/agent/package/search/{{pk}}');
+export const updatePackage = request('PUT', 'api/agent/package/{{pk}}/');
+export const deletePackage = request('DELETE', 'api/agent/package/{{pk}}/');
+export const quickSearchCondition = request('GET', 'api/agent/package/quick_search_condition/');
+export const uploadPackage = request('POST', 'api/agent/package/upload/');
+export const parsePackage = request('POST', 'api/agent/package/parse/');
+export const createAgentRegisterTask = request('POST', 'api/agent/package/create_register_task/');
+export const queryAgentRegisterTask = request('GET', 'api/agent/package/query_register_task/');
+export const getTags = request('GET', 'api/agent/package/tags/');
+export const getVersion = request('POST', 'api/agent/package/version/');
+export const getDeployedHostsCount = request('POST', 'api/agent/package/deployed_hosts_count/');
+export const createAgentTags = request('POST', 'api/agent/package/create_agent_tags/');
+export const versionCompare = request('POST', 'api/agent/package/version_compare/');
+
+export default {
+  listPackage,
+  updatePackage,
+  listPackageNew,
+  deletePackage,
+  quickSearchCondition,
+  uploadPackage,
+  parsePackage,
+  createAgentRegisterTask,
+  queryAgentRegisterTask,
+  getTags,
+  getVersion,
+  getDeployedHostsCount,
+  createAgentTags,
+  versionCompare,
+};
diff --git a/frontend/src/common/demand-import.ts b/frontend/src/common/demand-import.ts
@@ -4,7 +4,8 @@ import Vue from 'vue';
 
 import {
   bkBadge, bkButton, bkCheckbox, bkCheckboxGroup, bkCol, bkCollapse, bkCollapseItem, bkContainer, bkDatePicker,
-  bkDialog, bkDropdownMenu, bkException, bkForm, bkFormItem, bkInfoBox, bkInput, bkLoading, bkMessage,
+  bkDialog, bkDropdownMenu, bkException, bkForm, bkFormItem, bkComposeFormItem,
+  bkInfoBox, bkInput, bkLoading, bkMessage,
   bkNavigation, bkNavigationMenu, bkNavigationMenuItem, bkNotify, bkOption, bkOptionGroup, bkPagination,
   bkPopover, bkProcess, bkProgress, bkRadio, bkRadioGroup, bkRoundProgress, bkRow, bkSearchSelect, bkSelect,
   bkSideslider, bkSlider, bkSteps, bkSwitcher, bkTab, bkTabPanel, bkTable, bkTableColumn, bkTagInput, bkTimePicker,
@@ -31,6 +32,7 @@ Vue.use(bkDropdownMenu);
 Vue.use(bkException);
 Vue.use(bkForm);
 Vue.use(bkFormItem);
+Vue.use(bkComposeFormItem);
 Vue.use(bkInput);
 Vue.use(bkNavigation);
 Vue.use(bkNavigationMenu);

diff --git a/frontend/src/components/common/flexible-tag.vue b/frontend/src/components/common/flexible-tag.vue
@@ -5,103 +5,155 @@
       content: allTagContext
     }">
     <div
-      class="tag-item flexible-tag text-ellipsis"
+      v-for="(item, index) in flexTags"
+      :key="index"
+      :class="['tag-item flexible-tag text-ellipsis', item.className]"
       :style="{
         maxWidth: `${maxWidth}px`
       }"
-      v-for="(item, index) in list"
-      :key="index">
-      {{ idKey ? item[idKey] : item }}
+      v-bind="item">
+      {{ item.tagDisplay }}
     </div>
   </div>
 </template>
 <script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator';
+import { defineComponent, ref, getCurrentInstance, toRefs, PropType, watch } from 'vue';
 
-@Component({ name: 'flexible-tag' })
+export default defineComponent({
+  props: {
+    list: {
+      type: Array as PropType<any[]>,
+      default: () => [],
+    },
+    labelKey: {
+      type: String,
+      default: 'name',
+    },
+    maxWidth: {
+      type: Number,
+      default: 140,
+    },
+    deleteAble: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup(props) {
+    const { proxy } = (getCurrentInstance() || {});
 
-export default class BkBizSelect extends Vue {
-  @Prop({ type: Array, default: () => [] }) private readonly list!: any[];
-  @Prop({ type: String, default: '' }) private readonly idKey!: string;
-  @Prop({ type: Number, default: 140 }) private readonly maxWidth!: number;
+    const numTagNode = ref();
+    const overflowTagIndex = ref(-4);
 
-  private numTagNode: any = null;
-  private overflowTagIndex = -1;
+    const flexTags = ref<any[]>([]);
+    const allTagContext = ref('');
 
-  private get allTagContext() {
-    return this.list.map(item => (this.idKey ? item[this.idKey] : item)).join(', ');
-  }
-
-  private mounted() {
-    this.reCalcOverflow();
-  }
+    const removeOverflowTagNode = () => {
+      if (proxy?.$el && (numTagNode.value?.parentNode === proxy?.$el)) {
+        proxy?.$el.removeChild(numTagNode.value);
+      }
+    };
+    const getTagDOM = (index?: number) => {
+      const tags = [].slice.call(proxy?.$el.querySelectorAll('.tag-item'));
+      return typeof index === 'number' ? tags[index] : tags;
+    };
+    // 创建/获取溢出数字节点
+    const getNumTag = () => {
+      if (numTagNode.value) {
+        return numTagNode.value;
+      }
+      const nodeNum = document.createElement('span');
+      nodeNum.className = 'num-tag';
+      numTagNode.value = nodeNum;
+      return nodeNum;
+    };
 
-  private reCalcOverflow() {
-    this.removeOverflowTagNode();
-    if (this.list.length < 2) {
-      return false;
-    }
-    setTimeout(() => {
-      const tags: any[] = this.getTagDOM();
-      const tagIndexInSecondRow = tags.findIndex((tagItem, index) => {
-        if (!index) {
-          return false;
+    const reCalcOverflow = () => {
+      removeOverflowTagNode();
+      if (props.list.length < 2) {
+        return false;
+      }
+      setTimeout(() => {
+        const tags: any[] = getTagDOM();
+        const tagIndexInSecondRow = tags.findIndex((tagItem, index) => {
+          if (!index) {
+            return false;
+          }
+          const previousTag = tags[index - 1];
+          return previousTag.offsetTop !== tagItem.offsetTop;
+        });
+        if (tagIndexInSecondRow > -1) {
+          overflowTagIndex.value = tagIndexInSecondRow;
+        } else {
+          overflowTagIndex.value = -1;
         }
-        const previousTag = tags[index - 1];
-        return previousTag.offsetTop !== tagItem.offsetTop;
+        if (proxy?.$el) {
+          proxy.$el.scrollTop = 0;
+        }
+        insertOverflowTag();
       });
-      if (tagIndexInSecondRow > -1) {
-        this.overflowTagIndex = tagIndexInSecondRow;
+    };
+    const insertOverflowTag = () => {
+      if (overflowTagIndex.value < 0) {
+        return;
+      }
+      const overflowTagNode = getNumTag();
+      const referenceTag: any = getTagDOM(overflowTagIndex.value);
+      if (referenceTag) {
+        setOverflowTagContent();
+        proxy?.$el.insertBefore(overflowTagNode, referenceTag);
       } else {
-        this.overflowTagIndex = -1;
+        overflowTagIndex.value = -1;
+        return;
       }
-      this.$el.scrollTop = 0;
-      this.insertOverflowTag();
-    });
-  }
-  private insertOverflowTag() {
-    if (this.overflowTagIndex < 0) {
-      return;
-    }
-    const overflowTagNode = this.getNumTag();
-    const referenceTag: any = this.getTagDOM(this.overflowTagIndex);
-    if (referenceTag) {
-      this.setOverflowTagContent();
-      this.$el.insertBefore(overflowTagNode, referenceTag);
-    } else {
-      this.overflowTagIndex = -1;
-      return;
-    }
-    setTimeout(() => {
-      const previousTag: any = this.getTagDOM(this.overflowTagIndex - 1);
-      if (overflowTagNode.offsetTop !== previousTag.offsetTop) {
-        this.overflowTagIndex -= 1;
-        this.$el.insertBefore(overflowTagNode, overflowTagNode.previousSibling);
-        this.setOverflowTagContent();
+      setTimeout(() => {
+        const previousTag: any = getTagDOM(overflowTagIndex.value - 1);
+        if (overflowTagNode.offsetTop !== previousTag.offsetTop) {
+          overflowTagIndex.value -= 1;
+          proxy?.$el.insertBefore(overflowTagNode, overflowTagNode.previousSibling);
+          setOverflowTagContent();
+        }
+      });
+    };
+    const setOverflowTagContent = () => {
+      numTagNode.value.textContent = `+${props.list.length - overflowTagIndex.value}`;
+    };
+
+    const updateTags = () => {
+      try {
+        const isStr = props.list.length ? typeof props.list[0] === 'string' : false;
+        const tags = isStr
+          ? props.list.map(text => ({
+            tagDisplay: text,
+            deleteAble: props.deleteAble,
+          }))
+          : props.list.map(item => ({
+            ...item,
+            tagDisplay: item[props.labelKey || 'name'],
+            deleteAble: item.readonly ? false : props.deleteAble,
+          }));
+        flexTags.value.splice(0, flexTags.value.length, ...tags);
+        allTagContext.value = tags.map(item => item.tagDisplay).join(', ');
+      } catch (_) {
+        flexTags.value.splice(0, flexTags.value.length);
+        allTagContext.value = '';
       }
+    };
+
+    watch(() => props.list, () => {
+      updateTags();
+      reCalcOverflow();
+    }, {
+      deep: true,
+      immediate: true,
     });
-  }
-  private setOverflowTagContent() {
-    this.numTagNode.textContent = `+${this.list.length - this.overflowTagIndex}`;
-  }
-  private getTagDOM(index?: number) {
-    const tags = [].slice.call(this.$el.querySelectorAll('.tag-item'));
-    return typeof index === 'number' ? tags[index] : tags;
-  }
-  // 创建/获取溢出数字节点
-  private getNumTag() {
-    if (this.numTagNode) {
-      return this.numTagNode;
-    }
-    const numTagNode = document.createElement('span');
-    numTagNode.className = 'num-tag';
-    this.numTagNode = numTagNode;
-    return numTagNode;
-  }
-  private removeOverflowTagNode() {
-    if (this.numTagNode && this.numTagNode.parentNode === this.$el) {
-      this.$el.removeChild(this.numTagNode);
-    }
-  }
-}
+
+    return {
+      ...toRefs(props),
+      flexTags,
+      allTagContext,
+    };
+  },
+});
+
+
 </script>
diff --git a/frontend/src/components/common/navigation.vue b/frontend/src/components/common/navigation.vue
@@ -1,5 +1,5 @@
 <template>
-  <article>
+  <article class="nodeman-wrapper">
     <!--导航-->
     <bk-navigation
       ref="navigation"
@@ -131,8 +131,8 @@ import MixinsControlDropdown from '@/components/common/MixinsControlDropdown.vue
 import ExceptionPage from '@/components/exception/exception-page.vue';
 import routerBackMixin from '@/common/router-back-mixin';
 import { bus } from '@/common/bus';
-import { INavConfig } from '@/types';
 import logoSrc from '@/images/logoIcon.png';
+import { INavConfig, ISideMenuConfig } from '@/types';
 
 interface IUserItem {
   id: string
@@ -238,10 +238,29 @@ export default class NodemanNavigation extends Mixins(routerBackMixin) {
     if (this.activeIndex === -1) return false;
     return !!this.navList[this.activeIndex as number].children?.length;
   }
+  // 根据开关隐藏Agent包管理菜单
+  private get navListHideAgentPkg() {
+    // 深拷贝侧边栏菜单列表
+    const navList = JSON.parse(JSON.stringify(this.navList[this.activeIndex].children || [])) as ISideMenuConfig[];
+    // 过滤隐藏Agent包管理菜单
+    navList?.forEach((item) => {
+      if (item.name === 'nav_Agent') {
+        item.children = item.children?.filter((child: { name: string; }) => child.name !== 'agentPackage');
+      }
+    });
+    return navList;
+  }
+  private async created() {
+    // 获取开关状态
+    await this.getAgentPackageUI();
+  }
   // 左侧导航list
   private get sideMenuList() {
     if (this.activeIndex === -1) return [];
-    return this.navList[this.activeIndex].children || [];
+    // 根据开关状态过滤agent包管理菜单
+    const agentSwitch = MainStore.ENABLE_AGENT_PACKAGE_UI;
+    const menuList = !agentSwitch ? this.navListHideAgentPkg : this.navList[this.activeIndex].children;
+    return menuList || [];
   }
   // 子菜单默认激活项
   private get currentActive() {
@@ -410,15 +429,20 @@ export default class NodemanNavigation extends Mixins(routerBackMixin) {
   public handleBizChange(newBizIds: number[]) {
     MainStore.setSelectedBiz(newBizIds);
   }
+  public async getAgentPackageUI() {
+    await MainStore.getAgentPackageUI();
+  }
 }
 </script>
-<style lang="postcss" scoped>
-  @import "@/css/mixins/nodeman.css";
-  @import "@/css/variable.css";
+<style lang="postcss">
+@import "@/css/mixins/nodeman.css";
+@import "@/css/variable.css";
+
+$navColor: #96a2b9;
+$navHoverColor: #d3d9e4;
+$headerColor: #313238;
 
-  $navColor: #96a2b9;
-  $navHoverColor: #d3d9e4;
-  $headerColor: #313238;
+.nodeman-wrapper {
 
   .menu-biz-shrink-text {
     opacity: 0;
@@ -485,6 +509,12 @@ export default class NodemanNavigation extends Mixins(routerBackMixin) {
       }
     }
   }
+  .nav-content-wrapper {
+    height: 100%;
+    & > div {
+      height: 100%;
+    }
+  }
   .nodeman-main-loading {
     /* stylelint-disable-next-line declaration-no-important */
     position: absolute !important;
@@ -604,4 +634,5 @@ export default class NodemanNavigation extends Mixins(routerBackMixin) {
       display: none;
     }
   }
+}
 </style>