-
{t('detail.envCount', { count: appDeployments.length })}
+
{t('detail.envCount', { count: envCount })}
{deployingCount > 0 && (
<>
·
diff --git a/web/features/deployments/detail/overview-tab.tsx b/web/features/deployments/detail/overview-tab.tsx
index 4401d50ea0..cb9695ac04 100644
--- a/web/features/deployments/detail/overview-tab.tsx
+++ b/web/features/deployments/detail/overview-tab.tsx
@@ -2,16 +2,24 @@
import type { FC, ReactNode } from 'react'
import { Button } from '@langgenius/dify-ui/button'
import { cn } from '@langgenius/dify-ui/cn'
+import { useQuery } from '@tanstack/react-query'
import { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import { getAppModeLabel } from '@/app/components/app-sidebar/app-info/app-mode-labels'
import { useRouter } from '@/next/navigation'
+import { consoleQuery } from '@/service/client'
import { StatusBadge } from '../components/status-badge'
-import { toAppInfoFromOverview } from '../data'
-import { useCachedDeploymentAppData } from '../hooks/use-deployment-data'
-import { useSourceApps } from '../hooks/use-source-apps'
+import {
+ SOURCE_APPS_PAGE_SIZE,
+} from '../data'
import { useDeploymentsStore } from '../store'
-import { releaseLabel, webappUrl } from '../utils'
+import {
+ releaseLabel,
+ sourceAppMapFromApps,
+ sourceAppsFromList,
+ toAppInfoFromOverview,
+ webappUrl,
+} from '../utils'
type OverviewTabProps = {
instanceId: string
@@ -92,10 +100,24 @@ const OverviewTab: FC
= ({ instanceId }) => {
const { t } = useTranslation('deployments')
const { t: tCommon } = useTranslation()
const router = useRouter()
- const { data: appData } = useCachedDeploymentAppData(instanceId)
+ const input = { params: { appInstanceId: instanceId } }
+ const { data: overview } = useQuery(consoleQuery.deployments.overview.queryOptions({
+ input,
+ }))
+ const { data: accessConfig } = useQuery(consoleQuery.deployments.accessConfig.queryOptions({
+ input,
+ }))
+ const listQuery = useQuery(consoleQuery.deployments.list.queryOptions({
+ input: {
+ query: {
+ pageNumber: 1,
+ resultsPerPage: SOURCE_APPS_PAGE_SIZE,
+ },
+ },
+ }))
const openDeployDrawer = useDeploymentsStore(state => state.openDeployDrawer)
- const { appMap } = useSourceApps()
- const overview = appData?.overview
+ const sourceApps = useMemo(() => sourceAppsFromList(listQuery.data), [listQuery.data])
+ const appMap = useMemo(() => sourceAppMapFromApps(sourceApps), [sourceApps])
const app = toAppInfoFromOverview(overview?.instance) ?? appMap.get(instanceId)
const overviewApp = overview?.instance
const deployments = useMemo(
@@ -113,7 +135,7 @@ const OverviewTab: FC = ({ instanceId }) => {
const appModeLabel = getAppModeLabel(overviewApp?.mode ?? app.mode, tCommon)
const webappAccessUrl = webappUrl(overview?.access?.webappUrl)
const cliUrl = overview?.access?.cliUrl
- const apiKeysCount = overview?.access?.apiKeyCount ?? appData?.accessConfig.developerApi?.apiKeys?.length ?? 0
+ const apiKeysCount = overview?.access?.apiKeyCount ?? accessConfig?.developerApi?.apiKeys?.length ?? 0
return (
diff --git a/web/features/deployments/detail/settings-tab.tsx b/web/features/deployments/detail/settings-tab.tsx
index 8764856220..0d9cc8466d 100644
--- a/web/features/deployments/detail/settings-tab.tsx
+++ b/web/features/deployments/detail/settings-tab.tsx
@@ -14,18 +14,24 @@ import {
import { Button } from '@langgenius/dify-ui/button'
import { toast } from '@langgenius/dify-ui/toast'
import { useQuery } from '@tanstack/react-query'
-import { useState } from 'react'
+import { useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
import { useRouter } from '@/next/navigation'
import { consoleQuery } from '@/service/client'
-import { toAppInfoFromOverview } from '../data'
-import { useCachedDeploymentAppData } from '../hooks/use-deployment-data'
+import {
+ DEPLOYMENT_PAGE_SIZE,
+ SOURCE_APPS_PAGE_SIZE,
+} from '../data'
import {
useDeleteDeploymentInstance,
useUpdateDeploymentInstance,
} from '../hooks/use-deployment-mutations'
-import { useSourceApps } from '../hooks/use-source-apps'
-import { deployedRows } from '../utils'
+import {
+ deployedRows,
+ sourceAppMapFromApps,
+ sourceAppsFromList,
+ toAppInfoFromOverview,
+} from '../utils'
type SettingsTabProps = {
instanceId: string
@@ -181,24 +187,40 @@ const SettingsForm: FC
= ({ app, settings, hasDeployments, on
const SettingsTab: FC = ({ instanceId }) => {
const router = useRouter()
- const { data: appData } = useCachedDeploymentAppData(instanceId)
const updateInstance = useUpdateDeploymentInstance()
const deleteInstance = useDeleteDeploymentInstance()
- const { appMap } = useSourceApps()
- const app = toAppInfoFromOverview(appData?.overview.instance) ?? appMap.get(instanceId)
- const settingsQuery = useQuery(consoleQuery.deployments.settings.queryOptions({
+ const appInput = { params: { appInstanceId: instanceId } }
+ const listQuery = useQuery(consoleQuery.deployments.list.queryOptions({
input: {
- params: {
- appInstanceId: instanceId,
+ query: {
+ pageNumber: 1,
+ resultsPerPage: SOURCE_APPS_PAGE_SIZE,
},
},
- staleTime: 30 * 1000,
+ }))
+ const { data: overview } = useQuery(consoleQuery.deployments.overview.queryOptions({
+ input: appInput,
+ }))
+ const { data: environmentDeployments } = useQuery(consoleQuery.deployments.environmentDeployments.queryOptions({
+ input: {
+ ...appInput,
+ query: {
+ pageNumber: 1,
+ resultsPerPage: DEPLOYMENT_PAGE_SIZE,
+ },
+ },
+ }))
+ const sourceApps = useMemo(() => sourceAppsFromList(listQuery.data), [listQuery.data])
+ const appMap = useMemo(() => sourceAppMapFromApps(sourceApps), [sourceApps])
+ const app = toAppInfoFromOverview(overview?.instance) ?? appMap.get(instanceId)
+ const settingsQuery = useQuery(consoleQuery.deployments.settings.queryOptions({
+ input: appInput,
}))
if (!app)
return null
- const hasDeployments = deployedRows(appData?.environmentDeployments.data).length > 0
+ const hasDeployments = deployedRows(environmentDeployments?.data).length > 0
const formKey = `${app.id}-${settingsQuery.data?.name ?? app.name}-${settingsQuery.data?.description ?? app.description ?? ''}`
return (
diff --git a/web/features/deployments/detail/versions-tab.tsx b/web/features/deployments/detail/versions-tab.tsx
index 6b9d832a9b..db9b64e393 100644
--- a/web/features/deployments/detail/versions-tab.tsx
+++ b/web/features/deployments/detail/versions-tab.tsx
@@ -2,9 +2,11 @@
import type { FC } from 'react'
import { cn } from '@langgenius/dify-ui/cn'
import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
+import { useQuery } from '@tanstack/react-query'
import { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
-import { useCachedDeploymentAppData } from '../hooks/use-deployment-data'
+import { consoleQuery } from '@/service/client'
+import { DEPLOYMENT_PAGE_SIZE } from '../data'
import {
deployedRows,
formatDate,
@@ -23,14 +25,29 @@ type VersionsTabProps = {
const VersionsTab: FC = ({ instanceId: appId }) => {
const { t } = useTranslation('deployments')
- const { data: appData } = useCachedDeploymentAppData(appId)
+ const query = {
+ pageNumber: 1,
+ resultsPerPage: DEPLOYMENT_PAGE_SIZE,
+ }
+ const { data: releaseHistory } = useQuery(consoleQuery.deployments.releaseHistory.queryOptions({
+ input: {
+ params: { appInstanceId: appId },
+ query,
+ },
+ }))
+ const { data: environmentDeployments } = useQuery(consoleQuery.deployments.environmentDeployments.queryOptions({
+ input: {
+ params: { appInstanceId: appId },
+ query,
+ },
+ }))
const releaseRows = useMemo(
- () => appData?.releaseHistory.data?.filter(row => (row.release ?? row).id) ?? [],
- [appData?.releaseHistory.data],
+ () => releaseHistory?.data?.filter(row => (row.release ?? row).id) ?? [],
+ [releaseHistory?.data],
)
const deploymentRows = useMemo(
- () => deployedRows(appData?.environmentDeployments.data),
- [appData?.environmentDeployments.data],
+ () => deployedRows(environmentDeployments?.data),
+ [environmentDeployments?.data],
)
return (
diff --git a/web/features/deployments/detail/versions-tab/deploy-release-menu.tsx b/web/features/deployments/detail/versions-tab/deploy-release-menu.tsx
index 2d2a94e469..e06f6ea3db 100644
--- a/web/features/deployments/detail/versions-tab/deploy-release-menu.tsx
+++ b/web/features/deployments/detail/versions-tab/deploy-release-menu.tsx
@@ -8,10 +8,14 @@ import {
DropdownMenuItem,
DropdownMenuTrigger,
} from '@langgenius/dify-ui/dropdown-menu'
-import { useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
+import { useMemo, useState } from 'react'
import { useTranslation } from 'react-i18next'
-import { useCachedDeploymentAppData } from '../../hooks/use-deployment-data'
-import { useSourceApps } from '../../hooks/use-source-apps'
+import { consoleQuery } from '@/service/client'
+import {
+ DEPLOYMENT_PAGE_SIZE,
+ SOURCE_APPS_PAGE_SIZE,
+} from '../../data'
import { useDeploymentsStore } from '../../store'
import {
activeRelease,
@@ -20,6 +24,7 @@ import {
deploymentStatus,
environmentId,
environmentName,
+ environmentOptionsFromList,
} from '../../utils'
type DeployReleaseMenuProps = {
@@ -29,14 +34,32 @@ type DeployReleaseMenuProps = {
export const DeployReleaseMenu: FC = ({ appId, releaseId }) => {
const { t } = useTranslation('deployments')
- const { data: appData } = useCachedDeploymentAppData(appId)
const openDeployDrawer = useDeploymentsStore(state => state.openDeployDrawer)
const openRollbackModal = useDeploymentsStore(state => state.openRollbackModal)
const [open, setOpen] = useState(false)
- const { environmentOptions } = useSourceApps({ enabled: open })
+ const listQuery = useQuery(consoleQuery.deployments.list.queryOptions({
+ input: {
+ query: {
+ pageNumber: 1,
+ resultsPerPage: SOURCE_APPS_PAGE_SIZE,
+ },
+ },
+ enabled: open,
+ }))
+ const { data: environmentDeployments } = useQuery(consoleQuery.deployments.environmentDeployments.queryOptions({
+ input: {
+ params: { appInstanceId: appId },
+ query: {
+ pageNumber: 1,
+ resultsPerPage: DEPLOYMENT_PAGE_SIZE,
+ },
+ },
+ enabled: open,
+ }))
+ const environmentOptions = useMemo(() => environmentOptionsFromList(listQuery.data), [listQuery.data])
const environments = environmentOptions.filter(env => env.id)
- const deploymentRows = deployedRows(appData?.environmentDeployments.data)
+ const deploymentRows = deployedRows(environmentDeployments?.data)
return (
diff --git a/web/features/deployments/hooks/use-deployment-data.ts b/web/features/deployments/hooks/use-deployment-data.ts
deleted file mode 100644
index 6edc4ff9d7..0000000000
--- a/web/features/deployments/hooks/use-deployment-data.ts
+++ /dev/null
@@ -1,41 +0,0 @@
-'use client'
-
-import { useQuery } from '@tanstack/react-query'
-import { useMemo } from 'react'
-import {
- deploymentAppDataQueryOptions,
- toAppInfoFromOverview,
-} from '../data'
-
-type UseDeploymentDataOptions = {
- enabled?: boolean
-}
-
-export function useDeploymentAppData(appId?: string, options: UseDeploymentDataOptions = {}) {
- const { enabled = true } = options
-
- return useQuery({
- ...deploymentAppDataQueryOptions(appId ?? ''),
- enabled: enabled && Boolean(appId),
- })
-}
-
-export function useCachedDeploymentAppData(appId?: string) {
- return useQuery({
- ...deploymentAppDataQueryOptions(appId ?? ''),
- enabled: false,
- })
-}
-
-export function useDeploymentAppInfo(appId?: string, options: UseDeploymentDataOptions = {}) {
- const query = useDeploymentAppData(appId, options)
- const app = useMemo(
- () => toAppInfoFromOverview(query.data?.overview.instance),
- [query.data?.overview.instance],
- )
-
- return {
- ...query,
- data: app,
- }
-}
diff --git a/web/features/deployments/hooks/use-deployment-mutations.ts b/web/features/deployments/hooks/use-deployment-mutations.ts
index 90d5625939..3559259cfe 100644
--- a/web/features/deployments/hooks/use-deployment-mutations.ts
+++ b/web/features/deployments/hooks/use-deployment-mutations.ts
@@ -1,35 +1,34 @@
'use client'
import type {
- CreateDeploymentParams,
- CreateInstanceParams,
- DeploymentAppData,
- UpdateInstanceParams,
-} from '../data'
-import type { AccessSubject, ConsoleReleaseSummary } from '@/contract/console/deployments'
+ AccessSubject,
+ ConsoleReleaseSummary,
+} from '@/contract/console/deployments'
import { useMutation, useQueryClient } from '@tanstack/react-query'
-import { consoleQuery } from '@/service/client'
-import {
- cancelDeployment,
- createApiKey,
- createAppInstance,
- createDeployment,
- deleteApiKey,
- deleteAppInstance,
- deploymentAppDataQueryKey,
- patchAccessChannel,
- patchDeveloperAPI,
- refreshDeploymentAppDataWhenReady,
- undeployEnvironment,
- updateAppInstance,
- updateEnvironmentAccessPolicy,
- waitForAppInstanceInDeploymentList,
-} from '../data'
+import { consoleClient, consoleQuery } from '@/service/client'
+import { DEPLOYMENT_PAGE_SIZE } from '../data'
export type CreateDeploymentInstanceResult = {
appInstanceId: string
initialRelease?: ConsoleReleaseSummary
- appData?: DeploymentAppData
+}
+
+type CreateDeploymentParams = {
+ appId: string
+ environmentId: string
+ releaseId?: string
+ releaseNote?: string
+}
+
+type CreateInstanceParams = {
+ sourceAppId: string
+ name: string
+ description?: string
+}
+
+type UpdateInstanceParams = {
+ name: string
+ description?: string
}
type UpdateDeploymentInstanceParams = {
@@ -45,9 +44,12 @@ type UndeployDeploymentParams = {
type GenerateApiKeyParams = {
appId: string
environmentId: string
+ name: string
}
-type RevokeApiKeyParams = GenerateApiKeyParams & {
+type RevokeApiKeyParams = {
+ appId: string
+ environmentId: string
apiKeyId: string
}
@@ -64,22 +66,9 @@ type SetEnvironmentAccessPolicyParams = {
subjects: AccessSubject[]
}
-const createApiKeyLabel = (
- appData: DeploymentAppData | undefined,
- environmentId: string,
-) => {
- const existingCount = appData?.accessConfig.developerApi?.apiKeys?.filter(key =>
- (key.environmentId ?? key.environment?.id) === environmentId,
- ).length ?? 0
- const environmentName = appData
- ?.environmentDeployments
- .data
- ?.find(row => row.environment?.id === environmentId)
- ?.environment
- ?.name ?? 'env'
+const DEPLOYMENT_READINESS_RETRY_DELAYS = [0, 300, 700, 1200]
- return `${environmentName}-key-${String(existingCount + 1).padStart(3, '0')}`
-}
+const wait = (delay: number) => new Promise(resolve => setTimeout(resolve, delay))
export const useCreateDeploymentInstance = () => {
const queryClient = useQueryClient()
@@ -87,37 +76,39 @@ export const useCreateDeploymentInstance = () => {
return useMutation({
mutationKey: consoleQuery.deployments.createInstance.mutationKey(),
mutationFn: async (params: CreateInstanceParams): Promise => {
- const response = await createAppInstance(params)
+ const response = await consoleClient.deployments.createInstance({
+ body: {
+ sourceAppId: params.sourceAppId,
+ name: params.name,
+ description: params.description,
+ },
+ })
if (!response.appInstanceId)
throw new Error('Create app instance did not return an appInstanceId.')
- const [appData] = await Promise.all([
- refreshDeploymentAppDataWhenReady(response.appInstanceId).catch(() => undefined),
- waitForAppInstanceInDeploymentList(response.appInstanceId).catch(() => undefined),
- ])
+ for (const delay of DEPLOYMENT_READINESS_RETRY_DELAYS) {
+ if (delay > 0)
+ await wait(delay)
+
+ const listResponse = await consoleClient.deployments.list({
+ query: {
+ pageNumber: 1,
+ resultsPerPage: DEPLOYMENT_PAGE_SIZE,
+ },
+ }).catch(() => undefined)
+ if (listResponse?.data?.some(app => app.id === response.appInstanceId))
+ break
+ }
return {
appInstanceId: response.appInstanceId,
initialRelease: response.initialRelease,
- appData,
}
},
- onSuccess: async (result) => {
- if (result.appData) {
- queryClient.setQueryData(
- deploymentAppDataQueryKey(result.appInstanceId),
- result.appData,
- )
- }
-
- await Promise.all([
- queryClient.invalidateQueries({
- queryKey: consoleQuery.deployments.list.key(),
- }),
- queryClient.invalidateQueries({
- queryKey: deploymentAppDataQueryKey(result.appInstanceId),
- }),
- ])
+ onSuccess: async () => {
+ await queryClient.invalidateQueries({
+ queryKey: consoleQuery.deployments.key(),
+ })
},
})
}
@@ -128,25 +119,19 @@ export const useUpdateDeploymentInstance = () => {
return useMutation({
mutationKey: consoleQuery.deployments.updateInstance.mutationKey(),
mutationFn: ({ appId, ...patch }: UpdateDeploymentInstanceParams) =>
- updateAppInstance(appId, patch),
- onSuccess: async (_data, variables) => {
- await Promise.all([
- queryClient.invalidateQueries({
- queryKey: consoleQuery.deployments.list.key(),
- }),
- queryClient.invalidateQueries({
- queryKey: deploymentAppDataQueryKey(variables.appId),
- }),
- queryClient.invalidateQueries({
- queryKey: consoleQuery.deployments.settings.queryKey({
- input: {
- params: {
- appInstanceId: variables.appId,
- },
- },
- }),
- }),
- ])
+ consoleClient.deployments.updateInstance({
+ params: {
+ appInstanceId: appId,
+ },
+ body: {
+ name: patch.name,
+ description: patch.description,
+ },
+ }),
+ onSuccess: async () => {
+ await queryClient.invalidateQueries({
+ queryKey: consoleQuery.deployments.key(),
+ })
},
})
}
@@ -156,22 +141,14 @@ export const useDeleteDeploymentInstance = () => {
return useMutation({
mutationKey: consoleQuery.deployments.deleteInstance.mutationKey(),
- mutationFn: (appId: string) => deleteAppInstance(appId),
- onSuccess: async (_data, appId) => {
- queryClient.removeQueries({
- queryKey: deploymentAppDataQueryKey(appId),
- })
- queryClient.removeQueries({
- queryKey: consoleQuery.deployments.settings.queryKey({
- input: {
- params: {
- appInstanceId: appId,
- },
- },
- }),
- })
+ mutationFn: (appId: string) => consoleClient.deployments.deleteInstance({
+ params: {
+ appInstanceId: appId,
+ },
+ }),
+ onSuccess: async () => {
await queryClient.invalidateQueries({
- queryKey: consoleQuery.deployments.list.key(),
+ queryKey: consoleQuery.deployments.key(),
})
},
})
@@ -182,16 +159,55 @@ export const useStartDeployment = () => {
return useMutation({
mutationKey: consoleQuery.deployments.createDeployment.mutationKey(),
- mutationFn: (params: CreateDeploymentParams) => createDeployment(params),
- onSuccess: async (_data, variables) => {
- await Promise.all([
- queryClient.invalidateQueries({
- queryKey: consoleQuery.deployments.list.key(),
- }),
- queryClient.invalidateQueries({
- queryKey: deploymentAppDataQueryKey(variables.appId),
- }),
- ])
+ mutationFn: async ({
+ appId,
+ environmentId,
+ releaseId,
+ releaseNote,
+ }: CreateDeploymentParams) => {
+ let targetReleaseId = releaseId
+ await consoleClient.deployments.previewRelease({
+ params: {
+ appInstanceId: appId,
+ },
+ body: {
+ releaseId: targetReleaseId,
+ },
+ })
+
+ if (!targetReleaseId) {
+ const trimmedReleaseNote = releaseNote?.trim()
+ const response = await consoleClient.deployments.createRelease({
+ params: {
+ appInstanceId: appId,
+ },
+ body: {
+ name: trimmedReleaseNote || 'Release',
+ description: trimmedReleaseNote || undefined,
+ },
+ })
+ if (!response.release)
+ throw new Error('Create release did not return a release.')
+ targetReleaseId = response.release.id
+ }
+
+ if (!targetReleaseId)
+ throw new Error('Failed to create a deployable release.')
+
+ return consoleClient.deployments.createDeployment({
+ params: {
+ appInstanceId: appId,
+ },
+ body: {
+ environmentId,
+ releaseId: targetReleaseId,
+ },
+ })
+ },
+ onSuccess: async () => {
+ await queryClient.invalidateQueries({
+ queryKey: consoleQuery.deployments.key(),
+ })
},
})
}
@@ -204,19 +220,25 @@ export const useUndeployDeployment = () => {
mutationFn: ({ appId, runtimeInstanceId, isDeploying }: UndeployDeploymentParams) => {
if (!runtimeInstanceId)
return Promise.resolve(undefined)
- if (isDeploying)
- return cancelDeployment(appId, runtimeInstanceId)
- return undeployEnvironment(appId, runtimeInstanceId)
+ if (isDeploying) {
+ return consoleClient.deployments.cancelDeployment({
+ params: {
+ appInstanceId: appId,
+ runtimeInstanceId,
+ },
+ })
+ }
+ return consoleClient.deployments.undeployEnvironment({
+ params: {
+ appInstanceId: appId,
+ runtimeInstanceId,
+ },
+ })
},
- onSuccess: async (_data, variables) => {
- await Promise.all([
- queryClient.invalidateQueries({
- queryKey: consoleQuery.deployments.list.key(),
- }),
- queryClient.invalidateQueries({
- queryKey: deploymentAppDataQueryKey(variables.appId),
- }),
- ])
+ onSuccess: async () => {
+ await queryClient.invalidateQueries({
+ queryKey: consoleQuery.deployments.key(),
+ })
},
})
}
@@ -226,22 +248,20 @@ export const useGenerateDeploymentApiKey = () => {
return useMutation({
mutationKey: consoleQuery.deployments.createEnvironmentAPIToken.mutationKey(),
- mutationFn: ({ appId, environmentId }: GenerateApiKeyParams) => {
- const appData = queryClient.getQueryData(
- deploymentAppDataQueryKey(appId),
- )
-
- return createApiKey(appId, environmentId, createApiKeyLabel(appData, environmentId))
- },
- onSuccess: async (_data, variables) => {
- await Promise.all([
- queryClient.invalidateQueries({
- queryKey: consoleQuery.deployments.list.key(),
- }),
- queryClient.invalidateQueries({
- queryKey: deploymentAppDataQueryKey(variables.appId),
- }),
- ])
+ mutationFn: ({ appId, environmentId, name }: GenerateApiKeyParams) =>
+ consoleClient.deployments.createEnvironmentAPIToken({
+ params: {
+ appInstanceId: appId,
+ },
+ body: {
+ environmentId,
+ name,
+ },
+ }),
+ onSuccess: async () => {
+ await queryClient.invalidateQueries({
+ queryKey: consoleQuery.deployments.key(),
+ })
},
})
}
@@ -251,16 +271,16 @@ export const useRevokeDeploymentApiKey = () => {
return useMutation({
mutationKey: consoleQuery.deployments.deleteEnvironmentAPIToken.mutationKey(),
- mutationFn: ({ appId, apiKeyId }: RevokeApiKeyParams) => deleteApiKey(appId, apiKeyId),
- onSuccess: async (_data, variables) => {
- await Promise.all([
- queryClient.invalidateQueries({
- queryKey: consoleQuery.deployments.list.key(),
- }),
- queryClient.invalidateQueries({
- queryKey: deploymentAppDataQueryKey(variables.appId),
- }),
- ])
+ mutationFn: ({ appId, apiKeyId }: RevokeApiKeyParams) => consoleClient.deployments.deleteEnvironmentAPIToken({
+ params: {
+ appInstanceId: appId,
+ apiKeyId,
+ },
+ }),
+ onSuccess: async () => {
+ await queryClient.invalidateQueries({
+ queryKey: consoleQuery.deployments.key(),
+ })
},
})
}
@@ -271,19 +291,29 @@ export const useToggleDeploymentAccessChannel = () => {
return useMutation({
mutationKey: consoleQuery.deployments.patchAccessChannel.mutationKey(),
mutationFn: ({ appId, channel, enabled }: ToggleAccessChannelParams) => {
- if (channel === 'api')
- return patchDeveloperAPI(appId, enabled)
- return patchAccessChannel(appId, enabled)
+ if (channel === 'api') {
+ return consoleClient.deployments.patchDeveloperAPI({
+ params: {
+ appInstanceId: appId,
+ },
+ body: {
+ enabled,
+ },
+ })
+ }
+ return consoleClient.deployments.patchAccessChannel({
+ params: {
+ appInstanceId: appId,
+ },
+ body: {
+ enabled,
+ },
+ })
},
- onSuccess: async (_data, variables) => {
- await Promise.all([
- queryClient.invalidateQueries({
- queryKey: consoleQuery.deployments.list.key(),
- }),
- queryClient.invalidateQueries({
- queryKey: deploymentAppDataQueryKey(variables.appId),
- }),
- ])
+ onSuccess: async () => {
+ await queryClient.invalidateQueries({
+ queryKey: consoleQuery.deployments.key(),
+ })
},
})
}
@@ -298,27 +328,20 @@ export const useSetEnvironmentAccessPolicy = () => {
environmentId,
accessMode,
subjects,
- }: SetEnvironmentAccessPolicyParams) =>
- updateEnvironmentAccessPolicy(appId, environmentId, accessMode, subjects),
- onSuccess: async (_data, variables) => {
- await Promise.all([
- queryClient.invalidateQueries({
- queryKey: consoleQuery.deployments.list.key(),
- }),
- queryClient.invalidateQueries({
- queryKey: deploymentAppDataQueryKey(variables.appId),
- }),
- queryClient.invalidateQueries({
- queryKey: consoleQuery.deployments.environmentAccessPolicy.queryKey({
- input: {
- params: {
- appInstanceId: variables.appId,
- environmentId: variables.environmentId,
- },
- },
- }),
- }),
- ])
+ }: SetEnvironmentAccessPolicyParams) => consoleClient.deployments.updateEnvironmentAccessPolicy({
+ params: {
+ appInstanceId: appId,
+ environmentId,
+ },
+ body: {
+ accessMode,
+ subjects,
+ },
+ }),
+ onSuccess: async () => {
+ await queryClient.invalidateQueries({
+ queryKey: consoleQuery.deployments.key(),
+ })
},
})
}
diff --git a/web/features/deployments/hooks/use-source-apps.ts b/web/features/deployments/hooks/use-source-apps.ts
deleted file mode 100644
index 34e553a633..0000000000
--- a/web/features/deployments/hooks/use-source-apps.ts
+++ /dev/null
@@ -1,81 +0,0 @@
-'use client'
-import type { AppInfo } from '../types'
-import type { AppDeploymentSummary, EnvironmentOption } from '@/contract/console/deployments'
-import { useQuery } from '@tanstack/react-query'
-import { useMemo } from 'react'
-import { consoleQuery } from '@/service/client'
-import { toAppInfoFromSummary } from '../data'
-
-const MAX_SOURCE_APPS = 100
-
-type UseSourceAppsOptions = {
- enabled?: boolean
- environmentId?: string
- keyword?: string
- notDeployed?: boolean
-}
-
-type DeploymentEnvironmentFilter = {
- id?: string
- name?: string
- kind?: string
- disabled?: boolean
- disabledReason?: string
-}
-
-export function useSourceApps(options: UseSourceAppsOptions = {}) {
- const { enabled = true, environmentId, keyword, notDeployed } = options
- const query = useMemo(() => ({
- pageNumber: 1,
- resultsPerPage: MAX_SOURCE_APPS,
- ...(environmentId ? { environmentId } : {}),
- ...(notDeployed ? { notDeployed: true } : {}),
- ...(keyword?.trim() ? { query: keyword.trim() } : {}),
- }), [environmentId, keyword, notDeployed])
-
- const listQuery = useQuery(consoleQuery.deployments.list.queryOptions({
- input: { query },
- enabled,
- staleTime: 30 * 1000,
- }))
-
- const apps = useMemo(() => {
- return (listQuery.data?.data ?? [])
- .map(toAppInfoFromSummary)
- .filter((app): app is AppInfo => Boolean(app))
- }, [listQuery.data?.data])
-
- const appMap = useMemo>(() => {
- return new Map(apps.map(a => [a.id, a]))
- }, [apps])
-
- const summaries = useMemo>(() => {
- return Object.fromEntries(
- (listQuery.data?.data ?? [])
- .filter(summary => summary.id)
- .map(summary => [summary.id!, summary]),
- )
- }, [listQuery.data?.data])
-
- const environmentOptions = useMemo(() => {
- return ((listQuery.data?.filters ?? []) as DeploymentEnvironmentFilter[])
- .filter(filter => filter.kind === 'environment' && filter.id)
- .map(filter => ({
- id: filter.id,
- name: filter.name,
- disabled: filter.disabled,
- disabledReason: filter.disabledReason,
- }))
- }, [listQuery.data?.filters])
-
- return {
- apps,
- appMap,
- summaries,
- environmentOptions,
- isLoading: listQuery.isLoading,
- isFetching: listQuery.isFetching,
- isError: listQuery.isError,
- isEmpty: !listQuery.isLoading && apps.length === 0,
- }
-}
diff --git a/web/features/deployments/list/index.tsx b/web/features/deployments/list/index.tsx
index f5dd6b08c1..a22faf7920 100644
--- a/web/features/deployments/list/index.tsx
+++ b/web/features/deployments/list/index.tsx
@@ -1,17 +1,27 @@
'use client'
import type { FC } from 'react'
+import { useQuery } from '@tanstack/react-query'
import { useDebounce } from 'ahooks'
import { debounce, parseAsString, useQueryState } from 'nuqs'
import { useMemo } from 'react'
import { useTranslation } from 'react-i18next'
import Input from '@/app/components/base/input'
+import { consoleQuery } from '@/service/client'
import CreateInstanceModal from '../components/create-instance-modal'
import DeployDrawer from '../components/deploy-drawer'
import RollbackModal from '../components/rollback-modal'
-import { useSourceApps } from '../hooks/use-source-apps'
+import {
+ SOURCE_APPS_PAGE_SIZE,
+} from '../data'
import { useDeploymentsStore } from '../store'
-import { environmentId, environmentName } from '../utils'
+import {
+ deploymentSummariesFromList,
+ environmentId,
+ environmentName,
+ environmentOptionsFromList,
+ sourceAppsFromList,
+} from '../utils'
import { EnvironmentFilter } from './environment-filter'
import { InstanceCard } from './instance-card'
import { NewInstanceCard } from './new-instance-card'
@@ -40,15 +50,20 @@ const DeploymentsMain: FC = () => {
const requestedEnvironmentId = envFilter !== 'all' && envFilter !== 'not-deployed'
? envFilter
: undefined
- const {
- apps,
- summaries,
- environmentOptions,
- } = useSourceApps({
- environmentId: requestedEnvironmentId,
- notDeployed: envFilter === 'not-deployed',
- keyword: queryKeywords.trim() || undefined,
- })
+ const listQuery = useQuery(consoleQuery.deployments.list.queryOptions({
+ input: {
+ query: {
+ pageNumber: 1,
+ resultsPerPage: SOURCE_APPS_PAGE_SIZE,
+ ...(requestedEnvironmentId ? { environmentId: requestedEnvironmentId } : {}),
+ ...(envFilter === 'not-deployed' ? { notDeployed: true } : {}),
+ ...(queryKeywords.trim() ? { query: queryKeywords.trim() } : {}),
+ },
+ },
+ }))
+ const apps = useMemo(() => sourceAppsFromList(listQuery.data), [listQuery.data])
+ const summaries = useMemo(() => deploymentSummariesFromList(listQuery.data), [listQuery.data])
+ const environmentOptions = useMemo(() => environmentOptionsFromList(listQuery.data), [listQuery.data])
const environments = useMemo(() => {
return environmentOptions
diff --git a/web/features/deployments/list/instance-card.tsx b/web/features/deployments/list/instance-card.tsx
index 04086df99c..04e05c4b80 100644
--- a/web/features/deployments/list/instance-card.tsx
+++ b/web/features/deployments/list/instance-card.tsx
@@ -13,15 +13,13 @@ import {
DropdownMenuTrigger,
} from '@langgenius/dify-ui/dropdown-menu'
import { Tooltip, TooltipContent, TooltipTrigger } from '@langgenius/dify-ui/tooltip'
-import { useMemo, useState } from 'react'
+import { useState } from 'react'
import { useTranslation } from 'react-i18next'
import { AppTypeIcon } from '@/app/components/app/type-selector'
import AppIcon from '@/app/components/base/app-icon'
import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
import { useRouter } from '@/next/navigation'
-import { useCachedDeploymentAppData } from '../hooks/use-deployment-data'
import { useDeploymentsStore } from '../store'
-import { deployedRows, deploymentStatus, environmentId, environmentName, releaseLabel } from '../utils'
type InstanceCardProps = {
app: AppInfo
@@ -33,7 +31,6 @@ export const InstanceCard: FC = ({ app, summary }) => {
const router = useRouter()
const { formatTimeFromNow } = useFormatTimeFromNow()
const [menuOpen, setMenuOpen] = useState(false)
- const { data: appData } = useCachedDeploymentAppData(app.id)
const openDeployDrawer = useDeploymentsStore(state => state.openDeployDrawer)
const navigateToDetail = () => router.push(`/deployments/${app.id}/overview`)
@@ -45,36 +42,16 @@ export const InstanceCard: FC = ({ app, summary }) => {
action()
}
- const deployments = useMemo(
- () => deployedRows(appData?.environmentDeployments.data),
- [appData?.environmentDeployments.data],
- )
const statusCount = (status: string) =>
summary?.statuses?.find(item => item.status === status)?.count ?? 0
- const hasSummary = Boolean(summary)
- const failedCount = hasSummary
- ? statusCount('failed') + statusCount('deploy_failed')
- : deployments.filter(row => deploymentStatus(row) === 'deploy_failed').length
- const deployingCount = hasSummary
- ? statusCount('deploying')
- : deployments.filter(row => deploymentStatus(row) === 'deploying').length
- const readyCount = hasSummary
- ? statusCount('ready')
- : deployments.filter(row => deploymentStatus(row) === 'ready').length
- const envCount = hasSummary
- ? failedCount + deployingCount + readyCount
- : deployments.length
+ const failedCount = statusCount('failed') + statusCount('deploy_failed')
+ const deployingCount = statusCount('deploying')
+ const readyCount = statusCount('ready')
+ const envCount = failedCount + deployingCount + readyCount
- const lastDeployedAt = useMemo(() => {
- if (summary?.lastDeployedAt)
- return new Date(summary.lastDeployedAt).getTime()
- if (deployments.length === 0)
- return null
- return deployments.reduce((latest, row) => {
- const t = new Date(row.currentRelease?.createdAt || '').getTime()
- return t > latest ? t : latest
- }, 0)
- }, [deployments, summary?.lastDeployedAt])
+ const lastDeployedAt = summary?.lastDeployedAt
+ ? new Date(summary.lastDeployedAt).getTime()
+ : null
const primaryStatus: 'none' | 'failed' | 'deploying' | 'ready' = envCount === 0
? 'none'
@@ -98,11 +75,6 @@ export const InstanceCard: FC = ({ app, summary }) => {
if ((primaryStatus === 'failed' || primaryStatus === 'deploying') && readyCount > 0)
secondaryParts.push(t('card.ready', { count: readyCount }))
- const statusLabel = (status: ReturnType) => {
- if (status === 'deploy_failed')
- return t('status.deployFailed')
- return t(`status.${status}`)
- }
const statusSummaryLabel = (status?: string) => {
if (status === 'failed' || status === 'deploy_failed')
return t('status.deployFailed')
@@ -116,38 +88,17 @@ export const InstanceCard: FC = ({ app, summary }) => {
const statusSummaryTooltip = summary?.statuses?.filter(item => item.count && item.status !== 'undeployed') ?? []
const statusTooltip = primaryStatus === 'none'
? t('card.tooltip.notDeployed')
- : deployments.length > 0
- ? (
-
-
{t('overview.deploymentStatus')}
- {deployments.map((deployment) => {
- const status = deploymentStatus(deployment)
- return (
-
-
- {environmentName(deployment.environment)}
-
-
- {statusLabel(status)}
- {' · '}
- {releaseLabel(deployment.currentRelease)}
-
-
- )
- })}
-
-
{t('overview.deploymentStatus')}
- {statusSummaryTooltip.map(item => (
-
- {statusSummaryLabel(item.status)}
- {item.count}
-
- ))}
-
+
{t('overview.deploymentStatus')}
+ {statusSummaryTooltip.map(item => (
+
+ {statusSummaryLabel(item.status)}
+ {item.count}
+
+ ))}
+