feat: add logs link to environment cards in deploy tab

plugins/openchoreo-react/src/routing/index.ts

@@ -25,6 +25,7 @@ export {
   buildEnvironmentsBasePath,
   buildWorkflowsBasePath,
   buildRuntimeLogsBasePath,
+  buildRuntimeLogsPath,
   buildOverridesPath,
   buildReleaseDetailsPath,
   buildWorkloadConfigPath,

plugins/openchoreo-react/src/routing/pathBuilders.ts

@@ -33,6 +33,17 @@ export function buildRuntimeLogsBasePath(entity: Entity): string {
   return `${buildEntityPath(entity)}/runtime-logs`;
 }
 
+/**
+ * Build path to runtime-logs page with environment filter pre-selected
+ */
+export function buildRuntimeLogsPath(
+  basePath: string,
+  envName: string,
+): string {
+  const params = new URLSearchParams({ env: envName.toLowerCase() });
+  return `${basePath}?${params.toString()}`;
+}
+
 // --- Environment Paths ---
 
 /**

plugins/openchoreo-react/src/routing/useEntityLinks.ts

@@ -5,6 +5,7 @@ import {
   buildEnvironmentsBasePath,
   buildWorkflowsBasePath,
   buildRuntimeLogsBasePath,
+  buildRuntimeLogsPath,
   buildOverridesPath,
   buildReleaseDetailsPath,
   buildWorkloadConfigPath,
@@ -30,6 +31,7 @@ export interface EntityLinks {
 
   // Other links
   runtimeLogsBase: string;
+  runtimeLogs: (envName: string) => string;
 }
 
 /**
@@ -72,6 +74,7 @@ export function useEntityLinks(entity: Entity): EntityLinks {
       workflowList: tab => buildWorkflowListPath(wfBase, tab),
 
       runtimeLogsBase: logsBase,
+      runtimeLogs: envName => buildRuntimeLogsPath(logsBase, envName),
     };
   }, [entity]);
 }

plugins/openchoreo/src/components/Environments/EnvironmentsList.tsx

@@ -2,6 +2,7 @@ import { useCallback, useMemo } from 'react';
 import { Grid } from '@material-ui/core';
 import { useEntity } from '@backstage/plugin-catalog-react';
 
+import { useEntityLinks } from '@openchoreo/backstage-plugin-react';
 import { useItemActionTracker, useNotification } from '../../hooks';
 import {
   useEnvironmentActions,
@@ -45,6 +46,8 @@ export const EnvironmentsList = () => {
     navigateToReleaseDetails,
   } = useEnvironmentRouting();
 
+  const links = useEntityLinks(entity);
+
   // Action trackers
   const refreshTracker = useItemActionTracker<string>();
   const promotionTracker = useItemActionTracker<string>();
@@ -224,6 +227,7 @@ export const EnvironmentsList = () => {
               activeIncidentCount={
                 incidentsSummaries.get(env.name)?.activeCount
               }
+              logsUrl={links.runtimeLogs(env.name)}
             />
           </Grid>
         ))}

plugins/openchoreo/src/components/Environments/components/EnvironmentCard.tsx

@@ -30,6 +30,7 @@ export const EnvironmentCard = ({
   onSuspend,
   onRedeploy,
   activeIncidentCount,
+  logsUrl,
 }: EnvironmentCardProps) => {
   const classes = useEnvironmentCardStyles();
 
@@ -58,6 +59,7 @@ export const EnvironmentCard = ({
           onOpenReleaseDetails={onOpenReleaseDetails}
           activeIncidentCount={activeIncidentCount}
           environmentName={environmentName}
+          logsUrl={logsUrl}
         />
 
         <EnvironmentActions

plugins/openchoreo/src/components/Environments/components/EnvironmentCardContent.tsx

@@ -6,9 +6,12 @@ import {
   IconButton,
   Tooltip,
   Button,
+  useTheme,
 } from '@material-ui/core';
 import AccessTimeIcon from '@material-ui/icons/AccessTime';
 import DescriptionOutlinedIcon from '@material-ui/icons/DescriptionOutlined';
+import OpenInNewIcon from '@material-ui/icons/OpenInNew';
+import SubjectIcon from '@material-ui/icons/Subject';
 import VisibilityOutlinedIcon from '@material-ui/icons/VisibilityOutlined';
 import { StatusBadge } from '@openchoreo/backstage-design-system';
 import { formatRelativeTime } from '@openchoreo/backstage-plugin-react';
@@ -31,8 +34,10 @@ export const EnvironmentCardContent = ({
   onOpenReleaseDetails,
   activeIncidentCount,
   environmentName,
+  logsUrl,
 }: EnvironmentCardContentProps) => {
   const classes = useEnvironmentCardStyles();
+  const theme = useTheme();
 
   const [invokeUrlsOpen, setInvokeUrlsOpen] = useState(false);
 
@@ -85,18 +90,68 @@ export const EnvironmentCardContent = ({
             </span>
           </Tooltip>
         </Box>
-        {releaseName && (
-          <Box mt={1.5}>
-            <Button
-              variant="outlined"
-              color="primary"
-              size="small"
-              startIcon={<DescriptionOutlinedIcon />}
-              onClick={onOpenReleaseDetails}
-              style={{ textTransform: 'none' }}
-            >
-              View K8s Artifacts
-            </Button>
+        {(releaseName || (logsUrl && status)) && (
+          <Box
+            mt={1.5}
+            display="flex"
+            alignItems="stretch"
+            flexWrap="wrap"
+            gridGap={6}
+          >
+            {releaseName && (
+              <Button
+                variant="outlined"
+                color="primary"
+                size="small"
+                startIcon={<DescriptionOutlinedIcon />}
+                onClick={onOpenReleaseDetails}
+                style={{ textTransform: 'none', fontSize: '0.75rem' }}
+              >
+                View K8s Artifacts
+              </Button>
+            )}
+            {logsUrl && status && (
+              <Box
+                display="flex"
+                alignItems="stretch"
+                className={classes.viewLogsGroup}
+              >
+                <Button
+                  color="primary"
+                  size="small"
+                  startIcon={<SubjectIcon />}
+                  href={logsUrl}
+                  style={{
+                    textTransform: 'none',
+                    fontSize: '0.75rem',
+                    border: 'none',
+                    borderRight: `1.5px solid ${theme.palette.divider}`,
+                    borderRadius: 0,
+                    padding: '3px 10px',
+                  }}
+                >
+                  View Logs
+                </Button>
+                <Tooltip title="Open in new tab">
+                  <IconButton
+                    size="small"
+                    component="a"
+                    href={logsUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                    onClick={(e: React.MouseEvent) => e.stopPropagation()}
+                    style={{ borderRadius: 0, padding: '3px 6px' }}
+                  >
+                    <OpenInNewIcon
+                      style={{
+                        fontSize: '0.875rem',
+                        color: theme.palette.primary.main,
+                      }}
+                    />
+                  </IconButton>
+                </Tooltip>
+              </Box>
+            )}
           </Box>
         )}
       </Box>

plugins/openchoreo/src/components/Environments/styles.ts

@@ -1,4 +1,5 @@
 import { makeStyles } from '@material-ui/core/styles';
+import { alpha } from '@material-ui/core/styles/colorManipulator';
 
 /**
  * Main styles for the Environments component
@@ -116,6 +117,11 @@ export const useEnvironmentCardStyles = makeStyles(theme => ({
     marginLeft: theme.spacing(1),
     marginRight: theme.spacing(1),
   },
+  viewLogsGroup: {
+    border: `1.5px solid ${alpha(theme.palette.primary.main, 0.5)}`,
+    borderRadius: 8,
+    overflow: 'hidden',
+  },
 }));
 
 /**

plugins/openchoreo/src/components/Environments/types.ts

@@ -96,6 +96,7 @@ export interface EnvironmentCardContentProps {
   onOpenReleaseDetails: () => void;
   activeIncidentCount?: number;
   environmentName?: string;
+  logsUrl?: string;
 }
 
 /**
@@ -155,4 +156,5 @@ export interface EnvironmentCardProps {
   onSuspend: () => Promise<void>;
   onRedeploy: () => Promise<void>;
   activeIncidentCount?: number;
+  logsUrl?: string;
 }