Fix column text overflow on BDC status pages (#7928)

* Fix column text overflow on status page

* Fix typo

* Fix another typo

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

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<azdata.TextComponentProperties>({ 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(clusterStateLabel, { CSSStyles: { 'width': `${clusterStateLabelColumnWidth}px`, 'min-width': `${clusterStateLabelColumnWidth}px`, 'user-select': 'none', 'font-weight': 'bold' } });
-		row1.addItem(this.clusterStateLoadingComponent, { CSSStyles: { 'width': `${clusterStateColumnWidth}px`, 'min-width': `${clusterStateColumnWidth}px` } });
+		row1.addItem(this.clusterStateLoadingComponent, { CSSStyles: { 'width': `${clusterStateValueColumnWidth}px`, 'min-width': `${clusterStateValueColumnWidth}px` } });
 
 		// Health Status
 		const healthStatusLabel = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({ 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) {

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) {

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()) {
+	return stateToDisplayTextMap[state.toLowerCase()] || state;
-		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;
-	}
 }
 
 /**

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");