Initial Profiler extension scaffolding (#1451)

* Copy agent to profiler extension

* A few mote edits

CHANGELOG.md

@@ -1,5 +1,20 @@
 # Change Log
 
+## Version 0.29.3
+* Release date: May 7, 2018
+* Release status: Public Preview
+
+## What's new in this version
+The May release is focused on stabilization and bug fixes leading up to the Build conference.  This build contains the following highlights.
+
+* Announcing **Redgate SQL Search** extension available in Extension Manager
+* Community Localization available for 10 languages: **German, Spanish, French, Italian, Japanese, Korean, Portuguese, Russian, Simplified Chinese and Traditional Chinese!**
+* **GDPR-compliant** build has reduced telemetry collection, improved [opt-out](https://github.com/Microsoft/sqlopsstudio/wiki/How-to-Disable-Telemetry-Reporting) experience and in-product links to [Privacy Statement](https://privacy.microsoft.com/en-us/privacystatement)
+* Extension Manager has improved Marketplace experience to easily discover community extensions
+* SQL Agent extension Jobs and Job History view improvement
+* Updates for **whoisactive** and **Server Reports** extensions
+* Continue to fix GitHub issues
+
 ## Version 0.28.6
 * Release date: April 25, 2018
 * Release status: Public Preview

README.md

@@ -4,16 +4,16 @@
 
 SQL Operations Studio is a data management tool that enables you to work with SQL Server, Azure SQL DB and SQL DW from Windows, macOS and Linux.
 
-**Download SQL Operations Studio March Public Preview**
+**Download SQL Operations Studio May Public Preview**
 
 Platform | Link
 -- | --
-Windows Setup Installer | https://go.microsoft.com/fwlink/?linkid=872717
-Windows ZIP | https://go.microsoft.com/fwlink/?linkid=872718
-macOS ZIP | https://go.microsoft.com/fwlink/?linkid=872719
-Linux TAR.GZ | https://go.microsoft.com/fwlink/?linkid=872720
-Linux DEB | https://go.microsoft.com/fwlink/?linkid=872722
-Linux RPM | https://go.microsoft.com/fwlink/?linkid=872721
+Windows Setup Installer | https://go.microsoft.com/fwlink/?linkid=873386
+Windows ZIP | https://go.microsoft.com/fwlink/?linkid=873387
+macOS ZIP | https://go.microsoft.com/fwlink/?linkid=873388
+Linux TAR.GZ | https://go.microsoft.com/fwlink/?linkid=873389
+Linux RPM | https://go.microsoft.com/fwlink/?linkid=873390
+Linux DEB | https://go.microsoft.com/fwlink/?linkid=873391
 
 Go to our [download page](https://aka.ms/sqlopsstudio) for more specific instructions.
 
@@ -74,7 +74,18 @@ We would like to thank all our users who raised issues, and in particular the fo
 * SebastianPfliegel `Remove sqlExtensionHelp (#312)`
 * olljanat for `Implemented npm version check (#314)`
 * Adam Mechanic for helping with the `whoisactive` extension
-* All community localization contributors *(will get list of individuals next month)*
+* All community localization contributors
+  * French: Adrien Clerbois, ANAS BELABBES, Antoine Griffard, Arian Papillon, Eric Macarez, Eric Van Thorre, Jérémy LANDON, Matthias GROSPERRIN, Maxime COQUEREL, Olivier Guinart, thierry DEMAN-BARCELÒ, Thomas Potier
+  * Italian: Aldo Donetti, Alessandro Alpi, Andrea Dottor, Bruni Luca, Gianluca Hotz, Luca Nardi, Luigi Bruno, Marco Dal Pino, Mirco Vanini, Pasquale Ceglie, Riccardo Cappello, Sergio Govoni, Stefano Demiliani
+  * German: Anna Henke-Gunvaldson, Ben Weissman, David Ullmer, J.M. ., Kai Modo, Konstantin Staschill, Kostja Klein, Lennart Trunk, Markus Ehrenmüller-Jensen, Mascha Kroenlein, Matthias Knoll, Mourad Louha, Thomas Hütter, Wolfgang Straßer
+  * Spanish: Alberto Poblacion, Andy Gonzalez, Carlos Mendible, Christian Araujo, Daniel D, Eickhel Mendoza, Ernesto Cardenas, Ivan Toledo Ivanovic, Fran Diaz, JESUS GIL, Jorge Serrano Pérez, José Saturnino Pimentel Juárez, Mauricio Hidalgo, Pablo Iglesias, Rikhardo Estrada Rdez, Thierry DEMAN, YOLANDA CUESTA ALTIERI
+  * Japanese: Fujio Kojima, Kazushi KAMEGAWA, Masayoshi Yamada, Masayuki Ozawa , Seiji Momoto, Takashi Kanai, Takayoshi Tanaka, Yoshihisa Ozaki, 庄垣内治
+  * Chinese (simplified): DAN YE, Joel Yang, Lynne Dong, Ryan（Yu） Zhang, Sheng Jiang, Wei Zhang, Zhiliang Xu
+  * Chinese  (Traditional): Bruce Chen, Chiayi Yen, Kevin Yang,  Winnie Lin, 保哥 Will,  謝政廷
+  * Korean: Do-Kyun Kim, Evelyn Kim, Helen Jung, Hong Jmee, jeongwoo choi, Jun Hyoung Lee, Jungsun Kim정선, Justin Yoo, Kavrith mucha, Kiwoong Youm, MinGyu Ju,  MVP_JUNO BEA, Sejun Kim, SOONMAN KWON, sung man ko, Yeongrak Choi, younggun kim, Youngjae Kim, 소영 이
+  * Russian: Andrey Veselov, Anton Fontanov, Anton Savin, Elena Ostrovskaia, Igor Babichev, Maxim Zelensky, Rodion Fedechkin, Tasha T, Vladimir Zyryanov
+  * Portuguese Brazil: Daniel de Sousa, Diogo Duarte, Douglas Correa, Douglas Eccker, José Emanuel Mendes, Marcelo Fernandes, Marcondes Alexandre, Roberto Fonseca, Rodrigo Crespi   
+
 
 And of course we'd like to thank the authors of all upstream dependencies.  Please see a full list in the [ThirdPartyNotices.txt](https://raw.githubusercontent.com/Microsoft/sqlopsstudio/master/ThirdPartyNotices.txt)
 

build/gulpfile.vscode.js

@@ -77,7 +77,8 @@ const vsce = require('vsce');
 const sqlBuiltInExtensions = [
 	// Add SQL built-in extensions here.
 	// the extension will be excluded from SQLOps package and will have separate vsix packages
-	'agent'
+	'agent',
+	'profiler'
 ];
 
 const vscodeEntryPoints = _.flatten([

build/lib/i18n.js

@@ -37,9 +37,8 @@ exports.defaultLanguages = [
 // languages requested by the community to non-stable builds
 exports.extraLanguages = [
     { id: 'pt-br', folderName: 'ptb' },
-    // {{SQL CARBON EDIT}}
-    // { id: 'hu', folderName: 'hun' },
-    // { id: 'tr', folderName: 'trk' }
+    { id: 'hu', folderName: 'hun' },
+    { id: 'tr', folderName: 'trk' }
 ];
 // non built-in extensions also that are transifex and need to be part of the language packs
 var externalExtensionsWithTranslations = {

build/npm/postinstall.js

@@ -35,7 +35,8 @@ const extensions = [
 	'merge-conflict',
 	'insights-default',
 	'account-provider-azure',
-	'agent'
+	'agent',
+	'profiler'
 ];
 
 extensions.forEach(extension => yarnInstall(`extensions/${extension}`));

extensions/agent/README.md

@@ -1,13 +1,15 @@
 # Microsoft SQL Server Agent for SQL Operations Studio
 
 Welcome to Microsoft SQL Server Agent for SQL Operations Studio! An extension for managing and troubleshooting
-SQL Server Agent jobs and configuration.  The current is a very early release of this extension that provides
+SQL Server Agent jobs and configuration.  The current is an early release of this extension that provides
 basic functionality for the following.
 
 * List SQL Server Agent Jobs configured on a SQL Server
 * View Job History with job execution results
 * Basic Job Control to start and stop jobs
 
+<img src="https://user-images.githubusercontent.com/599935/39215738-d3a52580-47cd-11e8-9788-b290048c270e.png" alt="SQL Agent" style="width:800px;"/>
+
 ## Code of Conduct
 
 This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.

extensions/agent/package.json

@@ -2,7 +2,7 @@
   "name": "agent",
   "displayName": "SQL Server Agent",
   "description": "Manage and troubleshoot SQL Server Agent jobs (early preview)",
-  "version": "0.28.1",
+  "version": "0.29.0",
   "publisher": "Microsoft",
   "preview": true,
   "license": "https://raw.githubusercontent.com/Microsoft/sqlopsstudio/master/LICENSE.txt",
@@ -22,6 +22,9 @@
     "type": "git",
     "url": "https://github.com/Microsoft/sqlopsstudio.git"
   },
+  "extensionDependencies": [
+    "Microsoft.mssql"
+  ],
   "contributes": {
     "outputChannels": [
       "sqlagent"

extensions/mssql/package.json

@@ -658,7 +658,7 @@
     }
   },
   "dependencies": {
-    "dataprotocol-client": "github:Microsoft/sqlops-dataprotocolclient#0.1.5",
+    "dataprotocol-client": "github:Microsoft/sqlops-dataprotocolclient#0.1.7",
     "opener": "^1.4.3",
     "service-downloader": "github:anthonydresser/service-downloader#0.1.2",
     "vscode-extension-telemetry": "^0.0.15"

extensions/mssql/src/config.json

@@ -1,6 +1,6 @@
 {
 	"downloadUrl": "https://github.com/Microsoft/sqltoolsservice/releases/download/v{#version#}/microsoft.sqltools.servicelayer-{#fileName#}",
-	"version": "1.4.0-alpha.30",
+	"version": "1.4.0-alpha.35",
 	"downloadFileNames": {
 		"Windows_86": "win-x86-netcoreapp2.1.zip",
 		"Windows_64": "win-x64-netcoreapp2.1.zip",

extensions/mssql/yarn.lock

@@ -49,9 +49,9 @@ core-util-is@~1.0.0:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
 
-"dataprotocol-client@github:Microsoft/sqlops-dataprotocolclient#0.1.5":
-  version "0.1.5"
-  resolved "https://codeload.github.com/Microsoft/sqlops-dataprotocolclient/tar.gz/21b0bacfc759689a6c280408528c6029a21b1abf"
+"dataprotocol-client@github:Microsoft/sqlops-dataprotocolclient#0.1.7":
+  version "0.1.7"
+  resolved "https://codeload.github.com/Microsoft/sqlops-dataprotocolclient/tar.gz/d50285b03d0d5073c086362c5c96afb279320607"
   dependencies:
     vscode-languageclient "3.5.0"
 

extensions/profiler/.vscodeignore

@@ -0,0 +1,2 @@
+client/src/**
+client/tsconfig.json

extensions/profiler/README.md

@@ -0,0 +1,25 @@
+# SQL Server Profiler for SQL Operations Studio
+
+Welcome to the SQL Server Profiler for SQL Operations Studio!  The SQL Server Profiler extension provides a simple SQL Server tracing solution similar to SSMS Profiler except built using XEvents.  SSMS Profiler is very easy to use and has good default values for the most common tracing configurations.  The UX is optimized for browsing through events and viewing the associated T-SQL text.  The SQL Server Profiler for SQL Operations Studio also assumes good default values for collecting T-SQL execution activities with an easy to use UX.
+
+Common SQL Profiler use-cases taken from https://docs.microsoft.com/en-us/sql/tools/sql-server-profiler/sql-server-profiler.
+
+- Stepping through problem queries to find the cause of the problem.
+- Finding and diagnosing slow-running queries.
+- Capturing the series of Transact-SQL statements that lead to a problem.
+- Monitoring the performance of SQL Server to tune workloads.
+- Correlating performance counters to diagnose problems.
+
+## Code of Conduct
+
+This project has adopted the [Microsoft Open Source Code of Conduct](https://opensource.microsoft.com/codeofconduct/). For more information see the [Code of Conduct FAQ](https://opensource.microsoft.com/codeofconduct/faq/) or contact [opencode@microsoft.com](mailto:opencode@microsoft.com) with any additional questions or comments.
+
+## Privacy Statement
+
+The [Microsoft Enterprise and Developer Privacy Statement](https://privacy.microsoft.com/en-us/privacystatement) describes the privacy statement of this software.
+
+## License
+
+Copyright (c) Microsoft Corporation. All rights reserved.
+
+Licensed under the [Source EULA](https://raw.githubusercontent.com/Microsoft/sqlopsstudio/master/LICENSE.txt).

extensions/profiler/client/src/apiWrapper.ts

@@ -0,0 +1,63 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+'use strict';
+import * as vscode from 'vscode';
+import * as data from 'sqlops';
+
+/**
+ * Wrapper class to act as a facade over VSCode and Data APIs and allow us to test / mock callbacks into
+ * this API from our code
+ *
+ * @export
+ * @class ApiWrapper
+ */
+export class ApiWrapper {
+    // Data APIs
+
+    public registerWebviewProvider(widgetId: string, handler: (webview: data.DashboardWebview) => void): void {
+        return data.dashboard.registerWebviewProvider(widgetId, handler);
+    }
+
+
+    public registerControlHostProvider(widgetId: string, handler: (webview: data.DashboardWebview) => void): void {
+        return data.dashboard.registerWebviewProvider(widgetId, handler);
+    }
+
+    /**
+     * Get the configuration for a extensionName
+     * @param extensionName The string name of the extension to get the configuration for
+     * @param resource The optional URI, as a URI object or a string, to use to get resource-scoped configurations
+     */
+    public getConfiguration(extensionName: string, resource?: vscode.Uri | string): vscode.WorkspaceConfiguration {
+        if (typeof resource === 'string') {
+            try {
+                resource = this.parseUri(resource);
+            } catch (e) {
+                resource = undefined;
+            }
+        }
+        return vscode.workspace.getConfiguration(extensionName, resource as vscode.Uri);
+    }
+
+    /**
+     * Parse uri
+     */
+    public parseUri(uri: string): vscode.Uri {
+        return vscode.Uri.parse(uri);
+    }
+
+    public showOpenDialog(options: vscode.OpenDialogOptions): Thenable<vscode.Uri[] | undefined> {
+        return vscode.window.showOpenDialog(options);
+    }
+
+    public showErrorMessage(message: string, ...items: string[]): Thenable<string | undefined> {
+        return vscode.window.showErrorMessage(message, ...items);
+    }
+
+    public get workspaceRootPath(): string {
+        return vscode.workspace.rootPath;
+    }
+}

extensions/profiler/client/src/main.ts

@@ -0,0 +1,23 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+'use strict';
+
+import vscode = require('vscode');
+import { MainController } from './mainController';
+import { ApiWrapper } from './apiWrapper';
+export let controller: MainController;
+
+export function activate(context: vscode.ExtensionContext) {
+	let apiWrapper = new ApiWrapper();
+	controller = new MainController(context, apiWrapper);
+	controller.activate();
+}
+
+// this method is called when your extension is deactivated
+export function deactivate(): void {
+	if (controller) {
+		controller.deactivate();
+	}
+}

extensions/profiler/client/src/mainController.ts

@@ -0,0 +1,32 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+'use strict';
+
+import * as vscode from 'vscode';
+import * as data from 'sqlops';
+import { ApiWrapper } from './apiWrapper';
+
+/**
+ * The main controller class that initializes the extension
+ */
+export class MainController  {
+    protected _apiWrapper: ApiWrapper;
+    protected _context: vscode.ExtensionContext;
+
+    // PUBLIC METHODS //////////////////////////////////////////////////////
+    public constructor(context: vscode.ExtensionContext, apiWrapper?: ApiWrapper) {
+        this._apiWrapper = apiWrapper || new ApiWrapper();
+        this._context = context;
+    }
+
+    /**
+     * Deactivates the extension
+     */
+    public deactivate(): void {
+    }
+
+    public activate(): void {
+    }
+}

extensions/profiler/client/src/typings/ref.d.ts

@@ -0,0 +1,8 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+/// <reference path='../../../../../src/vs/vscode.d.ts'/>
+/// <reference path='../../../../../src/sql/sqlops.d.ts'/>
+/// <reference types='@types/node'/>

extensions/profiler/client/tsconfig.json

@@ -0,0 +1,19 @@
+{
+    "compileOnSave": true,
+    "compilerOptions": {
+        "module": "commonjs",
+        "target": "es6",
+		"outDir": "./out",
+		"lib": [
+			"es6", "es2015.promise"
+		],
+        "sourceMap": true,
+        "emitDecoratorMetadata": true,
+        "experimentalDecorators": true,
+        "moduleResolution": "node",
+        "declaration": true
+    },
+    "exclude": [
+        "node_modules"
+    ]
+}

extensions/profiler/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "profiler",
+  "displayName": "SQL Server Profiler",
+  "description": "SQL Server Profiler for SQL Operations Studio",
+  "version": "0.30.0",
+  "publisher": "Microsoft",
+  "preview": true,
+  "license": "https://raw.githubusercontent.com/Microsoft/sqlopsstudio/master/LICENSE.txt",
+  "icon": "images/sqlserver.png",
+  "aiKey": "AIF-5574968e-856d-40d2-af67-c89a14e76412",
+  "engines": {
+    "vscode": "0.10.x"
+  },
+  "activationEvents": [
+    "*"
+  ],
+  "main": "./client/out/main",
+  "scripts": {
+    "compile": "gulp compile-extension:profiler-client"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Microsoft/sqlopsstudio.git"
+  },
+  "extensionDependencies": [
+    "Microsoft.mssql"
+  ],
+  "contributes": {
+
+      "commands": [
+      {
+        "command": "profiler.newProfiler",
+        "title": "New Profiler",
+        "category": "Profiler"
+      }
+    ],
+    "outputChannels": [
+      "sqlprofiler"
+    ]
+  },
+  "devDependencies": {
+    "vscode": "1.0.1"
+  }
+}

extensions/theme-carbon/themes/light_carbon.json

@@ -73,7 +73,7 @@
 		"panel.background": "#FFFFFE",
 		"panel.border": "#C8C8C8",
 		"panelTitle.activeForeground": "#212121",
-		"panelTitle.inactiveForeground": "#888888"
+		"panelTitle.inactiveForeground": "#757575"
 	},
 	"tokenColors": [
 		{

package.json

@@ -1,6 +1,6 @@
 {
   "name": "sqlops",
-  "version": "0.29.2",
+  "version": "0.30.2",
   "distro": "8c3e97e3425cc9814496472ab73e076de2ba99ee",
   "author": {
     "name": "Microsoft Corporation"
@@ -59,7 +59,7 @@
     "reflect-metadata": "^0.1.8",
     "rxjs": "5.4.0",
     "semver": "4.3.6",
-    "slickgrid": "github:anthonydresser/SlickGrid#2.3.16",
+    "slickgrid": "github:anthonydresser/SlickGrid#2.3.17",
     "spdlog": "0.6.0",
     "svg.js": "^2.2.5",
     "sudo-prompt": "^8.0.0",

samples/serverReports/README.md

@@ -38,6 +38,9 @@ See [Paul Randal's wait types library] for more information about each wait type
 We would like to thank all our users who raised issues, and in particular the following users who helped contribute fixes:
 *	flyfishingdba for Add square brackets for ms_foreachdb call (#1023)
 
+## What's new in Server Reports v1.2?
+* Created left nav bar and added 2 categories for insight widgets: monitor and performance
+
 ## What's new in Server Reports v1.1?
 * Fixed DB Space Usage where it threw an error when database names contain special characters
 * Changed DB Space Usage and DB Buffer Usage to show only top 10 data

samples/serverReports/package-lock.json

@@ -1,6 +1,6 @@
 {
     "name": "server-report",
-    "version": "0.1.0",
+    "version": "0.1.2",
     "lockfileVersion": 1,
     "requires": true,
     "dependencies": {

samples/serverReports/package.json

@@ -2,7 +2,7 @@
     "name": "server-report",
     "displayName": "Server Reports",
     "description": "Server Reports",
-    "version": "0.1.1",
+    "version": "0.1.2",
     "publisher": "Microsoft",
     "preview": true,
     "engines": {
@@ -30,7 +30,30 @@
                 "title": "Server Reports",
                 "description": "This extension shows useful reports for a server.",
                 "container": {
-                    "server-insights1": null
+                    "nav-section": [
+                        {
+                            "id": "server-reports-monitoring",
+                            "title": "Monitor",
+                            "icon": {
+                                "light": "./out/src/media/monitor.svg",
+                                "dark": "./out/src/media/monitor_inverse.svg"
+                            },
+                            "container": {
+                                "server-reports-monitoring-container": {}
+                            }
+                        },
+                        {
+                            "id": "server-reports-performance",
+                            "title": "Performance",
+                            "icon": {
+                                "light": "./out/src/media/performance.svg",
+                                "dark": "./out/src/media/performance_inverse.svg"
+                            },
+                            "container": {
+                                "server-reports-performance-container": {}
+                            }
+                        }
+                    ]
                 }
             }
         ],
@@ -122,7 +145,7 @@
         ],
         "dashboard.containers": [
             {
-                "id": "server-insights1",
+                "id": "server-reports-monitoring-container",
                 "container": {
                     "widgets-container": [
                         {
@@ -164,7 +187,14 @@
                             "widget": {
                                 "extension-backup-growth-trend": {}
                             }
+                        }
+                    ]
+                }
             },
+            {
+                "id": "server-reports-performance-container",
+                "container": {
+                    "widgets-container": [
                         {
                             "name": "Wait Counts by Paul Randal",
                             "gridItemConfig": {

samples/serverReports/src/media/monitor.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><title>usage</title><path d="M7,7H0A6.88,6.88,0,0,1,.25,5.14,7,7,0,0,1,5.14.25,6.92,6.92,0,0,1,7,0ZM6.75,8,1.88,12.87a6.91,6.91,0,0,1-1.4-2.26A7.33,7.33,0,0,1,0,8ZM6,1.08a6,6,0,0,0-1.77.6A6,6,0,0,0,1.68,4.23,6,6,0,0,0,1.08,6H6ZM1.08,9a6.63,6.63,0,0,0,.32,1.23A5.58,5.58,0,0,0,2,11.37L4.34,9ZM8,1l.89,0a8.52,8.52,0,0,1,.86.09,8.14,8.14,0,0,1,.84.18,6.66,6.66,0,0,1,.84.29,7.51,7.51,0,0,1,4.25,4.73,7.58,7.58,0,0,1,.06,4.18A7.51,7.51,0,0,1,15,12.29,7.49,7.49,0,0,1,12.29,15a7.5,7.5,0,0,1-1.79.75,7.63,7.63,0,0,1-4.87-.3A7.53,7.53,0,0,1,3.2,13.8l-.35-.35L8,8.29Zm.5,14a6.31,6.31,0,0,0,1.73-.23,6.66,6.66,0,0,0,1.55-.66,6.5,6.5,0,0,0,2.33-2.33,6.64,6.64,0,0,0,.66-1.55,6.47,6.47,0,0,0,0-3.36,6.69,6.69,0,0,0-.59-1.49,6.45,6.45,0,0,0-.93-1.29,6.63,6.63,0,0,0-1.21-1,6.49,6.49,0,0,0-1.44-.71A6.32,6.32,0,0,0,9,2v6.7L4.27,13.44a6.39,6.39,0,0,0,2,1.16A6.47,6.47,0,0,0,8.5,15Z"/></svg>

samples/serverReports/src/media/monitor_inverse.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#fff;}</style></defs><title>usage_inverse</title><path class="cls-1" d="M7,7H0A6.88,6.88,0,0,1,.25,5.14,7,7,0,0,1,5.14.25,6.92,6.92,0,0,1,7,0ZM6.75,8,1.88,12.87a6.91,6.91,0,0,1-1.4-2.26A7.33,7.33,0,0,1,0,8ZM6,1.08a6,6,0,0,0-1.77.6A6,6,0,0,0,1.68,4.23,6,6,0,0,0,1.08,6H6ZM1.08,9a6.63,6.63,0,0,0,.32,1.23A5.58,5.58,0,0,0,2,11.37L4.34,9ZM8,1l.89,0a8.52,8.52,0,0,1,.86.09,8.14,8.14,0,0,1,.84.18,6.66,6.66,0,0,1,.84.29,7.51,7.51,0,0,1,4.25,4.73,7.58,7.58,0,0,1,.06,4.18A7.51,7.51,0,0,1,15,12.29,7.49,7.49,0,0,1,12.29,15a7.5,7.5,0,0,1-1.79.75,7.63,7.63,0,0,1-4.87-.3A7.53,7.53,0,0,1,3.2,13.8l-.35-.35L8,8.29Zm.5,14a6.31,6.31,0,0,0,1.73-.23,6.66,6.66,0,0,0,1.55-.66,6.5,6.5,0,0,0,2.33-2.33,6.64,6.64,0,0,0,.66-1.55,6.47,6.47,0,0,0,0-3.36,6.69,6.69,0,0,0-.59-1.49,6.45,6.45,0,0,0-.93-1.29,6.63,6.63,0,0,0-1.21-1,6.49,6.49,0,0,0-1.44-.71A6.32,6.32,0,0,0,9,2v6.7L4.27,13.44a6.39,6.39,0,0,0,2,1.16A6.47,6.47,0,0,0,8.5,15Z"/></svg>

samples/serverReports/src/media/performance.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#101e23;}.cls-2{fill:#4bb8d1;}.cls-3{fill:#0c1011;}</style></defs><title>health</title><path class="cls-1" d="M12.58,1.51A6.36,6.36,0,0,0,8,3.9,6.32,6.32,0,0,0,3.41,1.51,3.81,3.81,0,0,0,0,5.35,5.7,5.7,0,0,0,.64,7.88h.72l0-.08A5.18,5.18,0,0,1,.64,5.39c.07-1.25.87-3.14,2.8-3.23h.12A5.81,5.81,0,0,1,7.73,4.63L8,5.06l.27-.43a5.72,5.72,0,0,1,4.28-2.47c1.93.09,2.73,2,2.8,3.23a5.15,5.15,0,0,1-.64,2.34l0,0a2.38,2.38,0,0,1-.34.68,19.45,19.45,0,0,1-6.57,6.06,11.11,11.11,0,0,1-1.25-.81c-.34-.25-.66-.52-1-.8h0a22.83,22.83,0,0,1-2.76-3H2a18.68,18.68,0,0,0,5.76,5.29h0l0,0h0c3.49-1.63,7-5.73,7.49-7.18V8A5.85,5.85,0,0,0,16,5.35,3.81,3.81,0,0,0,12.58,1.51Z"/><path class="cls-1" d="M1.41,8l-.1-.15h0Z"/><path class="cls-1" d="M7.79,15.22v0h0Z"/><path class="cls-1" d="M7.76,15.23h0v0Z"/><path class="cls-1" d="M14.72,7.73l0,0a.13.13,0,0,0,0,0Z"/><path class="cls-2" d="M12.62,8.7v.12a.48.48,0,0,1-.48.48H8.66l0,.07L7.38,12.65h0A.72.72,0,0,1,6,12.53V9.44H6V6.6L5,9.05H5a.56.56,0,0,1-.52.37H.92V8.36H4.13l0-.07L5.41,5h0a.72.72,0,0,1,1.42.12V8.22h0v2.84L7.77,8.6h0a.56.56,0,0,1,.52-.37h3.84A.48.48,0,0,1,12.62,8.7Z"/><path class="cls-3" d="M12.62,8.7v.12a.48.48,0,0,1-.48.48H8.66l0,.07L7.38,12.65h0A.72.72,0,0,1,6,12.53V9.44H6V6.6L5,9.05H5a.56.56,0,0,1-.52.37H.92V8.36H4.13l0-.07L5.41,5h0a.72.72,0,0,1,1.42.12V8.22h0v2.84L7.77,8.6h0a.56.56,0,0,1,.52-.37h3.84A.48.48,0,0,1,12.62,8.7Z"/></svg>

samples/serverReports/src/media/performance_inverse.svg

@@ -0,0 +1 @@
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><defs><style>.cls-1{fill:#fff;}.cls-2{fill:#101e23;}.cls-3{fill:#4bb8d1;}</style></defs><title>health_inverse</title><path class="cls-1" d="M12.58,1.51A6.36,6.36,0,0,0,8,3.9,6.32,6.32,0,0,0,3.41,1.51,3.81,3.81,0,0,0,0,5.35,5.7,5.7,0,0,0,.64,7.88h.72l0-.08A5.18,5.18,0,0,1,.64,5.39c.07-1.25.87-3.14,2.8-3.23h.12A5.81,5.81,0,0,1,7.73,4.63L8,5.06l.27-.43a5.72,5.72,0,0,1,4.28-2.47c1.93.09,2.73,2,2.8,3.23a5.15,5.15,0,0,1-.64,2.34l0,0a2.38,2.38,0,0,1-.34.68,19.45,19.45,0,0,1-6.57,6.06,11.11,11.11,0,0,1-1.25-.81c-.34-.25-.66-.52-1-.8h0a22.83,22.83,0,0,1-2.76-3H2a18.68,18.68,0,0,0,5.76,5.29h0l0,0h0c3.49-1.63,7-5.73,7.49-7.18V8A5.85,5.85,0,0,0,16,5.35,3.81,3.81,0,0,0,12.58,1.51Z"/><path class="cls-2" d="M1.41,8l-.1-.15h0Z"/><path class="cls-2" d="M7.79,15.22v0h0Z"/><path class="cls-2" d="M7.76,15.23h0v0Z"/><path class="cls-2" d="M14.72,7.73l0,0a.13.13,0,0,0,0,0Z"/><path class="cls-3" d="M12.62,8.7v.12a.48.48,0,0,1-.48.48H8.66l0,.07L7.38,12.65h0A.72.72,0,0,1,6,12.53V9.44H6V6.6L5,9.05H5a.56.56,0,0,1-.52.37H.92V8.36H4.13l0-.07L5.41,5h0a.72.72,0,0,1,1.42.12V8.22h0v2.84L7.77,8.6h0a.56.56,0,0,1,.52-.37h3.84A.48.48,0,0,1,12.62,8.7Z"/><path class="cls-1" d="M12.62,8.7v.12a.48.48,0,0,1-.48.48H8.66l0,.07L7.38,12.65h0A.72.72,0,0,1,6,12.53V9.44H6V6.6L5,9.05H5a.56.56,0,0,1-.52.37H.92V8.36H4.13l0-.07L5.41,5h0a.72.72,0,0,1,1.42.12V8.22h0v2.84L7.77,8.6h0a.56.56,0,0,1,.52-.37h3.84A.48.48,0,0,1,12.62,8.7Z"/></svg>

samples/sp_whoIsActive/README.md

@@ -6,6 +6,11 @@ Welcome to **sp_whoisactive** for SQL Operations Studio! Sp_whoisactive is a pro
 
 <img src="https://github.com/Microsoft/sqlopsstudio/raw/master/samples/sp_whoIsActive/images/insights_section.png" alt="insights" style="width:480px;"/>
 
+Details:
+
+<img src="https://github.com/Microsoft/sqlopsstudio/raw/master/samples/sp_whoIsActive/images/insights_details_section.png" alt="insights" style="width:240px;"/>
+
+
 ## Why use sp_whoisactive?
 Here are some quick facts on Who is Active from [Adam Machanic’s blog]:
 
@@ -15,9 +20,6 @@ Here are some quick facts on Who is Active from [Adam Machanic’s blog]:
   * Who is Active is **compatible with all versions of SQL Server after SQL Server 2005 RTM**. It does require that the host database (generally master) is not set for SQL Server 2000 compatibility mode
 
 ## Documentation: 
-
-<img src="https://github.com/Microsoft/sqlopsstudio/raw/master/samples/sp_whoIsActive/images/documentation_section.png" alt="documentation" style="width:480px;"/>
-
 If you haven't installed sp_whoisactive in your server, you can use the "Install sp_whoisactive" task to create the procedure. 
 
 See [sp_whoisactive Documentation] for more infomation.
@@ -34,3 +36,8 @@ See [sp_whoisactive extension project] in the SQL Operations Studio for the exte
 
 ## Contributions and "thank you"
 Special thank to Adam Machanic for partnering with us and make this sp_whoisactive extension possible.  
+
+## What's new in Server Reports v1.1?
+* Changed CPU usage, CPU delta, memory usage, memory delta to show only top 10 data
+* Added details option on each chart to display details of data entries
+* Improved "Get plans" and "Find leader of block" tasks. The tasks will open new editor, configure current dashboard connection, and run the query.

samples/sp_whoIsActive/package.json

@@ -78,10 +78,18 @@
                             "legendPosition": "none",
                             "labelFirstColumn": false,
                             "columnsAsLabels": true,
-                            "showTopNData": 5
+                            "showTopNData": 10
                         }
                     },
-                    "queryFile": "./out/src/sql/cpuUsage.sql"
+                    "queryFile": "./out/src/sql/cpuUsage.sql",
+                    "details": {
+                        "queryFile": "./out/src/sql/cpuUsage_details.sql",
+                        "label": {
+                            "column": "session_id",
+                            "state": []
+                        },
+                        "value": "CPU"
+                    }
                 }
             },
             {
@@ -94,10 +102,18 @@
                             "legendPosition": "none",
                             "labelFirstColumn": false,
                             "columnsAsLabels": true,
-                            "showTopNData": 5
+                            "showTopNData": 10
                         }
                     },
-                    "queryFile": "./out/src/sql/cpuDelta.sql"
+                    "queryFile": "./out/src/sql/cpuDelta.sql",
+                    "details": {
+                        "queryFile": "./out/src/sql/cpuDelta_details.sql",
+                        "label": {
+                            "column": "session_id",
+                            "state": []
+                        },
+                        "value": "CPU_delta"
+                    }
                 }
             },
             {
@@ -110,10 +126,18 @@
                             "legendPosition": "none",
                             "labelFirstColumn": false,
                             "columnsAsLabels": true,
-                            "showTopNData": 5
+                            "showTopNData": 10
                         }
                     },
-                    "queryFile": "./out/src/sql/memoryUsage.sql"
+                    "queryFile": "./out/src/sql/memoryUsage.sql",
+                    "details": {
+                        "queryFile": "./out/src/sql/memoryUsage_details.sql",
+                        "label": {
+                            "column": "session_id",
+                            "state": []
+                        },
+                        "value": "used_memory"
+                    }
                 }
             },
             {
@@ -126,10 +150,18 @@
                             "legendPosition": "none",
                             "labelFirstColumn": false,
                             "columnsAsLabels": true,
-                            "showTopNData": 5
+                            "showTopNData": 10
                         }
                     },
-                    "queryFile": "./out/src/sql/memoryDelta.sql"
+                    "queryFile": "./out/src/sql/memoryDelta.sql",
+                    "details": {
+                        "queryFile": "./out/src/sql/memoryDelta_details.sql",
+                        "label": {
+                            "column": "session_id",
+                            "state": []
+                        },
+                        "value": "used_memory_delta"
+                    }
                 }
             },
             {
@@ -159,7 +191,7 @@
                             }
                         },
                         {
-                            "name": "Top 5 CPU Usage",
+                            "name": "Top 10 CPU Usage",
                             "gridItemConfig": {
                                 "sizex": 2,
                                 "sizey": 1
@@ -169,7 +201,7 @@
                             }
                         },
                         {
-                            "name": "Top 5 CPU Delta",
+                            "name": "Top 10 CPU Delta",
                             "gridItemConfig": {
                                 "sizex": 2,
                                 "sizey": 1
@@ -179,7 +211,7 @@
                             }
                         },
                         {
-                            "name": "Top 5 Memory Usage",
+                            "name": "Top 10 Memory Usage",
                             "gridItemConfig": {
                                 "sizex": 2,
                                 "sizey": 1
@@ -189,7 +221,7 @@
                             }
                         },
                         {
-                            "name": "Top 5 Memory Delta",
+                            "name": "Top 10 Memory Delta",
                             "gridItemConfig": {
                                 "sizex": 2,
                                 "sizey": 1
@@ -197,16 +229,6 @@
                             "widget": {
                                 "sp_whoisactive-memory-delta": {}
                             }
-                        },
-                        {
-                            "name": "Blocking Sessions",
-                            "gridItemConfig": {
-                                "sizex": 2,
-                                "sizey": 1
-                            },
-                            "widget": {
-                                "sp_whoisactive-blocking_sessions": {}
-                            }
                         }
                     ]
                 }

samples/sp_whoIsActive/src/sql/cpuDelta_details.sql

@@ -0,0 +1,8 @@
+IF EXISTS (SELECT * FROM INFORMATION_SCHEMA.ROUTINES WHERE ROUTINE_NAME = 'sp_WhoIsActive')
+    EXEC sp_WhoIsActive 
+        @delta_interval = 1,
+        @get_plans = 1,
+        @sort_order = '[CPU_delta] DESC'
+ELSE 
+    SELECT 0;
+GO

samples/sp_whoIsActive/src/sql/cpuUsage_details.sql

@@ -0,0 +1,7 @@
+IF EXISTS (SELECT * FROM INFORMATION_SCHEMA.ROUTINES WHERE ROUTINE_NAME = 'sp_WhoIsActive')
+    EXEC sp_WhoIsActive 
+        @get_plans = 1,
+        @sort_order = '[CPU] DESC'
+ELSE 
+    SELECT 0;
+GO

samples/sp_whoIsActive/src/sql/memoryDelta_details.sql

@@ -0,0 +1,8 @@
+IF EXISTS (SELECT * FROM INFORMATION_SCHEMA.ROUTINES WHERE ROUTINE_NAME = 'sp_WhoIsActive')
+    EXEC sp_WhoIsActive 
+        @delta_interval = 1,
+        @get_plans = 1,
+        @sort_order = '[used_memory_delta] DESC'
+ELSE 
+    SELECT 0;
+GO

samples/sp_whoIsActive/src/sql/memoryUsage_details.sql

@@ -0,0 +1,7 @@
+IF EXISTS (SELECT * FROM INFORMATION_SCHEMA.ROUTINES WHERE ROUTINE_NAME = 'sp_WhoIsActive')
+    EXEC sp_WhoIsActive 
+        @get_plans = 1,
+        @sort_order = '[used_memory] DESC'
+ELSE 
+    SELECT 0;
+GO

samples/sqlservices/package-lock.json

@@ -27,6 +27,12 @@
                 "through2": "2.0.3"
             }
         },
+        "@types/handlebars": {
+            "version": "4.0.37",
+            "resolved": "https://registry.npmjs.org/@types/handlebars/-/handlebars-4.0.37.tgz",
+            "integrity": "sha512-c/g99PQsJEFYdK3LT1qgPAZ61fu/oFOaEhov/6ZuUNMi1xQFbAOSThlX8fAQLf+QoGXtyv4S39OjIRXf3HkBtw==",
+            "dev": true
+        },
         "@types/node": {
             "version": "7.0.58",
             "resolved": "https://registry.npmjs.org/@types/node/-/node-7.0.58.tgz",
@@ -51,11 +57,30 @@
                 "json-schema-traverse": "0.3.1"
             }
         },
+        "align-text": {
+            "version": "0.1.4",
+            "resolved": "https://registry.npmjs.org/align-text/-/align-text-0.1.4.tgz",
+            "integrity": "sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=",
+            "requires": {
+                "kind-of": "3.2.2",
+                "longest": "1.0.1",
+                "repeat-string": "1.6.1"
+            },
+            "dependencies": {
+                "kind-of": {
+                    "version": "3.2.2",
+                    "resolved": "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz",
+                    "integrity": "sha1-MeohpzS6ubuw8yRm2JOupR5KPGQ=",
+                    "requires": {
+                        "is-buffer": "1.1.6"
+                    }
+                }
+            }
+        },
         "amdefine": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/amdefine/-/amdefine-1.0.1.tgz",
-            "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU=",
-            "dev": true
+            "integrity": "sha1-SlKCrBZHKek2Gbz9OtFR+BfOkfU="
         },
         "ansi-colors": {
             "version": "1.1.0",
@@ -136,6 +161,15 @@
             "integrity": "sha1-+cjBN1fMHde8N5rHeyxipcKGjEA=",
             "dev": true
         },
+        "argparse": {
+            "version": "1.0.10",
+            "resolved": "https://registry.npmjs.org/argparse/-/argparse-1.0.10.tgz",
+            "integrity": "sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==",
+            "dev": true,
+            "requires": {
+                "sprintf-js": "1.0.3"
+            }
+        },
         "arr-diff": {
             "version": "4.0.0",
             "resolved": "https://registry.npmjs.org/arr-diff/-/arr-diff-4.0.0.tgz",
@@ -289,6 +323,11 @@
             "integrity": "sha1-WWZ/QfrdTyDMvCu5a41Pf3jsA2c=",
             "dev": true
         },
+        "async": {
+            "version": "1.5.2",
+            "resolved": "https://registry.npmjs.org/async/-/async-1.5.2.tgz",
+            "integrity": "sha1-7GphrlZIDAw8skHJVhjiCJL5Zyo="
+        },
         "async-done": {
             "version": "1.2.4",
             "resolved": "https://registry.npmjs.org/async-done/-/async-done-1.2.4.tgz",
@@ -420,6 +459,12 @@
                 "inherits": "2.0.3"
             }
         },
+        "boolbase": {
+            "version": "1.0.0",
+            "resolved": "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz",
+            "integrity": "sha1-aN/1++YMUes3cl6p4+0xDcwed24=",
+            "dev": true
+        },
         "boom": {
             "version": "2.10.1",
             "resolved": "https://registry.npmjs.org/boom/-/boom-2.10.1.tgz",
@@ -538,6 +583,16 @@
             "integrity": "sha1-cVuW6phBWTzDMGeSP17GDr2k99c=",
             "dev": true
         },
+        "center-align": {
+            "version": "0.1.3",
+            "resolved": "https://registry.npmjs.org/center-align/-/center-align-0.1.3.tgz",
+            "integrity": "sha1-qg0yYptu6XIgBBHL1EYckHvCt60=",
+            "optional": true,
+            "requires": {
+                "align-text": "0.1.4",
+                "lazy-cache": "1.0.4"
+            }
+        },
         "chalk": {
             "version": "1.1.3",
             "resolved": "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz",
@@ -551,6 +606,20 @@
                 "supports-color": "2.0.0"
             }
         },
+        "cheerio": {
+            "version": "1.0.0-rc.2",
+            "resolved": "https://registry.npmjs.org/cheerio/-/cheerio-1.0.0-rc.2.tgz",
+            "integrity": "sha1-S59TqBsn5NXawxwP/Qz6A8xoMNs=",
+            "dev": true,
+            "requires": {
+                "css-select": "1.2.0",
+                "dom-serializer": "0.1.0",
+                "entities": "1.1.1",
+                "htmlparser2": "3.9.2",
+                "lodash": "4.17.10",
+                "parse5": "3.0.3"
+            }
+        },
         "child-process-promise": {
             "version": "2.2.1",
             "resolved": "https://registry.npmjs.org/child-process-promise/-/child-process-promise-2.2.1.tgz",
@@ -888,6 +957,24 @@
                 }
             }
         },
+        "css-select": {
+            "version": "1.2.0",
+            "resolved": "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz",
+            "integrity": "sha1-KzoRBTnFNV8c2NMUYj6HCxIeyFg=",
+            "dev": true,
+            "requires": {
+                "boolbase": "1.0.0",
+                "css-what": "2.1.0",
+                "domutils": "1.5.1",
+                "nth-check": "1.0.1"
+            }
+        },
+        "css-what": {
+            "version": "2.1.0",
+            "resolved": "https://registry.npmjs.org/css-what/-/css-what-2.1.0.tgz",
+            "integrity": "sha1-lGfQMsOM+u+58teVASUwYvh/ob0=",
+            "dev": true
+        },
         "d": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/d/-/d-1.0.0.tgz",
@@ -954,8 +1041,7 @@
         "decamelize": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
-            "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=",
-            "dev": true
+            "integrity": "sha1-9lNNFRSCabIDUue+4m9QH5oZEpA="
         },
         "decode-uri-component": {
             "version": "0.2.0",
@@ -1043,6 +1129,12 @@
             "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
             "dev": true
         },
+        "denodeify": {
+            "version": "1.2.1",
+            "resolved": "https://registry.npmjs.org/denodeify/-/denodeify-1.2.1.tgz",
+            "integrity": "sha1-OjYof1A05pnnV3kBBSwubJQlFjE=",
+            "dev": true
+        },
         "detect-file": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/detect-file/-/detect-file-1.0.0.tgz",
@@ -1061,6 +1153,49 @@
             "integrity": "sha512-MKPHZDMB0o6yHyDryUOScqZibp914ksXwAMYMTHj6KO8UeKsRYNJD3oNCKjTqZon+V488P7N/HzXF8t7ZR95ww==",
             "dev": true
         },
+        "dom-serializer": {
+            "version": "0.1.0",
+            "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.1.0.tgz",
+            "integrity": "sha1-BzxpdUbOB4DOI75KKOKT5AvDDII=",
+            "dev": true,
+            "requires": {
+                "domelementtype": "1.1.3",
+                "entities": "1.1.1"
+            },
+            "dependencies": {
+                "domelementtype": {
+                    "version": "1.1.3",
+                    "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.1.3.tgz",
+                    "integrity": "sha1-vSh3PiZCiBrsUVRJJCmcXNgiGFs=",
+                    "dev": true
+                }
+            }
+        },
+        "domelementtype": {
+            "version": "1.3.0",
+            "resolved": "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.0.tgz",
+            "integrity": "sha1-sXrtguirWeUt2cGbF1bg/BhyBMI=",
+            "dev": true
+        },
+        "domhandler": {
+            "version": "2.4.2",
+            "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz",
+            "integrity": "sha512-JiK04h0Ht5u/80fdLMCEmV4zkNh2BcoMFBmZ/91WtYZ8qVXSKjiw7fXMgFPnHcSZgOo3XdinHvmnDUeMf5R4wA==",
+            "dev": true,
+            "requires": {
+                "domelementtype": "1.3.0"
+            }
+        },
+        "domutils": {
+            "version": "1.5.1",
+            "resolved": "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz",
+            "integrity": "sha1-3NhIiib1Y9YQeeSMn3t+Mjc2gs8=",
+            "dev": true,
+            "requires": {
+                "dom-serializer": "0.1.0",
+                "domelementtype": "1.3.0"
+            }
+        },
         "duplexer": {
             "version": "0.1.1",
             "resolved": "https://registry.npmjs.org/duplexer/-/duplexer-0.1.1.tgz",
@@ -1143,6 +1278,12 @@
                 "once": "1.4.0"
             }
         },
+        "entities": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/entities/-/entities-1.1.1.tgz",
+            "integrity": "sha1-blwtClYhtdra7O+AuQ7ftc13cvA=",
+            "dev": true
+        },
         "error-ex": {
             "version": "1.3.1",
             "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.1.tgz",
@@ -1630,6 +1771,16 @@
             "integrity": "sha1-g8YK/Fi5xWmXAH7Rp2izqzA6RP4=",
             "dev": true
         },
+        "fs-extra": {
+            "version": "5.0.0",
+            "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-5.0.0.tgz",
+            "integrity": "sha512-66Pm4RYbjzdyeuqudYqhFiNBbCIuI9kgRqLPSHIlXHidW8NIQtVdkM1yeZ4lXwuhbTETv3EUGMNHAAw6hiundQ==",
+            "requires": {
+                "graceful-fs": "4.1.11",
+                "jsonfile": "4.0.0",
+                "universalify": "0.1.1"
+            }
+        },
         "fs-mkdirp-stream": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/fs-mkdirp-stream/-/fs-mkdirp-stream-1.0.0.tgz",
@@ -2762,8 +2913,7 @@
         "graceful-fs": {
             "version": "4.1.11",
             "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.1.11.tgz",
-            "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg=",
-            "dev": true
+            "integrity": "sha1-Dovf5NHduIVNZOBOp8AOKgJuVlg="
         },
         "growl": {
             "version": "1.10.3",
@@ -3928,6 +4078,27 @@
                 "glogg": "1.0.1"
             }
         },
+        "handlebars": {
+            "version": "4.0.11",
+            "resolved": "https://registry.npmjs.org/handlebars/-/handlebars-4.0.11.tgz",
+            "integrity": "sha1-Ywo13+ApS8KB7a5v/F0yn8eYLcw=",
+            "requires": {
+                "async": "1.5.2",
+                "optimist": "0.6.1",
+                "source-map": "0.4.4",
+                "uglify-js": "2.8.29"
+            },
+            "dependencies": {
+                "source-map": {
+                    "version": "0.4.4",
+                    "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.4.4.tgz",
+                    "integrity": "sha1-66T12pwNyZneaAMti092FzZSA2s=",
+                    "requires": {
+                        "amdefine": "1.0.1"
+                    }
+                }
+            }
+        },
         "har-schema": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/har-schema/-/har-schema-2.0.0.tgz",
@@ -4047,6 +4218,20 @@
             "integrity": "sha512-lIbgIIQA3lz5XaB6vxakj6sDHADJiZadYEJB+FgA+C4nubM1NwcuvUr9EJPmnH1skZqpqUzWborWo8EIUi0Sdw==",
             "dev": true
         },
+        "htmlparser2": {
+            "version": "3.9.2",
+            "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.9.2.tgz",
+            "integrity": "sha1-G9+HrMoPP55T+k/M6w9LTLsAszg=",
+            "dev": true,
+            "requires": {
+                "domelementtype": "1.3.0",
+                "domhandler": "2.4.2",
+                "domutils": "1.5.1",
+                "entities": "1.1.1",
+                "inherits": "2.0.3",
+                "readable-stream": "2.3.5"
+            }
+        },
         "http-signature": {
             "version": "1.1.1",
             "resolved": "https://registry.npmjs.org/http-signature/-/http-signature-1.1.1.tgz",
@@ -4135,8 +4320,7 @@
         "is-buffer": {
             "version": "1.1.6",
             "resolved": "https://registry.npmjs.org/is-buffer/-/is-buffer-1.1.6.tgz",
-            "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w==",
-            "dev": true
+            "integrity": "sha512-NcdALwpXkTm5Zvvbk7owOUSvVvBKDgKP5/ewfXEznmQFfs4ZRmanOeKBTjRVjka3QFoN6XJ+9F3USqfHqTaU5w=="
         },
         "is-builtin-module": {
             "version": "1.0.0",
@@ -4443,6 +4627,14 @@
             "integrity": "sha1-Epai1Y/UXxmg9s4B1lcB4sc1tus=",
             "dev": true
         },
+        "jsonfile": {
+            "version": "4.0.0",
+            "resolved": "https://registry.npmjs.org/jsonfile/-/jsonfile-4.0.0.tgz",
+            "integrity": "sha1-h3Gq4HmbZAdrdmQPygWPnBDjPss=",
+            "requires": {
+                "graceful-fs": "4.1.11"
+            }
+        },
         "jsonify": {
             "version": "0.0.0",
             "resolved": "https://registry.npmjs.org/jsonify/-/jsonify-0.0.0.tgz",
@@ -4497,6 +4689,12 @@
                 "es6-weak-map": "2.0.2"
             }
         },
+        "lazy-cache": {
+            "version": "1.0.4",
+            "resolved": "https://registry.npmjs.org/lazy-cache/-/lazy-cache-1.0.4.tgz",
+            "integrity": "sha1-odePw6UEdMuAhF07O24dpJpEbo4=",
+            "optional": true
+        },
         "lazystream": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/lazystream/-/lazystream-1.0.0.tgz",
@@ -4540,6 +4738,15 @@
                 "resolve": "1.6.0"
             }
         },
+        "linkify-it": {
+            "version": "2.0.3",
+            "resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-2.0.3.tgz",
+            "integrity": "sha1-2UpGSPmxwXnWT6lykSaL22zpQ08=",
+            "dev": true,
+            "requires": {
+                "uc.micro": "1.0.5"
+            }
+        },
         "load-json-file": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/load-json-file/-/load-json-file-1.1.0.tgz",
@@ -4553,6 +4760,12 @@
                 "strip-bom": "2.0.0"
             }
         },
+        "lodash": {
+            "version": "4.17.10",
+            "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.10.tgz",
+            "integrity": "sha512-UejweD1pDoXu+AD825lWwp4ZGtSwgnpZxb3JDViD7StjQz+Nb/6l093lx4OQ0foGWNRoc19mWy7BzL+UAK2iVg==",
+            "dev": true
+        },
         "lodash._basecopy": {
             "version": "3.0.1",
             "resolved": "https://registry.npmjs.org/lodash._basecopy/-/lodash._basecopy-3.0.1.tgz",
@@ -4678,6 +4891,11 @@
                 "lodash.escape": "3.2.0"
             }
         },
+        "longest": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/longest/-/longest-1.0.1.tgz",
+            "integrity": "sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc="
+        },
         "lru-cache": {
             "version": "4.1.2",
             "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.2.tgz",
@@ -4738,6 +4956,19 @@
                 "object-visit": "1.0.1"
             }
         },
+        "markdown-it": {
+            "version": "8.4.1",
+            "resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-8.4.1.tgz",
+            "integrity": "sha512-CzzqSSNkFRUf9vlWvhK1awpJreMRqdCrBvZ8DIoDWTOkESMIF741UPAhuAmbyWmdiFPA6WARNhnu2M6Nrhwa+A==",
+            "dev": true,
+            "requires": {
+                "argparse": "1.0.10",
+                "entities": "1.1.1",
+                "linkify-it": "2.0.3",
+                "mdurl": "1.0.1",
+                "uc.micro": "1.0.5"
+            }
+        },
         "matchdep": {
             "version": "2.0.0",
             "resolved": "https://registry.npmjs.org/matchdep/-/matchdep-2.0.0.tgz",
@@ -4750,6 +4981,12 @@
                 "stack-trace": "0.0.10"
             }
         },
+        "mdurl": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
+            "integrity": "sha1-/oWy7HWlkDfyrf7BAP1sYBdhFS4=",
+            "dev": true
+        },
         "memoizee": {
             "version": "0.4.12",
             "resolved": "https://registry.npmjs.org/memoizee/-/memoizee-0.4.12.tgz",
@@ -4796,6 +5033,12 @@
                 "to-regex": "3.0.2"
             }
         },
+        "mime": {
+            "version": "1.6.0",
+            "resolved": "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz",
+            "integrity": "sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==",
+            "dev": true
+        },
         "mime-db": {
             "version": "1.33.0",
             "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.33.0.tgz",
@@ -4941,6 +5184,12 @@
             "integrity": "sha1-WzLqB+tDyd7WEwQ0z5JvRrKn/U0=",
             "dev": true
         },
+        "mute-stream": {
+            "version": "0.0.7",
+            "resolved": "https://registry.npmjs.org/mute-stream/-/mute-stream-0.0.7.tgz",
+            "integrity": "sha1-MHXOk7whuPq0PhvE2n6BFe0ee6s=",
+            "dev": true
+        },
         "nan": {
             "version": "2.10.0",
             "resolved": "https://registry.npmjs.org/nan/-/nan-2.10.0.tgz",
@@ -5019,6 +5268,15 @@
                 "once": "1.4.0"
             }
         },
+        "nth-check": {
+            "version": "1.0.1",
+            "resolved": "https://registry.npmjs.org/nth-check/-/nth-check-1.0.1.tgz",
+            "integrity": "sha1-mSms32KPwsQQmN6rgqxYDPFJquQ=",
+            "dev": true,
+            "requires": {
+                "boolbase": "1.0.0"
+            }
+        },
         "number-is-nan": {
             "version": "1.0.1",
             "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
@@ -5207,7 +5465,6 @@
             "version": "0.6.1",
             "resolved": "https://registry.npmjs.org/optimist/-/optimist-0.6.1.tgz",
             "integrity": "sha1-2j6nRob6IaGaERwybpDrFaAZZoY=",
-            "dev": true,
             "requires": {
                 "minimist": "0.0.10",
                 "wordwrap": "0.0.3"
@@ -5216,8 +5473,7 @@
                 "minimist": {
                     "version": "0.0.10",
                     "resolved": "https://registry.npmjs.org/minimist/-/minimist-0.0.10.tgz",
-                    "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8=",
-                    "dev": true
+                    "integrity": "sha1-3j+YVD2/lggr5IrRoMfNqDYwHc8="
                 }
             }
         },
@@ -5230,6 +5486,12 @@
                 "readable-stream": "2.3.5"
             }
         },
+        "os-homedir": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+            "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
+            "dev": true
+        },
         "os-locale": {
             "version": "1.4.0",
             "resolved": "https://registry.npmjs.org/os-locale/-/os-locale-1.4.0.tgz",
@@ -5239,6 +5501,22 @@
                 "lcid": "1.0.0"
             }
         },
+        "os-tmpdir": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+            "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
+            "dev": true
+        },
+        "osenv": {
+            "version": "0.1.5",
+            "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
+            "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
+            "dev": true,
+            "requires": {
+                "os-homedir": "1.0.2",
+                "os-tmpdir": "1.0.2"
+            }
+        },
         "p-map": {
             "version": "1.2.0",
             "resolved": "https://registry.npmjs.org/p-map/-/p-map-1.2.0.tgz",
@@ -5300,6 +5578,24 @@
             "integrity": "sha1-bVuTSkVpk7I9N/QKOC1vFmao5cY=",
             "dev": true
         },
+        "parse-semver": {
+            "version": "1.1.1",
+            "resolved": "https://registry.npmjs.org/parse-semver/-/parse-semver-1.1.1.tgz",
+            "integrity": "sha1-mkr9bfBj3Egm+T+6SpnPIj9mbLg=",
+            "dev": true,
+            "requires": {
+                "semver": "5.5.0"
+            }
+        },
+        "parse5": {
+            "version": "3.0.3",
+            "resolved": "https://registry.npmjs.org/parse5/-/parse5-3.0.3.tgz",
+            "integrity": "sha512-rgO9Zg5LLLkfJF9E6CCmXlSE4UVceloys8JrFqCcHloC3usd/kJCyPDwH2SOlzix2j3xaP9sUX3e8+kvkuleAA==",
+            "dev": true,
+            "requires": {
+                "@types/node": "7.0.58"
+            }
+        },
         "pascalcase": {
             "version": "0.1.1",
             "resolved": "https://registry.npmjs.org/pascalcase/-/pascalcase-0.1.1.tgz",
@@ -5564,6 +5860,15 @@
                 }
             }
         },
+        "read": {
+            "version": "1.0.7",
+            "resolved": "https://registry.npmjs.org/read/-/read-1.0.7.tgz",
+            "integrity": "sha1-s9oZvQUkMal2cdRKQmNK33ELQMQ=",
+            "dev": true,
+            "requires": {
+                "mute-stream": "0.0.7"
+            }
+        },
         "read-pkg": {
             "version": "1.1.0",
             "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
@@ -5684,8 +5989,7 @@
         "repeat-string": {
             "version": "1.6.1",
             "resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",
-            "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc=",
-            "dev": true
+            "integrity": "sha1-jcrkcOHIirwtYA//Sndihtp15jc="
         },
         "replace-ext": {
             "version": "1.0.0",
@@ -5915,6 +6219,15 @@
             "integrity": "sha512-TTlYpa+OL+vMMNG24xSlQGEJ3B/RzEfUlLct7b5G/ytav+wPrplCpVMFuwzXbkecJrb6IYo1iFb0S9v37754mg==",
             "dev": true
         },
+        "right-align": {
+            "version": "0.1.3",
+            "resolved": "https://registry.npmjs.org/right-align/-/right-align-0.1.3.tgz",
+            "integrity": "sha1-YTObci/mo1FWiSENJOFMlhSGE+8=",
+            "optional": true,
+            "requires": {
+                "align-text": "0.1.4"
+            }
+        },
         "rimraf": {
             "version": "2.6.2",
             "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.6.2.tgz",
@@ -6136,8 +6449,7 @@
         "source-map": {
             "version": "0.5.7",
             "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-            "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
-            "dev": true
+            "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
         },
         "source-map-resolve": {
             "version": "0.5.1",
@@ -6536,6 +6848,15 @@
                 "next-tick": "1.0.0"
             }
         },
+        "tmp": {
+            "version": "0.0.29",
+            "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.29.tgz",
+            "integrity": "sha1-8lEl/w3Z2jzLDC3Tce4SiLuRKMA=",
+            "dev": true,
+            "requires": {
+                "os-tmpdir": "1.0.2"
+            }
+        },
         "to-absolute-glob": {
             "version": "2.0.2",
             "resolved": "https://registry.npmjs.org/to-absolute-glob/-/to-absolute-glob-2.0.2.tgz",
@@ -6653,6 +6974,12 @@
                 }
             }
         },
+        "tunnel": {
+            "version": "0.0.4",
+            "resolved": "https://registry.npmjs.org/tunnel/-/tunnel-0.0.4.tgz",
+            "integrity": "sha1-LTeFoVjBdMmhbcLARuxfxfF0IhM=",
+            "dev": true
+        },
         "tunnel-agent": {
             "version": "0.4.3",
             "resolved": "https://registry.npmjs.org/tunnel-agent/-/tunnel-agent-0.4.3.tgz",
@@ -6666,6 +6993,16 @@
             "dev": true,
             "optional": true
         },
+        "typed-rest-client": {
+            "version": "0.12.0",
+            "resolved": "https://registry.npmjs.org/typed-rest-client/-/typed-rest-client-0.12.0.tgz",
+            "integrity": "sha1-Y3b1Un9CfaEh3K/f1+QeEyHgcgw=",
+            "dev": true,
+            "requires": {
+                "tunnel": "0.0.4",
+                "underscore": "1.8.3"
+            }
+        },
         "typedarray": {
             "version": "0.0.6",
             "resolved": "https://registry.npmjs.org/typedarray/-/typedarray-0.0.6.tgz",
@@ -6678,12 +7015,78 @@
             "integrity": "sha512-Ao/f6d/4EPLq0YwzsQz8iXflezpTkQzqAyenTiw4kCUGr1uPiFLC3+fZ+gMZz6eeI/qdRUqvC+HxIJzUAzEFdg==",
             "dev": true
         },
+        "uc.micro": {
+            "version": "1.0.5",
+            "resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.5.tgz",
+            "integrity": "sha512-JoLI4g5zv5qNyT09f4YAvEZIIV1oOjqnewYg5D38dkQljIzpPT296dbIGvKro3digYI1bkb7W6EP1y4uDlmzLg==",
+            "dev": true
+        },
+        "uglify-js": {
+            "version": "2.8.29",
+            "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-2.8.29.tgz",
+            "integrity": "sha1-KcVzMUgFe7Th913zW3qcty5qWd0=",
+            "optional": true,
+            "requires": {
+                "source-map": "0.5.7",
+                "uglify-to-browserify": "1.0.2",
+                "yargs": "3.10.0"
+            },
+            "dependencies": {
+                "camelcase": {
+                    "version": "1.2.1",
+                    "resolved": "https://registry.npmjs.org/camelcase/-/camelcase-1.2.1.tgz",
+                    "integrity": "sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=",
+                    "optional": true
+                },
+                "cliui": {
+                    "version": "2.1.0",
+                    "resolved": "https://registry.npmjs.org/cliui/-/cliui-2.1.0.tgz",
+                    "integrity": "sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE=",
+                    "optional": true,
+                    "requires": {
+                        "center-align": "0.1.3",
+                        "right-align": "0.1.3",
+                        "wordwrap": "0.0.2"
+                    }
+                },
+                "wordwrap": {
+                    "version": "0.0.2",
+                    "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.2.tgz",
+                    "integrity": "sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8=",
+                    "optional": true
+                },
+                "yargs": {
+                    "version": "3.10.0",
+                    "resolved": "https://registry.npmjs.org/yargs/-/yargs-3.10.0.tgz",
+                    "integrity": "sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=",
+                    "optional": true,
+                    "requires": {
+                        "camelcase": "1.2.1",
+                        "cliui": "2.1.0",
+                        "decamelize": "1.2.0",
+                        "window-size": "0.1.0"
+                    }
+                }
+            }
+        },
+        "uglify-to-browserify": {
+            "version": "1.0.2",
+            "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz",
+            "integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=",
+            "optional": true
+        },
         "unc-path-regex": {
             "version": "0.1.2",
             "resolved": "https://registry.npmjs.org/unc-path-regex/-/unc-path-regex-0.1.2.tgz",
             "integrity": "sha1-5z3T17DXxe2G+6xrCufYxqadUPo=",
             "dev": true
         },
+        "underscore": {
+            "version": "1.8.3",
+            "resolved": "https://registry.npmjs.org/underscore/-/underscore-1.8.3.tgz",
+            "integrity": "sha1-Tz+1OxBuYJf8+ctBCfKl6b36UCI=",
+            "dev": true
+        },
         "underscore.string": {
             "version": "3.3.4",
             "resolved": "https://registry.npmjs.org/underscore.string/-/underscore.string-3.3.4.tgz",
@@ -6762,6 +7165,11 @@
                 "through2-filter": "2.0.0"
             }
         },
+        "universalify": {
+            "version": "0.1.1",
+            "resolved": "https://registry.npmjs.org/universalify/-/universalify-0.1.1.tgz",
+            "integrity": "sha1-+nG63UQ3r0wUiEHjs7Fl+enlkLc="
+        },
         "unset-value": {
             "version": "1.0.0",
             "resolved": "https://registry.npmjs.org/unset-value/-/unset-value-1.0.0.tgz",
@@ -6814,6 +7222,12 @@
             "integrity": "sha1-2pN/emLiH+wf0Y1Js1wpNQZ6bHI=",
             "dev": true
         },
+        "url-join": {
+            "version": "1.1.0",
+            "resolved": "https://registry.npmjs.org/url-join/-/url-join-1.1.0.tgz",
+            "integrity": "sha1-dBxsL0WWxIMNZxhGCSDQySIC3Hg=",
+            "dev": true
+        },
         "url-parse": {
             "version": "1.3.0",
             "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.3.0.tgz",
@@ -6983,6 +7397,31 @@
                 "vinyl": "2.1.0"
             }
         },
+        "vsce": {
+            "version": "1.36.2",
+            "resolved": "https://registry.npmjs.org/vsce/-/vsce-1.36.2.tgz",
+            "integrity": "sha512-LiQjHdoaXOHKdk/PRN5OWWeEm/4w7tnFLf8EM+pzvlz/8uk7uJiqtMjVYAYawnU7c8KbMSz9nE9M6nCTV4ZSQA==",
+            "dev": true,
+            "requires": {
+                "cheerio": "1.0.0-rc.2",
+                "commander": "2.15.1",
+                "denodeify": "1.2.1",
+                "glob": "7.1.2",
+                "lodash": "4.17.10",
+                "markdown-it": "8.4.1",
+                "mime": "1.6.0",
+                "minimatch": "3.0.4",
+                "osenv": "0.1.5",
+                "parse-semver": "1.1.1",
+                "read": "1.0.7",
+                "semver": "5.5.0",
+                "tmp": "0.0.29",
+                "url-join": "1.1.0",
+                "vso-node-api": "6.5.0",
+                "yauzl": "2.9.1",
+                "yazl": "2.4.3"
+            }
+        },
         "vscode": {
             "version": "1.1.14",
             "resolved": "https://registry.npmjs.org/vscode/-/vscode-1.1.14.tgz",
@@ -7010,6 +7449,17 @@
             "resolved": "https://registry.npmjs.org/vscode-nls/-/vscode-nls-3.2.2.tgz",
             "integrity": "sha512-/Ur1+tgazwd51+ncRyoy0UIu4dvMdVXS9XMUULQlZIBoNGEwOhwEx9x+hHWoUjldMrOQ32t2CGKo0u6D4R6/hg=="
         },
+        "vso-node-api": {
+            "version": "6.5.0",
+            "resolved": "https://registry.npmjs.org/vso-node-api/-/vso-node-api-6.5.0.tgz",
+            "integrity": "sha512-hFjPLMJkq02zF8U+LhZ4airH0ivaiKzGdlNAQlYFB3lWuGH/UANUrl63DVPUQOyGw+7ZNQ+ufM44T6mWN92xyg==",
+            "dev": true,
+            "requires": {
+                "tunnel": "0.0.4",
+                "typed-rest-client": "0.12.0",
+                "underscore": "1.8.3"
+            }
+        },
         "which": {
             "version": "1.3.0",
             "resolved": "https://registry.npmjs.org/which/-/which-1.3.0.tgz",
@@ -7025,11 +7475,16 @@
             "integrity": "sha1-u6Y8qGGUiZT/MHc2CJ47lgJsKk8=",
             "dev": true
         },
+        "window-size": {
+            "version": "0.1.0",
+            "resolved": "https://registry.npmjs.org/window-size/-/window-size-0.1.0.tgz",
+            "integrity": "sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=",
+            "optional": true
+        },
         "wordwrap": {
             "version": "0.0.3",
             "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-0.0.3.tgz",
-            "integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc=",
-            "dev": true
+            "integrity": "sha1-o9XabNXAvAAI03I0u68b7WMFkQc="
         },
         "wrap-ansi": {
             "version": "2.1.0",

samples/sqlservices/package.json

@@ -16,6 +16,16 @@
     ],
     "main": "./out/src/extension",
     "contributes": {
+        "commands": [
+            {
+                "command": "sqlservices.openDialog",
+                "title": "sqlservices.openDialog"
+            },
+            {
+                "command": "sqlservices.openEditor",
+                "title": "sqlservices.openEditor"
+            }
+        ],
         "dashboard.tabs": [
             {
                 "id": "sqlservices.tab",
@@ -62,7 +72,9 @@
         "postinstall": "node ./node_modules/vscode/bin/install && node ./node_modules/sqlops/bin/install && gulp copytypings"
     },
     "dependencies": {
-        "vscode-nls": "^3.2.2"
+        "vscode-nls": "^3.2.2",
+        "fs-extra": "^5.0.0",
+        "handlebars": "^4.0.11"
     },
     "devDependencies": {
         "@types/node": "^7.0.43",
@@ -76,6 +88,8 @@
         "sqlops": "github:anthonydresser/sqlops-extension-sqlops",
         "tslint": "^3.14.0",
         "typescript": "^2.6.1",
-        "vscode": "^1.1.14"
+        "vscode": "^1.1.14",
+        "@types/handlebars": "^4.0.11",
+        "vsce": "1.36.2"
     }
 }

samples/sqlservices/src/controllers/mainController.ts

@@ -40,11 +40,155 @@ export default class MainController implements vscode.Disposable {
 			vscode.window.showInformationMessage(`Clicked from profile ${profile.serverName}.${profile.databaseName}`);
 		});
 
+		vscode.commands.registerCommand('sqlservices.openDialog', () =>  {
+			this.openDialog();
+		});
+
+		vscode.commands.registerCommand('sqlservices.openEditor', () =>  {
+			this.openEditor();
+		});
+
 		return Promise.resolve(true);
 	}
 
+	private openDialog(): void {
+		let dialog = sqlops.window.modelviewdialog.createDialog('Test dialog');
+		let tab1 = sqlops.window.modelviewdialog.createTab('Test tab 1');
+
+		let tab2 = sqlops.window.modelviewdialog.createTab('Test tab 2');
+		tab2.content = 'sqlservices';
+		dialog.content = [tab1, tab2];
+		dialog.okButton.onClick(() => console.log('ok clicked!'));
+		dialog.cancelButton.onClick(() => console.log('cancel clicked!'));
+		dialog.okButton.label = 'ok';
+		dialog.cancelButton.label = 'no';
+		let customButton1 = sqlops.window.modelviewdialog.createButton('Test button 1');
+		customButton1.onClick(() => console.log('button 1 clicked!'));
+		let customButton2 = sqlops.window.modelviewdialog.createButton('Test button 2');
+		customButton2.onClick(() => console.log('button 2 clicked!'));
+		dialog.customButtons = [customButton1, customButton2];
+		tab1.registerContent(async (view) => {
+			let inputBox = view.modelBuilder.inputBox()
+			.withProperties({
+				//width: 300
+			})
+			.component();
+			let inputBox2 = view.modelBuilder.inputBox()
+			.component();
+
+			let checkbox = view.modelBuilder.checkBox()
+			.withProperties({
+				label: 'Copy-only backup'
+			})
+			.component();
+			checkbox.onChanged(e => {
+						console.info("inputBox.enabled " + inputBox.enabled);
+						inputBox.enabled = !inputBox.enabled;
+			});
+			let button = view.modelBuilder.button()
+			.withProperties({
+				label: '+'
+			}).component();
+			let button3 = view.modelBuilder.button()
+			.withProperties({
+			label: '-'
+
+			}).component();
+			let button2 = view.modelBuilder.button()
+			.component();
+			button.onDidClick(e => {
+							inputBox2.value = 'Button clicked';
+			});
+			let dropdown = view.modelBuilder.dropDown()
+			.withProperties({
+				value: 'Full',
+				values: ['Full', 'Differential', 'Transaction Log']
+			})
+			.component();
+			let f = 0;
+			inputBox.onTextChanged((params) => {
+			vscode.window.showInformationMessage(inputBox.value);
+				f = f + 1;
+				inputBox2.value=f.toString();
+			});
+			dropdown.onValueChanged((params) => {
+					vscode.window.showInformationMessage(inputBox2.value);
+					inputBox.value = dropdown.value;
+			});
+			let radioButton = view.modelBuilder.radioButton()
+				.withProperties({
+					value: 'option1',
+					name: 'radioButtonOptions',
+					label: 'Option 1',
+					checked: true
+            //width: 300
+			}).component();
+			let radioButton2 = view.modelBuilder.radioButton()
+				.withProperties({
+					value: 'option2',
+					name: 'radioButtonOptions',
+					label: 'Option 2'
+
+            //width: 300
+			}).component();
+			let flexRadioButtonsModel = view.modelBuilder.flexContainer()
+				.withLayout({
+					flexFlow: 'column',
+					alignItems: 'left',
+					justifyContent: 'space-evenly',
+					height: 50
+			}).withItems([
+				radioButton, radioButton2]
+				, { flex: '1 1 50%' }).component();
+			let formModel = view.modelBuilder.formContainer()
+			.withFormItems([{
+						component: inputBox,
+						title: 'Backup name'
+				}, {
+						component: inputBox2,
+						title: 'Recovery model'
+				}, {
+						component:dropdown,
+						title: 'Backup type'
+				}, {
+						component: checkbox,
+						title: ''
+				}, {
+						component: inputBox2,
+						title: 'Backup files',
+						actions: [button, button3]
+				}, {
+					component: flexRadioButtonsModel,
+					title: 'Options'
+				}], {
+						horizontal:false,
+						width: 500,
+						componentWidth: 400
+							}).component();
+			await view.initializeModel(formModel);
+		});
+
+		sqlops.window.modelviewdialog.openDialog(dialog);
+	}
+
+	private openEditor(): void {
+		let editor = sqlops.workspace.createModelViewEditor('Test Editor view');
+		editor.registerContent(async view => {
+			let inputBox = view.modelBuilder.inputBox()
+				.withValidation(component => component.value !== 'valid')
+				.component();
+			let formModel = view.modelBuilder.formContainer()
+				.withFormItems([{
+					component: inputBox,
+					title: 'Enter anything but "valid"'
+				}]).component();
+			await view.initializeModel(formModel);
+		});
+		editor.openEditor();
+	}
+
 	private registerSqlServicesModelView(): void {
-		sqlops.dashboard.registerModelViewProvider('sqlservices', async (view) => {
+		sqlops.ui.registerModelViewProvider('sqlservices', async (view) => {
 			let flexModel = view.modelBuilder.flexContainer()
 				.withLayout({
 					flexFlow: 'row',
@@ -62,7 +206,7 @@ export default class MainController implements vscode.Disposable {
 								.withProperties<sqlops.CardProperties>({
 									label: 'label1',
 									value: 'value1',
-									actions: [{ label: 'action', taskId: 'sqlservices.clickTask' }]
+									actions: [{ label: 'action' }]
 								})
 								.component()
 						]).component(),
@@ -74,7 +218,7 @@ export default class MainController implements vscode.Disposable {
 								.withProperties<sqlops.CardProperties>({
 									label: 'label2',
 									value: 'value2',
-									actions: [{ label: 'action', taskId: 'sqlservices.clickTask' }]
+									actions: [{ label: 'action' }]
 								})
 								.component()
 						]).component()
@@ -85,7 +229,7 @@ export default class MainController implements vscode.Disposable {
 	}
 
 	private registerSplitPanelModelView(): void {
-		sqlops.dashboard.registerModelViewProvider('splitPanel', async (view) => {
+		sqlops.ui.registerModelViewProvider('splitPanel', async (view) => {
 			let numPanels = 3;
 			let splitPanel = new SplitPropertiesPanel(view, numPanels);
 			await view.initializeModel(splitPanel.modelBase);

src/sql/base/browser/ui/panel/media/panel.css

@@ -21,6 +21,12 @@ panel {
 .tabbedPanel .composite.title {
 	display: flex;
 	flex: 0 0 auto;
+	position: relative;
+}
+
+.tabbedPanel .tabContainer {
+	flex: 1 1 auto;
+	overflow: hidden;
 }
 
 .tabbedPanel .tabList {
@@ -31,6 +37,7 @@ panel {
 	line-height: 35px;
 	white-space: nowrap;
 	flex: 1;
+	height: 100%;
 }
 
 .tabbedPanel .tabList .tab {
@@ -65,15 +72,6 @@ panel {
 	line-height: 45px;
 }
 
-.tabbedPanel .tabList .tab:hover .tabLabel,
-.tabbedPanel .tabList .tab .tabLabel.active {
-	opacity: 1;
-}
-
-.tabbedPanel .tabList .tab .tabLabel {
-	opacity: 0.8;
-}
-
 .tabbedPanel .tabList .tab .tabLabel.icon {
 	background-repeat: no-repeat;
 	background-position: center center;
@@ -97,17 +95,13 @@ panel {
 }
 
 .composite.title .title-actions {
-	flex: 1 1 auto;
+	flex: 0 0 auto;
 }
 
 .tab > .tabLabel.active {
 	border-bottom: 1px solid;
 }
 
-.composite.title ~ tab.fullsize > :first-child {
-	height: calc(100% - 38px);
-}
-
 .tabbedPanel .title-actions .panel-actions .actions-container {
 	justify-content: flex-start;
 }

src/sql/base/browser/ui/panel/panel.component.ts

@@ -7,13 +7,13 @@ import { Component, ContentChildren, QueryList, AfterContentInit, Inject, forwar
 
 import { TabComponent } from './tab.component';
 import { TabHeaderComponent } from './tabHeader.component';
+import { ScrollableDirective } from 'sql/base/browser/ui/scrollable/scrollable.directive';
 import './panelStyles';
 
 import { ActionBar } from 'vs/base/browser/ui/actionbar/actionbar';
 import { Action } from 'vs/base/common/actions';
 import * as types from 'vs/base/common/types';
 import { mixin } from 'vs/base/common/objects';
-import { ScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement';
 import { ScrollbarVisibility } from 'vs/base/common/scrollable';
 import { addDisposableListener, EventType } from 'vs/base/browser/dom';
 import { Disposable } from 'vs/base/common/lifecycle';
@@ -46,12 +46,13 @@ let idPool = 0;
 @Component({
 	selector: 'panel',
 	template: `
-
-		<div class="tabbedPanel fullsize" #tabbedPanel>
-			<div *ngIf="!options.showTabsWhenOne ? _tabs.length !== 1 : true" class="composite title" #titleContainer>
-				<div class="tabList" #tabList role="tablist">
-					<div *ngFor="let tab of _tabs">
-						<tab-header [tab]="tab" [showIcon]="options.showIcon" (onSelectTab)='selectTab($event)' (onCloseTab)='closeTab($event)'> </tab-header>
+		<div class="tabbedPanel fullsize" [ngClass]="options.layout === NavigationBarLayout.vertical ? 'vertical' : 'horizontal'">
+			<div *ngIf="!options.showTabsWhenOne ? _tabs.length !== 1 : true" class="composite title">
+				<div class="tabContainer">
+					<div class="tabList" role="tablist" scrollable [horizontalScroll]="ScrollbarVisibility.Auto" [verticalScroll]="ScrollbarVisibility.Hidden" [scrollYToX]="true">
+						<div role="presentation" *ngFor="let tab of _tabs">
+							<tab-header role="presentation" [active]="_activeTab === tab" [tab]="tab" [showIcon]="options.showIcon" (onSelectTab)='selectTab($event)' (onCloseTab)='closeTab($event)'></tab-header>
+						</div>
 					</div>
 				</div>
 				<div class="title-actions">
@@ -67,11 +68,12 @@ let idPool = 0;
 		</div>
 	`
 })
-export class PanelComponent extends Disposable implements AfterContentInit, OnInit, OnChanges, OnDestroy, AfterViewInit {
+export class PanelComponent extends Disposable {
 	@Input() public options: IPanelOptions;
 	@Input() public actions: Array<Action>;
 	@ContentChildren(TabComponent) private _tabs: QueryList<TabComponent>;
 	@ViewChildren(TabHeaderComponent) private _headerTabs: QueryList<TabHeaderComponent>;
+	@ViewChild(ScrollableDirective) private scrollable: ScrollableDirective;
 
 	@Output() public onTabChange = new EventEmitter<TabComponent>();
 	@Output() public onTabClose = new EventEmitter<TabComponent>();
@@ -79,12 +81,11 @@ export class PanelComponent extends Disposable implements AfterContentInit, OnIn
 	private _activeTab: TabComponent;
 	private _actionbar: ActionBar;
 	private _mru: TabComponent[];
-	private _scrollableElement: ScrollableElement;
+
+	private ScrollbarVisibility = ScrollbarVisibility;
+	private NavigationBarLayout = NavigationBarLayout;
 
 	@ViewChild('panelActionbar', { read: ElementRef }) private _actionbarRef: ElementRef;
-	@ViewChild('tabbedPanel', { read: ElementRef }) private _tabbedPanelRef: ElementRef;
-	@ViewChild('titleContainer', { read: ElementRef }) private _titleContainer: ElementRef;
-	@ViewChild('tabList', { read: ElementRef }) private _tabList: ElementRef;
 	constructor( @Inject(forwardRef(() => NgZone)) private _zone: NgZone) {
 		super();
 	}
@@ -96,51 +97,14 @@ export class PanelComponent extends Disposable implements AfterContentInit, OnIn
 
 	ngAfterContentInit(): void {
 		if (this._tabs && this._tabs.length > 0) {
-			this._activeTab = this._tabs.first;
-			this._activeTab.active = true;
-		}
-	}
-
-	ngAfterViewInit(): void {
-		if (!this.options.showTabsWhenOne ? this._tabs.length !== 1 : true) {
-			let container = this._titleContainer.nativeElement as HTMLElement;
-			let tabList = this._tabList.nativeElement as HTMLElement;
-			container.removeChild(tabList);
-
-			this._scrollableElement = new ScrollableElement(tabList, {
-				horizontal: ScrollbarVisibility.Auto,
-				vertical: ScrollbarVisibility.Hidden,
-				scrollYToX: true,
-				useShadows: false,
-				horizontalScrollbarSize: 3
-			});
-
-			this._scrollableElement.onScroll(e => {
-				tabList.scrollLeft = e.scrollLeft;
-			});
-
-			container.insertBefore(this._scrollableElement.getDomNode(), container.firstChild);
-
-			this._scrollableElement.setScrollDimensions({
-				width: tabList.offsetWidth,
-				scrollWidth: tabList.scrollWidth
-			});
-
-			this._register(addDisposableListener(window, EventType.RESIZE, () => {
-				// Todo: Need to set timeout because we have to make sure that the grids have already rearraged before the getContentHeight gets called.
-				setTimeout(() => {
-					this._scrollableElement.setScrollDimensions({
-						width: tabList.offsetWidth,
-						scrollWidth: tabList.scrollWidth
-					});
-				}, 100);
-			}));
-
-			if (this.options.layout === NavigationBarLayout.horizontal) {
-				(<HTMLElement>this._tabbedPanelRef.nativeElement).classList.add(horizontalLayout);
+			this.selectTab(this._tabs.first);
 		} else {
-				(<HTMLElement>this._tabbedPanelRef.nativeElement).classList.add(verticalLayout);
+			const sub = this._tabs.changes.subscribe(() => {
+				if (this._tabs && this._tabs.length > 0) {
+					this.selectTab(this._tabs.first);
+					sub.unsubscribe();
 				}
+			});
 		}
 	}
 
@@ -154,6 +118,17 @@ export class PanelComponent extends Disposable implements AfterContentInit, OnIn
 		}
 	}
 
+	ngAfterViewInit(): void {
+		this._tabs.changes.subscribe(() => {
+			if (this.scrollable) {
+				this.scrollable.layout();
+			}
+		});
+		if (this.scrollable) {
+			this.scrollable.layout();
+		}
+	}
+
 	ngOnDestroy() {
 		if (this._actionbar) {
 			this._actionbar.dispose();
@@ -210,12 +185,6 @@ export class PanelComponent extends Disposable implements AfterContentInit, OnIn
 				this.setMostRecentlyUsed(tab);
 				this._activeTab.active = true;
 
-				// Make the tab header focus on the new selected tab
-				let activeTabHeader = this._headerTabs.find(i => i.tab === this._activeTab);
-				if (activeTabHeader) {
-					activeTabHeader.focusOnTabHeader();
-				}
-
 				this.onTabChange.emit(tab);
 			});
 		}

src/sql/base/browser/ui/panel/panel.module.ts

@@ -9,8 +9,10 @@ import { TabComponent } from './tab.component';
 import { TabHeaderComponent } from './tabHeader.component';
 import { PanelComponent } from './panel.component';
 
+import { ScrollableModule } from 'sql/base/browser/ui/scrollable/scrollable.module';
+
 @NgModule({
-	imports: [CommonModule],
+	imports: [CommonModule, ScrollableModule],
 	exports: [TabComponent, PanelComponent],
 	declarations: [TabComponent, TabHeaderComponent, PanelComponent]
 })

src/sql/base/browser/ui/panel/panel.ts

@@ -66,6 +66,8 @@ export class TabbedPanel extends Disposable implements IThemable {
 		this.$header.append(actionbarcontainer);
 		this.$parent.append(this.$header);
 		this.$body = $('tabBody');
+		this.$body.attr('role', 'tabpanel');
+		this.$body.attr('tabindex', '0');
 		this.$parent.append(this.$body);
 	}
 
@@ -92,7 +94,7 @@ export class TabbedPanel extends Disposable implements IThemable {
 		tabHeaderElement.attr('tabindex', '0');
 		tabHeaderElement.attr('role', 'tab');
 		tabHeaderElement.attr('aria-selected', 'false');
-		tabHeaderElement.attr('aria-label', tab.title);
+		tabHeaderElement.attr('aria-controls', tab.identifier);
 		let tabElement = $('.tab');
 		tabHeaderElement.append(tabElement);
 		let tabLabel = $('a.tabLabel');
@@ -124,6 +126,7 @@ export class TabbedPanel extends Disposable implements IThemable {
 		this._shownTab = id;
 		this.$body.clearChildren();
 		let tab = this._tabMap.get(this._shownTab);
+		this.$body.attr('aria-labelledby', tab.identifier);
 		tab.label.addClass('active');
 		tab.header.addClass('active');
 		tab.header.attr('aria-selected', 'true');

src/sql/base/browser/ui/panel/panelStyles.ts

@@ -5,33 +5,33 @@
 import 'vs/css!./media/panel';
 
 import { registerThemingParticipant, ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
-import { TAB_ACTIVE_FOREGROUND, TAB_INACTIVE_FOREGROUND, PANEL_ACTIVE_TITLE_BORDER } from 'vs/workbench/common/theme';
+import { PANEL_ACTIVE_TITLE_FOREGROUND, PANEL_INACTIVE_TITLE_FOREGROUND, PANEL_ACTIVE_TITLE_BORDER } from 'vs/workbench/common/theme';
 import { activeContrastBorder, focusBorder } from 'vs/platform/theme/common/colorRegistry';
 
 registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 
 	// Title Active
-	const titleActive = theme.getColor(TAB_ACTIVE_FOREGROUND);
+	const titleActive = theme.getColor(PANEL_ACTIVE_TITLE_FOREGROUND);
 	const titleActiveBorder = theme.getColor(PANEL_ACTIVE_TITLE_BORDER);
 	if (titleActive || titleActiveBorder) {
 		collector.addRule(`
-			.tabbedPanel > .title > .tabList .tab:hover .tabLabel,
-			.tabbedPanel > .title > .tabList .tab .tabLabel.active {
+			.tabbedPanel > .title .tabList .tab:hover .tabLabel,
+			.tabbedPanel > .title .tabList .tab .tabLabel.active {
 				color: ${titleActive};
 				border-bottom-color: ${titleActiveBorder};
 			}
 
-			.tabbedPanel > .title > .tabList .tab-header.active {
+			.tabbedPanel > .title .tabList .tab-header.active {
 				outline: none;
 			}
 		`);
 	}
 
 	// Title Inactive
-	const titleInactive = theme.getColor(TAB_INACTIVE_FOREGROUND);
+	const titleInactive = theme.getColor(PANEL_INACTIVE_TITLE_FOREGROUND);
 	if (titleInactive) {
 		collector.addRule(`
-			.tabbedPanel > .title > .tabList .tab .tabLabel {
+			.tabbedPanel > .title .tabList .tab .tabLabel {
 				color: ${titleInactive};
 			}
 		`);
@@ -41,7 +41,7 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 	const focusBorderColor = theme.getColor(focusBorder);
 	if (focusBorderColor) {
 		collector.addRule(`
-			.tabbedPanel > .title > .tabList .tab .tabLabel:focus {
+			.tabbedPanel > .title .tabList .tab .tabLabel:focus {
 				color: ${titleActive};
 				border-bottom-color: ${focusBorderColor} !important;
 				border-bottom: 1px solid;
@@ -54,8 +54,8 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 	const outline = theme.getColor(activeContrastBorder);
 	if (outline) {
 		collector.addRule(`
-			.tabbedPanel > .title > .tabList .tab-header.active,
-			.tabbedPanel > .title > .tabList .tab-header:hover {
+			.tabbedPanel > .title .tabList .tab-header.active,
+			.tabbedPanel > .title .tabList .tab-header:hover {
 				outline-color: ${outline};
 				outline-width: 1px;
 				outline-style: solid;
@@ -63,7 +63,7 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 				outline-offset: -5px;
 			}
 
-			.tabbedPanel > .title > .tabList .tab-header:hover:not(.active) {
+			.tabbedPanel > .title .tabList .tab-header:hover:not(.active) {
 				outline-style: dashed;
 			}
 		`);

src/sql/base/browser/ui/panel/tab.component.ts

@@ -2,7 +2,7 @@
  *  Copyright (c) Microsoft Corporation. All rights reserved.
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
-import { Component, Input, ContentChild, OnDestroy } from '@angular/core';
+import { Component, Input, ContentChild, OnDestroy, TemplateRef, ChangeDetectorRef, forwardRef, Inject } from '@angular/core';
 
 import { Action } from 'vs/base/common/actions';
 
@@ -13,13 +13,14 @@ export abstract class TabChild {
 @Component({
 	selector: 'tab',
 	template: `
-		<div class="visibility" [class.hidden]="!active && visibilityType == 'visibility'" *ngIf="visibilityType == 'visibility' || active" class="fullsize">
-			<ng-content class="body fullsize"></ng-content>
+		<div role="tabpanel" [attr.aria-labelledby]="identifier" tabindex="0" class="visibility" [class.hidden]="shouldBeHidden()" *ngIf="shouldBeIfed()" class="fullsize">
+			<ng-container *ngTemplateOutlet="templateRef"></ng-container>
 		</div>
 	`
 })
 export class TabComponent implements OnDestroy {
 	@ContentChild(TabChild) private _child: TabChild;
+	@ContentChild(TemplateRef) templateRef;
 	@Input() public title: string;
 	@Input() public canClose: boolean;
 	@Input() public actions: Array<Action>;
@@ -27,9 +28,18 @@ export class TabComponent implements OnDestroy {
 	public _active = false;
 	@Input() public identifier: string;
 	@Input() private visibilityType: 'if' | 'visibility' = 'if';
+	private rendered = false;
+
+	constructor(
+		@Inject(forwardRef(() => ChangeDetectorRef)) private _cd: ChangeDetectorRef
+	) { }
 
 	public set active(val: boolean) {
 		this._active = val;
+		if (this.active) {
+			this.rendered = true;
+		}
+		this._cd.detectChanges();
 		if (this.active && this._child) {
 			this._child.layout();
 		}
@@ -45,4 +55,21 @@ export class TabComponent implements OnDestroy {
 		}
 	}
 
+	shouldBeIfed(): boolean {
+		if (this.active) {
+			return true;
+		} else if (this.visibilityType === 'visibility' && this.rendered) {
+			return true;
+		} else {
+			return false;
+		}
+	}
+
+	shouldBeHidden(): boolean {
+		if (this.visibilityType === 'visibility' && !this.active) {
+			return true;
+		} else {
+			return false;
+		}
+	}
 }

src/sql/base/browser/ui/panel/tabHeader.component.ts

@@ -19,8 +19,8 @@ import { CloseTabAction } from './tabActions';
 @Component({
 	selector: 'tab-header',
 	template: `
-		<div #actionHeader class="tab-header" style="flex: 0 0; flex-direction: row;" [class.active]="tab.active" tabindex="0" (keyup)="onKey($event)">
-			<span class="tab" (click)="selectTab(tab)" role="tab" [attr.aria-selected]="tab.active" [attr.aria-label]="tab.title">
+		<div #actionHeader role="presentation" class="tab-header" style="flex: 0 0; flex-direction: row; height: 100%" [class.active]="tab.active" tabindex="0" (keyup)="onKey($event)">
+			<span class="tab" (click)="selectTab(tab)" role="tab" [attr.aria-selected]="tab.active" [attr.aria-controls]="tab.title">
 				<a class="tabLabel" [class.active]="tab.active" #tabLabel>
 				</a>
 			</span>
@@ -31,6 +31,7 @@ import { CloseTabAction } from './tabActions';
 export class TabHeaderComponent extends Disposable implements AfterContentInit, OnDestroy {
 	@Input() public tab: TabComponent;
 	@Input() public showIcon: boolean;
+	@Input() public active: boolean;
 	@Output() public onSelectTab: EventEmitter<TabComponent> = new EventEmitter<TabComponent>();
 	@Output() public onCloseTab: EventEmitter<TabComponent> = new EventEmitter<TabComponent>();
 

src/sql/base/browser/ui/radioButton/radioButton.ts

@@ -0,0 +1,83 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+'use strict';
+import * as DOM from 'vs/base/browser/dom';
+import { IContextViewProvider } from 'vs/base/browser/ui/contextview/contextview';
+import { Color } from 'vs/base/common/color';
+import { InputBox } from 'vs/base/browser/ui/inputbox/inputBox';
+import Event, { Emitter } from 'vs/base/common/event';
+import { Widget } from 'vs/base/browser/ui/widget';
+
+export interface IRadioButtonOptions {
+	label: string;
+	enabled?: boolean;
+	checked?: boolean;
+}
+
+export class RadioButton extends Widget {
+
+	private inputElement: HTMLInputElement;
+	private _onClicked = new Emitter<void>();
+	public readonly onClicked: Event<void> = this._onClicked.event;
+	private _label: HTMLSpanElement;
+
+	constructor(container: HTMLElement, opts: IRadioButtonOptions) {
+		super();
+		this.inputElement = document.createElement('input');
+		this.inputElement.type = 'radio';
+
+		this._label = document.createElement('span');
+
+		this.label = opts.label;
+		this.enabled = opts.enabled || true;
+		this.checked = opts.checked || false;
+		this.onclick(this.inputElement, () => this._onClicked.fire());
+
+		container.appendChild(this.inputElement);
+		container.appendChild(this._label);
+	}
+
+	public set name(value: string) {
+		this.inputElement.setAttribute('name', value);
+	}
+
+	public get name(): string {
+		return this.inputElement.getAttribute('name');
+	}
+
+	public set value(value: string) {
+		this.inputElement.setAttribute('value', value);
+	}
+
+	public get value(): string {
+		return this.inputElement.getAttribute('value');
+	}
+
+	public set checked(val: boolean) {
+		this.inputElement.checked = val;
+	}
+
+	public get checked(): boolean {
+		return this.inputElement.checked;
+	}
+
+	public set enabled(val: boolean) {
+		this.inputElement.disabled = !val;
+	}
+
+	public get enabled(): boolean {
+		return !this.inputElement.disabled;
+	}
+
+	public isEnabled(): boolean {
+		return !this.inputElement.hasAttribute('disabled');
+	}
+
+	public set label(val: string) {
+		this._label.innerText = val;
+	}
+
+}

src/sql/base/browser/ui/scrollable/scrollable.directive.ts

@@ -3,11 +3,11 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { Directive, Inject, forwardRef, ElementRef } from '@angular/core';
+import { Directive, Inject, forwardRef, ElementRef, Input } from '@angular/core';
 
 import { ScrollableElement } from 'vs/base/browser/ui/scrollbar/scrollableElement';
 import { ScrollbarVisibility } from 'vs/base/common/scrollable';
-import { getContentHeight, addDisposableListener, EventType } from 'vs/base/browser/dom';
+import { getContentHeight, addDisposableListener, EventType, getContentWidth } from 'vs/base/browser/dom';
 import { AngularDisposable } from 'sql/base/common/lifecycle';
 
 @Directive({
@@ -17,33 +17,45 @@ export class ScrollableDirective extends AngularDisposable {
 	private scrollableElement: ScrollableElement;
 	private parent: HTMLElement;
 	private scrolled: HTMLElement;
+	@Input() horizontalScroll: ScrollbarVisibility;
+	@Input() verticalScroll: ScrollbarVisibility;
+	@Input() useShadow = false;
+	@Input() scrollYToX = false;
 
 	constructor(
 		@Inject(forwardRef(() => ElementRef)) private _el: ElementRef
 	) {
 		super();
+	}
+
+	ngOnInit() {
 		this.scrolled = this._el.nativeElement as HTMLElement;
 		this.parent = this.scrolled.parentElement;
+		const next = this.scrolled.nextSibling;
 		this.parent.removeChild(this.scrolled);
 
 		this.scrolled.style.position = 'relative';
 
 		this.scrollableElement = new ScrollableElement(this.scrolled, {
-			horizontal: ScrollbarVisibility.Hidden,
-			vertical: ScrollbarVisibility.Auto,
-			useShadows: false
+			horizontal: this.horizontalScroll,
+			vertical: this.verticalScroll,
+			useShadows: this.useShadow,
+			scrollYToX: this.scrollYToX,
+			horizontalScrollbarSize: 3
 		});
 
 		this.scrollableElement.onScroll(e => {
+			if (this.verticalScroll === ScrollbarVisibility.Auto) {
 				this.scrolled.style.bottom = e.scrollTop + 'px';
+			} else if (this.horizontalScroll === ScrollbarVisibility.Auto) {
+				this.scrolled.scrollLeft = e.scrollLeft;
+			}
 		});
 
-		this.parent.appendChild(this.scrollableElement.getDomNode());
+		this.parent.insertBefore(this.scrollableElement.getDomNode(), next);
 		const initialHeight = getContentHeight(this.scrolled);
-		this.scrollableElement.setScrollDimensions({
-			scrollHeight: getContentHeight(this.scrolled),
-			height: getContentHeight(this.parent)
-		});
+		const initalWidth = getContentWidth(this.scrolled);
+		this.resetScrollDimensions();
 
 		this._register(addDisposableListener(window, EventType.RESIZE, () => {
 			this.resetScrollDimensions();
@@ -52,24 +64,23 @@ export class ScrollableDirective extends AngularDisposable {
 		// unforunately because of angular rendering behavior we need to do a double check to make sure nothing changed after this point
 		setTimeout(() => {
 			let currentheight = getContentHeight(this.scrolled);
-			if (initialHeight !== currentheight) {
-				this.scrollableElement.setScrollDimensions({
-					scrollHeight: currentheight,
-					height: getContentHeight(this.parent)
-				});
+			let currentWidth = getContentWidth(this.scrolled);
+			if (initialHeight !== currentheight || initalWidth !== currentWidth) {
+				this.resetScrollDimensions();
 			}
 		}, 200);
-
 	}
 
 	private resetScrollDimensions() {
 		this.scrollableElement.setScrollDimensions({
-			scrollHeight: getContentHeight(this.scrolled),
-			height: getContentHeight(this.parent)
+			scrollHeight: this.verticalScroll === ScrollbarVisibility.Auto ? getContentHeight(this.scrolled) : undefined,
+			height:  this.verticalScroll === ScrollbarVisibility.Auto ? getContentHeight(this.parent) : undefined,
+			scrollWidth: this.horizontalScroll === ScrollbarVisibility.Auto ? this.scrolled.scrollWidth : undefined,
+			width: this.horizontalScroll === ScrollbarVisibility.Auto ? this.scrolled.offsetWidth : undefined
 		});
 	}
 
 	public layout() {
-
+		this.resetScrollDimensions();
 	}
 }

src/sql/base/browser/ui/scrollable/scrollable.module.ts

@@ -0,0 +1,15 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+
+import { ScrollableDirective } from './scrollable.directive';
+
+@NgModule({
+	imports: [CommonModule],
+	exports: [ScrollableDirective],
+	declarations: [ScrollableDirective]
+})
+export class ScrollableModule { }

src/sql/media/icons/common-icons.css

@@ -131,6 +131,14 @@
 	background: url("filter_inverse.svg") center center no-repeat !important;
 }
 
+.vs .icon.filterLabel {
+	background-image: url("filter.svg");
+}
+
+.vs-dark .icon.filterLabel,
+.hc-black .icon.filterLabel {
+	background-image: url("filter_inverse.svg");
+}
 
 .vs .icon.warning-badge,
 .vs-dark .icon.warning-badge,

src/sql/parts/accountManagement/accountDialog/accountDialog.ts

@@ -34,20 +34,28 @@ import { AccountProviderAddedEventParams, UpdateAccountListEventParams } from 's
 import { FixedListView } from 'sql/platform/views/fixedListView';
 import { IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
 
+export interface IProviderViewUiComponent {
+	view: FixedListView<sqlops.Account>;
+	addAccountAction: AddAccountAction;
+}
+
 export class AccountDialog extends Modal {
 	public static ACCOUNTLIST_HEIGHT = 77;
 
 	public viewModel: AccountViewModel;
 
 	// MEMBER VARIABLES ////////////////////////////////////////////////////
-	private _providerViews: { [providerId: string]: FixedListView<sqlops.Account> } = {};
+	private _providerViews: { [providerId: string]: IProviderViewUiComponent } = {};
 
 	private _closeButton: Button;
+	private _addAccountButton: Button;
 	private _delegate: AccountListDelegate;
 	private _accountRenderer: AccountListRenderer;
 	private _actionRunner: ActionRunner;
 	private _splitView: SplitView;
 	private _container: HTMLElement;
+	private _splitViewContainer: HTMLElement;
+	private _noaccountViewContainer: HTMLElement;
 
 	// EVENTING ////////////////////////////////////////////////////////////
 	private _onAddAccountErrorEmitter: Emitter<string>;
@@ -89,6 +97,14 @@ export class AccountDialog extends Modal {
 		this.viewModel.addProviderEvent(arg => { self.addProvider(arg); });
 		this.viewModel.removeProviderEvent(arg => { self.removeProvider(arg); });
 		this.viewModel.updateAccountListEvent(arg => { self.updateProviderAccounts(arg); });
+
+		// Load the initial contents of the view model
+		this.viewModel.initialize()
+			.then(addedProviders => {
+				for (let addedProvider of addedProviders) {
+					self.addProvider(addedProvider);
+				}
+			});
 	}
 
 	// MODAL OVERRIDE METHODS //////////////////////////////////////////////
@@ -104,26 +120,35 @@ export class AccountDialog extends Modal {
 		attachModalDialogStyler(this, this._themeService);
 		this._closeButton = this.addFooterButton(localize('accountDialog.close', 'Close'), () => this.close());
 		this.registerListeners();
-
-		// Load the initial contents of the view model
-		this.viewModel.initialize()
-			.then(addedProviders => {
-				for (let addedProvider of addedProviders) {
-					self.addProvider(addedProvider);
-				}
-			});
 	}
 
 	protected renderBody(container: HTMLElement) {
 		this._container = container;
-		let viewBody = DOM.$('div.account-view');
-		DOM.append(container, viewBody);
-		this._splitView = new SplitView(viewBody);
+		this._splitViewContainer = DOM.$('div.account-view');
+		DOM.append(container, this._splitViewContainer);
+		this._splitView = new SplitView(this._splitViewContainer);
+
+		this._noaccountViewContainer = DOM.$('div.no-account-view');
+		let noAccountTitle = DOM.append(this._noaccountViewContainer, DOM.$('.no-account-view-label'));
+		let noAccountLabel = localize('accountDialog.noAccountLabel', 'There is no linked account. Please add an acount.');
+		noAccountTitle.innerHTML = noAccountLabel;
+
+		// Show the add account button for the first provider
+		// Todo: If we have more than 1 provider, need to show all add account buttons for all providers
+		let buttonSection = DOM.append(this._noaccountViewContainer, DOM.$('div.button-section'));
+		this._addAccountButton = new Button(buttonSection);
+		this._addAccountButton.label = localize('accountDialog.addConnection', 'Add an account');
+		this._register(this._addAccountButton.onDidClick(() => {
+			(<IProviderViewUiComponent>Object.values(this._providerViews)[0]).addAccountAction.run();
+		}));
+
+		DOM.append(container, this._noaccountViewContainer);
 	}
 
 	private registerListeners(): void {
 		// Theme styler
 		this._register(attachButtonStyler(this._closeButton, this._themeService));
+		this._register(attachButtonStyler(this._addAccountButton, this._themeService));
 	}
 
 	/* Overwrite escape key behavior */
@@ -143,12 +168,48 @@ export class AccountDialog extends Modal {
 
 	public open() {
 		this.show();
+		if (!this.isEmptyLinkedAccount()) {
+			this.showSplitView();
+		} else {
+			this._splitViewContainer.hidden = true;
+			this._noaccountViewContainer.hidden = false;
+			this._addAccountButton.focus();
+		}
+
+	}
+
+	private showSplitView() {
+		this._splitViewContainer.hidden = false;
+		this._noaccountViewContainer.hidden = true;
+		let views = this._splitView.getViews();
+		if (views && views.length > 0) {
+			let firstView = views[0];
+			if (firstView instanceof FixedListView) {
+				firstView.list.setSelection([0]);
+				firstView.list.domFocus();
+			}
+		}
+	}
+
+	private isEmptyLinkedAccount(): boolean {
+		for (var providerId in this._providerViews) {
+			var listView = this._providerViews[providerId].view;
+			if (listView && listView.list.length > 0) {
+				return false;
+			}
+		}
+		return true;
 	}
 
 	public dispose(): void {
 		super.dispose();
 		for (let key in this._providerViews) {
-			this._providerViews[key].dispose();
+			if (this._providerViews[key].addAccountAction) {
+				this._providerViews[key].addAccountAction.dispose();
+			}
+			if (this._providerViews[key].view) {
+				this._providerViews[key].view.dispose();
+			}
 			delete this._providerViews[key];
 		}
 	}
@@ -199,21 +260,26 @@ export class AccountDialog extends Modal {
 
 		// Set the initial items of the list
 		providerView.updateList(newProvider.initialAccounts);
+
+		if (newProvider.initialAccounts.length > 0 && this._splitViewContainer.hidden) {
+			this.showSplitView();
+		}
+
 		this.layout();
 
-		// Store the view for the provider
-		this._providerViews[newProvider.addedProvider.id] = providerView;
+		// Store the view for the provider and action
+		this._providerViews[newProvider.addedProvider.id] = { view: providerView, addAccountAction: addAccountAction };
 	}
 
 	private removeProvider(removedProvider: sqlops.AccountProviderMetadata) {
 		// Skip removing the provider if it doesn't exist
 		let providerView = this._providerViews[removedProvider.id];
-		if (!providerView) {
+		if (!providerView || !providerView.view) {
 			return;
 		}
 
 		// Remove the list view from the split view
-		this._splitView.removeView(providerView);
+		this._splitView.removeView(providerView.view);
 		this._splitView.layout(DOM.getContentHeight(this._container));
 
 		// Remove the list view from our internal map
@@ -223,10 +289,15 @@ export class AccountDialog extends Modal {
 
 	private updateProviderAccounts(args: UpdateAccountListEventParams) {
 		let providerMapping = this._providerViews[args.providerId];
-		if (!providerMapping) {
+		if (!providerMapping || !providerMapping.view) {
 			return;
 		}
-		providerMapping.updateList(args.accountList);
+		providerMapping.view.updateList(args.accountList);
+
+		if (args.accountList.length > 0 && this._splitViewContainer.hidden) {
+			this.showSplitView();
+		}
+
 		this.layout();
 	}
 }

src/sql/parts/accountManagement/accountDialog/media/accountDialog.css

@@ -2,9 +2,49 @@
  *  Copyright (c) Microsoft Corporation. All rights reserved.
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
+.no-account-view {
+	font-size: 12px;
+	padding: 15px;
+}
 
-.account-view .monaco-split-view .split-view-view .header {
+.no-account-view .no-account-view-label {
+	padding-bottom: 15px;
+}
+
+.account-view .header {
+	position: relative;
+	line-height: 22px;
+	font-size: 11px;
+	font-weight: bold;
+	text-transform: uppercase;
+	padding-left: 20px;
 	padding-right: 12px;
+	overflow: hidden;
+	display: flex;
+}
+
+.account-view .header .title {
+	display: flex;
+	justify-content: flex-start;
+	flex: 1 1 auto;
+}
+
+.account-view .header .actions {
+	display: flex;
+	justify-content: flex-end;
+}
+
+.account-view .header .actions .action-item .action-label {
+	width: 30px;
+	background-size: 16px;
+	background-position: center center;
+	background-repeat: no-repeat;
+	margin-right: 0;
+	height: 22px;
+}
+
+.account-view .header .count-badge-wrapper {
+	justify-content: flex-end;
 }
 
 .account-view .provider-view .list-row {
@@ -59,23 +99,3 @@
 .account-view .provider-view .monaco-list .monaco-list-row.focused .list-row .actions-container{
 	display: block;
 }
-
-.account-view .split-view-view .header .title {
-	display: flex;
-	justify-content: flex-start;
-	flex: 1 1 auto;
-}
-
-.account-view .split-view-view .header .actions {
-	display: flex;
-	justify-content: flex-end;
-}
-
-.account-view .split-view-view .header .actions .action-item .action-label {
-	width: 30px;
-	background-size: 16px;
-	background-position: center center;
-	background-repeat: no-repeat;
-	margin-right: 0;
-	height: 22px;
-}

src/sql/parts/dashboard/common/dashboardPage.component.html

@@ -6,6 +6,7 @@
 -->
 <panel class="dashboard-panel" (onTabChange)="handleTabChange($event)" (onTabClose)="handleTabClose($event)" [actions]="panelActions">
 	<tab [visibilityType]="'visibility'" *ngFor="let tab of tabs" [title]="tab.title" class="fullsize" [identifier]="tab.id" [canClose]="tab.canClose" [actions]="tab.actions">
+		<ng-template>
 			<dashboard-home-container *ngIf="tab.id === 'homeTab'; else not_home" [properties]="propertiesWidget" [tab]="tab">
 			</dashboard-home-container>
 			<ng-template #not_home>
@@ -24,5 +25,6 @@
 				<dashboard-error-container *ngIf="getContentType(tab) === 'error-container'" [tab]="tab">
 				</dashboard-error-container>
 			</ng-template>
+		</ng-template>
 	</tab>
 </panel>

src/sql/parts/dashboard/common/dashboardPage.component.ts

@@ -17,7 +17,7 @@ import { IPropertiesConfig } from 'sql/parts/dashboard/pages/serverDashboardPage
 import { PanelComponent } from 'sql/base/browser/ui/panel/panel.component';
 import { IDashboardRegistry, Extensions as DashboardExtensions, IDashboardTab } from 'sql/platform/dashboard/common/dashboardRegistry';
 import { PinUnpinTabAction, AddFeatureTabAction } from './actions';
-import { TabComponent } from 'sql/base/browser/ui/panel/tab.component';
+import { TabComponent, TabChild } from 'sql/base/browser/ui/panel/tab.component';
 import { IBootstrapService, BOOTSTRAP_SERVICE_ID } from 'sql/services/bootstrap/bootstrapService';
 import { AngularEventType } from 'sql/services/angularEventing/angularEventingService';
 import { DashboardTab } from 'sql/parts/dashboard/common/interfaces';
@@ -61,7 +61,7 @@ export abstract class DashboardPage extends AngularDisposable {
 	private _tabsDispose: Array<IDisposable> = [];
 	private _tabSettingConfigs: Array<TabSettingConfig> = [];
 
-	@ViewChildren(DashboardTab) private _tabs: QueryList<DashboardTab>;
+	@ViewChildren(TabChild) private _tabs: QueryList<DashboardTab>;
 	@ViewChild(PanelComponent) private _panel: PanelComponent;
 
 	private _editEnabled = new Emitter<boolean>();
@@ -142,7 +142,6 @@ export abstract class DashboardPage extends AngularDisposable {
 			actions: []
 		};
 		this.addNewTab(homeTab);
-		this._panel.selectTab(homeTab.id);
 
 		let allTabs = dashboardHelper.filterConfigs(dashboardRegistry.tabs, this.dashboardService);
 
@@ -254,7 +253,6 @@ export abstract class DashboardPage extends AngularDisposable {
 		}
 	}
 
-
 	private getContentType(tab: TabConfig): string {
 		return tab.container ? Object.keys(tab.container)[0] : '';
 	}
@@ -310,10 +308,10 @@ export abstract class DashboardPage extends AngularDisposable {
 	}
 
 	public handleTabChange(tab: TabComponent): void {
+		this._cd.detectChanges();
 		let localtab = this._tabs.find(i => i.id === tab.identifier);
 		this._editEnabled.fire(localtab.editable);
 		this._cd.detectChanges();
-		localtab.layout();
 	}
 
 	public handleTabClose(tab: TabComponent): void {

src/sql/parts/dashboard/common/dashboardPanelStyles.ts

@@ -15,22 +15,22 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 	const tabActiveForeground = theme.getColor(TAB_ACTIVE_FOREGROUND);
 	if (tabActiveBackground || tabActiveForeground) {
 		collector.addRule(`
-			panel.dashboard-panel > .tabbedPanel > .title > .monaco-scrollable-element > .tabList .tab:hover .tabLabel,
-			panel.dashboard-panel > .tabbedPanel > .title > .monaco-scrollable-element > .tabList .tab .tabLabel.active {
+			panel.dashboard-panel > .tabbedPanel > .title .tabList .tab:hover .tabLabel,
+			panel.dashboard-panel > .tabbedPanel > .title .tabList .tab .tabLabel.active {
 				color: ${tabActiveForeground};
 				border-bottom: 0px solid;
 			}
 
-			panel.dashboard-panel > .tabbedPanel > .title > .monaco-scrollable-element > .tabList .tab-header.active {
+			panel.dashboard-panel > .tabbedPanel > .title .tabList .tab-header.active {
 				background-color: ${tabActiveBackground};
 				outline-color: ${tabActiveBackground};
 			}
 
-			panel.dashboard-panel > .tabbedPanel.horizontal > .title > .monaco-scrollable-element > .tabList .tab-header.active {
+			panel.dashboard-panel > .tabbedPanel.horizontal > .title .tabList .tab-header.active {
 				border-bottom-color: transparent;
 			}
 
-			panel.dashboard-panel > .tabbedPanel.vertical > .title > .monaco-scrollable-element > .tabList .tab-header.active {
+			panel.dashboard-panel > .tabbedPanel.vertical > .title .tabList .tab-header.active {
 				border-right-color: transparent;
 			}
 		`);
@@ -39,7 +39,7 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 	const activeTabBorderColor = theme.getColor(TAB_ACTIVE_BORDER);
 	if (activeTabBorderColor) {
 		collector.addRule(`
-			panel.dashboard-panel > .tabbedPanel > .title > .monaco-scrollable-element > .tabList .tab-header.active {
+			panel.dashboard-panel > .tabbedPanel > .title .tabList .tab-header.active {
 				box-shadow: ${activeTabBorderColor} 0 -1px inset;
 			}
 		`);
@@ -50,11 +50,11 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 	const tabInactiveForeground = theme.getColor(TAB_INACTIVE_FOREGROUND);
 	if (tabInactiveBackground || tabInactiveForeground) {
 		collector.addRule(`
-			panel.dashboard-panel > .tabbedPanel > .title > .monaco-scrollable-element > .tabList .tab .tabLabel {
+			panel.dashboard-panel > .tabbedPanel > .title .tabList .tab .tabLabel {
 				color: ${tabInactiveForeground};
 			}
 
-			panel.dashboard-panel > .tabbedPanel > .title > .monaco-scrollable-element > .tabList .tab-header {
+			panel.dashboard-panel > .tabbedPanel > .title .tabList .tab-header {
 				background-color: ${tabInactiveBackground};
 			}
 		`);
@@ -71,12 +71,12 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 	}
 
 	// Panel title background
-	const tabBoarder = theme.getColor(TAB_BORDER);
-	if (tabBoarder) {
+	const tabBorder = theme.getColor(TAB_BORDER);
+	if (tabBorder) {
 		collector.addRule(`
-			panel.dashboard-panel > .tabbedPanel > .title > .monaco-scrollable-element > .tabList .tab-header {
-				border-right-color: ${tabBoarder};
-				border-bottom-color: ${tabBoarder};
+			panel.dashboard-panel > .tabbedPanel > .title .tabList .tab-header {
+				border-right-color: ${tabBorder};
+				border-bottom-color: ${tabBorder};
 			}
 		`);
 	}
@@ -86,13 +86,13 @@ registerThemingParticipant((theme: ITheme, collector: ICssStyleCollector) => {
 	if (outline) {
 		collector.addRule(`
 			panel.dashboard-panel > .tabbedPanel > .title {
-				border-bottom-color: ${tabBoarder};
+				border-bottom-color: ${tabBorder};
 				border-bottom-width: 1px;
 				border-bottom-style: solid;
 			}
 
 			panel.dashboard-panel > .tabbedPanel.vertical > .title {
-				border-right-color: ${tabBoarder};
+				border-right-color: ${tabBorder};
 				border-right-width: 1px;
 				border-right-style: solid;
 			}

src/sql/parts/dashboard/common/interfaces.ts

@@ -3,9 +3,13 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
+import { OnDestroy } from '@angular/core';
+
 import Event from 'vs/base/common/event';
+import { IDisposable, dispose } from 'vs/base/common/lifecycle';
 
 import { AngularDisposable } from 'sql/base/common/lifecycle';
+import { TabChild } from 'sql/base/browser/ui/panel/tab.component';
 
 export enum Conditional {
 	'equals',
@@ -17,7 +21,7 @@ export enum Conditional {
 	'always'
 }
 
-export abstract class DashboardTab extends AngularDisposable {
+export abstract class DashboardTab extends TabChild implements OnDestroy {
 	public abstract layout(): void;
 	public abstract readonly id: string;
 	public abstract readonly editable: boolean;
@@ -26,4 +30,23 @@ export abstract class DashboardTab extends AngularDisposable {
 	public enableEdit(): void {
 		// no op
 	}
+
+	private _toDispose: IDisposable[] = [];
+
+	constructor() {
+		super();
+	}
+
+	public dispose(): void {
+		this._toDispose = dispose(this._toDispose);
+	}
+
+	protected _register<T extends IDisposable>(t: T): T {
+		this._toDispose.push(t);
+		return t;
+	}
+
+	ngOnDestroy() {
+		this.dispose();
+	}
 }

src/sql/parts/dashboard/containers/dashboardControlHostContainer.component.ts

@@ -5,14 +5,17 @@
 import 'vs/css!./dashboardControlHostContainer';
 
 import { Component, forwardRef, Input, AfterContentInit, ViewChild, OnChanges } from '@angular/core';
+
 import Event, { Emitter } from 'vs/base/common/event';
+
 import { DashboardTab } from 'sql/parts/dashboard/common/interfaces';
 import { TabConfig } from 'sql/parts/dashboard/common/dashboardWidget';
 import { ControlHostContent } from 'sql/parts/dashboard/contents/controlHostContent.component';
+import { TabChild } from 'sql/base/browser/ui/panel/tab.component';
 
 @Component({
 	selector: 'dashboard-controlhost-container',
-	providers: [{ provide: DashboardTab, useExisting: forwardRef(() => DashboardControlHostContainer) }],
+	providers: [{ provide: TabChild, useExisting: forwardRef(() => DashboardControlHostContainer) }],
 	template: `
 		<controlhost-content [webviewId]="tab.id">
 		</controlhost-content>

src/sql/parts/dashboard/containers/dashboardErrorContainer.component.ts

@@ -9,13 +9,14 @@ import { Component, Inject, Input, forwardRef, ViewChild, ElementRef, ChangeDete
 
 import { TabConfig } from 'sql/parts/dashboard/common/dashboardWidget';
 import { DashboardTab } from 'sql/parts/dashboard/common/interfaces';
+import { TabChild } from 'sql/base/browser/ui/panel/tab.component';
 
 import Event, { Emitter } from 'vs/base/common/event';
 import * as nls from 'vs/nls';
 
 @Component({
 	selector: 'dashboard-error-container',
-	providers: [{ provide: DashboardTab, useExisting: forwardRef(() => DashboardErrorContainer) }],
+	providers: [{ provide: TabChild, useExisting: forwardRef(() => DashboardErrorContainer) }],
 	template: `
 		<div class="error-container">
 			<div class="icon globalError">

src/sql/parts/dashboard/containers/dashboardGridContainer.component.ts

@@ -7,6 +7,7 @@ import 'vs/css!./dashboardGridContainer';
 
 import { Component, Inject, Input, forwardRef, ViewChild, ElementRef, ViewChildren, QueryList, OnDestroy, ChangeDetectorRef, EventEmitter } from '@angular/core';
 import { NgGridConfig, NgGrid, NgGridItem } from 'angular2-grid';
+import { concat } from 'rxjs/operator/concat';
 
 import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboardServiceInterface.service';
 import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
@@ -14,13 +15,13 @@ import { TabConfig, WidgetConfig } from 'sql/parts/dashboard/common/dashboardWid
 import { DashboardWidgetWrapper } from 'sql/parts/dashboard/contents/dashboardWidgetWrapper.component';
 import { subscriptionToDisposable } from 'sql/base/common/lifecycle';
 import { DashboardTab } from 'sql/parts/dashboard/common/interfaces';
+import { WebviewContent } from 'sql/parts/dashboard/contents/webviewContent.component';
+import { TabChild } from 'sql/base/browser/ui/panel/tab.component';
 
 import { Disposable, IDisposable } from 'vs/base/common/lifecycle';
 import { ConfigurationTarget } from 'vs/platform/configuration/common/configuration';
 import * as objects from 'vs/base/common/objects';
 import Event, { Emitter } from 'vs/base/common/event';
-import { concat } from 'rxjs/operator/concat';
-import { WebviewContent } from 'sql/parts/dashboard/contents/webviewContent.component';
 
 export interface GridCellConfig {
 	id?: string;
@@ -42,7 +43,7 @@ export interface GridWebviewConfig extends GridCellConfig {
 @Component({
 	selector: 'dashboard-grid-container',
 	templateUrl: decodeURI(require.toUrl('sql/parts/dashboard/containers/dashboardGridContainer.component.html')),
-	providers: [{ provide: DashboardTab, useExisting: forwardRef(() => DashboardGridContainer) }]
+	providers: [{ provide: TabChild, useExisting: forwardRef(() => DashboardGridContainer) }]
 })
 export class DashboardGridContainer extends DashboardTab implements OnDestroy {
 	@Input() private tab: TabConfig;

src/sql/parts/dashboard/containers/dashboardHomeContainer.component.ts

@@ -14,15 +14,18 @@ import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboar
 import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
 import { AngularEventType } from 'sql/services/angularEventing/angularEventingService';
 import { DashboardWidgetWrapper } from 'sql/parts/dashboard/contents/dashboardWidgetWrapper.component';
-import { ConfigurationTarget } from 'vs/platform/configuration/common/configuration';
 import { ScrollableDirective } from 'sql/base/browser/ui/scrollable/scrollable.directive';
+import { TabChild } from 'sql/base/browser/ui/panel/tab.component';
+
+import { ConfigurationTarget } from 'vs/platform/configuration/common/configuration';
+import { ScrollbarVisibility } from 'vs/base/common/scrollable';
 
 @Component({
 	selector: 'dashboard-home-container',
-	providers: [{ provide: DashboardTab, useExisting: forwardRef(() => DashboardHomeContainer) }],
+	providers: [{ provide: TabChild, useExisting: forwardRef(() => DashboardHomeContainer) }],
 	template: `
 		<div class="fullsize" style="display: flex; flex-direction: column">
-			<div scrollable>
+			<div scrollable [horizontalScroll]="ScrollbarVisibility.Hidden" [verticalScroll]="ScrollbarVisibility.Auto">
 				<dashboard-widget-wrapper #propertiesClass *ngIf="properties" [collapsable]="true" [_config]="properties"
 					style="padding-left: 10px; padding-right: 10px; display: block; flex: 0" [style.height.px]="_propertiesClass?.collapsed ? '30' : '90'">
 				</dashboard-widget-wrapper>
@@ -37,6 +40,8 @@ export class DashboardHomeContainer extends DashboardWidgetContainer {
 	@ViewChild('propertiesClass') private _propertiesClass: DashboardWidgetWrapper;
 	@ContentChild(ScrollableDirective) private _scrollable;
 
+	private ScrollbarVisibility = ScrollbarVisibility;
+
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) _cd: ChangeDetectorRef,
 		@Inject(forwardRef(() => CommonServiceInterface)) protected dashboardService: DashboardServiceInterface
@@ -63,6 +68,8 @@ export class DashboardHomeContainer extends DashboardWidgetContainer {
 
 	public layout() {
 		super.layout();
+		if (this._scrollable) {
 			this._scrollable.layout();
 		}
 	}
+}

src/sql/parts/dashboard/containers/dashboardModelViewContainer.component.ts

@@ -11,10 +11,11 @@ import Event, { Emitter } from 'vs/base/common/event';
 import { DashboardTab } from 'sql/parts/dashboard/common/interfaces';
 import { TabConfig } from 'sql/parts/dashboard/common/dashboardWidget';
 import { ModelViewContent } from 'sql/parts/modelComponents/modelViewContent.component';
+import { TabChild } from 'sql/base/browser/ui/panel/tab.component';
 
 @Component({
 	selector: 'dashboard-modelview-container',
-	providers: [{ provide: DashboardTab, useExisting: forwardRef(() => DashboardModelViewContainer) }],
+	providers: [{ provide: TabChild, useExisting: forwardRef(() => DashboardModelViewContainer) }],
 	template: `
 		<modelview-content [modelViewId]="tab.id">
 		</modelview-content>

src/sql/parts/dashboard/containers/dashboardNavSection.component.html

@@ -4,9 +4,10 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 -->
-<panel [options]="panelOpt" style="flex: 1 1 auto;" class="dashboard-panel" (onTabChange)="handleTabChange($event)">
+<panel [options]="panelOpt" style="flex: 1 1 auto;" class="dashboard-panel">
 	<tab [visibilityType]="'visibility'" *ngFor="let tab of tabs" [title]="tab.title" class="fullsize"
 	[identifier]="tab.id" [canClose]="tab.canClose" [actions]="tab.actions" [iconClass]="tab.iconClass">
+		<ng-template>
 			<dashboard-webview-container *ngIf="getContentType(tab) === 'webview-container'" [tab]="tab">
 			</dashboard-webview-container>
 			<dashboard-widget-container *ngIf="getContentType(tab) === 'widgets-container'" [tab]="tab">
@@ -17,5 +18,6 @@
 			</dashboard-grid-container>
 			<dashboard-error-container *ngIf="getContentType(tab) === 'error-container'" [tab]="tab">
 			</dashboard-error-container>
+		</ng-template>
 	</tab>
 </panel>

src/sql/parts/dashboard/containers/dashboardNavSection.component.ts

@@ -11,7 +11,7 @@ import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboar
 import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
 import { WidgetConfig, TabConfig, NavSectionConfig } from 'sql/parts/dashboard/common/dashboardWidget';
 import { PanelComponent, IPanelOptions, NavigationBarLayout } from 'sql/base/browser/ui/panel/panel.component';
-import { TabComponent } from 'sql/base/browser/ui/panel/tab.component';
+import { TabComponent, TabChild } from 'sql/base/browser/ui/panel/tab.component';
 import { DashboardTab } from 'sql/parts/dashboard/common/interfaces';
 import { WIDGETS_CONTAINER } from 'sql/parts/dashboard/containers/dashboardWidgetContainer.contribution';
 import { GRID_CONTAINER } from 'sql/parts/dashboard/containers/dashboardGridContainer.contribution';
@@ -23,7 +23,7 @@ import * as nls from 'vs/nls';
 
 @Component({
 	selector: 'dashboard-nav-section',
-	providers: [{ provide: DashboardTab, useExisting: forwardRef(() => DashboardNavSection) }],
+	providers: [{ provide: TabChild, useExisting: forwardRef(() => DashboardNavSection) }],
 	templateUrl: decodeURI(require.toUrl('sql/parts/dashboard/containers/dashboardNavSection.component.html'))
 })
 export class DashboardNavSection extends DashboardTab implements OnDestroy, OnChanges, AfterContentInit {
@@ -51,7 +51,7 @@ export class DashboardNavSection extends DashboardTab implements OnDestroy, OnCh
 		dashboardHelper.validateGridConfig
 	];
 
-	@ViewChildren(DashboardTab) private _tabs: QueryList<DashboardTab>;
+	@ViewChildren(TabChild) private _tabs: QueryList<DashboardTab>;
 	@ViewChild(PanelComponent) private _panel: PanelComponent;
 	constructor(
 		@Inject(forwardRef(() => CommonServiceInterface)) protected dashboardService: CommonServiceInterface,
@@ -124,11 +124,6 @@ export class DashboardNavSection extends DashboardTab implements OnDestroy, OnCh
 				this.addNewTab(config);
 				return config;
 			});
-
-			// put this immediately on the stack so that is ran *after* the tab is rendered
-			setTimeout(() => {
-				this._panel.selectTab(selectedTabs[0].id);
-			});
 		}
 	}
 
@@ -174,10 +169,4 @@ export class DashboardNavSection extends DashboardTab implements OnDestroy, OnCh
 			});
 		}
 	}
-
-	public handleTabChange(tab: TabComponent): void {
-		let localtab = this._tabs.find(i => i.id === tab.identifier);
-		this._cd.detectChanges();
-		localtab.layout();
-	}
 }

src/sql/parts/dashboard/containers/dashboardWebviewContainer.component.ts

@@ -11,10 +11,11 @@ import Event, { Emitter } from 'vs/base/common/event';
 import { DashboardTab } from 'sql/parts/dashboard/common/interfaces';
 import { TabConfig } from 'sql/parts/dashboard/common/dashboardWidget';
 import { WebviewContent } from 'sql/parts/dashboard/contents/webviewContent.component';
+import { TabChild } from 'sql/base/browser/ui/panel/tab.component';
 
 @Component({
 	selector: 'dashboard-webview-container',
-	providers: [{ provide: DashboardTab, useExisting: forwardRef(() => DashboardWebviewContainer) }],
+	providers: [{ provide: TabChild, useExisting: forwardRef(() => DashboardWebviewContainer) }],
 	template: `
 		<webview-content [webviewId]="tab.id">
 		</webview-content>

src/sql/parts/dashboard/containers/dashboardWidgetContainer.component.ts

@@ -14,6 +14,7 @@ import { DashboardWidgetWrapper } from 'sql/parts/dashboard/contents/dashboardWi
 import { subscriptionToDisposable } from 'sql/base/common/lifecycle';
 import { DashboardTab } from 'sql/parts/dashboard/common/interfaces';
 import { WidgetContent } from 'sql/parts/dashboard/contents/widgetContent.component';
+import { TabChild } from 'sql/base/browser/ui/panel/tab.component';
 
 import { Disposable, IDisposable } from 'vs/base/common/lifecycle';
 import { ConfigurationTarget } from 'vs/platform/configuration/common/configuration';
@@ -22,7 +23,7 @@ import Event, { Emitter } from 'vs/base/common/event';
 
 @Component({
 	selector: 'dashboard-widget-container',
-	providers: [{ provide: DashboardTab, useExisting: forwardRef(() => DashboardWidgetContainer) }],
+	providers: [{ provide: TabChild, useExisting: forwardRef(() => DashboardWidgetContainer) }],
 	template: `
 		<widget-content [widgets]="widgets" [originalConfig]="tab.originalConfig" [context]="tab.context">
 		</widget-content>

src/sql/parts/dashboard/contents/controlHostContent.component.ts

@@ -10,7 +10,6 @@ import Event, { Emitter } from 'vs/base/common/event';
 import { Parts } from 'vs/workbench/services/part/common/partService';
 import { IDisposable } from 'vs/base/common/lifecycle';
 
-import { DashboardTab } from 'sql/parts/dashboard/common/interfaces';
 import { TabConfig } from 'sql/parts/dashboard/common/dashboardWidget';
 import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboardServiceInterface.service';
 import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';

src/sql/parts/dashboard/contents/webviewContent.component.ts

@@ -13,7 +13,6 @@ import { IDisposable, Disposable } from 'vs/base/common/lifecycle';
 import { addDisposableListener, EventType } from 'vs/base/browser/dom';
 import { memoize } from 'vs/base/common/decorators';
 
-import { DashboardTab } from 'sql/parts/dashboard/common/interfaces';
 import { TabConfig } from 'sql/parts/dashboard/common/dashboardWidget';
 import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboardServiceInterface.service';
 import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
@@ -37,15 +36,13 @@ export class WebviewContent extends AngularDisposable implements OnInit, IDashbo
 	private _onMessageDisposable: IDisposable;
 	private _webview: Webview;
 	private _html: string;
-	private _dashboardService: DashboardServiceInterface;
 
 	constructor(
-		@Inject(forwardRef(() => CommonServiceInterface)) private commonService: CommonServiceInterface,
+		@Inject(forwardRef(() => CommonServiceInterface)) private _dashboardService: DashboardServiceInterface,
 		@Inject(forwardRef(() => ChangeDetectorRef)) private _changeRef: ChangeDetectorRef,
 		@Inject(forwardRef(() => ElementRef)) private _el: ElementRef
 	) {
 		super();
-		this._dashboardService = commonService as DashboardServiceInterface;
 	}
 
 	ngOnInit() {

src/sql/parts/dashboard/dashboard.module.ts

@@ -56,12 +56,13 @@ import { JobHistoryComponent } from 'sql/parts/jobManagement/views/jobHistory.co
 let baseComponents = [DashboardHomeContainer, DashboardComponent, DashboardWidgetWrapper, DashboardWebviewContainer,
 	DashboardWidgetContainer, DashboardGridContainer, DashboardErrorContainer, DashboardNavSection, ModelViewContent, WebviewContent, WidgetContent,
 	ComponentHostDirective, BreadcrumbComponent, ControlHostContent, DashboardControlHostContainer,
-	JobsViewComponent, AgentViewComponent, JobHistoryComponent, JobStepsViewComponent, DashboardModelViewContainer, ModelComponentWrapper,
-	ScrollableDirective];
+	JobsViewComponent, AgentViewComponent, JobHistoryComponent, JobStepsViewComponent, DashboardModelViewContainer, ModelComponentWrapper];
 
 /* Panel */
 import { PanelModule } from 'sql/base/browser/ui/panel/panel.module';
 
+import { ScrollableModule } from 'sql/base/browser/ui/scrollable/scrollable.module';
+
 /* Pages */
 import { ServerDashboardPage } from 'sql/parts/dashboard/pages/serverDashboardPage.component';
 import { DatabaseDashboardPage } from 'sql/parts/dashboard/pages/databaseDashboardPage.component';
@@ -75,7 +76,6 @@ import { TasksWidget } from 'sql/parts/dashboard/widgets/tasks/tasksWidget.compo
 import { InsightsWidget } from 'sql/parts/dashboard/widgets/insights/insightsWidget.component';
 import { WebviewWidget } from 'sql/parts/dashboard/widgets/webview/webviewWidget.component';
 import { JobStepsViewComponent } from '../jobManagement/views/jobStepsView.component';
-import { ScrollableDirective } from 'sql/base/browser/ui/scrollable/scrollable.directive';
 
 let widgetComponents = [
 	PropertiesWidgetComponent,
@@ -126,7 +126,8 @@ const appRoutes: Routes = [
 		NgGridModule,
 		ChartsModule,
 		RouterModule.forRoot(appRoutes),
-		PanelModule
+		PanelModule,
+		ScrollableModule
 	],
 	providers: [
 		{ provide: APP_BASE_HREF, useValue: '/' },

src/sql/parts/dashboard/widgets/insights/views/tableInsight.component.ts

@@ -6,24 +6,31 @@ import { Component, Input, Inject, ChangeDetectorRef, forwardRef, ElementRef, On
 
 import { getContentHeight, getContentWidth } from 'vs/base/browser/dom';
 import { Dimension } from 'vs/base/browser/builder';
+import { Disposable } from 'vs/base/common/lifecycle';
 
 import { IInsightsView, IInsightData } from 'sql/parts/dashboard/widgets/insights/interfaces';
 import { Table } from 'sql/base/browser/ui/table/table';
 import { TableDataView } from 'sql/base/browser/ui/table/tableDataView';
-import { DragCellSelectionModel } from '../../../../../base/browser/ui/table/plugins/dragCellSelectionModel.plugin';
+import { DragCellSelectionModel } from 'sql/base/browser/ui/table/plugins/dragCellSelectionModel.plugin';
+import { attachTableStyler} from 'sql/common/theme/styler';
+import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
 
 @Component({
 	template: '<span></span>'
 })
-export default class TableInsight implements IInsightsView, OnInit {
+export default class TableInsight extends Disposable implements IInsightsView, OnInit {
 	private table: Table<any>;
 	private dataView: TableDataView<any>;
 	private columns: Slick.Column<any>[];
 
 	constructor(
 		@Inject(forwardRef(() => ChangeDetectorRef)) private _changeRef: ChangeDetectorRef,
-		@Inject(forwardRef(() => ElementRef)) private _elementRef: ElementRef
-	) { }
+		@Inject(forwardRef(() => ElementRef)) private _elementRef: ElementRef,
+		@Inject(forwardRef(() => CommonServiceInterface)) private _bootstrap: CommonServiceInterface,
+	) {
+		super();
+		this._elementRef.nativeElement.className = 'slickgridContainer';
+	}
 
 	ngOnInit() {
 		this.createTable();
@@ -58,6 +65,7 @@ export default class TableInsight implements IInsightsView, OnInit {
 		if (!this.table) {
 			this.table = new Table(this._elementRef.nativeElement, this.dataView, this.columns, { showRowNumber: true });
 			this.table.setSelectionModel(new DragCellSelectionModel());
+			this._register(attachTableStyler(this.table, this._bootstrap.themeService));
 		}
 	}
 }

src/sql/parts/editData/common/editDataInput.ts

@@ -4,19 +4,21 @@
  *--------------------------------------------------------------------------------------------*/
 
 import { TPromise } from 'vs/base/common/winjs.base';
-import { EditorInput, EditorModel } from 'vs/workbench/common/editor';
+import { EditorInput, EditorModel, ConfirmResult, EncodingMode } from 'vs/workbench/common/editor';
 import { IConnectionManagementService, IConnectableInput, INewConnectionParams } from 'sql/parts/connection/common/connectionManagement';
 import { IQueryModelService } from 'sql/parts/query/execution/queryModel';
 import { IDisposable, dispose } from 'vs/base/common/lifecycle';
 import Event, { Emitter } from 'vs/base/common/event';
-import { EditSessionReadyParams } from 'sqlops';
+import { EditSessionReadyParams, ISelectionData } from 'sqlops';
 import URI from 'vs/base/common/uri';
 import nls = require('vs/nls');
 import { INotificationService } from 'vs/platform/notification/common/notification';
 import Severity from 'vs/base/common/severity';
+import { UntitledEditorInput } from 'vs/workbench/common/editor/untitledEditorInput';
+import { EditDataResultsInput } from 'sql/parts/editData/common/editDataResultsInput';
 
 /**
- * Input for the EditDataEditor. This input is simply a wrapper around a QueryResultsInput for the QueryResultsEditor
+ * Input for the EditDataEditor.
  */
 export class EditDataInput extends EditorInput implements IConnectableInput {
 	public static ID: string = 'workbench.editorinputs.editDataInput';
@@ -25,15 +27,23 @@ export class EditDataInput extends EditorInput implements IConnectableInput {
 	private _editorContainer: HTMLElement;
 	private _updateTaskbar: Emitter<EditDataInput>;
 	private _editorInitializing: Emitter<boolean>;
-	private _showTableView: Emitter<EditDataInput>;
+	private _showResultsEditor: Emitter<EditDataInput>;
 	private _refreshButtonEnabled: boolean;
 	private _stopButtonEnabled: boolean;
 	private _setup: boolean;
 	private _toDispose: IDisposable[];
 	private _rowLimit: number;
 	private _objectType: string;
+	private _css: HTMLStyleElement;
+	private _useQueryFilter: boolean;
 
-	constructor(private _uri: URI, private _schemaName, private _tableName,
+	constructor(
+		private _uri: URI,
+		private _schemaName,
+		private _tableName,
+		private _sql: UntitledEditorInput,
+		private _queryString: string,
+		private _results: EditDataResultsInput,
 		@IConnectionManagementService private _connectionManagementService: IConnectionManagementService,
 		@IQueryModelService private _queryModelService: IQueryModelService,
 		@INotificationService private notificationService: INotificationService
@@ -42,12 +52,20 @@ export class EditDataInput extends EditorInput implements IConnectableInput {
 		this._visible = false;
 		this._hasBootstrapped = false;
 		this._updateTaskbar = new Emitter<EditDataInput>();
-		this._showTableView = new Emitter<EditDataInput>();
+		this._showResultsEditor = new Emitter<EditDataInput>();
 		this._editorInitializing = new Emitter<boolean>();
 		this._setup = false;
 		this._stopButtonEnabled = false;
 		this._refreshButtonEnabled = false;
 		this._toDispose = [];
+		this._useQueryFilter = false;
+
+		// re-emit sql editor events through this editor if it exists
+		if (this._sql) {
+			this._toDispose.push(this._sql.onDidChangeDirty(() => this._onDidChangeDirty.fire()));
+			this._sql.disableSaving();
+		}
+		this.disableSaving();
 
 		//TODO determine is this is a table or a view
 		this._objectType = 'TABLE';
@@ -79,27 +97,45 @@ export class EditDataInput extends EditorInput implements IConnectableInput {
 	public get tableName(): string { return this._tableName; }
 	public get schemaName(): string { return this._schemaName; }
 	public get uri(): string { return this._uri.toString(); }
-	public get updateTaskbar(): Event<EditDataInput> { return this._updateTaskbar.event; }
-	public get editorInitializing(): Event<boolean> { return this._editorInitializing.event; }
-	public get showTableView(): Event<EditDataInput> { return this._showTableView.event; }
+	public get sql(): UntitledEditorInput { return this._sql; }
+	public get results(): EditDataResultsInput { return this._results; }
+	public getResultsInputResource(): string { return this._results.uri; }
+	public get updateTaskbarEvent(): Event<EditDataInput> { return this._updateTaskbar.event; }
+	public get editorInitializingEvent(): Event<boolean> { return this._editorInitializing.event; }
+	public get showResultsEditorEvent(): Event<EditDataInput> { return this._showResultsEditor.event; }
 	public get stopButtonEnabled(): boolean { return this._stopButtonEnabled; }
 	public get refreshButtonEnabled(): boolean { return this._refreshButtonEnabled; }
 	public get container(): HTMLElement { return this._editorContainer; }
 	public get hasBootstrapped(): boolean { return this._hasBootstrapped; }
-	public get visible(): boolean { return this._visible; }
 	public get setup(): boolean { return this._setup; }
 	public get rowLimit(): number { return this._rowLimit; }
 	public get objectType(): string { return this._objectType; }
+	public showResultsEditor(): void { this._showResultsEditor.fire(); }
+	public isDirty(): boolean { return false; }
+	public save(): TPromise<boolean> { return TPromise.as(false); }
+	public confirmSave(): TPromise<ConfirmResult> { return TPromise.wrap(ConfirmResult.DONT_SAVE); }
 	public getTypeId(): string { return EditDataInput.ID; }
-	public setVisibleTrue(): void { this._visible = true; }
 	public setBootstrappedTrue(): void { this._hasBootstrapped = true; }
 	public getResource(): URI { return this._uri; }
-	public getName(): string { return this._uri.path; }
 	public supportsSplitEditor(): boolean { return false; }
 	public setupComplete() { this._setup = true; }
-	public set container(container: HTMLElement) {
-		this._disposeContainer();
-		this._editorContainer = container;
+	public get queryString(): string {
+		return this._queryString;
+	}
+	public set queryString(queryString: string) {
+		this._queryString = queryString;
+	}
+	public get css(): HTMLStyleElement {
+		return this._css;
+	}
+	public set css(css: HTMLStyleElement) {
+		this._css = css;
+	}
+	public get queryPaneEnabled(): boolean {
+		return this._useQueryFilter;
+	}
+	public set queryPaneEnabled(useQueryFilter: boolean) {
+		this._useQueryFilter = useQueryFilter;
 	}
 
 	// State Update Callbacks
@@ -111,13 +147,9 @@ export class EditDataInput extends EditorInput implements IConnectableInput {
 	}
 
 	public initEditEnd(result: EditSessionReadyParams): void {
-		if (result.success) {
 		this._refreshButtonEnabled = true;
 		this._stopButtonEnabled = false;
-		} else {
-			this._refreshButtonEnabled = false;
-			this._stopButtonEnabled = false;
-
+		if (!result.success) {
 			this.notificationService.notify({
 				severity: Severity.Error,
 				message: result.message
@@ -142,8 +174,16 @@ export class EditDataInput extends EditorInput implements IConnectableInput {
 	}
 
 	public onConnectSuccess(params?: INewConnectionParams): void {
-		this._queryModelService.initializeEdit(this.uri, this.schemaName, this.tableName, this._objectType, this._rowLimit);
-		this._showTableView.fire(this);
+		let rowLimit: number = undefined;
+		let queryString: string = undefined;
+		if (this._useQueryFilter) {
+			queryString = this._queryString;
+		} else {
+			rowLimit = this._rowLimit;
+		}
+
+		this._queryModelService.initializeEdit(this.uri, this.schemaName, this.tableName, this._objectType, rowLimit, queryString);
+		this.showResultsEditor();
 	}
 
 	public onDisconnect(): void {
@@ -157,27 +197,19 @@ export class EditDataInput extends EditorInput implements IConnectableInput {
 	// Boiler Plate Functions
 	public matches(otherInput: any): boolean {
 		if (otherInput instanceof EditDataInput) {
-			return (this.uri === otherInput.uri);
+			return this._sql.matches(otherInput.sql);
 		}
 
-		return false;
-	}
-
-	public resolve(refresh?: boolean): TPromise<EditorModel> {
-		return TPromise.as(null);
+		return this._sql.matches(otherInput);
 	}
 
 	public dispose(): void {
+		this._queryModelService.disposeQuery(this.uri);
+		this._sql.dispose();
+		this._results.dispose();
 		this._toDispose = dispose(this._toDispose);
-		this._disposeContainer();
-		super.dispose();
-	}
 
-	private _disposeContainer() {
-		if (this._editorContainer && this._editorContainer.parentElement) {
-			this._editorContainer.parentElement.removeChild(this._editorContainer);
-			this._editorContainer = null;
-		}
+		super.dispose();
 	}
 
 	public close(): void {
@@ -186,11 +218,22 @@ export class EditDataInput extends EditorInput implements IConnectableInput {
 			return this._connectionManagementService.disconnectEditor(this, true);
 		}).then(() => {
 			this.dispose();
-			super.close();
 		});
 	}
 
 	public get tabColor(): string {
 		return this._connectionManagementService.getTabColorForUri(this.uri);
 	}
+
+	public get onDidModelChangeContent(): Event<void> { return this._sql.onDidModelChangeContent; }
+	public get onDidModelChangeEncoding(): Event<void> { return this._sql.onDidModelChangeEncoding; }
+	public resolve(refresh?: boolean): TPromise<EditorModel> { return this._sql.resolve(); }
+	public getEncoding(): string { return this._sql.getEncoding(); }
+	public suggestFileName(): string { return this._sql.suggestFileName(); }
+	public getName(): string { return this._sql.getName(); }
+	public get hasAssociatedFilePath(): boolean { return this._sql.hasAssociatedFilePath; }
+
+	public setEncoding(encoding: string, mode: EncodingMode /* ignored, we only have Encode */): void {
+		this._sql.setEncoding(encoding, mode);
+	}
 }

src/sql/parts/editData/common/editDataResultsInput.ts

@@ -0,0 +1,105 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+'use strict';
+
+import { localize } from 'vs/nls';
+import { TPromise } from 'vs/base/common/winjs.base';
+import { EditorInput } from 'vs/workbench/common/editor';
+
+/**
+ * Input for the EditDataResultsEditor. This input helps with logic for the viewing and editing of
+ * data in the results grid.
+ */
+export class EditDataResultsInput extends EditorInput {
+
+	// Tracks if the editor that holds this input should be visible (i.e. true if a query has been run)
+	private _visible: boolean;
+
+	// Tracks if the editor has holds this input has has bootstrapped angular yet
+	private _hasBootstrapped: boolean;
+
+	// Holds the HTML content for the editor when the editor discards this input and loads another
+	private _editorContainer: HTMLElement;
+	public css: HTMLStyleElement;
+
+	constructor(private _uri: string) {
+		super();
+		this._visible = false;
+		this._hasBootstrapped = false;
+	}
+
+	getTypeId(): string {
+		return EditDataResultsInput.ID;
+	}
+
+	matches(other: any): boolean {
+		if (other instanceof EditDataResultsInput) {
+			return (other._uri === this._uri);
+		}
+
+		return false;
+	}
+
+	resolve(refresh?: boolean): TPromise<any> {
+		return TPromise.as(null);
+	}
+
+	supportsSplitEditor(): boolean {
+		return false;
+	}
+
+	public setBootstrappedTrue(): void {
+		this._hasBootstrapped = true;
+	}
+
+	public dispose(): void {
+		this._disposeContainer();
+		super.dispose();
+	}
+
+	private _disposeContainer() {
+		if (!this._editorContainer) {
+			return;
+		}
+
+		let parentContainer = this._editorContainer.parentNode;
+		if (parentContainer) {
+			parentContainer.removeChild(this._editorContainer);
+			this._editorContainer = null;
+		}
+	}
+
+	//// Properties
+
+	static get ID() {
+		return 'workbench.editorinputs.editDataResultsInput';
+	}
+
+	set container(container: HTMLElement) {
+		this._disposeContainer();
+		this._editorContainer = container;
+	}
+
+	get container(): HTMLElement {
+		return this._editorContainer;
+	}
+
+	get hasBootstrapped(): boolean {
+		return this._hasBootstrapped;
+	}
+
+	get visible(): boolean {
+		return this._visible;
+	}
+
+	set visible(visible: boolean) {
+		this._visible = visible;
+	}
+
+	get uri(): string {
+		return this._uri;
+	}
+}

src/sql/parts/editData/editor/editDataEditor.ts

@@ -6,13 +6,14 @@
 import 'vs/css!sql/parts/query/editor/media/queryEditor';
 
 import { TPromise } from 'vs/base/common/winjs.base';
+import * as strings from 'vs/base/common/strings';
 import * as DOM from 'vs/base/browser/dom';
 import * as nls from 'vs/nls';
-import { Builder, Dimension } from 'vs/base/browser/builder';
+import { Builder, Dimension, withElementById } from 'vs/base/browser/builder';
 
-import { EditorOptions } from 'vs/workbench/common/editor';
+import { EditorOptions, EditorInput } from 'vs/workbench/common/editor';
 import { BaseEditor } from 'vs/workbench/browser/parts/editor/baseEditor';
-import { Position } from 'vs/platform/editor/common/editor';
+import { Position, IEditorControl, IEditor } from 'vs/platform/editor/common/editor';
 
 import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
 import { IThemeService } from 'vs/platform/theme/common/themeService';
@@ -21,6 +22,7 @@ import { IInstantiationService } from 'vs/platform/instantiation/common/instanti
 import { EditDataInput } from 'sql/parts/editData/common/editDataInput';
 
 import { IWorkbenchEditorService } from 'vs/workbench/services/editor/common/editorService';
+import * as queryContext from 'sql/parts/query/common/queryContext';
 import { Taskbar, ITaskbarContent } from 'sql/base/browser/ui/taskbar/taskbar';
 import { IContextMenuService } from 'vs/platform/contextview/browser/contextView';
 import { IActionItem } from 'vs/base/browser/ui/actionbar/actionbar';
@@ -29,13 +31,22 @@ import { IQueryModelService } from 'sql/parts/query/execution/queryModel';
 import { IEditorDescriptorService } from 'sql/parts/query/editor/editorDescriptorService';
 import { IConnectionManagementService } from 'sql/parts/connection/common/connectionManagement';
 import {
-	RefreshTableAction, StopRefreshTableAction,
-	ChangeMaxRowsAction, ChangeMaxRowsActionItem
+	RefreshTableAction, StopRefreshTableAction, ChangeMaxRowsAction, ChangeMaxRowsActionItem, ShowQueryPaneAction
 } from 'sql/parts/editData/execution/editDataActions';
 import { EditDataModule } from 'sql/parts/grid/views/editData/editData.module';
 import { IBootstrapService } from 'sql/services/bootstrap/bootstrapService';
 import { EDITDATA_SELECTOR } from 'sql/parts/grid/views/editData/editData.component';
 import { EditDataComponentParams } from 'sql/services/bootstrap/bootstrapParams';
+import { TextResourceEditor } from 'vs/workbench/browser/parts/editor/textResourceEditor';
+import { CodeEditor } from 'vs/editor/browser/codeEditor';
+import { IContextKey, IContextKeyService } from 'vs/platform/contextkey/common/contextkey';
+import { ISelectionData } from 'sqlops';
+import { UntitledEditorInput } from 'vs/workbench/common/editor/untitledEditorInput';
+import { IEditorGroupService } from 'vs/workbench/services/group/common/groupService';
+import { IFlexibleSash, VerticalFlexibleSash, HorizontalFlexibleSash } from 'sql/parts/query/views/flexibleSash';
+import { Orientation } from 'vs/base/browser/ui/sash/sash';
+import { EditDataResultsEditor } from 'sql/parts/editData/editor/editDataResultsEditor';
+import { EditDataResultsInput } from 'sql/parts/editData/common/editDataResultsInput';
 
 /**
  * Editor that hosts an action bar and a resultSetInput for an edit data session
@@ -44,17 +55,34 @@ export class EditDataEditor extends BaseEditor {
 
 	public static ID: string = 'workbench.editor.editDataEditor';
 
+	// The height of the tabs above the editor
+	private readonly _tabHeight: number = 35;
+
+	// The minimum width/height of the editors hosted in the QueryEditor
+	private readonly _minEditorSize: number = 220;
+
+	private _sash: IFlexibleSash;
 	private _dimension: Dimension;
-	private _container: HTMLElement;
+
+	private _resultsEditor: EditDataResultsEditor;
+	private _resultsEditorContainer: HTMLElement;
+
+	private _sqlEditor: TextResourceEditor;
+	private _sqlEditorContainer: HTMLElement;
+
 	private _taskbar: Taskbar;
 	private _taskbarContainer: HTMLElement;
 	private _changeMaxRowsActionItem: ChangeMaxRowsActionItem;
 	private _stopRefreshTableAction: StopRefreshTableAction;
 	private _refreshTableAction: RefreshTableAction;
 	private _changeMaxRowsAction: ChangeMaxRowsAction;
+	private _showQueryPaneAction: ShowQueryPaneAction;
 	private _spinnerElement: HTMLElement;
 	private _initialized: boolean = false;
 
+	private _queryEditorVisible: IContextKey<boolean>;
+	private hideQueryResultsView = false;
+
 	constructor(
 		@ITelemetryService _telemetryService: ITelemetryService,
 		@IThemeService themeService: IThemeService,
@@ -62,19 +90,61 @@ export class EditDataEditor extends BaseEditor {
 		@IWorkbenchEditorService private _editorService: IWorkbenchEditorService,
 		@IContextMenuService private _contextMenuService: IContextMenuService,
 		@IQueryModelService private _queryModelService: IQueryModelService,
+		@IEditorDescriptorService private _editorDescriptorService: IEditorDescriptorService,
+		@IEditorGroupService private _editorGroupService: IEditorGroupService,
+		@IContextKeyService contextKeyService: IContextKeyService,
 		@IConnectionManagementService private _connectionManagementService: IConnectionManagementService,
 		@IBootstrapService private _bootstrapService: IBootstrapService
 	) {
 		super(EditDataEditor.ID, _telemetryService, themeService);
+
+		if (contextKeyService) {
+			this._queryEditorVisible = queryContext.QueryEditorVisibleContext.bindTo(contextKeyService);
+		}
 	}
 
 	// PUBLIC METHODS ////////////////////////////////////////////////////////////
 
 	// Getters and Setters
 	public get editDataInput(): EditDataInput { return <EditDataInput>this.input; }
-	public get uri(): string { return this.input ? this.editDataInput.uri.toString() : undefined; }
 	public get tableName(): string { return this.editDataInput.tableName; }
+	public get uri(): string { return this.input ? this.editDataInput.uri.toString() : undefined; }
+	public set resultsEditorVisibility(isVisible: boolean) {
+		let input: EditDataInput = <EditDataInput>this.input;
+		input.results.visible = isVisible;
+	}
 
+	/**
+	 * Changes the position of the editor.
+	 */
+	public changePosition(position: Position): void {
+		if (this._resultsEditor) {
+			this._resultsEditor.changePosition(position);
+		}
+		if (this._sqlEditor) {
+			this._sqlEditor.changePosition(position);
+		}
+		super.changePosition(position);
+	}
+
+	/**
+	 * Called to indicate to the editor that the input should be cleared and resources associated with the
+	 * input should be freed.
+	 */
+	public clearInput(): void {
+		if (this._resultsEditor) {
+			this._resultsEditor.clearInput();
+		}
+		if (this._sqlEditor) {
+			this._sqlEditor.clearInput();
+		}
+		this._disposeEditors();
+		super.clearInput();
+	}
+
+	public close(): void {
+		this.editDataInput.close();
+	}
 
 	/**
 	 * Called to create the editor in the parent builder.
@@ -83,9 +153,82 @@ export class EditDataEditor extends BaseEditor {
 		const parentElement = parent.getHTMLElement();
 		DOM.addClass(parentElement, 'side-by-side-editor');
 		this._createTaskbar(parentElement);
-		this._container = document.createElement('div');
-		this._container.style.height = 'calc(100% - 28px)';
-		DOM.append(parentElement, this._container);
+	}
+
+	public dispose(): void {
+		this._disposeEditors();
+		super.dispose();
+	}
+
+	/**
+	 * Sets focus on this editor. Specifically, it sets the focus on the hosted text editor.
+	 */
+	public focus(): void {
+		if (this._sqlEditor) {
+			this._sqlEditor.focus();
+		}
+	}
+
+	public getControl(): IEditorControl {
+		if (this._sqlEditor) {
+			return this._sqlEditor.getControl();
+		}
+		return null;
+	}
+
+	public getEditorText(): string {
+		if (this._sqlEditor && this._sqlEditor.getControl()) {
+			let control = this._sqlEditor.getControl();
+			let codeEditor: CodeEditor = <CodeEditor>control;
+
+			if (codeEditor) {
+				let value = codeEditor.getModel().getValue();
+				if (value !== undefined && value.length > 0) {
+					return value;
+				}
+			}
+		}
+		return '';
+	}
+
+	/**
+	 * Hide the spinner element to show that something was happening, hidden by default
+	 */
+	public hideSpinner(): void {
+		this._spinnerElement.style.visibility = 'hidden';
+	}
+
+	/**
+	 * Updates the internal variable keeping track of the editor's size, and re-calculates the sash position.
+	 * To be called when the container of this editor changes size.
+	 */
+	public layout(dimension: Dimension): void {
+		this._dimension = dimension;
+
+		if (this._sash) {
+			this._setSashDimension();
+			this._sash.layout();
+		}
+
+		this._doLayout();
+		this._resizeGridContents();
+	}
+
+	/**
+	 * Sets this editor and the sub-editors to visible.
+	 */
+	public setEditorVisible(visible: boolean, position: Position): void {
+		if (this._resultsEditor) {
+			this._resultsEditor.setVisible(visible, position);
+		}
+		if (this._sqlEditor) {
+			this._sqlEditor.setVisible(visible, position);
+		}
+
+		super.setEditorVisible(visible, position);
+
+		// Note: must update after calling super.setEditorVisible so that the accurate count is handled
+		this._updateQueryEditorVisible(visible);
 	}
 
 	/**
@@ -95,9 +238,9 @@ export class EditDataEditor extends BaseEditor {
 		let oldInput = <EditDataInput>this.input;
 		if (!newInput.setup) {
 			this._initialized = false;
-			this._register(newInput.updateTaskbar((owner) => this._updateTaskbar(owner)));
-			this._register(newInput.editorInitializing((initializing) => this.onEditorInitializingChanged(initializing)));
-			this._register(newInput.showTableView(() => this._showTableView()));
+			this._register(newInput.updateTaskbarEvent((owner) => this._updateTaskbar(owner)));
+			this._register(newInput.editorInitializingEvent((initializing) => this._onEditorInitializingChanged(initializing)));
+			this._register(newInput.showResultsEditorEvent(() => this._showResultsEditor()));
 			newInput.onRowDropDownSet(this._changeMaxRowsActionItem.defaultRowCount);
 			newInput.setupComplete();
 		}
@@ -106,15 +249,6 @@ export class EditDataEditor extends BaseEditor {
 			.then(() => this._updateInput(oldInput, newInput, options));
 	}
 
-	private onEditorInitializingChanged(initializing: boolean): void {
-		if (initializing) {
-			this.showSpinner();
-		} else {
-			this._initialized = true;
-			this.hideSpinner();
-		}
-	}
-
 	/**
 	 * Show the spinner element that shows something is happening, hidden by default
 	 */
@@ -126,92 +260,74 @@ export class EditDataEditor extends BaseEditor {
 		}, 200);
 	}
 
-	/**
-	 * Hide the spinner element to show that something was happening, hidden by default
-	 */
-	public hideSpinner(): void {
-		this._spinnerElement.style.visibility = 'hidden';
-	}
-
-	/**
-	 * Sets this editor and the sub-editors to visible.
-	 */
-	public setEditorVisible(visible: boolean, position: Position): void {
-		super.setEditorVisible(visible, position);
-	}
-
-	/**
-	 * Changes the position of the editor.
-	 */
-	public changePosition(position: Position): void {
-		super.changePosition(position);
-	}
-
-	/**
-	 * Called to indicate to the editor that the input should be cleared and resources associated with the
-	 * input should be freed.
-	 */
-	public clearInput(): void {
-		this._disposeEditors();
-		super.clearInput();
-	}
-
-	/**
-	 * Updates the internal variable keeping track of the editor's size, and re-calculates the sash position.
-	 * To be called when the container of this editor changes size.
-	 */
-	public layout(dimension: Dimension): void {
-		this._dimension = dimension;
-		let input: EditDataInput = <EditDataInput>this.input;
-		if (input) {
-			let uri: string = input.uri;
-			if (uri) {
-				this._queryModelService.resizeResultsets(uri);
-			}
-		}
-	}
-
-	public dispose(): void {
-		this._disposeEditors();
-		super.dispose();
-	}
-
-	public close(): void {
-		this.input.close();
-	}
-
-	/**
-	 * Returns true if the results table for the current edit data session is visible
-	 * Public for testing only.
-	 */
-	public _isResultsEditorVisible(): boolean {
-		if (!this.editDataInput) {
-			return false;
-		}
-		return this.editDataInput.visible;
-	}
-
-	/**
-	 * Makes visible the results table for the current edit data session
-	 */
-	private _showTableView(): void {
-		if (this._isResultsEditorVisible()) {
+	public toggleResultsEditorVisibility(): void {
+		let input = <EditDataInput>this.input;
+		let hideResults = this.hideQueryResultsView;
+		this.hideQueryResultsView = !this.hideQueryResultsView;
+		if (!input.results) {
 			return;
 		}
-
-		this._createTableViewContainer();
-		this._setTableViewVisible();
-		this.setInput(this.editDataInput, this.options);
+		this.resultsEditorVisibility = hideResults;
+		this._doLayout();
 	}
 
 	// PRIVATE METHODS ////////////////////////////////////////////////////////////
-	private _updateTaskbar(owner: EditDataInput): void {
-		// Update the taskbar if the owner of this call is being presented
-		if (owner.matches(this.editDataInput)) {
-			this._refreshTableAction.enabled = owner.refreshButtonEnabled;
-			this._stopRefreshTableAction.enabled = owner.stopButtonEnabled;
-			this._changeMaxRowsActionItem.setCurrentOptionIndex = owner.rowLimit;
+	private _createEditor(editorInput: EditorInput, container: HTMLElement): TPromise<BaseEditor> {
+		const descriptor = this._editorDescriptorService.getEditor(editorInput);
+		if (!descriptor) {
+			return TPromise.wrapError(new Error(strings.format('Can not find a registered editor for the input {0}', editorInput)));
 		}
+
+		let editor = descriptor.instantiate(this._instantiationService);
+		editor.create(new Builder(container));
+		editor.setVisible(this.isVisible(), this.position);
+		return TPromise.as(editor);
+	}
+
+	/**
+	 * Appends the HTML for the EditDataResultsEditor to the EditDataEditor. If the HTML has not yet been
+	 * created, it creates it and appends it. If it has already been created, it locates it and
+	 * appends it.
+	 */
+	private _createResultsEditorContainer() {
+		this._createSash();
+
+		const parentElement = this.getContainer().getHTMLElement();
+		let input = <EditDataInput>this.input;
+
+		if (!input.results.container) {
+			this._resultsEditorContainer = DOM.append(parentElement, DOM.$('.editDataContainer-horizontal'));
+			this._resultsEditorContainer.style.position = 'absolute';
+
+			input.results.container = this._resultsEditorContainer;
+		} else {
+			this._resultsEditorContainer = DOM.append(parentElement, input.results.container);
+		}
+	}
+
+	/**
+	 * Creates the sash with the requested orientation and registers sash callbacks
+	 */
+	private _createSash(): void {
+		if (!this._sash) {
+			let parentElement: HTMLElement = this.getContainer().getHTMLElement();
+
+			this._sash = this._register(new HorizontalFlexibleSash(parentElement, this._minEditorSize));
+			this._setSashDimension();
+
+			this._register(this._sash.onPositionChange(position => this._doLayout()));
+		}
+
+		this._sash.show();
+	}
+
+	/**
+	 * Appends the HTML for the SQL editor. Creates new HTML every time.
+	 */
+	private _createSqlEditorContainer() {
+		const parentElement = this.getContainer().getHTMLElement();
+		this._sqlEditorContainer = DOM.append(parentElement, DOM.$('.details-editor-container'));
+		this._sqlEditorContainer.style.position = 'absolute';
 	}
 
 	private _createTaskbar(parentElement: HTMLElement): void {
@@ -222,22 +338,25 @@ export class EditDataEditor extends BaseEditor {
 		});
 
 		// Create Actions for the toolbar
-		this._stopRefreshTableAction = this._instantiationService.createInstance(StopRefreshTableAction, this);
 		this._refreshTableAction = this._instantiationService.createInstance(RefreshTableAction, this);
+		this._stopRefreshTableAction = this._instantiationService.createInstance(StopRefreshTableAction, this);
 		this._changeMaxRowsAction = this._instantiationService.createInstance(ChangeMaxRowsAction, this);
+		this._showQueryPaneAction = this._instantiationService.createInstance(ShowQueryPaneAction, this);
 
 		// Create HTML Elements for the taskbar
 		let separator = Taskbar.createTaskbarSeparator();
-		let textSeperator = Taskbar.createTaskbarText(nls.localize('maxRowTaskbar', 'Max Rows:'));
+		let textSeparator = Taskbar.createTaskbarText(nls.localize('maxRowTaskbar', 'Max Rows:'));
 
 		this._spinnerElement = Taskbar.createTaskbarSpinner();
+
 		// Set the content in the order we desire
 		let content: ITaskbarContent[] = [
-			{ action: this._stopRefreshTableAction },
 			{ action: this._refreshTableAction },
+			{ action: this._stopRefreshTableAction },
 			{ element: separator },
-			{ element: textSeperator },
+			{ element: textSeparator },
 			{ action: this._changeMaxRowsAction },
+			{ action: this._showQueryPaneAction },
 			{ element: this._spinnerElement }
 		];
 		this._taskbar.setContent(content);
@@ -258,32 +377,181 @@ export class EditDataEditor extends BaseEditor {
 		return null;
 	}
 
-	/**
-	 * Handles setting input for this editor. If this new input does not match the old input (e.g. a new file
-	 * has been opened with the same editor, or we are opening the editor for the first time).
-	 */
-	private _updateInput(oldInput: EditDataInput, newInput: EditDataInput, options?: EditorOptions): TPromise<void> {
-		let returnValue: TPromise<void>;
+	private _disposeEditors(): void {
+		if (this._sqlEditor) {
+			this._sqlEditor.dispose();
+			this._sqlEditor = null;
+		}
+		if (this._resultsEditor) {
+			this._resultsEditor.dispose();
+			this._resultsEditor = null;
+		}
 
-		if (!newInput.matches(oldInput)) {
-			this._disposeEditors();
+		let thisEditorParent: HTMLElement = this.getContainer().getHTMLElement();
 
-			if (this._isResultsEditorVisible()) {
-				this._createTableViewContainer();
-				let uri: string = newInput.uri;
-				if (uri) {
-					this._queryModelService.refreshResultsets(uri);
+		if (this._sqlEditorContainer) {
+			let sqlEditorParent: HTMLElement = this._sqlEditorContainer.parentElement;
+			if (sqlEditorParent && sqlEditorParent === thisEditorParent) {
+				this._sqlEditorContainer.parentElement.removeChild(this._sqlEditorContainer);
+			}
+			this._sqlEditorContainer = null;
+		}
+
+		if (this._resultsEditorContainer) {
+			let resultsEditorParent: HTMLElement = this._resultsEditorContainer.parentElement;
+			if (resultsEditorParent && resultsEditorParent === thisEditorParent) {
+				this._resultsEditorContainer.parentElement.removeChild(this._resultsEditorContainer);
+			}
+			this._resultsEditorContainer = null;
+			this.hideQueryResultsView = false;
 		}
 	}
 
-			returnValue = this._setNewInput(newInput, options);
+	private _doLayout(skipResizeGridContent: boolean = false): void {
+		if (!this._isResultsEditorVisible() && this._sqlEditor) {
+			this._doLayoutSql();
+			return;
+		}
+		if (!this._sqlEditor || !this._resultsEditor || !this._dimension || !this._sash) {
+			return;
+		}
+
+		this._doLayoutHorizontal();
+
+		if (!skipResizeGridContent) {
+			this._resizeGridContents();
+		}
+	}
+
+	private _doLayoutHorizontal(): void {
+		let splitPointTop: number = this._sash.getSplitPoint();
+		let parent: ClientRect = this.getContainer().getHTMLElement().getBoundingClientRect();
+
+		let sqlEditorHeight: number;
+		let sqlEditorTop: number;
+		let resultsEditorHeight: number;
+		let resultsEditorTop: number;
+
+		let editorTopOffset = parent.top + this._getTaskBarHeight();
+
+		this._resultsEditorContainer.hidden = false;
+
+		let titleBar = withElementById('workbench.parts.titlebar');
+		if (this.queryPaneEnabled()) {
+			this._sqlEditorContainer.hidden = false;
+
+			sqlEditorTop = editorTopOffset;
+			sqlEditorHeight = splitPointTop - sqlEditorTop;
+
+			resultsEditorTop = splitPointTop;
+			resultsEditorHeight = parent.bottom - resultsEditorTop;
+
+			if (titleBar) {
+				sqlEditorHeight += DOM.getContentHeight(titleBar.getHTMLElement());
+			}
 		} else {
-			this._setNewInput(newInput, options);
-			returnValue = TPromise.as(null);
+			this._sqlEditorContainer.hidden = true;
+
+			sqlEditorTop = editorTopOffset;
+			sqlEditorHeight = 0;
+
+			resultsEditorTop = editorTopOffset;
+			resultsEditorHeight = parent.bottom - resultsEditorTop;
+
+			if (titleBar) {
+				resultsEditorHeight += DOM.getContentHeight(titleBar.getHTMLElement());
+			}
 		}
 
-		this._updateTaskbar(newInput);
-		return returnValue;
+		this._sqlEditorContainer.style.height = `${sqlEditorHeight}px`;
+		this._sqlEditorContainer.style.width = `${this._dimension.width}px`;
+		this._sqlEditorContainer.style.top = `${sqlEditorTop}px`;
+
+		this._resultsEditorContainer.style.height = `${resultsEditorHeight}px`;
+		this._resultsEditorContainer.style.width = `${this._dimension.width}px`;
+		this._resultsEditorContainer.style.top = `${resultsEditorTop}px`;
+
+		this._sqlEditor.layout(new Dimension(this._dimension.width, sqlEditorHeight));
+		this._resultsEditor.layout(new Dimension(this._dimension.width, resultsEditorHeight));
+	}
+
+	private _doLayoutSql() {
+		if (this._resultsEditorContainer) {
+			this._resultsEditorContainer.style.width = '0px';
+			this._resultsEditorContainer.style.height = '0px';
+			this._resultsEditorContainer.style.left = '0px';
+			this._resultsEditorContainer.hidden = true;
+		}
+
+		if (this._dimension) {
+			let sqlEditorHeight: number;
+
+			if (this.queryPaneEnabled()) {
+				this._sqlEditorContainer.hidden = false;
+				sqlEditorHeight = this._dimension.height - this._getTaskBarHeight();
+			} else {
+				this._sqlEditorContainer.hidden = true;
+				sqlEditorHeight = 0;
+			}
+
+			this._sqlEditorContainer.style.height = `${sqlEditorHeight}px`;
+			this._sqlEditorContainer.style.width = `${this._dimension.width}px`;
+
+			this._sqlEditor.layout(new Dimension(this._dimension.width, sqlEditorHeight));
+		}
+	}
+
+	private _getTaskBarHeight(): number {
+		let taskBarElement = this._taskbar.getContainer().getHTMLElement();
+		return DOM.getContentHeight(taskBarElement);
+	}
+
+	/**
+	 * Returns true if the results table for the current edit data session is visible
+	 * Public for testing only.
+	 */
+	private _isResultsEditorVisible(): boolean {
+		let input: EditDataInput = <EditDataInput>this.input;
+
+		if (!input) {
+			return false;
+		}
+		return input.results.visible;
+	}
+
+	private _onEditorInitializingChanged(initializing: boolean): void {
+		if (initializing) {
+			this.showSpinner();
+		} else {
+			this._initialized = true;
+			this.hideSpinner();
+		}
+	}
+
+	/**
+	 * Sets input for the results editor after it has been created.
+	 */
+	private _onResultsEditorCreated(resultsEditor: EditDataResultsEditor, resultsInput: EditDataResultsInput, options: EditorOptions): TPromise<void> {
+		this._resultsEditor = resultsEditor;
+		return this._resultsEditor.setInput(resultsInput, options);
+	}
+
+	/**
+	 * Sets input for the SQL editor after it has been created.
+	 */
+	private _onSqlEditorCreated(sqlEditor: TextResourceEditor, sqlInput: UntitledEditorInput, options: EditorOptions): TPromise<void> {
+		this._sqlEditor = sqlEditor;
+		return this._sqlEditor.setInput(sqlInput, options);
+	}
+
+	private _resizeGridContents(): void {
+		if (this._isResultsEditorVisible()) {
+			let queryInput: EditDataInput = <EditDataInput>this.input;
+			let uri: string = queryInput.uri;
+			if (uri) {
+				this._queryModelService.resizeResultsets(uri);
+			}
+		}
 	}
 
 	/**
@@ -291,68 +559,177 @@ export class EditDataEditor extends BaseEditor {
 	 * - Opened for the first time
 	 * - Opened with a new EditDataInput
 	 */
-	private _setNewInput(newInput: EditDataInput, options?: EditorOptions): TPromise<void> {
+	private _setNewInput(newInput: EditDataInput, options?: EditorOptions): TPromise<any> {
+
+		// Promises that will ensure proper ordering of editor creation logic
+		let createEditors: () => TPromise<any>;
+		let onEditorsCreated: (result) => TPromise<any>;
+
+		// If both editors exist, create joined promises - one for each editor
 		if (this._isResultsEditorVisible()) {
-			// If both editors exist, create a joined promise and wait for both editors to be created
-			return this._bootstrapAngularAndResults(newInput, options);
-		}
-
-		return TPromise.as(undefined);
-	}
-	/**
-	 * Appends the HTML for the edit data table view
-	 */
-	private _createTableViewContainer() {
-		if (!this.editDataInput.container) {
-			this.editDataInput.container = DOM.append(this._container, DOM.$('.editDataContainer'));
-			this.editDataInput.container.style.height = '100%';
-		} else {
-			DOM.append(this._container, this.editDataInput.container);
-		}
-	}
-
-	private _disposeEditors(): void {
-		if (this._container) {
-			new Builder(this._container).clearChildren();
-		}
-	}
-
-	/**
-	 * Load the angular components and record for this input that we have done so
-	 */
-	private _bootstrapAngularAndResults(input: EditDataInput, options: EditorOptions): TPromise<void> {
-		super.setInput(input, options);
-		if (!input.hasBootstrapped) {
-			let uri = this.editDataInput.uri;
-
-			// Pass the correct DataService to the new angular component
-			let dataService = this._queryModelService.getDataService(uri);
-			if (!dataService) {
-				throw new Error('DataService not found for URI: ' + uri);
-			}
-
-			// Mark that we have bootstrapped
-			input.setBootstrappedTrue();
-
-			// Get the bootstrap params and perform the bootstrap
-			// Note: pass in input so on disposal this is cleaned up.
-			// Otherwise many components will be left around and be subscribed
-			// to events from the backing data service
-			const parent = this.editDataInput.container;
-			let params: EditDataComponentParams = {
-				dataService: dataService
+			createEditors = () => {
+				return TPromise.join([
+					this._createEditor(<EditDataResultsInput>newInput.results, this._resultsEditorContainer),
+					this._createEditor(<UntitledEditorInput>newInput.sql, this._sqlEditorContainer)
+				]);
+			};
+			onEditorsCreated = (result: IEditor[]) => {
+				return TPromise.join([
+					this._onResultsEditorCreated(<EditDataResultsEditor>result[0], newInput.results, options),
+					this._onSqlEditorCreated(<TextResourceEditor>result[1], newInput.sql, options)
+				]);
+			};
+
+			// If only the sql editor exists, create a promise and wait for the sql editor to be created
+		} else {
+			createEditors = () => {
+				return this._createEditor(<UntitledEditorInput>newInput.sql, this._sqlEditorContainer);
+			};
+			onEditorsCreated = (result: TextResourceEditor) => {
+				return this._onSqlEditorCreated(result, newInput.sql, options);
 			};
-			this._bootstrapService.bootstrap(
-				EditDataModule,
-				parent,
-				EDITDATA_SELECTOR,
-				params,
-				this.editDataInput);
-		}
-		return TPromise.wrap<void>(null);
 		}
 
-	private _setTableViewVisible(): void {
-		this.editDataInput.setVisibleTrue();
+		// Create a promise to re render the layout after the editor creation logic
+		let doLayout: () => TPromise<any> = () => {
+			this._doLayout();
+			return TPromise.as(undefined);
+		};
+
+		// Run all three steps synchronously
+		return createEditors()
+			.then(onEditorsCreated)
+			.then(doLayout);
+	}
+
+	private _setSashDimension(): void {
+		if (!this._dimension) {
+			return;
+		}
+		this._sash.setDimenesion(this._dimension);
+	}
+
+	/**
+	 * Makes visible the results table for the current edit data session
+	 */
+	private _showResultsEditor(): void {
+		if (this._isResultsEditorVisible()) {
+			return;
+		}
+
+		this._editorGroupService.pinEditor(this.position, this.input);
+
+		let input = <EditDataInput>this.input;
+		this._createResultsEditorContainer();
+
+		this._createEditor(<EditDataResultsInput>input.results, this._resultsEditorContainer)
+			.then(result => {
+				this._onResultsEditorCreated(<EditDataResultsEditor>result, input.results, this.options);
+				this.resultsEditorVisibility = true;
+				this.hideQueryResultsView = false;
+				this._doLayout(true);
+			});
+	}
+
+	/**
+	 * Handles setting input for this editor. If this new input does not match the old input (e.g. a new file
+	 * has been opened with the same editor, or we are opening the editor for the first time).
+	 */
+	private _updateInput(oldInput: EditDataInput, newInput: EditDataInput, options?: EditorOptions): TPromise<void> {
+
+		if (this._sqlEditor) {
+			this._sqlEditor.clearInput();
+		}
+
+		if (oldInput) {
+			this._disposeEditors();
+		}
+
+		this._createSqlEditorContainer();
+		if (this._isResultsEditorVisible()) {
+			this._createResultsEditorContainer();
+
+			let uri: string = newInput.uri;
+			if (uri) {
+				this._queryModelService.refreshResultsets(uri);
+			}
+		}
+
+		if (this._sash) {
+			if (this._isResultsEditorVisible()) {
+				this._sash.show();
+			} else {
+				this._sash.hide();
+			}
+		}
+
+		this._updateTaskbar(newInput);
+		return this._setNewInput(newInput, options);
+	}
+
+	private _updateQueryEditorVisible(currentEditorIsVisible: boolean): void {
+		if (this._queryEditorVisible) {
+			let visible = currentEditorIsVisible;
+			if (!currentEditorIsVisible) {
+				// Current editor is closing but still tracked as visible. Check if any other editor is visible
+				const candidates = [...this._editorService.getVisibleEditors()].filter(e => {
+					if (e && e.getId) {
+						return e.getId() === EditDataEditor.ID;
+					}
+					return false;
+				});
+				// Note: require 2 or more candidates since current is closing but still
+				// counted as visible
+				visible = candidates.length > 1;
+			}
+			this._queryEditorVisible.set(visible);
+		}
+	}
+
+	private _updateTaskbar(owner: EditDataInput): void {
+		// Update the taskbar if the owner of this call is being presented
+		if (owner.matches(this.editDataInput)) {
+			this._refreshTableAction.enabled = owner.refreshButtonEnabled;
+			this._stopRefreshTableAction.enabled = owner.stopButtonEnabled;
+			this._changeMaxRowsActionItem.setCurrentOptionIndex = owner.rowLimit;
+			this._showQueryPaneAction.queryPaneEnabled = owner.queryPaneEnabled;
+		}
+	}
+
+	/**
+	 * Calls the run method of this editor's RunQueryAction
+	 */
+	public runQuery(): void {
+		this._refreshTableAction.run();
+	}
+
+	/**
+	 * Calls the run method of this editor's CancelQueryAction
+	 */
+	public cancelQuery(): void {
+		this._stopRefreshTableAction.run();
+	}
+
+	public toggleQueryPane(): void {
+		this.editDataInput.queryPaneEnabled = !this.queryPaneEnabled();
+		if (this.queryPaneEnabled()) {
+			this._showQueryEditor();
+		} else {
+			this._hideQueryEditor();
+		}
+		this._doLayout(false);
+	}
+
+	private _showQueryEditor(): void {
+		this._sqlEditorContainer.hidden = false;
+		this._changeMaxRowsActionItem.disable();
+	}
+	private _hideQueryEditor(): void {
+		this._sqlEditorContainer.hidden = true;
+		this._changeMaxRowsActionItem.enable();
+	}
+
+	public queryPaneEnabled(): boolean {
+		return this.editDataInput.queryPaneEnabled;
 	}
 }

src/sql/parts/editData/editor/editDataResultsEditor.ts

@@ -0,0 +1,113 @@
+import { Dimension, Builder } from 'vs/base/browser/builder';
+import { EditorOptions } from 'vs/workbench/common/editor';
+import { TPromise } from 'vs/base/common/winjs.base';
+import { getZoomLevel } from 'vs/base/browser/browser';
+import { Configuration } from 'vs/editor/browser/config/configuration';
+import { ITelemetryService } from 'vs/platform/telemetry/common/telemetry';
+import { IThemeService } from 'vs/platform/theme/common/themeService';
+import { IQueryModelService } from 'sql/parts/query/execution/queryModel';
+import { IBootstrapService } from 'sql/services/bootstrap/bootstrapService';
+import { IConfigurationService } from 'vs/platform/configuration/common/configuration';
+import { BareResultsGridInfo } from 'sql/parts/query/editor/queryResultsEditor';
+import { BaseEditor } from 'vs/workbench/browser/parts/editor/baseEditor';
+import * as dom from 'vs/base/browser/dom';
+import * as types from 'vs/base/common/types';
+import { EditDataComponentParams } from 'sql/services/bootstrap/bootstrapParams';
+import { EditDataModule } from 'sql/parts/grid/views/editData/editData.module';
+import { EDITDATA_SELECTOR } from 'sql/parts/grid/views/editData/editData.component';
+import { EditDataResultsInput } from 'sql/parts/editData/common/editDataResultsInput';
+
+export class EditDataResultsEditor extends BaseEditor {
+
+	public static ID: string = 'workbench.editor.editDataResultsEditor';
+	public static AngularSelectorString: string = 'slickgrid-container.slickgridContainer';
+	protected _input: EditDataResultsInput;
+	protected _rawOptions: BareResultsGridInfo;
+
+	constructor(
+		@ITelemetryService telemetryService: ITelemetryService,
+		@IThemeService themeService: IThemeService,
+		@IQueryModelService private _queryModelService: IQueryModelService,
+		@IBootstrapService private _bootstrapService: IBootstrapService,
+		@IConfigurationService private _configurationService: IConfigurationService
+	) {
+		super(EditDataResultsEditor.ID, telemetryService, themeService);
+		this._rawOptions = BareResultsGridInfo.createFromRawSettings(this._configurationService.getValue('resultsGrid'), getZoomLevel());
+		this._configurationService.onDidChangeConfiguration(e => {
+			if (e.affectsConfiguration('resultsGrid')) {
+				this._rawOptions = BareResultsGridInfo.createFromRawSettings(this._configurationService.getValue('resultsGrid'), getZoomLevel());
+				this._applySettings();
+			}
+		});
+	}
+
+	public get input(): EditDataResultsInput {
+		return this._input;
+	}
+
+	public createEditor(parent: Builder): void {
+	}
+
+	public dispose(): void {
+		super.dispose();
+	}
+
+	public layout(dimension: Dimension): void {
+	}
+
+	public setInput(input: EditDataResultsInput, options: EditorOptions): TPromise<void> {
+		super.setInput(input, options);
+		this._applySettings();
+		if (!input.hasBootstrapped) {
+			this._bootstrapAngular();
+		}
+		return TPromise.wrap<void>(null);
+	}
+
+	private _applySettings() {
+		if (this.input && this.input.container) {
+			Configuration.applyFontInfoSlow(this.getContainer().getHTMLElement(), this._rawOptions);
+			if (!this.input.css) {
+				this.input.css = dom.createStyleSheet(this.input.container);
+			}
+			let cssRuleText = '';
+			if (types.isNumber(this._rawOptions.cellPadding)) {
+				cssRuleText = this._rawOptions.cellPadding + 'px';
+			} else {
+				cssRuleText = this._rawOptions.cellPadding.join('px ') + 'px;';
+			}
+			let content = `.grid .slick-cell { padding: ${cssRuleText}; }`;
+			this.input.css.innerHTML = content;
+		}
+	}
+
+	/**
+	 * Load the angular components and record for this input that we have done so
+	 */
+	private _bootstrapAngular(): void {
+		let input = <EditDataResultsInput>this.input;
+		let uri = input.uri;
+
+		// Pass the correct DataService to the new angular component
+		let dataService = this._queryModelService.getDataService(uri);
+		if (!dataService) {
+			throw new Error('DataService not found for URI: ' + uri);
+		}
+
+		// Mark that we have bootstrapped
+		input.setBootstrappedTrue();
+
+		// Get the bootstrap params and perform the bootstrap
+		// Note: pass in input so on disposal this is cleaned up.
+		// Otherwise many components will be left around and be subscribed
+		// to events from the backing data service
+		const parent = input.container;
+		let params: EditDataComponentParams = { dataService: dataService };
+		this._bootstrapService.bootstrap(
+			EditDataModule,
+			parent,
+			EDITDATA_SELECTOR,
+			params,
+			input);
+	}
+}

src/sql/parts/editData/execution/editDataActions.ts

@@ -7,7 +7,7 @@ import { Action, IActionItem, IActionRunner } from 'vs/base/common/actions';
 import { TPromise } from 'vs/base/common/winjs.base';
 import { IDisposable, dispose } from 'vs/base/common/lifecycle';
 import { IQueryModelService } from 'sql/parts/query/execution/queryModel';
-import { SelectBox } from 'vs/base/browser/ui/selectBox/selectBox';
+import { SelectBox } from 'sql/base/browser/ui/selectBox/selectBox';
 import { EventEmitter } from 'sql/base/common/eventEmitter';
 import { IConnectionManagementService } from 'sql/parts/connection/common/connectionManagement';
 import { EditDataEditor } from 'sql/parts/editData/editor/editDataEditor';
@@ -63,7 +63,7 @@ export abstract class EditDataAction extends Action {
  * Action class that refreshes the table for an edit data session
  */
 export class RefreshTableAction extends EditDataAction {
-	private static EnabledClass = 'refresh';
+	private static EnabledClass = 'start';
 	public static ID = 'refreshTableAction';
 
 	constructor(editor: EditDataEditor,
@@ -72,14 +72,24 @@ export class RefreshTableAction extends EditDataAction {
 		@INotificationService private _notificationService: INotificationService,
 	) {
 		super(editor, RefreshTableAction.ID, RefreshTableAction.EnabledClass, _connectionManagementService);
-		this.label = nls.localize('editData.refresh', 'Refresh');
+		this.label = nls.localize('editData.run', 'Run');
 	}
 
 	public run(): TPromise<void> {
 		if (this.isConnected(this.editor)) {
 			let input = this.editor.editDataInput;
+
+			let rowLimit: number = undefined;
+			let queryString: string = undefined;
+			if (input.queryPaneEnabled) {
+				queryString = input.queryString = this.editor.getEditorText();
+			} else {
+				rowLimit = input.rowLimit;
+			}
+
 			this._queryModelService.disposeEdit(input.uri).then((result) => {
-				this._queryModelService.initializeEdit(input.uri, input.schemaName, input.tableName, input.objectType, input.rowLimit);
+				this._queryModelService.initializeEdit(input.uri, input.schemaName, input.tableName, input.objectType, rowLimit, queryString);
+				input.showResultsEditor();
 			}, error => {
 				this._notificationService.notify({
 					severity: Severity.Error,
@@ -162,10 +172,12 @@ export class ChangeMaxRowsActionItem extends EventEmitter implements IActionItem
 		this._options = ['200', '1000', '10000'];
 		this._currentOptionsIndex = 0;
 		this.toDispose = [];
-		this.selectBox = new SelectBox([], -1, contextViewService);
+		this.selectBox = new SelectBox(this._options, this._options[this._currentOptionsIndex], contextViewService);
 		this._registerListeners();
 		this._refreshOptions();
 		this.defaultRowCount = Number(this._options[this._currentOptionsIndex]);
+
+		this.toDispose.push(attachSelectBoxStyler(this.selectBox, _themeService));
 	}
 
 	public render(container: HTMLElement): void {
@@ -181,6 +193,14 @@ export class ChangeMaxRowsActionItem extends EventEmitter implements IActionItem
 		return true;
 	}
 
+	public enable(): void {
+		this.selectBox.enable();
+	}
+
+	public disable(): void {
+		this.selectBox.disable();
+	}
+
 	public set setCurrentOptionIndex(selection: number) {
 		this._currentOptionsIndex = this._options.findIndex(x => x === selection.toString());
 		this._refreshOptions();
@@ -210,3 +230,40 @@ export class ChangeMaxRowsActionItem extends EventEmitter implements IActionItem
 		this.toDispose.push(attachSelectBoxStyler(this.selectBox, this._themeService));
 	}
 }
+
+/**
+ * Action class that is tied with toggling the Query editor
+ */
+export class ShowQueryPaneAction extends EditDataAction {
+
+	private static EnabledClass = 'filterLabel';
+	public static ID = 'showQueryPaneAction';
+	private readonly showSqlLabel = nls.localize('editData.showSql', 'Show SQL Pane');
+	private readonly closeSqlLabel = nls.localize('editData.closeSql', 'Close SQL Pane');
+
+	constructor(editor: EditDataEditor,
+		@IQueryModelService private _queryModelService: IQueryModelService,
+		@IConnectionManagementService _connectionManagementService: IConnectionManagementService
+	) {
+		super(editor, ShowQueryPaneAction.ID, ShowQueryPaneAction.EnabledClass, _connectionManagementService);
+		this.label = this.showSqlLabel;
+	}
+
+	public set queryPaneEnabled(value: boolean) {
+		this.updateLabel(value);
+	}
+
+	private updateLabel(queryPaneEnabled: boolean): void {
+		if (queryPaneEnabled) {
+			this.label = this.closeSqlLabel;
+		} else {
+			this.label = this.showSqlLabel;
+		}
+	}
+
+	public run(): TPromise<void> {
+		this.editor.toggleQueryPane();
+		this.updateLabel(this.editor.queryPaneEnabled());
+		return TPromise.as(null);
+	}
+}

src/sql/parts/grid/common/gridContentEvents.ts

@@ -17,4 +17,6 @@ export let SelectAllMessages = 'SelectAllMessages';
 export let SaveAsCsv = 'SaveAsCSV';
 export let SaveAsJSON = 'SaveAsJSON';
 export let SaveAsExcel = 'SaveAsExcel';
+export let ViewAsChart = 'ViewAsChart';
 export let GoToNextQueryOutputTab = 'GoToNextQueryOutputTab';
+export let GoToNextGrid = 'GoToNextGrid';

src/sql/parts/grid/views/editData/editData.component.ts

@@ -22,6 +22,8 @@ import { GridParentComponent } from 'sql/parts/grid/views/gridParentComponent';
 import { EditDataGridActionProvider } from 'sql/parts/grid/views/editData/editDataGridActions';
 import { error } from 'sql/base/common/log';
 import { clone } from 'sql/base/common/objects';
+import { INotificationService } from 'vs/platform/notification/common/notification';
+import Severity from 'vs/base/common/severity';
 
 export const EDITDATA_SELECTOR: string = 'editdata-component';
 
@@ -40,7 +42,6 @@ export class EditDataComponent extends GridParentComponent implements OnInit, On
 	// All datasets
 	private dataSet: IGridDataSet;
 	private scrollTimeOut: number;
-	private messagesAdded = false;
 	private scrollEnabled = true;
 	private firstRender = true;
 	private totalElapsedTimeSpan: number;
@@ -54,6 +55,8 @@ export class EditDataComponent extends GridParentComponent implements OnInit, On
 	private removingNewRow: boolean;
 	private rowIdMappings: { [gridRowId: number]: number } = {};
 
+	private notificationService: INotificationService;
+
 	// Edit Data functions
 	public onActiveCellChanged: (event: { row: number, column: number }) => void;
 	public onCellEditEnd: (event: { row: number, column: number, newValue: any }) => void;
@@ -75,6 +78,7 @@ export class EditDataComponent extends GridParentComponent implements OnInit, On
 		let editDataParameters: EditDataComponentParams = this._bootstrapService.getBootstrapParams(this._el.nativeElement.tagName);
 		this.dataService = editDataParameters.dataService;
 		this.actionProvider = this._bootstrapService.instantiationService.createInstance(EditDataGridActionProvider, this.dataService, this.onGridSelectAll(), this.onDeleteRow(), this.onRevertRow());
+		this.notificationService = bootstrapService.notificationService;
 	}
 
 	/**
@@ -127,7 +131,6 @@ export class EditDataComponent extends GridParentComponent implements OnInit, On
 		self.renderedDataSets = self.placeHolderDataSets;
 		self.totalElapsedTimeSpan = undefined;
 		self.complete = false;
-		self.messagesAdded = false;
 
 		// Hooking up edit functions
 		this.onIsCellEditValid = (row, column, value): boolean => {
@@ -302,7 +305,6 @@ export class EditDataComponent extends GridParentComponent implements OnInit, On
 	handleComplete(self: EditDataComponent, event: any): void {
 		self.totalElapsedTimeSpan = event.data;
 		self.complete = true;
-		self.messagesAdded = true;
 	}
 
 	handleEditSessionReady(self, event): void {
@@ -310,7 +312,12 @@ export class EditDataComponent extends GridParentComponent implements OnInit, On
 	}
 
 	handleMessage(self: EditDataComponent, event: any): void {
-		// TODO: what do we do with messages?
+		if (event.data && event.data.isError) {
+			self.notificationService.notify({
+				severity: Severity.Error,
+				message: event.data.message
+			});
+		}
 	}
 
 	handleResultSet(self: EditDataComponent, event: any): void {
@@ -360,7 +367,6 @@ export class EditDataComponent extends GridParentComponent implements OnInit, On
 		undefinedDataSet.dataRows = undefined;
 		undefinedDataSet.resized = new EventEmitter();
 		self.placeHolderDataSets.push(undefinedDataSet);
-		self.messagesAdded = true;
 		self.onScroll(0);
 
 		// Setup the state of the selected cell

src/sql/parts/grid/views/gridActions.ts

@@ -25,7 +25,8 @@ export const MESSAGES_COPY_ID = 'grid.messages.copy';
 export const TOGGLERESULTS_ID = 'grid.toggleResultPane';
 export const TOGGLEMESSAGES_ID = 'grid.toggleMessagePane';
 export const GOTONEXTQUERYOUTPUTTAB_ID = 'query.goToNextQueryOutputTab';
-
+export const GRID_VIEWASCHART_ID = 'grid.viewAsChart';
+export const GRID_GOTONEXTGRID_ID = 'grid.goToNextGrid';
 
 export class GridActionProvider {
 

src/sql/parts/grid/views/gridCommands.ts

@@ -77,4 +77,11 @@ export const selectAllMessages = (accessor: ServicesAccessor) => {
 	runActionOnActiveResultsEditor(accessor, GridContentEvents.SelectAllMessages);
 };
 
+export const viewAsChart = (accessor: ServicesAccessor) => {
+	runActionOnActiveResultsEditor(accessor, GridContentEvents.ViewAsChart);
+};
+
+export const goToNextGrid = (accessor: ServicesAccessor) => {
+	runActionOnActiveResultsEditor(accessor, GridContentEvents.GoToNextGrid);
+};
 

src/sql/parts/grid/views/gridParentComponent.ts

@@ -168,6 +168,12 @@ export abstract class GridParentComponent {
 				case GridContentEvents.GoToNextQueryOutputTab:
 					self.goToNextQueryOutputTab();
 					break;
+				case GridContentEvents.ViewAsChart:
+					self.showChartForGrid(self.activeGrid);
+					break;
+				case GridContentEvents.GoToNextGrid:
+					self.goToNextGrid();
+					break;
 				default:
 					error('Unexpected grid content event type "' + type + '" sent');
 					break;
@@ -278,6 +284,22 @@ export abstract class GridParentComponent {
 	protected goToNextQueryOutputTab(): void {
 	}
 
+	protected showChartForGrid(index: number) {
+	}
+
+	protected goToNextGrid() {
+		if (this.renderedDataSets.length > 0) {
+			let next  = this.activeGrid + 1;
+			if (next >= this.renderedDataSets.length) {
+				next = 0;
+			}
+			this.navigateToGrid(next);
+		}
+	}
+
+	protected navigateToGrid(index: number) {
+	}
+
 	private initShortcutsBase(): void {
 		let shortcuts = {
 			'ToggleResultPane': () => {

src/sql/parts/grid/views/query/chartViewer.component.ts

@@ -97,12 +97,12 @@ export class ChartViewerComponent implements OnInit, OnDestroy, IChartViewAction
 		@Inject(BOOTSTRAP_SERVICE_ID) private _bootstrapService: IBootstrapService,
 		@Inject(forwardRef(() => ChangeDetectorRef)) private _cd: ChangeDetectorRef
 	) {
+		this.setDefaultChartConfig();
 	}
 
 	ngOnInit() {
-		this.setDefaultChartConfig();
 		this.legendOptions = Object.values(LegendPosition);
-		this.initializeUI();
+		this._initActionBar();
 	}
 
 	private setDefaultChartConfig() {
@@ -114,11 +114,6 @@ export class ChartViewerComponent implements OnInit, OnDestroy, IChartViewAction
 		};
 	}
 
-	private initializeUI() {
-		// Initialize the taskbar
-		this._initActionBar();
-	}
-
 	private getDefaultChartType(): string {
 		let defaultChartType = Constants.chartTypeHorizontalBar;
 		if (this._bootstrapService.configurationService) {
@@ -155,6 +150,10 @@ export class ChartViewerComponent implements OnInit, OnDestroy, IChartViewAction
 		this.initChart();
 	}
 
+	ngAfterViewInit() {
+		this.initChart();
+	}
+
 	setConfigValue(key: string, value: any, refresh = true): void {
 		this._chartConfig[key] = value;
 		if (refresh) {
@@ -316,7 +315,6 @@ export class ChartViewerComponent implements OnInit, OnDestroy, IChartViewAction
 		this._executeResult.rows = dataSet.dataRows.getRange(0, dataSet.dataRows.getLength()).map(gridRow => {
 			return gridRow.values.map(cell => cell.displayValue);
 		});
-		this.initChart();
 	}
 
 	public initChart() {

src/sql/parts/grid/views/query/query.component.ts

@@ -589,7 +589,7 @@ export class QueryComponent extends GridParentComponent implements OnInit, OnDes
 		});
 	}
 
-	private showChartForGrid(index: number) {
+	protected showChartForGrid(index: number) {
 		if (this.renderedDataSets.length > index) {
 			this.showChartRequested.emit(this.renderedDataSets[index]);
 		}

src/sql/parts/jobManagement/agent/agentView.component.html

@@ -8,11 +8,13 @@
 <panel class="dashboard-panel" [options]="panelOpt">
 	<tab [title]="jobsComponentTitle" class="fullsize" [identifier]="jobsTabIdentifier"
 		 [iconClass]="jobsIconClass">
+		 <ng-template>
 			<div id="jobsDiv" class="fullsize" *ngIf="showHistory === false">
 				<jobsview-component></jobsview-component>
 			</div>
 			<div id="historyDiv" class="fullsize" *ngIf="showHistory === true">
 				<jobhistory-component></jobhistory-component>
 			</div>
+		</ng-template>
 	</tab>
 </panel>

src/sql/parts/jobManagement/common/media/jobs.css

@@ -32,7 +32,7 @@ jobhistory-component {
 }
 
 #jobsDiv .jobview-grid {
-    height: 96%;
+    height: 94.7%;
 	width : 100%;
     display: block;
 }

src/sql/parts/jobManagement/views/jobHistory.component.html

@@ -19,7 +19,7 @@
 
 <!-- Overview  -->
  <div class="overview-container">
-   <div class="overview-tab" (click)='toggleCollapse()'>
+   <div class="overview-tab" (click)='toggleCollapse()' tabindex="0">
 	 <input id="accordion" type="checkbox">
 	 <label for="accordion">
 		<div class="resultsViewCollapsible collapsed" (click)='toggleCollapse()'></div>

src/sql/parts/jobManagement/views/jobHistory.component.ts

@@ -148,6 +148,8 @@ export class JobHistoryComponent extends Disposable implements OnInit {
 				if (this._jobCacheObject.prevJobID === this._agentViewComponent.jobId || jobHistories[0].jobId === this._agentViewComponent.jobId) {
 					this._showPreviousRuns = true;
 					this.buildHistoryTree(self, jobHistories);
+					$('jobhistory-component .history-details .prev-run-list .monaco-tree').attr('tabIndex', '-1');
+					$('jobhistory-component .history-details .prev-run-list .monaco-tree-row').attr('tabIndex', '0');
 					this._cd.detectChanges();
 				}
 			} else if (jobHistories && jobHistories.length === 0 ){

src/sql/parts/jobManagement/views/jobStepsView.component.ts

@@ -65,6 +65,8 @@ export class JobStepsViewComponent extends Disposable implements OnInit, AfterCo
 			}
 			this._tree.layout(JobStepsViewComponent._pageSize);
 			this._tree.setInput(new JobStepsViewModel());
+			$('jobstepsview-component .steps-tree .monaco-tree').attr('tabIndex', '-1');
+			$('jobstepsview-component .steps-tree .monaco-tree-row').attr('tabIndex', '0');
 		}
 	}
 

src/sql/parts/jobManagement/views/jobsView.component.ts

@@ -74,6 +74,7 @@ export class JobsViewComponent implements AfterContentChecked {
 	private _serverName: string;
 	private _isCloud: boolean;
 	private _showProgressWheel: boolean;
+	private _tabHeight: number;
 
 	constructor(
 		@Inject(BOOTSTRAP_SERVICE_ID) private bootstrapService: IBootstrapService,
@@ -202,9 +203,8 @@ export class JobsViewComponent implements AfterContentChecked {
 		this.dataView.beginUpdate();
 		this.dataView.setItems(jobViews);
 		this.dataView.endUpdate();
-
-		this._table.resizeCanvas();
 		this._table.autosizeColumns();
+		this._table.resizeCanvas();
 		let expandedJobs = this._agentViewComponent.expanded;
 		let expansions = 0;
 		for (let i = 0; i < jobs.length; i++){
@@ -226,8 +226,18 @@ export class JobsViewComponent implements AfterContentChecked {
 		});
 		this._showProgressWheel = false;
 		this._cd.detectChanges();
-		$(window).resize(() => {
-			this._table.resizeCanvas();
+		const self = this;
+		this._tabHeight = $('agentview-component #jobsDiv .jobview-grid').get(0).clientHeight;
+		$(window).resize((e) => {
+			let currentTabHeight = $('agentview-component #jobsDiv .jobview-grid').get(0).clientHeight;
+			if (currentTabHeight < self._tabHeight) {
+				$('agentview-component #jobsDiv div.ui-widget').css('height', `${currentTabHeight-22}px`);
+				self._table.resizeCanvas();
+			} else {
+				$('agentview-component #jobsDiv div.ui-widget').css('height', `${currentTabHeight}px`);
+				self._table.resizeCanvas();
+			}
+			self._tabHeight = currentTabHeight;
 		});
 		this.loadJobHistories();
 	}

src/sql/parts/modelComponents/card.component.html

@@ -0,0 +1,19 @@
+<div *ngIf="label" class="model-card">
+	<span *ngIf="hasStatus" class="card-status">
+		<div class="status-content" [style.backgroundColor]="statusColor"></div>
+	</span>
+	<div class="card-content">
+		<h4 class="card-label">{{label}}</h4>
+		<p class="card-value">{{value}}</p>
+		<span *ngIf="actions">
+			<table class="model-table">
+				<tr *ngFor="let action of actions">
+					<td class="table-row">{{action.label}}</td>
+					<td *ngIf="action.actionTitle" class="table-row">
+						<a class="pointer prominent" (click)="onDidActionClick(action)">{{action.actionTitle}}</a>
+					</td>
+				</tr>
+			</table>
+		</span>
+	</div>
+</div>

src/sql/parts/modelComponents/card.component.ts

@@ -9,29 +9,37 @@ import { Component, Input, Inject, ChangeDetectorRef, forwardRef, ComponentFacto
 } from '@angular/core';
 
 import * as sqlops from 'sqlops';
+import { ITheme, ICssStyleCollector } from 'vs/platform/theme/common/themeService';
+import * as colors from 'vs/platform/theme/common/colorRegistry';
 
 import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboardServiceInterface.service';
 import { ComponentBase } from 'sql/parts/modelComponents/componentBase';
-import { IComponent, IComponentDescriptor, IModelStore } from 'sql/parts/modelComponents/interfaces';
+import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/parts/modelComponents/interfaces';
+import { BOOTSTRAP_SERVICE_ID, IBootstrapService } from 'sql/services/bootstrap/bootstrapService';
+import { IColorTheme } from 'vs/workbench/services/themes/common/workbenchThemeService';
+import { StatusIndicator, CardProperties, ActionDescriptor } from 'sql/workbench/api/common/sqlExtHostTypes';
 
 @Component({
-	template: `
-		<div *ngIf="label" class="model-card" >
-			<h4 class="card-label">{{label}}</h4>
-			<p class="card-value">{{value}}</p>
-		</div>
-	`
+	templateUrl: decodeURI(require.toUrl('sql/parts/modelComponents/card.component.html'))
 })
 export default class CardComponent extends ComponentBase implements IComponent, OnDestroy {
 	@Input() descriptor: IComponentDescriptor;
 	@Input() modelStore: IModelStore;
 
-	constructor(@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef) {
+	private backgroundColor: string;
+
+	constructor(@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef,
+		@Inject(forwardRef(() => ElementRef)) private _el: ElementRef,
+		@Inject(BOOTSTRAP_SERVICE_ID) private _bootstrapService: IBootstrapService
+	) {
 		super(changeRef);
 	}
 
 	ngOnInit(): void {
 		this.baseInit();
+		this._register(this._bootstrapService.themeService.onDidColorThemeChange(this.updateTheme, this));
+		this.updateTheme(this._bootstrapService.themeService.getColorTheme());
+
 	}
 
 	ngOnDestroy(): void {
@@ -52,15 +60,45 @@ export default class CardComponent extends ComponentBase implements IComponent,
 	// CSS-bound properties
 
 	public get label(): string {
-		return this.getPropertyOrDefault<sqlops.CardProperties, string>((props) => props.label, '');
+		return this.getPropertyOrDefault<CardProperties, string>((props) => props.label, '');
 	}
 
 	public get value(): string {
-		return this.getPropertyOrDefault<sqlops.CardProperties, string>((props) => props.value, '');
+		return this.getPropertyOrDefault<CardProperties, string>((props) => props.value, '');
 	}
 
-	public get actions(): sqlops.ActionDescriptor[] {
-		return this.getPropertyOrDefault<sqlops.CardProperties, sqlops.ActionDescriptor[]>((props) => props.actions, []);
+	public get actions(): ActionDescriptor[] {
+		return this.getPropertyOrDefault<CardProperties, ActionDescriptor[]>((props) => props.actions, []);
 	}
 
+	public hasStatus(): boolean {
+		let status = this.getPropertyOrDefault<CardProperties, StatusIndicator>((props) => props.status, StatusIndicator.None);
+		return status !== StatusIndicator.None;
+	}
+
+	public get statusColor(): string {
+		let status = this.getPropertyOrDefault<CardProperties, StatusIndicator>((props) => props.status, StatusIndicator.None);
+		switch(status) {
+			case StatusIndicator.Ok:
+				return 'green';
+			case StatusIndicator.Warning:
+				return 'orange';
+			case StatusIndicator.Error:
+				return 'red';
+			default:
+				return this.backgroundColor;
+		}
+	}
+
+	private updateTheme(theme: IColorTheme) {
+		this.backgroundColor = theme.getColor(colors.editorBackground, true).toString();
+	}
+
+	private onDidActionClick(action: ActionDescriptor): void {
+		this._onEventEmitter.fire({
+			eventType: ComponentEventType.onDidClick,
+			args: action
+		});
+
+	}
 }

src/sql/parts/modelComponents/card.css

@@ -2,12 +2,9 @@
 .model-card {
 	position: relative;
 	display: inline-block;
-	height: auto;
+	height: 90%;
 	width: auto;
 	margin: 15px;
-	padding: 10px 45px 20px 45px;
-	min-height: 30px;
-	min-width: 30px;
 	border-width: 1px;
     border-style: solid;
     border-color: rgb(214, 214, 214);
@@ -16,6 +13,16 @@
     box-shadow: rgba(120, 120, 120, 0.75) 0px 0px 6px;
 }
 
+.model-card .card-content {
+	position: relative;
+	display: inline-block;
+	height: auto;
+	width: auto;
+	padding: 10px 45px 20px 45px;
+	min-height: 30px;
+	min-width: 30px;
+}
+
 .model-card .card-label {
 	font-size: 12px;
 	font-weight: bold;
@@ -25,3 +32,41 @@
 	font-size: 12px;
 	line-height: 18px;
 }
+
+.model-card .card-status {
+	position: absolute;
+	top: 7px;
+	left: 5px;
+	overflow: hidden;
+	width: 22px;
+	height: 22px;
+}
+
+.model-card .status-content {
+	position: absolute;
+	top: 0px;
+	right: 0px;
+	min-width: 16px;
+	height: 16px;
+	border-radius: 8px;
+	text-align: center;
+}
+
+.model-card .model-table {
+	border-spacing: 5px;
+}
+
+.model-table .table-row {
+		width: auto;
+		clear: both;
+}
+
+.model-table .table-cell {
+		vertical-align: top;
+		padding: 7px;
+}
+
+.model-table a {
+	cursor: pointer;
+	text-decoration: underline
+}

src/sql/parts/modelComponents/checkbox.component.ts

@@ -0,0 +1,105 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import {
+	Component, Input, Inject, ChangeDetectorRef, forwardRef, ComponentFactoryResolver,
+	ViewChild, ViewChildren, ElementRef, Injector, OnDestroy, QueryList, AfterViewInit
+} from '@angular/core';
+
+import * as sqlops from 'sqlops';
+import Event, { Emitter } from 'vs/base/common/event';
+
+import { ComponentBase } from 'sql/parts/modelComponents/componentBase';
+import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/parts/modelComponents/interfaces';
+import { Checkbox, ICheckboxOptions } from 'sql/base/browser/ui/checkbox/checkbox';
+import { CommonServiceInterface } from 'sql/services/common/commonServiceInterface.service';
+import { attachInputBoxStyler, attachListStyler } from 'vs/platform/theme/common/styler';
+
+@Component({
+	selector: 'checkbox',
+	template: `
+		<div #input style="width: 100%"></div>
+	`
+})
+export default class CheckBoxComponent extends ComponentBase implements IComponent, OnDestroy, AfterViewInit {
+	@Input() descriptor: IComponentDescriptor;
+	@Input() modelStore: IModelStore;
+	private _input: Checkbox;
+
+	@ViewChild('input', { read: ElementRef }) private _inputContainer: ElementRef;
+	constructor(
+		@Inject(forwardRef(() => CommonServiceInterface)) private _commonService: CommonServiceInterface,
+		@Inject(forwardRef(() => ChangeDetectorRef)) changeRef: ChangeDetectorRef) {
+		super(changeRef);
+	}
+
+	ngOnInit(): void {
+		this.baseInit();
+
+	}
+
+	ngAfterViewInit(): void {
+		if (this._inputContainer) {
+			let inputOptions: ICheckboxOptions = {
+				label: ''
+			};
+
+			this._input = new Checkbox(this._inputContainer.nativeElement, inputOptions);
+
+			this._register(this._input);
+			this._register(this._input.onChange(e => {
+				this.value = this._input.checked;
+				this._onEventEmitter.fire({
+					eventType: ComponentEventType.onDidChange,
+					args: e
+				});
+			}));
+		}
+	}
+
+	ngOnDestroy(): void {
+		this.baseDestroy();
+	}
+
+	/// IComponent implementation
+
+	public layout(): void {
+		this._changeRef.detectChanges();
+	}
+
+	public setLayout(layout: any): void {
+		// TODO allow configuring the look and feel
+		this.layout();
+	}
+
+	public setProperties(properties: { [key: string]: any; }): void {
+		super.setProperties(properties);
+		this._input.checked = this.checked;
+		this._input.label = this.label;
+		if (this.enabled) {
+			this._input.enable();
+		} else {
+			this._input.disable();
+		}
+	}
+
+	// CSS-bound properties
+
+	public get checked(): boolean {
+		return this.getPropertyOrDefault<sqlops.CheckBoxProperties, boolean>((props) => props.value, false);
+	}
+
+	public set value(newValue: boolean) {
+		this.setPropertyFromUI<sqlops.CheckBoxProperties, boolean>((properties, value) => { properties.checked = value; }, newValue);
+	}
+
+	private get label(): string {
+		return this.getPropertyOrDefault<sqlops.CheckBoxProperties, string>((props) => props.label, '');
+	}
+
+	private set label(newValue: string) {
+		this.setPropertyFromUI<sqlops.CheckBoxProperties, string>((properties, label) => { properties.label = label; }, newValue);
+	}
+}

src/sql/parts/modelComponents/componentBase.ts

@@ -4,7 +4,8 @@
  *--------------------------------------------------------------------------------------------*/
 import 'vs/css!./flexContainer';
 
-import { Component, Input, Inject, ChangeDetectorRef, forwardRef, ComponentFactoryResolver,
+import {
+	Component, Input, Inject, ChangeDetectorRef, forwardRef, ComponentFactoryResolver,
 	ViewChild, ElementRef, Injector, OnDestroy, OnInit
 } from '@angular/core';
 
@@ -23,6 +24,9 @@ export class ItemDescriptor<T> {
 
 export abstract class ComponentBase extends Disposable implements IComponent, OnDestroy, OnInit {
 	protected properties: { [key: string]: any; } = {};
+	private _valid: boolean = true;
+	protected _validations: (() => boolean | Thenable<boolean>)[] = [];
+	private _eventQueue: IComponentEventArgs[] = [];
 	constructor(
 		protected _changeRef: ChangeDetectorRef) {
 		super();
@@ -41,6 +45,7 @@ export abstract class ComponentBase extends Disposable implements IComponent, On
 	protected baseInit(): void {
 		if (this.modelStore) {
 			this.modelStore.registerComponent(this);
+			this._validations.push(() => this.modelStore.validate(this));
 		}
 	}
 
@@ -50,6 +55,7 @@ export abstract class ComponentBase extends Disposable implements IComponent, On
 		if (this.modelStore) {
 			this.modelStore.unregisterComponent(this);
 		}
+		this.dispose();
 	}
 
 	ngOnDestroy(): void {
@@ -64,6 +70,7 @@ export abstract class ComponentBase extends Disposable implements IComponent, On
 		}
 		this.properties = properties;
 		this.layout();
+		this.validate();
 	}
 
 	protected getProperties<TPropertyBag>(): TPropertyBag {
@@ -77,20 +84,62 @@ export abstract class ComponentBase extends Disposable implements IComponent, On
 
 	protected setPropertyFromUI<TPropertyBag, TValue>(propertySetter: (TPropertyBag, TValue) => void, value: TValue) {
 		propertySetter(this.getProperties<TPropertyBag>(), value);
-		this._onEventEmitter.fire({
+		this.fireEvent({
+			eventType: ComponentEventType.PropertiesChanged,
+			args: this.getProperties()
+		});
+		this.validate();
+	}
+
+	public get enabled(): boolean {
+		let properties = this.getProperties();
+		let enabled = properties['enabled'];
+		if (enabled === undefined) {
+			enabled = true;
+			properties['enabled'] = enabled;
+			this.fireEvent({
 				eventType: ComponentEventType.PropertiesChanged,
 				args: this.getProperties()
 			});
 		}
-
-	public get onEvent(): Event<IComponentEventArgs> {
-		return this._onEventEmitter.event;
+		return <boolean>enabled;
 	}
 
-	public get title(): string {
-		let properties = this.getProperties();
-		let title = properties['title'];
-		return title ? <string>title : '';
+	public get valid(): boolean {
+		return this._valid;
+	}
+
+	public registerEventHandler(handler: (event: IComponentEventArgs) => void): IDisposable {
+		if (this._eventQueue) {
+			while (this._eventQueue.length > 0) {
+				let event = this._eventQueue.pop();
+				handler(event);
+			}
+			this._eventQueue = undefined;
+		}
+		return this._onEventEmitter.event(handler);
+	}
+
+	private fireEvent(event: IComponentEventArgs) {
+		this._onEventEmitter.fire(event);
+		if (this._eventQueue) {
+			this._eventQueue.push(event);
+		}
+	}
+
+	public validate(): Thenable<boolean> {
+		let validations = this._validations.map(validation => Promise.resolve(validation()));
+		return Promise.all(validations).then(values => {
+			let isValid = values.every(value => value === true);
+			if (this._valid !== isValid) {
+				this._valid = isValid;
+				this.fireEvent({
+					eventType: ComponentEventType.validityChanged,
+					args: this._valid
+				});
+			}
+			return isValid;
+		});
 	}
 }
 
@@ -102,11 +151,17 @@ export abstract class ContainerBase<T> extends ComponentBase {
 	) {
 		super(_changeRef);
 		this.items = [];
+		this._validations.push(() => this.items.every(item => this.modelStore.getComponent(item.descriptor.id).valid));
 	}
 
 	/// IComponent container-related implementation
 	public addToContainer(componentDescriptor: IComponentDescriptor, config: any): void {
 		this.items.push(new ItemDescriptor(componentDescriptor, config));
+		this.modelStore.eventuallyRunOnComponent(componentDescriptor.id, component => component.registerEventHandler(event => {
+			if (event.eventType === ComponentEventType.validityChanged) {
+				this.validate();
+			}
+		}));
 		this._changeRef.detectChanges();
 	}
 

src/sql/parts/modelComponents/components.contribution.ts

@@ -9,6 +9,8 @@ import CardComponent from './card.component';
 import InputBoxComponent from './inputbox.component';
 import DropDownComponent from './dropdown.component';
 import ButtonComponent from './button.component';
+import CheckBoxComponent from './checkbox.component';
+import RadioButtonComponent from './radioButton.component';
 import { registerComponentType } from 'sql/platform/dashboard/common/modelComponentRegistry';
 import { ModelComponentTypes } from 'sql/workbench/api/common/sqlExtHostTypes';
 
@@ -29,3 +31,10 @@ registerComponentType(DROPDOWN_COMPONENT, ModelComponentTypes.DropDown, DropDown
 
 export const BUTTON_COMPONENT = 'button-component';
 registerComponentType(BUTTON_COMPONENT, ModelComponentTypes.Button, ButtonComponent);
+
+
+export const CHECKBOX_COMPONENT = 'checkbox-component';
+registerComponentType(CHECKBOX_COMPONENT, ModelComponentTypes.CheckBox, CheckBoxComponent);
+
+export const RADIOBUTTON_COMPONENT = 'radiobutton-component';
+registerComponentType(RADIOBUTTON_COMPONENT, ModelComponentTypes.RadioButton, RadioButtonComponent);

src/sql/parts/modelComponents/dropdown.component.ts

@@ -19,7 +19,7 @@ import { attachListStyler } from 'vs/platform/theme/common/styler';
 import { attachEditableDropdownStyler } from 'sql/common/theme/styler';
 
 @Component({
-	selector: 'inputBox',
+	selector: 'dropdown',
 	template: `
 		<div #input style="width: 100%"></div>
 	`
@@ -87,6 +87,7 @@ export default class DropDownComponent extends ComponentBase implements ICompone
 		if (this.value) {
 			this._dropdown.value = this.value;
 		}
+		this._dropdown.enabled = this.enabled;
 	}
 
 	// CSS-bound properties

src/sql/parts/modelComponents/flexContainer.component.ts

@@ -22,7 +22,7 @@ class FlexItem {
 @Component({
 	template: `
 		<div *ngIf="items" class="flexContainer" [style.flexFlow]="flexFlow" [style.justifyContent]="justifyContent"
-				[style.alignItems]="alignItems" [style.alignContent]="alignContent">
+				[style.alignItems]="alignItems" [style.alignContent]="alignContent" [style.height]="height">
 			<div *ngFor="let item of items" [style.flex]="getItemFlex(item)" [style.order]="getItemOrder(item)" >
 				<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore">
 				</model-component-wrapper>
@@ -37,6 +37,7 @@ export default class FlexContainer extends ContainerBase<FlexItemLayout> impleme
 	private _justifyContent: string;
 	private _alignItems: string;
 	private _alignContent: string;
+	private _height: string;
 
 	@ViewChildren(ModelComponentWrapper) private _componentWrappers: QueryList<ModelComponentWrapper>;
 
@@ -70,6 +71,7 @@ export default class FlexContainer extends ContainerBase<FlexItemLayout> impleme
 		this._justifyContent= layout.justifyContent ? layout.justifyContent : '';
 		this._alignItems= layout.alignItems ? layout.alignItems : '';
 		this._alignContent= layout.alignContent ? layout.alignContent : '';
+		this._height= layout.height ? layout.height + 'px' : '';
 		this.layout();
 	}
 
@@ -86,6 +88,10 @@ export default class FlexContainer extends ContainerBase<FlexItemLayout> impleme
 		return this._alignItems;
 	}
 
+	public get height(): string {
+		return this._height;
+	}
+
 	public get alignContent(): string {
 		return this._alignContent;
 	}

src/sql/parts/modelComponents/formContainer.component.ts

@@ -21,6 +21,9 @@ export interface TitledFormItemLayout {
 	title: string;
 	actions?: string[];
 	isFormComponent: Boolean;
+	horizontal: boolean;
+	width: number;
+	componentWidth: number;
 }
 class FormItem {
 	constructor(public descriptor: IComponentDescriptor, public config: TitledFormItemLayout) { }
@@ -28,23 +31,43 @@ class FormItem {
 
 @Component({
 	template: `
-		<div #container *ngIf="items" class="form-table"
-				[style.alignItems]="alignItems" [style.alignContent]="alignContent">
-			<div *ngFor="let item of items" class="form-row">
+		<div #container *ngIf="items" class="form-table" >
+			<ng-container *ngFor="let item of items">
+			<div class="form-row" [style.width]="getFormWidth(item)">
 				<ng-container *ngIf="isFormComponent(item)">
+					<ng-container *ngIf="isHorizontal(item)">
 						<div class="form-cell">{{getItemTitle(item)}}</div>
 						<div class="form-cell">
+							<div class="form-component-container">
+								<div [style.width]="getComponentWidth(item)" [ngClass]="{'form-input-flex': !getComponentWidth(item)}">
 									<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore">
 									</model-component-wrapper>
 								</div>
-					<div *ngIf="itemHasActions(item)" class="form-cell">
-						<div *ngFor="let actionItem of getActionComponents(item)" >
+								<div *ngIf="itemHasActions(item)" class="form-component-actions">
+										<ng-container *ngFor="let actionItem of getActionComponents(item)">
+											<model-component-wrapper  [descriptor]="actionItem.descriptor" [modelStore]="modelStore" >
+											</model-component-wrapper>
+										</ng-container>
+								</div>
+							</div>
+						</div>
+					</ng-container>
+					<div class="form-vertical-container" *ngIf="isVertical(item)">
+						<div class="form-item-row">{{getItemTitle(item)}}</div>
+						<div class="form-item-row" [style.width]="getComponentWidth(item)">
+							<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore" [style.width]="getComponentWidth(item)">
+							</model-component-wrapper>
+						</div>
+						<div *ngIf="itemHasActions(item)" class="form-item-row form-actions-table form-item-last-row">
+								<div *ngFor="let actionItem of getActionComponents(item)" class="form-actions-cell" >
 									<model-component-wrapper  [descriptor]="actionItem.descriptor" [modelStore]="modelStore">
 									</model-component-wrapper>
 								</div>
 							</div>
+					</div>
 				</ng-container>
 			</div>
+			</ng-container>
 		</div>
 	`
 })
@@ -93,6 +116,16 @@ export default class FormContainer extends ContainerBase<FormItemLayout> impleme
 		return this._alignContent;
 	}
 
+	private getFormWidth(item: FormItem): string {
+		let itemConfig = item.config;
+		return itemConfig && itemConfig.width ? +itemConfig.width + 'px' : '100%';
+	}
+
+	private getComponentWidth(item: FormItem): string {
+		let itemConfig = item.config;
+		return (itemConfig && itemConfig.componentWidth) ? itemConfig.componentWidth + 'px' : '';
+	}
+
 	private getItemTitle(item: FormItem): string {
 		let itemConfig = item.config;
 		return itemConfig ? itemConfig.title : '';
@@ -125,4 +158,12 @@ export default class FormContainer extends ContainerBase<FormItemLayout> impleme
 	public setLayout(layout: any): void {
 		this.layout();
 	}
+
+	private isHorizontal(item: FormItem): boolean {
+		return item && item.config && item.config.horizontal;
+	}
+
+	private isVertical(item: FormItem): boolean {
+		return item && item.config && !item.config.horizontal;
+	}
 }