WEB: Console changes and ui fixes

[nxtCoder19]

• cluster status of different account in environment showing correct
• environment listing ui update
• clone environment in template mode

Summary by Sourcery

Update the console UI with new icons and improved environment cloning options. Fix cluster status logic to use a more accurate time threshold. Enhance the avatar component with additional customization options and clean up unused code.

New Features:

• Introduce new environment and environment template icons for better UI representation.

Bug Fixes:

• Fix cluster status update logic to correctly reflect the status of clusters based on a reduced time threshold.

Enhancements:

• Refactor the avatar component to support additional customization options, including a new color scheme and className property.
• Update the environment cloning feature to include a radio button selection for environment type, allowing users to choose between 'compute' and 'template' modes.

Chores:

• Remove unused imports and components, such as the template-avatar component, to clean up the codebase.

[sourcery-ai]

Reviewer's Guide by Sourcery

This pull request implements several UI changes and improvements to the console application, focusing on environment and cluster management. The changes include updating icons, modifying the environment cloning process, enhancing the display of cluster status, and refining the avatar component.

Sequence diagram for environment cloning process

sequenceDiagram
    actor User
    participant UI as User Interface
    participant API as Console API
    User->>UI: Initiate environment clone
    UI->>API: Send clone request
    API->>UI: Return clone options
    UI->>User: Display clone options
    User->>UI: Select clone type (Environment/Template)
    UI->>API: Submit clone type
    API->>UI: Confirm clone creation
    UI->>User: Display success message

Loading

Class diagram for updated icon components

classDiagram
    class AvatarNotification {
        +AvatarNotification(size: number)
    }
    class EnvIconComponent {
        +EnvIconComponent(size: number)
    }
    class EnvTemplateIconComponent {
        +EnvTemplateIconComponent(size: number)
    }
    AvatarNotification --> EnvIconComponent
    AvatarNotification --> EnvTemplateIconComponent

Loading

Class diagram for updated ConsoleAvatar component

classDiagram
    class ConsoleAvatar {
        +ConsoleAvatar(name: string, color: string, size: string, isAvatar: boolean, icon: React.ReactNode, className: string)
    }
    class Avatar {
        +Avatar(color: string, size: string, image: ReactNode, dot: boolean, isTemplate: boolean, className: string)
    }
    ConsoleAvatar --> Avatar

Loading

File-Level Changes

Change	Details	Files
Added new environment-related icons and updated icon imports	Introduced EnvIconComponent for environment representation Added EnvTemplateIconComponent for environment templates Updated icon imports to include new and reorganized icons	src/apps/console/components/icons.tsx
Modified environment cloning process to support template mode	Added radio button selection for environment or environment template Conditionally rendered cluster selection based on clone type Updated form handling and API call to accommodate template mode	src/apps/console/routes/_main+/$account+/environments/clone-environment.tsx
Enhanced environment resources display with new avatars and icons	Updated ListView to use new environment and template icons Modified ConsoleAvatar usage for better visual representation Added logging for debugging cluster information	src/apps/console/routes/_main+/$account+/environments/environment-resources-v2.tsx
Refined cluster status display and sync status calculation	Adjusted time threshold for determining cluster online status Updated sync status messages and tooltips Modified offline status display	src/apps/console/routes/_main+/$account+/infra+/clusters/cluster-resources-v2.tsx
Enhanced Avatar component flexibility and styling	Added support for custom className in Avatar component Introduced new color option 'seven' for avatars Modified border styling for template avatars	src/design-system/components/atoms/avatar.tsx src/apps/console/components/console-avatar.tsx
Updated cluster status monitoring and API query	Modified useClusterStatus hook to use a 1-minute threshold Updated listClusterStatus query to include search parameter Added logging for debugging cluster data	src/apps/console/hooks/use-cluster-status-v2.tsx src/apps/console/server/gql/queries/cluster-queries.ts gql-queries-generator/doc/queries.graphql src/apps/console/hooks/use-cluster-status.tsx

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an
  issue from a review comment by replying to it.

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request
  summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.

[sourcery-ai]

Hey @nxtCoder19 - I've reviewed your changes - here's some feedback:

Overall Comments:

• Consider removing the console.log statement in environment-resources-v2.tsx before merging to production.
• The change in cluster online status threshold from 2 minutes to 1 minute in use-cluster-status-v2.tsx and use-cluster-status.tsx may need further testing to ensure it doesn't cause false offline reports.

Here's what I looked at during the review

• 🟢 General issues: all looks good
• 🟢 Security: all looks good
• 🟢 Testing: all looks good
• 🟢 Complexity: all looks good
• 🟢 Documentation: all looks good

---

Sourcery is free for open source - if you like our reviews please consider sharing them ✨

• X
• Mastodon
• LinkedIn
• Facebook

_{Help me be more useful! Please click 👍 or 👎 on each comment and I'll use the feedback to improve your reviews.}