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
This commit is contained in:
Aasim Khan
2021-04-22 10:19:36 -07:00
committed by GitHub
parent fcaaf1cb29
commit 37894c9e96
14 changed files with 694 additions and 426 deletions

View File

@@ -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,