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

[ShradhaGupta31]

• 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

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.

[madhavilosetty-intel]

It is is still referenced by device-toolbar.component.html page. Is it accidental?

[madhavilosetty-intel]

All count is coming from the server, while Activated and Discovered are calculated only from the current page at the client. Can we make this consistent and move the rest to the server as well?

This would also be useful for headless/API consumers, instead of keeping this logic only in the UI.