dify/web/features/deployments/list/state/index.ts

'use client'

import type { ReactNode } from 'react'
import { keepPreviousData } from '@tanstack/react-query'
import { atom } from 'jotai'
import { atomWithInfiniteQuery, atomWithQuery } from 'jotai-tanstack-query'
import { selectAtom, useHydrateAtoms } from 'jotai/utils'
import { parseAsString, useQueryState } from 'nuqs'
import { consoleQuery } from '@/service/client'
import { deploymentStatusPollingInterval } from '../../shared/domain/runtime-status'

const DEPLOYMENTS_LIST_PAGE_SIZE = 100

export const envFilterQueryState = parseAsString.withOptions({ history: 'push' })
export const keywordsQueryState = parseAsString.withDefault('').withOptions({ history: 'push' })

// Mirrors nuqs URL state. DeploymentsListStateBoundary force-hydrates these
// atoms on render so query atoms can read URL filters through Jotai.
const deploymentsListKeywordsAtom = atom('')
const deploymentsListEnvironmentIdAtom = atom<string | null>(null)

export type DeploymentsListEnvironmentFilterOption = {
  kind: 'all' | 'environment'
  value: string | null
  displayName?: string
}

export function DeploymentsListStateBoundary({ children }: { children: ReactNode }) {
  const [envFilter] = useQueryState('env', envFilterQueryState)
  const [keywords] = useQueryState('keywords', keywordsQueryState)

  useHydrateAtoms(
    [
      [deploymentsListEnvironmentIdAtom, envFilter],
      [deploymentsListKeywordsAtom, keywords],
    ] as const,
    { dangerouslyForceHydrate: true },
  )

  return children
}

const deploymentsListEnvironmentsQueryAtom = atomWithQuery(() => {
  return consoleQuery.enterprise.environmentService.listEnvironments.queryOptions({
    input: {
      query: {
        // The filter lists every deployable environment; environment count is
        // capped well below the 100-per-page maximum.
        pageNumber: 1,
        resultsPerPage: 100,
      },
    },
  })
})

const deploymentsListEnvironmentsDataAtom = selectAtom(
  deploymentsListEnvironmentsQueryAtom,
  (query) => query.data,
)

export const deploymentsListEnvironmentFilterOptionsAtom = atom(
  (get): DeploymentsListEnvironmentFilterOption[] => {
    const environments = get(deploymentsListEnvironmentsDataAtom)?.environments ?? []

    return [
      {
        kind: 'all',
        value: null,
      },
      ...environments.map((environment) => ({
        kind: 'environment' as const,
        value: environment.id,
        displayName: environment.displayName,
      })),
    ]
  },
)

export const deploymentsListSelectedEnvironmentFilterOptionAtom = atom(
  (get): DeploymentsListEnvironmentFilterOption => {
    const envFilter = get(deploymentsListEnvironmentIdAtom)
    const options = get(deploymentsListEnvironmentFilterOptionsAtom)
    const allOption = options[0] ?? { kind: 'all' as const, value: null }

    return (
      options.find((option) => option.value === envFilter) ??
      (envFilter
        ? {
            kind: 'environment',
            value: envFilter,
            displayName: envFilter,
          }
        : allOption)
    )
  },
)

const deploymentsListQueryAtom = atomWithInfiniteQuery((get) => {
  const queryKeywords = get(deploymentsListKeywordsAtom).trim()
  const queryEnvironmentId = get(deploymentsListEnvironmentIdAtom) ?? undefined

  return consoleQuery.enterprise.appInstanceService.listAppInstanceSummaries.infiniteOptions({
    input: (pageParam) => ({
      query: {
        pageNumber: Number(pageParam),
        resultsPerPage: DEPLOYMENTS_LIST_PAGE_SIZE,
        ...(queryEnvironmentId ? { environmentId: queryEnvironmentId } : {}),
        ...(queryKeywords ? { displayName: queryKeywords } : {}),
      },
    }),
    getNextPageParam: (lastPage) => {
      const currentPage = lastPage.pagination?.currentPage ?? 1
      const totalPages = lastPage.pagination?.totalPages ?? 1

      return currentPage < totalPages ? currentPage + 1 : undefined
    },
    initialPageParam: 1,
    placeholderData: keepPreviousData,
    refetchInterval: (query) => {
      const rows =
        query.state.data?.pages.flatMap((page) =>
          page.appInstanceSummaries.flatMap((summary) => summary.environmentDeployments),
        ) ?? []

      return deploymentStatusPollingInterval(rows)
    },
  })
})

const deploymentsListDataAtom = selectAtom(deploymentsListQueryAtom, (query) => query.data)
export const deploymentsListErrorAtom = selectAtom(deploymentsListQueryAtom, (query) => query.error)
export const deploymentsListFetchNextPageAtom = selectAtom(
  deploymentsListQueryAtom,
  (query) => query.fetchNextPage,
)
export const deploymentsListHasNextPageAtom = selectAtom(
  deploymentsListQueryAtom,
  (query) => query.hasNextPage,
)
export const deploymentsListIsFetchingAtom = selectAtom(
  deploymentsListQueryAtom,
  (query) => query.isFetching,
)
export const deploymentsListIsFetchingNextPageAtom = selectAtom(
  deploymentsListQueryAtom,
  (query) => query.isFetchingNextPage,
)
export const deploymentsListIsLoadingAtom = selectAtom(
  deploymentsListQueryAtom,
  (query) => query.isLoading,
)
const deploymentsListIsErrorAtom = selectAtom(deploymentsListQueryAtom, (query) => query.isError)

export const deploymentsListRowsAtom = atom((get) => {
  return get(deploymentsListDataAtom)?.pages.flatMap((page) => page.appInstanceSummaries) ?? []
})

export const deploymentsListShowSkeletonAtom = atom((get) => {
  const pages = get(deploymentsListDataAtom)?.pages ?? []

  return (
    get(deploymentsListIsLoadingAtom) || (get(deploymentsListIsFetchingAtom) && pages.length === 0)
  )
})

export const deploymentsListShowEmptyStateAtom = atom((get) => {
  return (
    !get(deploymentsListShowSkeletonAtom) &&
    !get(deploymentsListIsErrorAtom) &&
    get(deploymentsListRowsAtom).length === 0
  )
})

export const deploymentsListShowErrorStateAtom = atom((get) => {
  return !get(deploymentsListShowSkeletonAtom) && get(deploymentsListIsErrorAtom)
})

export const deploymentsListHasFilterAtom = atom((get) => {
  return Boolean(get(deploymentsListKeywordsAtom).trim() || get(deploymentsListEnvironmentIdAtom))
})