feat: add hostname and os type quick filter to hosts list

[amlannandy]

Summary

• Added hostname and os type quick filters to hosts list.
• Moved hosts list table and its logic to a separate component file.

Related Issues / PR's

Fixes #6888

Screenshots

Affected Areas and Manually Tested Areas

Infra Monitoring Hosts section

---

Important

Add hostname and OS type quick filters to hosts list and refactor table logic into a separate component.

• Features:
  • Add hostname and OS type quick filters to HostsList.
  • Implement HostsQuickFiltersConfig in utils.tsx for filter configuration.
• Refactoring:
  • Move hosts list table logic from HostsList.tsx to new HostsListTable.tsx component.
• UI/UX:
  • Update InfraMonitoring.styles.scss to support new filter UI layout.
  • Add filter visibility toggle in HostsList.tsx.

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

[ellipsis-dev]

👍 Looks good to me! Reviewed everything up to 9afdfc7 in 1 minute and 21 seconds

More details

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

1. frontend/src/container/InfraMonitoringHosts/HostsListTable.tsx:35

• Draft comment:
  The use of useMemo for columns is unnecessary since getHostsListColumns does not depend on any props or state. Consider directly assigning the result of getHostsListColumns to columns.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The use of useMemo for columns in HostsListTable is unnecessary since getHostsListColumns does not depend on any props or state. This can be simplified by directly assigning the result of getHostsListColumns to columns.

2. frontend/src/container/InfraMonitoringHosts/HostsListTable.tsx:54

• Draft comment:
  The handleTableChange function has an unnecessary dependency array for useCallback. Since it doesn't use any props or state from the component, it can be defined without useCallback.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The handleTableChange function in HostsListTable has an unnecessary dependency array for useCallback. Since it doesn't use any props or state from the component, it can be defined without useCallback.

3. frontend/src/container/InfraMonitoringHosts/HostsList.tsx:78

• Draft comment:
  The handleFiltersChange function uses useCallback with a dependency on filters, but it also calls handleChangeQueryData, which is not included in the dependency array. Consider including handleChangeQueryData in the dependency array to avoid potential stale closures.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The handleFiltersChange function in HostsList uses useCallback with a dependency on filters. However, it also calls handleChangeQueryData, which is not included in the dependency array. This could lead to stale closures if handleChangeQueryData changes. It's better to include all used variables and functions in the dependency array.

4. frontend/src/container/InfraMonitoringHosts/utils.tsx:171

• Draft comment:
  The HostsQuickFiltersConfig uses aggregateAttribute: 'system_cpu_load_average_15m' for both filters. Verify if this is intentional, as it might not be appropriate for the 'OS Type' filter.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The HostsQuickFiltersConfig in utils.tsx uses aggregateAttribute: 'system_cpu_load_average_15m' for both filters. This might not be correct for the 'OS Type' filter, as it seems unrelated. Verify if this is intentional or if a different attribute should be used.

5. frontend/src/container/InfraMonitoringHosts/utils.tsx:167

• Draft comment:
  Use design tokens or predefined color constants instead of hardcoding color values for consistency in theming.
• Reason this comment was not posted:
  Marked as duplicate.

6. frontend/src/container/InfraMonitoringHosts/utils.tsx:3

• Draft comment:
  Use design tokens or predefined color constants instead of hardcoding color values for consistency in theming. This applies to the formatDataForTable function as well.
• Reason this comment was not posted:
  Comment was on unchanged code.

7. frontend/src/container/InfraMonitoringHosts/HostsList.tsx:19

• Draft comment:
  Avoid using the component/index.tsx file structure approach, as it makes it difficult to debug and find components using global search tools like VS Code. This applies to HostsListTable and other similar components.
• Reason this comment was not posted:
  Comment was on unchanged code.

Workflow ID: wflow_2lRDExnEyFchaOtR

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[ellipsis-dev]

👍 Looks good to me! Incremental review on 3a8845e in 58 seconds

More details

• Looked at 660 lines of code in 4 files
• Skipped 0 files when reviewing.
• Skipped posting 8 drafted comments based on config settings.

1. frontend/src/container/InfraMonitoringHosts/HostsListTable.tsx:35

• Draft comment:
  The use of useMemo for columns is unnecessary since getHostsListColumns does not depend on any props or state. Consider directly assigning the result of getHostsListColumns to columns.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The use of useMemo for columns in HostsListTable is unnecessary since getHostsListColumns does not depend on any props or state. This can be simplified by directly assigning the result of getHostsListColumns to columns. This applies to other similar cases in the code as well.

2. frontend/src/container/InfraMonitoringHosts/HostsListTable.tsx:37

• Draft comment:
  The useMemo hook for sentAnyHostMetricsData is unnecessary as it is a simple boolean value derived from data. Consider directly assigning the value without useMemo.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The useMemo hook for sentAnyHostMetricsData and isSendingIncorrectK8SAgentMetrics is unnecessary as they are simple boolean values derived from data. This can be simplified by directly assigning the values without useMemo. This applies to other similar cases in the code as well.

3. frontend/src/container/InfraMonitoringHosts/HostsListTable.tsx:42

• Draft comment:
  The useMemo hook for isSendingIncorrectK8SAgentMetrics is unnecessary as it is a simple boolean value derived from data. Consider directly assigning the value without useMemo.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The useMemo hook for isSendingIncorrectK8SAgentMetrics is unnecessary as it is a simple boolean value derived from data. This can be simplified by directly assigning the value without useMemo. This applies to other similar cases in the code as well.

4. frontend/src/container/InfraMonitoringHosts/HostsListTable.tsx:47

• Draft comment:
  The useMemo hook for formattedHostMetricsData is unnecessary as it is a simple transformation of hostMetricsData. Consider directly assigning the transformed data without useMemo.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The useMemo hook for formattedHostMetricsData is unnecessary as it is a simple transformation of hostMetricsData. This can be simplified by directly assigning the transformed data without useMemo. This applies to other similar cases in the code as well.

5. frontend/src/container/InfraMonitoringHosts/HostsList.tsx:44

• Draft comment:
  The useMemo hook for baseQuery is unnecessary since getHostListsQuery does not depend on any props or state. Consider directly assigning the result of getHostListsQuery to baseQuery.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The useMemo hook for columns in HostsList is unnecessary since getHostsListColumns does not depend on any props or state. This can be simplified by directly assigning the result of getHostsListColumns to columns. This applies to other similar cases in the code as well.

6. frontend/src/container/InfraMonitoringHosts/HostsList.tsx:66

• Draft comment:
  The useMemo hook for hostMetricsData is unnecessary as it is a simple transformation of data. Consider directly assigning the transformed data without useMemo.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The useMemo hook for hostMetricsData is unnecessary as it is a simple transformation of data. This can be simplified by directly assigning the transformed data without useMemo. This applies to other similar cases in the code as well.

7. frontend/src/container/InfraMonitoringHosts/utils.tsx:3

• Draft comment:
  Use design tokens or predefined color constants instead of hardcoding color values for strokeColor in the Progress component. This is also applicable on line 159.
• Reason this comment was not posted:
  Comment was not on a valid diff hunk.

8. frontend/src/container/InfraMonitoringHosts/HostsListTable.tsx:22

• Draft comment:
  Avoid using the component/index.tsx file structure approach, as it makes it difficult to debug and find components using global search tools like VS Code. This is applicable to the HostsListTable component.
• Reason this comment was not posted:
  Comment looked like it was already resolved.

Workflow ID: wflow_boCOLKPFhumRwGHs

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[ellipsis-dev]

👍 Looks good to me! Incremental review on 3d0b17f in 35 seconds

More details

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

1. frontend/src/container/InfraMonitoringHosts/HostsListTable.tsx:34

• Draft comment:
  The setPageSize prop is not used in the HostsListTable component. Consider removing it from the HostsListTableProps interface and the component's props.
• Reason this comment was not posted:
  Comment looked like it was already resolved.

2. frontend/src/container/InfraMonitoringHosts/utils.tsx:54

• Draft comment:
  The setPageSize prop is not used in the HostsListTable component. Consider removing it from the HostsListTableProps interface and the component's props.
• Reason this comment was not posted:
  Marked as duplicate.

Workflow ID: wflow_XxiLI0jXJVL6MvSg

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[ellipsis-dev]

👍 Looks good to me! Incremental review on b55f543 in 16 seconds

More details

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

1. frontend/src/container/InfraMonitoringHosts/HostsList.tsx:45

• Draft comment:
  The useMemo hook is correctly implemented to memoize the query object. Dependencies are correctly listed.
• Reason this comment was not posted:
  Confidence changes required: 0%
  The useMemo hook on line 45 is correctly implemented to memoize the query object. The dependencies are correctly listed, ensuring the query is recalculated only when necessary.

2. frontend/src/container/InfraMonitoringHosts/HostsList.tsx:42

• Draft comment:
  Avoid using the component/index.tsx file structure approach, as it makes it difficult to debug and find components using global search tools like VS Code. This is also applicable to the import on line 20.
• Reason this comment was not posted:
  Comment was not on a valid diff hunk.

Workflow ID: wflow_Z8hh9pkcgzIZlD9A

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.

[ellipsis-dev]

👍 Looks good to me! Incremental review on db7b544 in 19 seconds

More details

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

1. frontend/src/container/InfraMonitoringHosts/HostsList.tsx:9

• Draft comment:
  Ensure that the import path change for FiltersType and IQuickFiltersConfig to components/QuickFilters/types is consistent across the codebase.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The import path for FiltersType and IQuickFiltersConfig was changed to components/QuickFilters/types. This change should be consistent across the codebase.

2. frontend/src/container/InfraMonitoringHosts/utils.tsx:11

• Draft comment:
  Avoid using inline styles in React components. Consider using external stylesheets, CSS classes, or styled components instead. This is applicable in the formatDataForTable function for the active, cpu, and memory fields.
• Reason this comment was not posted:
  Comment was not on a valid diff hunk.

Workflow ID: wflow_ohYeMh5DPaBtZiCN

---

You can customize Ellipsis with 👍 / 👎 feedback, review rules, user-specific overrides, quiet mode, and more.