fix: Console Pod Logs broken if not in a plural application

assets/src/components/apps/app/logs/LogContent.tsx

@@ -70,7 +70,7 @@ export default function LogContent({
   listRef,
   setListRef,
   logs,
-  name,
+  namespace,
   loading,
   fetchMore,
   onScroll,
@@ -102,7 +102,7 @@ export default function LogContent({
         listRef={listRef}
         setListRef={setListRef}
         setLoader={setLoader}
-        refreshKey={`${name}:${search}`}
+        refreshKey={`${namespace}:${search}`}
         items={lines}
         mapper={({ line, level, stream }, o) => (
           <LogLine

assets/src/components/apps/app/logs/Logs.tsx

@@ -1,7 +1,6 @@
 import { Input, SearchIcon, useSetBreadcrumbs } from '@pluralsh/design-system'
-import { useCallback, useContext, useMemo, useState } from 'react'
+import { useCallback, useMemo, useState } from 'react'
 import { useParams } from 'react-router-dom'
-import { InstallationContext } from 'components/Installations'
 import { toMap, useQueryParams } from 'components/utils/query'
 import { Flex } from 'honorable'
 
@@ -13,10 +12,29 @@ import LogsFilters from './LogsFilters'
 import { LogsCard } from './LogsCard'
 import LogsFullScreen from './LogsFullScreen'
 
-export default function Logs() {
+export default function AppLogs() {
   const { appName } = useParams()
+
+  const breadcrumbs = useMemo(
+    () => [
+      { label: 'apps', url: '/' },
+      { label: appName ?? '', url: `/apps/${appName}` },
+      { label: 'logs', url: `/apps/${appName}/logs` },
+    ],
+    [appName]
+  )
+
+  useSetBreadcrumbs(breadcrumbs)
+
+  if (!appName) {
+    return null
+  }
+
+  return <LogsBase namespace={appName} />
+}
+
+export function LogsBase({ namespace }: { namespace: string }) {
   const query = useQueryParams()
-  const { applications } = useContext<any>(InstallationContext)
   const [search, setSearch] = useState('')
   const [labels, setLabels] = useState(toMap(query))
 
@@ -33,32 +51,20 @@ export default function Logs() {
     [labels, setLabels]
   )
 
-  const currentApp = applications.find((app) => app.name === appName)
   const searchQuery = search.length > 0 ? ` |~ "${search}"` : ''
   const labelList = Object.entries(labels).map(([name, value]) => ({
     name,
     value,
   }))
   const labelQuery = useMemo(
     () =>
-      [...labelList, { name: 'namespace', value: appName }]
+      [...labelList, { name: 'namespace', value: namespace }]
         .map(({ name, value }) => `${name}="${value}"`)
         .join(','),
-    [labelList, appName]
+    [labelList, namespace]
   )
   const logQuery = `{${labelQuery}}${searchQuery}`
 
-  const breadcrumbs = useMemo(
-    () => [
-      { label: 'apps', url: '/' },
-      { label: appName ?? '', url: `/apps/${appName}` },
-      { label: 'logs', url: `/apps/${appName}/logs` },
-    ],
-    [appName]
-  )
-
-  useSetBreadcrumbs(breadcrumbs)
-
   return (
     <ScrollablePage
       heading="Logs"
@@ -70,7 +76,7 @@ export default function Logs() {
           grow={1}
         >
           <LogsFullScreen
-            application={currentApp}
+            namespace={namespace}
             query={logQuery}
             search={search}
             setSearch={setSearch}
@@ -82,7 +88,7 @@ export default function Logs() {
           />
           <LogsDownloader
             query={logQuery}
-            repo={appName}
+            repo={namespace}
           />
           <LogsFilters
             search={search}
@@ -103,13 +109,14 @@ export default function Logs() {
           startIcon={<SearchIcon size={14} />}
           value={search}
           onChange={({ target: { value } }) => setSearch(value)}
+          flexShrink={0}
         />
         <LogsLabels
           labels={labelList}
           removeLabel={removeLabel}
         />
         <LogsCard
-          application={currentApp}
+          namespace={namespace}
           query={logQuery}
           addLabel={addLabel}
         />

assets/src/components/apps/app/logs/LogsCard.tsx

@@ -12,7 +12,7 @@ const POLL_INTERVAL = 10 * 1000
 const LIMIT = 1000
 
 export function LogsCard({
-  application: { name },
+  namespace,
   query,
   addLabel,
   fullscreen = false,
@@ -51,7 +51,7 @@ export function LogsCard({
           <LogContent
             listRef={listRef}
             setListRef={setListRef}
-            name={name}
+            namespace={namespace}
             logs={data.logs}
             setLoader={setLoader}
             search={query}

assets/src/components/apps/app/logs/LogsFullScreen.tsx

@@ -14,7 +14,7 @@ import { LogsCard } from './LogsCard'
 import LogsFilters from './LogsFilters'
 
 export default function LogsFullScreen({
-  application,
+  namespace,
   query,
   search,
   setSearch,
@@ -90,7 +90,7 @@ export default function LogsFullScreen({
             removeLabel={removeLabel}
           />
           <LogsCard
-            application={application}
+            namespace={namespace}
             query={query}
             addLabel={addLabel}
             height="100%"

assets/src/components/cluster/pods/Pod.tsx

@@ -1,6 +1,6 @@
-import { useEffect, useRef } from 'react'
-import { Outlet, useParams } from 'react-router-dom'
-import { TabPanel, useBreadcrumbs } from '@pluralsh/design-system'
+import { useMemo, useRef } from 'react'
+import { Outlet, useMatch, useParams } from 'react-router-dom'
+import { TabPanel, useSetBreadcrumbs } from '@pluralsh/design-system'
 import { useTheme } from 'styled-components'
 
 import { ResponsiveLayoutSidecarContainer } from 'components/utils/layout/ResponsiveLayoutSidecarContainer'
@@ -17,19 +17,23 @@ export default function Node() {
   const tabStateRef = useRef<any>()
   const theme = useTheme()
   const { name, namespace } = useParams()
-  const { setBreadcrumbs } = useBreadcrumbs()
+  const { tab } = useMatch('/pods/:namespace/:name/:tab')?.params || {}
 
-  // TODO: Investigate whether these links could more specific,
-  // based on where they navigated from, perhaps the `namespace` crumb
-  // could navigate to the Pods view already filtered for that namespace
-  useEffect(() => {
-    if (name && namespace) {
-      setBreadcrumbs([
-        { label: 'pods', url: '/pods' }, // Add filter param here later maybe?
-        { label: name, url: name },
-      ])
-    }
-  }, [name, namespace, setBreadcrumbs])
+  const breadcrumbs = useMemo(
+    () => [
+      { label: 'pods', url: '/pods' },
+      ...(namespace ? [{ label: namespace, url: `/pods/${namespace}` }] : []),
+      ...(namespace && name
+        ? [{ label: name, url: `/pods/${namespace}/${name}` }]
+        : []),
+      ...(tab && namespace && name
+        ? [{ label: tab, url: `/pods/${namespace}/${name}/${tab}` }]
+        : []),
+    ],
+    [name, namespace, tab]
+  )
+
+  useSetBreadcrumbs(breadcrumbs)
 
   return (
     <ResponsiveLayoutPage>

assets/src/components/cluster/pods/PodInfo.tsx

@@ -13,6 +13,8 @@ import { POD_INFO_Q } from '../queries'
 import { SubTitle } from '../nodes/SubTitle'
 import { ContainersList } from '../containers/ContainersList'
 
+import { useNamespaceIsApp } from '../../hooks/useNamespaceIsApp'
+
 import PodMetadata from './PodMetadata'
 import PodConditions from './PodConditions'
 
@@ -27,14 +29,30 @@ export const statusesToRecord = (statuses?: Maybe<Maybe<ContainerStatus>[]>) =>
     {} as Record<string, Maybe<ContainerStatus>>
   )
 
-function getLogUrl({ name, namespace }) {
-  return `/apps/${namespace}/logs?${asQuery({ pod: name })}`
+function useGetLogUrl({
+  name,
+  namespace,
+}: {
+  name?: string
+  namespace?: string
+}) {
+  const isApp = useNamespaceIsApp(namespace)
+
+  if (!namespace) {
+    return null
+  }
+
+  return isApp
+    ? `/apps/${namespace}/logs${name ? `?${asQuery({ pod: name })}` : ''}`
+    : name
+    ? `/pods/${namespace}/${name}/logs`
+    : null
 }
 
 function ViewLogsButton({ metadata }: any) {
-  if (!metadata) return null
+  const url = useGetLogUrl(metadata)
 
-  const url = getLogUrl(metadata)
+  if (!url) return null
 
   return (
     <Button

assets/src/components/cluster/pods/PodLogs.tsx

@@ -0,0 +1,12 @@
+import { LogsBase } from 'components/apps/app/logs/Logs'
+import { useParams } from 'react-router-dom'
+
+export default function PodLogs() {
+  const { namespace } = useParams()
+
+  if (!namespace) {
+    return null
+  }
+
+  return <LogsBase namespace={namespace} />
+}

assets/src/components/cluster/pods/PodSideNav.tsx

@@ -1,19 +1,33 @@
 import { Tab, TabList } from '@pluralsh/design-system'
-import { useMatch } from 'react-router-dom'
-
+import { useMatch, useParams } from 'react-router-dom'
 import { LinkTabWrap } from 'components/utils/Tabs'
+import { useMemo } from 'react'
+
+import { useNamespaceIsApp } from '../../hooks/useNamespaceIsApp'
+
+const useGetDirectory = (namespace = '') => {
+  const namespaceIsApp = useNamespaceIsApp(namespace)
 
-const DIRECTORY = [
-  { path: '', label: 'Info' },
-  { path: 'events', label: 'Events' },
-  { path: 'raw', label: 'Raw' },
-]
+  return useMemo(() => {
+    const showLogs = !namespaceIsApp
+
+    return [
+      { path: '', label: 'Info' },
+      { path: 'events', label: 'Events' },
+      { path: 'raw', label: 'Raw' },
+      ...(showLogs ? [{ path: 'logs', label: 'Logs' }] : []),
+    ]
+  }, [namespaceIsApp])
+}
 
 function NodesTabList({ tabStateRef }: any) {
+  const { namespace } = useParams()
+
   const subpath =
     useMatch('/pods/:namespace/:name/:subpath')?.params?.subpath || ''
+  const directory = useGetDirectory(namespace)
 
-  const currentTab = DIRECTORY.find(({ path }) => path === subpath)
+  const currentTab = directory.find(({ path }) => path === subpath)
 
   return (
     <TabList
@@ -23,7 +37,7 @@ function NodesTabList({ tabStateRef }: any) {
         selectedKey: currentTab?.path,
       }}
     >
-      {DIRECTORY.map(({ label, path }) => (
+      {directory.map(({ label, path }) => (
         <LinkTabWrap
           key={path}
           textValue={label}

assets/src/components/cluster/pods/PodsList.tsx

@@ -214,6 +214,7 @@ export const ColImages = columnHelper.accessor((row) => row?.images || [], {
 
     return images.map((image) => (
       <Tooltip
+        key={image}
         label={image}
         placement="left-start"
       >

assets/src/components/hooks/useNamespaceIsApp.tsx

@@ -0,0 +1,13 @@
+import { useContext, useMemo } from 'react'
+import { InstallationContext } from 'components/Installations'
+
+export const useNamespaceIsApp = (namespace = '') => {
+  const { applications } = useContext<any>(InstallationContext) as {
+    applications?: { name?: string }[]
+  }
+
+  return useMemo(
+    () => !!(namespace && applications?.some((app) => app?.name === namespace)),
+    [applications, namespace]
+  )
+}

assets/src/components/layout/AppNav.tsx

@@ -201,6 +201,7 @@ export function StatusPanel({ statuses, open, onClose }) {
         </StatusPanelTopContainer>
         {apps.map((app, i) => (
           <AppStatusWrap
+            key={app?.name}
             onClick={() => {
               onClose()
               navigate(`/apps/${app.name}`)

assets/src/routes/clusterRoutes.tsx

@@ -6,6 +6,7 @@ import Pod from 'components/cluster/pods/Pod'
 import PodInfo from 'components/cluster/pods/PodInfo'
 import PodEvents from 'components/cluster/pods/PodEvents'
 import PodRaw from 'components/cluster/pods/PodRaw'
+import PodLogs from 'components/cluster/pods/PodLogs'
 import Node from 'components/cluster/nodes/Node'
 import Nodes from 'components/cluster/nodes/Nodes'
 import NodeEvents from 'components/cluster/nodes/NodeEvents'
@@ -40,6 +41,10 @@ export const clusterRoutes = [
       path="raw"
       element={<PodRaw />}
     />
+    <Route
+      path="logs"
+      element={<PodLogs />}
+    />
   </Route>,
 
   /* Nodes */