BDC Dashboard fixes (#7732)

* BDC Dashboard fixes

* Make refresh indicate when refresh is happening

* Fix refresh button to properly reset even if error occurs. Refactor onclick into own method.

* Undo refresh button rotation per design feedback

extensions/big-data-cluster/src/bigDataCluster/constants.ts

@@ -64,6 +64,7 @@ export namespace cssStyles {
 	export const hyperlink = { 'user-select': 'text', 'color': '#0078d4', 'text-decoration': 'underline', 'cursor': 'pointer' };
 	export const text = { 'margin-block-start': '0px', 'margin-block-end': '0px' };
 	export const nonSelectableText = { ...cssStyles.text, 'user-select': 'none' };
+	export const tabHeaderText = { 'margin-block-start': '2px', 'margin-block-end': '0px', 'user-select': 'none' };
 	export const selectedResourceHeaderTab = { 'font-weight': 'bold', 'color': '' };
 	export const unselectedResourceHeaderTab = { 'font-weight': '', 'color': '#0078d4' };
 	export const selectedTabDiv = { 'border-bottom': '2px solid #000' };

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

@@ -37,6 +37,8 @@ export class BdcDashboard {
 	private currentTab: NavTab;
 	private currentPage: azdata.FlexContainer;
 
+	private refreshButton: azdata.ButtonComponent;
+
 	private serviceTabPageMapping = new Map<string, { navTab: NavTab, servicePage: azdata.FlexContainer }>();
 
 	constructor(private title: string, private model: BdcDashboardModel) {
@@ -64,20 +66,20 @@ export class BdcDashboard {
 			// ###########
 
 			// Refresh button
-			const refreshButton = modelView.modelBuilder.button()
+			this.refreshButton = modelView.modelBuilder.button()
-				.withProperties({
+				.withProperties<azdata.ButtonProperties>({
 					label: localize('bdc.dashboard.refreshButton', "Refresh"),
-					iconPath: IconPathHelper.refresh,
+					iconPath: IconPathHelper.refresh
-					height: '50px'
 				}).component();
 
-			refreshButton.onDidClick(() => this.model.refresh());
+			this.refreshButton.onDidClick(async () => {
+				await this.doRefresh();
+			});
 
 			const openTroubleshootNotebookButton = modelView.modelBuilder.button()
-				.withProperties({
+				.withProperties<azdata.ButtonProperties>({
 					label: localize('bdc.dashboard.troubleshootButton', "Troubleshoot"),
-					iconPath: IconPathHelper.notebook,
+					iconPath: IconPathHelper.notebook
-					height: '50px'
 				}).component();
 
 			openTroubleshootNotebookButton.onDidClick(() => {
@@ -87,7 +89,7 @@ export class BdcDashboard {
 			const toolbarContainer = modelView.modelBuilder.toolbarContainer()
 				.withToolbarItems(
 					[
-						{ component: refreshButton },
+						{ component: this.refreshButton },
 						{ component: openTroubleshootNotebookButton }
 					]
 				).component();
@@ -122,7 +124,7 @@ export class BdcDashboard {
 			this.mainAreaContainer.addItem(this.navContainer, { flex: `0 0 ${navWidth}`, CSSStyles: { 'padding': '0 20px 0 20px', 'border-right': 'solid 1px #ccc' } });
 
 			// Overview nav item - this will be the initial page
-			const overviewNavItemDiv = modelView.modelBuilder.divContainer().withLayout({ width: navWidth, height: '30px' }).withProperties({ CSSStyles: { 'cursor': 'pointer' } }).component();
+			const overviewNavItemDiv = modelView.modelBuilder.divContainer().withLayout({ width: navWidth, height: '30px' }).withProperties({ clickable: true }).component();
 			const overviewNavItemText = modelView.modelBuilder.text().withProperties({ value: localize('bdc.dashboard.overviewNavTitle', 'Big data cluster overview') }).component();
 			overviewNavItemText.updateCssStyles(selectedTabCss);
 			overviewNavItemDiv.addItem(overviewNavItemText, { CSSStyles: { 'user-select': 'text' } });
@@ -163,6 +165,15 @@ export class BdcDashboard {
 		this.updateServiceNavTabs(bdcStatus.services);
 	}
 
+	private async doRefresh(): Promise<void> {
+		try {
+			this.refreshButton.enabled = false;
+			await this.model.refresh();
+		} finally {
+			this.refreshButton.enabled = true;
+		}
+	}
+
 	/**
 	 * Switches the current navigation tab to the one corresponding to the specified service
 	 * @param serviceName The name of the service to switch to the tab of
@@ -209,11 +220,11 @@ export class BdcDashboard {
 }
 
 function createServiceNavTab(modelBuilder: azdata.ModelBuilder, serviceStatus: ServiceStatusModel): NavTab {
-	const div = modelBuilder.divContainer().withLayout({ width: navWidth, height: '30px' }).withProperties({ CSSStyles: { 'cursor': 'pointer' } }).component();
+	const div = modelBuilder.divContainer().withLayout({ width: navWidth, height: '30px', }).withProperties({ clickable: true }).component();
 	const innerContainer = modelBuilder.flexContainer().withLayout({ width: navWidth, height: '30px', flexFlow: 'row' }).component();
 	const dot = modelBuilder.text().withProperties({ value: getHealthStatusDot(serviceStatus.healthStatus), CSSStyles: { 'color': 'red', 'font-size': '40px', 'width': '20px', ...cssStyles.nonSelectableText } }).component();
 	innerContainer.addItem(dot, { flex: '0 0 auto' });
-	const text = modelBuilder.text().withProperties({ value: getServiceNameDisplayText(serviceStatus.serviceName), CSSStyles: { ...cssStyles.nonSelectableText } }).component();
+	const text = modelBuilder.text().withProperties({ value: getServiceNameDisplayText(serviceStatus.serviceName), CSSStyles: { ...cssStyles.tabHeaderText } }).component();
 	innerContainer.addItem(text, { flex: '0 0 auto' });
 	div.addItem(innerContainer);
 	return { div: div, dot: dot, text: text };

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

@@ -131,11 +131,11 @@ export class BdcServiceStatusPage {
  * @param resourceStatus The status of the resource we're creating
  */
 function createResourceHeaderTab(modelBuilder: azdata.ModelBuilder, resourceStatus: ResourceStatusModel): ServiceTab {
-	const resourceHeaderTab = modelBuilder.divContainer().withLayout({ width: '100px', height: '25px' }).withProperties({ CSSStyles: { 'cursor': 'pointer' } }).component();
+	const resourceHeaderTab = modelBuilder.divContainer().withLayout({ width: '100px', height: '25px' }).withProperties({ clickable: true }).component();
 	const innerContainer = modelBuilder.flexContainer().withLayout({ width: '100px', height: '25px', flexFlow: 'row' }).component();
 	const statusDot = modelBuilder.text().withProperties({ value: getHealthStatusDot(resourceStatus.healthStatus), CSSStyles: { 'color': 'red', 'font-size': '40px', 'width': '20px', 'text-align': 'right', ...cssStyles.nonSelectableText } }).component();
 	innerContainer.addItem(statusDot, { flex: '0 0 auto' });
-	const resourceHeaderLabel = modelBuilder.text().withProperties({ value: resourceStatus.resourceName, CSSStyles: { 'text-align': 'left', ...cssStyles.text } }).component();
+	const resourceHeaderLabel = modelBuilder.text().withProperties({ value: resourceStatus.resourceName, CSSStyles: { 'text-align': 'left', ...cssStyles.tabHeaderText } }).component();
 	innerContainer.addItem(resourceHeaderLabel);
 	resourceHeaderTab.addItem(innerContainer);
 	return { div: resourceHeaderTab, text: resourceHeaderLabel, dot: statusDot };

src/sql/workbench/browser/modelComponents/media/toolbarLayout.css

@@ -50,8 +50,8 @@
 }
 
 .modelview-toolbar-container .modelview-toolbar-component modelview-button .monaco-text-button.icon {
-	padding-left: 15px;
+	padding-left: 19px;
-	background-size: 11px;
+	background-size: 15px;
 	margin-right: 0.3em;
 }