Machine Learning Extension - Model details (#9377)

* Machine Learning Services Extension - adding model details

extensions/machine-learning-services/src/views/mainViewBase.ts

@@ -39,7 +39,7 @@ export class MainViewBase {
 
 	public async refresh(): Promise<void> {
 		if (this._pages) {
-			await Promise.all(this._pages.map(p => p.refresh()));
+			await Promise.all(this._pages.map(async (p) => await p.refresh()));
 		}
 	}
 }

extensions/machine-learning-services/src/views/models/azureModelsComponent.ts

@@ -8,10 +8,9 @@ import { ModelViewBase } from './modelViewBase';
 import { ApiWrapper } from '../../common/apiWrapper';
 import { AzureResourceFilterComponent } from './azureResourceFilterComponent';
 import { AzureModelsTable } from './azureModelsTable';
-import * as constants from '../../common/constants';
-import { IPageView, IDataComponent, AzureModelResource } from '../interfaces';
+import { IDataComponent, AzureModelResource } from '../interfaces';
 
-export class AzureModelsComponent extends ModelViewBase implements IPageView, IDataComponent<AzureModelResource> {
+export class AzureModelsComponent extends ModelViewBase implements IDataComponent<AzureModelResource> {
 
 	public azureModelsTable: AzureModelsTable | undefined;
 	public azureFilterComponent: AzureResourceFilterComponent | undefined;
@@ -46,15 +45,36 @@ export class AzureModelsComponent extends ModelViewBase implements IPageView, ID
 		});
 
 		this._form = modelBuilder.formContainer().withFormItems([{
-			title: constants.azureModelFilter,
+			title: '',
 			component: this.azureFilterComponent.component
 		}, {
-			title: constants.azureModels,
+			title: '',
 			component: this._loader
 		}]).component();
 		return this._form;
 	}
 
+	public addComponents(formBuilder: azdata.FormBuilder) {
+		if (this.azureFilterComponent && this._loader) {
+			this.azureFilterComponent.addComponents(formBuilder);
+
+			formBuilder.addFormItems([{
+				title: '',
+				component: this._loader
+			}]);
+		}
+	}
+
+	public removeComponents(formBuilder: azdata.FormBuilder) {
+		if (this.azureFilterComponent && this._loader) {
+			this.azureFilterComponent.removeComponents(formBuilder);
+			formBuilder.removeFormItem({
+				title: '',
+				component: this._loader
+			});
+		}
+	}
+
 	private async onLoading(): Promise<void> {
 		if (this._loader) {
 			await this._loader.updateProperties({ loading: true });
@@ -93,11 +113,4 @@ export class AzureModelsComponent extends ModelViewBase implements IPageView, ID
 	public async refresh(): Promise<void> {
 		await this.loadData();
 	}
-
-	/**
-	 * Returns the title of the page
-	 */
-	public get title(): string {
-		return constants.azureModelsTitle;
-	}
 }

extensions/machine-learning-services/src/views/models/azureModelsTable.ts

@@ -36,9 +36,22 @@ export class AzureModelsTable extends ModelViewBase implements IDataComponent<Wo
 			.withProperties<azdata.DeclarativeTableProperties>(
 				{
 					columns: [
-						{ // Id
-							displayName: constants.modeIld,
-							ariaLabel: constants.modeIld,
+						{ // Name
+							displayName: constants.modelName,
+							ariaLabel: constants.modelName,
+							valueType: azdata.DeclarativeDataType.string,
+							isReadOnly: true,
+							width: 150,
+							headerCssStyles: {
+								...constants.cssStyles.tableHeader
+							},
+							rowCssStyles: {
+								...constants.cssStyles.tableRow
+							},
+						},
+						{ // Created
+							displayName: constants.modelCreated,
+							ariaLabel: constants.modelCreated,
 							valueType: azdata.DeclarativeDataType.string,
 							isReadOnly: true,
 							width: 100,
@@ -49,12 +62,12 @@ export class AzureModelsTable extends ModelViewBase implements IDataComponent<Wo
 								...constants.cssStyles.tableRow
 							},
 						},
-						{ // Name
-							displayName: constants.modelName,
-							ariaLabel: constants.modelName,
+						{ // Version
+							displayName: constants.modelVersion,
+							ariaLabel: constants.modelVersion,
 							valueType: azdata.DeclarativeDataType.string,
 							isReadOnly: true,
-							width: 150,
+							width: 100,
 							headerCssStyles: {
 								...constants.cssStyles.tableHeader
 							},
@@ -116,7 +129,7 @@ export class AzureModelsTable extends ModelViewBase implements IDataComponent<Wo
 			selectModelButton.onDidClick(() => {
 				this._selectedModelId = model.id;
 			});
-			return [model.id, model.name, selectModelButton];
+			return [model.name, model.createdTime, model.frameworkVersion, selectModelButton];
 		}
 
 		return [];

extensions/machine-learning-services/src/views/models/azureResourceFilterComponent.ts

@@ -15,7 +15,7 @@ import { AzureWorkspaceResource, IDataComponent } from '../interfaces';
 /**
  * View to render filters to pick an azure resource
  */
-const componentWidth = 200;
+const componentWidth = 300;
 export class AzureResourceFilterComponent extends ModelViewBase implements IDataComponent<AzureWorkspaceResource> {
 
 	private _form: azdata.FormContainer;
@@ -77,6 +77,45 @@ export class AzureResourceFilterComponent extends ModelViewBase implements IData
 		}]).component();
 	}
 
+	public addComponents(formBuilder: azdata.FormBuilder) {
+		if (this._accounts && this._subscriptions && this._groups && this._workspaces) {
+			formBuilder.addFormItems([{
+				title: constants.azureAccount,
+				component: this._accounts
+			}, {
+				title: constants.azureSubscription,
+				component: this._subscriptions
+			}, {
+				title: constants.azureGroup,
+				component: this._groups
+			}, {
+				title: constants.azureModelWorkspace,
+				component: this._workspaces
+			}]);
+		}
+	}
+
+	public removeComponents(formBuilder: azdata.FormBuilder) {
+		if (this._accounts && this._subscriptions && this._groups && this._workspaces) {
+			formBuilder.removeFormItem({
+				title: constants.azureAccount,
+				component: this._accounts
+			});
+			formBuilder.removeFormItem({
+				title: constants.azureSubscription,
+				component: this._subscriptions
+			});
+			formBuilder.removeFormItem({
+				title: constants.azureGroup,
+				component: this._groups
+			});
+			formBuilder.removeFormItem({
+				title: constants.azureModelWorkspace,
+				component: this._workspaces
+			});
+		}
+	}
+
 	/**
 	 * Returns the created component
 	 */

extensions/machine-learning-services/src/views/models/currentModelsPage.ts

@@ -37,7 +37,7 @@ export class CurrentModelsPage extends ModelViewBase implements IPageView {
 		this._tableComponent = this._dataTable.component;
 
 		let registerButton = modelBuilder.button().withProperties({
-			label: constants.registerModelButton,
+			label: constants.registerModelTitle,
 			width: this.buttonMaxLength
 		}).component();
 		registerButton.onDidClick(async () => {

extensions/machine-learning-services/src/views/models/currentModelsTable.ts

@@ -33,12 +33,12 @@ export class CurrentModelsTable extends ModelViewBase {
 			.withProperties<azdata.DeclarativeTableProperties>(
 				{
 					columns: [
-						{ // Id
-							displayName: constants.modeIld,
-							ariaLabel: constants.modeIld,
+						{ // Artifact name
+							displayName: constants.modelArtifactName,
+							ariaLabel: constants.modelArtifactName,
 							valueType: azdata.DeclarativeDataType.string,
 							isReadOnly: true,
-							width: 100,
+							width: 150,
 							headerCssStyles: {
 								...constants.cssStyles.tableHeader
 							},
@@ -59,6 +59,19 @@ export class CurrentModelsTable extends ModelViewBase {
 								...constants.cssStyles.tableRow
 							},
 						},
+						{ // Created
+							displayName: constants.modelCreated,
+							ariaLabel: constants.modelCreated,
+							valueType: azdata.DeclarativeDataType.string,
+							isReadOnly: true,
+							width: 150,
+							headerCssStyles: {
+								...constants.cssStyles.tableHeader
+							},
+							rowCssStyles: {
+								...constants.cssStyles.tableRow
+							},
+						},
 						{ // Action
 							displayName: '',
 							valueType: azdata.DeclarativeDataType.component,
@@ -116,7 +129,7 @@ export class CurrentModelsTable extends ModelViewBase {
 			}).component();
 			editLanguageButton.onDidClick(() => {
 			});
-			return [model.id, model.name, editLanguageButton];
+			return [model.artifactName, model.title, model.created, editLanguageButton];
 		}
 
 		return [];

extensions/machine-learning-services/src/views/models/localModelsComponent.ts

@@ -7,14 +7,15 @@ import * as azdata from 'azdata';
 import { ModelViewBase } from './modelViewBase';
 import { ApiWrapper } from '../../common/apiWrapper';
 import * as constants from '../../common/constants';
-import { IPageView, IDataComponent } from '../interfaces';
+import { IDataComponent } from '../interfaces';
 
 /**
  * View to pick local models file
  */
-export class LocalModelsComponent extends ModelViewBase implements IPageView, IDataComponent<string> {
+export class LocalModelsComponent extends ModelViewBase implements IDataComponent<string> {
 
 	private _form: azdata.FormContainer | undefined;
+	private _flex: azdata.FlexContainer | undefined;
 	private _localPath: azdata.InputBoxComponent | undefined;
 	private _localBrowse: azdata.ButtonComponent | undefined;
 
@@ -48,21 +49,40 @@ export class LocalModelsComponent extends ModelViewBase implements IPageView, ID
 			}
 		});
 
-		let flexFilePathModel = modelBuilder.flexContainer()
+		this._flex = modelBuilder.flexContainer()
 			.withLayout({
 				flexFlow: 'row',
-				justifyContent: 'space-between'
+				justifyContent: 'space-between',
+				width: this.componentMaxLength
 			}).withItems([
 				this._localPath, this._localBrowse]
 			).component();
 
 		this._form = modelBuilder.formContainer().withFormItems([{
 			title: '',
-			component: flexFilePathModel
+			component: this._flex
 		}]).component();
 		return this._form;
 	}
 
+	public addComponents(formBuilder: azdata.FormBuilder) {
+		if (this._flex) {
+			formBuilder.addFormItem({
+				title: '',
+				component: this._flex
+			});
+		}
+	}
+
+	public removeComponents(formBuilder: azdata.FormBuilder) {
+		if (this._flex) {
+			formBuilder.removeFormItem({
+				title: '',
+				component: this._flex
+			});
+		}
+	}
+
 	/**
 	 * Returns selected data
 	 */

extensions/machine-learning-services/src/views/models/modelDetailsComponent.ts

@@ -0,0 +1,103 @@
+/*---------------------------------------------------------------------------------------------
+ *  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 { ModelViewBase } from './modelViewBase';
+import { ApiWrapper } from '../../common/apiWrapper';
+import * as constants from '../../common/constants';
+import { IDataComponent } from '../interfaces';
+import { RegisteredModel } from '../../modelManagement/interfaces';
+
+/**
+ * View to pick local models file
+ */
+export class ModelDetailsComponent extends ModelViewBase implements IDataComponent<RegisteredModel> {
+
+	private _form: azdata.FormContainer | undefined;
+	private _nameComponent: azdata.InputBoxComponent | undefined;
+	private _descriptionComponent: azdata.InputBoxComponent | undefined;
+
+	/**
+	 * Creates new view
+	 */
+	constructor(apiWrapper: ApiWrapper, parent: ModelViewBase) {
+		super(apiWrapper, parent.root, parent);
+	}
+
+	/**
+	 *
+	 * @param modelBuilder Register the components
+	 */
+	public registerComponent(modelBuilder: azdata.ModelBuilder): azdata.Component {
+		this._nameComponent = modelBuilder.inputBox().withProperties({
+			value: '',
+			width: this.componentMaxLength - this.browseButtonMaxLength - this.spaceBetweenComponentsLength
+		}).component();
+		this._descriptionComponent = modelBuilder.inputBox().withProperties({
+			value: '',
+			multiline: true,
+			width: this.componentMaxLength - this.browseButtonMaxLength - this.spaceBetweenComponentsLength,
+			hight: '50px'
+		}).component();
+
+		this._form = modelBuilder.formContainer().withFormItems([{
+			title: constants.modelName,
+			component: this._nameComponent
+		}, {
+			title: constants.modelDescription,
+			component: this._descriptionComponent
+		}]).component();
+		return this._form;
+	}
+
+	public addComponents(formBuilder: azdata.FormBuilder) {
+		if (this._nameComponent && this._descriptionComponent) {
+			formBuilder.addFormItems([{
+				title: constants.modelName,
+				component: this._nameComponent
+			}, {
+				title: constants.modelDescription,
+				component: this._descriptionComponent
+			}]);
+		}
+	}
+
+	public removeComponents(formBuilder: azdata.FormBuilder) {
+		if (this._nameComponent && this._descriptionComponent) {
+			formBuilder.removeFormItem({
+				title: constants.modelName,
+				component: this._nameComponent
+			});
+			formBuilder.removeFormItem({
+				title: constants.modelDescription,
+				component: this._descriptionComponent
+			});
+		}
+	}
+
+
+	/**
+	 * Returns selected data
+	 */
+	public get data(): RegisteredModel {
+		return {
+			title: this._nameComponent?.value,
+			description: this._descriptionComponent?.value
+		};
+	}
+
+	/**
+	 * Returns the component
+	 */
+	public get component(): azdata.Component | undefined {
+		return this._form;
+	}
+
+	/**
+	 * Refreshes the view
+	 */
+	public async refresh(): Promise<void> {
+	}
+}

extensions/machine-learning-services/src/views/models/modelDetailsPage.ts

@@ -0,0 +1,69 @@
+/*---------------------------------------------------------------------------------------------
+ *  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 { ModelViewBase } from './modelViewBase';
+import { ApiWrapper } from '../../common/apiWrapper';
+import * as constants from '../../common/constants';
+import { IPageView, IDataComponent } from '../interfaces';
+import { ModelDetailsComponent } from './modelDetailsComponent';
+import { RegisteredModel } from '../../modelManagement/interfaces';
+
+/**
+ * View to pick model details
+ */
+export class ModelDetailsPage extends ModelViewBase implements IPageView, IDataComponent<RegisteredModel> {
+
+	private _form: azdata.FormContainer | undefined;
+	private _formBuilder: azdata.FormBuilder | undefined;
+	public modelDetails: ModelDetailsComponent | undefined;
+
+	constructor(apiWrapper: ApiWrapper, parent: ModelViewBase) {
+		super(apiWrapper, parent.root, parent);
+	}
+
+	/**
+	 *
+	 * @param modelBuilder Register components
+	 */
+	public registerComponent(modelBuilder: azdata.ModelBuilder): azdata.Component {
+
+		this._formBuilder = modelBuilder.formContainer();
+		this.modelDetails = new ModelDetailsComponent(this._apiWrapper, this);
+		this.modelDetails.registerComponent(modelBuilder);
+
+		this.modelDetails.addComponents(this._formBuilder);
+		this.refresh();
+		this._form = this._formBuilder.component();
+		return this._form;
+	}
+
+	/**
+	 * Returns selected data
+	 */
+	public get data(): RegisteredModel | undefined {
+		return this.modelDetails?.data;
+	}
+
+	/**
+	 * Returns the component
+	 */
+	public get component(): azdata.Component | undefined {
+		return this._form;
+	}
+
+	/**
+	 * Refreshes the view
+	 */
+	public async refresh(): Promise<void> {
+	}
+
+	/**
+	 * Returns page title
+	 */
+	public get title(): string {
+		return constants.modelDetailsPageTitle;
+	}
+}

extensions/machine-learning-services/src/views/models/modelManagementController.ts

@@ -52,6 +52,7 @@ export class ModelManagementController extends ControllerBase {
 		// Open view
 		//
 		view.open();
+		await view.refresh();
 		return view;
 	}
 
@@ -90,7 +91,7 @@ export class ModelManagementController extends ControllerBase {
 		});
 		view.on(RegisterLocalModelEventName, async (arg) => {
 			let registerArgs = <RegisterLocalModelEventArgs>arg;
-			await this.executeAction(view, RegisterLocalModelEventName, this.registerLocalModel, this._registeredModelService, registerArgs.filePath);
+			await this.executeAction(view, RegisterLocalModelEventName, this.registerLocalModel, this._registeredModelService, registerArgs.filePath, registerArgs.details);
 			view.refresh();
 		});
 		view.on(RegisterModelEventName, async () => {
@@ -99,7 +100,7 @@ export class ModelManagementController extends ControllerBase {
 		view.on(RegisterAzureModelEventName, async (arg) => {
 			let registerArgs = <RegisterAzureModelEventArgs>arg;
 			await this.executeAction(view, RegisterAzureModelEventName, this.registerAzureModel, this._amlService, this._registeredModelService,
-				registerArgs.account, registerArgs.subscription, registerArgs.group, registerArgs.workspace, registerArgs.model);
+				registerArgs.account, registerArgs.subscription, registerArgs.group, registerArgs.workspace, registerArgs.model, registerArgs.details);
 		});
 		view.on(SourceModelSelectedEventName, () => {
 			view.refresh();
@@ -157,9 +158,9 @@ export class ModelManagementController extends ControllerBase {
 		return await service.getModels(account, subscription, resourceGroup, workspace) || [];
 	}
 
-	private async registerLocalModel(service: RegisteredModelService, filePath?: string): Promise<void> {
+	private async registerLocalModel(service: RegisteredModelService, filePath: string, details: RegisteredModel | undefined): Promise<void> {
 		if (filePath) {
-			await service.registerLocalModel(filePath);
+			await service.registerLocalModel(filePath, details);
 		} else {
 			throw Error(constants.invalidModelToRegisterError);
 
@@ -173,13 +174,15 @@ export class ModelManagementController extends ControllerBase {
 		subscription: azureResource.AzureResourceSubscription | undefined,
 		resourceGroup: azureResource.AzureResource | undefined,
 		workspace: Workspace | undefined,
-		model: WorkspaceModel | undefined): Promise<void> {
-		if (!account || !subscription || !resourceGroup || !workspace || !model) {
+		model: WorkspaceModel | undefined,
+		details: RegisteredModel | undefined): Promise<void> {
+		if (!account || !subscription || !resourceGroup || !workspace || !model || !details) {
 			throw Error(constants.invalidAzureResourceError);
 		}
 		const filePath = await azureService.downloadModel(account, subscription, resourceGroup, workspace, model);
 		if (filePath) {
-			await service.registerLocalModel(filePath);
+
+			await service.registerLocalModel(filePath, details);
 			await fs.promises.unlink(filePath);
 		} else {
 			throw Error(constants.invalidModelToRegisterError);

extensions/machine-learning-services/src/views/models/modelSourcePage.ts

@@ -0,0 +1,92 @@
+/*---------------------------------------------------------------------------------------------
+ *  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 { ModelViewBase } from './modelViewBase';
+import { ApiWrapper } from '../../common/apiWrapper';
+import * as constants from '../../common/constants';
+import { IPageView, IDataComponent } from '../interfaces';
+import { ModelSourcesComponent, ModelSourceType } from './modelSourcesComponent';
+import { LocalModelsComponent } from './localModelsComponent';
+import { AzureModelsComponent } from './azureModelsComponent';
+
+/**
+ * View to pick model source
+ */
+export class ModelSourcePage extends ModelViewBase implements IPageView, IDataComponent<ModelSourceType> {
+
+	private _form: azdata.FormContainer | undefined;
+	private _formBuilder: azdata.FormBuilder | undefined;
+	public modelResources: ModelSourcesComponent | undefined;
+	public localModelsComponent: LocalModelsComponent | undefined;
+	public azureModelsComponent: AzureModelsComponent | undefined;
+
+	constructor(apiWrapper: ApiWrapper, parent: ModelViewBase) {
+		super(apiWrapper, parent.root, parent);
+	}
+
+	/**
+	 *
+	 * @param modelBuilder Register components
+	 */
+	public registerComponent(modelBuilder: azdata.ModelBuilder): azdata.Component {
+
+		this._formBuilder = modelBuilder.formContainer();
+		this.modelResources = new ModelSourcesComponent(this._apiWrapper, this);
+		this.modelResources.registerComponent(modelBuilder);
+		this.localModelsComponent = new LocalModelsComponent(this._apiWrapper, this);
+		this.localModelsComponent.registerComponent(modelBuilder);
+		this.azureModelsComponent = new AzureModelsComponent(this._apiWrapper, this);
+		this.azureModelsComponent.registerComponent(modelBuilder);
+		this.modelResources.addComponents(this._formBuilder);
+		this.refresh();
+		this._form = this._formBuilder.component();
+		return this._form;
+	}
+
+	/**
+	 * Returns selected data
+	 */
+	public get data(): ModelSourceType {
+		return this.modelResources?.data || ModelSourceType.Local;
+	}
+
+	/**
+	 * Returns the component
+	 */
+	public get component(): azdata.Component | undefined {
+		return this._form;
+	}
+
+	/**
+	 * Refreshes the view
+	 */
+	public async refresh(): Promise<void> {
+		if (this._formBuilder) {
+			if (this.modelResources && this.modelResources.data === ModelSourceType.Local) {
+				if (this.localModelsComponent && this.azureModelsComponent) {
+					this.azureModelsComponent.removeComponents(this._formBuilder);
+					this.localModelsComponent.addComponents(this._formBuilder);
+					await this.localModelsComponent.refresh();
+				}
+
+			} else if (this.modelResources && this.modelResources.data === ModelSourceType.Azure) {
+				if (this.localModelsComponent && this.azureModelsComponent) {
+					this.localModelsComponent.removeComponents(this._formBuilder);
+					this.azureModelsComponent.addComponents(this._formBuilder);
+					await this.azureModelsComponent.refresh();
+				}
+
+			}
+		}
+	}
+
+	/**
+	 * Returns page title
+	 */
+	public get title(): string {
+		return constants.modelSourcePageTitle;
+	}
+}

extensions/machine-learning-services/src/views/models/modelSourcesComponent.ts

@@ -7,18 +7,19 @@ import * as azdata from 'azdata';
 import { ModelViewBase, SourceModelSelectedEventName } from './modelViewBase';
 import { ApiWrapper } from '../../common/apiWrapper';
 import * as constants from '../../common/constants';
-import { IPageView, IDataComponent } from '../interfaces';
+import { IDataComponent } from '../interfaces';
 
 export enum ModelSourceType {
 	Local,
 	Azure
 }
 /**
- * View tp pick model source
+ * View to pick model source
  */
-export class ModelSourcesComponent extends ModelViewBase implements IPageView, IDataComponent<ModelSourceType> {
+export class ModelSourcesComponent extends ModelViewBase implements IDataComponent<ModelSourceType> {
 
 	private _form: azdata.FormContainer | undefined;
+	private _flexContainer: azdata.FlexContainer | undefined;
 	private _amlModel: azdata.RadioButtonComponent | undefined;
 	private _localModel: azdata.RadioButtonComponent | undefined;
 	private _isLocalModel: boolean = true;
@@ -58,7 +59,8 @@ export class ModelSourcesComponent extends ModelViewBase implements IPageView, I
 			this.sendRequest(SourceModelSelectedEventName);
 		});
 
-		let flex = modelBuilder.flexContainer()
+
+		this._flexContainer = modelBuilder.flexContainer()
 			.withLayout({
 				flexFlow: 'column',
 				justifyContent: 'space-between'
@@ -67,12 +69,25 @@ export class ModelSourcesComponent extends ModelViewBase implements IPageView, I
 			).component();
 
 		this._form = modelBuilder.formContainer().withFormItems([{
-			title: constants.modelSourcesTitle,
-			component: flex
+			title: '',
+			component: this._flexContainer
 		}]).component();
+
 		return this._form;
 	}
 
+	public addComponents(formBuilder: azdata.FormBuilder) {
+		if (this._flexContainer) {
+			formBuilder.addFormItem({ title: constants.modelSourcesTitle, component: this._flexContainer });
+		}
+	}
+
+	public removeComponents(formBuilder: azdata.FormBuilder) {
+		if (this._flexContainer) {
+			formBuilder.removeFormItem({ title: constants.modelSourcesTitle, component: this._flexContainer });
+		}
+	}
+
 	/**
 	 * Returns selected data
 	 */
@@ -92,11 +107,4 @@ export class ModelSourcesComponent extends ModelViewBase implements IPageView, I
 	 */
 	public async refresh(): Promise<void> {
 	}
-
-	/**
-	 * Returns page title
-	 */
-	public get title(): string {
-		return constants.modelSourcesTitle;
-	}
 }

extensions/machine-learning-services/src/views/models/modelViewBase.ts

@@ -15,11 +15,15 @@ import { AzureWorkspaceResource, AzureModelResource } from '../interfaces';
 export interface AzureResourceEventArgs extends AzureWorkspaceResource {
 }
 
-export interface RegisterAzureModelEventArgs extends AzureModelResource {
+export interface RegisterModelEventArgs extends AzureWorkspaceResource {
+	details?: RegisteredModel
+}
+
+export interface RegisterAzureModelEventArgs extends AzureModelResource, RegisterModelEventArgs {
 	model?: WorkspaceModel;
 }
 
-export interface RegisterLocalModelEventArgs extends AzureResourceEventArgs {
+export interface RegisterLocalModelEventArgs extends RegisterModelEventArgs {
 	filePath?: string;
 }
 
@@ -102,9 +106,10 @@ export abstract class ModelViewBase extends ViewBase {
 	 * registers local model
 	 * @param localFilePath local file path
 	 */
-	public async registerLocalModel(localFilePath: string | undefined): Promise<void> {
+	public async registerLocalModel(localFilePath: string | undefined, details: RegisteredModel | undefined): Promise<void> {
 		const args: RegisterLocalModelEventArgs = {
-			filePath: localFilePath
+			filePath: localFilePath,
+			details: details
 		};
 		return await this.sendDataRequest(RegisterLocalModelEventName, args);
 	}
@@ -113,7 +118,10 @@ export abstract class ModelViewBase extends ViewBase {
 	 * registers azure model
 	 * @param args azure resource
 	 */
-	public async registerAzureModel(args: RegisterAzureModelEventArgs | undefined): Promise<void> {
+	public async registerAzureModel(resource: AzureModelResource | undefined, details: RegisteredModel | undefined): Promise<void> {
+		const args: RegisterAzureModelEventArgs = Object.assign({}, resource, {
+			details: details
+		});
 		return await this.sendDataRequest(RegisterAzureModelEventName, args);
 	}
 

extensions/machine-learning-services/src/views/models/registerModelWizard.ts

@@ -11,15 +11,16 @@ import { LocalModelsComponent } from './localModelsComponent';
 import { AzureModelsComponent } from './azureModelsComponent';
 import * as constants from '../../common/constants';
 import { WizardView } from '../wizardView';
+import { ModelSourcePage } from './modelSourcePage';
+import { ModelDetailsPage } from './modelDetailsPage';
 
 /**
  * Wizard to register a model
  */
 export class RegisterModelWizard extends ModelViewBase {
 
-	public modelResources: ModelSourcesComponent | undefined;
-	public localModelsComponent: LocalModelsComponent | undefined;
-	public azureModelsComponent: AzureModelsComponent | undefined;
+	public modelSourcePage: ModelSourcePage | undefined;
+	public modelDetailsPage: ModelDetailsPage | undefined;
 	public wizardView: WizardView | undefined;
 	private _parentView: ModelViewBase | undefined;
 
@@ -35,21 +36,23 @@ export class RegisterModelWizard extends ModelViewBase {
 	 * Opens a dialog to manage packages used by notebooks.
 	 */
 	public open(): void {
-
-		this.modelResources = new ModelSourcesComponent(this._apiWrapper, this);
-		this.localModelsComponent = new LocalModelsComponent(this._apiWrapper, this);
-		this.azureModelsComponent = new AzureModelsComponent(this._apiWrapper, this);
-
+		this.modelSourcePage = new ModelSourcePage(this._apiWrapper, this);
+		this.modelDetailsPage = new ModelDetailsPage(this._apiWrapper, this);
 		this.wizardView = new WizardView(this._apiWrapper);
 
-		let wizard = this.wizardView.createWizard(constants.registerModelWizardTitle, [this.modelResources, this.localModelsComponent]);
+		let wizard = this.wizardView.createWizard(constants.registerModelTitle, [this.modelSourcePage, this.modelDetailsPage]);
+
 		this.mainViewPanel = wizard;
 		wizard.doneButton.label = constants.azureRegisterModel;
 		wizard.generateScriptButton.hidden = true;
-
+		wizard.displayPageTitles = true;
 		wizard.registerNavigationValidator(async (pageInfo: azdata.window.WizardPageChangeInfo) => {
 			if (pageInfo.newPage === undefined) {
+				wizard.cancelButton.enabled = false;
+				wizard.backButton.enabled = false;
 				await this.registerModel();
+				wizard.cancelButton.enabled = true;
+				wizard.backButton.enabled = true;
 				if (this._parentView) {
 					this._parentView?.refresh();
 				}
@@ -62,12 +65,24 @@ export class RegisterModelWizard extends ModelViewBase {
 		wizard.open();
 	}
 
+	public get modelResources(): ModelSourcesComponent | undefined {
+		return this.modelSourcePage?.modelResources;
+	}
+
+	public get localModelsComponent(): LocalModelsComponent | undefined {
+		return this.modelSourcePage?.localModelsComponent;
+	}
+
+	public get azureModelsComponent(): AzureModelsComponent | undefined {
+		return this.modelSourcePage?.azureModelsComponent;
+	}
+
 	private async registerModel(): Promise<boolean> {
 		try {
 			if (this.modelResources && this.localModelsComponent && this.modelResources.data === ModelSourceType.Local) {
-				await this.registerLocalModel(this.localModelsComponent.data);
+				await this.registerLocalModel(this.localModelsComponent.data, this.modelDetailsPage?.data);
 			} else {
-				await this.registerAzureModel(this.azureModelsComponent?.data);
+				await this.registerAzureModel(this.azureModelsComponent?.data, this.modelDetailsPage?.data);
 			}
 			this.showInfoMessage(constants.modelRegisteredSuccessfully);
 			return true;
@@ -78,12 +93,6 @@ export class RegisterModelWizard extends ModelViewBase {
 	}
 
 	private loadPages(): void {
-		if (this.modelResources && this.localModelsComponent && this.modelResources.data === ModelSourceType.Local) {
-			this.wizardView?.addWizardPage(this.localModelsComponent, 1);
-
-		} else if (this.azureModelsComponent) {
-			this.wizardView?.addWizardPage(this.azureModelsComponent, 1);
-		}
 	}
 
 	/**
@@ -91,6 +100,6 @@ export class RegisterModelWizard extends ModelViewBase {
 	 */
 	public async refresh(): Promise<void> {
 		this.loadPages();
-		this.wizardView?.refresh();
+		await this.wizardView?.refresh();
 	}
 }