Fixed formatting/bugs (#14790)

* formatting changes & assessment title

* fixed width for description/impacted objects

* fixed formatting

* removed master, model, tempdb, and msdb

* fix warnings number

* used static variable

extensions/sql-migration/src/dialog/assessmentResults/sqlDatabasesTree.ts

@@ -14,6 +14,7 @@ type DbIssues = {
 };
 export class SqlDatabaseTree extends AssessmentDialogComponent {
 
+	public static excludeDbs: Array<string> = ['master', 'tempdb', 'msdb', 'model'];
 	private _model!: MigrationStateModel;
 	private instanceTable!: azdata.ComponentBuilder<azdata.DeclarativeTableComponent, azdata.DeclarativeTableProperties>;
 	private databaseTable!: azdata.ComponentBuilder<azdata.DeclarativeTableComponent, azdata.DeclarativeTableProperties>;
@@ -32,6 +33,7 @@ export class SqlDatabaseTree extends AssessmentDialogComponent {
 	private _objectDetailsSample!: azdata.TextComponent;
 	private _moreInfo!: azdata.TextComponent;
 	private _assessmentType!: string;
+	private _assessmentTitle!: azdata.TextComponent;
 
 	constructor(model: MigrationStateModel, assessmentData: Map<string, Issues[]>, assessmentType: string) {
 		super();
@@ -97,14 +99,14 @@ export class SqlDatabaseTree extends AssessmentDialogComponent {
 					{
 						displayName: 'Databases', // TODO localize
 						valueType: azdata.DeclarativeDataType.string,
-						width: '80%',
+						width: '75%',
 						isReadOnly: true,
 						headerCssStyles: styleLeft
 					},
 					{
 						displayName: 'Issues', // Incidents
 						valueType: azdata.DeclarativeDataType.string,
-						width: '10%',
+						width: '15%',
 						isReadOnly: true,
 						headerCssStyles: styleRight,
 						ariaLabel: 'Issue Count' // TODO localize
@@ -148,7 +150,7 @@ export class SqlDatabaseTree extends AssessmentDialogComponent {
 				rowNumber = rowNumber + 1;
 			});
 
-			dbList.forEach((value) => {
+			dbList.filter(db => !SqlDatabaseTree.excludeDbs.includes(db)).forEach((value) => {
 				this.databaseTable.component().dataValues?.push(
 					[
 						{
@@ -188,7 +190,12 @@ export class SqlDatabaseTree extends AssessmentDialogComponent {
 			if (rowInfo) {
 				this._assessmentResultsTable.component().dataValues = [];
 				this._dbName.value = rowInfo.name;
-				this._recommendation.value = `Assessment Results (${rowInfo.issues.length} issues found)`;
+				if (rowInfo.issues[0].description === 'No Issues') {
+					this._recommendation.value = `Warnings (0 issues found)`;
+				} else {
+					this._recommendation.value = `Warnings (${rowInfo.issues.length} issues found)`;
+				}
+
 				// Need some kind of refresh method for declarative tables
 				let dataValues: string[][] = [];
 				rowInfo.issues.forEach(async (issue) => {
@@ -298,7 +305,8 @@ export class SqlDatabaseTree extends AssessmentDialogComponent {
 			height: '100%'
 		}).withProps({
 			CSSStyles: {
-				'margin-left': '10px'
+				'margin-left': '10px',
+				'margin-right': '15px'
 			}
 		}).component();
 
@@ -336,7 +344,7 @@ export class SqlDatabaseTree extends AssessmentDialogComponent {
 			}
 		}).component();
 
-		container.addItem(impactedObjects, { flex: '0 0 auto' });
+		container.addItem(impactedObjects, { flex: '0 0 auto', CSSStyles: { 'border-right': 'solid 1px' } });
 		container.addItem(rightContainer, { flex: '1 1 auto' });
 		return container;
 	}
@@ -363,9 +371,15 @@ export class SqlDatabaseTree extends AssessmentDialogComponent {
 		const impactedObjects = this.createImpactedObjectsDescription(view);
 
 
-		const container = view.modelBuilder.flexContainer().withItems([description, impactedObjects]).withLayout({
+		const container = view.modelBuilder.flexContainer().withLayout({
 			flexFlow: 'row'
+		}).withProps({
+			CSSStyles: {
+				'height': '100%'
+			}
 		}).component();
+		container.addItem(description, { flex: '1 1 auto', CSSStyles: { 'width': '50%', 'margin-right': '10px' } });
+		container.addItem(impactedObjects, { flex: '1 1 auto', CSSStyles: { 'width': '50%', 'margin-left': '10px' } });
 
 		return container;
 	}
@@ -440,6 +454,7 @@ export class SqlDatabaseTree extends AssessmentDialogComponent {
 		const objectDetailsTitle = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
 			value: 'Object details',
 			CSSStyles: {
+				'margin-top': '10px',
 				'font-size': '14px',
 				'margin-block-start': '0px',
 				'margin-block-end': '0px'
@@ -537,15 +552,16 @@ export class SqlDatabaseTree extends AssessmentDialogComponent {
 
 
 	private createAssessmentTitle(view: azdata.ModelView): azdata.TextComponent {
-		const title = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
+		this._assessmentTitle = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
 			value: '',
 			CSSStyles: {
 				'font-size': '14px',
+				'padding-bottom': '15px',
 				'border-bottom': 'solid 1px'
 			}
-		});
+		}).component();
 
-		return title.component();
+		return this._assessmentTitle;
 	}
 
 	private createTitleComponent(view: azdata.ModelView): azdata.TextComponent {
@@ -591,7 +607,7 @@ export class SqlDatabaseTree extends AssessmentDialogComponent {
 	private createAssessmentResultsTitle(view: azdata.ModelView): azdata.TextComponent {
 		this._recommendation = view.modelBuilder.text().withProperties<azdata.TextComponentProperties>({
 			title: 'Recommendation', // TODO localize
-			value: 'Assessment Results',
+			value: 'Warnings',
 			CSSStyles: {
 				'font-size': '14px',
 				'font-weight': 'bold',
@@ -672,6 +688,8 @@ export class SqlDatabaseTree extends AssessmentDialogComponent {
 					]);
 				});
 
+				this._assessmentTitle.value = this._issues.description;
+
 				this._impactedObjectsTable.component().updateProperties({
 					dataValues: data
 				});

extensions/sql-migration/src/wizard/skuRecommendationPage.ts

@@ -171,7 +171,6 @@ export class SKURecommendationPage extends MigrationWizardPage {
 		this._chooseTargetComponent?.component.clearItems();
 		this._igComponent!.component.value = constants.ASSESSMENT_COMPLETED(this._serverName);
 		if (this.migrationStateModel.assessmentResults) {
-			// need to parse assessment results before this, multiple assessment results present for same DB
 			let dbIssueCount = 0;
 			let last = '';
 			this.migrationStateModel.assessmentResults.forEach(element => {