ML - dashboard icons and links (#10153)

* ML - dashboard icons and links
2026-02-02 01:25:39 -05:00 · 2020-04-28 21:21:30 -07:00
parent 046995f2a5
commit 04af41c424
145 changed files with 387 additions and 134 deletions
--- a/extensions/machine-learning/src/views/models/azureModelsTable.ts
+++ b/extensions/machine-learning/src/views/models/azureModelsTable.ts
@@ -0,0 +1,184 @@
+/*---------------------------------------------------------------------------------------------
+ *  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 } from './modelViewBase';
+import { ApiWrapper } from '../../common/apiWrapper';
+import { WorkspaceModel } from '../../modelManagement/interfaces';
+import { IDataComponent, AzureWorkspaceResource } from '../interfaces';
+
+/**
+ * View to render azure models in a table
+ */
+export class AzureModelsTable extends ModelViewBase implements IDataComponent<WorkspaceModel[]> {
+
+	private _table: azdata.DeclarativeTableComponent;
+	private _selectedModel: WorkspaceModel[] = [];
+	private _models: WorkspaceModel[] | undefined;
+	private _onModelSelectionChanged: vscode.EventEmitter<void> = new vscode.EventEmitter<void>();
+	public readonly onModelSelectionChanged: vscode.Event<void> = this._onModelSelectionChanged.event;
+
+	/**
+	 * Creates a view to render azure models in a table
+	 */
+	constructor(apiWrapper: ApiWrapper, private _modelBuilder: azdata.ModelBuilder, parent: ModelViewBase, private _multiSelect: boolean = true) {
+		super(apiWrapper, parent.root, parent);
+		this._table = this.registerComponent(this._modelBuilder);
+	}
+
+	/**
+	 * Register components
+	 * @param modelBuilder model builder
+	 */
+	public registerComponent(modelBuilder: azdata.ModelBuilder): azdata.DeclarativeTableComponent {
+		this._table = modelBuilder.declarativeTable()
+			.withProperties<azdata.DeclarativeTableProperties>(
+				{
+					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: 100,
+							headerCssStyles: {
+								...constants.cssStyles.tableHeader
+							},
+							rowCssStyles: {
+								...constants.cssStyles.tableRow
+							},
+						},
+						{ // Version
+							displayName: constants.modelVersion,
+							ariaLabel: constants.modelVersion,
+							valueType: azdata.DeclarativeDataType.string,
+							isReadOnly: true,
+							width: 100,
+							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
+							},
+						}
+					],
+					data: [],
+					ariaLabel: constants.mlsConfigTitle
+				})
+			.component();
+		return this._table;
+	}
+
+	public get component(): azdata.DeclarativeTableComponent {
+		return this._table;
+	}
+
+	/**
+	 * Load data in the component
+	 * @param workspaceResource Azure workspace
+	 */
+	public async loadData(workspaceResource?: AzureWorkspaceResource | undefined): Promise<void> {
+
+		if (this._table && workspaceResource) {
+			this._models = await this.listAzureModels(workspaceResource);
+			let tableData: any[][] = [];
+
+			if (this._models) {
+				tableData = tableData.concat(this._models.map(model => this.createTableRow(model)));
+			}
+
+			this._table.data = tableData;
+		}
+		this._onModelSelectionChanged.fire();
+	}
+
+	private createTableRow(model: WorkspaceModel): any[] {
+		if (this._modelBuilder) {
+			let selectModelButton: azdata.Component;
+			let onSelectItem = (checked: boolean) => {
+				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._onModelSelectionChanged.fire();
+			};
+			if (this._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 [model.name, model.createdTime, model.frameworkVersion, selectModelButton];
+		}
+
+		return [];
+	}
+
+	/**
+	 * Returns selected data
+	 */
+	public get data(): WorkspaceModel[] | undefined {
+		if (this._models && this._selectedModel) {
+			return this._selectedModel;
+		}
+		return undefined;
+	}
+
+	/**
+	 * Refreshes the view
+	 */
+	public async refresh(): Promise<void> {
+		await this.loadData();
+	}
+}