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

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

Browse Source 
* Fix column text overflow on status page

* Fix typo

* Fix another typo
This commit is contained in:
Charles Gagnon
2019-10-24 18:31:57 -07:00
committed by GitHub
parent 240b90610f
commit c5d427ebb1
5 changed files with 54 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
extensions/big-data-cluster/src/bigDataCluster/constants.ts
View File

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

15
extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardOverviewPage.ts
View File

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

8
extensions/big-data-cluster/src/bigDataCluster/dialog/bdcDashboardResourceStatusPage.ts
View File

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

62
extensions/big-data-cluster/src/bigDataCluster/utils.ts
View File

@@ -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;
}
/**

2
extensions/mssql/src/localizedConstants.ts
View File

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