ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-02-17 02:51:36 -05:00
Code Issues Packages Projects Releases Wiki Activity

Fix BDC dashboard to update status icons on refresh (#7520)

Browse Source
This commit is contained in:
Charles Gagnon
2019-10-07 13:40:58 -07:00
committed by GitHub
parent b1db9a8cf1
commit e25cbdf4b9
2 changed files with 66 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -29,7 +29,6 @@ export class BdcDashboard {
private dashboard: azdata.workspace.ModelViewEditor; private dashboard: azdata.workspace.ModelViewEditor;
private initialized: boolean = false; private initialized: boolean = false;
private serviceTabsCreated: boolean = false;
private modelView: azdata.ModelView; private modelView: azdata.ModelView;
private mainAreaContainer: azdata.FlexContainer; private mainAreaContainer: azdata.FlexContainer;
@@ -38,7 +37,7 @@ export class BdcDashboard {
private currentTab: NavTab; private currentTab: NavTab;
private currentPage: azdata.FlexContainer; private currentPage: azdata.FlexContainer;
private serviceTabPageMapping: { [key: string]: { navTab: NavTab, servicePage: azdata.FlexContainer } } = {}; private serviceTabPageMapping = new Map<string, { navTab: NavTab, servicePage: azdata.FlexContainer }>();
constructor(private title: string, private model: BdcDashboardModel) { constructor(private title: string, private model: BdcDashboardModel) {
this.model.onDidUpdateBdcStatus(bdcStatus => this.handleBdcStatusUpdate(bdcStatus)); this.model.onDidUpdateBdcStatus(bdcStatus => this.handleBdcStatusUpdate(bdcStatus));
@@ -161,7 +160,7 @@ export class BdcDashboard {
return; return;
} }
this.createServiceNavTabs(bdcStatus.services); this.updateServiceNavTabs(bdcStatus.services);
} }
/** /**
@@ -184,21 +183,27 @@ export class BdcDashboard {
} }
/** /**
* Helper to create the navigation tabs for the services once the status has been loaded * Helper to update the navigation tabs for the services when we get a status update
*/ */
private createServiceNavTabs(services: ServiceStatusModel[]): void { private updateServiceNavTabs(services?: ServiceStatusModel[]): void {
if (this.initialized && !this.serviceTabsCreated && services) { if (this.initialized && services) {
// Add a nav item for each service // Add a nav item for each service
services.forEach(s => { services.forEach(s => {
const navItem = createServiceNavTab(this.modelView.modelBuilder, s); const existingTabPage = this.serviceTabPageMapping[s.serviceName];
const serviceStatusPage = new BdcServiceStatusPage(s.serviceName, this.model, this.modelView).container; if (existingTabPage) {
this.serviceTabPageMapping[s.serviceName] = { navTab: navItem, servicePage: serviceStatusPage }; // We've already created the tab and page for this service, just update the tab health status dot
navItem.div.onDidClick(() => { existingTabPage.navTab.dot.value = getHealthStatusDot(s.healthStatus);
this.switchToServiceTab(s.serviceName); } else {
}); // New service - create the page and tab
this.navContainer.addItem(navItem.div, { flex: '0 0 auto' }); const navItem = createServiceNavTab(this.modelView.modelBuilder, s);
const serviceStatusPage = new BdcServiceStatusPage(s.serviceName, this.model, this.modelView).container;
this.serviceTabPageMapping[s.serviceName] = { navTab: navItem, servicePage: serviceStatusPage };
navItem.div.onDidClick(() => {
this.switchToServiceTab(s.serviceName);
});
this.navContainer.addItem(navItem.div, { flex: '0 0 auto' });
}
}); });
this.serviceTabsCreated = true;
} }
} }
} }

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

@@ -11,16 +11,19 @@ import { BdcDashboardModel } from './bdcDashboardModel';
import { getHealthStatusDot } from '../utils'; import { getHealthStatusDot } from '../utils';
import { cssStyles } from '../constants'; import { cssStyles } from '../constants';
type ServiceTab = { div: azdata.DivContainer, dot: azdata.TextComponent, text: azdata.TextComponent };
export class BdcServiceStatusPage { export class BdcServiceStatusPage {
private initialized: boolean = false; private initialized: boolean = false;
private resourceTabsCreated: boolean = false;
private currentTab: { div: azdata.DivContainer, text: azdata.TextComponent, index: number }; private currentTab: { tab: ServiceTab, index: number };
private currentTabPage: azdata.FlexContainer; private currentTabPage: azdata.FlexContainer;
private rootContainer: azdata.FlexContainer; private rootContainer: azdata.FlexContainer;
private resourceHeader: azdata.FlexContainer; private resourceHeader: azdata.FlexContainer;
private createdTabs: Map<string, ServiceTab> = new Map<string, ServiceTab>();
constructor(private serviceName: string, private model: BdcDashboardModel, private modelView: azdata.ModelView) { constructor(private serviceName: string, private model: BdcDashboardModel, private modelView: azdata.ModelView) {
this.model.onDidUpdateBdcStatus(bdcStatus => this.handleBdcStatusUpdate(bdcStatus)); this.model.onDidUpdateBdcStatus(bdcStatus => this.handleBdcStatusUpdate(bdcStatus));
this.createPage(); this.createPage();
@@ -76,42 +79,48 @@ export class BdcServiceStatusPage {
* Helper to create the navigation tabs for the resources * Helper to create the navigation tabs for the resources
*/ */
private createResourceNavTabs(resources: ResourceStatusModel[]) { private createResourceNavTabs(resources: ResourceStatusModel[]) {
if (this.initialized && !this.resourceTabsCreated) { if (this.initialized) {
let tabIndex = 0; let tabIndex = this.createdTabs.size;
resources.forEach(resource => { resources.forEach(resource => {
const currentIndex = tabIndex++; const existingTab: ServiceTab = this.createdTabs[resource.resourceName];
const resourceHeaderTab = createResourceHeaderTab(this.modelView.modelBuilder, resource); if (existingTab) {
const resourceStatusPage: azdata.FlexContainer = new BdcDashboardResourceStatusPage(this.model, this.modelView, this.serviceName, resource.resourceName).container; // We already created this tab so just update the status
resourceHeaderTab.div.onDidClick(() => { existingTab.dot.value = getHealthStatusDot(resource.healthStatus);
// Don't need to do anything if this is already the currently selected tab } else {
if (this.currentTab.index === currentIndex) { // New tab - create and add to the end of the container
return; const currentIndex = tabIndex++;
const resourceHeaderTab = createResourceHeaderTab(this.modelView.modelBuilder, resource);
this.createdTabs[resource.resourceName] = resourceHeaderTab;
const resourceStatusPage: azdata.FlexContainer = new BdcDashboardResourceStatusPage(this.model, this.modelView, this.serviceName, resource.resourceName).container;
resourceHeaderTab.div.onDidClick(() => {
// Don't need to do anything if this is already the currently selected tab
if (this.currentTab.index === currentIndex) {
return;
}
if (this.currentTab) {
this.currentTab.tab.text.updateCssStyles(cssStyles.unselectedResourceHeaderTab);
this.resourceHeader.removeItem(this.currentTab.tab.div);
this.resourceHeader.insertItem(this.currentTab.tab.div, this.currentTab.index, { flex: '0 0 auto', CSSStyles: cssStyles.unselectedTabDiv });
}
this.changeSelectedTabPage(resourceStatusPage);
this.currentTab = { tab: resourceHeaderTab, index: currentIndex };
this.currentTab.tab.text.updateCssStyles(cssStyles.selectedResourceHeaderTab);
this.resourceHeader.removeItem(this.currentTab.tab.div);
this.resourceHeader.insertItem(this.currentTab.tab.div, this.currentTab.index, { flex: '0 0 auto', CSSStyles: cssStyles.selectedTabDiv });
});
// Set initial page
if (!this.currentTabPage) {
this.changeSelectedTabPage(resourceStatusPage);
this.currentTab = { tab: resourceHeaderTab, index: currentIndex };
this.currentTab.tab.text.updateCssStyles(cssStyles.selectedResourceHeaderTab);
this.resourceHeader.addItem(resourceHeaderTab.div, { flex: '0 0 auto', CSSStyles: cssStyles.selectedTabDiv });
} }
if (this.currentTab) { else {
this.currentTab.text.updateCssStyles(cssStyles.unselectedResourceHeaderTab); resourceHeaderTab.text.updateCssStyles(cssStyles.unselectedResourceHeaderTab);
this.resourceHeader.removeItem(this.currentTab.div); this.resourceHeader.addItem(resourceHeaderTab.div, { flex: '0 0 auto', CSSStyles: cssStyles.unselectedTabDiv });
this.resourceHeader.insertItem(this.currentTab.div, this.currentTab.index, { flex: '0 0 auto', CSSStyles: cssStyles.unselectedTabDiv });
} }
this.changeSelectedTabPage(resourceStatusPage);
this.currentTab = { ...resourceHeaderTab, index: currentIndex };
this.currentTab.text.updateCssStyles(cssStyles.selectedResourceHeaderTab);
this.resourceHeader.removeItem(this.currentTab.div);
this.resourceHeader.insertItem(this.currentTab.div, this.currentTab.index, { flex: '0 0 auto', CSSStyles: cssStyles.selectedTabDiv });
});
// Set initial page
if (!this.currentTabPage) {
this.changeSelectedTabPage(resourceStatusPage);
this.currentTab = { ...resourceHeaderTab, index: currentIndex };
this.currentTab.text.updateCssStyles(cssStyles.selectedResourceHeaderTab);
this.resourceHeader.addItem(resourceHeaderTab.div, { flex: '0 0 auto', CSSStyles: cssStyles.selectedTabDiv });
} }
else {
resourceHeaderTab.text.updateCssStyles(cssStyles.unselectedResourceHeaderTab);
this.resourceHeader.addItem(resourceHeaderTab.div, { flex: '0 0 auto', CSSStyles: cssStyles.unselectedTabDiv });
}
}); });
this.resourceTabsCreated = true;
} }
} }
} }
@@ -119,14 +128,15 @@ export class BdcServiceStatusPage {
/** /**
* Creates a single resource header tab * Creates a single resource header tab
* @param modelBuilder The ModelBuilder used to construct the object * @param modelBuilder The ModelBuilder used to construct the object
* @param title The text to display in the tab * @param resourceStatus The status of the resource we're creating
*/ */
function createResourceHeaderTab(modelBuilder: azdata.ModelBuilder, resourceStatus: ResourceStatusModel): { div: azdata.DivContainer, text: azdata.TextComponent } { 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({ CSSStyles: { 'cursor': 'pointer' } }).component();
const innerContainer = modelBuilder.flexContainer().withLayout({ width: '100px', height: '25px', flexFlow: 'row' }).component(); const innerContainer = modelBuilder.flexContainer().withLayout({ width: '100px', height: '25px', flexFlow: 'row' }).component();
innerContainer.addItem(modelBuilder.text().withProperties({ value: getHealthStatusDot(resourceStatus.healthStatus), CSSStyles: { 'color': 'red', 'font-size': '40px', 'width': '20px', 'text-align': 'right', ...cssStyles.nonSelectableText } }).component(), { flex: '0 0 auto' }); 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.text } }).component();
innerContainer.addItem(resourceHeaderLabel); innerContainer.addItem(resourceHeaderLabel);
resourceHeaderTab.addItem(innerContainer); resourceHeaderTab.addItem(innerContainer);
return { div: resourceHeaderTab, text: resourceHeaderLabel }; return { div: resourceHeaderTab, text: resourceHeaderLabel, dot: statusDot };
} }