Display "No Issues" Message (#15176)

* wip

* no warnings screen for dbs with no warnings

* cleanup
This commit is contained in:
Christopher Suh
2021-04-19 10:01:46 -07:00
committed by GitHub
parent fe9d3bc63b
commit dbcada5e30
2 changed files with 84 additions and 8 deletions

View File

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

View File

@@ -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<azdata.Component> {
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(
[