lundi 28 octobre 2019

Design for Angular application

first post here so be nice! I will try to be the most precise and concise possible.

I'm currently developing a GUI in Angular/Typescript which displays the devices and network traffic of the LAN and nearby. I'm having a bit of trouble with the design of my application so far.

I have several device classes:

Device

export class Device {
  _id: string
  _mac: string
  ...
}

LANDevice

export class LANDevice extends Device {
  _firstSeen: Date
  _status: 'reachable' | 'unreachable'
  _services: Service[]
  ...
}

I have other classes to describe other type of devices like Bluetooth, BLE devices etc. I would like to have several components (Summary, Services & vulnerabilities and Activity) that displays some information about those devices.

The problem I'm facing is that, depending on the device type, the information to display will be very different.

How do I design my components and classes to handle this use case ? Should I have a functon in each device class to expose the 'right' model to the concerned component (but I would need to write a function for each component so not a good idea I believe)

Device

export class Device {
  ...
  public toSummary(): SummaryModel {
    icon: this._svgIcon(),
    name: this._hostname,
    content: [
      firstSeen: this._firstSeen,
      network: [ ... ]
    ] 
  }

}

BluetoothDevice

export class Device {
  ...
  public toSummary(): SummaryModel {
    icon: this._svgIcon(),
    name: this._hostname,
    content: [
      lastSeen: this._lastSeen,
      macVendor: this._macVendor
    ] 

  }

}

And in my Summary component have:

SummaryComponent

export interface SummaryModel {
  icon: <Base64>,
  name: string,
  content: []
}


export class SummaryComponent {
  ...

  **Parsing of device.toSummary() function with keys/values with table-like display**
  **Key1: Value1
  **Key2: Value2
  **...

}

Does anyone have better ideas ? The main problem here is that, depending on the device type, I don't want to display the same things. I could chech the device type and handle this in the component or HTML but I believe that a Component in Angular should have a single interface/data model and handle only this.

Thanks for your time :)

Aucun commentaire:

Enregistrer un commentaire