v0.3.0

Author: benc-uk

CHANGELOG.md

@@ -1,10 +1,15 @@
-## 0.2.2
-- Bug fixes
-- Removed animation
+## 0.3.0
+- Bug fixes, the usual; variable resolution and linked templates
+- Much improved handling of multi-level linked templates (links within links)
+- New layout modes; tree and grid
+- Animation removed in most situations, it was annoying
+- Support for multi-line strings (I think!)
+
 
-- ## 0.2.1
+## 0.2.1
 - Bug fixes
 
+
 ## 0.2.0
 - Support for loading a parameters file and applying values to the output
 - Filter out resources by type, helps de-clutter the view on very busy templates, or when you have many similar resources you want to hide (e.g. NSG rules)
@@ -16,48 +21,58 @@
 - Many new icons; automation, SQL Server, blobservices, and more
 - A bunch more bugs I expect ;)
 
+
 ## 0.1.1
 - Several fixes & improvements to how linked templates are handled and searched for
 
+
 ## 0.1.0
 - Support for linked & nested templates! See readme for limitations
 - Support for the new vscode-azurearmtools extension language server and 'ARM Template' language type
 - displayName tag if present will be used in place of the resource name
 
+
 ## 0.0.9
 - Many fixes to parameter & variable resolution
 - Improved error messages and logging
 - Tested successfully against ALL templates on https://github.com/Azure/azure-quickstart-templates
 
+
 ## 0.0.8
 - Parameter & variable values which are objects now resolved
 - Parameters defaultValues detected picked up and used
 - Display unresolvable properties in italics and inside {}
 
+
 ## 0.0.7
 - Many, many new icons added!
 - Support for JSON comments, which is allowed by ARM
 - Custom default icon for API Management sub-resources
 
+
 ## 0.0.6
 - Fix for SKU evaluation error (exp.trim)
 - Nicer error messages
-  
+
+
 ## 0.0.5
 - Snap to grid added
 - Telemetry tracking added
 - Fix for handling resource tags
 - Added resource SKU details to info box
 - Smarter handling of updates when user is editing JSON
 
+
 ## 0.0.4
 - Fixed initialization & first display problems
 - Added preview icon to top right of editor menu bar
 - More robust activation options/filters
 - Extension is now a singleton panel
 
+
 ## 0.0.3
 - Super minor readme fixes, added this changelog
 
+
 ## 0.0.2
 - Initial release. We don't talk about v0.0.1

README.md

@@ -26,11 +26,18 @@ Extension as been tested successfully against all 890+ [Azure Quickstart Templat
   - Use keyboard shortcut `Ctrl+Alt+Q`
 
 ## Basic Features
-- Click on a resource to show popup 'infobox' for that resource
+- Click on a resource to show popup 'infobox' for that resource, a selected subset of details will be shown
+- Click and drag on background to move and pan the view around
+- Zoom in and out with the mouse wheel
+- Drag icons around to layout as your wish, one tip is to click 'Re-fit' after moving to get the best view & zoom level
+
+## Toolbar
 - Click the 'Labels' toolbar button to toggle labels from resource names to resource types
 - Click the 'Re-fit' toolbar button to refit the view to the best zoom level
 - Click the 'Snap' toolbar button to toggle snap to grid mode on/off
-- Click the 'Layout' toolbar button to re-layout icons in default
+- Two auto layout modes are available:
+  - 'Tree' lays out the nodes in a hierarchical manner, ok for small templates, also the default
+  - 'Grid' puts the nodes on a grid, better for large templates but will often not make logical sense
 
 ## Parameter Files
 By default the extension will try to use any `defaultValues` found in the parameters section of the template.
@@ -49,7 +56,7 @@ The extension will attempt to locate and display linked templates, these resourc
 - If the resolved linked template URL is externally accessible, it will be downloaded and used.
 - If the URL is not accessible, then an attempt is made to load the file locally based on a guess from the filename and parent dir extracted from the URL, e.g. `nested/linked.json` 
 - If that fails, then the local filesystem of the VS Code workspace will be searched for the file. Some assumptions are made in this search:
-  - The search will only happen if the linked file has a *different* filename from the main/master template being viewed
+  - The search will only happen if the linked file has a *different* filename from the main/master template being viewed. Otherwise the search would just find the main template being viewed
   - The linked template file should located somewhere under the path of the main template, sub-folders will be searched. If the file resides elsewhere outside this path it will not be located.
   - The first matching file will be used
 - If linked template URL or filename is dynamic based on template parameters it is very likely not to resolve, and will not be found.
@@ -62,16 +69,15 @@ This is a port of a older *ARM Viewer* project, which was a standalone Node.js w
 
 This project was created as a learning exercise, but was heavily inspired & influenced by the old ARMViz tool. ARMViz sadly seems to have been abandoned, it often has problems displaying some templates. Personally I wasn't a fan of look of the output, and found it hard to read. These are a few of the reasons why I created this project
 
+## ARM Template JSON Support
+ARM templates go outside the JSON specification and break it in a couple of areas:
+- Support for comments in the JSON file (aka JSONC)
+- Allowing the use of multi-line strings
+The extension supports both of these as far as is reasonably possible, multi-line strings in particular has no known spec on how it should be supported. The extension is also aware of the language server provided by the 'Azure Resource Manager Tools' extension and will accept files set to 'arm-template' as the language type. 
+
 
-# Limitations & Known Issues 
+## Limitations & Known Issues 
 - The code attempts to find the links (`dependsOn` relationships) between ARM resources, however due to the *many* subtle and complex ways these relationships can be defined & expressed, certain links may not be picked up & displayed.
 - Icons for the most commonly used & popular resource types have been added, however not every resource is covered (There's simply too many and no canonical source). The default ARM cube icon will be shown as a fallback. Get in touch if you want a icon added for a particular resource type.
 - Resolving names & other properties for resources is attempted, but due to programmatic way these are generally defined with ARM functions and expressions, full name resolution is not always possible
 - Templates using the loop functions `copy` & `copyIndex` to create multiple resources will not be rendered correctly due to limitations on evaluating the dynamic iterative state of the template     
-
-
-# Running/Debugging Locally
-- Clone/fork repo and open project in VS Code 1.25+
-- `npm install`
-- `npm run watch` or `npm run compile`
-- `F5` to start debugging

assets/css/main.css

@@ -56,7 +56,7 @@ button {
   margin: 2px;
   border-radius: 3px;
   font-size: 95%;
-  min-width: 70px;
+  /* min-width: 70px; */
   text-align: center;
 }
 

assets/img/toolbar/cose.svg

@@ -83,6 +83,8 @@ function init(prefix) {
 //
 function displayData(data) {
   console.log("### ArmView: Displaying received data");
+  //console.dir(JSON.stringify(data, null, 3));
+  
   cy.remove('*');
   cy.add(data);
 
@@ -99,7 +101,7 @@ function displayData(data) {
     }
   }
 
-  reLayout();
+  reLayout('breadthfirst', false);
 }
 
 //
@@ -113,20 +115,17 @@ function _addInfo(name, value) {
 
   table = document.getElementById('infotable');
 
-  if(value.startsWith('http')) {
-    table.insertAdjacentHTML('beforeend', `<tr><td>${_utilTitleCase(name)}</td><td><a href='/view?url=${encodeURIComponent(value)}' target='_blank'>${value}</a></td></tr>`)
-  } else {
-    let valClass = '';
-    if(value.startsWith('{') && value.endsWith('}'))
-      valClass = 'italic';
-    table.insertAdjacentHTML('beforeend', `<tr><td>${_utilTitleCase(name)}</td><td class='${valClass}'>${value}</td></tr>`);
-  }
+  let valClass = '';
+  if(value.startsWith('{') && value.endsWith('}'))
+    valClass = 'italic';
+    
+  table.insertAdjacentHTML('beforeend', `<tr><td>${_utilTitleCase(name)}</td><td class='${valClass}'>${value}</td></tr>`);
 }
 
 //
 // Layout the view of nodes given current data
 //
-function reLayout() {
+function reLayout(mode, animate) {
   // Set colors in keeping with VS code theme (might be dark or light)
   let bgColor = window.getComputedStyle(document.getElementsByTagName('body')[0]).getPropertyValue('background-color');
   let textColor = '#eeeeee';
@@ -180,7 +179,7 @@ function reLayout() {
   // Bounding box for groups
   cy.style().selector(':parent').style({
     'background-image': null,
-    'label': node => { return decodeURIComponent(node.data(labelField)) },
+    'label': node => { return getLabel(node) }, //decodeURIComponent(node.data(labelField)) },
     'border-width': '4',
     'border-color': '#000',
     'border-opacity': 0.5,
@@ -204,14 +203,24 @@ function reLayout() {
   else  
     cy.snapToGrid('snapOff');
 
-  // Re-layout nodes in breadthfirst mode, resizing and fitting too
+  // Re-layout nodes in given mode, resizing and fitting too
   cy.style().update()
   cy.resize();
+
+  if(!mode) mode = 'breadthfirst'
+  if(!animate) animate = false
+  let spacing = 1.5
+  if(mode == 'grid')
+    spacing = 1.75
+
   cy.layout({
-    name: 'breadthfirst',
-    nodeDimensionsIncludeLabels: false
-    //animate: true
+    avoidOverlap: true,
+    name: mode,
+    nodeDimensionsIncludeLabels: false,
+    spacingFactor: spacing,
+    animate: animate
   }).run();
+
   cy.fit();
 }
 
@@ -221,7 +230,7 @@ function reLayout() {
 function toggleLabels() {
   labelField = labelField == 'label' ? 'name' : 'label' 
   cy.style().selector('node').style({
-    'label': node => { return decodeURIComponent(node.data(labelField)) },
+    'label': node => { return getLabel(node) } //decodeURIComponent(node.data(labelField)) },
   }).update();
 }
 
@@ -356,14 +365,10 @@ function sendMessage(msg) {
 //
 // Get label for resource
 //
-// function getLabel(node) {
-//   // Special case - if resource has displayName tag
-//   if(labelField == 'name') {
-//     for(let extraField in node.data('extra')) {
-//       if(extraField.toLowerCase() == 'tag displayname') {
-//         return decodeURIComponent(node.data('extra')['tag displayname']);
-//       }
-//     }
-//   }
-//   return decodeURIComponent(node.data(labelField));
-// }
+function getLabel(node) {
+  let label = decodeURIComponent(node.data(labelField));
+  if(label.length > 24) {
+    label = label.substr(0, 24) + "…"
+  }
+  return label;
+}

assets/img/toolbar/grid.svg

@@ -2,7 +2,7 @@
 	"name": "armview",
 	"displayName": "ARM Template Viewer",
 	"description": "Graphically display ARM templates in an interactive map view",
-	"version": "0.2.2",
+	"version": "0.3.0",
 	"icon": "assets/img/icons/main.png",
 	"publisher": "bencoleman",
 	"author": {
@@ -90,7 +90,6 @@
 	},
 	"dependencies": {
 		"axios": "^0.19.0",
-		"jsonc-parser": "^2.1.1",
 		"jsonlint": "^1.6.3",
 		"strip-bom": "^3.0.0",
 		"strip-json-comments": "^3.0.1",
@@ -104,7 +103,6 @@
 		"chai-subset": "^1.6.0",
 		"jsonlint": "^1.6.3",
 		"mocha": "^6.2.0",
-		"strip-bom": "^3.0.0",
 		"ts-loader": "^6.1.2",
 		"tslint": "^5.16.0",
 		"typescript": "^3.5.1"

assets/img/toolbar/tree.svg

@@ -263,7 +263,10 @@ function getWebviewContent() {
 		<button onclick="toggleLabels()"><img src="${assetsPath}/img/toolbar/labels.svg">&nbsp; Labels</button>
 		<button onclick="cy.fit()"><img src="${assetsPath}/img/toolbar/fit.svg">&nbsp; Re-fit</button>
 		<button onclick="toggleSnap()" id="snapbut"><img src="${assetsPath}/img/toolbar/snap.svg">&nbsp; Snap</button>
-		<button onclick="reLayout()"><img src="${assetsPath}/img/toolbar/layout.svg">&nbsp; Layout</button>
+		Layout:
+		<button onclick="reLayout('breadthfirst', true)"><img src="${assetsPath}/img/toolbar/tree.svg"></button>
+		<button onclick="reLayout('grid', true)"><img src="${assetsPath}/img/toolbar/grid.svg"></button>
+		<!--button onclick="reLayout('cose', true)"><img src="${assetsPath}/img/toolbar/cose.svg"></button-->
 		&nbsp;&nbsp;	
 		<button onclick="sendMessage('paramsClicked')"><img src="${assetsPath}/img/toolbar/params.svg">&nbsp; Params</button>
 		<button onclick="sendMessage('filtersClicked')"><img src="${assetsPath}/img/toolbar/filter.svg">&nbsp; Filter</button>