From c5d427ebb1db35d2098f00b59f8a5b290ad36f0c Mon Sep 17 00:00:00 2001 From: Charles Gagnon Date: Thu, 24 Oct 2019 18:31:57 -0700 Subject: [PATCH] Fix column text overflow on BDC status pages (#7928) * Fix column text overflow on status page * Fix typo * Fix another typo --- .../src/bigDataCluster/constants.ts | 1 + .../dialog/bdcDashboardOverviewPage.ts | 15 +++-- .../dialog/bdcDashboardResourceStatusPage.ts | 8 ++- .../src/bigDataCluster/utils.ts | 62 ++++++++++++------- extensions/mssql/src/localizedConstants.ts | 2 +- 5 files changed, 54 insertions(+), 34 deletions(-) diff --git a/extensions/big-data-cluster/src/bigDataCluster/constants.ts b/extensions/big-data-cluster/src/bigDataCluster/constants.ts index c960854e4e..0237a64a89 100644 --- a/extensions/big-data-cluster/src/bigDataCluster/constants.ts +++ b/extensions/big-data-cluster/src/bigDataCluster/constants.ts @@ -63,6 +63,7 @@ export namespace cssStyles { export const tableHeader = { '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' }; export const nonSelectableText = { ...cssStyles.text, 'user-select': 'none' }; export const tabHeaderText = { 'margin-block-start': '2px', 'margin-block-end': '0px', 'user-select': 'none' }; export const selectedResourceHeaderTab = { 'font-weight': 'bold', 'color': '' }; diff --git a/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardOverviewPage.ts b/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardOverviewPage.ts index ef11862b49..8519e974d0 100644 --- a/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardOverviewPage.ts +++ b/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardOverviewPage.ts @@ -17,12 +17,13 @@ import { createViewDetailsButton } from './commonControls'; const localize = nls.loadMessageBundle(); -const clusterStateColumnWidth = 125; +const clusterStateLabelColumnWidth = 100; +const clusterStateValueColumnWidth = 225; const healthStatusColumnWidth = 125; const overviewIconColumnWidthPx = 25; const overviewServiceNameCellWidthPx = 175; -const overviewStateCellWidthPx = 75; +const overviewStateCellWidthPx = 150; const overviewHealthStatusCellWidthPx = 100; const serviceEndpointRowServiceNameCellWidth = 200; @@ -75,8 +76,8 @@ export class BdcDashboardOverviewPage { const clusterStateLabel = view.modelBuilder.text().withProperties({ value: localize('bdc.dashboard.clusterState', "Cluster State :") }).component(); const clusterStateValue = view.modelBuilder.text().component(); this.clusterStateLoadingComponent = view.modelBuilder.loadingComponent().withItem(clusterStateValue).component(); - row1.addItem(clusterStateLabel, { CSSStyles: { 'width': `${clusterStateColumnWidth}px`, 'min-width': `${clusterStateColumnWidth}px`, 'user-select': 'none', 'font-weight': 'bold' } }); - row1.addItem(this.clusterStateLoadingComponent, { CSSStyles: { 'width': `${clusterStateColumnWidth}px`, 'min-width': `${clusterStateColumnWidth}px` } }); + row1.addItem(clusterStateLabel, { CSSStyles: { 'width': `${clusterStateLabelColumnWidth}px`, 'min-width': `${clusterStateLabelColumnWidth}px`, 'user-select': 'none', 'font-weight': 'bold' } }); + row1.addItem(this.clusterStateLoadingComponent, { CSSStyles: { 'width': `${clusterStateValueColumnWidth}px`, 'min-width': `${clusterStateValueColumnWidth}px` } }); // Health Status const healthStatusLabel = view.modelBuilder.text().withProperties({ value: localize('bdc.dashboard.healthStatus', "Health Status :") }).component(); @@ -233,9 +234,11 @@ export class BdcDashboardOverviewPage { this.dashboard.switchToServiceTab(serviceStatus.serviceName); }); serviceStatusRow.addItem(nameCell, { CSSStyles: { 'width': `${overviewServiceNameCellWidthPx}px`, 'min-width': `${overviewServiceNameCellWidthPx}px`, ...cssStyles.text } }); - const stateCell = this.modelBuilder.text().withProperties({ value: getStateDisplayText(serviceStatus.state), CSSStyles: { ...cssStyles.text } }).component(); + 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 healthStatusCell = this.modelBuilder.text().withProperties({ value: getHealthStatusDisplayText(serviceStatus.healthStatus), CSSStyles: { ...cssStyles.text } }).component(); + 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) { diff --git a/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardResourceStatusPage.ts b/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardResourceStatusPage.ts index a63ae7d5c5..24051e37e3 100644 --- a/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardResourceStatusPage.ts +++ b/extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardResourceStatusPage.ts @@ -28,7 +28,7 @@ export interface IInstanceStatus { const healthAndStatusIconColumnWidth = 25; const healthAndStatusInstanceNameColumnWidth = 100; -const healthAndStatusStateColumnWidth = 75; +const healthAndStatusStateColumnWidth = 150; const healthAndStatusHealthColumnWidth = 100; const metricsAndLogsInstanceNameColumnWidth = 125; @@ -175,9 +175,11 @@ function createInstanceHealthStatusRow(modelBuilder: azdata.ModelBuilder, instan 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 stateCell = modelBuilder.text().withProperties({ value: getStateDisplayText(instanceStatus.state), CSSStyles: { ...cssStyles.text } }).component(); + 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 healthStatusCell = modelBuilder.text().withProperties({ value: getHealthStatusDisplayText(instanceStatus.healthStatus), CSSStyles: { ...cssStyles.text } }).component(); + 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) { diff --git a/extensions/big-data-cluster/src/bigDataCluster/utils.ts b/extensions/big-data-cluster/src/bigDataCluster/utils.ts index 9e8c8a89a1..282107c341 100644 --- a/extensions/big-data-cluster/src/bigDataCluster/utils.ts +++ b/extensions/big-data-cluster/src/bigDataCluster/utils.ts @@ -71,36 +71,50 @@ export function showErrorMessage(error: any, prefixText?: string): void { } } +/** + * Mappings of the different expected state values to their localized friendly names. + * These are defined in aris/projects/controller/src/Microsoft.SqlServer.Controller/StateMachines + */ +const stateToDisplayTextMap = { + // K8sScaledSetStateMachine + 'creating': localize('state.creating', "Creating"), + 'waiting': localize('state.waiting', "Waiting"), + 'ready': localize('state.ready', "Ready"), + 'deleting': localize('state.deleting', "Deleting"), + 'deleted': localize('state.deleted', "Deleted"), + 'applyingupgrade': localize('state.applyingUpgrade', "Applying Upgrade"), + 'upgrading': localize('state.upgrading', "Upgrading"), + 'applyingmanagedupgrade': localize('state.applyingmanagedupgrade', "Applying Managed Upgrade"), + 'managedupgrading': localize('state.managedUpgrading', "Managed Upgrading"), + 'rollback': localize('state.rollback', "Rollback"), + 'rollbackinprogress': localize('state.rollbackInProgress', "Rollback In Progress"), + 'rollbackcomplete': localize('state.rollbackComplete', "Rollback Complete"), + 'error': localize('state.error', "Error"), + + // BigDataClusterStateMachine + 'creatingsecrets': localize('state.creatingSecrets', "Creating Secrets"), + 'waitingforsecrets': localize('state.waitingForSecrets', "Waiting For Secrets"), + 'creatinggroups': localize('state.creatingGroups', "Creating Groups"), + 'waitingforgroups': localize('state.waitingForGroups', "Waiting For Groups"), + 'creatingresources': localize('state.creatingResources', "Creating Resources"), + 'waitingforresources': localize('state.waitingForResources', "Waiting For Resources"), + 'creatingkerberosdelegationsetup': localize('state.creatingKerberosDelegationSetup', "Creating Kerberos Delegation Setup"), + 'waitingforkerberosdelegationsetup': localize('state.waitingForKerberosDelegationSetup', "Waiting For Kerberos Delegation Setup"), + 'waitingfordeletion': localize('state.waitingForDeletion', "Waiting For Deletion"), + 'waitingforupgrade': localize('state.waitingForUpgrade', "Waiting For Upgrade"), + 'upgradePaused': localize('state.upgradePaused', "Upgrade Paused"), + + // Other + 'running': localize('state.running', "Running"), +}; + /** * Gets the localized text to display for a corresponding state * @param state The state to get the display text for */ export function getStateDisplayText(state?: string): string { state = state || ''; - switch (state.toLowerCase()) { - case 'creating': - return localize('state.creating', "Creating"); - case 'waiting': - return localize('state.waiting', "Waiting"); - case 'ready': - return localize('state.ready', "Ready"); - case 'deleting': - return localize('state.deleting', "Deleting"); - case 'waitingfordeletion': - return localize('state.waitingForDeletion', "Waiting For Deletion"); - case 'deleted': - return localize('state.deleted', "Deleted"); - case 'upgrading': - return localize('state.upgrading', "Upgrading"); - case 'waitingforupgrade': - return localize('state.waitingForUpgrade', "Waiting For Upgrade"); - case 'error': - return localize('state.error', "Error"); - case 'running': - return localize('state.running', "Running"); - default: - return state; - } + return stateToDisplayTextMap[state.toLowerCase()] || state; } /** diff --git a/extensions/mssql/src/localizedConstants.ts b/extensions/mssql/src/localizedConstants.ts index b7b36303c6..08a49b7754 100644 --- a/extensions/mssql/src/localizedConstants.ts +++ b/extensions/mssql/src/localizedConstants.ts @@ -22,7 +22,7 @@ export const groupLabel = localize('mssql.groupLabel', "Group"); export const accessHeader = localize('mssql.accessHeader', "Access"); export const defaultHeader = localize('mssql.defaultHeader', "Default"); export const deleteTitle = localize('mssql.delete', "Delete"); -export const stickyLabel = localize('mssql.stickyHeader', "Sticky"); +export const stickyLabel = localize('mssql.stickyHeader', "Sticky Bit"); export const inheritDefaultsLabel = localize('mssql.inheritDefaultsLabel', "Inherit Defaults"); export const readHeader = localize('mssql.readHeader', "Read"); export const writeHeader = localize('mssql.writeHeader', "Write");