feat(xo-lite): add host network tab and pif table / status component …

[J0ris-K]

Description

add host network tab and pif table / status component and pif store

Screenshot

Checklist

• Commit
  • Title follows commit conventions
  • Reference the relevant issue (Fixes #007, See xoa-support#42, See https://...)
  • If bug fix, add Introduced by
• Changelog
  • If visible by XOA users, add changelog entry
  • Update "Packages to release" in CHANGELOG.unreleased.md
• PR
  • If UI changes, add screenshots
  • If not finished or not tested, open as Draft

Review process

This 2-passes review process aims to:

• develop skills of junior reviewers
• limit the workload for senior reviewers
• limit the number of unnecessary changes by the author

1. The author creates a PR.
2. Review process:
   1. The author assigns the junior reviewer.
   2. The junior reviewer conducts their review:
      • Resolves their comments if they are addressed.
      • Adds comments if necessary or approves the PR.
   3. The junior reviewer assigns the senior reviewer.
   4. The senior reviewer conducts their review:
      • If there are no unresolved comments on the PR → merge.
      • Otherwise, we continue with 3.
3. The author responds to comments and/or makes corrections, and we go back to 2.

Notes:

1. The author can request a review at any time, even if the PR is still a Draft.
2. In theory, there should not be more than one reviewer at a time.
3. The author should not make any changes:
   • When a reviewer is assigned.
   • Between the junior and senior reviews.

[ByScripts]

Suggested change

	const status = computed(() => {
	if (pifStatus) {
	return 'connected'
	}
	return 'disconnected'
	})
	const status = computed(() => (pifStatus ? 'connected' : 'disconnected'))

[ByScripts]

Avoid using any

[ByScripts]

I don't understand this function.

Looking at the template, we can see it only receives the status computed property, so it could be a computed property itself:

Suggested change

	const getStatusProps = (status: Status) => states.value[status]
	const statusProps = computed(() => states.value[status.value])

However, the status computed property only returns either 'connected' or 'disconnected', while the states object contains three properties: 'connected', 'disconnected', and 'partial'.

This means the 'partial' property appears to never be used.

Furthermore, we can see that the status computed property is only used within the statusProps computed property. This creates redundancy, suggesting that all this logic could likely be simplified by combining it into a single computed property.

[J0ris-K]

Yes, sure