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
  }