ML - dashboard icons and links (#10153)

* ML - dashboard icons and links

extensions/machine-learning/src/views/models/manageModels/currentModelsComponent.ts

@@ -0,0 +1,148 @@
+/*---------------------------------------------------------------------------------------------
+ *  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 constants from '../../../common/constants';
+import { ModelViewBase } from '../modelViewBase';
+import { CurrentModelsTable } from './currentModelsTable';
+import { ApiWrapper } from '../../../common/apiWrapper';
+import { IPageView, IComponentSettings } from '../../interfaces';
+import { TableSelectionComponent } from '../tableSelectionComponent';
+import { ImportedModel } from '../../../modelManagement/interfaces';
+
+/**
+ * View to render current registered models
+ */
+export class CurrentModelsComponent extends ModelViewBase implements IPageView {
+	private _tableComponent: azdata.Component | undefined;
+	private _dataTable: CurrentModelsTable | undefined;
+	private _loader: azdata.LoadingComponent | undefined;
+	private _tableSelectionComponent: TableSelectionComponent | undefined;
+
+	/**
+	 *
+	 * @param apiWrapper Creates new view
+	 * @param parent page parent
+	 */
+	constructor(apiWrapper: ApiWrapper, parent: ModelViewBase, private _settings: IComponentSettings) {
+		super(apiWrapper, parent.root, parent);
+	}
+
+	/**
+	 *
+	 * @param modelBuilder register the components
+	 */
+	public registerComponent(modelBuilder: azdata.ModelBuilder): azdata.Component {
+		this._tableSelectionComponent = new TableSelectionComponent(this._apiWrapper, this, false);
+		this._tableSelectionComponent.registerComponent(modelBuilder);
+		this._tableSelectionComponent.onSelectedChanged(async () => {
+			await this.onTableSelected();
+		});
+		this._dataTable = new CurrentModelsTable(this._apiWrapper, this, this._settings);
+		this._dataTable.registerComponent(modelBuilder);
+		this._tableComponent = this._dataTable.component;
+
+		let formModelBuilder = modelBuilder.formContainer();
+		this._tableSelectionComponent.addComponents(formModelBuilder);
+
+		if (this._tableComponent) {
+			formModelBuilder.addFormItem({
+				component: this._tableComponent,
+				title: ''
+			});
+		}
+
+		this._loader = modelBuilder.loadingComponent()
+			.withItem(formModelBuilder.component())
+			.withProperties({
+				loading: true
+			}).component();
+		return this._loader;
+	}
+
+	public addComponents(formBuilder: azdata.FormBuilder) {
+		if (this._tableSelectionComponent && this._dataTable) {
+			this._tableSelectionComponent.addComponents(formBuilder);
+			this._dataTable.addComponents(formBuilder);
+		}
+	}
+
+	public removeComponents(formBuilder: azdata.FormBuilder) {
+		if (this._tableSelectionComponent && this._dataTable) {
+			this._tableSelectionComponent.removeComponents(formBuilder);
+			this._dataTable.removeComponents(formBuilder);
+		}
+	}
+
+	/**
+	 * Returns the component
+	 */
+	public get component(): azdata.Component | undefined {
+		return this._loader;
+	}
+
+	/**
+	 * Refreshes the view
+	 */
+	public async refresh(): Promise<void> {
+		await this.onLoading();
+
+		try {
+			if (this._tableSelectionComponent) {
+				this._tableSelectionComponent.refresh();
+			}
+			await this._dataTable?.refresh();
+		} catch (err) {
+			this.showErrorMessage(constants.getErrorMessage(err));
+		} finally {
+			await this.onLoaded();
+		}
+	}
+
+	public get data(): ImportedModel[] | undefined {
+		return this._dataTable?.data;
+	}
+
+	private async onTableSelected(): Promise<void> {
+		if (this._tableSelectionComponent?.data) {
+			this.importTable = this._tableSelectionComponent?.data;
+			await this.storeImportConfigTable();
+			await this._dataTable?.refresh();
+		}
+	}
+
+	public get modelTable(): CurrentModelsTable | undefined {
+		return this._dataTable;
+	}
+
+	/**
+	 * disposes the view
+	 */
+	public async disposeComponent(): Promise<void> {
+		if (this._dataTable) {
+			await this._dataTable.disposeComponent();
+		}
+	}
+
+	/**
+	 * returns the title of the page
+	 */
+	public get title(): string {
+		return constants.currentModelsTitle;
+	}
+
+	private async onLoading(): Promise<void> {
+		if (this._loader) {
+			await this._loader.updateProperties({ loading: true });
+		}
+	}
+
+	private async onLoaded(): Promise<void> {
+		if (this._loader) {
+			await this._loader.updateProperties({ loading: false });
+		}
+	}
+}

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

@@ -0,0 +1,314 @@
+/*---------------------------------------------------------------------------------------------
+ *  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 * as constants from '../../../common/constants';
+import { ModelViewBase, DeleteModelEventName, EditModelEventName } from '../modelViewBase';
+import { ApiWrapper } from '../../../common/apiWrapper';
+import { ImportedModel } from '../../../modelManagement/interfaces';
+import { IDataComponent, IComponentSettings } from '../../interfaces';
+import { ModelArtifact } from '../prediction/modelArtifact';
+import * as utils from '../../../common/utils';
+
+/**
+ * View to render registered models table
+ */
+export class CurrentModelsTable extends ModelViewBase implements IDataComponent<ImportedModel[]> {
+
+	private _table: azdata.DeclarativeTableComponent | undefined;
+	private _modelBuilder: azdata.ModelBuilder | undefined;
+	private _selectedModel: ImportedModel[] = [];
+	private _loader: azdata.LoadingComponent | undefined;
+	private _downloadedFile: ModelArtifact | undefined;
+	private _onModelSelectionChanged: vscode.EventEmitter<void> = new vscode.EventEmitter<void>();
+	public readonly onModelSelectionChanged: vscode.Event<void> = this._onModelSelectionChanged.event;
+
+	/**
+	 * Creates new view
+	 */
+	constructor(apiWrapper: ApiWrapper, parent: ModelViewBase, private _settings: IComponentSettings) {
+		super(apiWrapper, parent.root, parent);
+	}
+
+	/**
+	 *
+	 * @param modelBuilder register the components
+	 */
+	public registerComponent(modelBuilder: azdata.ModelBuilder): azdata.Component {
+		this._modelBuilder = modelBuilder;
+		let columns = [
+			{ // 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: 150,
+				headerCssStyles: {
+					...constants.cssStyles.tableHeader
+				},
+				rowCssStyles: {
+					...constants.cssStyles.tableRow
+				},
+			},
+			{ // Action
+				displayName: '',
+				valueType: azdata.DeclarativeDataType.component,
+				isReadOnly: true,
+				width: 50,
+				headerCssStyles: {
+					...constants.cssStyles.tableHeader
+				},
+				rowCssStyles: {
+					...constants.cssStyles.tableRow
+				},
+			}
+		];
+		if (this._settings.editable) {
+			columns.push(
+				{ // Action
+					displayName: '',
+					valueType: azdata.DeclarativeDataType.component,
+					isReadOnly: true,
+					width: 50,
+					headerCssStyles: {
+						...constants.cssStyles.tableHeader
+					},
+					rowCssStyles: {
+						...constants.cssStyles.tableRow
+					},
+				}
+			);
+		}
+		this._table = modelBuilder.declarativeTable()
+			.withProperties<azdata.DeclarativeTableProperties>(
+				{
+					columns: columns,
+					data: [],
+					ariaLabel: constants.mlsConfigTitle
+				})
+			.component();
+		this._loader = modelBuilder.loadingComponent()
+			.withItem(this._table)
+			.withProperties({
+				loading: true
+			}).component();
+		return this._loader;
+	}
+
+	public addComponents(formBuilder: azdata.FormBuilder) {
+		if (this.component) {
+			formBuilder.addFormItem({ title: constants.modelSourcesTitle, component: this.component });
+		}
+	}
+
+	public removeComponents(formBuilder: azdata.FormBuilder) {
+		if (this.component) {
+			formBuilder.removeFormItem({ title: constants.modelSourcesTitle, component: this.component });
+		}
+	}
+
+
+	/**
+	 * Returns the component
+	 */
+	public get component(): azdata.Component | undefined {
+		return this._loader;
+	}
+
+	/**
+	 * Loads the data in the component
+	 */
+	public async loadData(): Promise<void> {
+		await this.onLoading();
+		if (this._table) {
+			let models: ImportedModel[] | undefined;
+
+			if (this.importTable) {
+				models = await this.listModels(this.importTable);
+			} else {
+				this.showErrorMessage('No import table');
+			}
+			let tableData: any[][] = [];
+
+			if (models) {
+				tableData = tableData.concat(models.map(model => this.createTableRow(model)));
+			}
+
+			this._table.data = tableData;
+		}
+		this.onModelSelected();
+		await this.onLoaded();
+	}
+
+	public async onLoading(): Promise<void> {
+		if (this._loader) {
+			await this._loader.updateProperties({ loading: true });
+		}
+	}
+
+	public async onLoaded(): Promise<void> {
+		if (this._loader) {
+			await this._loader.updateProperties({ loading: false });
+		}
+	}
+
+	private createTableRow(model: ImportedModel): any[] {
+		let row: any[] = [model.modelName, model.created];
+		if (this._modelBuilder) {
+			const selectButton = this.createSelectButton(model);
+			if (selectButton) {
+				row.push(selectButton);
+			}
+			const editButtons = this.createEditButtons(model);
+			if (editButtons && editButtons.length > 0) {
+				row = row.concat(editButtons);
+			}
+		}
+
+		return row;
+	}
+
+	private createSelectButton(model: ImportedModel): azdata.Component | undefined {
+		let selectModelButton: azdata.Component | undefined = undefined;
+		if (this._modelBuilder && this._settings.selectable) {
+
+			let onSelectItem = (checked: boolean) => {
+				if (!this._settings.multiSelect) {
+					this._selectedModel = [];
+				}
+				const foundItem = this._selectedModel.find(x => x === model);
+				if (checked && !foundItem) {
+					this._selectedModel.push(model);
+				} else if (foundItem) {
+					this._selectedModel = this._selectedModel.filter(x => x !== model);
+				}
+				this.onModelSelected();
+			};
+			if (this._settings.multiSelect) {
+				const checkbox = this._modelBuilder.checkBox().withProperties({
+					name: 'amlModel',
+					value: model.id,
+					width: 15,
+					height: 15,
+					checked: false
+				}).component();
+				checkbox.onChanged(() => {
+					onSelectItem(checkbox.checked || false);
+				});
+				selectModelButton = checkbox;
+			} else {
+				const radioButton = this._modelBuilder.radioButton().withProperties({
+					name: 'amlModel',
+					value: model.id,
+					width: 15,
+					height: 15,
+					checked: false
+				}).component();
+				radioButton.onDidClick(() => {
+					onSelectItem(radioButton.checked || false);
+				});
+				selectModelButton = radioButton;
+			}
+		}
+		return selectModelButton;
+	}
+
+	private createEditButtons(model: ImportedModel): azdata.Component[] | undefined {
+		let dropButton: azdata.ButtonComponent | undefined = undefined;
+		let editButton: azdata.ButtonComponent | undefined = undefined;
+		if (this._modelBuilder && this._settings.editable) {
+			dropButton = this._modelBuilder.button().withProperties({
+				label: '',
+				title: constants.deleteTitle,
+				iconPath: {
+					dark: this.asAbsolutePath('images/dark/delete_inverse.svg'),
+					light: this.asAbsolutePath('images/light/delete.svg')
+				},
+				width: 15,
+				height: 15
+			}).component();
+			dropButton.onDidClick(async () => {
+				try {
+					const confirm = await utils.promptConfirm(constants.confirmDeleteModel(model.modelName), this._apiWrapper);
+					if (confirm) {
+						await this.sendDataRequest(DeleteModelEventName, model);
+						if (this.parent) {
+							await this.parent?.refresh();
+						}
+					}
+				} catch (error) {
+					this.showErrorMessage(`${constants.updateModelFailedError} ${constants.getErrorMessage(error)}`);
+				}
+			});
+
+			editButton = this._modelBuilder.button().withProperties({
+				label: '',
+				title: constants.deleteTitle,
+				iconPath: {
+					dark: this.asAbsolutePath('images/dark/edit_inverse.svg'),
+					light: this.asAbsolutePath('images/light/edit.svg')
+				},
+				width: 15,
+				height: 15
+			}).component();
+			editButton.onDidClick(async () => {
+				await this.sendDataRequest(EditModelEventName, model);
+			});
+		}
+		return editButton && dropButton ? [editButton, dropButton] : undefined;
+	}
+
+	private async onModelSelected(): Promise<void> {
+		this._onModelSelectionChanged.fire();
+		if (this._downloadedFile) {
+			await this._downloadedFile.close();
+		}
+		this._downloadedFile = undefined;
+	}
+
+	/**
+	 * Returns selected data
+	 */
+	public get data(): ImportedModel[] | undefined {
+		return this._selectedModel;
+	}
+
+	public async getDownloadedModel(): Promise<ModelArtifact | undefined> {
+		if (!this._downloadedFile && this.data && this.data.length > 0) {
+			this._downloadedFile = new ModelArtifact(await this.downloadRegisteredModel(this.data[0]));
+		}
+		return this._downloadedFile;
+	}
+
+	/**
+	 * disposes the view
+	 */
+	public async disposeComponent(): Promise<void> {
+		if (this._downloadedFile) {
+			await this._downloadedFile.close();
+		}
+	}
+
+	/**
+	 * Refreshes the view
+	 */
+	public async refresh(): Promise<void> {
+		await this.loadData();
+	}
+}

extensions/machine-learning/src/views/models/manageModels/editModelDialog.ts

@@ -0,0 +1,75 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { ModelViewBase, UpdateModelEventName } from '../modelViewBase';
+import * as constants from '../../../common/constants';
+import { ApiWrapper } from '../../../common/apiWrapper';
+import { DialogView } from '../../dialogView';
+import { ModelDetailsEditPage } from './modelDetailsEditPage';
+import { ImportedModel } from '../../../modelManagement/interfaces';
+
+/**
+ * Dialog to render registered model views
+ */
+export class EditModelDialog extends ModelViewBase {
+
+	constructor(
+		apiWrapper: ApiWrapper,
+		root: string,
+		private _parentView: ModelViewBase | undefined,
+		private _model: ImportedModel) {
+		super(apiWrapper, root);
+		this.dialogView = new DialogView(this._apiWrapper);
+	}
+	public dialogView: DialogView;
+	public editModelPage: ModelDetailsEditPage | undefined;
+
+	/**
+	 * Opens a dialog to edit models.
+	 */
+	public open(): void {
+
+		this.editModelPage = new ModelDetailsEditPage(this._apiWrapper, this, this._model);
+
+		let registerModelButton = this._apiWrapper.createButton(constants.extLangSaveButtonText);
+		registerModelButton.onClick(async () => {
+			if (this.editModelPage) {
+				const valid = await this.editModelPage.validate();
+				if (valid) {
+					try {
+						await this.sendDataRequest(UpdateModelEventName, this.editModelPage?.data);
+						this.showInfoMessage(constants.modelUpdatedSuccessfully);
+						if (this._parentView) {
+							await this._parentView.refresh();
+						}
+					} catch (error) {
+						this.showInfoMessage(`${constants.modelUpdateFailedError} ${constants.getErrorMessage(error)}`);
+					}
+				}
+			}
+		});
+
+		let dialog = this.dialogView.createDialog(constants.editModelTitle, [this.editModelPage]);
+		dialog.customButtons = [registerModelButton];
+		this.mainViewPanel = dialog;
+		dialog.okButton.hidden = true;
+		dialog.cancelButton.label = constants.extLangDoneButtonText;
+
+		dialog.registerCloseValidator(() => {
+			return false; // Blocks Enter key from closing dialog.
+		});
+
+		this._apiWrapper.openDialog(dialog);
+	}
+
+	/**
+	 * Resets the tabs for given provider Id
+	 */
+	public async refresh(): Promise<void> {
+		if (this.dialogView) {
+			this.dialogView.refresh();
+		}
+	}
+}

extensions/machine-learning/src/views/models/manageModels/importModelWizard.ts

@@ -0,0 +1,113 @@
+/*---------------------------------------------------------------------------------------------
+ *  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, ModelSourceType } from '../modelViewBase';
+import { ApiWrapper } from '../../../common/apiWrapper';
+import { ModelSourcesComponent } from '../modelSourcesComponent';
+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';
+import { ModelBrowsePage } from '../modelBrowsePage';
+import { ModelImportLocationPage } from './modelImportLocationPage';
+
+/**
+ * Wizard to register a model
+ */
+export class ImportModelWizard extends ModelViewBase {
+
+	public modelSourcePage: ModelSourcePage | undefined;
+	public modelBrowsePage: ModelBrowsePage | undefined;
+	public modelDetailsPage: ModelDetailsPage | undefined;
+	public modelImportTargetPage: ModelImportLocationPage | undefined;
+	public wizardView: WizardView | undefined;
+	private _parentView: ModelViewBase | undefined;
+
+	constructor(
+		apiWrapper: ApiWrapper,
+		root: string,
+		parent?: ModelViewBase) {
+		super(apiWrapper, root);
+		this._parentView = parent;
+	}
+
+	/**
+	 * Opens a dialog to manage packages used by notebooks.
+	 */
+	public async open(): Promise<void> {
+		this.modelSourcePage = new ModelSourcePage(this._apiWrapper, this);
+		this.modelDetailsPage = new ModelDetailsPage(this._apiWrapper, this);
+		this.modelBrowsePage = new ModelBrowsePage(this._apiWrapper, this);
+		this.modelImportTargetPage = new ModelImportLocationPage(this._apiWrapper, this);
+		this.wizardView = new WizardView(this._apiWrapper);
+
+		let wizard = this.wizardView.createWizard(constants.registerModelTitle, [this.modelImportTargetPage, this.modelSourcePage, this.modelBrowsePage, this.modelDetailsPage]);
+
+		this.mainViewPanel = wizard;
+		wizard.doneButton.label = constants.azureRegisterModel;
+		wizard.generateScriptButton.hidden = true;
+		wizard.displayPageTitles = true;
+		wizard.registerNavigationValidator(async (pageInfo: azdata.window.WizardPageChangeInfo) => {
+			let validated: boolean = true;
+			if (pageInfo.newPage > pageInfo.lastPage) {
+				validated = this.wizardView ? await this.wizardView.validate(pageInfo) : false;
+			}
+			if (validated && pageInfo.newPage === undefined) {
+				wizard.cancelButton.enabled = false;
+				wizard.backButton.enabled = false;
+				let result = await this.registerModel();
+				wizard.cancelButton.enabled = true;
+				wizard.backButton.enabled = true;
+				if (this._parentView) {
+					this._parentView.importTable = this.importTable;
+					await this._parentView.refresh();
+				}
+				return result;
+
+			}
+			return validated;
+		});
+
+		await wizard.open();
+	}
+
+	public get modelResources(): ModelSourcesComponent | undefined {
+		return this.modelSourcePage?.modelResources;
+	}
+
+	public get localModelsComponent(): LocalModelsComponent | undefined {
+		return this.modelBrowsePage?.localModelsComponent;
+	}
+
+	public get azureModelsComponent(): AzureModelsComponent | undefined {
+		return this.modelBrowsePage?.azureModelsComponent;
+	}
+
+	private async registerModel(): Promise<boolean> {
+		try {
+			if (this.modelResources && this.localModelsComponent && this.modelResources.data === ModelSourceType.Local) {
+				await this.importLocalModel(this.modelsViewData);
+			} else {
+				await this.importAzureModel(this.modelsViewData);
+			}
+			await this.storeImportConfigTable();
+			this.showInfoMessage(constants.modelRegisteredSuccessfully);
+			return true;
+		} catch (error) {
+			this.showErrorMessage(`${constants.modelFailedToRegister} ${constants.getErrorMessage(error)}`);
+			return false;
+		}
+	}
+
+	/**
+	 * Refresh the pages
+	 */
+	public async refresh(): Promise<void> {
+		await this.wizardView?.refresh();
+	}
+}

extensions/machine-learning/src/views/models/manageModels/manageModelsDialog.ts

@@ -0,0 +1,63 @@
+/*---------------------------------------------------------------------------------------------
+ *  Copyright (c) Microsoft Corporation. All rights reserved.
+ *  Licensed under the Source EULA. See License.txt in the project root for license information.
+ *--------------------------------------------------------------------------------------------*/
+
+import { CurrentModelsComponent } from './currentModelsComponent';
+
+import { ModelViewBase, RegisterModelEventName } from '../modelViewBase';
+import * as constants from '../../../common/constants';
+import { ApiWrapper } from '../../../common/apiWrapper';
+import { DialogView } from '../../dialogView';
+
+/**
+ * Dialog to render registered model views
+ */
+export class ManageModelsDialog extends ModelViewBase {
+
+	constructor(
+		apiWrapper: ApiWrapper,
+		root: string) {
+		super(apiWrapper, root);
+		this.dialogView = new DialogView(this._apiWrapper);
+	}
+	public dialogView: DialogView;
+	public currentLanguagesTab: CurrentModelsComponent | undefined;
+
+	/**
+	 * Opens a dialog to manage packages used by notebooks.
+	 */
+	public open(): void {
+
+		this.currentLanguagesTab = new CurrentModelsComponent(this._apiWrapper, this, {
+			editable: true,
+			selectable: false
+		});
+
+		let registerModelButton = this._apiWrapper.createButton(constants.importModelTitle);
+		registerModelButton.onClick(async () => {
+			await this.sendDataRequest(RegisterModelEventName, this.currentLanguagesTab?.modelTable?.importTable);
+		});
+
+		let dialog = this.dialogView.createDialog(constants.registerModelTitle, [this.currentLanguagesTab]);
+		dialog.customButtons = [registerModelButton];
+		this.mainViewPanel = dialog;
+		dialog.okButton.hidden = true;
+		dialog.cancelButton.label = constants.extLangDoneButtonText;
+
+		dialog.registerCloseValidator(() => {
+			return false; // Blocks Enter key from closing dialog.
+		});
+
+		this._apiWrapper.openDialog(dialog);
+	}
+
+	/**
+	 * Resets the tabs for given provider Id
+	 */
+	public async refresh(): Promise<void> {
+		if (this.dialogView) {
+			this.dialogView.refresh();
+		}
+	}
+}

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

@@ -0,0 +1,154 @@
+/*---------------------------------------------------------------------------------------------
+ *  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 { ImportedModel } from '../../../modelManagement/interfaces';
+
+/**
+ * View to render filters to pick an azure resource
+ */
+export class ModelDetailsComponent extends ModelViewBase implements IDataComponent<ImportedModel> {
+
+	private _form: azdata.FormContainer | undefined;
+	private _nameComponent: azdata.InputBoxComponent | undefined;
+	private _descriptionComponent: azdata.InputBoxComponent | undefined;
+	private _createdComponent: azdata.Component | undefined;
+	private _deployedComponent: azdata.Component | undefined;
+	private _frameworkComponent: azdata.Component | undefined;
+	private _frameworkVersionComponent: azdata.Component | undefined;
+	/**
+	 * Creates a new view
+	 */
+	constructor(apiWrapper: ApiWrapper, parent: ModelViewBase, private _model: ImportedModel) {
+		super(apiWrapper, parent.root, parent);
+	}
+
+	/**
+	 * Register components
+	 * @param modelBuilder model builder
+	 */
+	public registerComponent(modelBuilder: azdata.ModelBuilder): azdata.Component {
+		this._createdComponent = modelBuilder.text().withProperties({
+			value: this._model.created
+		}).component();
+		this._deployedComponent = modelBuilder.text().withProperties({
+			value: this._model.deploymentTime
+		}).component();
+		this._frameworkComponent = modelBuilder.text().withProperties({
+			value: this._model.framework
+		}).component();
+		this._frameworkVersionComponent = modelBuilder.text().withProperties({
+			value: this._model.frameworkVersion
+		}).component();
+		this._nameComponent = modelBuilder.inputBox().withProperties({
+			width: this.componentMaxLength,
+			value: this._model.modelName
+		}).component();
+		this._descriptionComponent = modelBuilder.inputBox().withProperties({
+			width: this.componentMaxLength,
+			value: this._model.description,
+			multiline: true,
+			height: 50
+		}).component();
+
+		this._form = modelBuilder.formContainer().withFormItems([{
+			title: '',
+			component: this._nameComponent
+		},
+		{
+			title: '',
+			component: this._descriptionComponent
+		}]).component();
+		return this._form;
+	}
+
+	public addComponents(formBuilder: azdata.FormBuilder) {
+		if (this._nameComponent && this._descriptionComponent && this._createdComponent && this._deployedComponent && this._frameworkComponent && this._frameworkVersionComponent) {
+			formBuilder.addFormItems([{
+				title: constants.modelName,
+				component: this._nameComponent
+			}, {
+				title: constants.modelCreated,
+				component: this._createdComponent
+			},
+			{
+				title: constants.modelDeployed,
+				component: this._deployedComponent
+			}, {
+				title: constants.modelFramework,
+				component: this._frameworkComponent
+			}, {
+				title: constants.modelFrameworkVersion,
+				component: this._frameworkVersionComponent
+			}, {
+				title: constants.modelDescription,
+				component: this._descriptionComponent
+			}]);
+		}
+	}
+
+	public removeComponents(formBuilder: azdata.FormBuilder) {
+		if (this._nameComponent && this._descriptionComponent && this._createdComponent && this._deployedComponent && this._frameworkComponent && this._frameworkVersionComponent) {
+			formBuilder.removeFormItem({
+				title: constants.modelCreated,
+				component: this._createdComponent
+			});
+			formBuilder.removeFormItem({
+				title: constants.modelCreated,
+				component: this._frameworkComponent
+			});
+			formBuilder.removeFormItem({
+				title: constants.modelCreated,
+				component: this._frameworkVersionComponent
+			});
+			formBuilder.removeFormItem({
+				title: constants.modelCreated,
+				component: this._deployedComponent
+			});
+			formBuilder.removeFormItem({
+				title: constants.modelName,
+				component: this._nameComponent
+			});
+			formBuilder.removeFormItem({
+				title: constants.modelDescription,
+				component: this._descriptionComponent
+			});
+		}
+	}
+
+	/**
+	 * Returns the created component
+	 */
+	public get component(): azdata.Component | undefined {
+		return this._form;
+	}
+
+	/**
+	 * Returns selected data
+	 */
+	public get data(): ImportedModel | undefined {
+		let model = Object.assign({}, this._model);
+		model.modelName = this._nameComponent?.value || '';
+		model.description = this._descriptionComponent?.value || '';
+		return model;
+	}
+
+	/**
+	 * loads data in the components
+	 */
+	public async loadData(): Promise<void> {
+	}
+
+	/**
+	 * refreshes the view
+	 */
+	public async refresh(): Promise<void> {
+		await this.loadData();
+	}
+}

extensions/machine-learning/src/views/models/manageModels/modelDetailsEditPage.ts

@@ -0,0 +1,85 @@
+/*---------------------------------------------------------------------------------------------
+ *  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 { ImportedModel } from '../../../modelManagement/interfaces';
+import { ModelDetailsComponent } from './modelDetailsComponent';
+
+/**
+ * View to pick model source
+ */
+export class ModelDetailsEditPage extends ModelViewBase implements IPageView, IDataComponent<ImportedModel> {
+
+	private _form: azdata.FormContainer | undefined;
+	private _formBuilder: azdata.FormBuilder | undefined;
+	public modelDetailsComponent: ModelDetailsComponent | undefined;
+
+	constructor(apiWrapper: ApiWrapper, parent: ModelViewBase, private _model: ImportedModel) {
+		super(apiWrapper, parent.root, parent);
+	}
+
+	/**
+	 *
+	 * @param modelBuilder Register components
+	 */
+	public registerComponent(modelBuilder: azdata.ModelBuilder): azdata.Component {
+
+		this._formBuilder = modelBuilder.formContainer();
+		this.modelDetailsComponent = new ModelDetailsComponent(this._apiWrapper, this, this._model);
+
+		this.modelDetailsComponent.registerComponent(modelBuilder);
+		this.modelDetailsComponent.addComponents(this._formBuilder);
+		this._form = this._formBuilder.component();
+		return this._form;
+	}
+
+	/**
+	 * Returns selected data
+	 */
+	public get data(): ImportedModel | undefined {
+		return this.modelDetailsComponent?.data;
+	}
+
+	/**
+	 * Returns the component
+	 */
+	public get component(): azdata.Component | undefined {
+		return this._form;
+	}
+
+	/**
+	 * Refreshes the view
+	 */
+	public async refresh(): Promise<void> {
+		if (this.modelDetailsComponent) {
+			await this.modelDetailsComponent.refresh();
+		}
+	}
+
+	/**
+	 * Returns page title
+	 */
+	public get title(): string {
+		return constants.modelImportTargetPageTitle;
+	}
+
+	public async disposePage(): Promise<void> {
+	}
+
+	public async validate(): Promise<boolean> {
+		let validated = false;
+
+		if (this.data?.modelName) {
+			validated = true;
+		} else {
+			this.showErrorMessage(constants.modelNameRequiredError);
+		}
+		return validated;
+	}
+}

extensions/machine-learning/src/views/models/manageModels/modelImportLocationPage.ts

@@ -0,0 +1,97 @@
+/*---------------------------------------------------------------------------------------------
+ *  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 { TableSelectionComponent } from '../tableSelectionComponent';
+import { DatabaseTable } from '../../../prediction/interfaces';
+
+/**
+ * View to pick model source
+ */
+export class ModelImportLocationPage extends ModelViewBase implements IPageView, IDataComponent<DatabaseTable> {
+
+	private _form: azdata.FormContainer | undefined;
+	private _formBuilder: azdata.FormBuilder | undefined;
+	public tableSelectionComponent: TableSelectionComponent | 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.tableSelectionComponent = new TableSelectionComponent(this._apiWrapper, this, true);
+		this.tableSelectionComponent.onSelectedChanged(async () => {
+			await this.onTableSelected();
+		});
+		this.tableSelectionComponent.registerComponent(modelBuilder);
+		this.tableSelectionComponent.addComponents(this._formBuilder);
+		this._form = this._formBuilder.component();
+		return this._form;
+	}
+
+	private async onTableSelected(): Promise<void> {
+		if (this.tableSelectionComponent?.data) {
+			this.importTable = this.tableSelectionComponent?.data;
+		}
+	}
+
+	/**
+	 * Returns selected data
+	 */
+	public get data(): DatabaseTable | undefined {
+		return this.tableSelectionComponent?.data;
+	}
+
+	/**
+	 * Returns the component
+	 */
+	public get component(): azdata.Component | undefined {
+		return this._form;
+	}
+
+	/**
+	 * Refreshes the view
+	 */
+	public async refresh(): Promise<void> {
+		if (this.tableSelectionComponent) {
+			await this.tableSelectionComponent.refresh();
+		}
+	}
+
+	/**
+	 * Returns page title
+	 */
+	public get title(): string {
+		return constants.modelImportTargetPageTitle;
+	}
+
+	public async disposePage(): Promise<void> {
+	}
+
+	public async validate(): Promise<boolean> {
+		let validated = false;
+
+		if (this.data?.databaseName && this.data?.tableName) {
+			validated = true;
+			validated = await this.verifyImportConfigTable(this.data);
+			if (!validated) {
+				this.showErrorMessage(constants.invalidImportTableSchemaError(this.data?.databaseName, this.data?.tableName));
+			}
+		} else {
+			this.showErrorMessage(constants.invalidImportTableError(this.data?.databaseName, this.data?.tableName));
+		}
+		return validated;
+	}
+}