feat: added the host list view and filters (#6210)

[YounixM]

• feat: added the host list view and filters

• feat: removed group by filter and added autocomplete for where clause

• feat: updated the table view and added the pagination

• feat: pass updated filters to api to get filtered data in the list

• feat: added global time range and order by for cpu,memory,iowait,load

• feat: added order by and color codes for cpu and memory usage progress bar

• refactor: removed inline styles

• Host lists improvement (Host lists improvement #6366)

• style: added new style changes for date time selection in host lists view

• style: added padding to date time selector

• style: removed unnecessary styles for host tabs

• style: removed unused css

• feat: added the host detail view (feat: added the host detail view #6267)

• Host containers (Host containers #6297)

• feat: added the host detail view

• feat: completed containers and processes details view

• Show host metrics panels in metrics tab. (Show host metrics panels in metrics tab. #6306)

• feat: added the host detail view

• feat: completed containers and processes details view

• feat: added host metrics panels in metrics tabs

• refactor: removed inline styles from host containers and processes tabs

• style: added top and bottom margin to containers and processes tab

• Metrics time selection (Metrics time selection #6360)

• feat: added the host detail view

• feat: completed containers and processes details view

• feat: added host metrics panels in metrics tabs

• refactor: removed inline styles from host containers and processes tabs

• feat: added logs and traces tab in host metrics detail view

• chore: removed console statements

• feat: added DateTimeSelection component in metrics tab

• style: added top and bottom margin to containers and processes tab

• style: removed inline styles

• feat: added logs and traces tab in host metrics detail view (feat: added logs and traces tab in host metrics detail view #6359)

• feat: added the host detail view

• feat: completed containers and processes details view

• feat: added host metrics panels in metrics tabs

• refactor: removed inline styles from host containers and processes tabs

• feat: added logs and traces tab in host metrics detail view

• chore: removed console statements

• feat: added filters and time selection in traces tab

• fix: resolved metrics,logs and traces tab issues

• feat: added navigation for logs and traces to respective explorer pages

• fix: added the code for logs tab and navigation to respective explorer page

• fix: added fixes for date time selection custom issue

• style: added styles for light mode

• refactor: removed unused code and added comments

• refactor: added new code for host metric attribute keys

• feat: reset query data once we are on infra monitoring page

• chore: remove optional parameter from get attributes and groupby interfaces

• feat: update ui as per the designs

• fix: logs list, time select and other ui issues

• feat: update title for infra monitoring page

• feat: update copies

• feat: update styles for light mode

• fix: reset page size on filter, open explorers in new tab, enable horizontal scroll

• feat: traces tab updates

• feat: move infra monitoring behind ff

• fix: remove sorting from host listing page

---

Important

Introduces infrastructure monitoring feature with host list view, detailed metrics, and feature flag control.

• Feature:
  • Adds infrastructure monitoring feature with host list view and filters in InfraMonitoringHosts.
  • Implements host detail view with metrics, logs, traces, containers, and processes tabs in HostMetricsDetails.
  • Adds pagination and sorting to host list in HostsList.
  • Introduces feature flag HOSTS_INFRA_MONITORING to control access.
• API:
  • Adds getHostLists and getHostAttributeKeys for fetching host data and attributes.
• UI Components:
  • Adds HostMetricsDetails, HostMetricLogsDetailedView, HostMetricTraces, Metrics, Containers, and Processes components.
  • Implements DateTimeSelectionV2 for time range selection.
  • Updates SideNav and AppLayout to include new routes and feature flag checks.
• Styles:
  • Adds styles for new components in InfraMonitoring.styles.scss and other related files.

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

[ellipsis-dev]

❌ Changes requested. Reviewed everything up to cf1b6cf in 2 minutes and 10 seconds

More details

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

1. frontend/src/hooks/infraMonitoring/useGetHostList.ts:38

• Draft comment:
  The headers parameter is passed to getHostLists but is not used in the function. Ensure that getHostLists utilizes the headers parameter if needed.
• Reason this comment was not posted:
  Comment did not seem useful.

2. frontend/src/hooks/queryBuilder/useGetAggregateKeys.ts:38

• Draft comment:
  The isInfraMonitoring parameter is used to conditionally call getHostAttributeKeys or getAggregateKeys. This is a good use of conditional logic to handle different data sources.
• Reason this comment was not posted:
  Confidence changes required: 20%
  The useGetAggregateKeys hook has a parameter isInfraMonitoring which is used to determine which API function to call. This is a good approach for conditional logic based on the context of the call.

3. frontend/src/hooks/queryBuilder/useAutoComplete.ts:32

• Draft comment:
  The isInfraMonitoring parameter is used to adjust the behavior of the hook based on the context. This is a good design choice for handling different use cases.
• Reason this comment was not posted:
  Confidence changes required: 20%
  The useAutoComplete hook has a parameter isInfraMonitoring which is used to determine the behavior of the hook. This is a good approach for handling different contexts.

4. frontend/src/hooks/queryBuilder/useFetchKeysAndValues.ts:48

• Draft comment:
  The isInfraMonitoring parameter is used to conditionally call getInfraAttributesValues or getAttributesValues. This is a good use of conditional logic to handle different data sources.
• Reason this comment was not posted:
  Confidence changes required: 20%
  The useFetchKeysAndValues hook uses the isInfraMonitoring parameter to determine which API function to call. This is a good approach for handling different data sources.

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

• Draft comment:
  The default order by cpu in descending order is a reasonable choice for a host list view, as CPU usage is often a critical metric.
• Reason this comment was not posted:
  Confidence changes required: 10%
  The getHostListsQuery function sets a default order by cpu in descending order. This is a reasonable default for a host list view, as CPU usage is often a critical metric.

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

• Draft comment:
  The use of useMemo for query, hostMetricsData, formattedHostMetricsData, and columns is a good practice to optimize performance by avoiding unnecessary recalculations.
• Reason this comment was not posted:
  Confidence changes required: 10%
  The HostsList component uses useMemo to optimize the calculation of query, hostMetricsData, formattedHostMetricsData, and columns. This is a good practice to avoid unnecessary recalculations.

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

• Draft comment:
  The use of useCallback for handleTableChange and handleFiltersChange is a good practice to optimize performance by memoizing these functions.
• Reason this comment was not posted:
  Confidence changes required: 10%
  The HostsList component uses useCallback for handleTableChange and handleFiltersChange to optimize performance by memoizing these functions. This is a good practice.

8. frontend/src/container/InfraMonitoringHosts/HostsListControls.tsx:15

• Draft comment:
  The use of useMemo for updatedCurrentQuery is a good practice to optimize performance by avoiding unnecessary recalculations.
• Reason this comment was not posted:
  Confidence changes required: 10%
  The HostsListControls component uses useMemo to optimize the calculation of updatedCurrentQuery. This is a good practice to avoid unnecessary recalculations.

9. frontend/src/pages/InfrastructureMonitoring/InfrastructureMonitoring.styles.scss:11

• Draft comment:
  Avoid using hardcoded color values like #c0c1c3 and #fff. Use design tokens or predefined color constants instead for consistency. This applies to other hardcoded colors in this file as well.
• Reason this comment was not posted:
  Marked as duplicate.

10. frontend/src/container/InfraMonitoringHosts/utils.tsx:103

• Draft comment:
  Avoid using hardcoded color values like #c0c1c3 and #fff. Use design tokens or predefined color constants instead for consistency. This applies to other hardcoded colors in this file as well.
• Reason this comment was not posted:
  Marked as duplicate.

Workflow ID: wflow_LkdiEsCaGSwDxZRd

---

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.

[ellipsis-dev]

👍 Looks good to me! Incremental review on 3eb20e1 in 26 seconds

More details

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

Workflow ID: wflow_JibmKn2ETePKUOci

---

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