Maddy/properties widget for endpoints (#5654)

* changes to resue properties widget for endpoints

* comments added

* added loader

* changes to address the review comments: code clean up and constants

* dark theme style fox and misc

* added varibale for display aligment

* renamed hyperlink to isHyperlink

* added endpoints as a modelview to be used on dashboard

* added padding to fix the overlap issues.

* removed the propertieswidget changes

* formatting fixes for hygiene errors

* renamed endpoints to bdc-endpoints

* chnages to address the comments

* added null check

src/sql/workbench/parts/dashboard/containers/dashboardGridContainer.component.html

@@ -20,6 +20,9 @@
 						<webview-content *ngIf="isWebview(row,col)" [webviewId]="getWebviewId(row,col)">
 						</webview-content>
 
+						<modelview-content *ngIf="isModelView(row,col)" [modelViewId]="getModelViewId(row,col)">
+						</modelview-content>
+
 					</td>
 				</ng-container>
 			</ng-container>

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

@@ -32,6 +32,13 @@ export interface GridWebviewConfig extends GridCellConfig {
 		id?: string;
 	};
 }
+export interface GridModelViewConfig extends GridCellConfig {
+	widget: {
+		modelview: {
+			id?: string;
+		}
+	};
+}
 
 @Component({
 	selector: 'dashboard-grid-container',
@@ -78,6 +85,17 @@ export class DashboardGridContainer extends DashboardTab implements OnDestroy {
 		return undefined;
 	}
 
+	protected getModelViewContent(row: number, col: number): GridModelViewConfig {
+		const content = this.getContent(row, col);
+		if (content) {
+			const modelviewConfig = <GridModelViewConfig>content;
+			if (modelviewConfig && modelviewConfig.widget.modelview) {
+				return modelviewConfig;
+			}
+		}
+		return undefined;
+	}
+
 
 	protected isWidget(row: number, col: number): boolean {
 		const widgetConfig = this.getWidgetContent(row, col);
@@ -97,6 +115,18 @@ export class DashboardGridContainer extends DashboardTab implements OnDestroy {
 		return undefined;
 	}
 
+	protected isModelView(row: number, col: number): boolean {
+		const modelView = this.getModelViewContent(row, col);
+		return modelView !== undefined;
+	}
+
+	protected getModelViewId(row: number, col: number): string {
+		const widgetConfig = this.getModelViewContent(row, col);
+		if (widgetConfig && widgetConfig.widget.modelview) {
+			return widgetConfig.widget.modelview.id;
+		}
+		return undefined;
+	}
 	protected getColspan(row: number, col: number): string {
 		const content = this.getContent(row, col);
 		let colspan: string = '1';

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

@@ -99,9 +99,6 @@ const widgetComponents = [
 /* Insights */
 const insightComponents = Registry.as<IInsightRegistry>(Extensions.InsightContribution).getAllCtors();
 
-/* Model-backed components */
-const extensionComponents = Registry.as<IComponentRegistry>(ComponentExtensions.ComponentContribution).getAllCtors();
-
 // Setup routes for various child components
 const appRoutes: Routes = [
 	{ path: 'database-dashboard', component: DatabaseDashboardPage },
@@ -116,6 +113,10 @@ const appRoutes: Routes = [
 
 // Connection Dashboard main angular module
 export const DashboardModule = (params, selector: string, instantiationService: IInstantiationService): any => {
+
+	/* Model-backed components */
+	const extensionComponents = Registry.as<IComponentRegistry>(ComponentExtensions.ComponentContribution).getAllCtors();
+
 	@NgModule({
 		declarations: [
 			...baseComponents,