diff --git a/extensions/big-data-cluster/src/bigDataCluster/constants.ts b/extensions/big-data-cluster/src/bigDataCluster/constants.ts index ccd93cc50f..069d712959 100644 --- a/extensions/big-data-cluster/src/bigDataCluster/constants.ts +++ b/extensions/big-data-cluster/src/bigDataCluster/constants.ts @@ -57,3 +57,12 @@ 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 selectedResourceHeaderTab = { 'font-weight': 'bold', 'color': '' }; + export const unselectedResourceHeaderTab = { 'font-weight': '', 'color': '#0078d4' }; + export const selectedTabDiv = { 'border-bottom': '2px solid #000' }; + export const unselectedTabDiv = { 'border-bottom': '1px solid #ccc' }; +} diff --git a/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardOverviewPage.ts b/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardOverviewPage.ts index 4fa2f2b3d8..9520e940cd 100644 --- a/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardOverviewPage.ts +++ b/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardOverviewPage.ts @@ -9,20 +9,20 @@ import * as azdata from 'azdata'; import * as vscode from 'vscode'; import * as nls from 'vscode-nls'; import { BdcDashboardModel } from './bdcDashboardModel'; -import { IconPathHelper } from '../constants'; +import { IconPathHelper, cssStyles } from '../constants'; import { getStateDisplayText, getHealthStatusDisplayText, getEndpointDisplayText, getHealthStatusIcon, getServiceNameDisplayText, Endpoint } from '../utils'; import { EndpointModel, ServiceStatusModel, BdcStatusModel } from '../controller/apiGenerated'; import { BdcDashboard } from './bdcDashboard'; const localize = nls.loadMessageBundle(); -const overviewIconColumnWidth = '50px'; -const overviewServiceNameCellWidth = '100px'; -const overviewStateCellWidth = '75px'; -const overviewHealthStatusCellWidth = '100px'; +const overviewIconColumnWidthPx = 25; +const overviewServiceNameCellWidthPx = 175; +const overviewStateCellWidthPx = 75; +const overviewHealthStatusCellWidthPx = 100; -const serviceEndpointRowServiceNameCellWidth = '175px'; -const serviceEndpointRowEndpointCellWidth = '350px'; +const serviceEndpointRowServiceNameCellWidth = 200; +const serviceEndpointRowEndpointCellWidth = 350; const hyperlinkedEndpoints = [Endpoint.metricsui, Endpoint.logsui, Endpoint.sparkHistory, Endpoint.yarnUi]; @@ -61,7 +61,7 @@ export class BdcDashboardOverviewPage { const propertiesLabel = view.modelBuilder.text() .withProperties({ value: localize('bdc.dashboard.propertiesHeader', "Cluster Properties"), CSSStyles: { 'margin-block-start': '0px', 'margin-block-end': '10px' } }) .component(); - rootContainer.addItem(propertiesLabel, { CSSStyles: { 'margin-top': '15px', 'font-size': '20px', 'font-weight': 'bold', 'padding-left': '10px' } }); + rootContainer.addItem(propertiesLabel, { CSSStyles: { 'margin-top': '15px', 'padding-left': '10px', ...cssStyles.title } }); // Row 1 const row1 = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'row', height: '30px', alignItems: 'center' }).component(); @@ -96,12 +96,12 @@ export class BdcDashboardOverviewPage { }) .component(); - overviewHeaderContainer.addItem(overviewLabel, { CSSStyles: { 'font-size': '20px', 'font-weight': 'bold' } }); + overviewHeaderContainer.addItem(overviewLabel, { CSSStyles: { ...cssStyles.title } }); this.lastUpdatedLabel = view.modelBuilder.text() .withProperties({ value: localize('bdc.dashboard.lastUpdated', "Last Updated : {0}", '-'), - CSSStyles: { 'margin-block-start': '0px', 'margin-block-end': '0px', 'color': 'lightgray' } + CSSStyles: { 'margin-block-start': '0px', 'margin-block-end': '0px', 'color': '#595959' } }).component(); overviewHeaderContainer.addItem(this.lastUpdatedLabel, { CSSStyles: { 'margin-left': '45px' } }); @@ -110,14 +110,13 @@ export class BdcDashboardOverviewPage { // Service Status header row const serviceStatusHeaderRow = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'row' }).component(); - const serviceStatusIconHeader = view.modelBuilder.text().component(); - serviceStatusHeaderRow.addItem(serviceStatusIconHeader, { CSSStyles: { 'width': overviewIconColumnWidth, 'min-width': overviewIconColumnWidth } }); const nameCell = view.modelBuilder.text().withProperties({ value: localize('bdc.dashboard.serviceNameHeader', "Service Name") }).component(); - serviceStatusHeaderRow.addItem(nameCell, { CSSStyles: { 'width': overviewServiceNameCellWidth, 'min-width': overviewServiceNameCellWidth, 'font-weight': 'bold', 'user-select': 'text' } }); - const stateCell = view.modelBuilder.text().withProperties({ value: localize('bdc.dashboard.stateHeader', "State"), CSSStyles: { 'text-align': 'center', 'font-weight': 'bold' } }).component(); - serviceStatusHeaderRow.addItem(stateCell, { CSSStyles: { 'width': overviewStateCellWidth, 'min-width': overviewStateCellWidth, 'user-select': 'text' } }); - const healthStatusCell = view.modelBuilder.text().withProperties({ value: localize('bdc.dashboard.healthStatusHeader', "Health Status"), CSSStyles: { 'text-align': 'center', 'font-weight': 'bold' } }).component(); - serviceStatusHeaderRow.addItem(healthStatusCell, { CSSStyles: { 'width': overviewHealthStatusCellWidth, 'min-width': overviewHealthStatusCellWidth, 'user-select': 'text' } }); + // 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({ value: localize('bdc.dashboard.stateHeader', "State"), CSSStyles: { ...cssStyles.tableHeader } }).component(); + serviceStatusHeaderRow.addItem(stateCell, { CSSStyles: { 'width': `${overviewStateCellWidthPx}px`, 'min-width': `${overviewStateCellWidthPx}px`, 'user-select': 'text' } }); + const healthStatusCell = view.modelBuilder.text().withProperties({ value: localize('bdc.dashboard.healthStatusHeader', "Health Status"), CSSStyles: { ...cssStyles.tableHeader } }).component(); + serviceStatusHeaderRow.addItem(healthStatusCell, { CSSStyles: { 'width': `${overviewHealthStatusCellWidthPx}px`, 'min-width': `${overviewHealthStatusCellWidthPx}px`, 'user-select': 'text' } }); overviewContainer.addItem(serviceStatusHeaderRow, { CSSStyles: { 'padding-left': '10px', 'box-sizing': 'border-box', 'user-select': 'text' } }); // Service Status row container @@ -140,16 +139,16 @@ export class BdcDashboardOverviewPage { const endpointsLabel = view.modelBuilder.text() .withProperties({ value: localize('bdc.dashboard.endpointsLabel', "Service Endpoints"), CSSStyles: { 'margin-block-start': '20px', 'margin-block-end': '0px' } }) .component(); - rootContainer.addItem(endpointsLabel, { CSSStyles: { 'font-size': '20px', 'font-weight': 'bold', 'padding-left': '10px' } }); + rootContainer.addItem(endpointsLabel, { CSSStyles: { 'padding-left': '10px', ...cssStyles.title } }); const endpointsContainer = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column', width: '100%', height: '100%', alignItems: 'left' }).component(); // Service endpoints header row const endpointsHeaderRow = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'row' }).component(); const endpointsServiceNameHeaderCell = view.modelBuilder.text().withProperties({ value: localize('bdc.dashboard.serviceHeader', "Service") }).component(); - endpointsHeaderRow.addItem(endpointsServiceNameHeaderCell, { CSSStyles: { 'width': serviceEndpointRowServiceNameCellWidth, 'min-width': serviceEndpointRowServiceNameCellWidth, 'font-weight': 'bold', 'user-select': 'text' } }); + endpointsHeaderRow.addItem(endpointsServiceNameHeaderCell, { CSSStyles: { 'width': `${serviceEndpointRowServiceNameCellWidth}px`, 'min-width': `${serviceEndpointRowServiceNameCellWidth}px`, ...cssStyles.tableHeader } }); const endpointsEndpointHeaderCell = view.modelBuilder.text().withProperties({ value: localize('bdc.dashboard.endpointHeader', "Endpoint") }).component(); - endpointsHeaderRow.addItem(endpointsEndpointHeaderCell, { CSSStyles: { 'width': serviceEndpointRowEndpointCellWidth, 'min-width': serviceEndpointRowEndpointCellWidth, 'font-weight': 'bold', 'user-select': 'text' } }); + 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.endpointsRowContainer = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column' }).component(); @@ -211,16 +210,16 @@ export class BdcDashboardOverviewPage { 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({ value: getHealthStatusIcon(serviceStatus.healthStatus), CSSStyles: { 'user-select': 'none' } }).component(); - serviceStatusRow.addItem(statusIconCell, { CSSStyles: { 'width': overviewIconColumnWidth, 'min-width': overviewIconColumnWidth } }); + serviceStatusRow.addItem(statusIconCell, { CSSStyles: { 'width': `${overviewIconColumnWidthPx}px`, 'min-width': `${overviewIconColumnWidthPx}px` } }); const nameCell = this.modelBuilder.text().withProperties({ value: getServiceNameDisplayText(serviceStatus.serviceName), CSSStyles: { 'margin-block-start': '0px', 'margin-block-end': '0px', 'color': '#0078d4', 'text-decoration': 'underline', 'cursor': 'pointer' } }).component(); nameCell.onDidClick(() => { this.dashboard.switchToServiceTab(serviceStatus.serviceName); }); - serviceStatusRow.addItem(nameCell, { CSSStyles: { 'width': overviewServiceNameCellWidth, 'min-width': overviewServiceNameCellWidth, 'user-select': 'text', 'margin-block-start': '0px', 'margin-block-end': '0px' } }); - const stateCell = this.modelBuilder.text().withProperties({ value: getStateDisplayText(serviceStatus.state), CSSStyles: { 'margin-block-start': '0px', 'margin-block-end': '0px', 'user-select': 'text', 'text-align': 'center' } }).component(); - serviceStatusRow.addItem(stateCell, { CSSStyles: { 'width': overviewStateCellWidth, 'min-width': overviewStateCellWidth } }); - const healthStatusCell = this.modelBuilder.text().withProperties({ value: getHealthStatusDisplayText(serviceStatus.healthStatus), CSSStyles: { 'margin-block-start': '0px', 'margin-block-end': '0px', 'user-select': 'text', 'text-align': 'center' } }).component(); - serviceStatusRow.addItem(healthStatusCell, { CSSStyles: { 'width': overviewHealthStatusCellWidth, 'min-width': overviewHealthStatusCellWidth } }); + serviceStatusRow.addItem(nameCell, { CSSStyles: { 'width': `${overviewServiceNameCellWidthPx}px`, 'min-width': `${overviewServiceNameCellWidthPx}px`, 'user-select': 'text', 'margin-block-start': '0px', 'margin-block-end': '0px' } }); + const stateCell = this.modelBuilder.text().withProperties({ value: getStateDisplayText(serviceStatus.state), CSSStyles: { 'margin-block-start': '0px', 'margin-block-end': '0px', 'user-select': 'text' } }).component(); + serviceStatusRow.addItem(stateCell, { CSSStyles: { 'width': `${overviewStateCellWidthPx}px`, 'min-width': `${overviewStateCellWidthPx}px` } }); + const healthStatusCell = this.modelBuilder.text().withProperties({ value: getHealthStatusDisplayText(serviceStatus.healthStatus), CSSStyles: { 'margin-block-start': '0px', 'margin-block-end': '0px', 'user-select': 'text' } }).component(); + serviceStatusRow.addItem(healthStatusCell, { CSSStyles: { 'width': `${overviewHealthStatusCellWidthPx}px`, 'min-width': `${overviewHealthStatusCellWidthPx}px` } }); if (serviceStatus.healthStatus !== 'healthy' && serviceStatus.details && serviceStatus.details.length > 0) { const viewDetailsButton = this.modelBuilder.button().withProperties({ label: localize('bdc.dashboard.viewDetails', "View Details") }).component(); @@ -237,12 +236,12 @@ export class BdcDashboardOverviewPage { 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: { 'margin-block-start': '0px', 'margin-block-end': '0px' } }).component(); - endPointRow.addItem(nameCell, { CSSStyles: { 'width': serviceEndpointRowServiceNameCellWidth, 'min-width': serviceEndpointRowServiceNameCellWidth, 'user-select': 'text', 'text-align': 'center' } }); + endPointRow.addItem(nameCell, { CSSStyles: { 'width': `${serviceEndpointRowServiceNameCellWidth}px`, 'min-width': `${serviceEndpointRowServiceNameCellWidth}px`, 'user-select': 'text', 'text-align': 'center' } }); if (isHyperlink) { const endpointCell = modelBuilder.hyperlink() .withProperties({ label: endpoint.endpoint, url: endpoint.endpoint, CSSStyles: { 'height': '15px' } }) .component(); - endPointRow.addItem(endpointCell, { CSSStyles: { 'width': serviceEndpointRowEndpointCellWidth, 'min-width': serviceEndpointRowEndpointCellWidth, 'color': '#0078d4', 'text-decoration': 'underline', 'overflow': 'hidden', 'padding-left': '10px' } }); + endPointRow.addItem(endpointCell, { CSSStyles: { 'width': `${serviceEndpointRowEndpointCellWidth}px`, 'min-width': `${serviceEndpointRowEndpointCellWidth}px`, 'color': '#0078d4', 'text-decoration': 'underline', 'overflow': 'hidden' } }); } else if (endpoint.name === Endpoint.sqlServerMaster) { const endpointCell = modelBuilder.text() @@ -261,13 +260,13 @@ function createServiceEndpointRow(modelBuilder: azdata.ModelBuilder, container: azdata.connection.openConnectionDialog(undefined, connProfile); } }); - endPointRow.addItem(endpointCell, { CSSStyles: { 'width': serviceEndpointRowEndpointCellWidth, 'min-width': serviceEndpointRowEndpointCellWidth, 'overflow': 'hidden', 'padding-left': '10px' } }); + endPointRow.addItem(endpointCell, { CSSStyles: { 'width': `${serviceEndpointRowEndpointCellWidth}px`, 'min-width': `${serviceEndpointRowEndpointCellWidth}px`, 'overflow': 'hidden' } }); } else { const endpointCell = modelBuilder.text() .withProperties({ value: endpoint.endpoint, CSSStyles: { 'margin-block-start': '0px', 'margin-block-end': '0px', 'user-select': 'text' } }) .component(); - endPointRow.addItem(endpointCell, { CSSStyles: { 'width': serviceEndpointRowEndpointCellWidth, 'min-width': serviceEndpointRowEndpointCellWidth, 'overflow': 'hidden', 'padding-left': '10px' } }); + endPointRow.addItem(endpointCell, { CSSStyles: { 'width': `${serviceEndpointRowEndpointCellWidth}px`, 'min-width': `${serviceEndpointRowEndpointCellWidth}px`, 'overflow': 'hidden' } }); } const copyValueCell = modelBuilder.button().component(); copyValueCell.iconPath = IconPathHelper.copy; diff --git a/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardResourceStatusPage.ts b/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardResourceStatusPage.ts index dd6a7a9e6c..3a71716b2c 100644 --- a/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardResourceStatusPage.ts +++ b/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardResourceStatusPage.ts @@ -10,6 +10,7 @@ import * as nls from 'vscode-nls'; import { BdcDashboardModel } from './bdcDashboardModel'; import { BdcStatusModel, InstanceStatusModel } from '../controller/apiGenerated'; import { getHealthStatusDisplayText, getHealthStatusIcon, getStateDisplayText } from '../utils'; +import { cssStyles } from '../constants'; const localize = nls.loadMessageBundle(); @@ -24,14 +25,14 @@ export interface IInstanceStatus { healthStatus: string; } -const healthAndStatusIconColumnWidth = '50px'; -const healthAndStatusInstanceNameColumnWidth = '100px'; -const healthAndStatusStateColumnWidth = '75px'; -const healthAndStatusHealthColumnWidth = '75px'; +const healthAndStatusIconColumnWidth = 25; +const healthAndStatusInstanceNameColumnWidth = 100; +const healthAndStatusStateColumnWidth = 75; +const healthAndStatusHealthColumnWidth = 75; -const metricsAndLogsInstanceNameColumnWidth = '100px'; -const metricsAndLogsMetricsColumnWidth = '75px'; -const metricsAndLogsLogsColumnWidth = '75px'; +const metricsAndLogsInstanceNameColumnWidth = 125; +const metricsAndLogsMetricsColumnWidth = 75; +const metricsAndLogsLogsColumnWidth = 75; export class BdcDashboardResourceStatusPage { @@ -75,30 +76,26 @@ export class BdcDashboardResourceStatusPage { }) .component(); - healthStatusHeaderContainer.addItem(healthStatusHeaderLabel, { CSSStyles: { 'font-size': '20px', 'font-weight': 'bold' } }); + healthStatusHeaderContainer.addItem(healthStatusHeaderLabel, { CSSStyles: { ...cssStyles.title } }); // Last updated label this.lastUpdatedLabel = view.modelBuilder.text() .withProperties({ value: localize('bdc.dashboard.lastUpdated', "Last Updated : {0}", '-'), - CSSStyles: { 'margin-block-start': '0px', 'margin-block-end': '0px', 'color': 'lightgray' } + CSSStyles: { 'margin-block-start': '0px', 'margin-block-end': '0px', 'color': '#595959' } }).component(); healthStatusHeaderContainer.addItem(this.lastUpdatedLabel, { CSSStyles: { 'margin-left': '45px' } }); - - healthStatusHeaderContainer.addItem(healthStatusHeaderLabel, { CSSStyles: { 'font-size': '20px', 'font-weight': 'bold' } }); - // Header row const instanceHealthStatusHeaderRow = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'row' }).component(); - const instanceHealthAndStatusIconHeader = view.modelBuilder.text().component(); - instanceHealthStatusHeaderRow.addItem(instanceHealthAndStatusIconHeader, { CSSStyles: { 'width': healthAndStatusIconColumnWidth, 'min-width': healthAndStatusIconColumnWidth, 'font-weight': 'bold', 'user-select': 'text' } }); const instanceHealthAndStatusNameHeader = view.modelBuilder.text().withProperties({ value: localize('bdc.dashboard.instanceHeader', "Instance") }).component(); - instanceHealthStatusHeaderRow.addItem(instanceHealthAndStatusNameHeader, { CSSStyles: { 'width': healthAndStatusInstanceNameColumnWidth, 'min-width': healthAndStatusInstanceNameColumnWidth, 'font-weight': 'bold', 'user-select': 'text' } }); + // 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({ value: localize('bdc.dashboard.stateHeader', "State") }).component(); - instanceHealthStatusHeaderRow.addItem(instanceHealthAndStatusState, { CSSStyles: { 'width': healthAndStatusStateColumnWidth, 'min-width': healthAndStatusStateColumnWidth, 'font-weight': 'bold', 'user-select': 'text' } }); + instanceHealthStatusHeaderRow.addItem(instanceHealthAndStatusState, { CSSStyles: { 'width': `${healthAndStatusStateColumnWidth}px`, 'min-width': `${healthAndStatusStateColumnWidth}px`, ...cssStyles.tableHeader } }); const instanceHealthAndStatusHealthStatus = view.modelBuilder.text().withProperties({ value: localize('bdc.dashboard.healthStatusHeader', "Health Status") }).component(); - instanceHealthStatusHeaderRow.addItem(instanceHealthAndStatusHealthStatus, { CSSStyles: { 'width': healthAndStatusHealthColumnWidth, 'min-width': healthAndStatusHealthColumnWidth, 'font-weight': 'bold', 'user-select': 'text' } }); + 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', 'user-select': 'text' } }); this.instanceHealthStatusRowsContainer = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column' }).component(); @@ -112,16 +109,16 @@ export class BdcDashboardResourceStatusPage { const endpointsLabel = view.modelBuilder.text() .withProperties({ value: localize('bdc.dashboard.metricsAndLogsLabel', "Metrics and Logs"), CSSStyles: { 'margin-block-start': '20px', 'margin-block-end': '0px' } }) .component(); - rootContainer.addItem(endpointsLabel, { CSSStyles: { 'font-size': '20px', 'font-weight': 'bold', 'padding-left': '10px' } }); + rootContainer.addItem(endpointsLabel, { CSSStyles: { 'padding-left': '10px', ...cssStyles.title } }); // Header row const metricsAndLogsHeaderRow = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'row' }).component(); const nameCell = view.modelBuilder.text().withProperties({ value: localize('bdc.dashboard.instanceHeader', "Instance") }).component(); - metricsAndLogsHeaderRow.addItem(nameCell, { CSSStyles: { 'width': metricsAndLogsInstanceNameColumnWidth, 'min-width': metricsAndLogsInstanceNameColumnWidth, 'font-weight': 'bold', 'user-select': 'text' } }); + metricsAndLogsHeaderRow.addItem(nameCell, { CSSStyles: { 'width': `${metricsAndLogsInstanceNameColumnWidth}px`, 'min-width': `${metricsAndLogsInstanceNameColumnWidth}px`, ...cssStyles.tableHeader } }); const metricsCell = view.modelBuilder.text().withProperties({ value: localize('bdc.dashboard.metricsHeader', "Metrics") }).component(); - metricsAndLogsHeaderRow.addItem(metricsCell, { CSSStyles: { 'width': metricsAndLogsMetricsColumnWidth, 'min-width': metricsAndLogsMetricsColumnWidth, 'font-weight': 'bold', 'user-select': 'text' } }); + metricsAndLogsHeaderRow.addItem(metricsCell, { CSSStyles: { 'width': `${metricsAndLogsMetricsColumnWidth}px`, 'min-width': `${metricsAndLogsMetricsColumnWidth}px`, ...cssStyles.tableHeader } }); const healthStatusCell = view.modelBuilder.text().withProperties({ value: localize('bdc.dashboard.logsHeader', "Logs") }).component(); - metricsAndLogsHeaderRow.addItem(healthStatusCell, { CSSStyles: { 'width': metricsAndLogsLogsColumnWidth, 'min-width': metricsAndLogsLogsColumnWidth, 'font-weight': 'bold', 'user-select': 'text' } }); + 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', 'user-select': 'text' } }); this.metricsAndLogsRowsContainer = view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column' }).component(); @@ -173,13 +170,13 @@ function createInstanceHealthStatusRow(modelBuilder: azdata.ModelBuilder, instan value: getHealthStatusIcon(instanceStatus.healthStatus), CSSStyles: { 'user-select': 'none' } }).component(); - instanceHealthStatusRow.addItem(statusIconCell, { CSSStyles: { 'width': healthAndStatusIconColumnWidth, 'min-width': healthAndStatusIconColumnWidth } }); + instanceHealthStatusRow.addItem(statusIconCell, { CSSStyles: { 'width': `${healthAndStatusIconColumnWidth}px`, 'min-width': `${healthAndStatusIconColumnWidth}px` } }); const nameCell = modelBuilder.text().withProperties({ value: instanceStatus.instanceName, CSSStyles: { 'margin-block-start': '0px', 'margin-block-end': '0px' } }).component(); - instanceHealthStatusRow.addItem(nameCell, { CSSStyles: { 'width': healthAndStatusInstanceNameColumnWidth, 'min-width': healthAndStatusInstanceNameColumnWidth, 'user-select': 'text', 'margin-block-start': '0px', 'margin-block-end': '0px' } }); + instanceHealthStatusRow.addItem(nameCell, { CSSStyles: { 'width': `${healthAndStatusInstanceNameColumnWidth}px`, 'min-width': `${healthAndStatusInstanceNameColumnWidth}px`, 'user-select': 'text', 'margin-block-start': '0px', 'margin-block-end': '0px' } }); const stateCell = modelBuilder.text().withProperties({ value: getStateDisplayText(instanceStatus.state), CSSStyles: { 'margin-block-start': '0px', 'margin-block-end': '0px', 'user-select': 'text' } }).component(); - instanceHealthStatusRow.addItem(stateCell, { CSSStyles: { 'width': healthAndStatusStateColumnWidth, 'min-width': healthAndStatusStateColumnWidth } }); + instanceHealthStatusRow.addItem(stateCell, { CSSStyles: { 'width': `${healthAndStatusStateColumnWidth}px`, 'min-width': `${healthAndStatusStateColumnWidth}px` } }); const healthStatusCell = modelBuilder.text().withProperties({ value: getHealthStatusDisplayText(instanceStatus.healthStatus), CSSStyles: { 'margin-block-start': '0px', 'margin-block-end': '0px', 'user-select': 'text' } }).component(); - instanceHealthStatusRow.addItem(healthStatusCell, { CSSStyles: { 'width': healthAndStatusHealthColumnWidth, 'min-width': healthAndStatusHealthColumnWidth } }); + instanceHealthStatusRow.addItem(healthStatusCell, { CSSStyles: { 'width': `${healthAndStatusHealthColumnWidth}px`, 'min-width': `${healthAndStatusHealthColumnWidth}px` } }); if (instanceStatus.healthStatus !== 'healthy' && instanceStatus.details && instanceStatus.details.length > 0) { const viewDetailsButton = modelBuilder.button().withProperties({ label: localize('bdc.dashboard.viewDetails', "View Details") }).component(); @@ -199,11 +196,11 @@ function createInstanceHealthStatusRow(modelBuilder: azdata.ModelBuilder, instan function createMetricsAndLogsRow(modelBuilder: azdata.ModelBuilder, instanceStatus: InstanceStatusModel): azdata.FlexContainer { const metricsAndLogsRow = modelBuilder.flexContainer().withLayout({ flexFlow: 'row', alignItems: 'center', height: '30px' }).component(); const nameCell = modelBuilder.text().withProperties({ value: instanceStatus.instanceName, CSSStyles: { 'margin-block-start': '0px', 'margin-block-end': '0px' } }).component(); - metricsAndLogsRow.addItem(nameCell, { CSSStyles: { 'width': '100px', 'min-width': '100px', 'user-select': 'text', 'margin-block-start': '0px', 'margin-block-end': '0px' } }); + metricsAndLogsRow.addItem(nameCell, { CSSStyles: { 'width': `${metricsAndLogsInstanceNameColumnWidth}px`, 'min-width': `${metricsAndLogsInstanceNameColumnWidth}px`, 'user-select': 'text', 'margin-block-start': '0px', 'margin-block-end': '0px' } }); const metricsCell = modelBuilder.hyperlink().withProperties({ label: localize('bdc.dashboard.viewHyperlink', "View"), url: instanceStatus.dashboards.nodeMetricsUrl, CSSStyles: { 'margin-block-start': '0px', 'margin-block-end': '0px', 'user-select': 'text', 'color': '#0078d4', 'text-decoration': 'underline' } }).component(); - metricsAndLogsRow.addItem(metricsCell, { CSSStyles: { 'width': '75px', 'min-width': '75px' } }); + metricsAndLogsRow.addItem(metricsCell, { CSSStyles: { 'width': `${metricsAndLogsMetricsColumnWidth}px`, 'min-width': `${metricsAndLogsMetricsColumnWidth}px` } }); const logsCell = modelBuilder.hyperlink().withProperties({ label: localize('bdc.dashboard.viewHyperlink', "View"), url: instanceStatus.dashboards.logsUrl, CSSStyles: { 'margin-block-start': '0px', 'margin-block-end': '0px', 'user-select': 'text', 'color': '#0078d4', 'text-decoration': 'underline' } }).component(); - metricsAndLogsRow.addItem(logsCell, { CSSStyles: { 'width': '75px', 'min-width': '75px' } }); + metricsAndLogsRow.addItem(logsCell, { CSSStyles: { 'width': `${metricsAndLogsLogsColumnWidth}px`, 'min-width': `${metricsAndLogsLogsColumnWidth}px` } }); return metricsAndLogsRow; } diff --git a/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcServiceStatusPage.ts b/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcServiceStatusPage.ts index 139cfb7a37..1d793e7271 100644 --- a/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcServiceStatusPage.ts +++ b/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcServiceStatusPage.ts @@ -9,16 +9,14 @@ import { BdcStatusModel, ResourceStatusModel } from '../controller/apiGenerated' import { BdcDashboardResourceStatusPage } from './bdcDashboardResourceStatusPage'; import { BdcDashboardModel } from './bdcDashboardModel'; import { getHealthStatusDot } from '../utils'; - -const selectedTabCss = { 'font-weight': 'bold' }; -const unselectedTabCss = { 'font-weight': '' }; +import { cssStyles } from '../constants'; export class BdcServiceStatusPage { private initialized: boolean = false; private resourceTabsCreated: boolean = false; - private currentTabText: azdata.TextComponent; + private currentTab: { div: azdata.DivContainer, text: azdata.TextComponent, index: number }; private currentTabPage: azdata.FlexContainer; private rootContainer: azdata.FlexContainer; private resourceHeader: azdata.FlexContainer; @@ -79,23 +77,39 @@ export class BdcServiceStatusPage { */ private createResourceNavTabs(resources: ResourceStatusModel[]) { if (this.initialized && !this.resourceTabsCreated) { + let tabIndex = 0; resources.forEach(resource => { + const currentIndex = tabIndex++; const resourceHeaderTab = createResourceHeaderTab(this.modelView.modelBuilder, resource); const resourceStatusPage: azdata.FlexContainer = new BdcDashboardResourceStatusPage(this.model, this.modelView, this.serviceName, resource.resourceName).container; resourceHeaderTab.div.onDidClick(() => { - if (this.currentTabText) { - this.currentTabText.updateCssStyles(unselectedTabCss); + // 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.text.updateCssStyles(cssStyles.unselectedResourceHeaderTab); + this.resourceHeader.removeItem(this.currentTab.div); + this.resourceHeader.insertItem(this.currentTab.div, this.currentTab.index, { flex: '0 0 auto', CSSStyles: cssStyles.unselectedTabDiv }); } this.changeSelectedTabPage(resourceStatusPage); - this.currentTabText = resourceHeaderTab.text; - this.currentTabText.updateCssStyles(selectedTabCss); + 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.currentTabText = resourceHeaderTab.text; - this.currentTabText.updateCssStyles(selectedTabCss); + this.currentTab = { ...resourceHeaderTab, index: currentIndex }; + this.currentTab.text.updateCssStyles(cssStyles.selectedResourceHeaderTab); + this.resourceHeader.addItem(resourceHeaderTab.div, { flex: '0 0 auto', CSSStyles: cssStyles.selectedTabDiv }); } - this.resourceHeader.addItem(resourceHeaderTab.div, { flex: '0 0 auto', CSSStyles: { 'border-bottom': 'solid #ccc' } }); + else { + resourceHeaderTab.text.updateCssStyles(cssStyles.unselectedResourceHeaderTab); + this.resourceHeader.addItem(resourceHeaderTab.div, { flex: '0 0 auto', CSSStyles: cssStyles.unselectedTabDiv }); + } + }); this.resourceTabsCreated = true; } diff --git a/scripts/sql.bat b/scripts/sql.bat index 5cffe2323d..8b72fab859 100644 --- a/scripts/sql.bat +++ b/scripts/sql.bat @@ -36,7 +36,7 @@ set ELECTRON_ENABLE_STACK_DUMPING=1 :: Use the following to get v8 tracing: :: %CODE% --js-flags="--trace-hydrogen --trace-phase=Z --trace-deopt --code-comments --hydrogen-track-positions --redirect-code-traces" . %* -%CODE% . %* +%CODE% . %* --remote-debugging-port=9222 --inspect=5875 popd diff --git a/src/sql/workbench/api/common/extHostModelView.ts b/src/sql/workbench/api/common/extHostModelView.ts index 5b8c3e7d84..721cddf2ac 100644 --- a/src/sql/workbench/api/common/extHostModelView.ts +++ b/src/sql/workbench/api/common/extHostModelView.ts @@ -593,15 +593,15 @@ class ComponentWrapper implements azdata.Component { public addItem(item: azdata.Component, itemLayout?: any, index?: number): void { let itemImpl = item as ComponentWrapper; if (!itemImpl) { - throw new Error(nls.localize('unknownComponentType', "Unkown component type. Must use ModelBuilder to create objects")); + throw new Error(nls.localize('unknownComponentType', "Unknown component type. Must use ModelBuilder to create objects")); } let config = new InternalItemConfig(itemImpl, itemLayout); - if (index !== undefined && index >= 0 && index < this.items.length) { + if (index !== undefined && index >= 0 && index <= this.items.length) { this.itemConfigs.splice(index, 0, config); } else if (!index) { this.itemConfigs.push(config); } else { - throw new Error(nls.localize('invalidIndex', "The index is invalid.")); + throw new Error(nls.localize('invalidIndex', "The index {0} is invalid.", index)); } this._proxy.$addToContainer(this._handle, this.id, config.toIItemConfig(), index).then(undefined, (err) => this.handleError(err)); } diff --git a/src/sql/workbench/browser/modelComponents/componentBase.ts b/src/sql/workbench/browser/modelComponents/componentBase.ts index 2dc476a134..9aac5484cb 100644 --- a/src/sql/workbench/browser/modelComponents/componentBase.ts +++ b/src/sql/workbench/browser/modelComponents/componentBase.ts @@ -266,12 +266,12 @@ export abstract class ContainerBase extends ComponentBase { if (this.items.some(item => item.descriptor.id === componentDescriptor.id && item.descriptor.type === componentDescriptor.type)) { return; } - if (index !== undefined && index !== null && index >= 0 && index < this.items.length) { + if (index !== undefined && index !== null && index >= 0 && index <= this.items.length) { this.items.splice(index, 0, new ItemDescriptor(componentDescriptor, config)); } else if (!index) { this.items.push(new ItemDescriptor(componentDescriptor, config)); } else { - throw new Error(nls.localize('invalidIndex', "The index is invalid.")); + throw new Error(nls.localize('invalidIndex', "The index {0} is invalid.", index)); } this.modelStore.eventuallyRunOnComponent(componentDescriptor.id, component => component.registerEventHandler(event => { if (event.eventType === ComponentEventType.validityChanged) {