feat(new-nav): add deployment logs

apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/deployments.tsx → apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/deployments/index.tsx

@@ -5,7 +5,7 @@ import { ServiceDeploymentList, ServiceDeploymentListSkeleton } from '@qovery/do
 import { Heading, Section } from '@qovery/shared/ui'
 
 export const Route = createFileRoute(
-  '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/deployments'
+  '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/deployments/'
 )({
   component: RouteComponent,
 })

apps/console-v5/src/routes/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/deployments/logs/$executionId.tsx

@@ -0,0 +1,12 @@
+import { createFileRoute } from '@tanstack/react-router'
+import { DeploymentLogs } from '@qovery/domains/service-logs/feature'
+
+export const Route = createFileRoute(
+  '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/deployments/logs/$executionId'
+)({
+  component: RouteComponent,
+})
+
+function RouteComponent() {
+  return <DeploymentLogs />
+}

apps/console-v5/src/routes/_authenticated/organization/route.tsx

@@ -379,6 +379,7 @@ const fullWidthRouteIds: FileRouteTypes['id'][] = [
   '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/monitoring',
   '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/settings',
   '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/service-logs',
+  '/_authenticated/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/deployments/logs/$executionId',
 ]
 
 function useFullWidthLayout(): boolean {

libs/domains/environment-logs/feature/src/lib/environment-pipeline/environment-pipeline.tsx

@@ -11,7 +11,6 @@ import { match } from 'ts-pattern'
 import { useDeploymentHistoryExecutionId, useEnvironment } from '@qovery/domains/environments/feature'
 import { type AnyService } from '@qovery/domains/services/data-access'
 import { ServiceAvatar, useServices } from '@qovery/domains/services/feature'
-import { DEPLOYMENT_LOGS_VERSION_URL, ENVIRONMENT_LOGS_URL } from '@qovery/shared/routes'
 import {
   Icon,
   Indicator,
@@ -172,16 +171,14 @@ function PipelineContent({
                         return (
                           <Link
                             key={service?.id}
-                            // TODO new-nav : Route not yet created
-                            // @ts-expect-error-next-line
-                            to={
-                              ENVIRONMENT_LOGS_URL(
-                                environment.organization.id,
-                                environment.project.id,
-                                environment.id
-                                // ) + DEPLOYMENT_LOGS_VERSION_URL(service.id, executionId ?? '')
-                              ) + DEPLOYMENT_LOGS_VERSION_URL(service.id, deploymentId ?? '')
-                            }
+                            to="/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/deployments/logs/$executionId"
+                            params={{
+                              organizationId: environment.organization.id,
+                              projectId: environment.project.id,
+                              environmentId: environment.id,
+                              serviceId: service.id,
+                              executionId: deploymentHistory?.identifier.execution_id ?? '',
+                            }}
                             className={clsx(
                               'flex w-full items-center gap-2.5 rounded border border-neutral bg-surface-neutral px-2.5 py-2 text-neutral hover:border-neutral-component hover:bg-surface-neutral-subtle hover:text-neutral',
                               {

libs/domains/environments/feature/src/lib/hooks/use-deployment-stages/use-deployment-stages.ts

@@ -3,9 +3,10 @@ import { queries } from '@qovery/state/util-queries'
 
 export interface UseDeploymentStagesProps {
   environmentId?: string
+  suspense?: boolean
 }
 
-export function useDeploymentStages({ environmentId }: UseDeploymentStagesProps) {
+export function useDeploymentStages({ environmentId, suspense = false }: UseDeploymentStagesProps) {
   return useQuery({
     // eslint-disable-next-line @typescript-eslint/no-extra-non-null-assertion
     ...queries.environments.deploymentStages(environmentId!!),
@@ -14,6 +15,7 @@ export function useDeploymentStages({ environmentId }: UseDeploymentStagesProps)
     refetchOnWindowFocus: false,
     refetchOnReconnect: false,
     staleTime: Infinity,
+    suspense,
   })
 }
 

libs/domains/service-logs/feature/src/index.ts

@@ -4,3 +4,5 @@ export * from './lib/service-stage-ids-context/service-stage-ids-context'
 export * from './lib/breadcrumb-deployment-history/breadcrumb-deployment-history'
 export * from './lib/breadcrumb-deployment-logs/breadcrumb-deployment-logs'
 export * from './lib/sidebar-pod-statuses/sidebar-pod-statuses'
+export * from './lib/deployment-logs/deployment-logs'
+export * from './lib/deployment-logs/deployment-logs-content/deployment-logs-content'

libs/pages/logs/environment/src/lib/feature/deployment-logs-feature/deployment-logs-feature.spec.tsx → libs/domains/service-logs/feature/src/lib/deployment-logs/deployment-logs-content/deployment-logs-content.spec.tsx

@@ -7,9 +7,9 @@ import { Route, Routes } from 'react-router-dom'
 import { environmentFactoryMock } from '@qovery/shared/factories'
 import { renderWithProviders } from '@qovery/shared/util-tests'
 import DeploymentLogsFeature, {
-  type DeploymentLogsFeatureProps,
+  type DeploymentLogsContentProps,
   getServiceStatusesById,
-} from './deployment-logs-feature'
+} from './deployment-logs-content'
 
 const services: DeploymentStageWithServicesStatuses[] = [
   {
@@ -43,7 +43,7 @@ const services: DeploymentStageWithServicesStatuses[] = [
 ]
 
 describe('DeploymentLogsFeature', () => {
-  const props: DeploymentLogsFeatureProps = {
+  const props: DeploymentLogsContentProps = {
     environment: environmentFactoryMock(1)[0],
     statusStages: services,
   }

libs/pages/logs/environment/src/lib/feature/deployment-logs-feature/deployment-logs-feature.tsx → libs/domains/service-logs/feature/src/lib/deployment-logs/deployment-logs-content/deployment-logs-content.tsx

@@ -1,3 +1,4 @@
+import { useNavigate, useParams } from '@tanstack/react-router'
 import {
   type DeploymentStageWithServicesStatuses,
   type Environment,
@@ -6,21 +7,14 @@ import {
   type Stage,
   type Status,
 } from 'qovery-typescript-axios'
-import { memo } from 'react'
-import { useNavigate, useParams } from 'react-router-dom'
 import { match } from 'ts-pattern'
 import { useDeploymentHistory } from '@qovery/domains/environments/feature'
-import { ListDeploymentLogs, SidebarPodStatuses } from '@qovery/domains/service-logs/feature'
 import { useService } from '@qovery/domains/services/feature'
-import { DEPLOYMENT_LOGS_VERSION_URL, ENVIRONMENT_LOGS_URL } from '@qovery/shared/routes'
 import { Banner } from '@qovery/shared/ui'
 import { useDocumentTitle } from '@qovery/shared/util-hooks'
-import { MetricsWebSocketListener } from '@qovery/shared/util-web-sockets'
+import { ListDeploymentLogs } from '../../list-deployment-logs/list-deployment-logs'
 
-// XXX: Prevent web-socket invalidations when re-rendering
-const WebSocketListenerMemo = memo(MetricsWebSocketListener)
-
-export interface DeploymentLogsFeatureProps {
+export interface DeploymentLogsContentProps {
   environment: Environment
   deploymentStages?: DeploymentStageWithServicesStatuses[]
   environmentStatus?: EnvironmentStatus
@@ -105,17 +99,24 @@ export function getStageFromServiceId(
   return undefined
 }
 
-export function DeploymentLogsFeature({
+export function DeploymentLogsContent({
   environment,
   environmentStatus,
   deploymentStages,
   preCheckStage,
-}: DeploymentLogsFeatureProps) {
-  const { serviceId = '', versionId } = useParams()
+}: DeploymentLogsContentProps) {
+  const { serviceId = '', executionId = '' } = useParams({ strict: false })
   const navigate = useNavigate()
 
-  const { data: service, isFetched: isFetchedService } = useService({ environmentId: environment.id, serviceId })
-  const { data: environmentDeploymentHistory = [] } = useDeploymentHistory({ environmentId: environment.id })
+  const { data: service, isFetched: isFetchedService } = useService({
+    environmentId: environment.id,
+    serviceId,
+    suspense: true,
+  })
+  const { data: environmentDeploymentHistory = [] } = useDeploymentHistory({
+    environmentId: environment.id,
+    suspense: true,
+  })
 
   useDocumentTitle(`Deployment logs - ${service?.name ?? 'Loading...'}`)
 
@@ -139,7 +140,7 @@ export function DeploymentLogsFeature({
   const lastDeploymentExecutionId = latestDeployment?.identifier?.execution_id ?? ''
 
   const showBannerNew =
-    versionId !== lastDeploymentExecutionId &&
+    executionId !== lastDeploymentExecutionId &&
     match(lastDeploymentStatus)
       .with(
         'DEPLOYING',
@@ -163,42 +164,31 @@ export function DeploymentLogsFeature({
           buttonLabel="See latest"
           buttonIconRight="arrow-right"
           onClickButton={() =>
-            navigate(
-              ENVIRONMENT_LOGS_URL(environment.organization.id, environment.project.id, environment.id) +
-                DEPLOYMENT_LOGS_VERSION_URL(serviceId, lastDeploymentExecutionId)
-            )
+            navigate({
+              to: '/organization/$organizationId/project/$projectId/environment/$environmentId/service/$serviceId/deployments/logs/$executionId',
+              params: {
+                organizationId: environment.organization.id,
+                projectId: environment.project.id,
+                environmentId: environment.id,
+                serviceId,
+                executionId: lastDeploymentExecutionId,
+              },
+              replace: true,
+            })
           }
         >
           A new deployment has been initiated
         </Banner>
       )}
-      <div className="h-full w-full bg-neutral-900">
-        <SidebarPodStatuses
-          organizationId={environment.organization.id}
-          projectId={environment.project.id}
-          service={service}
-        >
-          <ListDeploymentLogs
-            environment={environment}
-            serviceStatus={serviceStatus}
-            environmentStatus={environmentStatus}
-            stage={stageFromServiceId}
-            preCheckStage={preCheckStage}
-          />
-        </SidebarPodStatuses>
-        {service && environment && (
-          <WebSocketListenerMemo
-            organizationId={environment.organization.id}
-            clusterId={environment.cluster_id}
-            projectId={environment.project.id}
-            environmentId={environment.id}
-            serviceId={service.id}
-            serviceType={service.serviceType}
-          />
-        )}
-      </div>
+      <ListDeploymentLogs
+        environment={environment}
+        serviceStatus={serviceStatus}
+        environmentStatus={environmentStatus}
+        stage={stageFromServiceId}
+        preCheckStage={preCheckStage}
+      />
     </>
   )
 }
 
-export default DeploymentLogsFeature
+export default DeploymentLogsContent

libs/domains/service-logs/feature/src/lib/deployment-logs-placeholder/deployment-logs-placeholder.tsx → libs/domains/service-logs/feature/src/lib/deployment-logs/deployment-logs-placeholder/deployment-logs-placeholder.tsx

@@ -52,8 +52,8 @@ export function LoaderPlaceholder({
     <div className="flex w-full flex-col items-center justify-center gap-5 text-center">
       <LoaderDots />
       <div className="flex flex-col gap-3">
-        <p className="text-neutral-300">{title}</p>
-        <span className="text-sm text-neutral-350">{description}</span>
+        <p className="text-neutral">{title}</p>
+        <span className="text-neutral-subtitle text-sm">{description}</span>
       </div>
     </div>
   )
@@ -213,8 +213,8 @@ export function DeploymentLogsPlaceholder({
           </defs>
         </svg>
         <div className="flex flex-col gap-3">
-          <p className="text-neutral-300">Deployment has been canceled.</p>
-          <span className="text-sm text-neutral-350">No logs to display.</span>
+          <p className="text-neutral">Deployment has been canceled.</p>
+          <span className="text-sm text-neutral-subtle">No logs to display.</span>
         </div>
       </div>
     )
@@ -225,7 +225,7 @@ export function DeploymentLogsPlaceholder({
     return (
       <div className="flex flex-col items-center justify-center gap-4 text-center">
         <ErrorIcon />
-        <span className="text-neutral-300">An error occurred during the precheck step.</span>
+        <span className="text-neutral">An error occurred during the precheck step.</span>
         {/* TODO new-nav : Route not yet created */}
         {/*<Link
           className="gap-1.5"
@@ -253,7 +253,7 @@ export function DeploymentLogsPlaceholder({
     return (
       <div className="flex flex-col items-center justify-center gap-4 text-center">
         <ErrorIcon />
-        <span className="text-neutral-300">An error occurred during deployment of another service.</span>
+        <span className="text-neutral">An error occurred during deployment of another service.</span>
         {/* TODO new-nav : Route not yet created */}
         {/*<Link
           className="gap-1.5"