Add no logs and metrics banner when cluster is offline

[nxtcoder19]

Summary by Sourcery

Add a feature to display a banner indicating the unavailability of logs and metrics when the application is not associated with a cluster or when the cluster is offline. Enhance the system by checking the cluster's status to conditionally render logs and metrics.

New Features:

• Introduce a 'No Logs and Metrics' banner to inform users when logs and metrics are unavailable due to the application not being associated with a cluster or the cluster being offline.

Enhancements:

• Integrate cluster status checks to determine if logs and metrics should be displayed based on the cluster's online status.

[sourcery-ai]

Reviewer's Guide by Sourcery

This pull request adds functionality to display a "No Logs and Metrics" banner when a cluster is offline or when dealing with template applications. The changes primarily affect the logs and metrics routes for both regular applications and managed services.

Sequence diagram for displaying No Logs and Metrics banner

sequenceDiagram
    participant User
    participant LogsAndMetrics
    participant NoLogsAndMetricsBanner
    User->>LogsAndMetrics: Access logs and metrics page
    alt Cluster is offline or template app
        LogsAndMetrics->>NoLogsAndMetricsBanner: Render banner
        NoLogsAndMetricsBanner-->>User: Display "No Logs and Metrics" message
    else Cluster is online
        LogsAndMetrics-->>User: Display logs and metrics
    end

Loading

Class diagram for NoLogsAndMetricsBanner component

classDiagram
    class NoLogsAndMetricsBanner {
        +NoLogsAndMetricsBanner(title: string, description: string)
    }
    NoLogsAndMetricsBanner --> motion: uses
    NoLogsAndMetricsBanner --> Pulsable: uses
    NoLogsAndMetricsBanner --> EmptyState: uses
    NoLogsAndMetricsBanner --> SmileySad: uses
    NoLogsAndMetricsBanner --> Wrapper: uses

Loading

File-Level Changes

Change	Details	Files
Implement cluster status check and conditional rendering of NoLogsAndMetricsBanner	Add useClusterStatusV3 hook to check cluster status Implement conditional rendering based on cluster status Add checks for template applications and offline clusters Create and use NoLogsAndMetricsBanner component for displaying messages	src/apps/console/routes/_main+/$account+/env+/$environment+/app+/$app+/logs-n-metrics/route.tsx src/apps/console/routes/_main+/$account+/msvc+/$msv+/logs-n-metrics/route.tsx
Create new NoLogsAndMetricsBanner component	Implement NoLogsAndMetricsBanner as a reusable component Use Framer Motion for animation effects Utilize existing EmptyState component for layout	src/apps/console/page-components/no-logs-banner.tsx
Update imports and add new dependencies	Import new hooks and components Add ApexOptions type import	src/apps/console/routes/_main+/$account+/env+/$environment+/app+/$app+/logs-n-metrics/route.tsx src/apps/console/routes/_main+/$account+/msvc+/$msv+/logs-n-metrics/route.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.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull
  request title to generate a title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in
  the pull request body to generate a PR summary at any time. You can also use
  this command to specify where the summary should be inserted.

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 extracting the common logic for checking cluster status and rendering the NoLogsAndMetricsBanner into a shared hook or utility function to reduce duplication between route files.

Here's what I looked at during the review

• 🟡 General issues: 1 issue found
• 🟢 Security: all looks good
• 🟢 Testing: all looks good
• 🟡 Complexity: 1 issue found
• 🟢 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.}

[sourcery-ai]

suggestion (performance): Evaluate necessity of Framer Motion

Consider the performance implications of using Framer Motion for this simple animation. React's built-in transitions might be sufficient and more lightweight for this use case.

[sourcery-ai]

issue (complexity): Consider extracting cluster status checks and conditional rendering into a separate component.

The added cluster status checks and conditional rendering have increased the complexity of the LogsAndMetrics component. To improve readability and maintainability, consider extracting this logic into a separate component or custom hook. Here's a suggested refactor:

// Create a new component
const LogsAndMetricsContent = ({ environment, isClusterOnline, children }) => {
  if (environment.clusterName === '') {
    return (
      <NoLogsAndMetricsBanner
        title="Logs and Metrics Unavailable for Template Applications"
        description="Logs and metrics will become available once your app is associated with a cluster."
      />
    );
  }

  if (isClusterOnline === false) {
    return (
      <NoLogsAndMetricsBanner
        title="Logs and Metrics Unavailable for Offline Cluster-Based Applications"
        description="Logs and metrics will be accessible once the cluster is back online."
      />
    );
  }

  return children;
};

// Modify the main component
const LogsAndMetrics = () => {
  const { app, environment, account } = useOutletContext<IAppContext>();

  const { clustersMap: clusterStatus } = useClusterStatusV3({
    clusterName: environment.clusterName,
  });

  const isClusterOnline = findClusterStatusv3(
    clusterStatus[environment.clusterName]
  );

  // ... rest of your component logic ...

  return (
    <LogsAndMetricsContent environment={environment} isClusterOnline={isClusterOnline}>
      <div className="flex flex-col gap-6xl pt-6xl">
        {/* ... your existing JSX ... */}
      </div>
    </LogsAndMetricsContent>
  );
};

This refactoring maintains all the new functionality while reducing nesting in the main component. It separates the concerns of checking cluster status and rendering the appropriate content, making the code more modular and easier to understand at a glance.