ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-13 17:22:15 -05:00
Code Issues Packages Projects Releases Wiki Activity

BDC Dashboard fixes (#7732)

Browse Source 
* 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
This commit is contained in:
Charles Gagnon
2019-10-15 21:50:02 -07:00
committed by GitHub
parent 23861bd369
commit e8e8ee5941
4 changed files with 28 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
extensions/big-data-cluster/src/bigDataCluster/constants.ts
View File

@@ -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' };

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

@@ -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()
.withProperties({
this.refreshButton = modelView.modelBuilder.button()
.withProperties<azdata.ButtonProperties>({
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<azdata.ButtonProperties>({
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<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 };

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

@@ -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 };

4
src/sql/workbench/browser/modelComponents/media/toolbarLayout.css
View File

@@ -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;
}