[SQL Migration][New Migration Experience] Instance Summary created. (#…

…24295)

* instance summary created

* adding resource strings

* resolving comment

extensions/sql-migration/src/constants/helper.ts

@@ -91,6 +91,13 @@ export const ValidationErrorCodes = {
 	SqlInfoValidationFailed: '2056'
 };
 
+// Color codes for Graph
+export const ColorCodes = {
+	NotReadyState_Red: "#E00B1C",
+	ReadyState_Green: "#57A300",
+	ReadyWithWarningState_Amber: "#DB7500"
+}
+
 const _dateFormatter = new Intl.DateTimeFormat(
 	undefined, {
 	year: 'numeric',

extensions/sql-migration/src/constants/strings.ts

@@ -86,6 +86,19 @@ export const ASSESSMENT_RESULTS_PAGE_TITLE = localize('sql.migration.assessment.
 export const ASSESSMENT_RESULTS_PAGE_HEADER = localize('sql.migration.assessment.results.header', "View assessment results and select database(s) for migration");
 export const DATABASES_ASSESSED_LABEL = localize('sql.migration.database.assessed.label', "Database(s) assessed");
 export const MIGRATION_TIME_LABEL = localize('sql.migration.migration.time.label', "Ready for migration");
+export const ASSESSMENT_FINDINGS_LABEL = localize('sql.migration.assessment.findings.label', "Assessment findings");
+export const SUMMARY_TITLE = localize('sql.migration.summary.title', "Summary");
+export const DETAILS_TITLE = localize('sql.migration.details.title', "Details");
+export const ASSESSMENT_SUMMARY_TITLE = localize('sql.migration.assessment.summary.title', "Assessment summary");
+export const READINESS_SECTION_TITLE = localize('sql.migration.readiness.section.title', "Migration readiness of assessed databases in the Server instance");
+export const TOTAL_FINDINGS_LABEL = localize('sql.migration.total.findings.label', "Total findings");
+export const ISSUES_LABEL = localize('sql.migration.issues.label', "Blocking issues");
+export const INSTANCE_FINDING_SUMMARY = localize('sql.migration.instance.finding.summary', "Server instance assessment findings summary");
+export const SEVERITY_FINDINGS_LABEL = localize('sql.migration.severity.findings.label', "Findings by severity");
+export const ASSESSED_DBS_LABEL = localize('sql.migration.assessed.dbs.label', "Assessed databases");
+export const NOT_READY = localize('sql.migration.not.ready', "Not ready");
+export const READY = localize('sql.migration.ready', "Ready");
+export const READY_WARN = localize('sql.migration.ready.warn', "Ready with warnings");
 
 // Assessment results and recommendations
 export const ASSESSMENT_RESULTS_AND_RECOMMENDATIONS_PAGE_TITLE = localize('sql.migration.assessment.results.and.recommendations.title', "Assessment results and recommendations");

extensions/sql-migration/src/constants/styles.ts

@@ -70,6 +70,11 @@ export const BIG_NUMBER_CSS = {
 	'margin': '0',
 };
 
+export const SUBTITLE_LABEL_CSS = {
+	...BODY_CSS,
+	'font-weight': '400',
+};
+
 export const CARD_CSS = {
 	'width': '190px',
 	'box-shadow': '0px 1px 4px rgba(0, 0, 0, 0.13)',
@@ -83,4 +88,14 @@ export const TOOLBAR_CSS = {
 	'line-height': '16px',
 	'font-weight': '400',
 	'margin': '0',
-};
+};
+
+
+export const CARD_AXES_LABEL = {
+	'font-size': '12px',
+	'height': '14px',
+	'line-height': '14px',
+	'margin': '0px',
+	'text-align': 'right',
+	'font-weight': '600',
+};

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

@@ -41,13 +41,18 @@ export class AssessmentDetailsPage extends MigrationWizardPage {
 
 		const headerSection = this._header.createAssessmentDetailsHeader(this._view);
 
+		const bodySection = this._body.createAssessmentDetailsBody(this._view);
+
 		const form = this._view.modelBuilder.formContainer()
 			.withFormItems([
 				{
 					component: pageHeading
 				},
 				{
 					component: headerSection
+				},
+				{
+					component: bodySection
 				}
 			]).withProps({
 				CSSStyles: { 'padding-top': '0' }
@@ -57,6 +62,7 @@ export class AssessmentDetailsPage extends MigrationWizardPage {
 
 	public async onPageEnter(pageChangeInfo: azdata.window.WizardPageChangeInfo): Promise<void> {
 		await this._header.populateAssessmentDetailsHeader();
+		await this._body._treeComponent.initialize();
 	}
 
 	public async onPageLeave(pageChangeInfo: azdata.window.WizardPageChangeInfo): Promise<void> {

extensions/sql-migration/src/wizard/assessmentDetailsPage/assessmentDetialsBody.ts

@@ -4,19 +4,86 @@
  *--------------------------------------------------------------------------------------------*/
 
 import * as azdata from 'azdata';
+import * as constants from '../../constants/strings';
 import { MigrationStateModel } from '../../models/stateMachine';
+import { MigrationTargetType } from '../../api/utils';
+import { TreeComponent } from './treeComponent';
+import { InstanceSummary } from './instanceSummary';
 
+// Class that defines ui for body section of assessment result page
 export class AssessmentDetailsBody {
 	private _view!: azdata.ModelView;
+	private _model!: MigrationStateModel;
+	public _treeComponent!: TreeComponent;
+	private _targetType!: MigrationTargetType;
+	private _instanceSummary = new InstanceSummary();
+	public _warningsOrIssuesListSection!: azdata.ListViewComponent;
 
-	constructor(migrationStateModel: MigrationStateModel) { }
+	constructor(migrationStateModel: MigrationStateModel) {
+		this._model = migrationStateModel;
+		this._treeComponent = new TreeComponent(this._model, this._model._targetType)
+	}
 
-	public createAssessmentDetailsHeader(view: azdata.ModelView): azdata.Component {
+	// function that defines all the components for body section
+	public createAssessmentDetailsBody(view: azdata.ModelView): azdata.Component {
 		this._view = view;
 		const bodyContainer = view.modelBuilder.flexContainer().withLayout({
 			flexFlow: 'row',
+		}).withProps({
+			CSSStyles: {
+				'border-top': 'solid 1px'
+			}
 		}).component();
 
+		// returns the side pane of tree component to select instance and databases.
+		const treeComponent = this._treeComponent.createTreeComponent(
+			view,
+			(this._targetType === MigrationTargetType.SQLVM)
+				? this._model._vmDbs
+				: (this._targetType === MigrationTargetType.SQLMI)
+					? this._model._miDbs
+					: this._model._sqldbDbs);
+
+		// returns middle section of body where list of issues and warnings are displayed.
+		const assessmentFindingsComponent = this.createAssessmentFindingComponent();
+
+		// returns the right section of body which defines summary of selected instance.
+		const instanceSummary = this._instanceSummary.createInstanceSummaryContainer(view);
+
+		bodyContainer.addItem(treeComponent, { flex: "none" });
+		bodyContainer.addItem(assessmentFindingsComponent, { flex: "none" });
+		bodyContainer.addItem(instanceSummary, { flex: "none" });
+
 		return bodyContainer;
 	}
+
+	// function to create middle section of body that displays list of warnings/ issues.
+	public createAssessmentFindingComponent(): azdata.FlexContainer {
+		const assessmentFindingsComponent = this._view.modelBuilder.flexContainer().withLayout({
+			flexFlow: 'column',
+			width: "190px"
+		}).withProps({
+			CSSStyles: {
+				"width": "190px"
+			}
+		}).component();
+
+		const findingsSection = this._view.modelBuilder.listView().withProps({
+			title: {
+				text: constants.ASSESSMENT_FINDINGS_LABEL,
+				style: { "border": "solid 1px" }
+			},
+			options: [{ label: constants.SUMMARY_TITLE, id: "summary" }]
+		}).component();
+
+		assessmentFindingsComponent.addItem(findingsSection);
+
+		const warningsOrIssuesListSection = this._view.modelBuilder.listView().withProps({
+			title: { text: constants.WARNINGS },
+			options: []  // TODO: fill the list of options.
+		}).component();
+
+		assessmentFindingsComponent.addItem(warningsOrIssuesListSection);
+		return assessmentFindingsComponent;
+	}
 }