Dev/brih/task/assessment select first error (#15888)

* refactor assessment result display, auto-select 1st item

* add async support using setDataValues in declarativeTable

* address review feedback
This commit is contained in:
brian-harris
2021-06-24 08:41:05 -07:00
committed by GitHub
parent f7a723d98d
commit e639a94dda
2 changed files with 41 additions and 85 deletions

View File

@@ -434,11 +434,11 @@ export const ISSUES_DETAILS = localize('sql.migration.issues.details', "Issue De
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 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_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 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 { export function IMPACT_OBJECT_TYPE(objectType?: string): string {
return localize('sql.migration.impact.object.type', "Type: {0}", objectType); return objectType ? localize('sql.migration.impact.object.type', "Type: {0}", objectType) : '';
} }
export function IMPACT_OBJECT_NAME(objectName: string): string { export function IMPACT_OBJECT_NAME(objectName?: string): string {
return localize('sql.migration.impact.object.name', "Name: {0}", objectName); return objectName ? localize('sql.migration.impact.object.name', "Name: {0}", objectName) : '';
} }
export function DATABASES(selectedCount: number, totalCount: number): string { export function DATABASES(selectedCount: number, totalCount: number): string {
return localize('sql.migration.databases', "Databases ({0}/{1})", selectedCount, totalCount); return localize('sql.migration.databases', "Databases ({0}/{1})", selectedCount, totalCount);

View File

@@ -72,16 +72,12 @@ export class SqlDatabaseTree {
private _assessmentTitle!: azdata.TextComponent; private _assessmentTitle!: azdata.TextComponent;
private _databaseTableValues!: azdata.DeclarativeTableCellValue[][]; private _databaseTableValues!: azdata.DeclarativeTableCellValue[][];
private _activeIssues!: SqlMigrationAssessmentResultItem[]; private _activeIssues!: SqlMigrationAssessmentResultItem[];
private _selectedIssue!: SqlMigrationAssessmentResultItem;
private _selectedObject!: SqlMigrationImpactedObjectInfo;
private _serverName!: string; private _serverName!: string;
private _dbNames!: string[]; private _dbNames!: string[];
private _databaseCount!: azdata.TextComponent; private _databaseCount!: azdata.TextComponent;
constructor( constructor(
private _model: MigrationStateModel, private _model: MigrationStateModel,
private _targetType: MigrationTargetType private _targetType: MigrationTargetType
@@ -176,16 +172,13 @@ export class SqlDatabaseTree {
'value': constants.DATABASES(this.selectedDbs().length, this._model._serverDatabases.length) 'value': constants.DATABASES(this.selectedDbs().length, this._model._serverDatabases.length)
}); });
}); });
this._databaseTable.onRowSelected(({ row }) => { this._databaseTable.onRowSelected(async (e) => {
this._databaseTable.focus();
if (this._targetType === MigrationTargetType.SQLMI) { if (this._targetType === MigrationTargetType.SQLMI) {
this._activeIssues = this._model._assessmentResults?.databaseAssessments[row].issues; this._activeIssues = this._model._assessmentResults?.databaseAssessments[e.row].issues;
this._selectedIssue = this._model._assessmentResults?.databaseAssessments[row].issues[0];
} else { } else {
this._activeIssues = []; this._activeIssues = [];
} }
this._dbName.value = this._dbNames[row]; this._dbName.value = this._dbNames[e.row];
this._recommendationTitle.value = constants.ISSUES_COUNT(this._activeIssues.length); this._recommendationTitle.value = constants.ISSUES_COUNT(this._activeIssues.length);
this._recommendation.value = constants.ISSUES_DETAILS; this._recommendation.value = constants.ISSUES_DETAILS;
this._resultComponent.updateCssStyles({ this._resultComponent.updateCssStyles({
@@ -194,7 +187,7 @@ export class SqlDatabaseTree {
this._dbMessageContainer.updateCssStyles({ this._dbMessageContainer.updateCssStyles({
'display': 'none' 'display': 'none'
}); });
this.refreshResults(); await this.refreshResults();
}); });
const tableContainer = this._view.modelBuilder.divContainer().withItems([this._databaseTable]).withProps({ const tableContainer = this._view.modelBuilder.divContainer().withItems([this._databaseTable]).withProps({
@@ -251,11 +244,8 @@ export class SqlDatabaseTree {
} }
}).component(); }).component();
this._instanceTable.onRowSelected((e) => { this._instanceTable.onRowSelected(async (e) => {
this._instanceTable.focus();
this._activeIssues = this._model._assessmentResults?.issues; this._activeIssues = this._model._assessmentResults?.issues;
this._selectedIssue = this._model._assessmentResults?.issues[0];
this._dbName.value = this._serverName; this._dbName.value = this._serverName;
this._resultComponent.updateCssStyles({ this._resultComponent.updateCssStyles({
'display': 'block' 'display': 'block'
@@ -266,7 +256,7 @@ export class SqlDatabaseTree {
this._recommendation.value = constants.WARNINGS_DETAILS; this._recommendation.value = constants.WARNINGS_DETAILS;
this._recommendationTitle.value = constants.WARNINGS_COUNT(this._activeIssues.length); this._recommendationTitle.value = constants.WARNINGS_COUNT(this._activeIssues.length);
if (this._model._targetType === MigrationTargetType.SQLMI) { if (this._model._targetType === MigrationTargetType.SQLMI) {
this.refreshResults(); await this.refreshResults();
} }
}); });
@@ -407,7 +397,6 @@ export class SqlDatabaseTree {
const bottomContainer = this.createDescriptionContainer(); const bottomContainer = this.createDescriptionContainer();
const container = this._view.modelBuilder.flexContainer().withItems([title, bottomContainer]).withLayout({ const container = this._view.modelBuilder.flexContainer().withItems([title, bottomContainer]).withLayout({
flexFlow: 'column' flexFlow: 'column'
}).withProps({ }).withProps({
@@ -423,7 +412,6 @@ export class SqlDatabaseTree {
const description = this.createDescription(); const description = this.createDescription();
const impactedObjects = this.createImpactedObjectsDescription(); const impactedObjects = this.createImpactedObjectsDescription();
const container = this._view.modelBuilder.flexContainer().withLayout({ const container = this._view.modelBuilder.flexContainer().withLayout({
flexFlow: 'row' flexFlow: 'row'
}).withProps({ }).withProps({
@@ -491,9 +479,9 @@ export class SqlDatabaseTree {
} }
).component(); ).component();
this._impactedObjectsTable.onRowSelected(({ row }) => { this._impactedObjectsTable.onRowSelected((e) => {
this._selectedObject = this._impactedObjects[row]; const impactedObject = e.row > -1 ? this._impactedObjects[e.row] : undefined;
this.refreshImpactedObject(); this.refreshImpactedObject(impactedObject);
}); });
const objectDetailsTitle = this._view.modelBuilder.text().withProps({ const objectDetailsTitle = this._view.modelBuilder.text().withProps({
@@ -590,7 +578,6 @@ export class SqlDatabaseTree {
showLinkIcon: true showLinkIcon: true
}).component(); }).component();
const container = this._view.modelBuilder.flexContainer().withItems([descriptionTitle, this._descriptionText, recommendationTitle, this._recommendationText, moreInfo, this._moreInfo]).withLayout({ const container = this._view.modelBuilder.flexContainer().withItems([descriptionTitle, this._descriptionText, recommendationTitle, this._recommendationText, moreInfo, this._moreInfo]).withLayout({
flexFlow: 'column' flexFlow: 'column'
}).component(); }).component();
@@ -598,7 +585,6 @@ export class SqlDatabaseTree {
return container; return container;
} }
private createAssessmentTitle(): azdata.TextComponent { private createAssessmentTitle(): azdata.TextComponent {
this._assessmentTitle = this._view.modelBuilder.text().withProps({ this._assessmentTitle = this._view.modelBuilder.text().withProps({
value: '', value: '',
@@ -682,7 +668,6 @@ export class SqlDatabaseTree {
return this._recommendation; return this._recommendation;
} }
private createImpactedObjectsTable(): azdata.FlexContainer { private createImpactedObjectsTable(): azdata.FlexContainer {
const headerStyle: azdata.CssStyles = { const headerStyle: azdata.CssStyles = {
@@ -719,9 +704,9 @@ export class SqlDatabaseTree {
} }
).component(); ).component();
this._assessmentResultsTable.onRowSelected(({ row }) => { this._assessmentResultsTable.onRowSelected(async (e) => {
this._selectedIssue = this._activeIssues[row]; const selectedIssue = e.row > -1 ? this._activeIssues[e.row] : undefined;
this.refreshAssessmentDetails(); await this.refreshAssessmentDetails(selectedIssue);
}); });
const container = this._view.modelBuilder.flexContainer().withItems([this._assessmentResultsTable]).withLayout({ const container = this._view.modelBuilder.flexContainer().withItems([this._assessmentResultsTable]).withLayout({
@@ -746,8 +731,7 @@ export class SqlDatabaseTree {
return result; return result;
} }
public refreshResults(): void { public async refreshResults(): Promise<void> {
const assessmentResults: azdata.DeclarativeTableCellValue[][] = [];
if (this._model._targetType === MigrationTargetType.SQLMI) { if (this._model._targetType === MigrationTargetType.SQLMI) {
if (this._activeIssues.length === 0) { if (this._activeIssues.length === 0) {
/// show no issues here /// show no issues here
@@ -787,60 +771,32 @@ export class SqlDatabaseTree {
this._recommendationTitle.value = constants.ASSESSMENT_RESULTS; this._recommendationTitle.value = constants.ASSESSMENT_RESULTS;
this._recommendation.value = ''; this._recommendation.value = '';
} }
this._activeIssues.forEach((v) => {
assessmentResults.push( const assessmentResults: azdata.DeclarativeTableCellValue[][] = this._activeIssues
[ .map((v) => [{ value: v.checkId }]) || [];
{
value: v.checkId await this._assessmentResultsTable.setDataValues(assessmentResults);
} this._assessmentResultsTable.selectedRow = assessmentResults.length > 0 ? 0 : -1;
]
);
});
this._assessmentResultsTable.dataValues = assessmentResults;
} }
public refreshAssessmentDetails(): void { public async refreshAssessmentDetails(selectedIssue?: SqlMigrationAssessmentResultItem): Promise<void> {
if (this._selectedIssue) { this._assessmentTitle.value = selectedIssue?.checkId || '';
this._assessmentTitle.value = this._selectedIssue.checkId; this._descriptionText.value = selectedIssue?.description || '';
this._descriptionText.value = this._selectedIssue.description; this._moreInfo.url = selectedIssue?.helpLink || '';
this._moreInfo.url = this._selectedIssue.helpLink; this._moreInfo.label = selectedIssue?.message || '';
this._moreInfo.label = this._selectedIssue.message; this._impactedObjects = selectedIssue?.impactedObjects || [];
this._impactedObjects = this._selectedIssue.impactedObjects; this._recommendationText.value = selectedIssue?.message || ''; //TODO: Expose correct property for recommendation.
this._recommendationText.value = this._selectedIssue.message; //TODO: Expose correct property for recommendation.
this._impactedObjectsTable.dataValues = this._selectedIssue.impactedObjects.map((object) => { await this._impactedObjectsTable.setDataValues(this._impactedObjects.map(
return [ (object) => [{ value: object.objectType }, { value: object.name }]));
{
value: object.objectType this._impactedObjectsTable.selectedRow = this._impactedObjects.length > 0 ? 0 : -1;
},
{
value: object.name
}
];
});
this._selectedObject = this._selectedIssue.impactedObjects[0];
}
else {
this._assessmentTitle.value = '';
this._descriptionText.value = '';
this._moreInfo.url = '';
this._moreInfo.label = '';
this._recommendationText.value = '';
this._impactedObjectsTable.dataValues = [];
}
this.refreshImpactedObject();
}
public refreshImpactedObject(): void {
if (this._selectedObject) {
this._objectDetailsType.value = constants.IMPACT_OBJECT_TYPE(this._selectedObject.objectType!);
this._objectDetailsName.value = constants.IMPACT_OBJECT_NAME(this._selectedObject.name);
this._objectDetailsSample.value = this._selectedObject.impactDetail;
} else {
this._objectDetailsType.value = ``;
this._objectDetailsName.value = ``;
this._objectDetailsSample.value = '';
} }
public refreshImpactedObject(impactedObject?: SqlMigrationImpactedObjectInfo): void {
this._objectDetailsType.value = constants.IMPACT_OBJECT_TYPE(impactedObject?.objectType);
this._objectDetailsName.value = constants.IMPACT_OBJECT_NAME(impactedObject?.name);
this._objectDetailsSample.value = impactedObject?.impactDetail || '';
} }
public async initialize(): Promise<void> { public async initialize(): Promise<void> {
@@ -924,8 +880,8 @@ export class SqlDatabaseTree {
); );
}); });
} }
this._instanceTable.dataValues = instanceTableValues; await this._instanceTable.setDataValues(instanceTableValues);
this._databaseTable.dataValues = this._databaseTableValues; await this._databaseTable.setDataValues(this._databaseTableValues);
} }
private createIconTextCell(icon: IconPath, text: string): azdata.FlexContainer { private createIconTextCell(icon: IconPath, text: string): azdata.FlexContainer {