feat(observability): make project-level log component names clickable

.changeset/clickable-log-components.md

@@ -0,0 +1,5 @@
+---
+'@openchoreo/backstage-plugin-openchoreo-observability': minor
+---
+
+Made component names in the project-level logging view clickable, allowing users to navigate directly to the component-scoped logging view while preserving the current time range and any relevant filters.

plugins/openchoreo-observability/src/components/RuntimeLogs/LogEntry.test.tsx

@@ -1,4 +1,5 @@
 import { useState } from 'react';
+import { MemoryRouter } from 'react-router-dom';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { LogEntry } from './LogEntry';
@@ -48,7 +49,11 @@ function renderLogEntry(
       expanded,
       onToggleExpand: () => setExpanded(prev => !prev),
     };
-    return <LogEntry {...defaultProps} {...overrides} />;
+    return (
+      <MemoryRouter>
+        <LogEntry {...defaultProps} {...overrides} />
+      </MemoryRouter>
+    );
   };
   return render(<Harness />);
 }
@@ -97,6 +102,21 @@ describe('LogEntry', () => {
     expect(screen.getByText('api-service')).toBeInTheDocument();
   });
 
+  it('renders component name link with correct path', () => {
+    renderLogEntry({
+      selectedFields: [...allFields, LogEntryField.ComponentName],
+      entityNamespace: 'my-namespace',
+      entityKind: 'Component',
+    });
+
+    const link = screen.getByRole('link', { name: 'api-service' });
+    expect(link).toBeInTheDocument();
+    expect(link).toHaveAttribute(
+      'href',
+      '/catalog/my-namespace/component/api-service/runtime-logs',
+    );
+  });
+
   it('expands to show metadata on row click', async () => {
     const user = userEvent.setup();
     renderLogEntry();

plugins/openchoreo-observability/src/components/RuntimeLogs/LogEntry.tsx

@@ -9,8 +9,12 @@ import {
 } from '@material-ui/core';
 import FileCopyOutlined from '@material-ui/icons/FileCopyOutlined';
 import { LogEntry as LogEntryType, LogEntryField } from './types';
+import { Link } from '@backstage/core-components';
+import { useLocation } from 'react-router-dom';
 import { useLogEntryStyles } from './styles';
 import { getColumnStyle } from './columns';
+import { Entity } from '@backstage/catalog-model';
+import { buildRuntimeLogsBasePath } from '@openchoreo/backstage-plugin-react';
 
 /**
  * Render-prop slot for a per-row action button (assistant integration,
@@ -29,6 +33,8 @@ interface LogEntryProps {
   environmentName?: string;
   projectName?: string;
   componentName?: string;
+  entityNamespace?: string;
+  entityKind?: string;
   /**
    * Whether this row is currently expanded. Controlled by the parent so that
    * expansion survives the virtualizer unmounting the row off-screen.
@@ -53,12 +59,15 @@ export const LogEntry: FC<LogEntryProps> = ({
   environmentName,
   projectName,
   componentName,
+  entityNamespace,
+  entityKind,
   expanded,
   onToggleExpand,
   getLogsSnapshot,
   renderRowAction,
 }) => {
   const classes = useLogEntryStyles();
+  const location = useLocation();
   const [copySuccess, setCopySuccess] = useState(false);
 
   const handleCopyLog = async (event: MouseEvent<HTMLButtonElement>) => {
@@ -140,13 +149,32 @@ export const LogEntry: FC<LogEntryProps> = ({
           }
 
           if (field === LogEntryField.ComponentName) {
+            const compName = log.metadata?.componentName ?? componentName ?? '';
+            const entity: Entity = {
+              apiVersion: 'backstage.io/v1alpha1',
+              kind: entityKind || 'Component',
+              metadata: {
+                name: compName,
+                namespace: entityNamespace,
+              },
+            };
+            const basePath = buildRuntimeLogsBasePath(entity);
             return (
               <Box
                 key={field}
                 style={getColumnStyle(field)}
                 className={`${classes.cell} ${classes.monospaceCell}`}
               >
-                {log.metadata?.componentName ?? componentName ?? ''}
+                {compName ? (
+                  <Link
+                    to={`${basePath}${location.search}`}
+                    onClick={e => e.stopPropagation()}
+                  >
+                    {compName}
+                  </Link>
+                ) : (
+                  ''
+                )}
               </Box>
             );
           }

plugins/openchoreo-observability/src/components/RuntimeLogs/LogsTable.tsx

@@ -21,6 +21,8 @@ interface LogsTableProps {
   environmentName?: string;
   projectName?: string;
   componentName?: string;
+  entityNamespace?: string;
+  entityKind?: string;
   renderRowAction?: RenderLogRowAction;
 }
 
@@ -37,6 +39,8 @@ export const LogsTable: FC<LogsTableProps> = ({
   environmentName,
   projectName,
   componentName,
+  entityNamespace,
+  entityKind,
   renderRowAction,
 }) => {
   const classes = useLogsTableStyles();
@@ -164,6 +168,8 @@ export const LogsTable: FC<LogsTableProps> = ({
                 environmentName={environmentName}
                 projectName={projectName}
                 componentName={componentName}
+                entityNamespace={entityNamespace}
+                entityKind={entityKind}
                 expanded={expanded.has(key)}
                 onToggleExpand={() => toggle(key)}
                 getLogsSnapshot={getLogsSnapshot}

plugins/openchoreo-observability/src/components/RuntimeLogs/ObservabilityProjectRuntimeLogsPage.tsx

@@ -241,6 +241,8 @@ const ObservabilityProjectRuntimeLogsContent = ({
               selectedEnvironment?.displayName || selectedEnvironment?.name
             }
             projectName={projectName}
+            entityNamespace={entity.metadata.namespace}
+            entityKind="component"
             renderRowAction={renderRowAction}
           />
         </>

plugins/openchoreo-observability/src/components/RuntimeLogs/ObservabilityRuntimeLogsPage.tsx

@@ -257,6 +257,8 @@ const ObservabilityRuntimeLogsContent = ({
             }
             projectName={project}
             componentName={componentName}
+            entityNamespace={entity.metadata.namespace}
+            entityKind={entity.kind}
             renderRowAction={renderRowAction}
           />
         </>