[New Migration Experience] added toolbar for performance data collection

extensions/sql-migration/src/constants/iconPathHelper.ts

@@ -49,6 +49,11 @@ export class IconPathHelper {
 	public static breadCrumb: IconPath;
 	public static allTables: IconPath;
 	public static notFound: IconPath;
+	public static startDataCollection: IconPath;
+	public static stopDataCollection: IconPath;
+	public static newRefresh: IconPath;
+	public static import: IconPath;
+	public static settings: IconPath;
 
 	public static setExtensionContext(context: vscode.ExtensionContext) {
 		IconPathHelper.copy = {
@@ -203,5 +208,26 @@ export class IconPathHelper {
 			light: context.asAbsolutePath('images/notFound.svg'),
 			dark: context.asAbsolutePath('images/notFound.svg'),
 		};
+		IconPathHelper.startDataCollection = {
+			light: context.asAbsolutePath('images/startDataCollection.svg'),
+			dark: context.asAbsolutePath('images/startDataCollection.svg')
+		};
+		IconPathHelper.stopDataCollection = {
+			light: context.asAbsolutePath('images/stopDataCollection.svg'),
+			dark: context.asAbsolutePath('images/stopDataCollection.svg')
+		};
+		IconPathHelper.import = {
+			light: context.asAbsolutePath('images/import.svg'),
+			dark: context.asAbsolutePath('images/import.svg')
+		};
+		IconPathHelper.newRefresh = {
+			light: context.asAbsolutePath('images/newRefresh.svg'),
+			dark: context.asAbsolutePath('images/newRefresh.svg')
+		};
+		IconPathHelper.settings = {
+			light: context.asAbsolutePath('images/settings.svg'),
+			dark: context.asAbsolutePath('images/settings.svg')
+		};
+
 	}
 }

extensions/sql-migration/src/constants/strings.ts

@@ -81,6 +81,14 @@ export const XEVENTS_ASSESSMENT_DESCRIPTION = localize('sql.migration.database.a
 export const XEVENTS_ASSESSMENT_HELPLINK = localize('sql.migration.database.assessment.xevents.link', "Learn more");
 export const XEVENTS_ASSESSMENT_OPEN_FOLDER = localize('sql.migration.database.assessment.xevents.instructions', "Select a folder where extended events session files (.xel and .xem) are stored");
 
+//SKU Recommendations - Data Collection
+export const START_DATACOLLECTION_BUTTON_LABEL = localize('sql.migration.start.datacollection.button.label', "Start data collection");
+export const STOP_DATACOLLECTION_BUTTON_LABEL = localize('sql.migration.stop.datacollection.button.label', "Stop data collection");
+export const IMPORT_PERFORMANCEDATA_BUTTON_LABEL = localize('sql.migration.import.performancedata.button.label', "Import performance data");
+export const RECOMMENDATION_PARAMETERS_BUTTON_LABEL = localize('sql.migration.recommendation.parameters.button.label', "Recommendation parameters");
+export const REFRESH_SKU_RECOMMENDATION_BUTTON_LABEL = localize('sql.migration.refresh.sku.recommendation.button.label', "Refresh");
+
+
 // Assessment results and recommendations
 export const ASSESSMENT_RESULTS_AND_RECOMMENDATIONS_PAGE_TITLE = localize('sql.migration.assessment.results.and.recommendations.title', "Assessment results and recommendations");
 export const ASSESSMENT_BLOCKING_ISSUE_TITLE = localize('sql.migration.assessments.blocking.issue', 'This is a blocking issue that will prevent the database migration from succeeding.');

extensions/sql-migration/src/constants/styles.ts

@@ -69,3 +69,10 @@ export const BIG_NUMBER_CSS = {
 	'line-height': '36px',
 	'margin': '0',
 };
+
+export const TOOLBAR_CSS = {
+	'font-size': '12px',
+	'line-height': '16px',
+	'font-weight': '400',
+	'margin': '0',
+};

extensions/sql-migration/src/dialog/assessment/assessmentResultsDialog.ts

@@ -7,7 +7,7 @@ import * as azdata from 'azdata';
 import * as vscode from 'vscode';
 import { MigrationStateModel } from '../../models/stateMachine';
 import { SqlDatabaseTree } from './sqlDatabasesTree';
-import { SKURecommendationPage } from '../../wizard/skuRecommendationPage';
+import { SKURecommendationPage } from '../../wizard/skuRecommendation/skuRecommendationPage';
 import * as constants from '../../constants/strings';
 import * as utils from '../../api/utils';
 import { MigrationTargetType } from '../../api/utils';

extensions/sql-migration/src/dialog/skuRecommendationResults/getAzureRecommendationDialog.ts

@@ -9,7 +9,7 @@ import { MigrationStateModel, PerformanceDataSourceOptions } from '../../models/
 import * as constants from '../../constants/strings';
 import * as styles from '../../constants/styles';
 import * as utils from '../../api/utils';
-import { SKURecommendationPage } from '../../wizard/skuRecommendationPage';
+import { SKURecommendationPage } from '../../wizard/skuRecommendation/skuRecommendationPage';
 import { EOL } from 'os';
 import { getSourceConnectionProfile } from '../../api/sqlUtils';
 

extensions/sql-migration/src/dialog/skuRecommendationResults/skuEditParametersDialog.ts

@@ -9,7 +9,7 @@ import { MigrationStateModel } from '../../models/stateMachine';
 import * as constants from '../../constants/strings';
 import * as styles from '../../constants/styles';
 import { selectDropDownIndex } from '../../api/utils';
-import { SKURecommendationPage } from '../../wizard/skuRecommendationPage';
+import { SKURecommendationPage } from '../../wizard/skuRecommendation/skuRecommendationPage';
 
 export const TARGET_PERCENTILE_VALUES = [99, 97, 95, 90, 75, 50];
 

extensions/sql-migration/src/models/stateMachine.ts

@@ -14,7 +14,7 @@ import * as nls from 'vscode-nls';
 import { v4 as uuidv4 } from 'uuid';
 import { sendSqlMigrationActionEvent, TelemetryAction, TelemetryViews, logError } from '../telemetry';
 import { hashString, deepClone, getBlobContainerNameWithFolder, Blob, getLastBackupFileNameWithoutFolder, MigrationTargetType } from '../api/utils';
-import { SKURecommendationPage } from '../wizard/skuRecommendationPage';
+import { SKURecommendationPage } from '../wizard/skuRecommendation/skuRecommendationPage';
 import { excludeDatabases, getEncryptConnectionValue, getSourceConnectionId, getSourceConnectionProfile, getSourceConnectionServerInfo, getSourceConnectionString, getSourceConnectionUri, getTrustServerCertificateValue, SourceDatabaseInfo, TargetDatabaseInfo } from '../api/sqlUtils';
 import { LoginMigrationModel } from './loginMigrationModel';
 import { TdeMigrationDbResult, TdeMigrationModel } from './tdeModels';

extensions/sql-migration/src/wizard/skuRecommendation/skuDataCollectionToolbar.ts

@@ -0,0 +1,128 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import * as azdata from 'azdata';
+import * as vscode from 'vscode';
+import { IconPathHelper } from '../../constants/iconPathHelper';
+import * as styles from '../../constants/styles';
+import * as constants from '../../constants/strings';
+
+export class SkuDataCollectionToolbar implements vscode.Disposable {
+	private _disposables: vscode.Disposable[] = [];
+
+	public createToolbar(view: azdata.ModelView): azdata.ToolbarContainer {
+		const toolbar = view.modelBuilder.toolbarContainer()
+
+		toolbar.addToolbarItems([
+			<azdata.ToolbarComponent>{ component: this.createRefreshSKURecommendationButton(view), toolbarSeparatorAfter: true },
+			<azdata.ToolbarComponent>{ component: this.createStartDataCollectionButton(view), toolbarSeparatorAfter: false },
+			<azdata.ToolbarComponent>{ component: this.createStopDataCollectionButton(view), toolbarSeparatorAfter: false },
+			<azdata.ToolbarComponent>{ component: this.createImportPerformanceButton(view), toolbarSeparatorAfter: true },
+			<azdata.ToolbarComponent>{ component: this.createRecommendationParametersButton(view), toolbarSeparatorAfter: false },
+		]);
+
+		// commenting this CSS Properties, we can edit this as per requirement.
+		// toolbar.withProps({
+		// 	CSSStyles: {
+		// 		'margin': '0',
+		// 		'padding': '0',
+		// 	}
+		// });
+
+		return toolbar.component();
+	}
+
+	private createRefreshSKURecommendationButton(view: azdata.ModelView): azdata.ButtonComponent {
+		const refreshSKURecommendationButton = view.modelBuilder.button()
+			.withProps({
+				buttonType: azdata.ButtonType.Normal,
+				label: constants.REFRESH_SKU_RECOMMENDATION_BUTTON_LABEL,
+				height: 36,
+				iconHeight: 16,
+				iconWidth: 16,
+				iconPath: IconPathHelper.newRefresh,
+				CSSStyles: {
+					...styles.TOOLBAR_CSS
+				}
+			}).component();
+		// TODO - implement onDidClick and add to disposables
+		return refreshSKURecommendationButton;
+	}
+
+	private createStartDataCollectionButton(view: azdata.ModelView): azdata.ButtonComponent {
+		const startDataCollectionButton = view.modelBuilder.button()
+			.withProps({
+				buttonType: azdata.ButtonType.Normal,
+				label: constants.START_DATACOLLECTION_BUTTON_LABEL,
+				width: 146,
+				height: 36,
+				iconHeight: 16,
+				iconWidth: 16,
+				iconPath: IconPathHelper.startDataCollection,
+				CSSStyles: {
+					...styles.TOOLBAR_CSS
+				}
+			}).component();
+		// TODO - implement onDidClick and add to disposables
+		return startDataCollectionButton;
+	}
+
+	private createStopDataCollectionButton(view: azdata.ModelView): azdata.ButtonComponent {
+		const stopDataCollectionButton = view.modelBuilder.button()
+			.withProps({
+				buttonType: azdata.ButtonType.Normal,
+				label: constants.STOP_DATACOLLECTION_BUTTON_LABEL,
+				height: 36,
+				iconHeight: 16,
+				iconWidth: 16,
+				iconPath: IconPathHelper.stopDataCollection,
+				CSSStyles: {
+					...styles.TOOLBAR_CSS
+				}
+			}).component();
+		// TODO - implement onDidClick and add to disposables
+		return stopDataCollectionButton;
+	}
+
+	private createImportPerformanceButton(view: azdata.ModelView): azdata.ButtonComponent {
+		const importPerformanceButton = view.modelBuilder.button()
+			.withProps({
+				buttonType: azdata.ButtonType.Normal,
+				label: constants.IMPORT_PERFORMANCEDATA_BUTTON_LABEL,
+				height: 36,
+				iconHeight: 16,
+				iconWidth: 16,
+				iconPath: IconPathHelper.import,
+				CSSStyles: {
+					...styles.TOOLBAR_CSS
+				}
+			}).component();
+		// TODO - implement onDidClick and add to disposables
+		return importPerformanceButton;
+	}
+
+	private createRecommendationParametersButton(view: azdata.ModelView): azdata.ButtonComponent {
+		const recommendationParametersButton = view.modelBuilder.button()
+			.withProps({
+				buttonType: azdata.ButtonType.Normal,
+				label: constants.RECOMMENDATION_PARAMETERS_BUTTON_LABEL,
+				height: 36,
+				iconHeight: 16,
+				iconWidth: 16,
+				iconPath: IconPathHelper.settings,
+				CSSStyles: {
+					...styles.TOOLBAR_CSS
+				}
+			}).component();
+		// TODO - implement onDidClick and add to disposables
+		return recommendationParametersButton;
+	}
+
+	public dispose(): void {
+		// TODO - need to call this at the place where toolbar is initialized
+		this._disposables.forEach(disposable => disposable.dispose());
+		this._disposables.length = 0;
+	}
+}