Optimize the caching of some more cluster fields plus other changes (#…

…1709)

assets/package.json

@@ -80,7 +80,7 @@
     "kubernetes-resource-parser": "0.1.0",
     "lodash": "4.17.21",
     "moment": "2.29.4",
-    "phoenix": "1.7.3",
+    "phoenix": "1.7.14",
     "pluralize": "8.0.0",
     "pluralsh-absinthe-socket-apollo-link": "0.2.0",
     "query-string": "8.1.0",

assets/src/components/ai/chatbot/AISuggestFix.tsx

@@ -19,7 +19,6 @@ import {
   AiInsightFragment,
   AiRole,
   ChatMessage,
-  useAiChatStreamSubscription,
   useAiFixPrMutation,
   useAiSuggestedFixLazyQuery,
 } from '../../../generated/graphql.ts'
@@ -28,6 +27,8 @@ import LoadingIndicator from '../../utils/LoadingIndicator.tsx'
 import AIPanel from '../AIPanel.tsx'
 import { AISuggestFixButton } from './AISuggestFixButton.tsx'
 import { ChatWithAIButton, insightMessage } from './ChatbotButton.tsx'
+import { useStreamTopic } from '../useStreamTopic.tsx'
+import { useChannel } from 'components/hooks/useChannel.tsx'
 
 interface AISuggestFixProps {
   insight: Nullable<AiInsightFragment>
@@ -52,20 +53,22 @@ export function Loading({
   setStreaming: Dispatch<SetStateAction<boolean>>
 }): ReactNode {
   const [streamedMessage, setStreamedMessage] = useState<AiDelta[]>([])
-  useAiChatStreamSubscription({
-    variables: { insightId, scopeId },
-    onData: ({ data: { data } }) => {
+  const topic = useStreamTopic({ insightId, scopeId })
+  const callback = useCallback(
+    ({ content, seq }) => {
       setStreaming(true)
-      if ((data?.aiStream?.seq ?? 1) % 120 === 0) scrollToBottom()
+      if ((seq ?? 1) % 120 === 0) scrollToBottom()
       setStreamedMessage((streamedMessage) => [
         ...streamedMessage,
         {
-          seq: data?.aiStream?.seq ?? 0,
-          content: data?.aiStream?.content ?? '',
+          seq: seq ?? 0,
+          content: content ?? '',
         },
       ])
     },
-  })
+    [setStreaming, setStreamedMessage, scrollToBottom]
+  )
+  useChannel(topic, 'stream', callback)
 
   if (!streamedMessage.length) {
     return <LoadingIndicator />

assets/src/components/ai/chatbot/ChatbotPanelThread.tsx

@@ -13,7 +13,6 @@ import {
   ChatThreadDetailsDocument,
   ChatThreadDetailsQuery,
   ChatThreadFragment,
-  useAiChatStreamSubscription,
   useChatMutation,
   useChatThreadDetailsQuery,
 } from 'generated/graphql'
@@ -25,6 +24,8 @@ import {
   SendMessageForm,
 } from './ChatbotSendMessageForm.tsx'
 import { ChatMessage } from './ChatMessage.tsx'
+import { useStreamTopic } from '../useStreamTopic.tsx'
+import { useChannel } from 'components/hooks/useChannel.tsx'
 
 export function ChatbotPanelThread({
   currentThread,
@@ -44,20 +45,22 @@ export function ChatbotPanelThread({
   }, [messageListRef])
 
   const [streamedMessage, setStreamedMessage] = useState<AiDelta[]>([])
-  useAiChatStreamSubscription({
-    variables: { threadId: currentThread.id },
-    onData: ({ data: { data } }) => {
+  const topic = useStreamTopic({ threadId: currentThread.id })
+  const callback = useCallback(
+    ({ content, seq }) => {
       setStreaming(true)
-      if ((data?.aiStream?.seq ?? 1) % 120 === 0) scrollToBottom()
+      if ((seq ?? 1) % 120 === 0) scrollToBottom()
       setStreamedMessage((streamedMessage) => [
         ...streamedMessage,
         {
-          seq: data?.aiStream?.seq ?? 0,
-          content: data?.aiStream?.content ?? '',
+          seq: seq ?? 0,
+          content: content ?? '',
         },
       ])
     },
-  })
+    [setStreaming, setStreamedMessage, scrollToBottom]
+  )
+  useChannel(topic, 'stream', callback)
 
   const { data } = useChatThreadDetailsQuery({
     variables: { id: currentThread.id },

assets/src/components/ai/useStreamTopic.tsx

@@ -0,0 +1,25 @@
+import { LoginContext } from 'components/contexts'
+import { useContext, useMemo } from 'react'
+
+export function useStreamTopic({
+  insightId,
+  scopeId,
+  threadId,
+}: {
+  insightId?: string
+  scopeId?: string
+  threadId?: string
+}) {
+  const { me } = useContext(LoginContext)
+  return useMemo(() => {
+    if (insightId) {
+      return `ai:insight:${insightId}:${me?.id}`
+    }
+
+    if (threadId) {
+      return `ai:thread:${threadId}:${me?.id}`
+    }
+
+    return `ai:freeform:${scopeId}:${me?.id}`
+  }, [insightId, threadId, scopeId, me])
+}

assets/src/components/cd/services/service/ServiceDetails.tsx

@@ -1,10 +1,4 @@
-import {
-  Chip,
-  collectHeadings,
-  Flex,
-  getMdContent,
-} from '@pluralsh/design-system'
-import capitalize from 'lodash/capitalize'
+import { Chip, Flex } from '@pluralsh/design-system'
 import isEmpty from 'lodash/isEmpty'
 import { memo, useContext, useMemo } from 'react'
 import {
@@ -16,7 +10,6 @@ import {
 import styled, { useTheme } from 'styled-components'
 
 import {
-  FileContent,
   ServiceDeploymentDetailsFragment,
   useServiceDeploymentQuery,
   useServiceDeploymentsTinyQuery,
@@ -60,50 +53,48 @@ import { useProjectId } from '../../../contexts/ProjectsContext'
 import { InsightsTabLabel } from 'components/utils/AiInsights'
 import { ServiceDetailsSidecar } from './ServiceDetailsSidecar'
 import { serviceStatusToSeverity } from '../ServiceStatusChip'
-import { config } from '../../../../markdoc/mdSchema.ts'
 
-function getDocsData(
-  docs:
-    | (Pick<FileContent, 'content' | 'path'> | null | undefined)[]
-    | null
-    | undefined
-) {
-  return docs?.map((doc, i) => {
-    const content = getMdContent(doc?.content, config)
-    const headings = collectHeadings(content)
-    const id = headings?.[0]?.id || `page-${i}`
-    const label = headings?.[0]?.title || `Page ${i}`
-    const path = `docs/${id}`
+// function getDocsData(
+//   docs:
+//     | (Pick<FileContent, 'content' | 'path'> | null | undefined)[]
+//     | null
+//     | undefined
+// ) {
+//   return docs?.map((doc, i) => {
+//     const content = getMdContent(doc?.content, config)
+//     const headings = collectHeadings(content)
+//     const id = headings?.[0]?.id || `page-${i}`
+//     const label = headings?.[0]?.title || `Page ${i}`
+//     const path = `docs/${id}`
 
-    const subpaths = headings
-      .map((heading) => {
-        if (heading.level === 3 && heading.id && heading.title) {
-          return {
-            path: `${path}#${heading.id}`,
-            label: `${heading.title}`,
-            id: heading.id,
-            type: 'docPageHash',
-          }
-        }
+//     const subpaths = headings
+//       .map((heading) => {
+//         if (heading.level === 3 && heading.id && heading.title) {
+//           return {
+//             path: `${path}#${heading.id}`,
+//             label: `${heading.title}`,
+//             id: heading.id,
+//             type: 'docPageHash',
+//           }
+//         }
 
-        return null
-      })
-      .filter((heading) => !!heading)
+//         return null
+//       })
+//       .filter((heading) => !!heading)
 
-    return {
-      path,
-      id,
-      label,
-      subpaths,
-      content,
-      headings,
-      type: 'docPage',
-    }
-  })
-}
+//     return {
+//       path,
+//       id,
+//       label,
+//       subpaths,
+//       content,
+//       headings,
+//       type: 'docPage',
+//     }
+//   })
+// }
 
 type ServiceContextType = {
-  docs: ReturnType<typeof getDocsData>
   service: ServiceDeploymentDetailsFragment
   refetch: () => void
   loading: boolean
@@ -154,19 +145,17 @@ const ErrorsLabel = memo(({ count }: { count: Nullable<number> }) => (
 
 export const getDirectory = ({
   serviceDeployment,
-  docs = null,
   logsEnabled = false,
   isAdmin = false,
 }: {
   serviceDeployment?: ServiceDeploymentDetailsFragment | null | undefined
-  docs?: ReturnType<typeof getDocsData> | null
   logsEnabled?: boolean | undefined
   isAdmin?: boolean
 }): Directory => {
   if (!serviceDeployment) {
     return []
   }
-  const { name, componentStatus, dryRun, status } = serviceDeployment
+  const { componentStatus, dryRun, status } = serviceDeployment
 
   const healthyDependencies =
     serviceDeployment.dependencies?.filter((dep) => dep?.status === 'HEALTHY')
@@ -205,12 +194,12 @@ export const getDirectory = ({
     { path: 'dryrun', label: 'Dry run', enabled: !!dryRun },
     { path: 'revisions', label: 'Revisions', enabled: true },
     { path: SERVICE_PRS_PATH, label: 'Pull requests', enabled: true },
-    {
-      path: 'docs',
-      label: name ? `${capitalize(name)} docs` : 'Docs',
-      enabled: !isEmpty(docs),
-      ...(docs ? { subpaths: docs } : {}),
-    },
+    // {
+    //   path: 'docs',
+    //   label: name ? `${capitalize(name)} docs` : 'Docs',
+    //   enabled: !isEmpty(docs),
+    //   ...(docs ? { subpaths: docs } : {}),
+    // },
     {
       path: 'dependencies',
       label: (
@@ -262,20 +251,19 @@ function ServiceDetailsBase() {
     errorPolicy: 'all',
   })
   const { serviceDeployment } = serviceData || {}
-  const docs = useMemo(
-    () => getDocsData(serviceData?.serviceDeployment?.docs),
-    [serviceData?.serviceDeployment?.docs]
-  )
+  // const docs = useMemo(
+  //   () => getDocsData(serviceData?.serviceDeployment?.docs),
+  //   [serviceData?.serviceDeployment?.docs]
+  // )
 
   const directory = useMemo(
     () =>
       getDirectory({
         serviceDeployment,
-        docs,
         logsEnabled,
         isAdmin,
       }),
-    [docs, logsEnabled, serviceDeployment, isAdmin]
+    [logsEnabled, serviceDeployment, isAdmin]
   )
 
   return (
@@ -316,7 +304,6 @@ function ServiceDetailsBase() {
           <Outlet
             context={
               {
-                docs,
                 service: serviceDeployment,
                 refetch,
                 loading,