diff --git a/samples/sqlservices/images/compare-inverse.svg b/samples/sqlservices/images/compare-inverse.svg
new file mode 100644
index 0000000000..3cae2ff14b
--- /dev/null
+++ b/samples/sqlservices/images/compare-inverse.svg
@@ -0,0 +1,10 @@
+
diff --git a/samples/sqlservices/images/compare.svg b/samples/sqlservices/images/compare.svg
new file mode 100644
index 0000000000..7ad2cff30d
--- /dev/null
+++ b/samples/sqlservices/images/compare.svg
@@ -0,0 +1,10 @@
+
diff --git a/samples/sqlservices/images/default.svg b/samples/sqlservices/images/default.svg
new file mode 100644
index 0000000000..3a5fe76c0e
--- /dev/null
+++ b/samples/sqlservices/images/default.svg
@@ -0,0 +1,8 @@
+
diff --git a/samples/sqlservices/images/group.svg b/samples/sqlservices/images/group.svg
new file mode 100644
index 0000000000..1ecbcd5fbc
--- /dev/null
+++ b/samples/sqlservices/images/group.svg
@@ -0,0 +1,10 @@
+
diff --git a/samples/sqlservices/images/group_inverse.svg b/samples/sqlservices/images/group_inverse.svg
new file mode 100644
index 0000000000..db3d7f4a10
--- /dev/null
+++ b/samples/sqlservices/images/group_inverse.svg
@@ -0,0 +1,10 @@
+
diff --git a/samples/sqlservices/images/home.svg b/samples/sqlservices/images/home.svg
new file mode 100644
index 0000000000..ffdfb8a232
--- /dev/null
+++ b/samples/sqlservices/images/home.svg
@@ -0,0 +1,18 @@
+
diff --git a/samples/sqlservices/images/user.svg b/samples/sqlservices/images/user.svg
new file mode 100644
index 0000000000..68573d6688
--- /dev/null
+++ b/samples/sqlservices/images/user.svg
@@ -0,0 +1,10 @@
+
diff --git a/samples/sqlservices/images/user_inverse.svg b/samples/sqlservices/images/user_inverse.svg
new file mode 100644
index 0000000000..9a2aaa77e8
--- /dev/null
+++ b/samples/sqlservices/images/user_inverse.svg
@@ -0,0 +1,10 @@
+
diff --git a/samples/sqlservices/package.json b/samples/sqlservices/package.json
index 24c58d7f7f..d3aa108c77 100644
--- a/samples/sqlservices/package.json
+++ b/samples/sqlservices/package.json
@@ -1,116 +1,120 @@
{
- "name": "sqlservices",
- "displayName": "sqlservices",
- "description": "Lists SQL Server service status in the management dashboard for a server",
- "version": "0.0.1",
- "publisher": "demo",
- "engines": {
- "vscode": "^1.26.0",
- "azdata": "*"
- },
- "categories": [
- "Other"
+ "name": "sqlservices",
+ "displayName": "sqlservices",
+ "description": "Lists SQL Server service status in the management dashboard for a server",
+ "version": "0.0.1",
+ "publisher": "demo",
+ "engines": {
+ "vscode": "^1.26.0",
+ "azdata": "*"
+ },
+ "categories": [
+ "Other"
+ ],
+ "activationEvents": [
+ "*"
+ ],
+ "main": "./out/src/extension",
+ "contributes": {
+ "commands": [
+ {
+ "command": "sqlservices.openDialog",
+ "title": "sqlservices.openDialog"
+ },
+ {
+ "command": "sqlservices.openConnectionDialog",
+ "title": "sqlservices.openConnectionDialog"
+ },
+ {
+ "command": "sqlservices.openEditor",
+ "title": "sqlservices.openEditor"
+ },
+ {
+ "command": "sqlservices.openEditorWithWebView",
+ "title": "sqlservices.openEditorWithWebView"
+ },
+ {
+ "command": "sqlservices.openEditorWithWebView2",
+ "title": "sqlservices.openEditorWithWebView2"
+ },
+ {
+ "command": "sqlservices.openWizard",
+ "title": "sqlservices.openWizard"
+ },
+ {
+ "command": "sqlservices.openModelViewDashboard",
+ "title": "sqlservices.openModelViewDashboard"
+ }
],
- "activationEvents": [
- "*"
- ],
- "main": "./out/src/extension",
- "contributes": {
- "commands": [
+ "dashboard.tabs": [
+ {
+ "id": "sqlservices.tab",
+ "title": "sqlservices",
+ "icon": {
+ "light": "./out/src/media/insights.svg",
+ "dark": "./out/src/media/insights_inverse.svg"
+ },
+ "description": "Shows available services running in the SQL Server instance",
+ "container": {
+ "nav-section": [
{
- "command": "sqlservices.openDialog",
- "title": "sqlservices.openDialog"
+ "id": "sqlservices",
+ "title": "Services",
+ "gridItemConfig": {
+ "sizex": 2,
+ "sizey": 1
+ },
+ "container": {
+ "modelview-container": null
+ }
},
{
- "command": "sqlservices.openConnectionDialog",
- "title": "sqlservices.openConnectionDialog"
- },
- {
- "command": "sqlservices.openEditor",
- "title": "sqlservices.openEditor"
- },
- {
- "command": "sqlservices.openEditorWithWebView",
- "title": "sqlservices.openEditorWithWebView"
- },
- {
- "command": "sqlservices.openEditorWithWebView2",
- "title": "sqlservices.openEditorWithWebView2"
- },
- {
- "command": "sqlservices.openWizard",
- "title": "sqlservices.openWizard"
+ "id": "splitPanel",
+ "title": "SplitPanel",
+ "gridItemConfig": {
+ "sizex": 2,
+ "sizey": 1
+ },
+ "container": {
+ "modelview-container": null
+ }
}
- ],
- "dashboard.tabs": [
- {
- "id": "sqlservices.tab",
- "title": "sqlservices",
- "icon": {
- "light": "./out/src/media/insights.svg",
- "dark": "./out/src/media/insights_inverse.svg"
- },
- "description": "Shows available services running in the SQL Server instance",
- "container": {
- "nav-section": [
- {
- "id": "sqlservices",
- "title": "Services",
- "gridItemConfig": {
- "sizex": 2,
- "sizey": 1
- },
- "container": {
- "modelview-container": null
- }
- },
- {
- "id": "splitPanel",
- "title": "SplitPanel",
- "gridItemConfig": {
- "sizex": 2,
- "sizey": 1
- },
- "container": {
- "modelview-container": null
- }
- }
- ]
- }
- }
- ]
- },
- "scripts": {
- "build": "gulp build",
- "compile": "gulp compile",
- "watch": "gulp watch",
- "typings": "gulp copytypings",
- "postinstall": "node ./node_modules/vscode/bin/install && node ./node_modules/azdata/bin/install && gulp copytypings"
- },
- "dependencies": {
- "fs-extra": "^5.0.0",
- "handlebars": "^4.5.3",
- "vscode-nls": "^4.0.0"
- },
- "devDependencies": {
- "@types/node": "^7.0.43",
- "azdata": "^1.0.0",
- "braces": "^2.3.2",
- "child-process-promise": "^2.2.1",
- "del": "^3.0.0",
- "gulp": "^4.0.0",
- "gulp-color": "0.0.1",
- "gulp-sourcemaps": "^2.6.5",
- "gulp-tslint": "^6.0.2",
- "gulp-typescript": "^3.2.4",
- "tslint": "^3.14.0",
- "typescript": "^2.6.1",
- "url-parse": "^1.4.4",
- "vsce": "^1.57.1",
- "vscode": "^1.1.30"
- },
- "repository": {
- "type": "git",
- "url": "https://github.com/Microsoft/azuredatastudio/tree/master/samples/sqlservices"
- }
+ ]
+ }
+ }
+ ]
+ },
+ "scripts": {
+ "build": "gulp build",
+ "compile": "gulp compile",
+ "watch": "gulp watch",
+ "typings": "gulp copytypings",
+ "postinstall": "node ./node_modules/vscode/bin/install && node ./node_modules/azdata/bin/install && gulp copytypings"
+ },
+ "dependencies": {
+ "fs-extra": "^5.0.0",
+ "handlebars": "^4.5.3",
+ "vscode-nls": "^4.0.0"
+ },
+ "devDependencies": {
+ "@types/node": "^7.0.43",
+ "azdata": "^1.0.0",
+ "braces": "^2.3.2",
+ "child-process-promise": "^2.2.1",
+ "del": "^3.0.0",
+ "gulp": "^4.0.0",
+ "gulp-color": "0.0.1",
+ "gulp-sourcemaps": "^2.6.5",
+ "gulp-tslint": "^6.0.2",
+ "gulp-typescript": "^3.2.4",
+ "tslint": "^3.14.0",
+ "typescript": "^2.6.1",
+ "url-parse": "^1.4.4",
+ "vsce": "^1.57.1",
+ "vscode": "^1.1.30"
+ },
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/Microsoft/azuredatastudio/tree/master/samples/sqlservices"
+ }
}
diff --git a/samples/sqlservices/src/controllers/mainController.ts b/samples/sqlservices/src/controllers/mainController.ts
index 0cc15e2962..65bf42d0ae 100644
--- a/samples/sqlservices/src/controllers/mainController.ts
+++ b/samples/sqlservices/src/controllers/mainController.ts
@@ -12,6 +12,7 @@ import SplitPropertiesPanel from './splitPropertiesPanel';
import * as fs from 'fs';
import * as path from 'path';
import { TreeNode, TreeDataProvider } from './treeDataProvider';
+import * as dashboard from './modelViewDashboard';
/**
* The main controller class that initializes the extension
@@ -72,6 +73,10 @@ export default class MainController implements vscode.Disposable {
this.openWizard();
});
+ vscode.commands.registerCommand('sqlservices.openModelViewDashboard', () => {
+ dashboard.openModelViewDashboard(this.context);
+ });
+
return Promise.resolve(true);
}
diff --git a/samples/sqlservices/src/controllers/modelViewDashboard.ts b/samples/sqlservices/src/controllers/modelViewDashboard.ts
new file mode 100644
index 0000000000..0b17bc1fe9
--- /dev/null
+++ b/samples/sqlservices/src/controllers/modelViewDashboard.ts
@@ -0,0 +1,90 @@
+/*---------------------------------------------------------------------------------------------
+ * Copyright (c) Microsoft Corporation. All rights reserved.
+ * Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as azdata from 'azdata';
+import * as vscode from 'vscode';
+
+export async function openModelViewDashboard(context: vscode.ExtensionContext): Promise {
+ const dashboard = azdata.window.createModelViewDashboard('Test Dashboard');
+ dashboard.registerTabs(async (view: azdata.ModelView) => {
+ // Tab with toolbar
+ const button = view.modelBuilder.button().withProperties({
+ label: 'Run',
+ iconPath: {
+ light: context.asAbsolutePath('images/compare.svg'),
+ dark: context.asAbsolutePath('images/compare-inverse.svg')
+ }
+ }).component();
+
+ button.onDidClick(() => {
+ vscode.window.showInformationMessage('Run button clicked');
+ });
+
+ const toolbar = view.modelBuilder.toolbarContainer().withItems([button]).withLayout({
+ orientation: azdata.Orientation.Horizontal
+ }).component();
+
+ const textComponent1 = view.modelBuilder.text().withProperties({ value: 'text 1' }).component();
+ const homeTab: azdata.DashboardTab = {
+ id: 'home',
+ toolbar: toolbar,
+ content: textComponent1,
+ title: 'Home',
+ icon: context.asAbsolutePath('images/home.svg') // icon can be the path of a svg file
+ };
+
+ // Tab with nested tabbed Panel
+ const textComponent2 = view.modelBuilder.text().withProperties({ value: 'text 2' }).component();
+ const textComponent3 = view.modelBuilder.text().withProperties({ value: 'text 3' }).component();
+
+ const nestedTab1 = {
+ title: 'Tab1',
+ content: textComponent2,
+ id: 'tab1',
+ icon: {
+ light: context.asAbsolutePath('images/user.svg'),
+ dark: context.asAbsolutePath('images/user_inverse.svg') // icon can also be theme aware
+ }
+ };
+
+ const nestedTab2 = {
+ title: 'Tab2',
+ content: textComponent3,
+ icon: {
+ light: context.asAbsolutePath('images/group.svg'),
+ dark: context.asAbsolutePath('images/group_inverse.svg')
+ },
+ id: 'tab2'
+ };
+
+ const tabbedPanel = view.modelBuilder.tabbedPanel().withTabs([
+ nestedTab1, nestedTab2
+ ]).withLayout({
+ orientation: azdata.TabOrientation.Horizontal,
+ showIcon: true
+ }).component();
+
+ const settingsTab: azdata.DashboardTab = {
+ id: 'settings',
+ content: tabbedPanel,
+ title: 'Settings',
+ icon: context.asAbsolutePath('images/default.svg')
+ };
+
+ // You can also add a tab group
+ const securityTabGroup: azdata.DashboardTabGroup = {
+ title: 'Security',
+ tabs: [
+ settingsTab
+ ]
+ };
+
+ return [
+ homeTab,
+ securityTabGroup
+ ];
+ });
+ dashboard.open();
+}