Refactor and rename dashboard tabs part 1 (#755)

* refactor and rename dashboard tabs

* undo incorrect changes

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

@@ -12,14 +12,14 @@
 		</div>
 		<panel style="flex: 1 1 auto; position: relative" class="dashboard-panel" (onTabChange)="handleTabChange($event)" (onTabClose)="handleTabClose($event)" [actions]="panelActions">
 			<tab *ngFor="let tab of tabs" [title]="tab.title" class="fullsize" [identifier]="tab.id" [canClose]="tab.canClose" [actions]="tab.actions">
-				<dashboard-webview-tab *ngIf="getContentType(tab) === 'webview-tab'" [tab]="tab">
-				</dashboard-webview-tab>
-				<dashboard-widget-tab *ngIf="getContentType(tab) === 'widgets-tab'" [tab]="tab">
-				</dashboard-widget-tab>
-				<dashboard-left-nav-bar *ngIf="getContentType(tab) === 'left-nav-bar'" [tab]="tab">
-				</dashboard-left-nav-bar>
-				<dashboard-grid-tab *ngIf="getContentType(tab) === 'grid-tab'" [tab]="tab">
-				</dashboard-grid-tab>
+				<dashboard-webview-container *ngIf="getContentType(tab) === 'webview-container'" [tab]="tab">
+				</dashboard-webview-container>
+				<dashboard-widget-container *ngIf="getContentType(tab) === 'widgets-container'" [tab]="tab">
+				</dashboard-widget-container>
+				<dashboard-nav-section *ngIf="getContentType(tab) === 'nav-section'" [tab]="tab">
+				</dashboard-nav-section>
+				<dashboard-grid-container *ngIf="getContentType(tab) === 'grid-container'" [tab]="tab">
+				</dashboard-grid-container>
 			</tab>
 		</panel>
 	</div>

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

@@ -3,15 +3,15 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import 'vs/css!./dashboardPage';
-import './dashboardPanelStyles';
+import 'vs/css!sql/parts/dashboard/common/dashboardPage';
+import 'sql/parts/dashboard/common/dashboardPanelStyles';
 
 import { Component, Inject, forwardRef, ViewChild, ElementRef, ViewChildren, QueryList, OnDestroy, ChangeDetectorRef } from '@angular/core';
 
 import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboardServiceInterface.service';
 import { WidgetConfig, TabConfig, PinConfig } from 'sql/parts/dashboard/common/dashboardWidget';
 import { Extensions, IInsightRegistry } from 'sql/platform/dashboard/common/insightRegistry';
-import { DashboardWidgetWrapper } from 'sql/parts/dashboard/common/dashboardWidgetWrapper.component';
+import { DashboardWidgetWrapper } from 'sql/parts/dashboard/contents/dashboardWidgetWrapper.component';
 import { IPropertiesConfig } from 'sql/parts/dashboard/pages/serverDashboardPage.contribution';
 import { PanelComponent } from 'sql/base/browser/ui/panel/panel.component';
 import { IDashboardRegistry, Extensions as DashboardExtensions, IDashboardTab } from 'sql/platform/dashboard/common/dashboardRegistry';
@@ -22,8 +22,8 @@ import { AngularEventType } from 'sql/services/angularEventing/angularEventingSe
 import { DashboardTab } from 'sql/parts/dashboard/common/interfaces';
 import { error } from 'sql/base/common/log';
 import * as widgetHelper from 'sql/parts/dashboard/common/dashboardWidgetHelper';
-import { WIDGETS_TAB } from 'sql/parts/dashboard/tabs/dashboardWidgetTab.contribution';
-import { GRID_TAB } from 'sql/parts/dashboard/tabs/dashboardGridTab.contribution';
+import { WIDGETS_CONTAINER } from 'sql/parts/dashboard/containers/dashboardWidgetContainer.contribution';
+import { GRID_CONTAINER } from 'sql/parts/dashboard/containers/dashboardGridContainer.contribution';
 
 import { Registry } from 'vs/platform/registry/common/platform';
 import * as types from 'vs/base/common/types';
@@ -179,7 +179,7 @@ export abstract class DashboardPage extends Disposable implements OnDestroy {
 			id: 'homeTab',
 			publisher: undefined,
 			title: this.homeTabTitle,
-			content: { 'widgets-tab': homeWidgets },
+			container: { 'widgets-container': homeWidgets },
 			context: this.context,
 			originalConfig: this._originalConfig,
 			editable: true,
@@ -242,24 +242,24 @@ export abstract class DashboardPage extends Disposable implements OnDestroy {
 		if (dashboardTabs && dashboardTabs.length > 0) {
 			let selectedTabs = dashboardTabs.map(v => {
 
-				if (Object.keys(v.content).length !== 1) {
+				if (Object.keys(v.container).length !== 1) {
 					error('Exactly 1 content must be defined per space');
 				}
 
-				let key = Object.keys(v.content)[0];
-				if (key === WIDGETS_TAB || key === GRID_TAB) {
-					let configs = <WidgetConfig[]>Object.values(v.content)[0];
+				let key = Object.keys(v.container)[0];
+				if (key === WIDGETS_CONTAINER || key === GRID_CONTAINER) {
+					let configs = <WidgetConfig[]>Object.values(v.container)[0];
 					this._configModifiers.forEach(cb => {
 						configs = cb.apply(this, [configs, this.dashboardService, this.context]);
 					});
 					this._gridModifiers.forEach(cb => {
 						configs = cb.apply(this, [configs, this._originalConfig]);
 					});
-					if (key === WIDGETS_TAB) {
-						return { id: v.id, title: v.title, content: { 'widgets-tab': configs }, alwaysShow: v.alwaysShow };
+					if (key === WIDGETS_CONTAINER) {
+						return { id: v.id, title: v.title, container: { 'widgets-container': configs }, alwaysShow: v.alwaysShow };
 
 					} else {
-						return { id: v.id, title: v.title, content: { 'grid-tab': configs }, alwaysShow: v.alwaysShow };
+						return { id: v.id, title: v.title, container: { 'grid-container': configs }, alwaysShow: v.alwaysShow };
 					}
 				}
 				return v;
@@ -288,7 +288,7 @@ export abstract class DashboardPage extends Disposable implements OnDestroy {
 
 
 	private getContentType(tab: TabConfig): string {
-		return tab.content ? Object.keys(tab.content)[0] : '';
+		return tab.container ? Object.keys(tab.container)[0] : '';
 	}
 
 	private addNewTab(tab: TabConfig): void {

src/sql/parts/dashboard/common/dashboardTab.contribution.ts

@@ -11,7 +11,7 @@ import { registerTab, generateTabContentSchemaProperties } from 'sql/platform/da
 export interface IDashboardTabContrib {
 	id: string;
 	title: string;
-	content: object;
+	container: object;
 	description?: string;
 	provider?: string | string[];
 	edition?: number | number[];
@@ -61,8 +61,8 @@ const tabSchema: IJSONSchema = {
 				}
 			]
 		},
-		content: {
-			description: localize('sqlops.extension.contributes.dashboard.tab.content', "The content that will be displayed in this tab."),
+		container: {
+			description: localize('sqlops.extension.contributes.dashboard.tab.container', "The container that will be displayed in this tab."),
 			type: 'object',
 			properties: generateTabContentSchemaProperties()
 		},
@@ -87,7 +87,7 @@ const tabContributionSchema: IJSONSchema = {
 ExtensionsRegistry.registerExtensionPoint<IDashboardTabContrib | IDashboardTabContrib[]>('dashboard.tabs', [], tabContributionSchema).setHandler(extensions => {
 
 	function handleCommand(tab: IDashboardTabContrib, extension: IExtensionPointUser<any>) {
-		let { description, content, title, edition, provider, id, alwaysShow } = tab;
+		let { description, container, title, edition, provider, id, alwaysShow } = tab;
 		alwaysShow = alwaysShow || false;
 		let publisher = extension.description.publisher;
 		if (!title) {
@@ -97,10 +97,10 @@ ExtensionsRegistry.registerExtensionPoint<IDashboardTabContrib | IDashboardTabCo
 		if (!description) {
 			extension.collector.warn('No description specified to show.');
 		}
-		if (!content) {
-			extension.collector.warn('No content specified to show.');
+		if (!container) {
+			extension.collector.warn('No container specified to show.');
 		}
-		registerTab({ description, title, content, edition, provider, id, alwaysShow, publisher });
+		registerTab({ description, title, container, edition, provider, id, alwaysShow, publisher });
 	}
 
 	for (let extension of extensions) {

src/sql/parts/dashboard/containers/dashboardContainer.contribution.ts

@@ -9,26 +9,26 @@ import { join } from 'path';
 import { createCSSRule } from 'vs/base/browser/dom';
 import URI from 'vs/base/common/uri';
 
-import { registerInnerTab, generateInnerTabContentSchemaProperties } from 'sql/platform/dashboard/common/innerTabRegistry';
+import { registerContainer, generateContainerTypeSchemaProperties } from 'sql/platform/dashboard/common/dashboardContainerRegistry';
 
 export type IUserFriendlyIcon = string | { light: string; dark: string; };
 
-export interface IDashboardInnerTabContrib {
+export interface IDashboardContainerContrib {
 	id: string;
 	title: string;
 	icon?: IUserFriendlyIcon;
-	content: object;
+	container: object;
 }
 
-const innerTabSchema: IJSONSchema = {
+const containerSchema: IJSONSchema = {
 	type: 'object',
 	properties: {
 		id: {
 			type: 'string',
-			description: localize('sqlops.extension.contributes.dashboard.innertab.id', "Unique identifier for this inner tab. Will be passed to the extension for any requests.")
+			description: localize('sqlops.extension.contributes.dashboard.container.id', "Unique identifier for this inner tab. Will be passed to the extension for any requests.")
 		},
 		icon: {
-			description: localize('sqlops.extension.contributes.dashboard.innertab.icon', '(Optional) Icon which is used to represent this inner tab in the UI. Either a file path or a themable configuration'),
+			description: localize('sqlops.extension.contributes.dashboard.container.icon', '(Optional) Icon which is used to represent this inner tab in the UI. Either a file path or a themable configuration'),
 			anyOf: [{
 				type: 'string'
 			},
@@ -48,37 +48,37 @@ const innerTabSchema: IJSONSchema = {
 		},
 		title: {
 			type: 'string',
-			description: localize('sqlops.extension.contributes.dashboard.innertab.title', "Title of the inner tab to show the user.")
+			description: localize('sqlops.extension.contributes.dashboard.container.title', "Title of the inner tab to show the user.")
 		},
-		content: {
-			description: localize('sqlops.extension.contributes.dashboard.innertab.content', "The content that will be displayed in this inner tab."),
+		container: {
+			description: localize('sqlops.extension.contributes.dashboard.container.container', "The container that will be displayed in this inner tab."),
 			type: 'object',
-			properties: generateInnerTabContentSchemaProperties()
+			properties: generateContainerTypeSchemaProperties()
 		}
 	}
 };
 
-const innerTabContributionSchema: IJSONSchema = {
-	description: localize('sqlops.extension.contributes.innertabs', "Contributes a single or multiple inner tabs for users to add to their dashboard."),
+const containerContributionSchema: IJSONSchema = {
+	description: localize('sqlops.extension.contributes.containers', "Contributes a single or multiple inner tabs for users to add to their dashboard."),
 	oneOf: [
-		innerTabSchema,
+		containerSchema,
 		{
 			type: 'array',
-			items: innerTabSchema
+			items: containerSchema
 		}
 	]
 };
 
-ExtensionsRegistry.registerExtensionPoint<IDashboardInnerTabContrib | IDashboardInnerTabContrib[]>('dashboard.innertabs', [], innerTabContributionSchema).setHandler(extensions => {
+ExtensionsRegistry.registerExtensionPoint<IDashboardContainerContrib | IDashboardContainerContrib[]>('dashboard.containers', [], containerContributionSchema).setHandler(extensions => {
 
-	function handleCommand(innerTab: IDashboardInnerTabContrib, extension: IExtensionPointUser<any>) {
-		let { title, id, content, icon } = innerTab;
+	function handleCommand(dashboardContainer: IDashboardContainerContrib, extension: IExtensionPointUser<any>) {
+		let { title, id, container, icon } = dashboardContainer;
 		if (!title) {
 			extension.collector.error('No title specified for extension.');
 			return;
 		}
-		if (!content) {
-			extension.collector.warn('No content specified to show.');
+		if (!container) {
+			extension.collector.warn('No container specified to show.');
 		}
 
 		let iconClass: string;
@@ -95,12 +95,12 @@ ExtensionsRegistry.registerExtensionPoint<IDashboardInnerTabContrib | IDashboard
 			}
 		}
 
-		registerInnerTab({ title, id, content, hasIcon: !!icon });
+		registerContainer({ title, id, container, hasIcon: !!icon });
 	}
 
 	for (let extension of extensions) {
 		const { value } = extension;
-		if (Array.isArray<IDashboardInnerTabContrib>(value)) {
+		if (Array.isArray<IDashboardContainerContrib>(value)) {
 			for (let command of value) {
 				handleCommand(command, extension);
 			}

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

@@ -3,14 +3,14 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import 'vs/css!./dashboardGridTab';
+import 'vs/css!./dashboardGridContainer';
 
 import { Component, Inject, Input, forwardRef, ViewChild, ElementRef, ViewChildren, QueryList, OnDestroy, ChangeDetectorRef, EventEmitter, OnChanges } from '@angular/core';
 import { NgGridConfig, NgGrid, NgGridItem } from 'angular2-grid';
 
 import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboardServiceInterface.service';
 import { TabConfig, WidgetConfig } from 'sql/parts/dashboard/common/dashboardWidget';
-import { DashboardWidgetWrapper } from 'sql/parts/dashboard/common/dashboardWidgetWrapper.component';
+import { DashboardWidgetWrapper } from 'sql/parts/dashboard/contents/dashboardWidgetWrapper.component';
 import { subscriptionToDisposable } from 'sql/base/common/lifecycle';
 import { DashboardTab } from 'sql/parts/dashboard/common/interfaces';
 
@@ -38,11 +38,11 @@ export interface GridWebviewConfig extends GridCellConfig {
 }
 
 @Component({
-	selector: 'dashboard-grid-tab',
-	templateUrl: decodeURI(require.toUrl('sql/parts/dashboard/tabs/dashboardGridTab.component.html')),
-	providers: [{ provide: DashboardTab, useExisting: forwardRef(() => DashboardGridTab) }]
+	selector: 'dashboard-grid-container',
+	templateUrl: decodeURI(require.toUrl('sql/parts/dashboard/containers/dashboardGridContainer.component.html')),
+	providers: [{ provide: DashboardTab, useExisting: forwardRef(() => DashboardGridContainer) }]
 })
-export class DashboardGridTab extends DashboardTab implements OnDestroy, OnChanges {
+export class DashboardGridContainer extends DashboardTab implements OnDestroy, OnChanges {
 	@Input() private tab: TabConfig;
 	private _contents: GridCellConfig[];
 	private _onResize = new Emitter<void>();
@@ -130,8 +130,8 @@ export class DashboardGridTab extends DashboardTab implements OnDestroy, OnChang
 	}
 
 	ngOnChanges() {
-		if (this.tab.content) {
-			this._contents = Object.values(this.tab.content)[0];
+		if (this.tab.container) {
+			this._contents = Object.values(this.tab.container)[0];
 			this._contents.forEach(widget => {
 				if (!widget.row) {
 					widget.row = 0;

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

@@ -8,12 +8,12 @@ import * as nls from 'vs/nls';
 import { generateDashboardGridLayoutSchema } from 'sql/parts/dashboard/pages/dashboardPageContribution';
 import { registerTabContent } from 'sql/platform/dashboard/common/dashboardRegistry';
 
-export const GRID_TAB = 'grid-tab';
+export const GRID_CONTAINER = 'grid-container';
 
-let gridContentsSchema: IJSONSchema = {
+let gridContainersSchema: IJSONSchema = {
 	type: 'array',
 	description: nls.localize('dashboard.gridtab.content.items', "The list of widgets or webviews that will be displayed in this tab."),
 	items: generateDashboardGridLayoutSchema(undefined, true)
 };
 
-registerTabContent(GRID_TAB, gridContentsSchema);
+registerTabContent(GRID_CONTAINER, gridContainersSchema);

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

@@ -6,10 +6,9 @@
 -->
 <panel [options]="panelOpt" style="flex: 1 1 auto;" class="dashboard-panel" (onTabChange)="handleTabChange($event)">
 	<tab *ngFor="let tab of tabs" [title]="tab.title" class="fullsize" [identifier]="tab.id" [canClose]="tab.canClose" [actions]="tab.actions">
-		<dashboard-webview-tab *ngIf="getContentType(tab) === 'webview-tab'" [tab]="tab">
-		</dashboard-webview-tab>
-		<dashboard-widget-tab *ngIf="getContentType(tab) === 'widgets-tab'" [tab]="tab">
-		</dashboard-widget-tab>
+		<dashboard-webview-container *ngIf="getContentType(tab) === 'webview-container'" [tab]="tab">
+		</dashboard-webview-container>
+		<dashboard-widget-container *ngIf="getContentType(tab) === 'widgets-container'" [tab]="tab">
+		</dashboard-widget-container>
 	</tab>
-</panel>
-
+</panel>

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

@@ -3,31 +3,31 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import 'vs/css!./dashboardLeftNavBar';
+import 'vs/css!./dashboardNavSection';
 
 import { Component, Inject, Input, forwardRef, ViewChild, ElementRef, ViewChildren, QueryList, OnDestroy, ChangeDetectorRef, EventEmitter, OnChanges, AfterContentInit } from '@angular/core';
 
 import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboardServiceInterface.service';
 import { WidgetConfig, TabConfig } from 'sql/parts/dashboard/common/dashboardWidget';
 import { PanelComponent, IPanelOptions, NavigationBarLayout } from 'sql/base/browser/ui/panel/panel.component';
-import { IDashboardInnerTabRegistry, Extensions as InnerTabExtensions, IDashboardInnerTab } from 'sql/platform/dashboard/common/innerTabRegistry';
+import { IDashboardContainerRegistry, Extensions as InnerTabExtensions, IDashboardContainer } from 'sql/platform/dashboard/common/dashboardContainerRegistry';
 import { TabComponent } from 'sql/base/browser/ui/panel/tab.component';
 import { DashboardTab } from 'sql/parts/dashboard/common/interfaces';
 import { error } from 'sql/base/common/log';
-import { WIDGETS_TAB } from 'sql/parts/dashboard/tabs/dashboardWidgetTab.contribution';
+import { WIDGETS_CONTAINER } from 'sql/parts/dashboard/containers/dashboardWidgetContainer.contribution';
 import * as widgetHelper from 'sql/parts/dashboard/common/dashboardWidgetHelper';
 
 import { Registry } from 'vs/platform/registry/common/platform';
 import Event, { Emitter } from 'vs/base/common/event';
 
-const innerTabRegistry = Registry.as<IDashboardInnerTabRegistry>(InnerTabExtensions.InnerTabContributions);
+const innerTabRegistry = Registry.as<IDashboardContainerRegistry>(InnerTabExtensions.dashboardContainerContributions);
 
 @Component({
-	selector: 'dashboard-left-nav-bar',
-	providers: [{ provide: DashboardTab, useExisting: forwardRef(() => DashboardLeftNavBar) }],
-	templateUrl: decodeURI(require.toUrl('sql/parts/dashboard/tabs/dashboardLeftNavBar.component.html'))
+	selector: 'dashboard-nav-section',
+	providers: [{ provide: DashboardTab, useExisting: forwardRef(() => DashboardNavSection) }],
+	templateUrl: decodeURI(require.toUrl('sql/parts/dashboard/containers/dashboardNavSection.component.html'))
 })
-export class DashboardLeftNavBar extends DashboardTab implements OnDestroy, OnChanges, AfterContentInit {
+export class DashboardNavSection extends DashboardTab implements OnDestroy, OnChanges, AfterContentInit {
 	@Input() private tab: TabConfig;
 	protected tabs: Array<TabConfig> = [];
 	private _onResize = new Emitter<void>();
@@ -64,10 +64,10 @@ export class DashboardLeftNavBar extends DashboardTab implements OnDestroy, OnCh
 	ngOnChanges() {
 		this.tabs = [];
 		let innerTabIds = [];
-		let allPosibleInnerTab = innerTabRegistry.innerTabs;
-		let filteredTabs: IDashboardInnerTab[] = [];
-		if (this.tab.content) {
-			innerTabIds = Object.values(this.tab.content)[0];
+		let allPosibleInnerTab = innerTabRegistry.containers;
+		let filteredTabs: IDashboardContainer[] = [];
+		if (this.tab.container) {
+			innerTabIds = Object.values(this.tab.container)[0];
 			if (innerTabIds && innerTabIds.length > 0) {
 				innerTabIds.forEach(tabId => {
 					let tab = allPosibleInnerTab.find(i => i.id === tabId);
@@ -93,26 +93,26 @@ export class DashboardLeftNavBar extends DashboardTab implements OnDestroy, OnCh
 		this.dispose();
 	}
 
-	private loadNewTabs(dashboardTabs: IDashboardInnerTab[]) {
+	private loadNewTabs(dashboardTabs: IDashboardContainer[]) {
 		if (dashboardTabs && dashboardTabs.length > 0) {
 			let selectedTabs = dashboardTabs.map(v => {
 
-				if (Object.keys(v.content).length !== 1) {
+				if (Object.keys(v.container).length !== 1) {
 					error('Exactly 1 content must be defined per space');
 				}
 
-				let key = Object.keys(v.content)[0];
-				if (key === WIDGETS_TAB) {
-					let configs = <WidgetConfig[]>Object.values(v.content)[0];
+				let key = Object.keys(v.container)[0];
+				if (key === WIDGETS_CONTAINER) {
+					let configs = <WidgetConfig[]>Object.values(v.container)[0];
 					this._configModifiers.forEach(cb => {
 						configs = cb.apply(this, [configs, this.dashboardService, this.tab.context]);
 					});
 					this._gridModifiers.forEach(cb => {
 						configs = cb.apply(this, [configs]);
 					});
-					return { id: v.id, title: v.title, content: { 'widgets-tab': configs } };
+					return { id: v.id, title: v.title, container: { 'widgets-container': configs } };
 				}
-				return { id: v.id, title: v.title, content: v.content };
+				return { id: v.id, title: v.title, container: v.container };
 			}).map(v => {
 				let config = v as TabConfig;
 				config.context = this.tab.context;
@@ -138,7 +138,7 @@ export class DashboardLeftNavBar extends DashboardTab implements OnDestroy, OnCh
 	}
 
 	private getContentType(tab: TabConfig): string {
-		return tab.content ? Object.keys(tab.content)[0] : '';
+		return tab.container ? Object.keys(tab.container)[0] : '';
 	}
 
 	public get id(): string {

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

@@ -7,9 +7,9 @@ import * as nls from 'vs/nls';
 
 import { registerTabContent } from 'sql/platform/dashboard/common/dashboardRegistry';
 
-export const LEFT_NAV_TAB = 'left-nav-bar';
+export const NAV_SECTION = 'nav-section';
 
-let leftNavSchema: IJSONSchema = {
+let NavSectionSchema: IJSONSchema = {
 	type: 'array',
 	description: nls.localize('dashboard.tab.content.left-nav-bar', "The list of inner tabs IDs that will be displayed in this vertical navigation bar."),
 	items: {
@@ -17,4 +17,4 @@ let leftNavSchema: IJSONSchema = {
 	}
 };
 
-registerTabContent(LEFT_NAV_TAB, leftNavSchema);
+registerTabContent(NAV_SECTION, NavSectionSchema);

src/sql/parts/dashboard/containers/dashboardNavSection.css

@@ -3,7 +3,7 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-dashboard-left-nav-bar {
+dashboard-nav-section {
 	height: 100%;
 	width: 100%;
 	display: block;

src/sql/parts/dashboard/containers/dashboardWebviewContainer.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 'vs/css!./dashboardWebviewTab';
+import 'vs/css!./dashboardWebviewContainer';
 
 import { Component, forwardRef, Input, AfterContentInit, ViewChild } from '@angular/core';
 
@@ -13,14 +13,14 @@ import { TabConfig } from 'sql/parts/dashboard/common/dashboardWidget';
 import { WebviewContent } from 'sql/parts/dashboard/contents/webviewContent.component';
 
 @Component({
-	selector: 'dashboard-webview-tab',
-	providers: [{ provide: DashboardTab, useExisting: forwardRef(() => DashboardWebviewTab) }],
+	selector: 'dashboard-webview-container',
+	providers: [{ provide: DashboardTab, useExisting: forwardRef(() => DashboardWebviewContainer) }],
 	template: `
 		<webview-content [webviewId]="tab.id">
 		</webview-content>
 	`
 })
-export class DashboardWebviewTab extends DashboardTab implements AfterContentInit {
+export class DashboardWebviewContainer extends DashboardTab implements AfterContentInit {
 	@Input() private tab: TabConfig;
 
 	private _onResize = new Emitter<void>();

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

@@ -6,9 +6,9 @@ import { IJSONSchema } from 'vs/base/common/jsonSchema';
 import * as nls from 'vs/nls';
 
 import { registerTabContent } from 'sql/platform/dashboard/common/dashboardRegistry';
-import { registerInnerTabContent } from 'sql/platform/dashboard/common/innerTabRegistry';
+import { registerContainerType } from 'sql/platform/dashboard/common/dashboardContainerRegistry';
 
-export const WEBVIEW_TAB = 'webview-tab';
+export const WEBVIEW_CONTAINER = 'webview-container';
 
 let webviewSchema: IJSONSchema = {
 	type: 'null',
@@ -16,5 +16,5 @@ let webviewSchema: IJSONSchema = {
 	default: null
 };
 
-registerTabContent(WEBVIEW_TAB, webviewSchema);
-registerInnerTabContent(WEBVIEW_TAB, webviewSchema);
+registerTabContent(WEBVIEW_CONTAINER, webviewSchema);
+registerContainerType(WEBVIEW_CONTAINER, webviewSchema);

src/sql/parts/dashboard/containers/dashboardWebviewContainer.css

@@ -3,7 +3,7 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-dashboard-webview-tab {
+dashboard-webview-container {
 	height: 100%;
 	width : 100%;
 	display: block;

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

@@ -3,14 +3,14 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import 'vs/css!./dashboardWidgetTab';
+import 'vs/css!./dashboardWidgetContainer';
 
 import { Component, Inject, Input, forwardRef, ViewChild, ElementRef, ViewChildren, QueryList, OnDestroy, ChangeDetectorRef, EventEmitter, OnChanges, AfterContentInit } from '@angular/core';
 import { NgGridConfig, NgGrid, NgGridItem } from 'angular2-grid';
 
 import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboardServiceInterface.service';
 import { TabConfig, WidgetConfig } from 'sql/parts/dashboard/common/dashboardWidget';
-import { DashboardWidgetWrapper } from 'sql/parts/dashboard/common/dashboardWidgetWrapper.component';
+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 { WidgetContent } from 'sql/parts/dashboard/contents/widgetContent.component';
@@ -21,14 +21,14 @@ import * as objects from 'vs/base/common/objects';
 import Event, { Emitter } from 'vs/base/common/event';
 
 @Component({
-	selector: 'dashboard-widget-tab',
-	providers: [{ provide: DashboardTab, useExisting: forwardRef(() => DashboardWidgetTab) }],
+	selector: 'dashboard-widget-container',
+	providers: [{ provide: DashboardTab, useExisting: forwardRef(() => DashboardWidgetContainer) }],
 	template: `
 		<widget-content [widgets]="widgets" [originalConfig]="tab.originalConfig" [context]="tab.context">
 		</widget-content>
 	`
 })
-export class DashboardWidgetTab extends DashboardTab implements OnDestroy, OnChanges, AfterContentInit {
+export class DashboardWidgetContainer extends DashboardTab implements OnDestroy, OnChanges, AfterContentInit {
 	@Input() private tab: TabConfig;
 	private widgets: WidgetConfig[];
 	private _onResize = new Emitter<void>();
@@ -42,8 +42,8 @@ export class DashboardWidgetTab extends DashboardTab implements OnDestroy, OnCha
 	}
 
 	ngOnChanges() {
-		if (this.tab.content) {
-			this.widgets = Object.values(this.tab.content)[0];
+		if (this.tab.container) {
+			this.widgets = Object.values(this.tab.container)[0];
 			this._cd.detectChanges();
 		}
 	}

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

@@ -7,9 +7,9 @@ import * as nls from 'vs/nls';
 
 import { generateDashboardWidgetSchema } from 'sql/parts/dashboard/pages/dashboardPageContribution';
 import { registerTabContent } from 'sql/platform/dashboard/common/dashboardRegistry';
-import { registerInnerTabContent } from 'sql/platform/dashboard/common/innerTabRegistry';
+import { registerContainerType } from 'sql/platform/dashboard/common/dashboardContainerRegistry';
 
-export const WIDGETS_TAB = 'widgets-tab';
+export const WIDGETS_CONTAINER = 'widgets-container';
 
 let widgetsSchema: IJSONSchema = {
 	type: 'array',
@@ -17,5 +17,5 @@ let widgetsSchema: IJSONSchema = {
 	items: generateDashboardWidgetSchema(undefined, true)
 };
 
-registerTabContent(WIDGETS_TAB, widgetsSchema);
-registerInnerTabContent(WIDGETS_TAB, widgetsSchema);
+registerTabContent(WIDGETS_CONTAINER, widgetsSchema);
+registerContainerType(WIDGETS_CONTAINER, widgetsSchema);

src/sql/parts/dashboard/containers/dashboardWidgetContainer.css

@@ -3,7 +3,7 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-dashboard-widget-tab {
+dashboard-widget-container {
 	height: 100%;
 	width: 100%;
 }

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

@@ -10,11 +10,11 @@ import {
 	ElementRef, OnInit, ChangeDetectorRef, OnDestroy, ReflectiveInjector, Injector, Type, ComponentRef
 } from '@angular/core';
 
-import { ComponentHostDirective } from './componentHost.directive';
-import { WidgetConfig, WIDGET_CONFIG, IDashboardWidget } from './dashboardWidget';
+import { ComponentHostDirective } from 'sql/parts/dashboard/common/componentHost.directive';
+import { WidgetConfig, WIDGET_CONFIG, IDashboardWidget } from 'sql/parts/dashboard/common/dashboardWidget';
 import { Extensions, IInsightRegistry } from 'sql/platform/dashboard/common/insightRegistry';
 import { error } from 'sql/base/common/log';
-import { RefreshWidgetAction, ToggleMoreWidgetAction, DeleteWidgetAction } from './actions';
+import { RefreshWidgetAction, ToggleMoreWidgetAction, DeleteWidgetAction } from 'sql/parts/dashboard/common/actions';
 
 /* Widgets */
 import { PropertiesWidgetComponent } from 'sql/parts/dashboard/widgets/properties/propertiesWidget.component';
@@ -43,7 +43,7 @@ const componentMap: { [x: string]: Type<IDashboardWidget> } = {
 
 @Component({
 	selector: 'dashboard-widget-wrapper',
-	templateUrl: decodeURI(require.toUrl('sql/parts/dashboard/common/dashboardWidgetWrapper.component.html'))
+	templateUrl: decodeURI(require.toUrl('sql/parts/dashboard/contents/dashboardWidgetWrapper.component.html'))
 })
 export class DashboardWidgetWrapper implements AfterContentInit, OnInit, OnDestroy {
 	@Input() private _config: WidgetConfig;

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

@@ -10,7 +10,7 @@ import { NgGridConfig, NgGrid, NgGridItem } from 'angular2-grid';
 
 import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboardServiceInterface.service';
 import { WidgetConfig } from 'sql/parts/dashboard/common/dashboardWidget';
-import { DashboardWidgetWrapper } from 'sql/parts/dashboard/common/dashboardWidgetWrapper.component';
+import { DashboardWidgetWrapper } from 'sql/parts/dashboard/contents/dashboardWidgetWrapper.component';
 import { subscriptionToDisposable } from 'sql/base/common/lifecycle';
 
 import { Disposable, IDisposable } from 'vs/base/common/lifecycle';

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

@@ -26,16 +26,16 @@ import { ComponentHostDirective } from 'sql/parts/dashboard/common/componentHost
 
 /* Base Components */
 import { DashboardComponent, DASHBOARD_SELECTOR } from 'sql/parts/dashboard/dashboard.component';
-import { DashboardWidgetWrapper } from 'sql/parts/dashboard/common/dashboardWidgetWrapper.component';
-import { DashboardWidgetTab } from 'sql/parts/dashboard/tabs/dashboardWidgetTab.component';
-import { DashboardGridTab } from 'sql/parts/dashboard/tabs/dashboardGridTab.component';
-import { DashboardWebviewTab } from 'sql/parts/dashboard/tabs/dashboardWebviewTab.component';
-import { DashboardLeftNavBar } from 'sql/parts/dashboard/tabs/dashboardLeftNavBar.component';
+import { DashboardWidgetWrapper } from 'sql/parts/dashboard/contents/dashboardWidgetWrapper.component';
+import { DashboardWidgetContainer } from 'sql/parts/dashboard/containers/dashboardWidgetContainer.component';
+import { DashboardGridContainer } from 'sql/parts/dashboard/containers/dashboardGridContainer.component';
+import { DashboardWebviewContainer } from 'sql/parts/dashboard/containers/dashboardWebviewContainer.component';
+import { DashboardNavSection } from 'sql/parts/dashboard/containers/dashboardNavSection.component';
 import { WidgetContent } from 'sql/parts/dashboard/contents/widgetContent.component';
 import { WebviewContent } from 'sql/parts/dashboard/contents/webviewContent.component';
 import { BreadcrumbComponent } from 'sql/base/browser/ui/breadcrumb/breadcrumb.component';
 import { IBreadcrumbService } from 'sql/base/browser/ui/breadcrumb/interfaces';
-let baseComponents = [DashboardComponent, DashboardWidgetWrapper, DashboardWebviewTab, DashboardWidgetTab, DashboardGridTab, DashboardLeftNavBar, WidgetContent, WebviewContent, ComponentHostDirective, BreadcrumbComponent];
+let baseComponents = [DashboardComponent, DashboardWidgetWrapper, DashboardWebviewContainer, DashboardWidgetContainer, DashboardGridContainer, DashboardNavSection, WidgetContent, WebviewContent, ComponentHostDirective, BreadcrumbComponent];
 
 /* Panel */
 import { PanelModule } from 'sql/base/browser/ui/panel/panel.module';

src/sql/platform/dashboard/common/dashboardContainerRegistry.ts

@@ -0,0 +1,70 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { Registry } from 'vs/platform/registry/common/platform';
+import { IJSONSchema, IJSONSchemaMap } from 'vs/base/common/jsonSchema';
+import { Extensions as ConfigurationExtension } from 'vs/platform/configuration/common/configurationRegistry';
+import { deepClone } from 'vs/base/common/objects';
+
+import { WidgetConfig } from 'sql/parts/dashboard/common/dashboardWidget';
+
+export const Extensions = {
+	dashboardContainerContributions: 'dashboard.contributions.container'
+};
+
+export interface IDashboardContainer {
+	id: string;
+	title: string;
+	hasIcon: boolean;
+	container?: object;
+}
+
+export interface IDashboardContainerRegistry {
+	registerContainer(tab: IDashboardContainer): void;
+	registerContainerType(id: string, schema: IJSONSchema): void;
+	containers: Array<IDashboardContainer>;
+	containerTypeSchemaProperties: IJSONSchemaMap;
+}
+
+class DashboardContainerRegistry implements IDashboardContainerRegistry {
+	private _containers = new Array<IDashboardContainer>();
+	private _dashboardContainerTypeSchemaProperties: IJSONSchemaMap = {};
+
+	public registerContainer(tab: IDashboardContainer): void {
+		this._containers.push(tab);
+	}
+
+	public get containers(): Array<IDashboardContainer> {
+		return this._containers;
+	}
+
+	/**
+	 * Register a dashboard widget
+	 * @param id id of the widget
+	 * @param schema config schema of the widget
+	 */
+	public registerContainerType(id: string, schema: IJSONSchema): void {
+		this._dashboardContainerTypeSchemaProperties[id] = schema;
+	}
+
+	public get containerTypeSchemaProperties(): IJSONSchemaMap {
+		return deepClone(this._dashboardContainerTypeSchemaProperties);
+	}
+}
+
+const dashboardContainerRegistry = new DashboardContainerRegistry();
+Registry.add(Extensions.dashboardContainerContributions, dashboardContainerRegistry);
+
+export function registerContainer(innerTab: IDashboardContainer): void {
+	dashboardContainerRegistry.registerContainer(innerTab);
+}
+
+export function registerContainerType(id: string, schema: IJSONSchema): void {
+	dashboardContainerRegistry.registerContainerType(id, schema);
+}
+
+export function generateContainerTypeSchemaProperties(): IJSONSchemaMap {
+	return dashboardContainerRegistry.containerTypeSchemaProperties;
+}

src/sql/platform/dashboard/common/dashboardRegistry.ts

@@ -24,7 +24,7 @@ export interface IDashboardTab {
 	title: string;
 	publisher: string;
 	description?: string;
-	content?: object;
+	container?: object;
 	provider?: string | string[];
 	edition?: number | number[];
 	alwaysShow?: boolean;

src/sql/platform/dashboard/common/innerTabRegistry.ts

@@ -1,70 +0,0 @@
-/*---------------------------------------------------------------------------------------------
- *  Copyright (c) Microsoft Corporation. All rights reserved.
- *  Licensed under the Source EULA. See License.txt in the project root for license information.
- *--------------------------------------------------------------------------------------------*/
-
-import { Registry } from 'vs/platform/registry/common/platform';
-import { IJSONSchema, IJSONSchemaMap } from 'vs/base/common/jsonSchema';
-import { Extensions as ConfigurationExtension } from 'vs/platform/configuration/common/configurationRegistry';
-import { deepClone } from 'vs/base/common/objects';
-
-import { WidgetConfig } from 'sql/parts/dashboard/common/dashboardWidget';
-
-export const Extensions = {
-	InnerTabContributions: 'dashboard.contributions.innerTabs'
-};
-
-export interface IDashboardInnerTab {
-	id: string;
-	title: string;
-	hasIcon: boolean;
-	content?: object;
-}
-
-export interface IDashboardInnerTabRegistry {
-	registerInnerTab(tab: IDashboardInnerTab): void;
-	registerInnerTabContent(id: string, schema: IJSONSchema): void;
-	innerTabs: Array<IDashboardInnerTab>;
-	innerTabContentSchemaProperties: IJSONSchemaMap;
-}
-
-class DashboardInnerTabRegistry implements IDashboardInnerTabRegistry {
-	private _innertabs = new Array<IDashboardInnerTab>();
-	private _dashboardInnerTabContentSchemaProperties: IJSONSchemaMap = {};
-
-	public registerInnerTab(tab: IDashboardInnerTab): void {
-		this._innertabs.push(tab);
-	}
-
-	public get innerTabs(): Array<IDashboardInnerTab> {
-		return this._innertabs;
-	}
-
-	/**
-	 * Register a dashboard widget
-	 * @param id id of the widget
-	 * @param schema config schema of the widget
-	 */
-	public registerInnerTabContent(id: string, schema: IJSONSchema): void {
-		this._dashboardInnerTabContentSchemaProperties[id] = schema;
-	}
-
-	public get innerTabContentSchemaProperties(): IJSONSchemaMap {
-		return deepClone(this._dashboardInnerTabContentSchemaProperties);
-	}
-}
-
-const dashboardInnerTabRegistry = new DashboardInnerTabRegistry();
-Registry.add(Extensions.InnerTabContributions, dashboardInnerTabRegistry);
-
-export function registerInnerTab(innerTab: IDashboardInnerTab): void {
-	dashboardInnerTabRegistry.registerInnerTab(innerTab);
-}
-
-export function registerInnerTabContent(id: string, schema: IJSONSchema): void {
-	dashboardInnerTabRegistry.registerInnerTabContent(id, schema);
-}
-
-export function generateInnerTabContentSchemaProperties(): IJSONSchemaMap {
-	return dashboardInnerTabRegistry.innerTabContentSchemaProperties;
-}