ckaczor/azuredatastudio
1
0
Fork 0
mirror of https://github.com/ckaczor/azuredatastudio.git synced 2026-01-27 17:23:21 -05:00
Code Issues Packages Projects Releases Wiki Activity

Standardize font styling on sql migration extension (#16968)

Browse Source
This commit is contained in:
Rachel Kim
2021-10-11 14:58:37 -07:00
committed by GitHub
parent cd053ade22
commit e5f50499ce
20 changed files with 715 additions and 803 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
extensions/sql-migration/src/wizard/accountsSelectionPage.ts
View File

@@ -11,6 +11,7 @@ import * as constants from '../constants/strings';
import { WIZARD_INPUT_COMPONENT_WIDTH } from './wizardController';
import { deepClone, findDropDownItemIndex, selectDropDownIndex } from '../api/utils';
import { getSubscriptions } from '../api/azure';
import * as styles from '../constants/styles';
export class AccountsSelectionPage extends MigrationWizardPage {
private _azureAccountsDropdown!: azdata.DropDownComponent;
@@ -20,19 +21,34 @@ export class AccountsSelectionPage extends MigrationWizardPage {
constructor(wizard: azdata.window.Wizard, migrationStateModel: MigrationStateModel) {
super(wizard, azdata.window.createWizardPage(constants.ACCOUNTS_SELECTION_PAGE_TITLE), migrationStateModel);
this.wizardPage.description = constants.ACCOUNTS_SELECTION_PAGE_DESCRIPTION;
}
protected async registerContent(view: azdata.ModelView): Promise<void> {
const pageDescription = {
title: '',
component: view.modelBuilder.text().withProps({
value: constants.ACCOUNTS_SELECTION_PAGE_DESCRIPTION,
CSSStyles: {
...styles.BODY_CSS,
'margin': '0',
}
}).component()
};
this.wizard.customButtons[0].enabled = true;
const form = view.modelBuilder.formContainer()
.withFormItems(
[
pageDescription,
await this.createAzureAccountsDropdown(view),
await this.createAzureTenantContainer(view),
]
);
await view.initializeModel(form.component());
).withProps({
CSSStyles: {
'padding-top': '0'
}
}).component();
await view.initializeModel(form);
await this.populateAzureAccountsDropdown();
this._disposables.push(view.onClosed(e =>
this._disposables.forEach(
@@ -44,8 +60,7 @@ export class AccountsSelectionPage extends MigrationWizardPage {
const azureAccountLabel = view.modelBuilder.text().withProps({
value: constants.ACCOUNTS_SELECTION_PAGE_TITLE,
CSSStyles: {
'font-size': '13px',
'font-weight': 'bold',
...styles.LABEL_CSS
}
}).component();
@@ -117,7 +132,7 @@ export class AccountsSelectionPage extends MigrationWizardPage {
label: constants.ACCOUNT_LINK_BUTTON_LABEL,
url: '',
CSSStyles: {
'font-size': '13px',
...styles.BODY_CSS
}
})
.component();
@@ -153,8 +168,7 @@ export class AccountsSelectionPage extends MigrationWizardPage {
const azureTenantDropdownLabel = view.modelBuilder.text().withProps({
value: constants.AZURE_TENANT,
CSSStyles: {
'font-size': '13px',
'font-weight': 'bold'
...styles.LABEL_CSS
}
}).component();

173
extensions/sql-migration/src/wizard/databaseBackupPage.ts
View File

@@ -13,6 +13,7 @@ import * as constants from '../constants/strings';
import { IconPathHelper } from '../constants/iconPathHelper';
import { WIZARD_INPUT_COMPONENT_WIDTH } from './wizardController';
import { findDropDownItemIndex, selectDropDownIndex } from '../api/utils';
import * as styles from '../constants/styles';
const WIZARD_TABLE_COLUMN_WIDTH = '200px';
const WIZARD_TABLE_COLUMN_WIDTH_SMALL = '170px';
@@ -34,7 +35,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
private _networkSharePath!: azdata.InputBoxComponent;
private _sourceHelpText!: azdata.TextComponent;
private _sqlSourceUsernameInput!: azdata.InputBoxComponent;
private _sqlSourcepassword!: azdata.InputBoxComponent;
private _sqlSourcePassword!: azdata.InputBoxComponent;
private _blobContainer!: azdata.FlexContainer;
private _blobContainerSubscription!: azdata.TextComponent;
@@ -52,7 +53,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
private _networkShareContainerStorageAccountRefreshButton!: azdata.ButtonComponent;
private _targetDatabaseContainer!: azdata.FlexContainer;
private _newtworkShareTargetDatabaseNamesTable!: azdata.DeclarativeTableComponent;
private _networkShareTargetDatabaseNamesTable!: azdata.DeclarativeTableComponent;
private _blobContainerTargetDatabaseNamesTable!: azdata.DeclarativeTableComponent;
private _networkTableContainer!: azdata.FlexContainer;
private _blobTableContainer!: azdata.FlexContainer;
@@ -97,14 +98,18 @@ export class DatabaseBackupPage extends MigrationWizardPage {
component: this._networkShareStorageAccountDetails
}
]
);
).withProps({
CSSStyles: {
'padding-top': '0'
}
}).component();
this._disposables.push(this._view.onClosed(e => {
this._disposables.forEach(
d => { try { d.dispose(); } catch { } });
}));
await view.initializeModel(form.component());
await view.initializeModel(form);
}
private createBackupLocationComponent(): azdata.FlexContainer {
@@ -113,7 +118,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
const selectLocationText = this._view.modelBuilder.text().withProps({
value: constants.DATABASE_BACKUP_PAGE_DESCRIPTION,
CSSStyles: {
'font-size': '13px'
...styles.BODY_CSS
}
}).component();
@@ -122,7 +127,8 @@ export class DatabaseBackupPage extends MigrationWizardPage {
name: buttonGroup,
label: constants.DATABASE_BACKUP_NC_NETWORK_SHARE_RADIO_LABEL,
CSSStyles: {
'font-size': '13px'
...styles.BODY_CSS,
'margin': '0'
}
}).component();
@@ -137,7 +143,8 @@ export class DatabaseBackupPage extends MigrationWizardPage {
name: buttonGroup,
label: constants.DATABASE_BACKUP_NC_BLOB_STORAGE_RADIO_LABEL,
CSSStyles: {
'font-size': '13px'
...styles.BODY_CSS,
'margin': '0'
}
}).component();
@@ -179,15 +186,15 @@ export class DatabaseBackupPage extends MigrationWizardPage {
value: constants.SOURCE_CREDENTIALS,
width: WIZARD_INPUT_COMPONENT_WIDTH,
CSSStyles: {
'font-size': '14px',
'font-weight': 'bold'
...styles.SECTION_HEADER_CSS,
'margin-top': '4px'
}
}).component();
this._sourceHelpText = this._view.modelBuilder.text().withProps({
width: WIZARD_INPUT_COMPONENT_WIDTH,
CSSStyles: {
'font-size': '13px',
...styles.BODY_CSS
}
}).component();
@@ -196,14 +203,16 @@ export class DatabaseBackupPage extends MigrationWizardPage {
width: WIZARD_INPUT_COMPONENT_WIDTH,
requiredIndicator: true,
CSSStyles: {
'font-size': '13px',
'font-weight': 'bold',
...styles.LABEL_CSS
}
}).component();
this._sqlSourceUsernameInput = this._view.modelBuilder.inputBox().withProps({
required: true,
enabled: false,
width: WIZARD_INPUT_COMPONENT_WIDTH,
CSSStyles: {
'margin-top': '-1em'
},
}).component();
this._disposables.push(this._sqlSourceUsernameInput.onTextChanged(value => {
this.migrationStateModel._sqlServerUsername = value;
@@ -214,16 +223,18 @@ export class DatabaseBackupPage extends MigrationWizardPage {
width: WIZARD_INPUT_COMPONENT_WIDTH,
requiredIndicator: true,
CSSStyles: {
'font-size': '13px',
'font-weight': 'bold',
...styles.LABEL_CSS
}
}).component();
this._sqlSourcepassword = this._view.modelBuilder.inputBox().withProps({
this._sqlSourcePassword = this._view.modelBuilder.inputBox().withProps({
required: true,
inputType: 'password',
width: WIZARD_INPUT_COMPONENT_WIDTH
width: WIZARD_INPUT_COMPONENT_WIDTH,
CSSStyles: {
'margin-top': '-1em'
},
}).component();
this._disposables.push(this._sqlSourcepassword.onTextChanged(value => {
this._disposables.push(this._sqlSourcePassword.onTextChanged(value => {
this.migrationStateModel._sqlServerPassword = value;
}));
@@ -232,8 +243,8 @@ export class DatabaseBackupPage extends MigrationWizardPage {
value: constants.DATABASE_BACKUP_NETWORK_SHARE_HEADER_TEXT,
width: WIZARD_INPUT_COMPONENT_WIDTH,
CSSStyles: {
'font-size': '14px',
'font-weight': 'bold'
...styles.SECTION_HEADER_CSS,
'margin-top': '24px'
}
}).component();
@@ -241,7 +252,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
value: constants.DATABASE_BACKUP_NC_NETWORK_SHARE_HELP_TEXT,
width: WIZARD_INPUT_COMPONENT_WIDTH,
CSSStyles: {
'font-size': '13px',
...styles.BODY_CSS
}
}).component();
@@ -251,8 +262,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
width: WIZARD_INPUT_COMPONENT_WIDTH,
requiredIndicator: true,
CSSStyles: {
'font-size': '13px',
'font-weight': 'bold'
...styles.LABEL_CSS
}
}).component();
this._networkSharePath = this._view.modelBuilder.inputBox().withProps({
@@ -260,8 +270,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
validationErrorMessage: constants.INVALID_NETWORK_SHARE_LOCATION,
width: WIZARD_INPUT_COMPONENT_WIDTH,
CSSStyles: {
'font-size': '13px',
'font-weight': 'bold'
'margin-top': '-1em'
}
}).withValidation((component) => {
if (this.migrationStateModel._databaseBackup.networkContainerType === NetworkContainerType.NETWORK_SHARE) {
@@ -283,8 +292,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
style: 'information',
width: WIZARD_INPUT_COMPONENT_WIDTH,
CSSStyles: {
'font-size': '13px',
'margin-top': '10px'
...styles.BODY_CSS
}
}).component();
@@ -295,8 +303,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
width: WIZARD_INPUT_COMPONENT_WIDTH,
requiredIndicator: true,
CSSStyles: {
'font-size': '13px',
'font-weight': 'bold'
...styles.LABEL_CSS
}
}).component();
this._windowsUserAccountText = this._view.modelBuilder.inputBox()
@@ -304,7 +311,11 @@ export class DatabaseBackupPage extends MigrationWizardPage {
placeHolder: constants.WINDOWS_USER_ACCOUNT,
required: true,
validationErrorMessage: constants.INVALID_USER_ACCOUNT,
width: WIZARD_INPUT_COMPONENT_WIDTH
width: WIZARD_INPUT_COMPONENT_WIDTH,
CSSStyles: {
...styles.BODY_CSS,
'margin-top': '-1em'
}
})
.withValidation((component) => {
if (this.migrationStateModel._databaseBackup.networkContainerType === NetworkContainerType.NETWORK_SHARE) {
@@ -326,8 +337,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
width: WIZARD_INPUT_COMPONENT_WIDTH,
requiredIndicator: true,
CSSStyles: {
'font-size': '13px',
'font-weight': 'bold'
...styles.LABEL_CSS,
}
}).component();
this._passwordText = this._view.modelBuilder.inputBox()
@@ -335,7 +345,11 @@ export class DatabaseBackupPage extends MigrationWizardPage {
placeHolder: constants.DATABASE_BACKUP_NETWORK_SHARE_PASSWORD_PLACEHOLDER,
inputType: 'password',
required: true,
width: WIZARD_INPUT_COMPONENT_WIDTH
width: WIZARD_INPUT_COMPONENT_WIDTH,
CSSStyles: {
...styles.BODY_CSS,
'margin-top': '-1em'
}
}).component();
this._disposables.push(this._passwordText.onTextChanged((value) => {
this.migrationStateModel._databaseBackup.networkShare.password = value;
@@ -348,7 +362,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
usernameLabel,
this._sqlSourceUsernameInput,
sqlPasswordLabel,
this._sqlSourcepassword,
this._sqlSourcePassword,
networkShareHeading,
networkShareHelpText,
networkLocationInputBoxLabel,
@@ -373,8 +387,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
value: constants.DATABASE_BACKUP_BLOB_STORAGE_HEADER_TEXT,
width: WIZARD_INPUT_COMPONENT_WIDTH,
CSSStyles: {
'font-size': '14px',
'font-weight': 'bold'
...styles.SECTION_HEADER_CSS
}
}).component();
@@ -382,7 +395,8 @@ export class DatabaseBackupPage extends MigrationWizardPage {
value: constants.DATABASE_BACKUP_BLOB_STORAGE_HELP_TEXT,
width: WIZARD_INPUT_COMPONENT_WIDTH,
CSSStyles: {
'font-size': '13px',
...styles.BODY_CSS,
'margin-bottom': '12px'
}
}).component();
@@ -390,16 +404,15 @@ export class DatabaseBackupPage extends MigrationWizardPage {
.withProps({
value: constants.DATABASE_BACKUP_BLOB_STORAGE_SUBSCRIPTION_LABEL,
CSSStyles: {
'font-size': '13px',
'font-weight': 'bold'
...styles.LABEL_CSS
}
}).component();
this._blobContainerSubscription = this._view.modelBuilder.text()
.withProps({
enabled: false,
CSSStyles: {
'font-size': '13px',
'margin': '0px'
...styles.BODY_CSS,
'margin': '0 0 12px 0'
}
}).component();
@@ -407,16 +420,15 @@ export class DatabaseBackupPage extends MigrationWizardPage {
.withProps({
value: constants.LOCATION,
CSSStyles: {
'font-size': '13px',
'font-weight': 'bold'
...styles.LABEL_CSS
}
}).component();
this._blobContainerLocation = this._view.modelBuilder.text()
.withProps({
enabled: false,
CSSStyles: {
'font-size': '13px',
'margin': '0px 0px'
...styles.BODY_CSS,
'margin': '0px'
}
}).component();
@@ -442,14 +454,14 @@ export class DatabaseBackupPage extends MigrationWizardPage {
private createTargetDatabaseContainer(): azdata.FlexContainer {
const headerCssStyles: azdata.CssStyles = {
...styles.LABEL_CSS,
'border': 'none',
'font-size': '13px',
'font-weight': 'bold',
'text-align': 'left',
'box-shadow': 'inset 0px -1px 0px #F3F2F1',
};
const rowCssStyle: azdata.CssStyles = {
...styles.BODY_CSS,
'border': 'none',
'font-size': '13px',
'box-shadow': 'inset 0px -1px 0px #F3F2F1',
@@ -459,8 +471,8 @@ export class DatabaseBackupPage extends MigrationWizardPage {
.withProps({
value: constants.DATABASE_BACKUP_NETWORK_SHARE_TABLE_HELP_TEXT,
CSSStyles: {
'font-size': '13px',
'font-weight': 'bold'
...styles.SECTION_HEADER_CSS,
'margin-top': '8px'
}
}).component();
@@ -468,12 +480,11 @@ export class DatabaseBackupPage extends MigrationWizardPage {
.withProps({
value: constants.DATABASE_BACKUP_BLOB_STORAGE_TABLE_HELP_TEXT,
CSSStyles: {
'font-size': '13px',
'font-weight': 'bold'
...styles.SECTION_HEADER_CSS
}
}).component();
this._newtworkShareTargetDatabaseNamesTable = this._view.modelBuilder.declarativeTable().withProps({
this._networkShareTargetDatabaseNamesTable = this._view.modelBuilder.declarativeTable().withProps({
columns: [
{
displayName: constants.SOURCE_DATABASE,
@@ -550,14 +561,14 @@ export class DatabaseBackupPage extends MigrationWizardPage {
this._networkTableContainer = this._view.modelBuilder.flexContainer().withItems([
networkShareTableText,
this._newtworkShareTargetDatabaseNamesTable
this._networkShareTargetDatabaseNamesTable
]).component();
const allFieldsRequiredLabel = this._view.modelBuilder.text()
.withProps({
value: constants.ALL_FIELDS_REQUIRED,
CSSStyles: {
'font-size': '13px',
...styles.BODY_CSS
}
}).component();
@@ -584,8 +595,8 @@ export class DatabaseBackupPage extends MigrationWizardPage {
value: constants.DATABASE_BACKUP_NETWORK_SHARE_AZURE_ACCOUNT_HEADER,
width: WIZARD_INPUT_COMPONENT_WIDTH,
CSSStyles: {
'font-size': '14px',
'font-weight': 'bold'
...styles.SECTION_HEADER_CSS,
'margin-top': '12px'
}
}).component();
@@ -594,7 +605,8 @@ export class DatabaseBackupPage extends MigrationWizardPage {
value: constants.DATABASE_BACKUP_NETWORK_SHARE_AZURE_ACCOUNT_HELP,
width: WIZARD_INPUT_COMPONENT_WIDTH,
CSSStyles: {
'font-size': '13px',
...styles.BODY_CSS,
'margin-bottom': '12px'
}
}).component();
@@ -602,10 +614,10 @@ export class DatabaseBackupPage extends MigrationWizardPage {
.withProps({
value: constants.SUBSCRIPTION,
width: WIZARD_INPUT_COMPONENT_WIDTH,
requiredIndicator: true,
// requiredIndicator: true,
CSSStyles: {
'font-size': '13px',
'font-weight': 'bold'
...styles.LABEL_CSS,
'margin': '0'
}
}).component();
this._networkShareContainerSubscription = this._view.modelBuilder.text()
@@ -613,8 +625,8 @@ export class DatabaseBackupPage extends MigrationWizardPage {
enabled: false,
width: WIZARD_INPUT_COMPONENT_WIDTH,
CSSStyles: {
'font-size': '13px',
'margin': '0px 0px'
// ...styles.BODY_CSS,
// 'margin-top': '-1em'
}
}).component();
@@ -622,10 +634,10 @@ export class DatabaseBackupPage extends MigrationWizardPage {
.withProps({
value: constants.LOCATION,
width: WIZARD_INPUT_COMPONENT_WIDTH,
requiredIndicator: true,
// requiredIndicator: true,
CSSStyles: {
'font-size': '13px',
'font-weight': 'bold'
...styles.LABEL_CSS,
'margin': '12px 0 0'
}
}).component();
this._networkShareContainerLocation = this._view.modelBuilder.text()
@@ -633,8 +645,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
enabled: false,
width: WIZARD_INPUT_COMPONENT_WIDTH,
CSSStyles: {
'font-size': '13px',
'margin': '0px 0px'
'margin': '0'
}
}).component();
@@ -644,8 +655,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
width: WIZARD_INPUT_COMPONENT_WIDTH,
requiredIndicator: true,
CSSStyles: {
'font-size': '13px',
'font-weight': 'bold'
...styles.LABEL_CSS
}
}).component();
this._networkShareStorageAccountResourceGroupDropdown = this._view.modelBuilder.dropDown()
@@ -655,6 +665,9 @@ export class DatabaseBackupPage extends MigrationWizardPage {
width: WIZARD_INPUT_COMPONENT_WIDTH,
editable: true,
fireOnTextChange: true,
CSSStyles: {
'margin-top': '-1em'
},
}).component();
this._disposables.push(this._networkShareStorageAccountResourceGroupDropdown.onValueChanged(async (value) => {
const selectedIndex = findDropDownItemIndex(this._networkShareStorageAccountResourceGroupDropdown, value);
@@ -670,8 +683,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
width: WIZARD_INPUT_COMPONENT_WIDTH,
requiredIndicator: true,
CSSStyles: {
'font-size': '13px',
'font-weight': 'bold'
...styles.LABEL_CSS
}
}).component();
this._networkShareContainerStorageAccountDropdown = this._view.modelBuilder.dropDown()
@@ -701,7 +713,12 @@ export class DatabaseBackupPage extends MigrationWizardPage {
await this.loadNetworkShareStorageDropdown();
}));
const storageAccountContainer = this._view.modelBuilder.flexContainer().component();
const storageAccountContainer = this._view.modelBuilder.flexContainer()
.withProps({
CSSStyles: {
'margin-top': '-1em'
}
}).component();
storageAccountContainer.addItem(this._networkShareContainerStorageAccountDropdown, {
flex: '0 0 auto'
@@ -762,7 +779,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
this.migrationStateModel._authenticationType = connectionProfile.authenticationType === 'SqlLogin' ? MigrationSourceAuthenticationType.Sql : connectionProfile.authenticationType === 'Integrated' ? MigrationSourceAuthenticationType.Integrated : undefined!;
this._sourceHelpText.value = constants.SQL_SOURCE_DETAILS(this.migrationStateModel._authenticationType, connectionProfile.serverName);
this._sqlSourceUsernameInput.value = username;
this._sqlSourcepassword.value = (await azdata.connection.getCredentials(this.migrationStateModel.sourceConnectionId)).password;
this._sqlSourcePassword.value = (await azdata.connection.getCredentials(this.migrationStateModel.sourceConnectionId)).password;
this._networkShareTargetDatabaseNames = [];
this._blobContainerTargetDatabaseNames = [];
@@ -805,7 +822,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
}));
this._networkShareTargetDatabaseNames.push(targetDatabaseInput);
const blobtargetDatabaseInput = this._view.modelBuilder.inputBox().withProps({
const blobTargetDatabaseInput = this._view.modelBuilder.inputBox().withProps({
required: true,
value: db,
}).withValidation(c => {
@@ -823,10 +840,10 @@ export class DatabaseBackupPage extends MigrationWizardPage {
}
return true;
}).component();
this._disposables.push(blobtargetDatabaseInput.onTextChanged((value) => {
this._disposables.push(blobTargetDatabaseInput.onTextChanged((value) => {
this.migrationStateModel._targetDatabaseNames[index] = value.trim();
}));
this._blobContainerTargetDatabaseNames.push(blobtargetDatabaseInput);
this._blobContainerTargetDatabaseNames.push(blobTargetDatabaseInput);
const blobContainerResourceDropdown = this._view.modelBuilder.dropDown().withProps({
ariaLabel: constants.BLOB_CONTAINER_RESOURCE_GROUP,
@@ -920,7 +937,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
});
data.push(targetRow);
});
this._newtworkShareTargetDatabaseNamesTable.dataValues = data;
this._networkShareTargetDatabaseNamesTable.dataValues = data;
data = [];
@@ -1093,7 +1110,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
await this._sqlSourceUsernameInput.updateProperties({
required: containerType === NetworkContainerType.NETWORK_SHARE
});
await this._sqlSourcepassword.updateProperties({
await this._sqlSourcePassword.updateProperties({
required: containerType === NetworkContainerType.NETWORK_SHARE
});
await this.validateFields();
@@ -1102,7 +1119,7 @@ export class DatabaseBackupPage extends MigrationWizardPage {
private async validateFields(): Promise<void> {
await this._sqlSourceUsernameInput.validate();
await this._sqlSourcepassword.validate();
await this._sqlSourcePassword.validate();
await this._networkSharePath.validate();
await this._windowsUserAccountText.validate();
await this._passwordText.validate();

19
extensions/sql-migration/src/wizard/databaseSelectorPage.ts
View File

@@ -10,6 +10,7 @@ import { MigrationStateModel, StateChangeEvent } from '../models/stateMachine';
import * as constants from '../constants/strings';
import { IconPath, IconPathHelper } from '../constants/iconPathHelper';
import { debounce } from '../api/utils';
import * as styles from '../constants/styles';
const styleLeft: azdata.CssStyles = {
'border': 'none',
@@ -124,7 +125,7 @@ export class DatabaseSelectorPage extends MigrationWizardPage {
const searchContainer = this._view.modelBuilder.divContainer().withItems([resourceSearchBox]).withProps({
CSSStyles: {
'width': '200px',
'margin': '10px 8px 0px 0px'
'margin-top': '8px'
}
}).component();
@@ -204,27 +205,23 @@ export class DatabaseSelectorPage extends MigrationWizardPage {
const title = this._view.modelBuilder.text().withProps({
value: constants.DATABASE_FOR_MIGRATION,
CSSStyles: {
'font-size': '28px',
'line-size': '19px',
'margin': '16px 0px 20px 0px'
...styles.PAGE_TITLE_CSS,
'margin-bottom': '8px'
}
}).component();
const text = this._view.modelBuilder.text().withProps({
value: constants.DATABASE_MIGRATE_TEXT,
CSSStyles: {
'font-size': '13px',
'line-size': '19px',
'margin': '10px 0px 0px 0px'
...styles.BODY_CSS
}
}).component();
this._dbCount = this._view.modelBuilder.text().withProps({
value: constants.DATABASES_SELECTED(this.selectedDbs.length, this._databaseTableValues.length),
CSSStyles: {
'font-size': '13px',
'line-size': '19px',
'margin': '10px 0px 0px 0px'
...styles.BODY_CSS,
'margin-top': '8px'
}
}).component();
@@ -295,7 +292,7 @@ export class DatabaseSelectorPage extends MigrationWizardPage {
height: '100%',
}).withProps({
CSSStyles: {
'margin': '0px 28px 0px 28px'
'margin': '0px 28px 0px 28px'
}
}).component();
flex.addItem(title, { flex: '0 0 auto' });

206
extensions/sql-migration/src/wizard/integrationRuntimePage.ts
View File

@@ -13,11 +13,11 @@ import { WIZARD_INPUT_COMPONENT_WIDTH } from './wizardController';
import { getLocationDisplayName, getSqlMigrationService, getSqlMigrationServiceAuthKeys, getSqlMigrationServiceMonitoringData, SqlManagedInstance } from '../api/azure';
import { IconPathHelper } from '../constants/iconPathHelper';
import { findDropDownItemIndex } from '../api/utils';
import * as styles from '../constants/styles';
export class IntergrationRuntimePage extends MigrationWizardPage {
private _view!: azdata.ModelView;
private _form!: azdata.FormBuilder;
private _statusLoadingComponent!: azdata.LoadingComponent;
private _subscription!: azdata.TextComponent;
private _location!: azdata.TextComponent;
@@ -43,23 +43,6 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
protected async registerContent(view: azdata.ModelView): Promise<void> {
this._view = view;
const createNewMigrationService = view.modelBuilder.hyperlink().withProps({
label: constants.CREATE_NEW,
url: '',
CSSStyles: {
'font-size': '13px'
}
}).component();
this._disposables.push(createNewMigrationService.onDidClick(async (e) => {
const dialog = new CreateSqlMigrationServiceDialog();
const createdDmsResult = await dialog.createNewDms(this.migrationStateModel, (<azdata.CategoryValue>this._resourceGroupDropdown.value).displayName);
this.migrationStateModel._sqlMigrationServiceResourceGroup = createdDmsResult.resourceGroup;
this.migrationStateModel._sqlMigrationService = createdDmsResult.service;
await this.loadResourceGroupDropdown();
await this.populateDms(createdDmsResult.resourceGroup);
}));
this._statusLoadingComponent = view.modelBuilder.loadingComponent().withItem(this.createDMSDetailsContainer()).component();
this._dmsInfoContainer = this._view.modelBuilder.flexContainer().withItems([
@@ -69,36 +52,36 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
text: constants.DMS_PORTAL_INFO,
style: 'information',
CSSStyles: {
'font-size': '13px'
...styles.BODY_CSS
},
width: WIZARD_INPUT_COMPONENT_WIDTH
}).component();
this._form = view.modelBuilder.formContainer()
const form = view.modelBuilder.formContainer()
.withFormItems(
[
{
component: this.migrationServiceDropdownContainer()
},
{
component: createNewMigrationService
},
{
component: dmsPortalInfo
},
{
component: this._dmsInfoContainer
}
]
);
).withProps({
CSSStyles: {
'padding-top': '0'
}
}).component();
this._disposables.push(this._view.onClosed(e => {
this._disposables.forEach(
d => { try { d.dispose(); } catch { } });
}));
await view.initializeModel(this._form.component());
await view.initializeModel(form);
}
public async onPageEnter(pageChangeInfo: azdata.window.WizardPageChangeInfo): Promise<void> {
@@ -151,41 +134,37 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
value: constants.IR_PAGE_DESCRIPTION,
width: WIZARD_INPUT_COMPONENT_WIDTH,
CSSStyles: {
'font-size': '13px',
...styles.BODY_CSS,
'margin-bottom': '16px'
}
}).component();
const subscriptionLabel = this._view.modelBuilder.text().withProps({
value: constants.SUBSCRIPTION,
requiredIndicator: true,
CSSStyles: {
'font-size': '13px',
'font-weight': 'bold',
...styles.LABEL_CSS
}
}).component();
this._subscription = this._view.modelBuilder.text().withProps({
enabled: false,
width: WIZARD_INPUT_COMPONENT_WIDTH,
CSSStyles: {
'font-size': '13px',
'margin': '0px 0px'
'margin': '0'
}
}).component();
const locationLabel = this._view.modelBuilder.text().withProps({
value: constants.LOCATION,
requiredIndicator: true,
CSSStyles: {
'font-size': '13px',
'font-weight': 'bold',
...styles.LABEL_CSS,
'margin-top': '1em'
}
}).component();
this._location = this._view.modelBuilder.text().withProps({
enabled: false,
width: WIZARD_INPUT_COMPONENT_WIDTH,
CSSStyles: {
'font-size': '13px',
'margin': '0px 0px'
'margin': '0'
}
}).component();
@@ -193,8 +172,7 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
value: constants.RESOURCE_GROUP,
requiredIndicator: true,
CSSStyles: {
'font-size': '13px',
'font-weight': 'bold',
...styles.LABEL_CSS
}
}).component();
this._resourceGroupDropdown = this._view.modelBuilder.dropDown().withProps({
@@ -204,6 +182,9 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
editable: true,
required: true,
fireOnTextChange: true,
CSSStyles: {
'margin-top': '-1em'
}
}).component();
this._disposables.push(this._resourceGroupDropdown.onValueChanged(async (value) => {
const selectedIndex = findDropDownItemIndex(this._resourceGroupDropdown, value);
@@ -213,12 +194,11 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
}
}));
const migrationServcieDropdownLabel = this._view.modelBuilder.text().withProps({
const migrationServiceDropdownLabel = this._view.modelBuilder.text().withProps({
value: constants.IR_PAGE_TITLE,
requiredIndicator: true,
CSSStyles: {
'font-size': '13px',
'font-weight': 'bold',
...styles.LABEL_CSS
}
}).component();
this._dmsDropdown = this._view.modelBuilder.dropDown().withProps({
@@ -228,6 +208,9 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
editable: true,
required: true,
fireOnTextChange: true,
CSSStyles: {
'margin-top': '-1em'
}
}).component();
this._disposables.push(this._dmsDropdown.onValueChanged(async (value) => {
if (value && value !== constants.SQL_MIGRATION_SERVICE_NOT_FOUND_ERROR) {
@@ -246,6 +229,23 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
}
}));
const createNewMigrationService = this._view.modelBuilder.hyperlink().withProps({
label: constants.CREATE_NEW,
url: '',
CSSStyles: {
...styles.BODY_CSS
}
}).component();
this._disposables.push(createNewMigrationService.onDidClick(async (e) => {
const dialog = new CreateSqlMigrationServiceDialog();
const createdDmsResult = await dialog.createNewDms(this.migrationStateModel, (<azdata.CategoryValue>this._resourceGroupDropdown.value).displayName);
this.migrationStateModel._sqlMigrationServiceResourceGroup = createdDmsResult.resourceGroup;
this.migrationStateModel._sqlMigrationService = createdDmsResult.service;
await this.loadResourceGroupDropdown();
await this.populateDms(createdDmsResult.resourceGroup);
}));
const flexContainer = this._view.modelBuilder.flexContainer().withItems([
descriptionText,
subscriptionLabel,
@@ -254,8 +254,9 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
this._location,
resourceGroupLabel,
this._resourceGroupDropdown,
migrationServcieDropdownLabel,
this._dmsDropdown
migrationServiceDropdownLabel,
this._dmsDropdown,
createNewMigrationService
]).withLayout({
flexFlow: 'column'
}).component();
@@ -270,10 +271,8 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
const connectionStatusLabel = this._view.modelBuilder.text().withProps({
value: constants.SERVICE_CONNECTION_STATUS,
CSSStyles: {
'font-weight': 'bold',
'font-size': '13px',
'width': '130px',
'margin': '0'
...styles.LABEL_CSS,
'width': '130px'
}
}).component();
@@ -295,16 +294,10 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
}
}));
const connectionLabelContainer = this._view.modelBuilder.flexContainer().withProps({
CSSStyles: {
'margin-bottom': '13px'
}
}).component();
const connectionLabelContainer = this._view.modelBuilder.flexContainer().component();
connectionLabelContainer.addItem(connectionStatusLabel, {
flex: '0'
});
connectionLabelContainer.addItem(this._refreshButton, {
flex: '0',
CSSStyles: { 'margin-right': '10px' }
@@ -319,15 +312,14 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
style: 'error',
text: '',
CSSStyles: {
'font-size': '13px'
...styles.BODY_CSS
}
}).component();
const authenticationKeysLabel = this._view.modelBuilder.text().withProps({
value: constants.AUTHENTICATION_KEYS,
CSSStyles: {
'font-weight': 'bold',
'font-size': '13px'
...styles.LABEL_CSS
}
}).component();
@@ -364,52 +356,8 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
iconPath: IconPathHelper.refresh,
ariaLabel: constants.REFRESH_KEY2,
}).component();
this._authKeyTable = this._view.modelBuilder.declarativeTable().withProps({
ariaLabel: constants.DATABASE_MIGRATION_SERVICE_AUTHENTICATION_KEYS,
columns: [
{
displayName: constants.NAME,
valueType: azdata.DeclarativeDataType.string,
width: '50px',
isReadOnly: true,
rowCssStyles: {
'font-size': '13px'
},
headerCssStyles: {
'font-size': '13px'
}
},
{
displayName: constants.AUTH_KEY_COLUMN_HEADER,
valueType: azdata.DeclarativeDataType.string,
width: '500px',
isReadOnly: true,
rowCssStyles: {
'font-size': '13px',
},
headerCssStyles: {
'font-size': '13px'
}
},
{
displayName: '',
valueType: azdata.DeclarativeDataType.component,
width: '30px',
isReadOnly: true,
rowCssStyles: {
'font-size': '13px'
},
headerCssStyles: {
'font-size': '13px'
}
}
],
CSSStyles: {
'margin-top': '5px',
'width': WIZARD_INPUT_COMPONENT_WIDTH
}
}).component();
this._authKeyTable = createAuthenticationKeyTable(this._view);
statusContainer.addItems([
this._dmsStatusInfoBox,
@@ -543,3 +491,55 @@ export class IntergrationRuntimePage extends MigrationWizardPage {
}
}
}
export function createAuthenticationKeyTable(view: azdata.ModelView,): azdata.DeclarativeTableComponent {
const authKeyTable = view.modelBuilder.declarativeTable().withProps({
ariaLabel: constants.DATABASE_MIGRATION_SERVICE_AUTHENTICATION_KEYS,
columns: [
{
displayName: constants.NAME,
valueType: azdata.DeclarativeDataType.string,
width: '50px',
isReadOnly: true,
rowCssStyles: {
...styles.BODY_CSS
},
headerCssStyles: {
...styles.BODY_CSS,
'font-weight': '600'
}
},
{
displayName: constants.AUTH_KEY_COLUMN_HEADER,
valueType: azdata.DeclarativeDataType.string,
width: '500px',
isReadOnly: true,
rowCssStyles: {
...styles.BODY_CSS,
},
headerCssStyles: {
...styles.BODY_CSS,
'font-weight': '600'
}
},
{
displayName: '',
valueType: azdata.DeclarativeDataType.component,
width: '30px',
isReadOnly: true,
rowCssStyles: {
...styles.BODY_CSS
},
headerCssStyles: {
...styles.BODY_CSS
}
}
],
CSSStyles: {
'margin-top': '5px',
'width': WIZARD_INPUT_COMPONENT_WIDTH
}
}).component();
return authKeyTable;
}

38
extensions/sql-migration/src/wizard/migrationModePage.ts
View File

@@ -8,6 +8,7 @@ import * as vscode from 'vscode';
import { MigrationWizardPage } from '../models/migrationWizardPage';
import { MigrationMode, MigrationStateModel, StateChangeEvent } from '../models/stateMachine';
import * as constants from '../constants/strings';
import * as styles from '../constants/styles';
export class MigrationModePage extends MigrationWizardPage {
private _view!: azdata.ModelView;
@@ -16,23 +17,39 @@ export class MigrationModePage extends MigrationWizardPage {
constructor(wizard: azdata.window.Wizard, migrationStateModel: MigrationStateModel) {
super(wizard, azdata.window.createWizardPage(constants.DATABASE_BACKUP_MIGRATION_MODE_LABEL, 'MigrationModePage'), migrationStateModel);
this.wizardPage.description = constants.DATABASE_BACKUP_MIGRATION_MODE_DESCRIPTION;
}
protected async registerContent(view: azdata.ModelView): Promise<void> {
this._view = view;
const pageDescription = {
title: '',
component: view.modelBuilder.text().withProps({
value: constants.DATABASE_BACKUP_MIGRATION_MODE_DESCRIPTION,
CSSStyles: {
...styles.BODY_CSS,
'margin': '0'
}
}).component()
};
const form = view.modelBuilder.formContainer()
.withFormItems(
[
pageDescription,
this.migrationModeContainer(),
]
);
).withProps({
CSSStyles: {
'padding-top': '0'
}
}).component();
this._disposables.push(this._view.onClosed(e => {
this._disposables.forEach(
d => { try { d.dispose(); } catch { } });
}));
await view.initializeModel(form.component());
await view.initializeModel(form);
}
public async onPageEnter(pageChangeInfo: azdata.window.WizardPageChangeInfo): Promise<void> {
@@ -60,8 +77,7 @@ export class MigrationModePage extends MigrationWizardPage {
label: constants.DATABASE_BACKUP_MIGRATION_MODE_ONLINE_LABEL,
name: buttonGroup,
CSSStyles: {
'font-size': '13px',
'font-weight': 'bold'
...styles.LABEL_CSS,
},
checked: true
}).component();
@@ -69,8 +85,8 @@ export class MigrationModePage extends MigrationWizardPage {
const onlineDescription = this._view.modelBuilder.text().withProps({
value: constants.DATABASE_BACKUP_MIGRATION_MODE_ONLINE_DESCRIPTION,
CSSStyles: {
'font-size': '13px',
'margin': '0 0 10px 20px'
...styles.NOTE_CSS,
'margin-left': '20px'
}
}).component();
@@ -84,16 +100,16 @@ export class MigrationModePage extends MigrationWizardPage {
label: constants.DATABASE_BACKUP_MIGRATION_MODE_OFFLINE_LABEL,
name: buttonGroup,
CSSStyles: {
'font-size': '13px',
'font-weight': 'bold'
...styles.LABEL_CSS,
'margin-top': '12px'
},
}).component();
const offlineDescription = this._view.modelBuilder.text().withProps({
value: constants.DATABASE_BACKUP_MIGRATION_MODE_OFFLINE_DESCRIPTION,
CSSStyles: {
'font-size': '13px',
'margin': '0 0 10px 20px'
...styles.NOTE_CSS,
'margin-left': '20px'
}
}).component();

117
extensions/sql-migration/src/wizard/skuRecommendationPage.ts
View File

@@ -13,6 +13,7 @@ import { EOL } from 'os';
import { IconPath, IconPathHelper } from '../constants/iconPathHelper';
import { WIZARD_INPUT_COMPONENT_WIDTH } from './wizardController';
import { findDropDownItemIndex, selectDropDownIndex } from '../api/utils';
import * as styles from '../constants/styles';
export interface Product {
type: MigrationTargetType;
@@ -73,10 +74,14 @@ export class SKURecommendationPage extends MigrationWizardPage {
iconPath: IconPathHelper.completedMigration,
iconHeight: 17,
iconWidth: 17,
width: 17,
width: 20,
height: 20
}).component();
const igContainer = this._view.modelBuilder.flexContainer().component();
const igContainer = this._view.modelBuilder.flexContainer().withProps({
CSSStyles: {
'align-items': 'center'
}
}).component();
igContainer.addItem(this._assessmentStatusIcon, {
flex: '0 0 auto'
});
@@ -89,32 +94,31 @@ export class SKURecommendationPage extends MigrationWizardPage {
const refreshAssessmentButton = this._view.modelBuilder.button().withProps({
iconPath: IconPathHelper.refresh,
label: constants.REFRESH_ASSESSMENT_BUTTON_LABEL,
width: 130
width: 160,
height: 24,
CSSStyles: {
...styles.BODY_CSS,
'margin': '12px 0 4px 0'
}
}).component();
this._disposables.push(refreshAssessmentButton.onDidClick(async () => {
await this.constructDetails();
}));
const chooseYourTargetText = this._view.modelBuilder.text().withProps({
value: constants.SKU_RECOMMENDATION_CHOOSE_A_TARGET,
CSSStyles: {
'font-size': '13px',
'font-weight': 'bold',
'margin-top': '16px'
}
}).component();
const statusContainer = this._view.modelBuilder.flexContainer().withLayout({
flexFlow: 'column'
flexFlow: 'column',
}).withItems(
[
igContainer,
this._detailsComponent,
refreshAssessmentButton,
chooseYourTargetText
]
).component();
).withProps({
CSSStyles: {
'margin': '0'
}
}).component();
this._chooseTargetComponent = await this.createChooseTargetComponent(view);
this.assessmentGroupContainer = await this.createViewAssessmentsContainer();
this._targetContainer = this.createTargetDropdownContainer();
@@ -136,7 +140,8 @@ export class SKURecommendationPage extends MigrationWizardPage {
]
).withProps({
CSSStyles: {
display: 'none'
'display': 'none',
'padding-top': '0',
}
});
@@ -170,10 +175,8 @@ export class SKURecommendationPage extends MigrationWizardPage {
private createStatusComponent(view: azdata.ModelView): azdata.TextComponent {
const component = view.modelBuilder.text().withProps({
CSSStyles: {
'font-size': '14px',
'margin': '0 0 0 8px',
'line-height': '20px',
'font-weight': 'bold'
...styles.SECTION_HEADER_CSS,
'margin-left': '8px'
}
}).component();
return component;
@@ -182,7 +185,7 @@ export class SKURecommendationPage extends MigrationWizardPage {
private createDetailsComponent(view: azdata.ModelView): azdata.TextComponent {
const component = view.modelBuilder.text().withProps({
CSSStyles: {
'font-size': '13px'
...styles.BODY_CSS
}
}).component();
return component;
@@ -190,6 +193,14 @@ export class SKURecommendationPage extends MigrationWizardPage {
private async createChooseTargetComponent(view: azdata.ModelView): Promise<azdata.DivContainer> {
const chooseYourTargetText = this._view.modelBuilder.text().withProps({
value: constants.SKU_RECOMMENDATION_CHOOSE_A_TARGET,
CSSStyles: {
...styles.SECTION_HEADER_CSS,
'margin': '0'
}
}).component();
this._rbg = this._view!.modelBuilder.radioCardGroup().withProps({
cards: [],
iconHeight: '35px',
@@ -198,12 +209,12 @@ export class SKURecommendationPage extends MigrationWizardPage {
cardHeight: '130px',
iconPosition: 'left',
CSSStyles: {
'margin-top': '0px'
'margin-top': '0px',
'margin-left': '-15px',
}
}).component();
this._supportedProducts.forEach((product) => {
this._rbg.cards.push({
id: product.type,
icon: product.icon,
@@ -211,14 +222,13 @@ export class SKURecommendationPage extends MigrationWizardPage {
{
textValue: product.name,
textStyles: {
'font-size': '14px',
'font-weight': 'bold'
...styles.SECTION_HEADER_CSS
}
},
{
textValue: '',
textStyles: {
'font-size': '13px',
...styles.BODY_CSS
}
}
]
@@ -238,6 +248,7 @@ export class SKURecommendationPage extends MigrationWizardPage {
const component = view.modelBuilder.divContainer().withItems(
[
chooseYourTargetText,
this._rbgLoader
]
).component();
@@ -248,15 +259,17 @@ export class SKURecommendationPage extends MigrationWizardPage {
this._viewAssessmentsHelperText = this._view.modelBuilder.text().withProps({
value: constants.SKU_RECOMMENDATION_VIEW_ASSESSMENT_MI,
CSSStyles: {
'font-size': '13px',
'font-weight': 'bold',
...styles.SECTION_HEADER_CSS
},
width: WIZARD_INPUT_COMPONENT_WIDTH
}).component();
const button = this._view.modelBuilder.button().withProps({
label: constants.VIEW_SELECT_BUTTON_LABEL,
width: 100
width: 100,
CSSStyles: {
'margin': '12px 0'
}
}).component();
let serverName = '';
@@ -281,7 +294,7 @@ export class SKURecommendationPage extends MigrationWizardPage {
this._databaseSelectedHelperText = this._view.modelBuilder.text().withProps({
CSSStyles: {
'font-size': '13px',
...styles.BODY_CSS,
}
}).component();
@@ -298,8 +311,7 @@ export class SKURecommendationPage extends MigrationWizardPage {
private createTargetDropdownContainer(): azdata.FlexContainer {
this._azureSubscriptionText = this._view.modelBuilder.text().withProps({
CSSStyles: {
'font-size': '13px',
'line-height': '18px'
...styles.SECTION_HEADER_CSS
}
}).component();
@@ -309,8 +321,7 @@ export class SKURecommendationPage extends MigrationWizardPage {
width: WIZARD_INPUT_COMPONENT_WIDTH,
requiredIndicator: true,
CSSStyles: {
'font-size': '13px',
'font-weight': 'bold',
...styles.LABEL_CSS,
}
}).component();
this._managedInstanceSubscriptionDropdown = this._view.modelBuilder.dropDown().withProps({
@@ -319,6 +330,9 @@ export class SKURecommendationPage extends MigrationWizardPage {
editable: true,
required: true,
fireOnTextChange: true,
CSSStyles: {
'margin-top': '-1em'
},
}).component();
this._disposables.push(this._managedInstanceSubscriptionDropdown.onValueChanged(async (value) => {
const selectedIndex = findDropDownItemIndex(this._managedInstanceSubscriptionDropdown, value);
@@ -336,8 +350,7 @@ export class SKURecommendationPage extends MigrationWizardPage {
width: WIZARD_INPUT_COMPONENT_WIDTH,
requiredIndicator: true,
CSSStyles: {
'font-size': '13px',
'font-weight': 'bold',
...styles.LABEL_CSS
}
}).component();
this._azureLocationDropdown = this._view.modelBuilder.dropDown().withProps({
@@ -346,6 +359,9 @@ export class SKURecommendationPage extends MigrationWizardPage {
editable: true,
required: true,
fireOnTextChange: true,
CSSStyles: {
'margin-top': '-1em'
},
}).component();
this._disposables.push(this._azureLocationDropdown.onValueChanged(async (value) => {
const selectedIndex = findDropDownItemIndex(this._azureLocationDropdown, value);
@@ -361,8 +377,7 @@ export class SKURecommendationPage extends MigrationWizardPage {
width: WIZARD_INPUT_COMPONENT_WIDTH,
requiredIndicator: true,
CSSStyles: {
'font-size': '13px',
'font-weight': 'bold',
...styles.LABEL_CSS
}
}).component();
this._azureResourceGroupDropdown = this._view.modelBuilder.dropDown().withProps({
@@ -371,6 +386,9 @@ export class SKURecommendationPage extends MigrationWizardPage {
editable: true,
required: true,
fireOnTextChange: true,
CSSStyles: {
'margin-top': '-1em'
},
}).component();
this._disposables.push(this._azureResourceGroupDropdown.onValueChanged(async (value) => {
const selectedIndex = findDropDownItemIndex(this._azureResourceGroupDropdown, value);
@@ -386,8 +404,7 @@ export class SKURecommendationPage extends MigrationWizardPage {
width: WIZARD_INPUT_COMPONENT_WIDTH,
requiredIndicator: true,
CSSStyles: {
'font-size': '13px',
'font-weight': 'bold',
...styles.LABEL_CSS
}
}).component();
this._resourceDropdown = this._view.modelBuilder.dropDown().withProps({
@@ -396,6 +413,9 @@ export class SKURecommendationPage extends MigrationWizardPage {
editable: true,
required: true,
fireOnTextChange: true,
CSSStyles: {
'margin-top': '-1em'
},
}).component();
this._disposables.push(this._resourceDropdown.onValueChanged(value => {
const selectedIndex = findDropDownItemIndex(this._resourceDropdown, value);
@@ -732,24 +752,20 @@ errorId: ${e.errorId}
private createAssessmentProgress(): azdata.FlexContainer {
this._assessmentLoader = this._view.modelBuilder.loadingComponent().withProps({
CSSStyles: {
'margin-top': '15px'
}
}).component();
this._assessmentLoader = this._view.modelBuilder.loadingComponent().component();
this._assessmentProgress = this._view.modelBuilder.text().withProps({
value: constants.ASSESSMENT_IN_PROGRESS,
CSSStyles: {
'font-size': '18px',
'line-height': '24px',
...styles.PAGE_TITLE_CSS,
'margin-right': '20px'
}
}).component();
this._progressContainer = this._view.modelBuilder.flexContainer().withLayout({
height: '100%',
flexFlow: 'row'
flexFlow: 'row',
alignItems: 'center'
}).component();
this._progressContainer.addItem(this._assessmentProgress, { flex: '0 0 auto' });
@@ -761,9 +777,8 @@ errorId: ${e.errorId}
this._assessmentInfo = this._view.modelBuilder.text().withProps({
value: constants.ASSESSMENT_IN_PROGRESS_CONTENT((await this.migrationStateModel.getSourceConnectionProfile()).serverName),
CSSStyles: {
'font-size': '13px',
'line-height': '18px',
'font-weight': '600',
...styles.BODY_CSS,
'width': '660px'
}
}).component();
return this._assessmentInfo;

10
extensions/sql-migration/src/wizard/summaryPage.ts
View File

@@ -11,6 +11,7 @@ import * as constants from '../constants/strings';
import { createHeadingTextComponent, createInformationRow, createLabelTextComponent } from './wizardController';
import { getResourceGroupFromId } from '../api/azure';
import { TargetDatabaseSummaryDialog } from '../dialog/targetDatabaseSummary/targetDatabaseSummaryDialog';
import * as styles from '../constants/styles';
export class SummaryPage extends MigrationWizardPage {
private _view!: azdata.ModelView;
@@ -49,10 +50,9 @@ export class SummaryPage extends MigrationWizardPage {
url: '',
label: this.migrationStateModel._migrationDbs.length.toString(),
CSSStyles: {
...styles.BODY_CSS,
'margin': '0px',
'width': '300px',
'font-size': '13px',
'line-height': '24px'
}
}).component();
@@ -70,10 +70,8 @@ export class SummaryPage extends MigrationWizardPage {
[
createLabelTextComponent(this._view, constants.SUMMARY_DATABASE_COUNT_LABEL,
{
'margin': '0px',
...styles.BODY_CSS,
'width': '300px',
'font-size': '13px',
'line-height': '24px'
}
),
targetDatabaseHyperlink
@@ -87,7 +85,7 @@ export class SummaryPage extends MigrationWizardPage {
this._flexContainer.addItems(
[
await createHeadingTextComponent(this._view, constants.ACCOUNTS_SELECTION_PAGE_TITLE),
await createHeadingTextComponent(this._view, constants.ACCOUNTS_SELECTION_PAGE_TITLE, true),
createInformationRow(this._view, constants.ACCOUNTS_SELECTION_PAGE_TITLE, this.migrationStateModel._azureAccount.displayInfo.displayName),
await createHeadingTextComponent(this._view, constants.SOURCE_DATABASES),

33
extensions/sql-migration/src/wizard/wizardController.ts
View File

@@ -16,6 +16,7 @@ import { SummaryPage } from './summaryPage';
import { MigrationModePage } from './migrationModePage';
import { DatabaseSelectorPage } from './databaseSelectorPage';
import { sendSqlMigrationActionEvent, TelemetryAction, TelemetryViews } from '../telemtery';
import * as styles from '../constants/styles';
export const WIZARD_INPUT_COMPONENT_WIDTH = '600px';
export class WizardController {
@@ -157,44 +158,36 @@ export function createInformationRow(view: azdata.ModelView, label: string, valu
[
createLabelTextComponent(view, label,
{
'margin': '0px',
...styles.BODY_CSS,
'margin': '4px 0px',
'width': '300px',
'font-size': '13px',
'line-height': '24px'
}
),
createTextCompononent(view, value,
createTextComponent(view, value,
{
'margin': '0px',
...styles.BODY_CSS,
'margin': '4px 0px',
'width': '300px',
'font-size': '13px',
'line-height': '24px'
}
)
],
{
CSSStyles: {
'margin-right': '5px'
}
})
.component();
]).component();
}
export async function createHeadingTextComponent(view: azdata.ModelView, value: string): Promise<azdata.TextComponent> {
const component = createTextCompononent(view, value);
export async function createHeadingTextComponent(view: azdata.ModelView, value: string, firstElement: boolean = false): Promise<azdata.TextComponent> {
const component = createTextComponent(view, value);
await component.updateCssStyles({
'font-size': '13px',
'font-weight': 'bold',
...styles.LABEL_CSS,
'margin-top': firstElement ? '0' : '24px'
});
return component;
}
export function createLabelTextComponent(view: azdata.ModelView, value: string, styles: { [key: string]: string; } = { 'width': '300px' }): azdata.TextComponent {
const component = createTextCompononent(view, value, styles);
const component = createTextComponent(view, value, styles);
return component;
}
export function createTextCompononent(view: azdata.ModelView, value: string, styles: { [key: string]: string; } = { 'width': '300px' }): azdata.TextComponent {
export function createTextComponent(view: azdata.ModelView, value: string, styles: { [key: string]: string; } = { 'width': '300px' }): azdata.TextComponent {
return view.modelBuilder.text().withProps({
value: value,
CSSStyles: styles