feat: implement clusters in k8s infra monitoring

[amlannandy]

Summary

Implement the clusters entity in Infra Monitoring

• Clusters list table
• Clusters detail page

Related Issues / PR's

Screenshots

Affected Areas and Manually Tested Areas

Infra Monitoring section

---

Important

Implement clusters entity in Kubernetes infrastructure monitoring with list and detail views, including metrics, logs, events, and traces.

• Behavior:
  • Implement clusters entity in Kubernetes infrastructure monitoring with list and detail views.
  • Add filtering, sorting, and pagination to clusters list in K8sClustersList.tsx.
  • Add detailed view for clusters with metrics, logs, events, and traces in ClusterDetails.tsx.
• API and Data Handling:
  • Add getK8sClustersList API function in getK8sClustersList.ts.
  • Add useGetK8sClustersList hook in useGetK8sClustersList.ts for fetching cluster data.
• UI Components:
  • Add ClusterMetrics, ClusterLogs, ClusterEvents, and ClusterTraces components for detailed cluster views.
  • Add styles for new components in respective .scss files.
• Misc:
  • Update InfraMonitoringK8s.tsx to include clusters in the monitoring dashboard.
  • Add constants and utility functions for handling cluster data and queries.

^{This description was created by for e7e645e. 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 21a78f1 in 2 minutes and 3 seconds

More details

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

1. frontend/src/container/InfraMonitoringK8s/Clusters/K8sClustersList.tsx:112

• Draft comment:
  Avoid using inline styles in React components. Use external stylesheets, CSS classes, or styled components instead. This applies to other instances in the code as well.
• Reason this comment was not posted:
  Comment was not on a valid diff hunk.

Workflow ID: wflow_OWnIjk1DnyqVdvEW

---

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>

[ellipsis-dev]

❌ Changes requested. Incremental review on a3a8f7c in 1 minute and 19 seconds

More details

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

1. frontend/src/container/InfraMonitoringK8s/Clusters/utils.tsx:70

• Draft comment:
  The orderBy column 'cpu' does not exist in the data structure. Consider using a valid column name like 'cpuUsage'.
• Reason this comment was not posted:
  Comment was not on a valid diff hunk.

2. frontend/src/container/InfraMonitoringK8s/Clusters/utils.tsx:53

• Draft comment:
  Consider defining a specific type for groupedByMeta instead of using any to improve type safety.
• Reason this comment was not posted:
  Marked as duplicate.

3. frontend/src/container/InfraMonitoringK8s/Clusters/utils.tsx:58

• Draft comment:
  Avoid using inline styles in React components. Instead, use external stylesheets, CSS classes, or styled components.
• Reason this comment was not posted:
  Marked as duplicate.

Workflow ID: wflow_Vuxm2IOGxRYpoF3F

---

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>

[ellipsis-dev]

👍 Looks good to me! Incremental review on 26a83fb in 1 minute and 11 seconds

More details

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

1. frontend/src/container/InfraMonitoringK8s/Clusters/utils.tsx:1

• Draft comment:
  The label for 'Memory Utilization' should be 'Memory Utilization (bytes)' instead of 'Memory Utilization (cores)'.
• Reason this comment was not posted:
  Marked as duplicate.

2. frontend/src/container/InfraMonitoringK8s/Clusters/utils.tsx:162

• Draft comment:
  Ensure that the label for 'Memory Utilization' in defaultAddedColumns matches the actual data representation, which is in bytes.
• Reason this comment was not posted:
  Comment did not seem useful.

3. frontend/src/container/InfraMonitoringK8s/Clusters/utils.tsx:88

• Draft comment:
  Avoid using inline styles for column headers. Use external stylesheets, CSS classes, or styled components instead. This issue is also present in other column definitions in this file.
• Reason this comment was not posted:
  Comment was on unchanged code.

4. frontend/src/container/InfraMonitoringK8s/Clusters/utils.tsx:104

• Draft comment:
  Avoid using inline styles for column headers. Use external stylesheets, CSS classes, or styled components instead. This issue is also present in other column definitions in this file.
• Reason this comment was not posted:
  Marked as duplicate.

5. frontend/src/container/InfraMonitoringK8s/Clusters/utils.tsx:162

• Draft comment:
  Avoid using inline styles for column headers. Use external stylesheets, CSS classes, or styled components instead. This issue is also present in other column definitions in this file.
• Reason this comment was not posted:
  Marked as duplicate.

Workflow ID: wflow_o6zABtnbfDdrAdq4

---

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

[ellipsis-dev]

👍 Looks good to me! Incremental review on f7f8712 in 14 seconds

More details

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

1. frontend/src/hooks/infraMonitoring/useGetK8sClustersList.ts:41

• Draft comment:
  The change from GET_HOST_LIST to GET_CLUSTER_LIST in the query key is correct and aligns with the new feature implementation.
• Reason this comment was not posted:
  Confidence changes required: 0%
  The change from GET_HOST_LIST to GET_CLUSTER_LIST in the query key is correct and aligns with the new feature implementation.

2. frontend/src/hooks/infraMonitoring/useGetK8sClustersList.ts:41

• Draft comment:
  Avoid using inline styles in React components. Instead, use external stylesheets, CSS classes, or styled components. This comment applies to any other instances of inline styles in the codebase.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The code is well-structured and follows the rules provided. The only issue is the use of inline styles, which is not present here. The code uses external constants and hooks appropriately.

Workflow ID: wflow_ayeWwrXLplRROnxa

---

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>

[SagarRajput-7]

already exists

[SagarRajput-7]

Please see and refactor code accordingly to reduce these larger duplications with the already merged code and with the other 3 PRs

[CLAassistant]

All committers have signed the CLA.

[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. Incremental review on 3640874 in 1 minute and 51 seconds

More details

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

1. frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/Metrics/ClusterMetrics.tsx:84

• Draft comment:
  Avoid using any type for data. Define a specific type or interface for the expected structure of data. This applies to other instances of any in this file as well.
• Reason this comment was not posted:
  Marked as duplicate.

2. frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/Metrics/constants.ts:788

• Draft comment:
  Avoid using any type for data. Define a specific type or interface for the expected structure of data. This applies to other instances of any in this file as well.
• Reason this comment was not posted:
  Marked as duplicate.

3. frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/Metrics/constants.ts:1061

• Draft comment:
  Avoid using any type for data. Define a specific type or interface for the expected structure of data. This applies to other instances of any in this file as well.
• Reason this comment was not posted:
  Marked as duplicate.

4. frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/Metrics/constants.ts:1250

• Draft comment:
  Avoid using any type for data. Define a specific type or interface for the expected structure of data. This applies to other instances of any in this file as well.
• Reason this comment was not posted:
  Marked as duplicate.

5. frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/Metrics/constants.ts:1523

• Draft comment:
  Avoid using any type for data. Define a specific type or interface for the expected structure of data. This applies to other instances of any in this file as well.
• Reason this comment was not posted:
  Marked as duplicate.

6. frontend/src/container/InfraMonitoringK8s/commonUtils.tsx:7

• Draft comment:
  Avoid using inline styles. Consider using CSS classes or styled components instead.
• Reason this comment was not posted:
  Comment was not on a valid diff hunk.

7. frontend/src/container/InfraMonitoringK8s/commonUtils.tsx:8

• Draft comment:
  Avoid using inline styles. Consider using CSS classes or styled components instead.
• Reason this comment was not posted:
  Marked as duplicate.

Workflow ID: wflow_RpeFrxp4pvnCFOtq

---

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]

Avoid using any type for data. Define a specific type or interface for the expected structure of data. This applies to other instances of any in this file as well.

[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. Incremental review on e7e645e in 2 minutes and 30 seconds

More details

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

1. frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/Traces/ClusterTraces.styles.scss:45

• Draft comment:
  Redundant CSS properties: font-size and font-weight are defined twice in .ant-table-thead > tr > th. Consider removing the duplicates to clean up the code.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The code in ClusterTraces.styles.scss contains a redundant CSS rule for .ant-table-thead > tr > th where font-size and font-weight are defined twice. This redundancy should be removed to clean up the code.

2. frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/Traces/ClusterTraces.tsx:54

• Draft comment:
  The offset state is initialized but never updated. If pagination is intended, consider implementing a mechanism to update the offset state when pagination changes.
• Reason this comment was not posted:
  Decided after close inspection that this draft comment was likely wrong and/or not actionable:
  The code appears to intentionally use URL query parameters for pagination state rather than local state. The offset state seems to be a fallback value when paginationQueryData.offset is not available. The comment is technically correct that offset never changes, but this appears to be by design since pagination is handled through URL parameters instead.
  I could be wrong about the intention - maybe this is actually a bug where the offset should be updated but isn't. The presence of the append logic in useEffect suggests pagination was intended.
  The use of URL parameters for pagination state is a common pattern, and the code consistently uses paginationQueryData.offset || offset throughout. The append logic works with either source of offset.
  The comment should be deleted since the offset behavior appears intentional, using URL parameters instead of local state for pagination.

3. frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/Traces/ClusterTraces.tsx:138

• Draft comment:
  The totalCount is calculated using the length of the list in the first result. Consider summing the lengths of all lists in the results for accuracy.
• Reason this comment was not posted:
  Confidence changes required: 50%
  In ClusterTraces.tsx, the totalCount is calculated using the length of the list in the first result. This might not be accurate if there are multiple results. Consider summing the lengths of all lists in the results.

4. frontend/src/container/InfraMonitoringK8s/Clusters/K8sClustersList.tsx:65

• Draft comment:
  The function setselectedClusterName should be renamed to setSelectedClusterName to follow camelCase naming conventions.
• Reason this comment was not posted:
  Confidence changes required: 50%
  In K8sClustersList.tsx, the setselectedClusterName function is used with a lowercase 's'. This is inconsistent with the camelCase naming convention and should be corrected to setSelectedClusterName.

5. frontend/src/container/InfraMonitoringK8s/Clusters/K8sClustersList.tsx:286

• Draft comment:
  Ensure that record.key is unique and correctly represents the cluster name when setting selectedClusterName.
• Reason this comment was not posted:
  Confidence changes required: 50%
  In K8sClustersList.tsx, the handleRowClick function uses record.key to set selectedClusterName. Ensure that record.key is unique and correctly represents the cluster name.

6. frontend/src/container/InfraMonitoringK8s/Clusters/K8sClustersList.tsx:313

• Draft comment:
  Consider moving expandedRowRender outside the component to avoid re-creation on each render, which can improve performance.
• Reason this comment was not posted:
  Confidence changes required: 50%
  In K8sClustersList.tsx, the expandedRowRender function is defined inside the component. Consider moving it outside to avoid re-creation on each render, which can improve performance.

7. frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/Traces/ClusterTraces.styles.scss:108

• Draft comment:
  Use design tokens or predefined color constants instead of hardcoding color values like rgba(255, 255, 255, 0.04) to maintain consistency in design and theming.
• Reason this comment was not posted:
  Marked as duplicate.

8. frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/Traces/ClusterTraces.styles.scss:189

• Draft comment:
  Use design tokens or predefined color constants instead of hardcoding color values like rgba(0, 0, 0, 0.04) to maintain consistency in design and theming.
• Reason this comment was not posted:
  Marked as duplicate.

Workflow ID: wflow_LH9YwEMpF3M2O2Ig

---

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]

Use design tokens or predefined color constants instead of hardcoding color values like rgba(171, 189, 255, 0.01) to maintain consistency in design and theming.

[github-actions]

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