feat: add logs link to environment cards in deploy tab

[kaviththiranga]

Each environment card now shows a "Logs" row with an open-in-new-tab
icon that navigates to the runtime logs page with the relevant
environment filter pre-selected.

fixes: openchoreo/openchoreo#2910

Summary by CodeRabbit

• New Features
  • Environment cards now display a "View Logs" button, enabling users to access runtime logs filtered by their selected environment for faster debugging and monitoring.

[coderabbitai]

Important

Review skipped

Draft detected.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: d90b6112-5399-47ff-98d6-cb811bc9977a

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

📝 Walkthrough

Walkthrough

This change adds a direct link to environment logs within the environment card by introducing a new buildRuntimeLogsPath routing utility, extending the useEntityLinks hook to compute logs URLs, and updating the environment card component hierarchy to conditionally render a "View Logs" button when a logs URL is available.

Changes

Cohort / File(s)	Summary
Routing Utilities plugins/openchoreo-react/src/routing/pathBuilders.ts, plugins/openchoreo-react/src/routing/index.ts, plugins/openchoreo-react/src/routing/useEntityLinks.ts	Added buildRuntimeLogsPath() function to construct environment logs URLs with query parameters. Extended EntityLinks interface with runtimeLogs property that derives the path using the new utility. Re-exported the builder from the routing module.
Environment Card Component plugins/openchoreo/src/components/Environments/EnvironmentsList.tsx, plugins/openchoreo/src/components/Environments/components/EnvironmentCard.tsx	EnvironmentsList now uses useEntityLinks to compute logs URL and passes it via logsUrl prop to EnvironmentCard, which forwards it to EnvironmentCardContent.
Environment Card Content & Styling plugins/openchoreo/src/components/Environments/components/EnvironmentCardContent.tsx, plugins/openchoreo/src/components/Environments/styles.ts	Added conditional rendering to display "View Logs" and "Open in new tab" buttons when logsUrl is present. Introduced viewLogsGroup style with semi-transparent primary-colored border, borderRadius, and hover effects using alpha() utility.
Type Definitions plugins/openchoreo/src/components/Environments/types.ts	Extended EnvironmentCardProps and EnvironmentCardContentProps interfaces with optional logsUrl field.

Sequence Diagram

sequenceDiagram
    participant EL as EnvironmentsList
    participant EH as useEntityLinks Hook
    participant BP as buildRuntimeLogsPath
    participant EC as EnvironmentCard
    participant ECC as EnvironmentCardContent
    participant UI as Rendered Button

    EL->>EH: useEntityLinks(entity)
    EH->>BP: buildRuntimeLogsPath(logsBase, env.name)
    BP-->>EH: logsUrl (with ?env query param)
    EH-->>EL: EntityLinks object with runtimeLogs fn
    EL->>EC: Pass logsUrl prop
    EC->>ECC: Forward logsUrl prop
    ECC->>ECC: Conditional: if logsUrl && status truthy
    ECC->>UI: Render "View Logs" button with href
    UI-->>EL: Ready for user interaction

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~25 minutes

Poem

🐰 A path to logs now shines so bright,
Within each card, a clickable light!
No filtering, no searching far,
Just logs for each environment star! ✨

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	The description provides a brief summary of changes and references the linked issue, but omits most template sections like Goals, Approach, Release notes, and test information.	Add missing sections from the template such as Goals, Approach, Release notes, Automation tests, and Test environment details to provide comprehensive PR documentation.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly summarizes the main change: adding a logs link to environment cards in the deploy tab.
Linked Issues check	✅ Passed	The PR implementation fully addresses the requirement from issue #2910 to provide a direct link to environment logs in each environment card with pre-filtered environment context.
Out of Scope Changes check	✅ Passed	All changes are focused on implementing the environment logs link feature; no unrelated modifications are present in the PR.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

📝 Coding Plan

• Generate coding plan for human review comments

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Tip

CodeRabbit can enforce grammar and style rules using `languagetool`.

Configure the reviews.tools.languagetool setting to enable/disable rules and categories. Refer to the LanguageTool Community to learn more.

[coderabbitai]

🧹 Nitpick comments (1)

plugins/openchoreo/src/components/Environments/components/EnvironmentCardContent.tsx (1)

112-113: Consider: The empty <span /> for layout alignment.

The empty span maintains layout spacing when there's no releaseName. This works but could be slightly cleaner using CSS marginLeft: 'auto' on the logs group instead, which would eliminate the need for a placeholder element.

♻️ Optional alternative approach

-            {releaseName ? (
-              <Button
-                variant="outlined"
-                ...
-              >
-                View K8s Artifacts
-              </Button>
-            ) : (
-              <span />
-            )}
             {logsUrl && status && (
               <Box
                 display="flex"
                 alignItems="stretch"
                 className={classes.viewLogsGroup}
+                style={{ marginLeft: releaseName ? undefined : 'auto' }}
               >

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In
`@plugins/openchoreo/src/components/Environments/components/EnvironmentCardContent.tsx`
around lines 112 - 113, The empty <span /> used when releaseName is missing is
only present for spacing; remove that placeholder and instead apply CSS
marginLeft: 'auto' (or a utility class that sets margin-left: auto) to the logs
group container in the EnvironmentCardContent JSX so the logs group will
right-align itself when releaseName is absent; update the JSX by deleting the
<span /> fallback and add the style/class to the element that renders the logs
group (referencing EnvironmentCardContent and the releaseName conditional).

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In
`@plugins/openchoreo/src/components/Environments/components/EnvironmentCardContent.tsx`:
- Around line 112-113: The empty <span /> used when releaseName is missing is
only present for spacing; remove that placeholder and instead apply CSS
marginLeft: 'auto' (or a utility class that sets margin-left: auto) to the logs
group container in the EnvironmentCardContent JSX so the logs group will
right-align itself when releaseName is absent; update the JSX by deleting the
<span /> fallback and add the style/class to the element that renders the logs
group (referencing EnvironmentCardContent and the releaseName conditional).

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: e3167620-bb77-4560-af20-700c006057c3

📥 Commits

Reviewing files that changed from the base of the PR and between f78131f and bdaaf4a.

📒 Files selected for processing (8)

• plugins/openchoreo-react/src/routing/index.ts
• plugins/openchoreo-react/src/routing/pathBuilders.ts
• plugins/openchoreo-react/src/routing/useEntityLinks.ts
• plugins/openchoreo/src/components/Environments/EnvironmentsList.tsx
• plugins/openchoreo/src/components/Environments/components/EnvironmentCard.tsx
• plugins/openchoreo/src/components/Environments/components/EnvironmentCardContent.tsx
• plugins/openchoreo/src/components/Environments/styles.ts
• plugins/openchoreo/src/components/Environments/types.ts