From 2298f9bcdfd7e18815c0fdc5a3685babe1f3a509 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Chuailei000=E2=80=9D?= <2280131253@qq.com> Date: Sat, 6 May 2023 19:22:07 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E7=B1=BB=E5=9E=8B?= =?UTF-8?q?=E6=A0=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../asset-tree/asset-tree.component.html | 4 +- .../asset-tree/asset-tree.component.scss | 6 +- .../asset-tree/asset-tree.component.ts | 135 +++++++++++------- src/app/model.ts | 8 ++ src/app/services/http.ts | 6 + src/assets/i18n/en.json | 1 + src/assets/i18n/ja.json | 1 + src/assets/i18n/zh.json | 1 + 8 files changed, 103 insertions(+), 59 deletions(-) diff --git a/src/app/elements/asset-tree/asset-tree.component.html b/src/app/elements/asset-tree/asset-tree.component.html index 1796a533..9c9dfe39 100644 --- a/src/app/elements/asset-tree/asset-tree.component.html +++ b/src/app/elements/asset-tree/asset-tree.component.html @@ -1,8 +1,8 @@
t.name === treeId).ztree; if (treeNode.isParent) { @@ -175,65 +184,77 @@ 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, @@ -241,11 +262,10 @@ export class ElementAssetTreeComponent implements OnInit { }).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: { @@ -253,13 +273,18 @@ export class ElementAssetTreeComponent implements OnInit { } }; } + 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(); } @@ -267,20 +292,15 @@ export class ElementAssetTreeComponent implements OnInit { 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 = ''; @@ -288,6 +308,7 @@ export class ElementAssetTreeComponent implements OnInit { 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 index 022eea48..2f46a688 100644 --- 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 index 97a520e8..e35a0147 100644 --- a/src/app/services/http.ts +++ b/src/app/services/http.ts @@ -149,6 +149,12 @@ export class HttpService { return this.get>(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>(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>(url); diff --git a/src/assets/i18n/en.json b/src/assets/i18n/en.json index 1b45d30f..a854aa4b 100644 --- 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 index c887a98d..5f6e3a0f 100644 --- 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 index 91579797..207a2677 100644 --- 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",