Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: implement clusters list table for infra monitoring #6628

Open
wants to merge 14 commits into
base: feat/infra-monitoring-k8s
Choose a base branch
from

Conversation

amlannandy
Copy link
Member

@amlannandy amlannandy commented Dec 13, 2024

Summary

Implement the clusters list table in Infra Monitoring

Related Issues / PR's

N/A

Screenshots

N/A

Affected Areas and Manually Tested Areas

Infra Monitoring section


Important

Implement Kubernetes clusters list feature in Infra Monitoring with new API, components, and utilities.

  • API:
    • Add getK8sClustersList in getK8sClustersList.ts to fetch Kubernetes clusters.
    • Define interfaces K8sClustersListPayload, K8sClustersData, and K8sClustersListResponse.
  • Components:
    • Add K8sClustersList in K8sClustersList.tsx for displaying clusters with pagination and sorting.
    • Implement K8sHeader in K8sHeader.tsx for managing filters and group by options.
  • Utilities:
    • Add utility functions in utils.tsx for data formatting and table column definitions.
    • Define default columns and query structure for clusters list.
  • Hooks:
    • Add useGetK8sClustersList in useGetK8sClustersList.ts for fetching clusters data using React Query.
  • Integration:
    • Integrate clusters list into InfraMonitoringK8s.tsx with category selection and quick filters.

This description was created by Ellipsis for f7f8712. It will automatically update as commits are pushed.

Copy link

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

@github-actions github-actions bot added the enhancement New feature or request label Dec 13, 2024
@amlannandy amlannandy force-pushed the feat/infra-monitoring-k8s-nodes branch 4 times, most recently from 26a6959 to b5d57e1 Compare December 19, 2024 12:44
@amlannandy amlannandy changed the base branch from feat/infra-monitoring-k8s-nodes to feat/infra-monitoring-k8s December 22, 2024 11:19
@amlannandy amlannandy force-pushed the feat/infra-monitoring-k8s-clusters branch from 363d0e7 to 04a2a31 Compare December 22, 2024 11:28
@amlannandy amlannandy marked this pull request as ready for review December 23, 2024 06:20
@amlannandy amlannandy requested a review from YounixM as a code owner December 23, 2024 06:20
Copy link

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

Copy link
Contributor

@ellipsis-dev ellipsis-dev bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❌ 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.

items: [],
op: 'and',
},
orderBy: { columnName: 'cpu', order: 'desc' },
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The default orderBy column name 'cpu' does not match any field in the K8sClustersData interface. Consider using a valid field name like 'cpuUsage' or 'cpuAllocatable'.

canRemove: boolean;
}

export interface IEntityColumn {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The IEntityColumn interface is defined twice in this file. Please remove the duplicate definition.

memoryUtilization: number;
cpuAllocatable: number;
memoryAllocatable: number;
groupedByMeta?: any;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The groupedByMeta property is typed as any. Consider defining a specific type for better type safety.

return options.queryKey;
}

return [REACT_QUERY_KEY.GET_HOST_LIST, requestData];
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The queryKey uses 'GET_HOST_LIST', which might not be appropriate for clusters. Consider using a more descriptive key like 'GET_K8S_CLUSTERS_LIST'.

return (
<div className="pod-group">
{groupByValues.map((value) => (
<Tag key={value} color="#1D212D" className="pod-group-tag-item">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use design tokens or predefined color constants instead of hardcoding color values like #1D212D. This applies to other instances in the code as well.

@amlannandy amlannandy force-pushed the feat/infra-monitoring-k8s-clusters branch from 21a78f1 to a3a8f7c Compare December 24, 2024 14:51
Copy link

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

Copy link
Contributor

@ellipsis-dev ellipsis-dev bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

❌ 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.

handleGroupByRowClick(record);
}

logEvent('Infra Monitoring: K8s cluster list item clicked', {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The logEvent function logs clusterUID but uses record.clusterName. It should use record.clusterUID instead for accurate logging.

return (
<div className="pod-group">
{groupByValues.map((value) => (
<Tag key={value} color="#1D212D" className="pod-group-tag-item">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use design tokens or predefined color constants instead of hardcoding color values for the Tag component. This ensures consistency in design and theming.

Copy link

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

Copy link
Contributor

@ellipsis-dev ellipsis-dev bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 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.

Copy link
Contributor

@ellipsis-dev ellipsis-dev bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 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.

Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant