feat: add tabs, product type column, and discovered field

[ShradhaGupta31]

• Add two tabs to the devices page: Discovered & Managed with live counts in each tab label
• Add 'Product Type' column (ISM / vPro) derived from fwSku bitmask

Addresses: #3432

UI after this change:

[Copilot]

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?: boolean to DeviceInfo.
• Introduces a mat-tab-group with 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'
      ]
    }
  }

[Copilot]

Pull request overview

Copilot reviewed 16 out of 17 changed files in this pull request and generated 1 comment.

Comments suppressed due to low confidence (1)

src/app/devices/devices.component.ts:168

• applyTabFilter() currently sets totalCount to the locally filtered page size for tabs 1/2, while the data itself is still coming from a server-paginated request ($top/$skip). This makes the paginator length inconsistent and (combined with the template gating) prevents users from navigating to other pages while on Activated/Discovered tabs. Also, the new Product Type column is marked sortable in the template, but MatTableDataSource sorting will not work for a computed value unless a sortingDataAccessor is provided.

  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
  }

[sudhir-intc]

@ShradhaGupta31 : Tried out this PR, the UI seems to be working fine as expected. How about the following column where Type shows - Activated/Discovered and Tags - showcase CCM/ACM

Here's what I see with your PR:

[ShradhaGupta31]

@ShradhaGupta31 : Tried out this PR, the UI seems to be working fine as expected. How about the following column where Type shows - Activated/Discovered and Tags - showcase CCM/ACM

Here's what I see with your PR:

@sudhir-intc - This PR covers the Product Type and Tabs-related changes only. Since the associated keywords were still under discussion at the time, this PR was limited to the Tabs and Product Type updates only. Now that the keyword changes are finalized, I will raise a separate PR for the Type-related updates.

For Tags, the appropriate tag needs to be populated through the API. Once the API provides values such as CCM or ACM as input, the corresponding tag will be displayed accordingly.

[sudhir-intc]

Have not done a code review but tried the functionality with the PR's and they work as expected. Tried with a non-vpro device, vpro device and ism device

[Copilot]

Copilot review overview

🟡 Changes recommended

Unresolved UI, pagination, request-ordering, statistics, and Cypress coverage issues block approval.

Get a fresh assessment by requesting another Copilot review.

Review effort: Lite
Findings: 3 · 1

Open (4)

• Prevent stale tab responses from overwriting device data · New
• The paginator length is now bound to currentTabCount (global stats). When a tag filter is…
• loadStats() overwrites totalCount from the stats response. Since the /devices/stats call is…
• Align tab implementation with PR description · New

Resolved since last review (2)

• The Product Type column is rendered via getProductType(element), but the header includes…
• The tab UI is only rendered in the @else branch. When the current tab/filter yields zero rows,…

[sudhir-intc]

Have not done a code review but tried the functionality with the PR's and they work as expected. Tried with a non-vpro device, vpro device and ism device

[sinchubhat]

LGTM functionality wise

[RosieAMT]

🎉 This PR is included in version 3.68.0 🎉

The release is available on:

• GitHub release
• v3.68.0

Your semantic-release bot 📦🚀