diff --git a/extensions/big-data-cluster/src/bigDataCluster/constants.ts b/extensions/big-data-cluster/src/bigDataCluster/constants.ts index b1aea81fd2..c960854e4e 100644 --- a/extensions/big-data-cluster/src/bigDataCluster/constants.ts +++ b/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' }; diff --git a/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboard.ts b/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboard.ts index 2757c0e3e6..c523759fce 100644 --- a/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboard.ts +++ b/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(); constructor(private title: string, private model: BdcDashboardModel) { @@ -64,20 +66,20 @@ export class BdcDashboard { // ########### // Refresh button - const refreshButton = modelView.modelBuilder.button() - .withProperties({ + this.refreshButton = modelView.modelBuilder.button() + .withProperties({ label: localize('bdc.dashboard.refreshButton', "Refresh"), - iconPath: IconPathHelper.refresh, - height: '50px' + iconPath: IconPathHelper.refresh }).component(); - refreshButton.onDidClick(() => this.model.refresh()); + this.refreshButton.onDidClick(async () => { + await this.doRefresh(); + }); const openTroubleshootNotebookButton = modelView.modelBuilder.button() - .withProperties({ + .withProperties({ label: localize('bdc.dashboard.troubleshootButton', "Troubleshoot"), - iconPath: IconPathHelper.notebook, - height: '50px' + iconPath: IconPathHelper.notebook }).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 { + 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 }; diff --git a/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcServiceStatusPage.ts b/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcServiceStatusPage.ts index 501423341e..c26a202ac5 100644 --- a/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcServiceStatusPage.ts +++ b/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 }; diff --git a/src/sql/workbench/browser/modelComponents/media/toolbarLayout.css b/src/sql/workbench/browser/modelComponents/media/toolbarLayout.css index 9deff9af20..62b6ac684e 100644 --- a/src/sql/workbench/browser/modelComponents/media/toolbarLayout.css +++ b/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; - background-size: 11px; + padding-left: 19px; + background-size: 15px; margin-right: 0.3em; }