Merge branch 'master' of github.com:aws-cloudformation/aws-cfn-lint-visual-studio-code

Author: kddejong

.travis.yml

@@ -20,7 +20,7 @@ install:
   - nvm install 10.16.2;
   - npm install
   - npm run compile
-  - pip install cfn-lint
+  - pip install cfn-lint pydot
 
 script:
   - npm run lint

README.md

@@ -8,24 +8,24 @@ VS Code CloudFormation Linter uses cfn-lint to lint your CloudFormation template
 
 ## Features
 
-Uses [cfn-lint](https://github.com/aws-cloudformation/cfn-python-lint) to parse and show issues with CloudFormation templates
+- Uses [cfn-lint](https://github.com/aws-cloudformation/cfn-python-lint) to parse the template and show problems with it.
 
-For example if there is an image subfolder under your extension project workspace:
+- Uses [pydot](https://pypi.org/project/pydot/) to preview the template as a graph of resources.
 
 ![features](/images/features.png)
 
 ## Requirements
 
-Requires cfn-lint to be installed: `pip install cfn-lint`
+Requires `cfn-lint` to be installed: `pip install cfn-lint`.
 
-More information about cfn-lint can be found [here](https://github.com/aws-cloudformation/cfn-python-lint)
+If you want to be able to preview templates as graphs, you also need to install `pydot`: `pip install pydot`.
 
 ## Extension Settings
 
-* `cfnLint.path`: path to the cfn-lint command
+* `cfnLint.path`: path to the `cfn-lint` command
 * `cfnLint.appendRules`: Array of paths containing additional Rules
 * `cfnLint.ignoreRules`: Array of Rule Ids to be ignored
-* `cfnLint.overrideSpecPath`: Path to an Specification overrule file
+* `cfnLint.overrideSpecPath`: Path to a specification override file
 
 ## Contribute
 

client/src/extension.ts

@@ -15,11 +15,13 @@ permissions and limitations under the License.
 'use strict';
 
 import * as path from 'path';
-
-import { workspace, ExtensionContext, ConfigurationTarget, window } from 'vscode';
+import * as fs from 'fs';
+import { workspace, ExtensionContext, ConfigurationTarget, window, WebviewPanel, Uri, commands, ViewColumn, window as VsCodeWindow } from 'vscode';
 import { LanguageClient, LanguageClientOptions, ServerOptions, TransportKind } from 'vscode-languageclient';
 import { registerYamlSchemaSupport } from './yaml-support/yaml-schema';
 
+let previews: { [index: string]: WebviewPanel } = {};
+
 export function activate(context: ExtensionContext) {
 
 	// The server is implemented in node
@@ -91,12 +93,96 @@ export function activate(context: ExtensionContext) {
 	}
 
 	// Create the language client and start the client.
-	let disposable = new LanguageClient('cfnLint', 'CloudFormation linter Language Server', serverOptions, clientOptions).start();
+	let languageClient = new LanguageClient('cfnLint', 'CloudFormation linter Language Server', serverOptions, clientOptions);
+	let clientDisposable = languageClient.start();
+
+	languageClient.onReady().then(() => {
+		languageClient.onNotification('cfn/busy', () => {
+			window.showInformationMessage("Linter is already running. Please try again.");
+		});
+		languageClient.onNotification('cfn/previewIsAvailable', (uri) => {
+			reloadSidePreview(uri, languageClient);
+		});
+		languageClient.onNotification('cfn/isPreviewable', (value) => {
+			commands.executeCommand('setContext', 'isPreviewable', value);
+		});
+		languageClient.onNotification('cfn/fileclosed', (uri) => {
+			// if the user closed the template itself, we close the preview
+			if (previews[uri]) {
+				previews[uri].dispose();
+			}
+		});
+
+		let previewDisposable = commands.registerCommand('extension.sidePreview', () => {
+
+			if (window.activeTextEditor.document) {
+				let uri = Uri.file(window.activeTextEditor.document.fileName).toString();
+
+				languageClient.sendNotification('cfn/requestPreview', uri);
+			}
+
+		});
+
+		context.subscriptions.push(previewDisposable);
+	});
 
 	// Push the disposable to the context's subscriptions so that the
 	// client can be deactivated on extension deactivation
-	context.subscriptions.push(disposable);
+	context.subscriptions.push(clientDisposable);
+}
+
+function reloadSidePreview(file:string, languageClient:LanguageClient) {
+	let uri = Uri.parse(file);
+	let stringifiedUri = uri.toString();
+	let dotFile = uri.fsPath + ".dot";
+
+	if (!fs.existsSync(dotFile)) {
+		window.showErrorMessage("Error previewing graph. Please run `pip3 install cfn-lint pydot --upgrade`");
+		return;
+	}
+	let content = fs.readFileSync(dotFile, 'utf8');
+
+	if (!previews[stringifiedUri]) {
+		previews[stringifiedUri] = VsCodeWindow.createWebviewPanel(
+			'cfnLintPreview', // Identifies the type of the webview. Used internally
+			'Template: ' + dotFile.slice(0,-4), // Title of the panel displayed to the user
+			ViewColumn.Two, // Editor column to show the new webview panel in.
+			{
+				enableScripts: true,
+			}
+		);
+		previews[stringifiedUri].onDidDispose(() => {
+			// if the user closed the preview
+			delete previews[stringifiedUri];
+			fs.unlinkSync(dotFile);
+			languageClient.sendNotification('cfn/previewClosed', stringifiedUri);
+		});
+	}
+
+	const panel = previews[stringifiedUri];
+	panel.webview.html = getPreviewContent(content);
+}
 
+function getPreviewContent(content: String) : string {
+
+	let multilineString = "`" + content + "`";
+	// FIXME is there a better way of converting from dot to svg that is not using cdn urls?
+	return `
+	<!DOCTYPE html>
+	<body>
+		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/d3.min.js" integrity="sha256-Xb6SSzhH3wEPC4Vy3W70Lqh9Y3Du/3KxPqI2JHQSpTw=" crossorigin="anonymous"></script>
+		<script src="https://cdn.jsdelivr.net/npm/@hpcc-js/[email protected]/dist/index.min.js" integrity="sha256-GQQPKRntjhRqIwXvSCfytweTuDgJQ7hnK3RGsln9HWc=" crossorigin="anonymous"></script>
+		<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/d3-graphviz.min.js" integrity="sha256-WRJh26uDo3BP+SjibjTwXI66JLkDFXmreIGpKm0xHV8=" crossorigin="anonymous"></script>
+		<div id="graph" style="text-align: center;"></div>
+		<script>
+			d3.select("#graph")
+			.graphviz()
+			.width(screen.width)
+			.height(screen.height)
+			.renderDot(${multilineString});
+		</script>
+	</body>
+`;
 }
 
 export async function yamlLangaugeServerValidation(): Promise<void> {

client/src/test/suite/cfnlint.test.ts

@@ -1,7 +1,8 @@
 
 import * as vscode from 'vscode';
 import * as assert from 'assert';
-import { getDocUri, activate } from './helper';
+import * as fs from 'fs';
+import { getDocUri, activate, activateAndPreview, getDocPath } from './helper';
 
 suite('Should have failures with a bad template', () => {
 	const docUri = getDocUri('bad.yaml');
@@ -78,7 +79,7 @@ suite('Should have failures with a bad template', () => {
 	});
 });
 
-suite('Should not have failures on a goodtemplate', () => {
+suite('Should not have failures on a good template', () => {
 	const docUri = getDocUri('good.yaml');
 
 	test('Diagnose good template', async () => {
@@ -136,6 +137,26 @@ suite('Should have failures even with a space in the filename', () => {
 	});
 });
 
+suite('Previews should work', () => {
+	const docUri = 'preview.yaml';
+	const dotUri = 'preview.yaml.dot';
+
+	test('Does NOT create .dot file if a preview was not requested', async () => {
+		await activate(getDocUri(docUri));
+
+		assert.ok(! fs.existsSync(getDocPath(dotUri)));
+	});
+
+	test('Does create .dot file if a preview was requested', async () => {
+		await activateAndPreview(getDocUri(docUri));
+
+		assert.ok(fs.existsSync(getDocPath(dotUri)));
+
+		// cleanup
+		fs.unlinkSync(getDocPath(dotUri));
+	});
+});
+
 function toRange(sLine: number, sChar: number, eLine: number, eChar: number) {
 	const start = new vscode.Position(sLine, sChar);
 	const end = new vscode.Position(eLine, eChar);

client/src/test/suite/fixtures/preview.yaml

@@ -0,0 +1,7 @@
+Resources:
+  bucket:
+    Type: AWS::S3::Bucket
+  bucket2:
+    Type: AWS::S3::Bucket
+    DependsOn:
+      - bucket

client/src/test/suite/helper.ts

@@ -28,6 +28,14 @@ export async function activate(docUri: vscode.Uri) {
 	}
 }
 
+export async function activateAndPreview(docUri: vscode.Uri) {
+	await activate(docUri);
+
+	await vscode.commands.executeCommand('extension.sidePreview');
+
+	await sleep(4000); // Wait for preview to become available
+}
+
 async function sleep(ms: number) {
 	return new Promise(resolve => setTimeout(resolve, ms));
 }

images/features.png

@@ -49,7 +49,8 @@
     "main": "./client/out/extension",
     "activationEvents": [
         "onLanguage:yaml",
-        "onLanguage:json"
+        "onLanguage:json",
+        "onCommand:extension.sidePreview"
     ],
     "extensionDependencies": [
         "redhat.vscode-yaml"
@@ -75,6 +76,25 @@
         "typescript": "^3.6.5"
     },
     "contributes": {
+        "commands": [
+            {
+                "command": "extension.sidePreview",
+                "title": "Preview CloudFormation template as graph",
+                "icon": {
+                    "dark": "./resources/open-preview-dark.svg",
+                    "light": "./resources/open-preview-light.svg"
+                }
+            }
+        ],
+        "menus": {
+            "editor/title": [
+                {
+                    "command": "extension.sidePreview",
+                    "group": "navigation",
+                    "when": "editorLangId =~ /(json|yaml)/ && isPreviewable"
+                }
+            ]
+        },
         "configuration": {
             "type": "object",
             "title": "CloudFormation Linter configuration",