SQL Assessment Database Selector (#16030)

* wip

* wip

* database selector table

* fixed db icon

* wip

* fixed assessment results table

* replaced large query

* fix build error

* updated spacing and other fixes

* removed commented code

* added search bar, fix margins, disable checkbox for offline db

* change width of checkbox column

* changed api to require databases

* Revert "changed api to require databases"

This reverts commit 20fe2d8bd223bae90dfb09609225a1781267a01d.

* removed optional flag from databases parameter

* removed icons on assessment dialog page

* formatting changes, fixed search

* bump STS

* bumped extension version number

* one excludeDbs
This commit is contained in:
Christopher Suh
2021-07-21 20:58:32 -04:00
committed by GitHub
parent f390c4cbc2
commit 6d4608dd8b
11 changed files with 380 additions and 84 deletions

View File

@@ -4,7 +4,6 @@
*--------------------------------------------------------------------------------------------*/
import * as azdata from 'azdata';
import { SqlMigrationAssessmentResultItem, SqlMigrationImpactedObjectInfo } from '../../../../mssql/src/mssql';
import { IconPath, IconPathHelper } from '../../constants/iconPathHelper';
import { MigrationStateModel, MigrationTargetType } from '../../models/stateMachine';
import * as constants from '../../constants/strings';
import { debounce } from '../../api/utils';
@@ -128,7 +127,7 @@ export class SqlDatabaseTree {
'font-weight': 'bold',
'margin': '0px 8px 0px 36px'
},
value: constants.DATABASES(this.selectedDbs.length, this._model._serverDatabases.length)
value: constants.DATABASES(0, this._model._databaseAssessment.length)
}).component();
return this._databaseCount;
}
@@ -146,22 +145,22 @@ export class SqlDatabaseTree {
{
displayName: '',
valueType: azdata.DeclarativeDataType.boolean,
width: 20,
width: 10,
isReadOnly: false,
showCheckAll: true,
headerCssStyles: headerLeft,
},
{
displayName: constants.DATABASE,
valueType: azdata.DeclarativeDataType.component,
width: 100,
valueType: azdata.DeclarativeDataType.string,
width: 95,
isReadOnly: true,
headerCssStyles: headerLeft
},
{
displayName: constants.ISSUES,
valueType: azdata.DeclarativeDataType.string,
width: 30,
width: 45,
isReadOnly: true,
headerCssStyles: headerRight,
}
@@ -170,7 +169,7 @@ export class SqlDatabaseTree {
).component();
this._databaseTable.onDataChanged(() => {
this._databaseCount.updateProperties({
'value': constants.DATABASES(this.selectedDbs().length, this._model._serverDatabases.length)
'value': constants.DATABASES(this.selectedDbs().length, this._model._databaseAssessment.length)
});
});
this._databaseTable.onRowSelected(async (e) => {
@@ -224,8 +223,7 @@ export class SqlDatabaseTree {
if (this._databaseTableValues && value?.length > 0) {
const filter: number[] = [];
this._databaseTableValues.forEach((row, index) => {
const flexContainer: azdata.FlexContainer = row[1]?.value as azdata.FlexContainer;
const textComponent: azdata.TextComponent = flexContainer.items[1] as azdata.TextComponent;
const textComponent: azdata.TextComponent = row[1] as azdata.TextComponent;
const cellText = textComponent.value?.toLowerCase();
const searchText: string = value.toLowerCase();
if (cellText?.includes(searchText)) {
@@ -242,20 +240,23 @@ export class SqlDatabaseTree {
private createInstanceComponent(): azdata.DivContainer {
this._instanceTable = this._view.modelBuilder.declarativeTable().withProps(
{
CSSStyles: {
'table-layout': 'fixed'
},
width: 200,
enableRowSelection: true,
width: 170,
columns: [
{
displayName: constants.INSTANCE,
valueType: azdata.DeclarativeDataType.component,
width: 130,
valueType: azdata.DeclarativeDataType.string,
width: 105,
isReadOnly: true,
headerCssStyles: headerLeft
},
{
displayName: constants.WARNINGS,
valueType: azdata.DeclarativeDataType.string,
width: 30,
width: 45,
isReadOnly: true,
headerCssStyles: headerRight
}
@@ -264,6 +265,7 @@ export class SqlDatabaseTree {
const instanceContainer = this._view.modelBuilder.divContainer().withItems([this._instanceTable]).withProps({
CSSStyles: {
'width': '200px',
'margin': '19px 8px 0px 34px'
}
}).component();
@@ -279,7 +281,7 @@ export class SqlDatabaseTree {
});
this._recommendation.value = constants.WARNINGS_DETAILS;
this._recommendationTitle.value = constants.WARNINGS_COUNT(this._activeIssues.length);
if (this._model._targetType === MigrationTargetType.SQLMI) {
if (this._targetType === MigrationTargetType.SQLMI) {
await this.refreshResults();
}
});
@@ -362,7 +364,7 @@ export class SqlDatabaseTree {
private createNoIssuesText(): azdata.FlexContainer {
let message: azdata.TextComponent;
if (this._model._targetType === MigrationTargetType.SQLVM) {
if (this._targetType === MigrationTargetType.SQLVM) {
message = this._view.modelBuilder.text().withProps({
value: constants.NO_ISSUES_FOUND_VM,
CSSStyles: {
@@ -740,7 +742,7 @@ export class SqlDatabaseTree {
}
public async refreshResults(): Promise<void> {
if (this._model._targetType === MigrationTargetType.SQLMI) {
if (this._targetType === MigrationTargetType.SQLMI) {
if (this._activeIssues.length === 0) {
/// show no issues here
this._assessmentsTable.updateCssStyles({
@@ -810,8 +812,7 @@ export class SqlDatabaseTree {
public async initialize(): Promise<void> {
let instanceTableValues: azdata.DeclarativeTableCellValue[][] = [];
this._databaseTableValues = [];
const excludedDatabases = ['master', 'msdb', 'tempdb', 'model'];
this._dbNames = (await azdata.connection.listDatabases(this._model.sourceConnectionId)).filter(db => !excludedDatabases.includes(db));
this._dbNames = this._model._databaseAssessment;
const selectedDbs = (this._targetType === MigrationTargetType.SQLVM) ? this._model._vmDbs : this._model._miDbs;
this._serverName = (await this._model.getSourceConnectionProfile()).serverName;
@@ -819,7 +820,8 @@ export class SqlDatabaseTree {
instanceTableValues = [
[
{
value: this.createIconTextCell(IconPathHelper.sqlServerLogo, this._serverName),
// value: this.createIconTextCell(IconPathHelper.sqlServerLogo, this._serverName),
value: this._serverName,
style: styleLeft
},
{
@@ -836,7 +838,8 @@ export class SqlDatabaseTree {
style: styleLeft
},
{
value: this.createIconTextCell(IconPathHelper.sqlDatabaseLogo, db),
// value: this.createIconTextCell(IconPathHelper.sqlDatabaseLogo, db),
value: db,
style: styleLeft
},
{
@@ -850,7 +853,8 @@ export class SqlDatabaseTree {
instanceTableValues = [
[
{
value: this.createIconTextCell(IconPathHelper.sqlServerLogo, this._serverName),
// value: this.createIconTextCell(IconPathHelper.sqlServerLogo, this._serverName),
value: this._serverName,
style: styleLeft
},
{
@@ -877,7 +881,8 @@ export class SqlDatabaseTree {
enabled: selectable
},
{
value: this.createIconTextCell((selectable) ? IconPathHelper.sqlDatabaseLogo : IconPathHelper.sqlDatabaseWarningLogo, db.name),
// value: this.createIconTextCell((selectable) ? IconPathHelper.sqlDatabaseLogo : IconPathHelper.sqlDatabaseWarningLogo, db.name),
value: db.name,
style: styleLeft
},
{
@@ -892,41 +897,4 @@ export class SqlDatabaseTree {
await this._databaseTable.setDataValues(this._databaseTableValues);
}
private createIconTextCell(icon: IconPath, text: string): azdata.FlexContainer {
const iconComponent = this._view.modelBuilder.image().withProps({
iconPath: icon,
iconWidth: '16px',
iconHeight: '16px',
width: '20px',
height: '20px'
}).component();
const textComponent = this._view.modelBuilder.text().withProps({
value: text,
title: text,
CSSStyles: {
'margin': '0px',
'width': '110px'
}
}).component();
const cellContainer = this._view.modelBuilder.flexContainer().withProps({
CSSStyles: {
'justify-content': 'left'
}
}).component();
cellContainer.addItem(iconComponent, {
flex: '0',
CSSStyles: {
'width': '32px'
}
});
cellContainer.addItem(textComponent, {
CSSStyles: {
'width': 'auto'
}
});
return cellContainer;
}
}