Adding database specific settings, cancel migration and other dark UI fixes (#14626)

* Made dashboard dark ui compat

* foundations for sql vm

* WIP

* Added cancel migration
Added refresh migraiton table
Added multi db config

* disabling cancel migration button if the migration is not in progress.

* Addressing some PR based coments
- Removing (s) from loc strings
- Adding return type to cancel migration
- removing _ from public vars
- localizing strings
- Adding name to dialogs for telemetry

* Adding todo comment for offline mode

extensions/sql-migration/src/dialog/assessmentResults/assessmentResultsDialog.ts

@@ -128,6 +128,7 @@ export class AssessmentResultsDialog {
 	protected async execute() {
 		this.model._migrationDbs = this._tree.selectedDbs();
 		this.skuRecommendationPage.refreshDatabaseCount(this._model._migrationDbs.length);
+		this.model.refreshDatabaseBackupPage = true;
 		this._isOpen = false;
 	}
 

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

@@ -16,6 +16,7 @@ export class MigrationCutoverDialog {
 	private _databaseTitleName!: azdata.TextComponent;
 	private _databaseCutoverButton!: azdata.ButtonComponent;
 	private _refresh!: azdata.ButtonComponent;
+	private _cancel!: azdata.ButtonComponent;
 
 	private _serverName!: azdata.TextComponent;
 	private _serverVersion!: azdata.TextComponent;
@@ -290,6 +291,27 @@ export class MigrationCutoverDialog {
 			}
 		});
 
+		this._cancel = this._view.modelBuilder.button().withProps({
+			iconPath: IconPathHelper.discard,
+			iconHeight: '16px',
+			iconWidth: '16px',
+			label: loc.CANCEL_MIGRATION,
+			height: '55px',
+			width: '130px'
+		}).component();
+
+		this._cancel.onDidClick((e) => {
+			this.cancelMigration();
+		});
+
+		header.addItem(this._cancel, {
+			flex: '0',
+			CSSStyles: {
+				'width': '130px'
+			}
+		});
+
+
 		this._refresh = this._view.modelBuilder.button().withProps({
 			iconPath: IconPathHelper.refresh,
 			iconHeight: '16px',
@@ -392,6 +414,7 @@ export class MigrationCutoverDialog {
 				this._databaseCutoverButton.enabled = true;
 			} else {
 				this._databaseCutoverButton.enabled = false;
+				this._cancel.enabled = false;
 			}
 		} catch (e) {
 			console.log(e);
@@ -419,7 +442,10 @@ export class MigrationCutoverDialog {
 			value: value,
 			CSSStyles: {
 				'margin-top': '5px',
-				'margin-bottom': '0'
+				'margin-bottom': '0',
+				'width': '100%',
+				'overflow': 'hidden',
+				'text-overflow': 'ellipses'
 			}
 		}).component();
 		flexContainer.addItem(textComponent);
@@ -428,6 +454,11 @@ export class MigrationCutoverDialog {
 			text: textComponent
 		};
 	}
+
+	private async cancelMigration(): Promise<void> {
+		await this._model.cancelMigration();
+		await this.refreshStatus();
+	}
 }
 
 interface ActiveBackupFileSchema {

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

@@ -3,7 +3,7 @@
  *  Licensed under the Source EULA. See License.txt in the project root for license information.
  *--------------------------------------------------------------------------------------------*/
 
-import { getMigrationStatus, DatabaseMigration, startMigrationCutover } from '../../api/azure';
+import { getMigrationStatus, DatabaseMigration, startMigrationCutover, stopMigration } from '../../api/azure';
 import { MigrationContext } from '../../models/migrationLocalStorage';
 
 
@@ -36,4 +36,19 @@ export class MigrationCutoverDialogModel {
 		}
 		return undefined!;
 	}
+
+	public async cancelMigration(): Promise<void> {
+		try {
+			if (this.migrationStatus) {
+				await stopMigration(
+					this._migration.azureAccount,
+					this._migration.subscription,
+					this.migrationStatus
+				);
+			}
+		} catch (error) {
+			console.log(error);
+		}
+		return undefined!;
+	}
 }

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

@@ -10,6 +10,7 @@ import { MigrationContext } from '../../models/migrationLocalStorage';
 import { MigrationCutoverDialog } from '../migrationCutover/migrationCutoverDialog';
 import { MigrationCategory, MigrationStatusDialogModel } from './migrationStatusDialogModel';
 import * as loc from '../../constants/strings';
+import { getDatabaseMigration } from '../../api/azure';
 export class MigrationStatusDialog {
 	private _model: MigrationStatusDialogModel;
 	private _dialogObject!: azdata.window.Dialog;
@@ -84,6 +85,10 @@ export class MigrationStatusDialog {
 			label: 'Refresh',
 		}).component();
 
+		this._refresh.onDidClick((e) => {
+			this.refreshTable();
+		});
+
 		const flexContainer = this._view.modelBuilder.flexContainer().component();
 
 		flexContainer.addItem(this._searchBox, {
@@ -136,7 +141,7 @@ export class MigrationStatusDialog {
 					height: '20px'
 				}).component();
 				const sqlMigrationName = this._view.modelBuilder.hyperlink().withProps({
-					label: migration.migrationContext.name,
+					label: migration.targetManagedInstance.name,
 					url: ''
 				}).component();
 				sqlMigrationName.onDidClick((e) => {
@@ -184,6 +189,19 @@ export class MigrationStatusDialog {
 		}
 	}
 
+	private refreshTable(): void {
+		this._model._migrations.forEach(async (migration) => {
+			migration.migrationContext = await getDatabaseMigration(
+				migration.azureAccount,
+				migration.subscription,
+				migration.targetManagedInstance.location,
+				migration.migrationContext.id
+			);
+		});
+
+		this.populateMigrationTable();
+	}
+
 	private createStatusTable(): azdata.DeclarativeTableComponent {
 		this._statusTable = this._view.modelBuilder.declarativeTable().withProps({
 			columns: [