Further BDC Dashboard Updates (#6926)

* BDC Dashboard updates

* Add service health status view details

* Add sanity check to endpoint fixing logic for SQL dashboard as well

extensions/big-data-cluster/package.json

@@ -42,6 +42,10 @@
 				{
 					"command": "bigDataClusters.command.refreshController",
 					"when": "false"
+				},
+				{
+					"command": "bigDataClusters.command.manageController",
+					"when": "false"
 				}
 			],
 			"view/title": [
@@ -53,14 +57,19 @@
 			],
 			"view/item/context": [
 				{
-					"command": "bigDataClusters.command.deleteController",
+					"command": "bigDataClusters.command.manageController",
 					"when": "viewItem == bigDataClusters.itemType.controllerNode",
 					"group": "navigation@1"
 				},
 				{
 					"command": "bigDataClusters.command.refreshController",
 					"when": "viewItem == bigDataClusters.itemType.controllerNode",
-					"group": "navigation@1"
+					"group": "navigation@2"
+				},
+				{
+					"command": "bigDataClusters.command.deleteController",
+					"when": "viewItem == bigDataClusters.itemType.controllerNode",
+					"group": "navigation@3"
 				}
 			]
 		},
@@ -96,6 +105,10 @@
 					"light": "resources/light/refresh.svg",
 					"dark": "resources/dark/refresh_inverse.svg"
 				}
+			},
+			{
+				"command": "bigDataClusters.command.manageController",
+				"title": "%command.manageController.title%"
 			}
 		]
 	},

extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboard.ts

@@ -75,7 +75,7 @@ export class BdcDashboard {
 				}).component();
 
 			openTroubleshootNotebookButton.onDidClick(() => {
-				vscode.commands.executeCommand('mssqlCluster.task.openNotebook');
+				vscode.commands.executeCommand('books.sqlserver2019');
 			});
 
 			const toolbarContainer = modelView.modelBuilder.toolbarContainer()
@@ -131,6 +131,9 @@ export class BdcDashboard {
 			});
 			this.navContainer.addItem(overviewNavItem, { flex: '0 0 auto' });
 
+			const clusterDetailsHeader = modelView.modelBuilder.text().withProperties({ value: localize('bdc.dashboard.clusterDetails', 'Cluster Details'), CSSStyles: { 'margin-block-end': '0px' } }).component();
+			this.navContainer.addItem(clusterDetailsHeader, { CSSStyles: { 'user-select': 'none', 'font-weight': 'bold', 'border-bottom': 'solid 1px #ccc', 'margin-bottom': '10px' } });
+
 			await modelView.initializeModel(rootContainer);
 
 			this.initialized = true;

extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardModel.ts

@@ -8,7 +8,7 @@
 import * as vscode from 'vscode';
 import { getBdcStatus, getEndPoints } from '../controller/clusterControllerApi';
 import { EndpointModel, BdcStatusModel } from '../controller/apiGenerated';
-import { showErrorMessage } from '../utils';
+import { showErrorMessage, Endpoint } from '../utils';
 
 export class BdcDashboardModel {
 
@@ -50,9 +50,27 @@ export class BdcDashboardModel {
 			}),
 			getEndPoints(this.url, this.username, this.password, true).then(response => {
 				this._endpoints = response.endPoints || [];
+				fixEndpoints(this._endpoints);
 				this._endpointsLastUpdated = new Date();
 				this._onDidUpdateEndpoints.fire(this.serviceEndpoints);
 			})
 		]).catch(error => showErrorMessage(error));
 	}
 }
+
+/**
+ * Applies fixes to the endpoints received so they are displayed correctly
+ * @param endpoints The endpoints received to modify
+ */
+function fixEndpoints(endpoints: EndpointModel[]) {
+	endpoints.forEach(e => {
+		if (e.name === Endpoint.metricsui && e.endpoint && e.endpoint.indexOf('/d/wZx3OUdmz') === -1) {
+			// Update to have correct URL
+			e.endpoint += '/d/wZx3OUdmz';
+		}
+		if (e.name === Endpoint.logsui && e.endpoint && e.endpoint.indexOf('/app/kibana#/discover') === -1) {
+			// Update to have correct URL
+			e.endpoint += '/app/kibana#/discover';
+		}
+	});
+}

extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardOverviewPage.ts

@@ -6,6 +6,7 @@
 'use strict';
 
 import * as azdata from 'azdata';
+import * as vscode from 'vscode';
 import * as nls from 'vscode-nls';
 import { BdcDashboardModel } from './bdcDashboardModel';
 import { IconPathHelper } from '../constants';
@@ -66,7 +67,7 @@ export class BdcDashboardOverviewPage {
 		// Cluster Name
 		const clusterNameLabel = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ value: localize('bdc.dashboard.clusterName', "Cluster Name :") }).component();
 		const clusterNameValue = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ value: this.model.clusterName }).component();
-		row1.addItem(clusterNameLabel, { CSSStyles: { 'width': '100px', 'min-width': '100px', 'user-select': 'text' } });
+		row1.addItem(clusterNameLabel, { CSSStyles: { 'width': '100px', 'min-width': '100px', 'user-select': 'none', 'font-weight': 'bold' } });
 		row1.addItem(clusterNameValue, { CSSStyles: { 'user-select': 'text' } });
 
 		rootContainer.addItem(row1, { CSSStyles: { 'padding-left': '10px', 'border-top': 'solid 1px #ccc', 'box-sizing': 'border-box', 'user-select': 'text' } });
@@ -76,17 +77,17 @@ export class BdcDashboardOverviewPage {
 
 		// Cluster State
 		const clusterStateLabel = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ value: localize('bdc.dashboard.clusterState', "Cluster State :") }).component();
-		const clusterStateValue = view.modelBuilder.text().component();
+		const clusterStateValue = view.modelBuilder.text().withProperties({ CSSStyles: { 'user-select': 'text' } }).component();
 		this.clusterStateLoadingComponent = view.modelBuilder.loadingComponent().withItem(clusterStateValue).component();
-		row2.addItem(clusterStateLabel, { CSSStyles: { 'width': '125px', 'min-width': '125px', 'user-select': 'text' } });
+		row2.addItem(clusterStateLabel, { CSSStyles: { 'width': '125px', 'min-width': '125px', 'user-select': 'none', 'font-weight': 'bold' } });
-		row2.addItem(this.clusterStateLoadingComponent, { CSSStyles: { 'width': '125px', 'min-width': '125px', 'user-select': 'text' } });
+		row2.addItem(this.clusterStateLoadingComponent, { CSSStyles: { 'width': '125px', 'min-width': '125px', 'user-select': 'none' } });
 
 		// Health Status
 		const healthStatusLabel = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ value: localize('bdc.dashboard.healthStatus', "Health Status :") }).component();
-		const healthStatusValue = view.modelBuilder.text().component();
+		const healthStatusValue = view.modelBuilder.text().withProperties({ CSSStyles: { 'user-select': 'text' } }).component();
 		this.clusterHealthStatusLoadingComponent = view.modelBuilder.loadingComponent().withItem(healthStatusValue).component();
-		row2.addItem(healthStatusLabel, { CSSStyles: { 'width': '125px', 'min-width': '125px', 'user-select': 'text' } });
+		row2.addItem(healthStatusLabel, { CSSStyles: { 'width': '125px', 'min-width': '125px', 'user-select': 'none', 'font-weight': 'bold' } });
-		row2.addItem(this.clusterHealthStatusLoadingComponent, { CSSStyles: { 'width': '125px', 'min-width': '125px', 'user-select': 'text' } });
+		row2.addItem(this.clusterHealthStatusLoadingComponent, { CSSStyles: { 'width': '125px', 'min-width': '125px', 'user-select': 'none' } });
 
 		rootContainer.addItem(row2, { CSSStyles: { 'padding-left': '10px', 'border-bottom': 'solid 1px #ccc', 'box-sizing': 'border-box', 'user-select': 'text' } });
 
@@ -228,6 +229,14 @@ function createServiceStatusRow(modelBuilder: azdata.ModelBuilder, container: az
 	const healthStatusCell = modelBuilder.text().withProperties({ value: getHealthStatusDisplayText(serviceStatus.healthStatus), CSSStyles: { 'margin-block-start': '0px', 'margin-block-end': '0px', 'user-select': 'text', 'text-align': 'center' } }).component();
 	serviceStatusRow.addItem(healthStatusCell, { CSSStyles: { 'width': overviewHealthStatusCellWidth, 'min-width': overviewHealthStatusCellWidth } });
 
+	if (serviceStatus.healthStatus !== 'healthy' && serviceStatus.details && serviceStatus.details.length > 0) {
+		const viewDetailsButton = modelBuilder.button().withProperties<azdata.ButtonProperties>({ label: localize('bdc.dashboard.viewDetails', "View Details") }).component();
+		viewDetailsButton.onDidClick(() => {
+			vscode.window.showErrorMessage(serviceStatus.details);
+		});
+		serviceStatusRow.addItem(viewDetailsButton, { flex: '0 0 auto' });
+	}
+
 	container.addItem(serviceStatusRow, { CSSStyles: { 'padding-left': '10px', 'border-top': 'solid 1px #ccc', 'border-bottom': isLastRow ? 'solid 1px #ccc' : '', 'box-sizing': 'border-box', 'user-select': 'text' } });
 }
 
@@ -237,25 +246,25 @@ function createServiceEndpointRow(modelBuilder: azdata.ModelBuilder, container:
 	endPointRow.addItem(nameCell, { CSSStyles: { 'width': serviceEndpointRowServiceNameCellWidth, 'min-width': serviceEndpointRowServiceNameCellWidth, 'user-select': 'text', 'text-align': 'center' } });
 	if (isHyperlink) {
 		const endpointCell = modelBuilder.hyperlink()
-			.withProperties({ label: endpoint.endpoint, url: endpoint.endpoint, CSSStyles: { 'height': '15px' } })
+			.withProperties({ label: endpoint.endpoint, url: endpoint.endpoint, CSSStyles: { 'height': '15px', 'padding-left': '10px' } })
 			.component();
 		endPointRow.addItem(endpointCell, { CSSStyles: { 'width': serviceEndpointRowEndpointCellWidth, 'min-width': serviceEndpointRowEndpointCellWidth, 'color': '#0078d4', 'text-decoration': 'underline', 'overflow': 'hidden' } });
 	}
 	else {
 		const endpointCell = modelBuilder.text()
-			.withProperties({ value: endpoint.endpoint, CSSStyles: { 'margin-block-start': '0px', 'margin-block-end': '0px', 'user-select': 'text' } })
+			.withProperties({ value: endpoint.endpoint, CSSStyles: { 'margin-block-start': '0px', 'margin-block-end': '0px', 'user-select': 'text', 'padding-left': '10px' } })
 			.component();
 		endPointRow.addItem(endpointCell, { CSSStyles: { 'width': serviceEndpointRowEndpointCellWidth, 'min-width': serviceEndpointRowEndpointCellWidth, 'overflow': 'hidden' } });
 	}
 	const copyValueCell = modelBuilder.button().component();
 	copyValueCell.iconPath = IconPathHelper.copy;
 	copyValueCell.onDidClick(() => {
-		// vscode.env.clipboard.writeText(hyperlink);
+		vscode.env.clipboard.writeText(endpoint.endpoint);
 	});
 	copyValueCell.title = localize('bdc.dashboard.copyTitle', "Copy");
 	copyValueCell.iconHeight = '14px';
 	copyValueCell.iconWidth = '14px';
-	endPointRow.addItem(copyValueCell, { CSSStyles: { 'width': '50px', 'min-width': '50px', 'padding-left': '10px', 'margin-block-start': '0px', 'margin-block-end': '0px' } });
+	endPointRow.addItem(copyValueCell, { CSSStyles: { 'width': '14px', 'min-width': '14px', 'padding-left': '10px', 'margin-block-start': '0px', 'margin-block-end': '0px' } });
 
 	container.addItem(endPointRow, { CSSStyles: { 'padding-left': '10px', 'border-top': 'solid 1px #ccc', 'border-bottom': isLastRow ? 'solid 1px #ccc' : '', 'box-sizing': 'border-box', 'user-select': 'text' } });
 }

extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardResourceStatusPage.ts

@@ -5,6 +5,7 @@
 'use strict';
 
 import * as azdata from 'azdata';
+import * as vscode from 'vscode';
 import * as nls from 'vscode-nls';
 import { BdcDashboardModel } from './bdcDashboardModel';
 import { BdcStatusModel, InstanceStatusModel } from '../controller/apiGenerated';
@@ -180,6 +181,13 @@ function createInstanceHealthStatusRow(modelBuilder: azdata.ModelBuilder, instan
 	const healthStatusCell = modelBuilder.text().withProperties({ value: getHealthStatusDisplayText(instanceStatus.healthStatus), CSSStyles: { 'margin-block-start': '0px', 'margin-block-end': '0px', 'user-select': 'text' } }).component();
 	instanceHealthStatusRow.addItem(healthStatusCell, { CSSStyles: { 'width': healthAndStatusHealthColumnWidth, 'min-width': healthAndStatusHealthColumnWidth } });
 
+	if (instanceStatus.healthStatus !== 'healthy' && instanceStatus.details && instanceStatus.details.length > 0) {
+		const viewDetailsButton = modelBuilder.button().withProperties<azdata.ButtonProperties>({ label: localize('bdc.dashboard.viewDetails', "View Details") }).component();
+		viewDetailsButton.onDidClick(() => {
+			vscode.window.showErrorMessage(instanceStatus.details);
+		});
+		instanceHealthStatusRow.addItem(viewDetailsButton, { flex: '0 0 auto' });
+	}
 	return instanceHealthStatusRow;
 }
 

extensions/mssql/src/dashboard/serviceEndpoints.ts

@@ -27,12 +27,12 @@ export function registerServiceEndpoints(context: vscode.ExtensionContext): void
 
 		if (endpointsArray.length > 0) {
 			const grafanaEp = endpointsArray.find(e => e.serviceName === grafanaEndpointName);
-			if (grafanaEp) {
+			if (grafanaEp && grafanaEp.endpoint && grafanaEp.endpoint.indexOf('/d/wZx3OUdmz') === -1) {
 				// Update to have correct URL
 				grafanaEp.endpoint += '/d/wZx3OUdmz';
 			}
 			const kibanaEp = endpointsArray.find(e => e.serviceName === logsuiEndpointName);
-			if (kibanaEp) {
+			if (kibanaEp && kibanaEp.endpoint && kibanaEp.endpoint.indexOf('/app/kibana#/discover') === -1) {
 				// Update to have correct URL
 				kibanaEp.endpoint += '/app/kibana#/discover';
 			}