profile page and summary page (#4769)

* add cluster name to page

* implement profile page -1

* fix compilation error due to new method

* profile page 0328

* summary page

* make divcontainer accessible

* handle disposable

* add support for "coming soon" cards

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

@@ -1,5 +1,5 @@
-<div *ngIf="label" [class]="getClass()" (click)="onCardClick()" (mouseover)="onCardHoverChanged($event)" (mouseout)="onCardHoverChanged($event)"
- tabIndex="0">
+<div *ngIf="label" [class]="getClass()" (click)="onCardClick()" (mouseover)="onCardHoverChanged($event)"
+	(mouseout)="onCardHoverChanged($event)" tabIndex="0">
 	<ng-container *ngIf="isVerticalButton || isDetailsCard">
 		<span *ngIf="hasStatus" class="card-status">
 			<div class="status-content" [style.backgroundColor]="statusColor"></div>
@@ -13,6 +13,9 @@
 					<div [class]="iconClass" [style.maxWidth]="iconWidth" [style.maxHeight]="iconHeight"></div>
 				</div>
 				<h4 class="card-label">{{label}}</h4>
+				<div *ngFor="let desc of descriptions">
+					<div class="list-item-description">{{desc}}</div>
+				</div>
 			</div>
 		</ng-container>
 
@@ -25,7 +28,8 @@
 						<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>
+								<a class="pointer prominent"
+									(click)="onDidActionClick(action)">{{action.actionTitle}}</a>
 							</td>
 						</tr>
 					</table>

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

@@ -103,7 +103,7 @@ export default class CardComponent extends ComponentWithIconBase implements ICom
 	}
 
 	private get selectable(): boolean {
-		return this.cardType === 'VerticalButton' || this.cardType === 'ListItem';
+		return this.enabled && (this.cardType === 'VerticalButton' || this.cardType === 'ListItem');
 	}
 
 	// CSS-bound properties

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

@@ -9,7 +9,7 @@ import {
 	ViewChild, ViewChildren, ElementRef, Injector, OnDestroy, QueryList,
 } from '@angular/core';
 
-import { IComponent, IComponentDescriptor, IModelStore } from 'sql/parts/modelComponents/interfaces';
+import { IComponent, IComponentDescriptor, IModelStore, ComponentEventType } from 'sql/parts/modelComponents/interfaces';
 import * as azdata from 'azdata';
 
 import { DashboardServiceInterface } from 'sql/parts/dashboard/services/dashboardServiceInterface.service';
@@ -17,6 +17,8 @@ import { ContainerBase } from 'sql/parts/modelComponents/componentBase';
 import { ModelComponentWrapper } from 'sql/parts/modelComponents/modelComponentWrapper.component';
 
 import types = require('vs/base/common/types');
+import { StandardKeyboardEvent } from 'vs/base/browser/keyboardEvent';
+import { KeyCode } from 'vs/base/common/keyCodes';
 
 class DivItem {
 	constructor(public descriptor: IComponentDescriptor, public config: azdata.DivItemLayout) { }
@@ -24,7 +26,7 @@ class DivItem {
 
 @Component({
 	template: `
-		<div #divContainer *ngIf="items" class="divContainer" [style.height]="height" [style.width]="width">
+		<div #divContainer *ngIf="items" class="divContainer" [style.height]="height" [style.width]="width"  (click)="onClick()" (keyup)="onKey($event)" [tabIndex]="tabIndex">
 			<div *ngFor="let item of items" [style.order]="getItemOrder(item)" [ngStyle]="getItemStyles(item)">
 				<model-component-wrapper [descriptor]="item.descriptor" [modelStore]="modelStore">
 				</model-component-wrapper>
@@ -76,17 +78,24 @@ export default class DivContainer extends ContainerBase<azdata.DivItemLayout> im
 	private updateOverflowY() {
 		this._overflowY = this.overflowY;
 		if (this._overflowY) {
-			let element = <HTMLElement> this.divContainer.nativeElement;
+			let element = <HTMLElement>this.divContainer.nativeElement;
 			element.style.overflowY = this._overflowY;
 		}
 	}
 
 	private updateScroll() {
-		let element = <HTMLElement> this.divContainer.nativeElement;
+		let element = <HTMLElement>this.divContainer.nativeElement;
 		element.scrollTop = element.scrollTop - this.yOffsetChange;
 		element.dispatchEvent(new Event('scroll'));
 	}
 
+	private onClick() {
+		this.fireEvent({
+			eventType: ComponentEventType.onDidClick,
+			args: undefined
+		});
+	}
+
 	// CSS-bound properties
 	public get height(): string {
 		return this._height;
@@ -111,6 +120,22 @@ export default class DivContainer extends ContainerBase<azdata.DivItemLayout> im
 		this.setPropertyFromUI<azdata.DivContainerProperties, any>((properties, newValue) => { properties.yOffsetChange = newValue; }, newValue);
 	}
 
+	public get clickable(): boolean {
+		return this.getPropertyOrDefault<azdata.DivContainerProperties, boolean>((props) => props.clickable, false);
+	}
+
+	public get tabIndex(): number {
+		return this.clickable ? 0 : -1;
+	}
+
+	private onKey(e: KeyboardEvent) {
+		let event = new StandardKeyboardEvent(e);
+		if (event.equals(KeyCode.Enter) || event.equals(KeyCode.Space)) {
+			this.onClick();
+			e.stopPropagation();
+		}
+	}
+
 	private getItemOrder(item: DivItem): number {
 		return item.config ? item.config.order : 0;
 	}