mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-02-16 10:58:30 -05:00
Add styling and component column type to declarative table (#8476)
* Initial wip * wip * Working implementation * Make widths a bit nicer and remove sqlops addition * Add sqlops back in * Fix timing issue with tables * Undo change to sql.bat and remove loading component when done
This commit is contained in:
Charles Gagnon
@@ -58,7 +58,7 @@ export class IconPathHelper {
|
||||
|
||||
export namespace cssStyles {
|
||||
export const title = { 'font-size': '14px', 'font-weight': '600' };
|
||||
export const tableHeader = { 'font-weight': 'bold', 'text-transform': 'uppercase', 'font-size': '10px', 'user-select': 'text' };
|
||||
export const tableHeader = { 'text-align': 'left', 'font-weight': 'bold', 'text-transform': 'uppercase', 'font-size': '10px', 'user-select': 'text' };
|
||||
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 overflowEllipsisText = { ...text, 'overflow': 'hidden', 'text-overflow': 'ellipsis' };
|
||||
|
||||
@@ -34,11 +34,11 @@ export class BdcDashboard extends BdcDashboardPage {
|
||||
private overviewPage: BdcDashboardOverviewPage;
|
||||
|
||||
private currentTab: NavTab;
|
||||
private currentPage: azdata.FlexContainer;
|
||||
private currentPageContainer: azdata.FlexContainer;
|
||||
|
||||
private refreshButton: azdata.ButtonComponent;
|
||||
|
||||
private serviceTabPageMapping = new Map<string, { navTab: NavTab, servicePage: azdata.FlexContainer }>();
|
||||
private serviceTabPageMapping = new Map<string, { navTab: NavTab, servicePage: BdcServiceStatusPage }>();
|
||||
|
||||
constructor(private title: string, private model: BdcDashboardModel) {
|
||||
super();
|
||||
@@ -141,7 +141,7 @@ export class BdcDashboard extends BdcDashboardPage {
|
||||
overviewNavItemDiv.addItem(overviewNavItemText, { CSSStyles: { 'user-select': 'text' } });
|
||||
this.overviewPage = new BdcDashboardOverviewPage(this, this.model);
|
||||
const overviewContainer: azdata.FlexContainer = this.overviewPage.create(modelView);
|
||||
this.currentPage = overviewContainer;
|
||||
this.currentPageContainer = overviewContainer;
|
||||
this.currentTab = { serviceName: undefined, div: overviewNavItemDiv, dot: undefined, text: overviewNavItemText };
|
||||
this.mainAreaContainer.addItem(overviewContainer, { flex: '0 0 100%', CSSStyles: { 'margin': '0 20px 0 20px' } });
|
||||
|
||||
@@ -150,9 +150,9 @@ export class BdcDashboard extends BdcDashboardPage {
|
||||
this.currentTab.text.updateCssStyles(unselectedTabCss);
|
||||
this.currentTab.div.ariaSelected = false;
|
||||
}
|
||||
this.mainAreaContainer.removeItem(this.currentPage);
|
||||
this.mainAreaContainer.removeItem(this.currentPageContainer);
|
||||
this.mainAreaContainer.addItem(overviewContainer, { flex: '0 0 100%', CSSStyles: { 'margin': '0 20px 0 20px' } });
|
||||
this.currentPage = overviewContainer;
|
||||
this.currentPageContainer = overviewContainer;
|
||||
this.currentTab = { serviceName: undefined, div: overviewNavItemDiv, dot: undefined, text: overviewNavItemText };
|
||||
this.currentTab.text.updateCssStyles(selectedTabCss);
|
||||
this.currentTab.div.ariaSelected = true;
|
||||
@@ -211,9 +211,9 @@ export class BdcDashboard extends BdcDashboardPage {
|
||||
this.currentTab.text.updateCssStyles(unselectedTabCss);
|
||||
this.currentTab.div.ariaSelected = false;
|
||||
}
|
||||
this.mainAreaContainer.removeItem(this.currentPage);
|
||||
this.mainAreaContainer.addItem(tabPageMapping.servicePage, { CSSStyles: { 'margin': '0 20px 0 20px' } });
|
||||
this.currentPage = tabPageMapping.servicePage;
|
||||
this.mainAreaContainer.removeItem(this.currentPageContainer);
|
||||
this.mainAreaContainer.addItem(tabPageMapping.servicePage.container, { CSSStyles: { 'margin': '0 20px 0 20px' } });
|
||||
this.currentPageContainer = tabPageMapping.servicePage.container;
|
||||
this.currentTab = tabPageMapping.navTab;
|
||||
this.currentTab.text.updateCssStyles(selectedTabCss);
|
||||
this.currentTab.div.ariaSelected = true;
|
||||
@@ -233,7 +233,7 @@ export class BdcDashboard extends BdcDashboardPage {
|
||||
} else {
|
||||
// New service - create the page and tab
|
||||
const navItem = createServiceNavTab(this.modelView.modelBuilder, s);
|
||||
const serviceStatusPage = new BdcServiceStatusPage(s.serviceName, this.model, this.modelView).container;
|
||||
const serviceStatusPage = new BdcServiceStatusPage(s.serviceName, this.model, this.modelView);
|
||||
this.serviceTabPageMapping.set(s.serviceName, { navTab: navItem, servicePage: serviceStatusPage });
|
||||
navItem.div.onDidClick(() => {
|
||||
this.switchToServiceTab(s.serviceName);
|
||||
|
||||
@@ -9,7 +9,7 @@ import * as nls from 'vscode-nls';
|
||||
import { BdcDashboardModel, BdcErrorEvent } from './bdcDashboardModel';
|
||||
import { IconPathHelper, cssStyles } from '../constants';
|
||||
import { getStateDisplayText, getHealthStatusDisplayText, getEndpointDisplayText, getHealthStatusIcon, getServiceNameDisplayText, Endpoint, getBdcStatusErrorMessage } from '../utils';
|
||||
import { EndpointModel, ServiceStatusModel, BdcStatusModel } from '../controller/apiGenerated';
|
||||
import { EndpointModel, BdcStatusModel } from '../controller/apiGenerated';
|
||||
import { BdcDashboard } from './bdcDashboard';
|
||||
import { createViewDetailsButton } from './commonControls';
|
||||
import { HdfsDialogCancelledError } from './hdfsDialogBase';
|
||||
@@ -21,14 +21,6 @@ const clusterStateLabelColumnWidth = 100;
|
||||
const clusterStateValueColumnWidth = 225;
|
||||
const healthStatusColumnWidth = 125;
|
||||
|
||||
const overviewIconColumnWidthPx = 25;
|
||||
const overviewServiceNameCellWidthPx = 175;
|
||||
const overviewStateCellWidthPx = 150;
|
||||
const overviewHealthStatusCellWidthPx = 100;
|
||||
|
||||
const serviceEndpointRowServiceNameCellWidth = 200;
|
||||
const serviceEndpointRowEndpointCellWidth = 350;
|
||||
|
||||
const hyperlinkedEndpoints = [Endpoint.metricsui, Endpoint.logsui, Endpoint.sparkHistory, Endpoint.yarnUi];
|
||||
|
||||
export class BdcDashboardOverviewPage extends BdcDashboardPage {
|
||||
@@ -40,11 +32,12 @@ export class BdcDashboardOverviewPage extends BdcDashboardPage {
|
||||
private clusterStateLoadingComponent: azdata.LoadingComponent;
|
||||
private clusterHealthStatusLoadingComponent: azdata.LoadingComponent;
|
||||
|
||||
private serviceStatusRowContainer: azdata.FlexContainer;
|
||||
|
||||
private endpointsRowContainer: azdata.FlexContainer;
|
||||
private endpointsDisplayContainer: azdata.DivContainer;
|
||||
private serviceStatusDisplayContainer: azdata.DivContainer;
|
||||
private serviceStatusTable: azdata.DeclarativeTableComponent;
|
||||
private endpointsTable: azdata.DeclarativeTableComponent;
|
||||
private endpointsLoadingComponent: azdata.LoadingComponent;
|
||||
private endpointsDisplayContainer: azdata.FlexContainer;
|
||||
private serviceStatusLoadingComponent: azdata.LoadingComponent;
|
||||
private serviceStatusDisplayContainer: azdata.FlexContainer;
|
||||
private propertiesErrorMessage: azdata.TextComponent;
|
||||
private endpointsErrorMessage: azdata.TextComponent;
|
||||
private serviceStatusErrorMessage: azdata.TextComponent;
|
||||
@@ -126,33 +119,114 @@ export class BdcDashboardOverviewPage extends BdcDashboardPage {
|
||||
|
||||
const overviewContainer = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column', width: '100%', height: '100%' }).component();
|
||||
|
||||
// Service Status header row
|
||||
const serviceStatusHeaderRow = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'row' }).component();
|
||||
const nameCell = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ value: localize('bdc.dashboard.serviceNameHeader', "Service Name") }).component();
|
||||
// Service name cell covers both icon + service name so width stretches both cells
|
||||
serviceStatusHeaderRow.addItem(nameCell, { CSSStyles: { 'width': `${overviewServiceNameCellWidthPx + overviewIconColumnWidthPx}px`, 'min-width': `${overviewServiceNameCellWidthPx + overviewIconColumnWidthPx}px`, ...cssStyles.tableHeader } });
|
||||
const stateCell = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ value: localize('bdc.dashboard.stateHeader', "State"), CSSStyles: { ...cssStyles.tableHeader } }).component();
|
||||
serviceStatusHeaderRow.addItem(stateCell, { CSSStyles: { 'width': `${overviewStateCellWidthPx}px`, 'min-width': `${overviewStateCellWidthPx}px` } });
|
||||
const healthStatusCell = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ value: localize('bdc.dashboard.healthStatusHeader', "Health Status"), CSSStyles: { ...cssStyles.tableHeader } }).component();
|
||||
serviceStatusHeaderRow.addItem(healthStatusCell, { CSSStyles: { 'width': `${overviewHealthStatusCellWidthPx}px`, 'min-width': `${overviewHealthStatusCellWidthPx}px` } });
|
||||
overviewContainer.addItem(serviceStatusHeaderRow, { CSSStyles: { 'padding-left': '10px', 'box-sizing': 'border-box', 'user-select': 'text' } });
|
||||
this.serviceStatusTable = view.modelBuilder.declarativeTable()
|
||||
.withProperties<azdata.DeclarativeTableProperties>(
|
||||
{
|
||||
columns: [
|
||||
{ // status icon
|
||||
displayName: '',
|
||||
valueType: azdata.DeclarativeDataType.component,
|
||||
isReadOnly: true,
|
||||
width: 25,
|
||||
headerCssStyles: {
|
||||
'border': 'none',
|
||||
'background-color': '#FFFFFF'
|
||||
},
|
||||
rowCssStyles: {
|
||||
'border-top': 'solid 1px #ccc',
|
||||
'border-bottom': 'solid 1px #ccc',
|
||||
'border-left': 'none',
|
||||
'border-right': 'none'
|
||||
},
|
||||
},
|
||||
{ // service
|
||||
displayName: localize('bdc.dashboard.serviceNameHeader', "Service Name"),
|
||||
valueType: azdata.DeclarativeDataType.component,
|
||||
isReadOnly: true,
|
||||
width: 175,
|
||||
headerCssStyles: {
|
||||
'border': 'none',
|
||||
'background-color': '#FFFFFF',
|
||||
...cssStyles.tableHeader
|
||||
},
|
||||
rowCssStyles: {
|
||||
'border-top': 'solid 1px #ccc',
|
||||
'border-bottom': 'solid 1px #ccc',
|
||||
'border-left': 'none',
|
||||
'border-right': 'none'
|
||||
},
|
||||
},
|
||||
{ // state
|
||||
displayName: localize('bdc.dashboard.stateHeader', "State"),
|
||||
valueType: azdata.DeclarativeDataType.string,
|
||||
isReadOnly: true,
|
||||
width: 150,
|
||||
headerCssStyles: {
|
||||
'border': 'none',
|
||||
'background-color': '#FFFFFF',
|
||||
...cssStyles.tableHeader
|
||||
},
|
||||
rowCssStyles: {
|
||||
'border-top': 'solid 1px #ccc',
|
||||
'border-bottom': 'solid 1px #ccc',
|
||||
'border-left': 'none',
|
||||
'border-right': 'none'
|
||||
},
|
||||
},
|
||||
{ // health status
|
||||
displayName: localize('bdc.dashboard.healthStatusHeader', "Health Status"),
|
||||
valueType: azdata.DeclarativeDataType.string,
|
||||
isReadOnly: true,
|
||||
width: 100,
|
||||
headerCssStyles: {
|
||||
'border': 'none',
|
||||
'background-color': '#FFFFFF',
|
||||
'text-align': 'left',
|
||||
...cssStyles.tableHeader
|
||||
},
|
||||
rowCssStyles: {
|
||||
'border-top': 'solid 1px #ccc',
|
||||
'border-bottom': 'solid 1px #ccc',
|
||||
'border-left': 'none',
|
||||
'border-right': 'none'
|
||||
}
|
||||
},
|
||||
{ // view details button
|
||||
displayName: '',
|
||||
valueType: azdata.DeclarativeDataType.component,
|
||||
isReadOnly: true,
|
||||
width: 150,
|
||||
headerCssStyles: {
|
||||
'border': 'none',
|
||||
'background-color': '#FFFFFF'
|
||||
},
|
||||
rowCssStyles: {
|
||||
'border-top': 'solid 1px #ccc',
|
||||
'border-bottom': 'solid 1px #ccc',
|
||||
'border-left': 'none',
|
||||
'border-right': 'none'
|
||||
},
|
||||
},
|
||||
],
|
||||
data: []
|
||||
})
|
||||
.component();
|
||||
|
||||
this.serviceStatusDisplayContainer = view.modelBuilder.divContainer().component();
|
||||
this.serviceStatusDisplayContainer = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column' }).component();
|
||||
this.serviceStatusDisplayContainer.addItem(this.serviceStatusTable);
|
||||
|
||||
// Service Status row container
|
||||
this.serviceStatusRowContainer = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column' }).component();
|
||||
// Note we don't give the rows container as a child of the loading component since in order to align the loading component correctly
|
||||
// messes up the layout for the row container that we display after loading is finished. Instead we just remove the loading component
|
||||
// and replace it with the rows directly
|
||||
const serviceStatusRowContainerLoadingComponent = view.modelBuilder.loadingComponent()
|
||||
// Note we don't make the table a child of the loading component since making the loading component align correctly
|
||||
// messes up the layout for the table that we display after loading is finished. Instead we'll just remove the loading
|
||||
// component once it's finished loading the content
|
||||
this.serviceStatusLoadingComponent = view.modelBuilder.loadingComponent()
|
||||
.withProperties({ CSSStyles: { 'padding-top': '0px', 'padding-bottom': '0px' } })
|
||||
.component();
|
||||
this.serviceStatusRowContainer.addItem(serviceStatusRowContainerLoadingComponent, { flex: '0 0 auto', CSSStyles: { 'padding-left': '150px', width: '30px' } });
|
||||
|
||||
this.serviceStatusDisplayContainer.addItem(this.serviceStatusLoadingComponent, { flex: '0 0 auto', CSSStyles: { 'padding-left': '150px', width: '30px' } });
|
||||
|
||||
this.serviceStatusErrorMessage = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ display: 'none', CSSStyles: { ...cssStyles.errorText } }).component();
|
||||
overviewContainer.addItem(this.serviceStatusErrorMessage);
|
||||
|
||||
this.serviceStatusDisplayContainer.addItem(this.serviceStatusRowContainer);
|
||||
overviewContainer.addItem(this.serviceStatusDisplayContainer);
|
||||
|
||||
rootContainer.addItem(overviewContainer, { flex: '0 0 auto' });
|
||||
@@ -170,25 +244,77 @@ export class BdcDashboardOverviewPage extends BdcDashboardPage {
|
||||
|
||||
const endpointsContainer = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column', width: '100%', height: '100%' }).component();
|
||||
|
||||
// Service endpoints header row
|
||||
const endpointsHeaderRow = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'row' }).component();
|
||||
const endpointsServiceNameHeaderCell = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ value: localize('bdc.dashboard.serviceHeader', "Service") }).component();
|
||||
endpointsHeaderRow.addItem(endpointsServiceNameHeaderCell, { CSSStyles: { 'width': `${serviceEndpointRowServiceNameCellWidth}px`, 'min-width': `${serviceEndpointRowServiceNameCellWidth}px`, ...cssStyles.tableHeader } });
|
||||
const endpointsEndpointHeaderCell = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ value: localize('bdc.dashboard.endpointHeader', "Endpoint") }).component();
|
||||
endpointsHeaderRow.addItem(endpointsEndpointHeaderCell, { CSSStyles: { 'width': `${serviceEndpointRowEndpointCellWidth}px`, 'min-width': `${serviceEndpointRowEndpointCellWidth}px`, ...cssStyles.tableHeader } });
|
||||
endpointsContainer.addItem(endpointsHeaderRow, { CSSStyles: { 'padding-left': '10px', 'box-sizing': 'border-box', 'user-select': 'text' } });
|
||||
this.endpointsTable = view.modelBuilder.declarativeTable()
|
||||
.withProperties<azdata.DeclarativeTableProperties>(
|
||||
{
|
||||
columns: [
|
||||
{ // service
|
||||
displayName: localize('bdc.dashboard.serviceHeader', "Service"),
|
||||
valueType: azdata.DeclarativeDataType.string,
|
||||
isReadOnly: true,
|
||||
width: 200,
|
||||
headerCssStyles: {
|
||||
'border': 'none',
|
||||
'background-color': '#FFFFFF',
|
||||
...cssStyles.tableHeader
|
||||
},
|
||||
rowCssStyles: {
|
||||
'border-top': 'solid 1px #ccc',
|
||||
'border-bottom': 'solid 1px #ccc',
|
||||
'border-left': 'none',
|
||||
'border-right': 'none'
|
||||
},
|
||||
},
|
||||
{ // endpoint
|
||||
displayName: localize('bdc.dashboard.endpointHeader', "Endpoint"),
|
||||
valueType: azdata.DeclarativeDataType.component,
|
||||
isReadOnly: true,
|
||||
width: 350,
|
||||
headerCssStyles: {
|
||||
'border': 'none',
|
||||
'background-color': '#FFFFFF',
|
||||
...cssStyles.tableHeader
|
||||
},
|
||||
rowCssStyles: {
|
||||
'border-top': 'solid 1px #ccc',
|
||||
'border-bottom': 'solid 1px #ccc',
|
||||
'border-left': 'none',
|
||||
'border-right': 'none',
|
||||
'overflow': 'hidden',
|
||||
'text-overflow': 'ellipsis'
|
||||
},
|
||||
},
|
||||
{ // copy
|
||||
displayName: '',
|
||||
valueType: azdata.DeclarativeDataType.component,
|
||||
isReadOnly: true,
|
||||
width: 50,
|
||||
headerCssStyles: {
|
||||
'border': 'none',
|
||||
'background-color': '#FFFFFF'
|
||||
},
|
||||
rowCssStyles: {
|
||||
'border-top': 'solid 1px #ccc',
|
||||
'border-bottom': 'solid 1px #ccc',
|
||||
'border-left': 'none',
|
||||
'border-right': 'none'
|
||||
}
|
||||
}
|
||||
],
|
||||
data: []
|
||||
}).component();
|
||||
|
||||
this.endpointsDisplayContainer = view.modelBuilder.divContainer().component();
|
||||
this.endpointsRowContainer = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column' }).component();
|
||||
// Note we don't give the rows container as a child of the loading component since in order to align the loading component correctly
|
||||
// messes up the layout for the row container that we display after loading is finished. Instead we just remove the loading component
|
||||
// and replace it with the rows directly
|
||||
const endpointRowContainerLoadingComponent = view.modelBuilder.loadingComponent()
|
||||
this.endpointsDisplayContainer = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column' }).component();
|
||||
this.endpointsDisplayContainer.addItem(this.endpointsTable);
|
||||
|
||||
// Note we don't make the table a child of the loading component since making the loading component align correctly
|
||||
// messes up the layout for the table that we display after loading is finished. Instead we'll just remove the loading
|
||||
// component once it's finished loading the content
|
||||
this.endpointsLoadingComponent = view.modelBuilder.loadingComponent()
|
||||
.withProperties({ CSSStyles: { 'padding-top': '0px', 'padding-bottom': '0px' } })
|
||||
.component();
|
||||
this.endpointsRowContainer.addItem(endpointRowContainerLoadingComponent, { flex: '0 0 auto', CSSStyles: { 'padding-left': '150px', width: '30px' } });
|
||||
this.endpointsDisplayContainer.addItem(this.endpointsLoadingComponent, { flex: '0 0 auto', CSSStyles: { 'padding-left': '150px', width: '30px' } });
|
||||
|
||||
this.endpointsDisplayContainer.addItem(this.endpointsRowContainer);
|
||||
endpointsContainer.addItem(this.endpointsErrorMessage);
|
||||
endpointsContainer.addItem(this.endpointsDisplayContainer);
|
||||
rootContainer.addItem(endpointsContainer, { flex: '0 0 auto' });
|
||||
@@ -228,16 +354,37 @@ export class BdcDashboardOverviewPage extends BdcDashboardPage {
|
||||
(<azdata.TextComponent>this.clusterHealthStatusLoadingComponent.component).value = getHealthStatusDisplayText(bdcStatus.healthStatus);
|
||||
|
||||
if (bdcStatus.services) {
|
||||
this.serviceStatusRowContainer.clearItems();
|
||||
bdcStatus.services.forEach((s, i) => {
|
||||
this.createServiceStatusRow(this.serviceStatusRowContainer, s, i === bdcStatus.services.length - 1);
|
||||
this.serviceStatusTable.data = bdcStatus.services.map(serviceStatus => {
|
||||
const statusIconCell = this.modelBuilder.text()
|
||||
.withProperties<azdata.TextComponentProperties>({
|
||||
value: getHealthStatusIcon(serviceStatus.healthStatus),
|
||||
ariaRole: 'img',
|
||||
title: getHealthStatusDisplayText(serviceStatus.healthStatus),
|
||||
CSSStyles: { 'user-select': 'none', ...cssStyles.text }
|
||||
}).component();
|
||||
const nameCell = this.modelBuilder.hyperlink()
|
||||
.withProperties<azdata.HyperlinkComponentProperties>({
|
||||
label: getServiceNameDisplayText(serviceStatus.serviceName),
|
||||
url: '',
|
||||
CSSStyles: { ...cssStyles.text, ...cssStyles.hyperlink }
|
||||
}).component();
|
||||
nameCell.onDidClick(() => {
|
||||
this.dashboard.switchToServiceTab(serviceStatus.serviceName);
|
||||
});
|
||||
|
||||
const viewDetailsButton = serviceStatus.healthStatus !== 'healthy' && serviceStatus.details && serviceStatus.details.length > 0 ? createViewDetailsButton(this.modelBuilder, serviceStatus.details) : undefined;
|
||||
return [
|
||||
statusIconCell,
|
||||
nameCell,
|
||||
getStateDisplayText(serviceStatus.state),
|
||||
getHealthStatusDisplayText(serviceStatus.healthStatus),
|
||||
viewDetailsButton];
|
||||
});
|
||||
this.serviceStatusDisplayContainer.removeItem(this.serviceStatusLoadingComponent);
|
||||
}
|
||||
}
|
||||
|
||||
private handleEndpointsUpdate(endpoints: EndpointModel[]): void {
|
||||
this.endpointsRowContainer.clearItems();
|
||||
|
||||
// Sort the endpoints. The sort method is that SQL Server Master is first - followed by all
|
||||
// others in alphabetical order by endpoint
|
||||
const sqlServerMasterEndpoints = endpoints.filter(e => e.name === Endpoint.sqlServerMaster);
|
||||
@@ -249,9 +396,21 @@ export class BdcDashboardOverviewPage extends BdcDashboardPage {
|
||||
});
|
||||
endpoints.unshift(...sqlServerMasterEndpoints);
|
||||
|
||||
endpoints.forEach((e, i) => {
|
||||
createServiceEndpointRow(this.modelBuilder, this.endpointsRowContainer, e, this.model, hyperlinkedEndpoints.some(he => he === e.name), i === endpoints.length - 1);
|
||||
this.endpointsTable.data = endpoints.map(e => {
|
||||
const copyValueCell = this.modelBuilder.button().withProperties<azdata.ButtonProperties>({ title: localize('bdc.dashboard.copyTitle', "Copy") }).component();
|
||||
copyValueCell.iconPath = IconPathHelper.copy;
|
||||
copyValueCell.onDidClick(() => {
|
||||
vscode.env.clipboard.writeText(e.endpoint);
|
||||
vscode.window.showInformationMessage(localize('copiedEndpoint', "Endpoint '{0}' copied to clipboard", getEndpointDisplayText(e.name, e.description)));
|
||||
});
|
||||
copyValueCell.iconHeight = '14px';
|
||||
copyValueCell.iconWidth = '14px';
|
||||
return [getEndpointDisplayText(e.name, e.description),
|
||||
createEndpointComponent(this.modelBuilder, e, this.model, hyperlinkedEndpoints.some(he => he === e.name)), //e.endpoint,
|
||||
copyValueCell];
|
||||
});
|
||||
|
||||
this.endpointsDisplayContainer.removeItem(this.endpointsLoadingComponent);
|
||||
}
|
||||
|
||||
private handleBdcError(errorEvent: BdcErrorEvent): void {
|
||||
@@ -291,54 +450,17 @@ export class BdcDashboardOverviewPage extends BdcDashboardPage {
|
||||
this.showEndpointsError(errorMessage);
|
||||
}
|
||||
}
|
||||
|
||||
private createServiceStatusRow(container: azdata.FlexContainer, serviceStatus: ServiceStatusModel, isLastRow: boolean): void {
|
||||
const serviceStatusRow = this.modelBuilder.flexContainer().withLayout({ flexFlow: 'row', alignItems: 'center', height: '30px' }).component();
|
||||
const statusIconCell = this.modelBuilder.text()
|
||||
.withProperties<azdata.TextComponentProperties>({
|
||||
value: getHealthStatusIcon(serviceStatus.healthStatus),
|
||||
ariaRole: 'img',
|
||||
title: getHealthStatusDisplayText(serviceStatus.healthStatus),
|
||||
CSSStyles: { 'user-select': 'none' }
|
||||
}).component();
|
||||
serviceStatusRow.addItem(statusIconCell, { CSSStyles: { 'width': `${overviewIconColumnWidthPx}px`, 'min-width': `${overviewIconColumnWidthPx}px` } });
|
||||
const nameCell = this.modelBuilder.hyperlink().withProperties<azdata.HyperlinkComponentProperties>({
|
||||
label: getServiceNameDisplayText(serviceStatus.serviceName),
|
||||
url: '',
|
||||
CSSStyles: { ...cssStyles.text, ...cssStyles.hyperlink }
|
||||
}).component();
|
||||
nameCell.onDidClick(() => {
|
||||
this.dashboard.switchToServiceTab(serviceStatus.serviceName);
|
||||
});
|
||||
serviceStatusRow.addItem(nameCell, { CSSStyles: { 'width': `${overviewServiceNameCellWidthPx}px`, 'min-width': `${overviewServiceNameCellWidthPx}px`, ...cssStyles.text } });
|
||||
const stateText = getStateDisplayText(serviceStatus.state);
|
||||
const stateCell = this.modelBuilder.text().withProperties({ value: stateText, title: stateText, CSSStyles: { ...cssStyles.overflowEllipsisText } }).component();
|
||||
serviceStatusRow.addItem(stateCell, { CSSStyles: { 'width': `${overviewStateCellWidthPx}px`, 'min-width': `${overviewStateCellWidthPx}px` } });
|
||||
const healthStatusText = getHealthStatusDisplayText(serviceStatus.healthStatus);
|
||||
const healthStatusCell = this.modelBuilder.text().withProperties({ value: healthStatusText, title: healthStatusText, CSSStyles: { ...cssStyles.overflowEllipsisText } }).component();
|
||||
serviceStatusRow.addItem(healthStatusCell, { CSSStyles: { 'width': `${overviewHealthStatusCellWidthPx}px`, 'min-width': `${overviewHealthStatusCellWidthPx}px` } });
|
||||
|
||||
if (serviceStatus.healthStatus !== 'healthy' && serviceStatus.details && serviceStatus.details.length > 0) {
|
||||
serviceStatusRow.addItem(createViewDetailsButton(this.modelBuilder, serviceStatus.details), { 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' } });
|
||||
}
|
||||
}
|
||||
|
||||
function createServiceEndpointRow(modelBuilder: azdata.ModelBuilder, container: azdata.FlexContainer, endpoint: EndpointModel, bdcModel: BdcDashboardModel, isHyperlink: boolean, isLastRow: boolean): void {
|
||||
const endPointRow = modelBuilder.flexContainer().withLayout({ flexFlow: 'row', alignItems: 'center', height: '40px' }).component();
|
||||
const nameCell = modelBuilder.text().withProperties({ value: getEndpointDisplayText(endpoint.name, endpoint.description), CSSStyles: { ...cssStyles.text } }).component();
|
||||
endPointRow.addItem(nameCell, { CSSStyles: { 'width': `${serviceEndpointRowServiceNameCellWidth}px`, 'min-width': `${serviceEndpointRowServiceNameCellWidth}px`, 'text-align': 'center' } });
|
||||
function createEndpointComponent(modelBuilder: azdata.ModelBuilder, endpoint: EndpointModel, bdcModel: BdcDashboardModel, isHyperlink: boolean): azdata.HyperlinkComponent | azdata.TextComponent {
|
||||
if (isHyperlink) {
|
||||
const endpointCell = modelBuilder.hyperlink()
|
||||
return modelBuilder.hyperlink()
|
||||
.withProperties<azdata.HyperlinkComponentProperties>({
|
||||
label: endpoint.endpoint,
|
||||
title: endpoint.endpoint,
|
||||
url: endpoint.endpoint, CSSStyles: { 'height': '15px' }
|
||||
url: endpoint.endpoint, CSSStyles: { ...cssStyles.hyperlink }
|
||||
})
|
||||
.component();
|
||||
endPointRow.addItem(endpointCell, { CSSStyles: { 'width': `${serviceEndpointRowEndpointCellWidth}px`, 'min-width': `${serviceEndpointRowEndpointCellWidth}px`, 'overflow': 'hidden', 'text-overflow': 'ellipsis', ...cssStyles.hyperlink } });
|
||||
}
|
||||
else if (endpoint.name === Endpoint.sqlServerMaster) {
|
||||
const endpointCell = modelBuilder.hyperlink()
|
||||
@@ -346,7 +468,7 @@ function createServiceEndpointRow(modelBuilder: azdata.ModelBuilder, container:
|
||||
title: endpoint.endpoint,
|
||||
label: endpoint.endpoint,
|
||||
url: '',
|
||||
CSSStyles: { 'overflow': 'hidden', 'text-overflow': 'ellipsis', ...cssStyles.text, ...cssStyles.hyperlink }
|
||||
CSSStyles: { ...cssStyles.text, ...cssStyles.hyperlink }
|
||||
}).component();
|
||||
endpointCell.onDidClick(async () => {
|
||||
const connProfile = bdcModel.getSqlServerMasterConnectionProfile();
|
||||
@@ -361,27 +483,15 @@ function createServiceEndpointRow(modelBuilder: azdata.ModelBuilder, container:
|
||||
azdata.connection.openConnectionDialog(undefined, connProfile);
|
||||
}
|
||||
});
|
||||
endPointRow.addItem(endpointCell, { CSSStyles: { 'width': `${serviceEndpointRowEndpointCellWidth}px`, 'min-width': `${serviceEndpointRowEndpointCellWidth}px` } });
|
||||
return endpointCell;
|
||||
}
|
||||
else {
|
||||
const endpointCell = modelBuilder.text()
|
||||
return modelBuilder.text()
|
||||
.withProperties<azdata.TextComponentProperties>({
|
||||
value: endpoint.endpoint,
|
||||
title: endpoint.endpoint,
|
||||
CSSStyles: { 'overflow': 'hidden', 'text-overflow': 'ellipsis', ...cssStyles.text }
|
||||
CSSStyles: { ...cssStyles.text }
|
||||
})
|
||||
.component();
|
||||
endPointRow.addItem(endpointCell, { CSSStyles: { 'width': `${serviceEndpointRowEndpointCellWidth}px`, 'min-width': `${serviceEndpointRowEndpointCellWidth}px` } });
|
||||
}
|
||||
const copyValueCell = modelBuilder.button().withProperties<azdata.ButtonProperties>({ title: localize('bdc.dashboard.copyTitle', "Copy") }).component();
|
||||
copyValueCell.iconPath = IconPathHelper.copy;
|
||||
copyValueCell.onDidClick(() => {
|
||||
vscode.env.clipboard.writeText(endpoint.endpoint);
|
||||
vscode.window.showInformationMessage(localize('copiedEndpoint', "Endpoint '{0}' copied to clipboard", getEndpointDisplayText(endpoint.name, endpoint.description)));
|
||||
});
|
||||
copyValueCell.iconHeight = '14px';
|
||||
copyValueCell.iconWidth = '14px';
|
||||
endPointRow.addItem(copyValueCell, { CSSStyles: { 'width': '14px', 'min-width': '14px', 'padding-left': '10px', ...cssStyles.text } });
|
||||
|
||||
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' } });
|
||||
}
|
||||
|
||||
@@ -6,7 +6,7 @@
|
||||
import * as azdata from 'azdata';
|
||||
import * as nls from 'vscode-nls';
|
||||
import { BdcDashboardModel } from './bdcDashboardModel';
|
||||
import { BdcStatusModel, InstanceStatusModel } from '../controller/apiGenerated';
|
||||
import { BdcStatusModel, InstanceStatusModel, ResourceStatusModel } from '../controller/apiGenerated';
|
||||
import { getHealthStatusDisplayText, getHealthStatusIcon, getStateDisplayText, Service } from '../utils';
|
||||
import { cssStyles } from '../constants';
|
||||
import { isNullOrUndefined } from 'util';
|
||||
@@ -15,38 +15,35 @@ import { BdcDashboardPage } from './bdcDashboardPage';
|
||||
|
||||
const localize = nls.loadMessageBundle();
|
||||
|
||||
const healthAndStatusIconColumnWidth = 25;
|
||||
const healthAndStatusInstanceNameColumnWidth = 100;
|
||||
const healthAndStatusStateColumnWidth = 150;
|
||||
const healthAndStatusHealthColumnWidth = 100;
|
||||
|
||||
const metricsAndLogsInstanceNameColumnWidth = 125;
|
||||
const metricsAndLogsNodeMetricsColumnWidth = 80;
|
||||
const metricsAndLogsSqlMetricsColumnWidth = 80;
|
||||
const metricsAndLogsLogsColumnWidth = 75;
|
||||
|
||||
const viewText = localize('bdc.dashboard.viewHyperlink', "View");
|
||||
const notAvailableText = localize('bdc.dashboard.notAvailable', "N/A");
|
||||
|
||||
export class BdcDashboardResourceStatusPage extends BdcDashboardPage {
|
||||
|
||||
private resourceStatusModel: ResourceStatusModel;
|
||||
private rootContainer: azdata.FlexContainer;
|
||||
private instanceHealthStatusRowsContainer: azdata.FlexContainer;
|
||||
private metricsAndLogsRowsContainer: azdata.FlexContainer;
|
||||
private instanceHealthStatusTable: azdata.DeclarativeTableComponent;
|
||||
private metricsAndLogsRowsTable: azdata.DeclarativeTableComponent;
|
||||
private lastUpdatedLabel: azdata.TextComponent;
|
||||
|
||||
constructor(private model: BdcDashboardModel, private modelView: azdata.ModelView, private serviceName: string, private resourceName: string) {
|
||||
super();
|
||||
this.model.onDidUpdateBdcStatus(bdcStatus => this.eventuallyRunOnInitialized(() => this.handleBdcStatusUpdate(bdcStatus)));
|
||||
this.rootContainer = this.createContainer(modelView);
|
||||
}
|
||||
|
||||
public get container(): azdata.FlexContainer {
|
||||
// Lazily create the container only when needed
|
||||
if (!this.rootContainer) {
|
||||
// We do this here so that we can have the resource model to use for populating the data
|
||||
// in the tables. This is to get around a timing issue with ModelView tables
|
||||
this.updateResourceStatusModel(this.model.bdcStatus);
|
||||
this.createContainer();
|
||||
}
|
||||
return this.rootContainer;
|
||||
}
|
||||
|
||||
private createContainer(view: azdata.ModelView): azdata.FlexContainer {
|
||||
const rootContainer = view.modelBuilder.flexContainer().withLayout(
|
||||
private createContainer(): void {
|
||||
this.rootContainer = this.modelView.modelBuilder.flexContainer().withLayout(
|
||||
{
|
||||
flexFlow: 'column',
|
||||
width: '100%',
|
||||
@@ -57,11 +54,11 @@ export class BdcDashboardResourceStatusPage extends BdcDashboardPage {
|
||||
// # INSTANCE HEALTH AND STATUS #
|
||||
// ##############################
|
||||
|
||||
const healthStatusHeaderContainer = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'row', height: '20px' }).component();
|
||||
rootContainer.addItem(healthStatusHeaderContainer, { CSSStyles: { 'padding-left': '10px', 'padding-top': '15px' } });
|
||||
const healthStatusHeaderContainer = this.modelView.modelBuilder.flexContainer().withLayout({ flexFlow: 'row', height: '20px' }).component();
|
||||
this.rootContainer.addItem(healthStatusHeaderContainer, { CSSStyles: { 'padding-left': '10px', 'padding-top': '15px' } });
|
||||
|
||||
// Header label
|
||||
const healthStatusHeaderLabel = view.modelBuilder.text()
|
||||
const healthStatusHeaderLabel = this.modelView.modelBuilder.text()
|
||||
.withProperties<azdata.TextComponentProperties>({
|
||||
value: localize('bdc.dashboard.healthStatusDetailsHeader', "Health Status Details"),
|
||||
CSSStyles: { 'margin-block-start': '0px', 'margin-block-end': '10px' }
|
||||
@@ -71,180 +68,306 @@ export class BdcDashboardResourceStatusPage extends BdcDashboardPage {
|
||||
healthStatusHeaderContainer.addItem(healthStatusHeaderLabel, { CSSStyles: { ...cssStyles.title } });
|
||||
|
||||
// Last updated label
|
||||
this.lastUpdatedLabel = view.modelBuilder.text()
|
||||
this.lastUpdatedLabel = this.modelView.modelBuilder.text()
|
||||
.withProperties({
|
||||
value: localize('bdc.dashboard.lastUpdated', "Last Updated : {0}", '-'),
|
||||
value: this.getLastUpdatedText(),
|
||||
CSSStyles: { ...cssStyles.lastUpdatedText }
|
||||
}).component();
|
||||
|
||||
healthStatusHeaderContainer.addItem(this.lastUpdatedLabel, { CSSStyles: { 'margin-left': '45px' } });
|
||||
|
||||
// Header row
|
||||
const instanceHealthStatusHeaderRow = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'row' }).component();
|
||||
const instanceHealthAndStatusNameHeader = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ value: localize('bdc.dashboard.instanceHeader', "Instance") }).component();
|
||||
// Instance name cell covers both icon + service name so width stretches both cells
|
||||
instanceHealthStatusHeaderRow.addItem(instanceHealthAndStatusNameHeader, { CSSStyles: { 'width': `${healthAndStatusIconColumnWidth + healthAndStatusInstanceNameColumnWidth}px`, 'min-width': `${healthAndStatusIconColumnWidth + healthAndStatusInstanceNameColumnWidth}px`, ...cssStyles.tableHeader } });
|
||||
const instanceHealthAndStatusState = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ value: localize('bdc.dashboard.stateHeader', "State") }).component();
|
||||
instanceHealthStatusHeaderRow.addItem(instanceHealthAndStatusState, { CSSStyles: { 'width': `${healthAndStatusStateColumnWidth}px`, 'min-width': `${healthAndStatusStateColumnWidth}px`, ...cssStyles.tableHeader } });
|
||||
const instanceHealthAndStatusHealthStatus = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ value: localize('bdc.dashboard.healthStatusHeader', "Health Status") }).component();
|
||||
instanceHealthStatusHeaderRow.addItem(instanceHealthAndStatusHealthStatus, { CSSStyles: { 'width': `${healthAndStatusHealthColumnWidth}px`, 'min-width': `${healthAndStatusHealthColumnWidth}px`, ...cssStyles.tableHeader } });
|
||||
rootContainer.addItem(instanceHealthStatusHeaderRow, { flex: '0 0 auto', CSSStyles: { 'padding-left': '10px', 'box-sizing': 'border-box' } });
|
||||
|
||||
this.instanceHealthStatusRowsContainer = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column' }).component();
|
||||
rootContainer.addItem(this.instanceHealthStatusRowsContainer, { flex: '0 0 auto' });
|
||||
this.instanceHealthStatusTable = this.modelView.modelBuilder.declarativeTable()
|
||||
.withProperties<azdata.DeclarativeTableProperties>(
|
||||
{
|
||||
columns: [
|
||||
{ // status icon
|
||||
displayName: '',
|
||||
valueType: azdata.DeclarativeDataType.component,
|
||||
isReadOnly: true,
|
||||
width: 25,
|
||||
headerCssStyles: {
|
||||
'border': 'none',
|
||||
'background-color': '#FFFFFF'
|
||||
},
|
||||
rowCssStyles: {
|
||||
'border-top': 'solid 1px #ccc',
|
||||
'border-bottom': 'solid 1px #ccc',
|
||||
'border-left': 'none',
|
||||
'border-right': 'none'
|
||||
},
|
||||
},
|
||||
{ // instance
|
||||
displayName: localize('bdc.dashboard.instanceHeader', "Instance"),
|
||||
valueType: azdata.DeclarativeDataType.string,
|
||||
isReadOnly: true,
|
||||
width: 100,
|
||||
headerCssStyles: {
|
||||
'border': 'none',
|
||||
'background-color': '#FFFFFF',
|
||||
...cssStyles.tableHeader
|
||||
},
|
||||
rowCssStyles: {
|
||||
'border-top': 'solid 1px #ccc',
|
||||
'border-bottom': 'solid 1px #ccc',
|
||||
'border-left': 'none',
|
||||
'border-right': 'none'
|
||||
},
|
||||
},
|
||||
{ // state
|
||||
displayName: localize('bdc.dashboard.stateHeader', "State"),
|
||||
valueType: azdata.DeclarativeDataType.string,
|
||||
isReadOnly: true,
|
||||
width: 150,
|
||||
headerCssStyles: {
|
||||
'border': 'none',
|
||||
'background-color': '#FFFFFF',
|
||||
...cssStyles.tableHeader
|
||||
},
|
||||
rowCssStyles: {
|
||||
'border-top': 'solid 1px #ccc',
|
||||
'border-bottom': 'solid 1px #ccc',
|
||||
'border-left': 'none',
|
||||
'border-right': 'none'
|
||||
},
|
||||
},
|
||||
{ // health status
|
||||
displayName: localize('bdc.dashboard.healthStatusHeader', "Health Status"),
|
||||
valueType: azdata.DeclarativeDataType.string,
|
||||
isReadOnly: true,
|
||||
width: 100,
|
||||
headerCssStyles: {
|
||||
'border': 'none',
|
||||
'background-color': '#FFFFFF',
|
||||
'text-align': 'left',
|
||||
...cssStyles.tableHeader
|
||||
},
|
||||
rowCssStyles: {
|
||||
'border-top': 'solid 1px #ccc',
|
||||
'border-bottom': 'solid 1px #ccc',
|
||||
'border-left': 'none',
|
||||
'border-right': 'none'
|
||||
}
|
||||
},
|
||||
{ // view details button
|
||||
displayName: '',
|
||||
valueType: azdata.DeclarativeDataType.component,
|
||||
isReadOnly: true,
|
||||
width: 150,
|
||||
headerCssStyles: {
|
||||
'border': 'none',
|
||||
'background-color': '#FFFFFF'
|
||||
},
|
||||
rowCssStyles: {
|
||||
'border-top': 'solid 1px #ccc',
|
||||
'border-bottom': 'solid 1px #ccc',
|
||||
'border-left': 'none',
|
||||
'border-right': 'none'
|
||||
},
|
||||
},
|
||||
],
|
||||
data: this.createHealthStatusRows()
|
||||
}).component();
|
||||
this.rootContainer.addItem(this.instanceHealthStatusTable, { flex: '0 0 auto' });
|
||||
|
||||
// ####################
|
||||
// # METRICS AND LOGS #
|
||||
// ####################
|
||||
|
||||
// Title label
|
||||
const endpointsLabel = view.modelBuilder.text()
|
||||
const endpointsLabel = this.modelView.modelBuilder.text()
|
||||
.withProperties<azdata.TextComponentProperties>({ value: localize('bdc.dashboard.metricsAndLogsLabel', "Metrics and Logs"), CSSStyles: { 'margin-block-start': '20px', 'margin-block-end': '0px' } })
|
||||
.component();
|
||||
rootContainer.addItem(endpointsLabel, { CSSStyles: { 'padding-left': '10px', ...cssStyles.title } });
|
||||
this.rootContainer.addItem(endpointsLabel, { CSSStyles: { 'padding-left': '10px', ...cssStyles.title } });
|
||||
|
||||
let metricsAndLogsColumns: azdata.DeclarativeTableColumn[] =
|
||||
[
|
||||
{ // instance
|
||||
displayName: localize('bdc.dashboard.instanceHeader', "Instance"),
|
||||
valueType: azdata.DeclarativeDataType.string,
|
||||
isReadOnly: true,
|
||||
width: 125,
|
||||
headerCssStyles: {
|
||||
'border': 'none',
|
||||
'background-color': '#FFFFFF',
|
||||
...cssStyles.tableHeader
|
||||
},
|
||||
rowCssStyles: {
|
||||
'border-top': 'solid 1px #ccc',
|
||||
'border-bottom': 'solid 1px #ccc',
|
||||
'border-left': 'none',
|
||||
'border-right': 'none'
|
||||
},
|
||||
},
|
||||
{ // node metrics
|
||||
displayName: localize('bdc.dashboard.nodeMetricsHeader', "Node Metrics"),
|
||||
valueType: azdata.DeclarativeDataType.component,
|
||||
isReadOnly: true,
|
||||
width: 100,
|
||||
headerCssStyles: {
|
||||
'border': 'none',
|
||||
'background-color': '#FFFFFF',
|
||||
...cssStyles.tableHeader
|
||||
},
|
||||
rowCssStyles: {
|
||||
'border-top': 'solid 1px #ccc',
|
||||
'border-bottom': 'solid 1px #ccc',
|
||||
'border-left': 'none',
|
||||
'border-right': 'none'
|
||||
},
|
||||
}
|
||||
];
|
||||
|
||||
// Header row
|
||||
const metricsAndLogsHeaderRow = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'row' }).component();
|
||||
const nameCell = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ value: localize('bdc.dashboard.instanceHeader', "Instance") }).component();
|
||||
metricsAndLogsHeaderRow.addItem(nameCell, { CSSStyles: { 'width': `${metricsAndLogsInstanceNameColumnWidth}px`, 'min-width': `${metricsAndLogsInstanceNameColumnWidth}px`, ...cssStyles.tableHeader } });
|
||||
const nodeMetricsCell = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ value: localize('bdc.dashboard.nodeMetricsHeader', "Node Metrics") }).component();
|
||||
metricsAndLogsHeaderRow.addItem(nodeMetricsCell, { CSSStyles: { 'width': `${metricsAndLogsNodeMetricsColumnWidth}px`, 'min-width': `${metricsAndLogsNodeMetricsColumnWidth}px`, ...cssStyles.tableHeader } });
|
||||
// Only show SQL metrics column for SQL resource instances
|
||||
if (this.serviceName.toLowerCase() === Service.sql) {
|
||||
const sqlMetricsCell = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ value: localize('bdc.dashboard.sqlMetricsHeader', "SQL Metrics") }).component();
|
||||
metricsAndLogsHeaderRow.addItem(sqlMetricsCell, { CSSStyles: { 'width': `${metricsAndLogsSqlMetricsColumnWidth}px`, 'min-width': `${metricsAndLogsSqlMetricsColumnWidth}px`, ...cssStyles.tableHeader } });
|
||||
metricsAndLogsColumns.push(
|
||||
{ // sql metrics
|
||||
displayName: localize('bdc.dashboard.sqlMetricsHeader', "SQL Metrics"),
|
||||
valueType: azdata.DeclarativeDataType.component,
|
||||
isReadOnly: true,
|
||||
width: 100,
|
||||
headerCssStyles: {
|
||||
'border': 'none',
|
||||
'background-color': '#FFFFFF',
|
||||
'text-align': 'left',
|
||||
...cssStyles.tableHeader
|
||||
},
|
||||
rowCssStyles: {
|
||||
'border-top': 'solid 1px #ccc',
|
||||
'border-bottom': 'solid 1px #ccc',
|
||||
'border-left': 'none',
|
||||
'border-right': 'none'
|
||||
}
|
||||
});
|
||||
}
|
||||
const healthStatusCell = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ value: localize('bdc.dashboard.logsHeader', "Logs") }).component();
|
||||
metricsAndLogsHeaderRow.addItem(healthStatusCell, { CSSStyles: { 'width': `${metricsAndLogsLogsColumnWidth}px`, 'min-width': `${metricsAndLogsLogsColumnWidth}px`, ...cssStyles.tableHeader } });
|
||||
rootContainer.addItem(metricsAndLogsHeaderRow, { flex: '0 0 auto', CSSStyles: { 'padding-left': '10px', 'box-sizing': 'border-box' } });
|
||||
|
||||
this.metricsAndLogsRowsContainer = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column' }).component();
|
||||
rootContainer.addItem(this.metricsAndLogsRowsContainer, { flex: '0 0 auto' });
|
||||
metricsAndLogsColumns.push(
|
||||
{ // logs
|
||||
displayName: localize('bdc.dashboard.logsHeader', "Logs"),
|
||||
valueType: azdata.DeclarativeDataType.component,
|
||||
isReadOnly: true,
|
||||
width: 100,
|
||||
headerCssStyles: {
|
||||
'border': 'none',
|
||||
'background-color': '#FFFFFF',
|
||||
'text-align': 'left',
|
||||
...cssStyles.tableHeader
|
||||
},
|
||||
rowCssStyles: {
|
||||
'border-top': 'solid 1px #ccc',
|
||||
'border-bottom': 'solid 1px #ccc',
|
||||
'border-left': 'none',
|
||||
'border-right': 'none'
|
||||
},
|
||||
});
|
||||
|
||||
this.metricsAndLogsRowsTable = this.modelView.modelBuilder.declarativeTable()
|
||||
.withProperties<azdata.DeclarativeTableProperties>(
|
||||
{
|
||||
columns: metricsAndLogsColumns,
|
||||
data: this.createMetricsAndLogsRows()
|
||||
}).component();
|
||||
this.rootContainer.addItem(this.metricsAndLogsRowsTable, { flex: '0 0 auto' });
|
||||
|
||||
this.initialized = true;
|
||||
this.handleBdcStatusUpdate(this.model.bdcStatus);
|
||||
|
||||
return rootContainer;
|
||||
}
|
||||
|
||||
private handleBdcStatusUpdate(bdcStatus?: BdcStatusModel): void {
|
||||
private updateResourceStatusModel(bdcStatus?: BdcStatusModel): void {
|
||||
// If we can't find the resource model for this resource then just
|
||||
// default to keeping what we had originally
|
||||
if (!bdcStatus) {
|
||||
return;
|
||||
}
|
||||
const service = bdcStatus.services ? bdcStatus.services.find(s => s.serviceName === this.serviceName) : undefined;
|
||||
const resource = service ? service.resources.find(r => r.resourceName === this.resourceName) : undefined;
|
||||
this.resourceStatusModel = service ? service.resources.find(r => r.resourceName === this.resourceName) : this.resourceStatusModel;
|
||||
}
|
||||
|
||||
if (!resource || isNullOrUndefined(resource.instances)) {
|
||||
private handleBdcStatusUpdate(bdcStatus?: BdcStatusModel): void {
|
||||
this.updateResourceStatusModel(bdcStatus);
|
||||
|
||||
if (!this.resourceStatusModel || isNullOrUndefined(this.resourceStatusModel.instances)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.lastUpdatedLabel.value =
|
||||
localize('bdc.dashboard.lastUpdated', "Last Updated : {0}",
|
||||
this.model.bdcStatusLastUpdated ?
|
||||
`${this.model.bdcStatusLastUpdated.toLocaleDateString()} ${this.model.bdcStatusLastUpdated.toLocaleTimeString()}`
|
||||
: '-');
|
||||
this.lastUpdatedLabel.value = this.getLastUpdatedText();
|
||||
|
||||
this.instanceHealthStatusRowsContainer.clearItems();
|
||||
this.metricsAndLogsRowsContainer.clearItems();
|
||||
this.instanceHealthStatusTable.data = this.createHealthStatusRows();
|
||||
|
||||
resource.instances.forEach(i => {
|
||||
const instanceHealthStatusRow = createInstanceHealthStatusRow(this.modelView.modelBuilder, i);
|
||||
this.instanceHealthStatusRowsContainer.addItem(instanceHealthStatusRow, { CSSStyles: { 'padding-left': '10px', 'border-top': 'solid 1px #ccc', 'box-sizing': 'border-box', 'user-select': 'text' } });
|
||||
|
||||
let metricsAndLogsRow = createMetricsAndLogsRow(this.modelView.modelBuilder, i, this.serviceName);
|
||||
this.metricsAndLogsRowsContainer.addItem(metricsAndLogsRow, { CSSStyles: { 'padding-left': '10px', 'border-top': 'solid 1px #ccc', 'box-sizing': 'border-box', 'user-select': 'text' } });
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a row with the name, state and health status for a particular instance on this resource
|
||||
*
|
||||
* @param modelBuilder The builder used to create the component
|
||||
* @param instanceStatus The status object for the instance this row is for
|
||||
*/
|
||||
function createInstanceHealthStatusRow(modelBuilder: azdata.ModelBuilder, instanceStatus: InstanceStatusModel): azdata.FlexContainer {
|
||||
const instanceHealthStatusRow = modelBuilder.flexContainer().withLayout({ flexFlow: 'row', alignItems: 'center', height: '30px' }).component();
|
||||
const statusIconCell = modelBuilder.text()
|
||||
.withProperties<azdata.TextComponentProperties>({
|
||||
value: getHealthStatusIcon(instanceStatus.healthStatus),
|
||||
ariaRole: 'img',
|
||||
title: getHealthStatusDisplayText(instanceStatus.healthStatus),
|
||||
CSSStyles: { 'user-select': 'none' }
|
||||
}).component();
|
||||
instanceHealthStatusRow.addItem(statusIconCell, { CSSStyles: { 'width': `${healthAndStatusIconColumnWidth}px`, 'min-width': `${healthAndStatusIconColumnWidth}px` } });
|
||||
const nameCell = modelBuilder.text().withProperties({ value: instanceStatus.instanceName, CSSStyles: { ...cssStyles.text } }).component();
|
||||
instanceHealthStatusRow.addItem(nameCell, { CSSStyles: { 'width': `${healthAndStatusInstanceNameColumnWidth}px`, 'min-width': `${healthAndStatusInstanceNameColumnWidth}px`, ...cssStyles.text } });
|
||||
const stateText = getStateDisplayText(instanceStatus.state);
|
||||
const stateCell = modelBuilder.text().withProperties({ value: stateText, title: stateText, CSSStyles: { ...cssStyles.overflowEllipsisText } }).component();
|
||||
instanceHealthStatusRow.addItem(stateCell, { CSSStyles: { 'width': `${healthAndStatusStateColumnWidth}px`, 'min-width': `${healthAndStatusStateColumnWidth}px` } });
|
||||
const healthStatusText = getHealthStatusDisplayText(instanceStatus.healthStatus);
|
||||
const healthStatusCell = modelBuilder.text().withProperties({ value: healthStatusText, title: healthStatusText, CSSStyles: { ...cssStyles.overflowEllipsisText } }).component();
|
||||
instanceHealthStatusRow.addItem(healthStatusCell, { CSSStyles: { 'width': `${healthAndStatusHealthColumnWidth}px`, 'min-width': `${healthAndStatusHealthColumnWidth}px` } });
|
||||
|
||||
if (instanceStatus.healthStatus !== 'healthy' && instanceStatus.details && instanceStatus.details.length > 0) {
|
||||
instanceHealthStatusRow.addItem(createViewDetailsButton(modelBuilder, instanceStatus.details), { flex: '0 0 auto' });
|
||||
}
|
||||
return instanceHealthStatusRow;
|
||||
}
|
||||
|
||||
/**
|
||||
* Creates a row with the name, link to the metrics and a link to the logs for a particular instance on this resource
|
||||
* @param modelBuilder The builder used to create the component
|
||||
* @param instanceStatus The status object for the instance this row is for
|
||||
* @param serviceName The name of the service this resource instance belongs to
|
||||
*/
|
||||
function createMetricsAndLogsRow(modelBuilder: azdata.ModelBuilder, instanceStatus: InstanceStatusModel, serviceName: string): azdata.FlexContainer {
|
||||
const metricsAndLogsRow = modelBuilder.flexContainer().withLayout({ flexFlow: 'row', alignItems: 'center', height: '30px' }).component();
|
||||
const nameCell = modelBuilder.text().withProperties({ value: instanceStatus.instanceName, CSSStyles: { ...cssStyles.text } }).component();
|
||||
metricsAndLogsRow.addItem(nameCell, { CSSStyles: { 'width': `${metricsAndLogsInstanceNameColumnWidth}px`, 'min-width': `${metricsAndLogsInstanceNameColumnWidth}px`, ...cssStyles.text } });
|
||||
|
||||
// Not all instances have all logs available - in that case just display N/A instead of a link
|
||||
if (isNullOrUndefined(instanceStatus.dashboards) || isNullOrUndefined(instanceStatus.dashboards.nodeMetricsUrl)) {
|
||||
const metricsCell = modelBuilder.text().withProperties({ value: notAvailableText, CSSStyles: { ...cssStyles.text } }).component();
|
||||
metricsAndLogsRow.addItem(metricsCell, { CSSStyles: { 'width': `${metricsAndLogsNodeMetricsColumnWidth}px`, 'min-width': `${metricsAndLogsNodeMetricsColumnWidth}px`, ...cssStyles.text } });
|
||||
} else {
|
||||
const nodeMetricsCell = modelBuilder.hyperlink().withProperties<azdata.HyperlinkComponentProperties>({
|
||||
label: viewText,
|
||||
url: instanceStatus.dashboards.nodeMetricsUrl,
|
||||
title: instanceStatus.dashboards.nodeMetricsUrl,
|
||||
CSSStyles: { ...cssStyles.text, ...cssStyles.hyperlink }
|
||||
})
|
||||
.component();
|
||||
metricsAndLogsRow.addItem(nodeMetricsCell, { CSSStyles: { 'width': `${metricsAndLogsNodeMetricsColumnWidth}px`, 'min-width': `${metricsAndLogsNodeMetricsColumnWidth}px` } });
|
||||
this.metricsAndLogsRowsTable.data = this.createMetricsAndLogsRows();
|
||||
}
|
||||
|
||||
// Only show SQL metrics column for SQL resource instances
|
||||
if (serviceName === Service.sql) {
|
||||
private createMetricsAndLogsRows(): any[][] {
|
||||
return this.resourceStatusModel ? this.resourceStatusModel.instances.map(instanceStatus => this.createMetricsAndLogsRow(instanceStatus)) : [];
|
||||
}
|
||||
|
||||
private createHealthStatusRows(): any[][] {
|
||||
return this.resourceStatusModel ? this.resourceStatusModel.instances.map(instanceStatus => this.createHealthStatusRow(instanceStatus)) : [];
|
||||
}
|
||||
|
||||
private createMetricsAndLogsRow(instanceStatus: InstanceStatusModel): any[] {
|
||||
const row: any[] = [instanceStatus.instanceName];
|
||||
|
||||
// Not all instances have all logs available - in that case just display N/A instead of a link
|
||||
if (isNullOrUndefined(instanceStatus.dashboards) || isNullOrUndefined(instanceStatus.dashboards.sqlMetricsUrl)) {
|
||||
const metricsCell = modelBuilder.text().withProperties({ value: notAvailableText, CSSStyles: { ...cssStyles.text } }).component();
|
||||
metricsAndLogsRow.addItem(metricsCell, { CSSStyles: { 'width': `${metricsAndLogsSqlMetricsColumnWidth}px`, 'min-width': `${metricsAndLogsSqlMetricsColumnWidth}px`, ...cssStyles.text } });
|
||||
if (isNullOrUndefined(instanceStatus.dashboards) || isNullOrUndefined(instanceStatus.dashboards.nodeMetricsUrl)) {
|
||||
row.push(this.modelView.modelBuilder.text().withProperties({ value: notAvailableText, CSSStyles: { ...cssStyles.text } }).component());
|
||||
} else {
|
||||
const sqlMetricsCell = modelBuilder.hyperlink().withProperties<azdata.HyperlinkComponentProperties>({
|
||||
row.push(this.modelView.modelBuilder.hyperlink().withProperties<azdata.HyperlinkComponentProperties>({
|
||||
label: viewText,
|
||||
url: instanceStatus.dashboards.sqlMetricsUrl,
|
||||
title: instanceStatus.dashboards.sqlMetricsUrl,
|
||||
url: instanceStatus.dashboards.nodeMetricsUrl,
|
||||
title: instanceStatus.dashboards.nodeMetricsUrl,
|
||||
CSSStyles: { ...cssStyles.text, ...cssStyles.hyperlink }
|
||||
})
|
||||
.component();
|
||||
metricsAndLogsRow.addItem(sqlMetricsCell, { CSSStyles: { 'width': `${metricsAndLogsSqlMetricsColumnWidth}px`, 'min-width': `${metricsAndLogsSqlMetricsColumnWidth}px` } });
|
||||
}).component());
|
||||
}
|
||||
|
||||
// Only show SQL metrics column for SQL resource instances
|
||||
if (this.serviceName === Service.sql) {
|
||||
// Not all instances have all logs available - in that case just display N/A instead of a link
|
||||
if (isNullOrUndefined(instanceStatus.dashboards) || isNullOrUndefined(instanceStatus.dashboards.sqlMetricsUrl)) {
|
||||
row.push(this.modelView.modelBuilder.text().withProperties({ value: notAvailableText, CSSStyles: { ...cssStyles.text } }).component());
|
||||
} else {
|
||||
row.push(this.modelView.modelBuilder.hyperlink().withProperties<azdata.HyperlinkComponentProperties>({
|
||||
label: viewText,
|
||||
url: instanceStatus.dashboards.sqlMetricsUrl,
|
||||
title: instanceStatus.dashboards.sqlMetricsUrl,
|
||||
CSSStyles: { ...cssStyles.text, ...cssStyles.hyperlink }
|
||||
}).component());
|
||||
}
|
||||
}
|
||||
|
||||
if (isNullOrUndefined(instanceStatus.dashboards) || isNullOrUndefined(instanceStatus.dashboards.logsUrl)) {
|
||||
row.push(this.modelView.modelBuilder.text().withProperties({ value: notAvailableText, CSSStyles: { ...cssStyles.text } }).component());
|
||||
} else {
|
||||
row.push(this.modelView.modelBuilder.hyperlink().withProperties<azdata.HyperlinkComponentProperties>({
|
||||
label: viewText,
|
||||
url: instanceStatus.dashboards.logsUrl,
|
||||
title: instanceStatus.dashboards.logsUrl,
|
||||
CSSStyles: { ...cssStyles.text, ...cssStyles.hyperlink }
|
||||
}).component());
|
||||
}
|
||||
return row;
|
||||
}
|
||||
|
||||
if (isNullOrUndefined(instanceStatus.dashboards) || isNullOrUndefined(instanceStatus.dashboards.logsUrl)) {
|
||||
const logsCell = modelBuilder.text().withProperties({ value: notAvailableText, CSSStyles: { ...cssStyles.text } }).component();
|
||||
metricsAndLogsRow.addItem(logsCell, { CSSStyles: { 'width': `${metricsAndLogsLogsColumnWidth}px`, 'min-width': `${metricsAndLogsLogsColumnWidth}px`, ...cssStyles.text } });
|
||||
} else {
|
||||
const logsCell = modelBuilder.hyperlink().withProperties<azdata.HyperlinkComponentProperties>({
|
||||
label: viewText,
|
||||
url: instanceStatus.dashboards.logsUrl,
|
||||
title: instanceStatus.dashboards.logsUrl,
|
||||
CSSStyles: { ...cssStyles.text, ...cssStyles.hyperlink }
|
||||
})
|
||||
.component();
|
||||
metricsAndLogsRow.addItem(logsCell, { CSSStyles: { 'width': `${metricsAndLogsLogsColumnWidth}px`, 'min-width': `${metricsAndLogsLogsColumnWidth}px` } });
|
||||
private createHealthStatusRow(instanceStatus: InstanceStatusModel): any[] {
|
||||
const statusIconCell = this.modelView.modelBuilder.text()
|
||||
.withProperties<azdata.TextComponentProperties>({
|
||||
value: getHealthStatusIcon(instanceStatus.healthStatus),
|
||||
ariaRole: 'img',
|
||||
title: getHealthStatusDisplayText(instanceStatus.healthStatus),
|
||||
CSSStyles: { 'user-select': 'none', ...cssStyles.text }
|
||||
}).component();
|
||||
|
||||
const viewDetailsButton = instanceStatus.healthStatus !== 'healthy' && instanceStatus.details && instanceStatus.details.length > 0 ? createViewDetailsButton(this.modelView.modelBuilder, instanceStatus.details) : undefined;
|
||||
return [
|
||||
statusIconCell,
|
||||
instanceStatus.instanceName,
|
||||
getStateDisplayText(instanceStatus.state),
|
||||
getHealthStatusDisplayText(instanceStatus.healthStatus),
|
||||
viewDetailsButton];
|
||||
}
|
||||
|
||||
return metricsAndLogsRow;
|
||||
private getLastUpdatedText(): string {
|
||||
return localize('bdc.dashboard.lastUpdated', "Last Updated : {0}",
|
||||
this.model.bdcStatusLastUpdated ?
|
||||
`${this.model.bdcStatusLastUpdated.toLocaleDateString()} ${this.model.bdcStatusLastUpdated.toLocaleTimeString()}`
|
||||
: '-');
|
||||
}
|
||||
}
|
||||
|
||||
@@ -16,7 +16,7 @@ type ServiceTab = { div: azdata.DivContainer, dot: azdata.TextComponent, text: a
|
||||
export class BdcServiceStatusPage extends BdcDashboardPage {
|
||||
|
||||
private currentTab: { tab: ServiceTab, index: number };
|
||||
private currentTabPage: azdata.FlexContainer;
|
||||
private currentTabPage: BdcDashboardResourceStatusPage;
|
||||
private rootContainer: azdata.FlexContainer;
|
||||
private resourceHeader: azdata.FlexContainer;
|
||||
|
||||
@@ -25,10 +25,13 @@ export class BdcServiceStatusPage extends BdcDashboardPage {
|
||||
constructor(private serviceName: string, private model: BdcDashboardModel, private modelView: azdata.ModelView) {
|
||||
super();
|
||||
this.model.onDidUpdateBdcStatus(bdcStatus => this.eventuallyRunOnInitialized(() => this.handleBdcStatusUpdate(bdcStatus)));
|
||||
this.createPage();
|
||||
}
|
||||
|
||||
public get container(): azdata.FlexContainer {
|
||||
// Lazily create the container only when needed
|
||||
if (!this.rootContainer) {
|
||||
this.createPage();
|
||||
}
|
||||
return this.rootContainer;
|
||||
}
|
||||
|
||||
@@ -67,11 +70,11 @@ export class BdcServiceStatusPage extends BdcDashboardPage {
|
||||
}
|
||||
}
|
||||
|
||||
private changeSelectedTabPage(newPage: azdata.FlexContainer): void {
|
||||
private changeSelectedTabPage(newPage: BdcDashboardResourceStatusPage): void {
|
||||
if (this.currentTabPage) {
|
||||
this.rootContainer.removeItem(this.currentTabPage);
|
||||
this.rootContainer.removeItem(this.currentTabPage.container);
|
||||
}
|
||||
this.rootContainer.addItem(newPage);
|
||||
this.rootContainer.addItem(newPage.container);
|
||||
this.currentTabPage = newPage;
|
||||
}
|
||||
|
||||
@@ -90,7 +93,7 @@ export class BdcServiceStatusPage extends BdcDashboardPage {
|
||||
const currentIndex = tabIndex++;
|
||||
const resourceHeaderTab = createResourceHeaderTab(this.modelView.modelBuilder, resource);
|
||||
this.createdTabs.set(resource.resourceName, resourceHeaderTab);
|
||||
const resourceStatusPage: azdata.FlexContainer = new BdcDashboardResourceStatusPage(this.model, this.modelView, this.serviceName, resource.resourceName).container;
|
||||
const resourceStatusPage = new BdcDashboardResourceStatusPage(this.model, this.modelView, this.serviceName, resource.resourceName);
|
||||
resourceHeaderTab.div.onDidClick(() => {
|
||||
// Don't need to do anything if this is already the currently selected tab
|
||||
if (this.currentTab.index === currentIndex) {
|
||||
|
||||
Reference in New Issue
Block a user