feat: added the host detail view

[rahulkeswani101]

Summary

• Added the Host Detailed view which will open on click of the host list records.
• Added tabs and initial details for hosts detailed view.

Related Issues / PR's

https://github.com/SigNoz/engineering-pod/issues/1878

Screenshots

Affected Areas and Manually Tested Areas

• Tested the initial flow and on click of record the proper details are populated.
• Data is consistent on the drawer and closing the drawer is functioning as expected.
• Host name can be empty so, I need to handle this scenario while filtering the data. I will handle this in a separate PR.

---

Important

Add HostMetricDetail component for detailed host metrics view with integrated styles and functionality in the host list.

• New Feature:
  • Added HostMetricDetail component in index.tsx for detailed host metrics view.
  • Introduced HostDetailProps type in HostMetricDetail.interfaces.ts for component props.
  • Added VIEWS enum and VIEW_TYPES constant in constants.ts for view management.
• Styles:
  • Created HostMetricsDetail.styles.scss for styling the host detail drawer and its elements.
  • Updated InfraMonitoring.styles.scss to include styles for clickable rows.
• Integration:
  • Integrated HostMetricDetail in HostsList.tsx to open on row click and close on drawer close.
  • Modified utils.tsx to rename ioWait to wait in HostRowData and update related logic.

^{This description was created by for e2db119. It will automatically update as commits are pushed.}

[github-actions]

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

[github-actions]

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

[ellipsis-dev]

❌ Changes requested. Reviewed everything up to e3fdf42 in 40 seconds

More details

• Looked at 492 lines of code in 7 files
• Skipped 0 files when reviewing.
• Skipped posting 2 drafted comments based on config settings.

1. frontend/src/pages/InfraMonitoringHosts/utils.tsx:16

• Draft comment:
  The 'wait' field in the HostRowData interface was previously named 'ioWait'. Ensure that all references to 'ioWait' are updated to 'wait' to maintain consistency.
• Reason this comment was not posted:
  Comment did not seem useful.

2. frontend/src/pages/InfraMonitoringHosts/utils.tsx:119

• Draft comment:
  The 'dataIndex' for the 'IOWait' column should be updated to 'wait' to match the updated field name in the HostRowData interface.
• Reason this comment was not posted:
  Marked as duplicate.

Workflow ID: wflow_3LYWU6Nf73p0Wik5

---

Want Ellipsis to fix these issues? Tag @ellipsis-dev in a comment. You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[github-actions]

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>

[ahmadshaheer]

A few observations, @rahulkeswani101

1. the status is not visible

2. can we change the UI of status and operating system to badge?
   

3. the CPU and Memory usage progress bars are not reflecting the percentage

4. Can we only show the tabs that have data? / alternatively, can we show empty state?

[ahmadshaheer]

A few observations, @rahulkeswani101

1. the status is not visible
2. can we change the UI of status and operating system to badge?
   
3. the CPU and Memory usage progress bars are not reflecting the percentage
4. Can we only show the tabs that have data? / alternatively, can we show empty state?

@rahulkeswani101

Please ignore the 1, 2, and 3 points. I just noticed that they are fixed in #6297

[github-actions]

Build Error! No Linked Issue found. Please link an issue or mention it in the body using #<issue_id>