diff --git a/extensions/sql-migration/src/constants/strings.ts b/extensions/sql-migration/src/constants/strings.ts index 4898252e40..1af84da94b 100644 --- a/extensions/sql-migration/src/constants/strings.ts +++ b/extensions/sql-migration/src/constants/strings.ts @@ -356,6 +356,8 @@ export const TARGET_PLATFORM = localize('sql.migration.target.platform', "Target export const WARNINGS_DETAILS = localize('sql.migration.warnings.details', "Warnings Details"); export const ISSUES_DETAILS = localize('sql.migration.issues.details', "Issue Details"); export const SELECT_DB_PROMPT = localize('sql.migration.select.prompt', "Click on SQL Server Instance or any of the databases on the left to view its details."); +export const NO_ISSUES_FOUND_VM = localize('sql.migration.no.issues.vm', "No issues found for migrating to SQL Server on Azure Virtual Machine"); +export const NO_ISSUES_FOUND_MI = localize('sql.migration.no.issues.mi', "No issues found for migrating to SQL Server on Azure SQL Managed Instance"); export function IMPACT_OBJECT_TYPE(objectType: string): string { return localize('sql.migration.impact.object.type', "Type: {0}", objectType); } diff --git a/extensions/sql-migration/src/dialog/assessmentResults/sqlDatabasesTree.ts b/extensions/sql-migration/src/dialog/assessmentResults/sqlDatabasesTree.ts index 2b8079fef2..165c74d2c1 100644 --- a/extensions/sql-migration/src/dialog/assessmentResults/sqlDatabasesTree.ts +++ b/extensions/sql-migration/src/dialog/assessmentResults/sqlDatabasesTree.ts @@ -53,9 +53,11 @@ export class SqlDatabaseTree { private _assessmentResultsTable!: azdata.DeclarativeTableComponent; private _impactedObjectsTable!: azdata.DeclarativeTableComponent; private _assessmentContainer!: azdata.FlexContainer; + private _assessmentsTable!: azdata.FlexContainer; private _dbMessageContainer!: azdata.FlexContainer; private _rootContainer!: azdata.FlexContainer; private _resultComponent!: azdata.Component; + private _noIssuesContainer!: azdata.FlexContainer; private _recommendation!: azdata.TextComponent; private _dbName!: azdata.TextComponent; @@ -70,6 +72,7 @@ export class SqlDatabaseTree { private _assessmentTitle!: azdata.TextComponent; private _databaseTableValues!: azdata.DeclarativeTableCellValue[][]; + private _activeIssues!: SqlMigrationAssessmentResultItem[]; private _selectedIssue!: SqlMigrationAssessmentResultItem; private _selectedObject!: SqlMigrationImpactedObjectInfo; @@ -269,7 +272,7 @@ export class SqlDatabaseTree { async createComponentResult(view: azdata.ModelView): Promise { this._view = view; const topContainer = this.createTopContainer(); - this._assessmentContainer = this.createBottomContainer(); + const bottomContainer = this.createBottomContainer(); const container = this._view.modelBuilder.flexContainer().withLayout({ flexFlow: 'column', @@ -283,7 +286,7 @@ export class SqlDatabaseTree { }).component(); container.addItem(topContainer, { flex: '0 0 auto' }); - container.addItem(this._assessmentContainer, { flex: '1 1 auto', CSSStyles: { 'overflow-y': 'hidden' } }); + container.addItem(bottomContainer, { flex: '1 1 auto', CSSStyles: { 'overflow-y': 'hidden' } }); return container; } @@ -320,8 +323,9 @@ export class SqlDatabaseTree { private createBottomContainer(): azdata.FlexContainer { - const impactedObjects = this.createImpactedObjectsTable(); - const rightContainer = this.createAssessmentContainer(); + this._assessmentsTable = this.createImpactedObjectsTable(); + this._assessmentContainer = this.createAssessmentContainer(); + const noIssuesText = this.createNoIssuesText(); const container = this._view.modelBuilder.flexContainer().withLayout({ flexFlow: 'row', @@ -332,11 +336,48 @@ export class SqlDatabaseTree { } }).component(); - container.addItem(impactedObjects, { flex: '0 0 auto', CSSStyles: { 'border-right': 'solid 1px', 'overflow-y': 'auto' } }); - container.addItem(rightContainer, { flex: '1 1 auto', CSSStyles: { 'overflow-y': 'auto' } }); + container.addItem(noIssuesText, { flex: '1 1 auto', CSSStyles: { 'overflow-y': 'auto' } }); + container.addItem(this._assessmentsTable, { flex: '0 0 auto', CSSStyles: { 'overflow-y': 'auto' } }); + container.addItem(this._assessmentContainer, { flex: '1 1 auto', CSSStyles: { 'overflow-y': 'auto' } }); return container; } + private createNoIssuesText(): azdata.FlexContainer { + let message: azdata.TextComponent; + if (this._model._targetType === MigrationTargetType.SQLVM) { + message = this._view.modelBuilder.text().withProps({ + value: constants.NO_ISSUES_FOUND_VM, + CSSStyles: { + 'font-size': '14px', + 'width': '400px', + 'margin': '10px 0px 0px 0px', + 'text-align': 'left' + } + }).component(); + } else { + message = this._view.modelBuilder.text().withProps({ + value: constants.NO_ISSUES_FOUND_MI, + CSSStyles: { + 'font-size': '14px', + 'width': '400px', + 'margin': '10px 0px 0px 0px', + 'text-align': 'left' + } + }).component(); + } + //TODO: will need to add a SQL DB condition here in the future + + this._noIssuesContainer = this._view.modelBuilder.flexContainer().withItems([message]).withProps({ + CSSStyles: { + 'margin-left': '24px', + 'margin-top': '20px', + 'display': 'none' + } + }).component(); + + return this._noIssuesContainer; + } + private createSelectDbMessage(): azdata.FlexContainer { const message = this._view.modelBuilder.text().withProps({ value: constants.SELECT_DB_PROMPT, @@ -638,7 +679,7 @@ export class SqlDatabaseTree { } - private createImpactedObjectsTable(): azdata.DeclarativeTableComponent { + private createImpactedObjectsTable(): azdata.FlexContainer { const headerStyle: azdata.CssStyles = { 'border': 'none', @@ -679,7 +720,16 @@ export class SqlDatabaseTree { this.refreshAssessmentDetails(); }); - return this._assessmentResultsTable; + const container = this._view.modelBuilder.flexContainer().withItems([this._assessmentResultsTable]).withLayout({ + flexFlow: 'column', + height: '100%' + }).withProps({ + CSSStyles: { + 'border-right': 'solid 1px' + } + }).component(); + + return container; } public selectedDbs(): string[] { @@ -694,6 +744,30 @@ export class SqlDatabaseTree { public refreshResults(): void { const assessmentResults: azdata.DeclarativeTableCellValue[][] = []; + if (this._activeIssues.length === 0) { + /// show no issues here + this._assessmentsTable.updateCssStyles({ + 'display': 'none', + 'border-right': 'none' + }); + this._assessmentContainer.updateCssStyles({ + 'display': 'none' + }); + this._noIssuesContainer.updateCssStyles({ + 'display': 'flex' + }); + } else { + this._assessmentContainer.updateCssStyles({ + 'display': 'flex' + }); + this._assessmentsTable.updateCssStyles({ + 'display': 'flex', + 'border-right': 'solid 1px' + }); + this._noIssuesContainer.updateCssStyles({ + 'display': 'none' + }); + } this._activeIssues.forEach((v) => { assessmentResults.push( [