Migration extensions - UI fixes and vBump (#15199)

* Fixing Migration Cutover Dialog
Adding support for target file share
Fixing request body
Correcting localized strings

* Redesigned IR page
Adding additional details in migration status dialog

* vbump

* Fixed the perpetual loading

* Fixed duration logic

* Adding icon for migration extension

* Adding helper commenst to util function
localizing some strings
logging console errors

* enabling cutover buttons for  ignored files

extensions/sql-migration/src/dialog/createSqlMigrationService/createSqlMigrationServiceDialog.ts

@@ -58,7 +58,9 @@ export class CreateSqlMigrationServiceDialog {
 					text: ''
 				};
 				this._statusLoadingComponent.loading = true;
-				this._formSubmitButton.enabled = false;
+				this.migrationServiceResourceGroupDropdown.loading = false;
+				this.setFormEnabledState(false);
+
 
 				const subscription = this.migrationStateModel._targetSubscription;
 				const resourceGroup = (this.migrationServiceResourceGroupDropdown.value as azdata.CategoryValue).name;
@@ -70,7 +72,7 @@ export class CreateSqlMigrationServiceDialog {
 				if (formValidationErrors.length > 0) {
 					this.setDialogMessage(formValidationErrors);
 					this._statusLoadingComponent.loading = false;
-					this._formSubmitButton.enabled = true;
+					this.setFormEnabledState(true);
 					return;
 				}
 
@@ -79,7 +81,7 @@ export class CreateSqlMigrationServiceDialog {
 					if (this.createdMigrationService.error) {
 						this.setDialogMessage(`${this.createdMigrationService.error.code} : ${this.createdMigrationService.error.message}`);
 						this._statusLoadingComponent.loading = false;
-						this._formSubmitButton.enabled = true;
+						this.setFormEnabledState(true);
 						return;
 					}
 					this._dialogObject.message = {
@@ -93,7 +95,7 @@ export class CreateSqlMigrationServiceDialog {
 					console.log(e);
 					this.setDialogMessage(e.message);
 					this._statusLoadingComponent.loading = false;
-					this._formSubmitButton.enabled = true;
+					this.setFormEnabledState(true);
 					return;
 				}
 			});
@@ -138,17 +140,24 @@ export class CreateSqlMigrationServiceDialog {
 		this._dialogObject.cancelButton.onClick((e) => {
 		});
 		this._dialogObject.okButton.onClick((e) => {
-			this.irPage.populateMigrationService(this.createdMigrationService, this.createdMigrationServiceNodeNames);
+			this.irPage.populateMigrationService(this.createdMigrationService, this.createdMigrationServiceNodeNames, (this.migrationServiceResourceGroupDropdown.value as azdata.CategoryValue).name);
 		});
 	}
 
 	private async migrationServiceDropdownContainer(): Promise<azdata.FlexContainer> {
 		const dialogDescription = this._view.modelBuilder.text().withProps({
-			value: constants.MIGRATION_SERVICE_DIALOG_DESCRIPTION
+			value: constants.MIGRATION_SERVICE_DIALOG_DESCRIPTION,
+			CSSStyles: {
+				'font-size': '13px'
+			}
 		}).component();
 
 		const subscriptionDropdownLabel = this._view.modelBuilder.text().withProps({
-			value: constants.SUBSCRIPTION
+			value: constants.SUBSCRIPTION,
+			CSSStyles: {
+				'font-size': '13px',
+				'font-weight': 'bold'
+			}
 		}).component();
 
 		this.migrationServiceSubscription = this._view.modelBuilder.inputBox().withProps({
@@ -157,7 +166,11 @@ export class CreateSqlMigrationServiceDialog {
 		}).component();
 
 		const resourceGroupDropdownLabel = this._view.modelBuilder.text().withProps({
-			value: constants.RESOURCE_GROUP
+			value: constants.RESOURCE_GROUP,
+			CSSStyles: {
+				'font-size': '13px',
+				'font-weight': 'bold'
+			}
 		}).component();
 
 		this.migrationServiceResourceGroupDropdown = this._view.modelBuilder.dropDown().withProps({
@@ -165,13 +178,21 @@ export class CreateSqlMigrationServiceDialog {
 		}).component();
 
 		const migrationServiceNameLabel = this._view.modelBuilder.text().withProps({
-			value: constants.NAME
+			value: constants.NAME,
+			CSSStyles: {
+				'font-size': '13px',
+				'font-weight': 'bold'
+			}
 		}).component();
 
 		this.migrationServiceNameText = this._view.modelBuilder.inputBox().component();
 
 		const locationDropdownLabel = this._view.modelBuilder.text().withProps({
-			value: constants.LOCATION
+			value: constants.LOCATION,
+			CSSStyles: {
+				'font-size': '13px',
+				'font-weight': 'bold'
+			}
 		}).component();
 
 		this.migrationServiceLocation = this._view.modelBuilder.inputBox().withProps({
@@ -181,7 +202,11 @@ export class CreateSqlMigrationServiceDialog {
 		}).component();
 
 		const targetlabel = this._view.modelBuilder.text().withProps({
-			value: constants.TARGET
+			value: constants.TARGET,
+			CSSStyles: {
+				'font-size': '13px',
+				'font-weight': 'bold'
+			}
 		}).component();
 
 		const targetText = this._view.modelBuilder.inputBox().withProps({
@@ -259,20 +284,30 @@ export class CreateSqlMigrationServiceDialog {
 		const setupIRHeadingText = this._view.modelBuilder.text().withProps({
 			value: constants.SERVICE_CONTAINER_HEADING,
 			CSSStyles: {
-				'font-weight': 'bold'
+				'font-weight': 'bold',
+				'font-size': '13px'
 			}
 		}).component();
 
 		const setupIRdescription1 = this._view.modelBuilder.text().withProps({
 			value: constants.SERVICE_CONTAINER_DESCRIPTION1,
+			CSSStyles: {
+				'font-size': '13px'
+			}
 		}).component();
 
 		const setupIRdescription2 = this._view.modelBuilder.text().withProps({
 			value: constants.SERVICE_CONTAINER_DESCRIPTION2,
+			CSSStyles: {
+				'font-size': '13px'
+			}
 		}).component();
 
 		const irSetupStep1Text = this._view.modelBuilder.text().withProps({
 			value: constants.SERVICE_STEP1,
+			CSSStyles: {
+				'font-size': '13px'
+			},
 			links: [
 				{
 					text: constants.SERVICE_STEP1_LINK,
@@ -282,7 +317,10 @@ export class CreateSqlMigrationServiceDialog {
 		}).component();
 
 		const irSetupStep2Text = this._view.modelBuilder.text().withProps({
-			value: constants.SERVICE_STEP2
+			value: constants.SERVICE_STEP2,
+			CSSStyles: {
+				'font-size': '13px'
+			}
 		}).component();
 
 		const irSetupStep3Text = this._view.modelBuilder.hyperlink().withProps({
@@ -290,7 +328,8 @@ export class CreateSqlMigrationServiceDialog {
 			url: '',
 			CSSStyles: {
 				'margin-top': '10px',
-				'margin-bottom': '10px'
+				'margin-bottom': '10px',
+				'font-size': '13px'
 			}
 		}).component();
 
@@ -311,14 +350,23 @@ export class CreateSqlMigrationServiceDialog {
 		});
 
 
-		this._connectionStatus = this._view.modelBuilder.infoBox().component();
+		this._connectionStatus = this._view.modelBuilder.infoBox().withProps({
+			text: '',
+			style: 'error',
+			CSSStyles: {
+				'font-size': '13px'
+			}
+		}).component();
 
 		this._connectionStatus.CSSStyles = {
 			'width': '350px'
 		};
 
 		const refreshLoadingIndicator = this._view.modelBuilder.loadingComponent().withProps({
-			loading: false
+			loading: false,
+			CSSStyles: {
+				'font-size': '13px'
+			}
 		}).component();
 
 
@@ -330,7 +378,10 @@ export class CreateSqlMigrationServiceDialog {
 					width: '50px',
 					isReadOnly: true,
 					rowCssStyles: {
-						'text-align': 'center'
+						'font-size': '13px'
+					},
+					headerCssStyles: {
+						'font-size': '13px'
 					}
 				},
 				{
@@ -339,20 +390,23 @@ export class CreateSqlMigrationServiceDialog {
 					width: '500px',
 					isReadOnly: true,
 					rowCssStyles: {
-						overflow: 'scroll'
+						'font-size': '13px'
+					},
+					headerCssStyles: {
+						'font-size': '13px'
 					}
 				},
 				{
 					displayName: '',
 					valueType: azdata.DeclarativeDataType.component,
-					width: '15px',
-					isReadOnly: true,
-				},
-				{
-					displayName: '',
-					valueType: azdata.DeclarativeDataType.component,
-					width: '15px',
+					width: '30px',
 					isReadOnly: true,
+					rowCssStyles: {
+						'font-size': '13px'
+					},
+					headerCssStyles: {
+						'font-size': '13px'
+					}
 				}
 			],
 			CSSStyles: {
@@ -399,14 +453,20 @@ export class CreateSqlMigrationServiceDialog {
 			if (state === 'Online') {
 				this._connectionStatus.updateProperties(<azdata.InfoBoxComponentProperties>{
 					text: constants.SERVICE_READY(this.createdMigrationService!.name, this.createdMigrationServiceNodeNames.join(', ')),
-					style: 'success'
+					style: 'success',
+					CSSStyles: {
+						'font-size': '13px'
+					}
 				});
 				this._dialogObject.okButton.enabled = true;
 			} else {
 				this._connectionStatus.text = constants.SERVICE_NOT_READY(this.createdMigrationService!.name);
 				this._connectionStatus.updateProperties(<azdata.InfoBoxComponentProperties>{
 					text: constants.SERVICE_NOT_READY(this.createdMigrationService!.name),
-					style: 'warning'
+					style: 'warning',
+					CSSStyles: {
+						'font-size': '13px'
+					}
 				});
 				this._dialogObject.okButton.enabled = false;
 			}
@@ -461,10 +521,7 @@ export class CreateSqlMigrationServiceDialog {
 						value: keys.authKey1
 					},
 					{
-						value: this._copyKey1Button
-					},
-					{
-						value: this._refreshKey1Button
+						value: this._view.modelBuilder.flexContainer().withItems([this._copyKey1Button, this._refreshKey1Button]).component()
 					}
 				],
 				[
@@ -475,10 +532,7 @@ export class CreateSqlMigrationServiceDialog {
 						value: keys.authKey2
 					},
 					{
-						value: this._copyKey2Button
-					},
-					{
-						value: this._refreshKey2Button
+						value: this._view.modelBuilder.flexContainer().withItems([this._copyKey2Button, this._refreshKey2Button]).component()
 					}
 				]
 			]
@@ -492,4 +546,10 @@ export class CreateSqlMigrationServiceDialog {
 			level: level
 		};
 	}
+
+	private setFormEnabledState(enable: boolean): void {
+		this._formSubmitButton.enabled = enable;
+		this.migrationServiceResourceGroupDropdown.enabled = enable;
+		this.migrationServiceNameText.enabled = enable;
+	}
 }

extensions/sql-migration/src/dialog/migrationCutover/migrationCutoverDialog.ts

@@ -32,6 +32,7 @@ export class MigrationCutoverDialog {
 	private _targetVersion!: azdata.TextComponent;
 	private _migrationStatus!: azdata.TextComponent;
 	private _fullBackupFile!: azdata.TextComponent;
+	private _backupLocation!: azdata.TextComponent;
 	private _lastAppliedLSN!: azdata.TextComponent;
 	private _lastAppliedBackupFile!: azdata.TextComponent;
 	private _lastAppliedBackupTakenOn!: azdata.TextComponent;
@@ -44,7 +45,7 @@ export class MigrationCutoverDialog {
 
 	constructor(migration: MigrationContext) {
 		this._model = new MigrationCutoverDialogModel(migration);
-		this._dialogObject = azdata.window.createModelViewDialog(loc.MIGRATION_CUTOVER, 'MigrationCutoverDialog', 1000);
+		this._dialogObject = azdata.window.createModelViewDialog('', 'MigrationCutoverDialog', 1000);
 	}
 
 	async initialize(): Promise<void> {
@@ -65,17 +66,17 @@ export class MigrationCutoverDialog {
 
 			flexServer.addItem(sourceDatabase.flexContainer, {
 				CSSStyles: {
-					'width': '150px'
+					'width': '200px'
 				}
 			});
 			flexServer.addItem(sourceDetails.flexContainer, {
 				CSSStyles: {
-					'width': '150px'
+					'width': '200px'
 				}
 			});
 			flexServer.addItem(sourceVersion.flexContainer, {
 				CSSStyles: {
-					'width': '150px'
+					'width': '200px'
 				}
 			});
 
@@ -93,26 +94,28 @@ export class MigrationCutoverDialog {
 
 			flexTarget.addItem(targetDatabase.flexContainer, {
 				CSSStyles: {
-					'width': '230px'
+					'width': '200px'
 				}
 			});
 			flexTarget.addItem(targetServer.flexContainer, {
 				CSSStyles: {
-					'width': '230px'
+					'width': '200px'
 				}
 			});
 			flexTarget.addItem(targetVersion.flexContainer, {
 				CSSStyles: {
-					'width': '230px'
+					'width': '200px'
 				}
 			});
 
 			const migrationStatus = this.createInfoField(loc.MIGRATION_STATUS, '');
 			const fullBackupFileOn = this.createInfoField(loc.FULL_BACKUP_FILES, '');
+			const backupLocation = this.createInfoField(loc.BACKUP_LOCATION, '');
 
 
 			this._migrationStatus = migrationStatus.text;
 			this._fullBackupFile = fullBackupFileOn.text;
+			this._backupLocation = backupLocation.text;
 
 			const flexStatus = view.modelBuilder.flexContainer().withLayout({
 				flexFlow: 'column'
@@ -120,12 +123,17 @@ export class MigrationCutoverDialog {
 
 			flexStatus.addItem(migrationStatus.flexContainer, {
 				CSSStyles: {
-					'width': '180px'
+					'width': '200px'
 				}
 			});
 			flexStatus.addItem(fullBackupFileOn.flexContainer, {
 				CSSStyles: {
-					'width': '180px'
+					'width': '200px'
+				}
+			});
+			flexStatus.addItem(backupLocation.flexContainer, {
+				CSSStyles: {
+					'width': '200px'
 				}
 			});
 
@@ -133,6 +141,7 @@ export class MigrationCutoverDialog {
 			const lastAppliedBackup = this.createInfoField(loc.LAST_APPLIED_BACKUP_FILES, '');
 			const lastAppliedBackupOn = this.createInfoField(loc.LAST_APPLIED_BACKUP_FILES_TAKEN_ON, '');
 
+
 			this._lastAppliedLSN = lastSSN.text;
 			this._lastAppliedBackupFile = lastAppliedBackup.text;
 			this._lastAppliedBackupTakenOn = lastAppliedBackupOn.text;
@@ -142,22 +151,22 @@ export class MigrationCutoverDialog {
 			}).component();
 			flexFile.addItem(lastSSN.flexContainer, {
 				CSSStyles: {
-					'width': '230px'
+					'width': '200px'
 				}
 			});
 			flexFile.addItem(lastAppliedBackup.flexContainer, {
 				CSSStyles: {
-					'width': '230px'
+					'width': '200px'
 				}
 			});
 			flexFile.addItem(lastAppliedBackupOn.flexContainer, {
 				CSSStyles: {
-					'width': '230px'
+					'width': '200px'
 				}
 			});
 			const flexInfo = view.modelBuilder.flexContainer().withProps({
 				CSSStyles: {
-					'width': '700px'
+					'width': '800px',
 				}
 			}).component();
 
@@ -165,7 +174,7 @@ export class MigrationCutoverDialog {
 				flex: '0',
 				CSSStyles: {
 					'flex': '0',
-					'width': '150px'
+					'width': '200px'
 				}
 			});
 
@@ -173,7 +182,7 @@ export class MigrationCutoverDialog {
 				flex: '0',
 				CSSStyles: {
 					'flex': '0',
-					'width': '230px'
+					'width': '200px'
 				}
 			});
 
@@ -181,7 +190,7 @@ export class MigrationCutoverDialog {
 				flex: '0',
 				CSSStyles: {
 					'flex': '0',
-					'width': '180px'
+					'width': '200px'
 				}
 			});
 
@@ -240,11 +249,17 @@ export class MigrationCutoverDialog {
 			const formBuilder = view.modelBuilder.formContainer().withFormItems(
 				[
 					{
-						component: await this.migrationContainerHeader()
+						component: this.migrationContainerHeader()
+					},
+					{
+						component: this._view.modelBuilder.separator().withProps({ width: '800px' }).component()
 					},
 					{
 						component: flexInfo
 					},
+					{
+						component: this._view.modelBuilder.separator().withProps({ width: '800px' }).component()
+					},
 					{
 						component: this._fileCount
 					},
@@ -267,30 +282,59 @@ export class MigrationCutoverDialog {
 
 
 	private migrationContainerHeader(): azdata.FlexContainer {
-		const header = this._view.modelBuilder.flexContainer().withLayout({
+		const sqlDatbaseLogo = this._view.modelBuilder.image().withProps({
+			iconPath: IconPathHelper.sqlDatabaseLogo,
+			iconHeight: '32px',
+			iconWidth: '32px',
+			width: '32px',
+			height: '32px'
 		}).component();
 
 		this._databaseTitleName = this._view.modelBuilder.text().withProps({
 			CSSStyles: {
-				'font-size': 'large',
-				'width': '400px'
+				'font-size': '16px',
+				'font-weight': 'bold',
+				'margin': '0px'
 			},
-			value: this._model._migration.migrationContext.name
+			value: this._model._migration.migrationContext.properties.sourceDatabaseName
 		}).component();
 
-		header.addItem(this._databaseTitleName, {
-			flex: '0',
+		const databaseSubTitle = this._view.modelBuilder.text().withProps({
 			CSSStyles: {
-				'width': '500px'
+				'font-size': '10px',
+				'margin': '5px 0px'
+			},
+			value: loc.DATABASE
+		}).component();
+
+		const titleContainer = this._view.modelBuilder.flexContainer().withItems([
+			this._databaseTitleName,
+			databaseSubTitle
+		]).withLayout({
+			'flexFlow': 'column'
+		}).component();
+
+
+		const titleLogoContainer = this._view.modelBuilder.flexContainer().component();
+
+		titleLogoContainer.addItem(sqlDatbaseLogo, {
+			flex: '0'
+		});
+		titleLogoContainer.addItem(titleContainer, {
+			CSSStyles: {
+				'margin-left': '5px'
 			}
 		});
 
+		const headerActions = this._view.modelBuilder.flexContainer().withLayout({
+		}).component();
+
 		this._cutoverButton = this._view.modelBuilder.button().withProps({
 			iconPath: IconPathHelper.cutover,
 			iconHeight: '14px',
 			iconWidth: '12px',
 			label: 'Start Cutover',
-			height: '55px',
+			height: '20px',
 			width: '100px',
 			enabled: false
 		}).component();
@@ -307,11 +351,8 @@ export class MigrationCutoverDialog {
 			}
 		});
 
-		header.addItem(this._cutoverButton, {
-			flex: '0',
-			CSSStyles: {
-				'width': '100px'
-			}
+		headerActions.addItem(this._cutoverButton, {
+			flex: '0'
 		});
 
 		this._cancelButton = this._view.modelBuilder.button().withProps({
@@ -319,19 +360,16 @@ export class MigrationCutoverDialog {
 			iconHeight: '16px',
 			iconWidth: '16px',
 			label: loc.CANCEL_MIGRATION,
-			height: '55px',
-			width: '130px'
+			height: '20px',
+			width: '120px'
 		}).component();
 
 		this._cancelButton.onDidClick((e) => {
 			this.cancelMigration();
 		});
 
-		header.addItem(this._cancelButton, {
-			flex: '0',
-			CSSStyles: {
-				'width': '130px'
-			}
+		headerActions.addItem(this._cancelButton, {
+			flex: '0'
 		});
 
 
@@ -340,19 +378,16 @@ export class MigrationCutoverDialog {
 			iconHeight: '16px',
 			iconWidth: '16px',
 			label: 'Refresh',
-			height: '55px',
-			width: '100px'
+			height: '20px',
+			width: '65px'
 		}).component();
 
 		this._refreshButton.onDidClick((e) => {
 			this.refreshStatus();
 		});
 
-		header.addItem(this._refreshButton, {
+		headerActions.addItem(this._refreshButton, {
 			flex: '0',
-			CSSStyles: {
-				'width': '100px'
-			}
 		});
 
 		this._copyDatabaseMigrationDetails = this._view.modelBuilder.button().withProps({
@@ -360,8 +395,8 @@ export class MigrationCutoverDialog {
 			iconHeight: '16px',
 			iconWidth: '16px',
 			label: loc.COPY_MIGRATION_DETAILS,
-			height: '55px',
-			width: '100px'
+			height: '20px',
+			width: '150px'
 		}).component();
 
 		this._copyDatabaseMigrationDetails.onDidClick(async (e) => {
@@ -378,22 +413,34 @@ export class MigrationCutoverDialog {
 			vscode.window.showInformationMessage(loc.DETAILS_COPIED);
 		});
 
-		header.addItem(this._copyDatabaseMigrationDetails, {
+		headerActions.addItem(this._copyDatabaseMigrationDetails, {
 			flex: '0',
 			CSSStyles: {
-				'width': '100px'
+				'margin-left': '5px'
 			}
 		});
 
 		this._refreshLoader = this._view.modelBuilder.loadingComponent().withProps({
 			loading: false,
-			height: '55px'
+			height: '15px'
 		}).component();
 
-		header.addItem(this._refreshLoader, {
+		headerActions.addItem(this._refreshLoader, {
 			flex: '0',
 			CSSStyles: {
-				'margin-top': '15px'
+				'margin-left': '16px'
+			}
+		});
+
+		const header = this._view.modelBuilder.flexContainer().withItems([
+			titleLogoContainer
+		]).withLayout({
+			flexFlow: 'column'
+		}).component();
+
+		header.addItem(headerActions, {
+			'CSSStyles': {
+				'margin-top': '16px'
 			}
 		});
 
@@ -461,19 +508,19 @@ export class MigrationCutoverDialog {
 
 			this._sourceDatabase.value = sourceDatabaseName;
 			this._serverName.value = sqlServerName;
-			this._serverVersion.value = `${sqlServerVersion}
-			${sqlServerInfo.serverVersion}`;
+			this._serverVersion.value = `${sqlServerVersion} ${sqlServerInfo.serverVersion}`;
 
 			this._targetDatabase.value = targetDatabaseName;
 			this._targetServer.value = targetServerName;
 			this._targetVersion.value = targetServerVersion;
 
-			this._migrationStatus.value = migrationStatusTextValue;
-			this._fullBackupFile.value = fullBackupFileName!;
+			this._migrationStatus.value = migrationStatusTextValue ?? '---';
+			this._fullBackupFile.value = fullBackupFileName! ?? '-';
+			this._backupLocation.value = this._model._migration.migrationContext.properties.backupConfiguration?.sourceLocation?.fileShare?.path! ?? '-';
 
-			this._lastAppliedLSN.value = lastAppliedSSN!;
-			this._lastAppliedBackupFile.value = this._model.migrationStatus.properties.migrationStatusDetails?.lastRestoredFilename;
-			this._lastAppliedBackupTakenOn.value = lastAppliedBackupFileTakenOn! ? new Date(lastAppliedBackupFileTakenOn).toLocaleString() : '';
+			this._lastAppliedLSN.value = lastAppliedSSN! ?? '-';
+			this._lastAppliedBackupFile.value = this._model.migrationStatus.properties.migrationStatusDetails?.lastRestoredFilename ?? '-';
+			this._lastAppliedBackupTakenOn.value = lastAppliedBackupFileTakenOn! ? new Date(lastAppliedBackupFileTakenOn).toLocaleString() : '-';
 
 			this._fileCount.value = loc.ACTIVE_BACKUP_FILES_ITEMS(tableData.length);
 
@@ -495,7 +542,7 @@ export class MigrationCutoverDialog {
 			}
 
 			if (migrationStatusTextValue === MigrationStatus.InProgress) {
-				const fileNotRestored = await tableData.some(file => file.status !== 'Restored');
+				const fileNotRestored = await tableData.some(file => file.status !== 'Restored' && file.status !== 'Ignored');
 				this._cutoverButton.enabled = !fileNotRestored;
 				this._cancelButton.enabled = true;
 			} else {

extensions/sql-migration/src/dialog/migrationStatus/migrationStatusDialog.ts

@@ -10,6 +10,7 @@ import { MigrationContext, MigrationLocalStorage } from '../../models/migrationL
 import { MigrationCutoverDialog } from '../migrationCutover/migrationCutoverDialog';
 import { MigrationCategory, MigrationStatusDialogModel } from './migrationStatusDialogModel';
 import * as loc from '../../constants/strings';
+import { convertTimeDifferenceToDuration } from '../../api/utils';
 export class MigrationStatusDialog {
 	private _model: MigrationStatusDialogModel;
 	private _dialogObject!: azdata.window.Dialog;
@@ -138,7 +139,7 @@ export class MigrationStatusDialog {
 				const migrationRow: azdata.DeclarativeTableCellValue[] = [];
 
 				const databaseHyperLink = this._view.modelBuilder.hyperlink().withProps({
-					label: migration.migrationContext.name,
+					label: migration.migrationContext.properties.sourceDatabaseName,
 					url: ''
 				}).component();
 				databaseHyperLink.onDidClick(async (e) => {
@@ -148,13 +149,10 @@ export class MigrationStatusDialog {
 					value: databaseHyperLink,
 				});
 
-				const targetMigrationIcon = this._view.modelBuilder.image().withProps({
-					iconPath: (migration.targetManagedInstance.type === 'microsoft.sql/managedinstances') ? IconPathHelper.sqlMiLogo : IconPathHelper.sqlVmLogo,
-					iconWidth: '16px',
-					iconHeight: '16px',
-					width: '32px',
-					height: '20px'
-				}).component();
+				migrationRow.push({
+					value: (migration.targetManagedInstance.type === 'microsoft.sql/managedinstances') ? loc.SQL_MANAGED_INSTANCE : loc.SQL_VIRTUAL_MACHINE
+				});
+
 				const sqlMigrationName = this._view.modelBuilder.hyperlink().withProps({
 					label: migration.targetManagedInstance.name,
 					url: ''
@@ -163,25 +161,20 @@ export class MigrationStatusDialog {
 					vscode.window.showInformationMessage(loc.COMING_SOON);
 				});
 
-				const sqlMigrationContainer = this._view.modelBuilder.flexContainer().withProps({
-					CSSStyles: {
-						'justify-content': 'left'
-					}
-				}).component();
-				sqlMigrationContainer.addItem(targetMigrationIcon, {
-					flex: '0',
-					CSSStyles: {
-						'width': '32px'
-					}
-				});
-				sqlMigrationContainer.addItem(sqlMigrationName,
-					{
-						CSSStyles: {
-							'width': 'auto'
-						}
-					});
 				migrationRow.push({
-					value: sqlMigrationContainer
+					value: sqlMigrationName
+				});
+
+				const dms = this._view.modelBuilder.hyperlink().withProps({
+					label: migration.controller.name,
+					url: ''
+				}).component();
+				dms.onDidClick((e) => {
+					vscode.window.showInformationMessage(loc.COMING_SOON);
+				});
+
+				migrationRow.push({
+					value: dms
 				});
 
 				migrationRow.push({
@@ -209,6 +202,17 @@ export class MigrationStatusDialog {
 					value: loc.STATUS_WARNING_COUNT(migrationStatus, warningCount)
 				});
 
+				let duration;
+				if (migration.migrationContext.properties.endedOn) {
+					duration = convertTimeDifferenceToDuration(new Date(migration.migrationContext.properties.startedOn), new Date(migration.migrationContext.properties.endedOn));
+				} else {
+					duration = convertTimeDifferenceToDuration(new Date(migration.migrationContext.properties.startedOn), new Date());
+				}
+
+				migrationRow.push({
+					value: (migration.migrationContext.properties.startedOn) ? duration : '---'
+				});
+
 				migrationRow.push({
 					value: (migration.migrationContext.properties.startedOn) ? new Date(migration.migrationContext.properties.startedOn).toLocaleString() : '---'
 				});
@@ -237,14 +241,16 @@ export class MigrationStatusDialog {
 		const rowCssStyle: azdata.CssStyles = {
 			'border': 'none',
 			'text-align': 'left',
-			'border-bottom': '1px solid'
+			'border-bottom': '1px solid',
 		};
 
 		const headerCssStyles: azdata.CssStyles = {
 			'border': 'none',
 			'text-align': 'left',
 			'border-bottom': '1px solid',
-			'font-weight': 'bold'
+			'font-weight': 'bold',
+			'padding-left': '0px',
+			'padding-right': '0px'
 		};
 
 		this._statusTable = this._view.modelBuilder.declarativeTable().withProps({
@@ -252,7 +258,15 @@ export class MigrationStatusDialog {
 				{
 					displayName: loc.DATABASE,
 					valueType: azdata.DeclarativeDataType.component,
-					width: '100px',
+					width: '90px',
+					isReadOnly: true,
+					rowCssStyles: rowCssStyle,
+					headerCssStyles: headerCssStyles
+				},
+				{
+					displayName: loc.AZURE_SQL_TARGET,
+					valueType: azdata.DeclarativeDataType.string,
+					width: '140px',
 					isReadOnly: true,
 					rowCssStyles: rowCssStyle,
 					headerCssStyles: headerCssStyles
@@ -260,7 +274,15 @@ export class MigrationStatusDialog {
 				{
 					displayName: loc.TARGET_AZURE_SQL_INSTANCE_NAME,
 					valueType: azdata.DeclarativeDataType.component,
-					width: '170px',
+					width: '160px',
+					isReadOnly: true,
+					rowCssStyles: rowCssStyle,
+					headerCssStyles: headerCssStyles
+				},
+				{
+					displayName: loc.DATABASE_MIGRATION_SERVICE,
+					valueType: azdata.DeclarativeDataType.component,
+					width: '150px',
 					isReadOnly: true,
 					rowCssStyles: rowCssStyle,
 					headerCssStyles: headerCssStyles
@@ -281,6 +303,14 @@ export class MigrationStatusDialog {
 					rowCssStyles: rowCssStyle,
 					headerCssStyles: headerCssStyles
 				},
+				{
+					displayName: loc.DURATION,
+					valueType: azdata.DeclarativeDataType.string,
+					width: '55px',
+					isReadOnly: true,
+					rowCssStyles: rowCssStyle,
+					headerCssStyles: headerCssStyles
+				},
 				{
 					displayName: loc.START_TIME,
 					valueType: azdata.DeclarativeDataType.string,