[New Migration Experience] added toolbar for performance data collection

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

@@ -49,6 +49,10 @@ 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 import: IconPath;
+	public static settings: IconPath;
 
 	public static setExtensionContext(context: vscode.ExtensionContext) {
 		IconPathHelper.copy = {
@@ -203,5 +207,22 @@ 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.settings = {
+			light: context.asAbsolutePath('images/settings.svg'),
+			dark: context.asAbsolutePath('images/settings.svg')
+		};
+
 	}
 }

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

@@ -171,8 +171,10 @@ export const RECOMMENDED_CONFIGURATION = localize('sql.migration.sku.recommended
 export const GET_AZURE_RECOMMENDATION = localize('sql.migration.sku.get.recommendation', "Get Azure recommendation");
 export const REFINE_AZURE_RECOMMENDATION = localize('sql.migration.sku.refine.recommendation', "Refine Azure recommendation");
 export const REFRESH_AZURE_RECOMMENDATION = localize('sql.migration.sku.refresh.recommendation', "Refresh recommendation");
+export const START_PERFORMANCE_COLLECTION = localize('sql.migration.sku.start.performance.collection', "Start data collection");
 export const STOP_PERFORMANCE_COLLECTION = localize('sql.migration.sku.stop.performance.collection', "Stop data collection");
 export const RESTART_PERFORMANCE_COLLECTION = localize('sql.migration.sku.restart.performance.collection', "Restart data collection");
+export const IMPORT_PERFORMANCE_DATA = localize('sql.migration.sku.import.performance.data', "Import performance data");
 // allow-any-unicode-next-line
 export const AZURE_RECOMMENDATION_CARD_NOT_ENABLED = localize('sql.migration.sku.card.azureRecommendation.notEnabled', "Azure recommendation is not available. Click “Get Azure recommendation” button below");
 export const AZURE_RECOMMENDATION_CARD_IN_PROGRESS = localize('sql.migration.sku.card.azureRecommendation.inProgress', "Azure recommendation will be displayed once data collection is complete.");

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,127 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+/*---------------------------------------------------------------------------------------------
+* For Assessement Summary and SKU Recommendation Page.
+* This file contains the code for toolbar at the top of page with buttons for different data
+* collection functionalities.
+-----------------------------------------------------------------------------------------------*/
+
+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.createStartPerformanceCollectionButton(view), toolbarSeparatorAfter: false },
+			<azdata.ToolbarComponent>{ component: this.createStopPerformanceCollectionButton(view), toolbarSeparatorAfter: false },
+			<azdata.ToolbarComponent>{ component: this.createImportPerformanceDataButton(view), toolbarSeparatorAfter: true },
+			<azdata.ToolbarComponent>{ component: this.createRecommendationParametersButton(view), toolbarSeparatorAfter: false },
+		]);
+
+		return toolbar.component();
+	}
+
+	private createRefreshSKURecommendationButton(view: azdata.ModelView): azdata.ButtonComponent {
+		const refreshSKURecommendationButton = view.modelBuilder.button()
+			.withProps({
+				buttonType: azdata.ButtonType.Normal,
+				label: constants.REFRESH,
+				height: 36,
+				iconHeight: 16,
+				iconWidth: 16,
+				iconPath: IconPathHelper.refresh,
+				CSSStyles: {
+					...styles.TOOLBAR_CSS
+				}
+			}).component();
+		// TODO - implement onDidClick and add to disposables
+		return refreshSKURecommendationButton;
+	}
+
+	private createStartPerformanceCollectionButton(view: azdata.ModelView): azdata.ButtonComponent {
+		const startPerformanceCollectionButton = view.modelBuilder.button()
+			.withProps({
+				buttonType: azdata.ButtonType.Normal,
+				label: constants.START_PERFORMANCE_COLLECTION,
+				width: 146,
+				height: 36,
+				iconHeight: 16,
+				iconWidth: 16,
+				iconPath: IconPathHelper.startDataCollection,
+				CSSStyles: {
+					...styles.TOOLBAR_CSS
+				}
+			}).component();
+		// TODO - implement onDidClick and add to disposables
+		return startPerformanceCollectionButton;
+	}
+
+	private createStopPerformanceCollectionButton(view: azdata.ModelView): azdata.ButtonComponent {
+		const stopPerformanceCollectionButton = view.modelBuilder.button()
+			.withProps({
+				buttonType: azdata.ButtonType.Normal,
+				label: constants.STOP_PERFORMANCE_COLLECTION,
+				height: 36,
+				iconHeight: 16,
+				iconWidth: 16,
+				iconPath: IconPathHelper.stopDataCollection,
+				CSSStyles: {
+					...styles.TOOLBAR_CSS
+				}
+			}).component();
+		stopPerformanceCollectionButton.enabled = false;
+		// TODO - implement onDidClick and add to disposables
+		return stopPerformanceCollectionButton;
+	}
+
+	private createImportPerformanceDataButton(view: azdata.ModelView): azdata.ButtonComponent {
+		const importPerformanceDataButton = view.modelBuilder.button()
+			.withProps({
+				buttonType: azdata.ButtonType.Normal,
+				label: constants.IMPORT_PERFORMANCE_DATA,
+				height: 36,
+				iconHeight: 16,
+				iconWidth: 16,
+				iconPath: IconPathHelper.import,
+				CSSStyles: {
+					...styles.TOOLBAR_CSS
+				}
+			}).component();
+		// TODO - implement onDidClick and add to disposables
+		return importPerformanceDataButton;
+	}
+
+	private createRecommendationParametersButton(view: azdata.ModelView): azdata.ButtonComponent {
+		const recommendationParametersButton = view.modelBuilder.button()
+			.withProps({
+				buttonType: azdata.ButtonType.Normal,
+				label: constants.RECOMMENDATION_PARAMETERS,
+				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(
+			d => { try { d.dispose(); } catch { } });
+	}
+}

extensions/sql-migration/src/wizard/skuRecommendationPage.ts → extensions/sql-migration/src/wizard/skuRecommendation/skuRecommendationPage.ts

@@ -5,25 +5,26 @@
 
 import * as azdata from 'azdata';
 import * as vscode from 'vscode';
-import * as utils from '../api/utils';
-import { MigrationTargetType } from '../api/utils';
-import * as contracts from '../service/contracts';
-import { MigrationWizardPage } from '../models/migrationWizardPage';
-import { MigrationStateModel, PerformanceDataSourceOptions, StateChangeEvent, AssessmentRuleId } from '../models/stateMachine';
-import { AssessmentResultsDialog } from '../dialog/assessment/assessmentResultsDialog';
-import { SkuRecommendationResultsDialog } from '../dialog/skuRecommendationResults/skuRecommendationResultsDialog';
-import { GetAzureRecommendationDialog } from '../dialog/skuRecommendationResults/getAzureRecommendationDialog';
-import * as constants from '../constants/strings';
+import * as utils from '../../api/utils';
+import { MigrationTargetType } from '../../api/utils';
+import * as contracts from '../../service/contracts';
+import { MigrationWizardPage } from '../../models/migrationWizardPage';
+import { MigrationStateModel, PerformanceDataSourceOptions, StateChangeEvent, AssessmentRuleId } from '../../models/stateMachine';
+import { AssessmentResultsDialog } from '../../dialog/assessment/assessmentResultsDialog';
+import { SkuRecommendationResultsDialog } from '../../dialog/skuRecommendationResults/skuRecommendationResultsDialog';
+import { GetAzureRecommendationDialog } from '../../dialog/skuRecommendationResults/getAzureRecommendationDialog';
+import * as constants from '../../constants/strings';
 import { EOL } from 'os';
-import { IconPath, IconPathHelper } from '../constants/iconPathHelper';
-import { WIZARD_INPUT_COMPONENT_WIDTH } from './wizardController';
-import * as styles from '../constants/styles';
-import { SkuEditParametersDialog } from '../dialog/skuRecommendationResults/skuEditParametersDialog';
-import { logError, TelemetryViews, TelemetryAction, sendSqlMigrationActionEvent, getTelemetryProps } from '../telemetry';
-import { TdeConfigurationDialog } from '../dialog/tdeConfiguration/tdeConfigurationDialog';
-import { TdeMigrationModel } from '../models/tdeModels';
-import { getSourceConnectionProfile } from '../api/sqlUtils';
-import { ConfigDialogSetting } from '../models/tdeModels'
+import { IconPath, IconPathHelper } from '../../constants/iconPathHelper';
+import { WIZARD_INPUT_COMPONENT_WIDTH } from '../wizardController';
+import * as styles from '../../constants/styles';
+import { SkuEditParametersDialog } from '../../dialog/skuRecommendationResults/skuEditParametersDialog';
+import { logError, TelemetryViews, TelemetryAction, sendSqlMigrationActionEvent, getTelemetryProps } from '../../telemetry';
+import { TdeConfigurationDialog } from '../../dialog/tdeConfiguration/tdeConfigurationDialog';
+import { TdeMigrationModel } from '../../models/tdeModels';
+import { getSourceConnectionProfile } from '../../api/sqlUtils';
+import { ConfigDialogSetting } from '../../models/tdeModels';
+import { SkuDataCollectionToolbar } from './skuDataCollectionToolbar';
 
 export interface Product {
 	type: MigrationTargetType;
@@ -59,6 +60,7 @@ export class SKURecommendationPage extends MigrationWizardPage {
 	private _azureRecommendationInfoText!: azdata.TextComponent;
 	private _getAzureRecommendationButton!: azdata.ButtonComponent;
 
+	private _skuDataCollectionToolbar!: SkuDataCollectionToolbar;
 	private _skuDataCollectionStatusContainer!: azdata.FlexContainer;
 	private _skuDataCollectionStatusIcon!: azdata.ImageComponent;
 	private _skuDataCollectionStatusText!: azdata.TextComponent;
@@ -118,6 +120,12 @@ export class SKURecommendationPage extends MigrationWizardPage {
 				width: 20,
 				height: 20
 			}).component();
+
+		this._skuDataCollectionToolbar = new SkuDataCollectionToolbar();
+		const toolbar = this._skuDataCollectionToolbar.createToolbar(view);
+		// TODO - add toolbar to disposables
+		// TODO - once new toolbar is ready for data collection, remove previous code.
+
 		const igContainer = this._view.modelBuilder.flexContainer()
 			.withProps({ CSSStyles: { 'align-items': 'center' } })
 			.component();
@@ -172,6 +180,7 @@ export class SKURecommendationPage extends MigrationWizardPage {
 		const statusContainer = this._view.modelBuilder.flexContainer()
 			.withLayout({ flexFlow: 'column' })
 			.withItems([
+				toolbar,
 				igContainer,
 				this._detailsComponent,
 				refreshAssessmentButton,
@@ -219,7 +228,6 @@ export class SKURecommendationPage extends MigrationWizardPage {
 		await this._view.initializeModel(this._rootContainer);
 	}
 
-
 	private createStatusComponent(view: azdata.ModelView): azdata.TextComponent {
 		const component = view.modelBuilder.text()
 			.withProps({