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

@@ -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;
}
}