3.7 work -> hosts folders (#173)

f5devcentral · Mar 18, 2022 · 12ae3f2 · 12ae3f2
1 parent 6cd6dec
commit 12ae3f2
Show file tree

Hide file tree

Showing 5 changed files with 122 additions and 38 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,13 @@ Check [Keep a Changelog](http://keepachangelog.com/) for recommendations on how
 
 ---
 
+## [3.7.0] - (03-18-2022)
+
+- [RFE] Ability to organize F5 Hosts into Folders #71
+  - <https://github.com/f5devcentral/vscode-f5/issues/71>
+
+---
+
 ## [3.6.1] - (02-10-2022)
 
 - [BUG] Documentation text link under Config Explorer is misspelled #166

diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
 	"displayName": "The F5 Extension",
 	"description": "Supercharge your F5 automation development",
 	"publisher": "F5DevCentral",
-	"version": "3.6.1",
+	"version": "3.7.0",
 	"keywords": [
 		"F5",
 		"F5Networks",
@@ -221,6 +221,10 @@
 										"custom"
 									]
 								},
+								"folder": {
+									"type": "string",
+									"description": "View folder"
+								},
 								"label": {
 									"type": "string",
 									"description": "short device label"

diff --git a/src/extensionVariables.ts b/src/extensionVariables.ts
@@ -189,6 +189,12 @@ export async function loadSettings() {
         logger.info(`NODE_TLS_REJECT_UNAUTHORIZED=${process.env.NODE_TLS_REJECT_UNAUTHORIZED}`);
     }
 
+    // reload device hosts view
+    if(ext.hostsTreeProvider) {
+        // we have to make sure this has been populated after initial extension loading
+        ext.hostsTreeProvider.refresh();
+    }
+
 }
 
 

diff --git a/src/models.ts b/src/models.ts
@@ -5,11 +5,12 @@
 
 
 /**
- * extension device model
+ * extension device model for hosts view
  */
 export type BigipHost = {
     device: string,
     label?: string,
+    folder?: string,
     details?: {
         product?: string;
         platformMarketingName?: string;

diff --git a/src/treeViewsProviders/hostsTreeProvider.ts b/src/treeViewsProviders/hostsTreeProvider.ts
@@ -84,9 +84,9 @@ export class F5TreeProvider implements TreeDataProvider<F5Host> {
 
 	async refresh(): Promise<void> {
 		return await this.loadHosts()
-		.then( _ => {
-			return this._onDidChangeTreeData.fire(undefined);
-		});
+			.then(_ => {
+				return this._onDidChangeTreeData.fire(undefined);
+			});
 	}
 
 
@@ -100,49 +100,115 @@ export class F5TreeProvider implements TreeDataProvider<F5Host> {
 
 		if (element) {
 
-			// nothing for now...
+			// map hosts array and return items with matching folder
+			this.bigipHosts.map((item: BigipHost) => {
+				if (item.folder === element.label) {
+
+					// add default provider=local if not defined
+					if (!item.hasOwnProperty('provider')) {
+						item['provider'] = 'tmos';
+					}
+
+					let itemCollapsibleState = TreeItemCollapsibleState.None;
+					if (item.device === this.connectedDevice?.device.device) {
+						this.saveConnectedDeviceDetails();
+					}
+
+					const icon =
+						(item.details?.product === 'BIG-IQ') ? this.bigiqSvg :
+							(item.details?.product === 'BIG-IP') ? this.f5Hex : 'file';
+					const tooltip
+						= item.details
+							? new MarkdownString().appendCodeblock(jsyaml.dump(item), 'yaml')
+							: '';
+
+					const treeItem = new F5Host(
+						(item.label || item.device),
+						item.provider,
+						tooltip,
+						icon,
+						'f5Host',
+						itemCollapsibleState,
+						{
+							command: 'f5.connectDevice',
+							title: 'hostTitle',
+							arguments: [item]
+						}
+					);
+
+					treeItem.device = item;
+					treeItems.push(treeItem);
+				}
+			});
 
 		} else {
 
 			this.bigipHosts.map((item: BigipHost) => {
 
+				// if item has folder, create folder item, else return host item
+				if (item.folder) {
+
+					// const x = treeItems.findIndex(x => x.label === item.folder);
+
+					// filter items in folder and return only labels (hostnames)
+					// const folderItems = this.bigipHosts.filter(x => x.label === item.folder).map(y => y.label);
+					const folderItems = this.bigipHosts.filter(x => x.folder === item.folder).map(y => (y.label || y.device));
+					// count the number of hosts in folder
+					const folderItemCount = folderItems.length.toString();
+
+					if (treeItems.findIndex(x => x.label === item.folder) === -1) {
+						// folder item not found, add to tree
+						treeItems.push(new F5Host(
+							item.folder,
+							folderItemCount,
+							new MarkdownString().appendCodeblock(folderItems.join('\n'), 'yaml'),
+							new ThemeIcon('file-directory'),
+							'f5Host-folder',
+							TreeItemCollapsibleState.Collapsed
+						));
+					}
 
-				// add default provider=local if not defined
-				if (!item.hasOwnProperty('provider')) {
-					item['provider'] = 'tmos';
-				}
 
-				// if device is connected device, make it expandable
-				let itemCollapsibleState = TreeItemCollapsibleState.None;
-				if (item.device === this.connectedDevice?.device.device) {
-					// itemCollapsibleState = TreeItemCollapsibleState.Expanded;
-					this.saveConnectedDeviceDetails();
-				}
+				} else {
+
+					// add default provider=local if not defined
+					if (!item.hasOwnProperty('provider')) {
+						item['provider'] = 'tmos';
+					}
 
-				const icon =
-					(item.details?.product === 'BIG-IQ') ? this.bigiqSvg :
-						(item.details?.product === 'BIG-IP') ? this.f5Hex : '';
-				const tooltip
-					= item.details
-						? new MarkdownString().appendCodeblock(jsyaml.dump(item), 'yaml')
-						: '';
-
-				const treeItem = new F5Host(
-					(item.label || item.device),
-					item.provider,
-					tooltip,
-					icon,
-					'f5Host',
-					itemCollapsibleState,
-					{
-						command: 'f5.connectDevice',
-						title: 'hostTitle',
-						arguments: [item]
+					let itemCollapsibleState = TreeItemCollapsibleState.None;
+					if (item.device === this.connectedDevice?.device.device) {
+						this.saveConnectedDeviceDetails();
 					}
-				);
 
-				treeItem.device = item;
-				treeItems.push(treeItem);
+					const icon =
+						(item.details?.product === 'BIG-IQ') ? this.bigiqSvg :
+							(item.details?.product === 'BIG-IP') ? this.f5Hex : '$(file)';
+					const tooltip
+						= item.details
+							? new MarkdownString().appendCodeblock(jsyaml.dump(item), 'yaml')
+							: '';
+
+					const treeItem = new F5Host(
+						(item.label || item.device),
+						item.provider,
+						tooltip,
+						icon,
+						'f5Host',
+						itemCollapsibleState,
+						{
+							command: 'f5.connectDevice',
+							title: 'hostTitle',
+							arguments: [item]
+						}
+					);
+
+					treeItem.device = item;
+					treeItems.push(treeItem);
+				}
+
+
+
 			});
 
 		}