Merge pull request #96 from grafana/new-dashboard-snippet

New dashboard snippet

Author: K-Phoen

.gitignore

@@ -4,5 +4,5 @@ node_modules
 .idea
 dist
 *.vsix
-out
 .vscode-test
+out

package.json

@@ -15,7 +15,8 @@
   },
   "publisher": "Grafana",
   "categories": [
-    "Visualization"
+    "Visualization",
+    "Snippets"
   ],
   "keywords": [
     "Grafana",
@@ -24,7 +25,7 @@
   "activationEvents": [
     "onStartupFinished"
   ],
-  "main": "./out/extension.js",
+  "main": "./dist/extension.js",
   "contributes": {
     "customEditors": [
       {
@@ -40,14 +41,14 @@
     "commands": [
       {
         "command": "grafana-vscode.openUrl",
-        "title": "Edit in Grafana"
+        "title": "Grafana: Edit in Grafana"
       }
     ],
     "menus": {
       "commandPalette": [
         {
           "command": "grafana-vscode.openUrl",
-          "when": "false"
+          "when": "resourceExtname == .json || resourceExtname == .yaml || resourceExtname == .yml"
         }
       ],
       "explorer/context": [
@@ -57,6 +58,12 @@
         }
       ]
     },
+    "snippets": [
+      {
+        "language": "json",
+        "path": "./snippets.json"
+      }
+    ],
     "iconThemes": [
       {
         "id": "grafana",
@@ -105,10 +112,13 @@
     }
   },
   "scripts": {
-    "vscode:prepublish": "yarn run compile",
-    "compile": "tsc -p ./",
-    "watch": "tsc -watch -p ./",
-    "pretest": "yarn run compile && yarn run lint",
+    "vscode:prepublish": "yarn run package",
+    "compile": "webpack",
+    "watch": "webpack --watch",
+    "package": "webpack --mode production --devtool hidden-source-map",
+    "compile-tests": "tsc -p . --outDir out",
+    "watch-tests": "tsc -p . -w --outDir out",
+    "pretest": "yarn run compile-tests && yarn run compile && yarn run lint",
     "lint": "eslint src --ext ts",
     "test": "node ./out/test/runTest.js"
   },
@@ -129,7 +139,10 @@
     "glob": "^8.1.0",
     "mocha": "^10.2.0",
     "prettier": "3.0.2",
-    "typescript": "^4.9.5"
+    "ts-loader": "^9.4.2",
+    "typescript": "^4.9.5",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1"
   },
   "dependencies": {
     "cors": "^2.8.5",

snippets.json

@@ -0,0 +1,51 @@
+{
+	"New Grafana dashboard": {
+		"prefix": [
+			"grafana_dashboard",
+			"dashboard"
+		],
+		"description": "Create a new Grafana dashboard",
+		"isFileTemplate": true,
+		"body": [
+			"{",
+			"  \"title\": \"${1:New dashboard title}\",",
+			"  \"uid\": \"${2:new-dashboard-uid}\",",
+			"  \"annotations\": {",
+			"    \"list\": [",
+			"      {",
+			"        \"builtIn\": 1,",
+			"        \"datasource\": {",
+			"          \"type\": \"grafana\",",
+			"          \"uid\": \"-- Grafana --\"",
+			"        },",
+			"        \"enable\": true,",
+			"        \"hide\": true,",
+			"        \"iconColor\": \"rgba(0, 211, 255, 1)\",",
+			"        \"name\": \"Annotations & Alerts\",",
+			"        \"type\": \"dashboard\"",
+			"      }",
+			"    ]",
+			"  },",
+			"  \"editable\": true,",
+			"  \"fiscalYearStartMonth\": 0,",
+			"  \"graphTooltip\": 0,",
+			"  \"links\": [],",
+			"  \"panels\": [],",
+			"  \"preload\": false,",
+			"  \"schemaVersion\": 39,",
+			"  \"tags\": [],",
+			"  \"templating\": {",
+			"    \"list\": []",
+			"  },",
+			"  \"time\": {",
+			"    \"from\": \"now-6h\",",
+			"    \"to\": \"now\"",
+			"  },",
+			"  \"timepicker\": {},",
+			"  \"timezone\": \"browser\",",
+			"  \"version\": 0,",
+			"  \"weekStart\": \"\"",
+			"}"
+		]
+	}
+}

src/extension.ts

@@ -18,11 +18,21 @@ export async function activate(ctx: vscode.ExtensionContext) {
   ctx.subscriptions.push(
     vscode.commands.registerCommand(
       "grafana-vscode.openUrl",
-      (uri: vscode.Uri) => {
+      (uri?: vscode.Uri) => {
         sendTelemetry(ctx);
+        
+        // This command can be invoked from a contextual menu, in which case uri
+        // has a value.
+        // It can also be invoked from the command palette, in which case we try to find
+        // the active document.
+        let actualUri = uri || vscode.window.activeTextEditor?.document.uri;
+        if (!actualUri) {
+          return;
+        }
+
         vscode.commands.executeCommand(
           "vscode.openWith",
-          uri,
+          actualUri,
           GrafanaEditorProvider.viewType,
         );
       }),

tsconfig.json

@@ -6,7 +6,6 @@
     "lib": ["ES2021"],
     "sourceMap": true,
     "rootDir": "src",
-    "outDir": "out",
     "strict": true /* enable all strict type-checking options */
     /* Additional Checks */
     // "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */

webpack.config.js

@@ -0,0 +1,48 @@
+//@ts-check
+
+"use strict";
+
+const path = require("path");
+
+//@ts-check
+/** @typedef {import('webpack').Configuration} WebpackConfig **/
+
+/** @type WebpackConfig */
+const extensionConfig = {
+  target: "node", // VS Code extensions run in a Node.js-context 📖 -> https://webpack.js.org/configuration/node/
+  mode: "none", // this leaves the source code as close as possible to the original (when packaging we set this to 'production')
+
+  entry: "./src/extension.ts", // the entry point of this extension, 📖 -> https://webpack.js.org/configuration/entry-context/
+  output: {
+    // the bundle is stored in the 'dist' folder (check package.json), 📖 -> https://webpack.js.org/configuration/output/
+    path: path.resolve(__dirname, "dist"),
+    filename: "extension.js",
+    libraryTarget: "commonjs2",
+  },
+  externals: {
+    vscode: "commonjs vscode", // the vscode-module is created on-the-fly and must be excluded. Add other modules that cannot be webpack'ed, 📖 -> https://webpack.js.org/configuration/externals/
+    // modules added here also need to be added in the .vscodeignore file
+  },
+  resolve: {
+    // support reading TypeScript and JavaScript files, 📖 -> https://github.com/TypeStrong/ts-loader
+    extensions: [".ts", ".js"],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.ts$/,
+        exclude: /node_modules/,
+        use: [
+          {
+            loader: "ts-loader",
+          },
+        ],
+      },
+    ],
+  },
+  devtool: "nosources-source-map",
+  infrastructureLogging: {
+    level: "log", // enables logging required for problem matchers
+  },
+};
+module.exports = [extensionConfig];