mirror of
https://github.com/ckaczor/azuredatastudio.git
synced 2026-01-20 17:22:51 -05:00
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:
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user