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

N/A

Screenshots

Affected Areas and Manually Tested Areas

Infra Monitoring section

---

Important

Implements Kubernetes cluster monitoring in the infrastructure monitoring module with list and detail views, including metrics, logs, traces, and events.

• Behavior:
  • Adds K8sClustersList component for displaying a list of Kubernetes clusters with filtering, sorting, and pagination.
  • Implements ClusterDetails component for detailed view of a selected cluster, with tabs for metrics, logs, traces, and events.
  • Adds support for grouping clusters by attributes and viewing grouped data.
• API and Data Fetching:
  • Introduces getK8sClustersList function in getK8sClustersList.ts for fetching cluster data.
  • Adds useGetK8sClustersList hook for querying cluster data with React Query.
• UI Components:
  • Adds ClusterMetrics, ClusterLogs, ClusterTraces, and ClusterEvents components for displaying respective data in the cluster detail view.
  • Implements styles for new components in various .scss files.
• Misc:
  • Updates InfraMonitoringK8s.tsx to include the new clusters feature.
  • Adds constants and utility functions to support the new feature.

^{This description was created by for 70e367b. 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>

[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. Incremental review on 92bd7d4 in 1 minute and 46 seconds

More details

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

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

• Draft comment:
  The font-size and font-weight properties are defined twice in this rule. Consider removing the redundant definitions to improve clarity and maintainability.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The code in ClusterTraces.styles.scss has a redundant CSS rule for .ant-table-thead > tr > th. The font-size and font-weight are defined twice, which is unnecessary and could lead to confusion or maintenance issues.

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, ensure that offset is updated appropriately to fetch the correct data.
• Reason this comment was not posted:
  Comment did not seem useful.

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. Ensure this is accurate, especially if there are multiple results or pagination is involved.
• Reason this comment was not posted:
  Comment did not seem useful.

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: 30%
  In K8sClustersList.tsx, the setselectedClusterName function is used, but the naming convention is inconsistent with camelCase. It should be setSelectedClusterName.

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

• Draft comment:
  Setting orderBy to null when no sorter is provided might lead to unexpected behavior. Consider setting it to a default value instead.
• Reason this comment was not posted:
  Confidence changes required: 40%
  In K8sClustersList.tsx, the handleTableChange function sets orderBy to null if no sorter is provided. This might lead to unexpected behavior if the default sorting is required.

6. frontend/src/container/InfraMonitoringK8s/Clusters/ClusterDetails/Traces/ClusterTraces.styles.scss:48

• Draft comment:
  Use design tokens or predefined color constants instead of hardcoding color values for consistency. This is also applicable at line 108.
• Reason this comment was not posted:
  Marked as duplicate.

Workflow ID: wflow_ZFtoTWtTlGZss6xn

---

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>

[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 70e367b in 48 seconds

More details

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

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

• Draft comment:
  Ensure that the change from cluster_name to clusterName is consistent across the codebase for proper logging and data tracking.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The logEvent function call was updated to use 'clusterName' instead of 'cluster_name'. This change should be consistent across the codebase to ensure proper logging and data tracking. The change seems correct as it aligns with the camelCase convention used in JavaScript.

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

• Draft comment:
  The color value for the Tag component was changed to use a design token Color.BG_SLATE_400. Ensure this token is correctly defined and used consistently across the application.
• Reason this comment was not posted:
  Confidence changes required: 50%
  The color value for the Tag component was changed from a hardcoded hex value to a design token Color.BG_SLATE_400. This is a good practice as it promotes consistency and maintainability in the design system. Ensure that the design token is correctly defined and used across the application.

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

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

Workflow ID: wflow_RxfrSnsFZq6WNCfn

---

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