feat: add tabs, product type column, and discovered field#3417
Draft
ShradhaGupta31 wants to merge 1 commit into
Draft
feat: add tabs, product type column, and discovered field#3417ShradhaGupta31 wants to merge 1 commit into
ShradhaGupta31 wants to merge 1 commit into
Conversation
ShradhaGupta31
force-pushed
the
device-discovery-UI-changes
branch
6 times, most recently
from
2daa143 to
a98454e
Compare
- Add three tabs to the devices page: All, Activated and Discovered with live counts in each tab label - Add 'Product Type' column (ISM / vPro) derived from fwSku bitmask Signed-off-by: ShradhaGupta31 <shradha.gupta@intel.com>
ShradhaGupta31
force-pushed
the
device-discovery-UI-changes
branch
from
a98454e to
e1fdf15
Compare
There was a problem hiding this comment.
Pull request overview
Adds UI affordances on the Devices page to segment devices by status and expose additional device metadata, extending the device model to support a “discovered” flag and deriving a “Product Type” column from fwSku.
Changes:
- Adds
discovered?: booleantoDeviceInfo. - Introduces a
mat-tab-groupwith All / Activated / Discovered tabs and client-side tab filtering with per-tab counts. - Adds a “Product Type” table column computed from the firmware SKU bitmask.
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 6 comments.
| File | Description |
|---|---|
| src/models/models.ts | Extends DeviceInfo with an optional discovered flag used by the new UI filtering. |
| src/app/devices/devices.component.ts | Adds tab state + filtering, stores server total count, and introduces getProductType() for the new column. |
| src/app/devices/devices.component.html | Adds the tabs UI and renders the new Product Type column in the device table. |
Comments suppressed due to low confidence (1)
src/app/devices/devices.component.ts:193
- The Product Type column is marked sortable (mat-sort-header), but MatTableDataSource will sort by a 'productType' property that doesn't exist on Device. As a result, sorting by this column will not work unless a sortingDataAccessor is provided.
constructor() {
this.selectedDevices = new SelectionModel<Device>(true, [])
this.powerStates = this.devicesService.PowerStates
if (!this.isCloudMode) {
this.displayedColumns = [
'select',
'hostname',
'productType',
'tags',
'actions',
'notification'
]
}
}
Comment on lines
+133
to
+152
| private applyTabFilter(): void { | ||
| let filtered: Device[] | ||
| switch (this.activeTab()) { | ||
| case 1: | ||
| filtered = this.allDevicesData.filter( | ||
| (d) => d.deviceInfo?.currentMode != null && d.deviceInfo.currentMode !== 'not activated' | ||
| ) | ||
| this.totalCount.set(filtered.length) | ||
| break | ||
| case 2: | ||
| filtered = this.allDevicesData.filter((d) => d.deviceInfo?.discovered === true) | ||
| this.totalCount.set(filtered.length) | ||
| break | ||
| default: | ||
| filtered = this.allDevicesData | ||
| this.totalCount.set(this.serverTotalCount) | ||
| break | ||
| } | ||
| this.devices.data = filtered | ||
| } |
Comment on lines
+49
to
+51
| <mat-tab-group (selectedTabChange)="onTabChange($event.index)"> | ||
| <mat-tab [label]="'All (' + allDevicesData.length + ')'"></mat-tab> | ||
| <mat-tab [label]="'Activated (' + activatedCount + ')'"></mat-tab> |
Comment on lines
+49
to
+53
| <mat-tab-group (selectedTabChange)="onTabChange($event.index)"> | ||
| <mat-tab [label]="'All (' + allDevicesData.length + ')'"></mat-tab> | ||
| <mat-tab [label]="'Activated (' + activatedCount + ')'"></mat-tab> | ||
| <mat-tab [label]="'Discovered (' + discoveredCount + ')'"></mat-tab> | ||
| </mat-tab-group> |
Comment on lines
+129
to
+131
| <ng-container matColumnDef="productType"> | ||
| <mat-header-cell *matHeaderCellDef mat-sort-header>Product Type</mat-header-cell> | ||
| <mat-cell *matCellDef="let element" (click)="navigateTo(element.guid)"> |
Comment on lines
+392
to
+400
| getProductType(device: Device): string { | ||
| const skuNum = parseInt(device.deviceInfo?.fwSku ?? '', 10) | ||
| if (isNaN(skuNum)) return '' | ||
| const isISM = (skuNum & 0x10) > 0 | ||
| const isVPro = (skuNum & 0x08) > 0 | ||
| if (isISM) return 'ISM' | ||
| if (isVPro) return 'vPro' | ||
| return '' | ||
| } |
Comment on lines
128
to
136
| <!-- tags Column --> | ||
| <ng-container matColumnDef="productType"> | ||
| <mat-header-cell *matHeaderCellDef mat-sort-header>Product Type</mat-header-cell> | ||
| <mat-cell *matCellDef="let element" (click)="navigateTo(element.guid)"> | ||
| {{ getProductType(element) }} | ||
| </mat-cell> | ||
| </ng-container> | ||
| <!-- tags Column --> | ||
| <ng-container matColumnDef="tags"> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
PR Checklist
What are you changing?
Anything the reviewer should know when reviewing this PR?
If the there are associated PRs in other repositories, please link them here (i.e. device-management-toolkit/repo#365 )