feat: 增加类型树

jumpserver · May 11, 2023 · 2298f9b · 2298f9b
1 parent 487c410
commit 2298f9b
Show file tree

Hide file tree

Showing 8 changed files with 103 additions and 59 deletions.
diff --git a/src/app/elements/asset-tree/asset-tree.component.html b/src/app/elements/asset-tree/asset-tree.component.html
@@ -1,8 +1,8 @@
 <div class="tree-container">
   <div
     *ngFor="let tree of trees"
-    class="tree-type open-tree"
-    [ngClass]="{'tree-type-asset': tree.open}"
+    class="tree-type"
+    [ngClass]="{'expand-tree': tree.open}"
   >
     <span class="tree-type-banner">
       <div

diff --git a/src/app/elements/asset-tree/asset-tree.component.scss b/src/app/elements/asset-tree/asset-tree.component.scss
@@ -156,6 +156,7 @@ tr:hover {
   position: relative;
   padding: 5px 10px;
   min-height: 40px;
+  overflow-x: auto;
   height: calc(100% - 31px);
 }
 
@@ -198,9 +199,8 @@ tr:hover {
   transition: all .3s;
 }
 
-.tree-type-asset {
-  flex: none;
-  height: initial;
+.expand-tree {
+  height: 100%;
 }
 
 .tree-type .tree-search {

diff --git a/src/app/elements/asset-tree/asset-tree.component.ts b/src/app/elements/asset-tree/asset-tree.component.ts
@@ -12,7 +12,7 @@ import {
   TreeFilterService, I18nService, OrganizationService
 } from '@app/services';
 import {connectEvt} from '@app/globals';
-import {TreeNode, ConnectEvt} from '@app/model';
+import {TreeNode, ConnectEvt, InitTreeConfig} from '@app/model';
 import {CookieService} from 'ngx-cookie-service';
 
 declare var $: any;
@@ -157,6 +157,15 @@ export class ElementAssetTreeComponent implements OnInit {
     document.addEventListener('click', this.hideRMenu.bind(this), false);
   }
 
+  initTree() {
+    if (this.isK8s) {
+      this.initK8sTree().then();
+    } else {
+      this.initAssetTree().then();
+      this.initTypeTree().then();
+    }
+  }
+
   onNodeClick(event, treeId, treeNode, clickFlag) {
     const ztree = this.trees.find(t => t.name === treeId).ztree;
     if (treeNode.isParent) {
@@ -175,119 +184,131 @@ export class ElementAssetTreeComponent implements OnInit {
   }
 
   async initK8sTree(refresh = false) {
-    let tree = new Tree(
+    const tree = new Tree(
       'K8sTree',
       this._i18n.instant('Kubernetes'),
       true,
       true,
       false
     );
-    if (refresh) {
-      tree = this.trees.find(t => t.name === tree.name);
-    } else {
-      this.trees.push(tree);
-    }
     const token = this._route.snapshot.queryParams.token;
     const url = `/api/v1/perms/users/self/nodes/children-with-k8s/tree/?token=${token}`;
-    const setting = Object.assign({
-      async: {
-        enable: true,
-        url: url,
-        autoParam: ['id=key', 'name=n', 'level=lv'],
-        type: 'get',
-        headers: {
-          'X-JMS-ORG': this.currentOrgID
+    this.initTreeInfo(tree, {
+      refresh,
+      url,
+      setting: {
+        async: {
+          enable: true,
+          url: url,
+          autoParam: ['id=key', 'name=n', 'level=lv'],
+          type: 'get',
+          headers: {
+            'X-JMS-ORG': this.currentOrgID
+          }
         }
-      }
-    }, this.setting);
-    setting['callback'] = {
-      onClick: _.debounce(this.onNodeClick, 300, {
-        'leading': true,
-        'trailing': false
-      }).bind(this),
-      onRightClick: this.onRightClick.bind(this)
-    };
-    tree.loading = true;
-    this._http.get(url).subscribe(resp => {
-      tree.ztree = $.fn.zTree.init($('#' + tree.name), setting, resp);
-    }, err => {
-      if (err.status === 400) {
-        alert(err.error.detail);
-      }
-      this._logger.error('Get k8s tree error: ', err);
-    }, () => {
-      tree.loading = false;
+      },
+      showFavoriteAssets: false
     });
   }
 
   async initAssetTree(refresh = false) {
-    let tree = new Tree(
+    const tree = new Tree(
       'AssetTree',
       'My assets',
       true,
       true,
       true
     );
-    if (refresh) {
+    this.initTreeInfo(tree, {
+      refresh,
+      apiName: 'getMyGrantedNodes',
+      showFavoriteAssets: true,
+      loadTreeAsyncUrl: '/api/v1/perms/users/self/nodes/children-with-assets/tree/?'
+    });
+  }
+
+  async initTypeTree(refresh = false) {
+    const tree = new Tree(
+      'AssetTypeTree',
+      this._i18n.instant('Type tree'),
+      true,
+      true,
+      false
+    );
+    this.initTreeInfo(tree, {
+      refresh,
+      apiName: 'getAssetTypeTree',
+      showFavoriteAssets: false,
+      loadTreeAsyncUrl: '/api/v1/perms/users/self/nodes/children-with-assets/category/tree/?',
+      setting: {
+        async: {
+          autoParam: ['type']
+        }
+      },
+    });
+  }
+
+  async initTreeInfo(tree: Tree, config: InitTreeConfig) {
+    if (config.refresh) {
       tree = this.trees.find(t => t.name === tree.name);
     } else {
       this.trees.push(tree);
     }
-    const setting = Object.assign({}, this.setting);
+    let setting = Object.assign({}, this.setting);
     setting['callback'] = {
       onClick: _.debounce(this.onNodeClick, 300, {
         'leading': true,
         'trailing': false
       }).bind(this),
       onRightClick: this.onRightClick.bind(this)
     };
-    const url = '/api/v1/perms/users/self/nodes/children-with-assets/tree/?';
     if (this.isLoadTreeAsync) {
       setting['async'] = {
         enable: true,
-        url: url,
+        url: config.loadTreeAsyncUrl,
         autoParam: ['id=key', 'name=n', 'level=lv'],
         type: 'get',
         headers: {
           'X-JMS-ORG': this.currentOrgID
         }
       };
     }
+    setting = _.merge(setting,  config.setting || {});
 
-    this._http.getFavoriteAssets().subscribe(resp => {
-      this.favoriteAssets = resp.map(i => i.asset);
-    });
+    if (config.showFavoriteAssets) {
+      this._http.getFavoriteAssets().subscribe(resp => {
+        this.favoriteAssets = resp.map(i => i.asset);
+      });
+    }
     tree.loading = true;
-    this._http.getMyGrantedNodes(this.isLoadTreeAsync).subscribe(resp => {
-      if (refresh) {
+    const request = config.hasOwnProperty('apiName') ?
+      this._http[config.apiName](this.isLoadTreeAsync) : this._http.get(config.url);
+    request.subscribe(resp => {
+      if (config.refresh) {
         tree.ztree.expandAll(false);
         tree.ztree.destroy();
       }
       setTimeout(() => {
         tree.ztree = $.fn.zTree.init($('#' + tree.name), setting, resp);
       }, 100);
     }, error => {
-      console.error('Get tree error: ', error);
+      if (error.status === 400) {
+        alert(error.error.detail);
+      }
+      this._logger.error('Get tree error: ', error);
     }, () => {
       tree.loading = false;
     });
   }
 
-  initTree() {
-    if (this.isK8s) {
-      this.initK8sTree().then();
-    } else {
-      this.initAssetTree().then();
-    }
-  }
-
   async refreshTree(event) {
     event.stopPropagation();
     this.searchValue = '';
     if (this.isK8s) {
       this.initK8sTree(true).then();
     } else {
       this.initAssetTree(true).then();
+      this.initTypeTree(true).then();
     }
   }
 
@@ -580,6 +601,12 @@ export class ElementAssetTreeComponent implements OnInit {
   }
 
   foldTree(tree: Tree) {
-    tree.open = !tree.open;
+    this.trees.map(item => {
+      if (tree.name === item.name) {
+        item.open = !item.open;
+      } else {
+        item.open = false;
+      }
+    });
   }
 }
diff --git a/src/app/model.ts b/src/app/model.ts
@@ -450,3 +450,11 @@ export interface Organization {
   is_root?: boolean;
   is_default?: boolean;
 }
+export class InitTreeConfig {
+  refresh: boolean;
+  apiName?: string;
+  url?: string;
+  setting?: any = {};
+  showFavoriteAssets?: boolean = false;
+  loadTreeAsyncUrl?: string;
+}
diff --git a/src/app/services/http.ts b/src/app/services/http.ts
@@ -149,6 +149,12 @@ export class HttpService {
     return this.get<Array<TreeNode>>(url).pipe(this.withRetry());
   }
 
+  getAssetTypeTree(sync: boolean) {
+    const isSync = !sync ? 1 : 0;
+    const url = `/api/v1/perms/users/self/nodes/children-with-assets/category/tree/?sync=${isSync}`;
+    return this.get<Array<TreeNode>>(url).pipe(this.withRetry());
+  }
+
   getMyGrantedK8sNodes(treeId: string, async: boolean) {
     const url = `/api/v1/perms/users/self/nodes/children-with-k8s/tree/?tree_id=${treeId}&async=${async}`;
     return this.get<Array<TreeNode>>(url);

diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json
@@ -66,6 +66,7 @@
   "Protocol: ": "Protocol: {{value}}",
   "My assets": "My assets",
   "My applications": "My applications",
+  "Type tree": "Type tree",
   "Databases": "Databases",
   "Remote apps": "Remote apps",
   "Kubernetes": "Kubernetes",

diff --git a/src/assets/i18n/ja.json b/src/assets/i18n/ja.json
@@ -66,6 +66,7 @@
   "Protocol: ": "プロトコル: {{value}}",
   "My assets": "マイ資産",
   "My applications": "私の応用",
+  "Type tree": "タイプツリー",
   "Databases": "データベース",
   "Remote apps": "リモートアプリケーション",
   "Kubernetes": "Kubernetes",

diff --git a/src/assets/i18n/zh.json b/src/assets/i18n/zh.json
@@ -66,6 +66,7 @@
   "Protocol: ": "协议: {{value}}",
   "My assets": "我的资产",
   "My applications": "我的应用",
+  "Type tree": "类型树",
   "Databases": "数据库",
   "Remote apps": "远程应用",
   "Kubernetes": "Kubernetes",