From f5a262817df2e80e162ff75463986ce5dc296c86 Mon Sep 17 00:00:00 2001 From: Stephen Zhou <38493346+hyoban@users.noreply.github.com> Date: Thu, 7 May 2026 17:23:00 +0800 Subject: [PATCH] tweaks --- .../deployments/components/deploy-drawer.tsx | 23 ++-- .../deployments/components/rollback-modal.tsx | 42 +++--- .../deployments/detail/access-tab.tsx | 5 +- .../deployments/detail/deploy-tab.tsx | 7 +- web/features/deployments/detail/index.tsx | 10 +- .../deployments/detail/overview-tab.tsx | 19 ++- .../deployments/detail/settings-tab.tsx | 12 +- .../deployments/detail/versions-tab.tsx | 26 ++-- .../versions-tab/deploy-release-menu.tsx | 14 +- .../hooks/use-deployment-mutations.ts | 121 ++++++++++++++---- web/features/deployments/list/index.tsx | 16 ++- web/features/deployments/nav/index.tsx | 27 ++-- web/features/deployments/queries.ts | 121 ------------------ web/service/client.ts | 5 +- 14 files changed, 227 insertions(+), 221 deletions(-) delete mode 100644 web/features/deployments/queries.ts diff --git a/web/features/deployments/components/deploy-drawer.tsx b/web/features/deployments/components/deploy-drawer.tsx index 6e8d5512e2..80ce0adcb6 100644 --- a/web/features/deployments/components/deploy-drawer.tsx +++ b/web/features/deployments/components/deploy-drawer.tsx @@ -3,12 +3,12 @@ import type { FC } from 'react' import { Dialog, DialogCloseButton, DialogContent } from '@langgenius/dify-ui/dialog' import { toast } from '@langgenius/dify-ui/toast' -import { useQuery } from '@tanstack/react-query' +import { skipToken, useQuery } from '@tanstack/react-query' import { useMemo } from 'react' import { useTranslation } from 'react-i18next' import { consoleQuery } from '@/service/client' +import { DEPLOYMENT_PAGE_SIZE } from '../data' import { useStartDeployment } from '../hooks/use-deployment-mutations' -import { deploymentReleaseHistoryQueryOptions } from '../queries' import { useDeploymentsStore } from '../store' import { environmentOptionsFromOptionsReply } from '../utils' import { DeployForm } from './deploy-drawer/form' @@ -20,14 +20,21 @@ const DeployDrawer: FC = () => { const closeDeployDrawer = useDeploymentsStore(state => state.closeDeployDrawer) const startDeploy = useStartDeployment() const open = drawer.open - const { data: releaseHistory } = useQuery({ - ...deploymentReleaseHistoryQueryOptions(drawerAppInstanceId), + const { data: releaseHistory } = useQuery(consoleQuery.enterprise.appDeploy.listReleases.queryOptions({ + input: drawerAppInstanceId + ? { + params: { appInstanceId: drawerAppInstanceId }, + query: { + pageNumber: 1, + resultsPerPage: DEPLOYMENT_PAGE_SIZE, + }, + } + : skipToken, enabled: open && Boolean(drawerAppInstanceId), - }) - const { data: environmentOptionsReply } = useQuery({ - ...consoleQuery.enterprise.appDeploy.listDeploymentEnvironmentOptions.queryOptions(), + })) + const { data: environmentOptionsReply } = useQuery(consoleQuery.enterprise.appDeploy.listDeploymentEnvironmentOptions.queryOptions({ enabled: open, - }) + })) const environmentOptions = useMemo( () => environmentOptionsFromOptionsReply(environmentOptionsReply), diff --git a/web/features/deployments/components/rollback-modal.tsx b/web/features/deployments/components/rollback-modal.tsx index 853240dd62..6c6036a473 100644 --- a/web/features/deployments/components/rollback-modal.tsx +++ b/web/features/deployments/components/rollback-modal.tsx @@ -9,16 +9,12 @@ import { AlertDialogDescription, AlertDialogTitle, } from '@langgenius/dify-ui/alert-dialog' -import { useQuery } from '@tanstack/react-query' +import { skipToken, useQuery } from '@tanstack/react-query' import { useMemo } from 'react' import { useTranslation } from 'react-i18next' import { consoleQuery } from '@/service/client' +import { DEPLOYMENT_PAGE_SIZE } from '../data' import { useStartDeployment } from '../hooks/use-deployment-mutations' -import { - deploymentEnvironmentDeploymentsQueryOptions, - deploymentOverviewQueryOptions, - deploymentReleaseHistoryQueryOptions, -} from '../queries' import { useDeploymentsStore } from '../store' import { activeRelease, @@ -45,22 +41,32 @@ const RollbackModal: FC = () => { const modal = useDeploymentsStore(state => state.rollbackModal) const closeRollbackModal = useDeploymentsStore(state => state.closeRollbackModal) const rollbackDeployment = useStartDeployment() - const { data: overview } = useQuery({ - ...deploymentOverviewQueryOptions(modal.appInstanceId), + const appInput = modal.appInstanceId + ? { params: { appInstanceId: modal.appInstanceId } } + : skipToken + const { data: overview } = useQuery(consoleQuery.enterprise.appDeploy.getAppInstanceOverview.queryOptions({ + input: appInput, enabled: modal.open && Boolean(modal.appInstanceId), - }) - const { data: environmentDeployments } = useQuery({ - ...deploymentEnvironmentDeploymentsQueryOptions(modal.appInstanceId), + })) + const { data: environmentDeployments } = useQuery(consoleQuery.enterprise.appDeploy.listRuntimeInstances.queryOptions({ + input: appInput, enabled: modal.open && Boolean(modal.appInstanceId), - }) - const { data: environmentOptionsReply } = useQuery({ - ...consoleQuery.enterprise.appDeploy.listDeploymentEnvironmentOptions.queryOptions(), + })) + const { data: environmentOptionsReply } = useQuery(consoleQuery.enterprise.appDeploy.listDeploymentEnvironmentOptions.queryOptions({ enabled: modal.open, - }) - const { data: releaseHistory } = useQuery({ - ...deploymentReleaseHistoryQueryOptions(modal.appInstanceId), + })) + const { data: releaseHistory } = useQuery(consoleQuery.enterprise.appDeploy.listReleases.queryOptions({ + input: modal.appInstanceId + ? { + params: { appInstanceId: modal.appInstanceId }, + query: { + pageNumber: 1, + resultsPerPage: DEPLOYMENT_PAGE_SIZE, + }, + } + : skipToken, enabled: modal.open && Boolean(modal.appInstanceId), - }) + })) const environmentOptions = useMemo( () => environmentOptionsFromOptionsReply(environmentOptionsReply), [environmentOptionsReply], diff --git a/web/features/deployments/detail/access-tab.tsx b/web/features/deployments/detail/access-tab.tsx index 21e490201d..826a9523a5 100644 --- a/web/features/deployments/detail/access-tab.tsx +++ b/web/features/deployments/detail/access-tab.tsx @@ -16,7 +16,6 @@ import { useToggleDeploymentAccessChannel, useToggleDeploymentDeveloperAPI, } from '../hooks/use-deployment-mutations' -import { deploymentEnvironmentDeploymentsQueryOptions } from '../queries' import { deployedRows, } from '../utils' @@ -44,7 +43,9 @@ const AccessTab: FC = ({ instanceId: appId }) => { const { data: accessConfig } = useQuery(consoleQuery.enterprise.appDeploy.getAppInstanceAccess.queryOptions({ input: appInput, })) - const { data: environmentDeployments } = useQuery(deploymentEnvironmentDeploymentsQueryOptions(appId)) + const { data: environmentDeployments } = useQuery(consoleQuery.enterprise.appDeploy.listRuntimeInstances.queryOptions({ + input: appInput, + })) const [createdApiToken, setCreatedApiToken] = useState<{ appId: string token: string diff --git a/web/features/deployments/detail/deploy-tab.tsx b/web/features/deployments/detail/deploy-tab.tsx index 13a805a564..143ec232f1 100644 --- a/web/features/deployments/detail/deploy-tab.tsx +++ b/web/features/deployments/detail/deploy-tab.tsx @@ -13,7 +13,6 @@ import { useMemo, useState } from 'react' import { useTranslation } from 'react-i18next' import { consoleQuery } from '@/service/client' import { useUndeployDeployment } from '../hooks/use-deployment-mutations' -import { deploymentEnvironmentDeploymentsQueryOptions } from '../queries' import { useDeploymentsStore } from '../store' import { activeRelease, @@ -40,7 +39,11 @@ type DeployTabProps = { const DeployTab: FC = ({ instanceId: appInstanceId }) => { const { t } = useTranslation('deployments') - const { data: environmentDeployments } = useQuery(deploymentEnvironmentDeploymentsQueryOptions(appInstanceId)) + const { data: environmentDeployments } = useQuery(consoleQuery.enterprise.appDeploy.listRuntimeInstances.queryOptions({ + input: { + params: { appInstanceId }, + }, + })) const { data: environmentOptionsReply } = useQuery(consoleQuery.enterprise.appDeploy.listDeploymentEnvironmentOptions.queryOptions()) const openDeployDrawer = useDeploymentsStore(state => state.openDeployDrawer) const undeployDeployment = useUndeployDeployment() diff --git a/web/features/deployments/detail/index.tsx b/web/features/deployments/detail/index.tsx index f787934615..4cade8f8d1 100644 --- a/web/features/deployments/detail/index.tsx +++ b/web/features/deployments/detail/index.tsx @@ -9,11 +9,9 @@ import { useTranslation } from 'react-i18next' import { getAppModeLabel } from '@/app/components/app-sidebar/app-info/app-mode-labels' import useDocumentTitle from '@/hooks/use-document-title' import { useRouter, useSelectedLayoutSegment } from '@/next/navigation' +import { consoleQuery } from '@/service/client' import DeployDrawer from '../components/deploy-drawer' import RollbackModal from '../components/rollback-modal' -import { - deploymentOverviewQueryOptions, -} from '../queries' import { toAppInfoFromOverview } from '../utils' import { DeploymentSidebar } from './deployment-sidebar' import { isInstanceDetailTabKey } from './tabs' @@ -30,7 +28,11 @@ const InstanceDetail: FC = ({ instanceId, children }) => { const selectedSegment = useSelectedLayoutSegment() const selectedTab = selectedSegment ?? undefined const activeTab: InstanceDetailTabKey = isInstanceDetailTabKey(selectedTab) ? selectedTab : 'overview' - const overviewQuery = useQuery(deploymentOverviewQueryOptions(instanceId)) + const overviewQuery = useQuery(consoleQuery.enterprise.appDeploy.getAppInstanceOverview.queryOptions({ + input: { + params: { appInstanceId: instanceId }, + }, + })) useDocumentTitle(t('documentTitle.detail')) diff --git a/web/features/deployments/detail/overview-tab.tsx b/web/features/deployments/detail/overview-tab.tsx index f4d8707c86..8c19bab54e 100644 --- a/web/features/deployments/detail/overview-tab.tsx +++ b/web/features/deployments/detail/overview-tab.tsx @@ -9,10 +9,7 @@ import { getAppModeLabel } from '@/app/components/app-sidebar/app-info/app-mode- import { useRouter } from '@/next/navigation' import { consoleQuery } from '@/service/client' import { StatusBadge } from '../components/status-badge' -import { - deploymentOverviewQueryOptions, - deploymentReleaseHistoryQueryOptions, -} from '../queries' +import { DEPLOYMENT_PAGE_SIZE } from '../data' import { useDeploymentsStore } from '../store' import { releaseLabel, @@ -102,8 +99,18 @@ const OverviewTab: FC = ({ instanceId }) => { const { t: tCommon } = useTranslation() const router = useRouter() const input = { params: { appInstanceId: instanceId } } - const { data: overview } = useQuery(deploymentOverviewQueryOptions(instanceId)) - const { data: releaseHistory } = useQuery(deploymentReleaseHistoryQueryOptions(instanceId)) + const { data: overview } = useQuery(consoleQuery.enterprise.appDeploy.getAppInstanceOverview.queryOptions({ + input, + })) + const { data: releaseHistory } = useQuery(consoleQuery.enterprise.appDeploy.listReleases.queryOptions({ + input: { + ...input, + query: { + pageNumber: 1, + resultsPerPage: DEPLOYMENT_PAGE_SIZE, + }, + }, + })) const { data: accessConfig } = useQuery(consoleQuery.enterprise.appDeploy.getAppInstanceAccess.queryOptions({ input, })) diff --git a/web/features/deployments/detail/settings-tab.tsx b/web/features/deployments/detail/settings-tab.tsx index 6f853294cd..fbf3ed91aa 100644 --- a/web/features/deployments/detail/settings-tab.tsx +++ b/web/features/deployments/detail/settings-tab.tsx @@ -22,10 +22,6 @@ import { useDeleteDeploymentInstance, useUpdateDeploymentInstance, } from '../hooks/use-deployment-mutations' -import { - deploymentEnvironmentDeploymentsQueryOptions, - deploymentOverviewQueryOptions, -} from '../queries' import { deployedRows, toAppInfoFromOverview, @@ -188,8 +184,12 @@ const SettingsTab: FC = ({ instanceId }) => { const updateInstance = useUpdateDeploymentInstance() const deleteInstance = useDeleteDeploymentInstance() const appInput = { params: { appInstanceId: instanceId } } - const { data: overview } = useQuery(deploymentOverviewQueryOptions(instanceId)) - const { data: environmentDeployments } = useQuery(deploymentEnvironmentDeploymentsQueryOptions(instanceId)) + const { data: overview } = useQuery(consoleQuery.enterprise.appDeploy.getAppInstanceOverview.queryOptions({ + input: appInput, + })) + const { data: environmentDeployments } = useQuery(consoleQuery.enterprise.appDeploy.listRuntimeInstances.queryOptions({ + input: appInput, + })) const app = useMemo( () => toAppInfoFromOverview(overview?.instance), [overview?.instance], diff --git a/web/features/deployments/detail/versions-tab.tsx b/web/features/deployments/detail/versions-tab.tsx index e96db5b82e..490ed722b5 100644 --- a/web/features/deployments/detail/versions-tab.tsx +++ b/web/features/deployments/detail/versions-tab.tsx @@ -10,12 +10,9 @@ import { useMemo, useState } from 'react' import { useTranslation } from 'react-i18next' import Input from '@/app/components/base/input' import Textarea from '@/app/components/base/textarea' +import { consoleQuery } from '@/service/client' +import { DEPLOYMENT_PAGE_SIZE } from '../data' import { useCreateDeploymentRelease } from '../hooks/use-deployment-mutations' -import { - deploymentEnvironmentDeploymentsQueryOptions, - deploymentOverviewQueryOptions, - deploymentReleaseHistoryQueryOptions, -} from '../queries' import { deployedRows, formatDate, @@ -34,9 +31,22 @@ type VersionsTabProps = { const VersionsTab: FC = ({ instanceId: appId }) => { const { t } = useTranslation('deployments') - const { data: overview } = useQuery(deploymentOverviewQueryOptions(appId)) - const { data: releaseHistory } = useQuery(deploymentReleaseHistoryQueryOptions(appId)) - const { data: environmentDeployments } = useQuery(deploymentEnvironmentDeploymentsQueryOptions(appId)) + const input = { params: { appInstanceId: appId } } + const { data: overview } = useQuery(consoleQuery.enterprise.appDeploy.getAppInstanceOverview.queryOptions({ + input, + })) + const { data: releaseHistory } = useQuery(consoleQuery.enterprise.appDeploy.listReleases.queryOptions({ + input: { + ...input, + query: { + pageNumber: 1, + resultsPerPage: DEPLOYMENT_PAGE_SIZE, + }, + }, + })) + const { data: environmentDeployments } = useQuery(consoleQuery.enterprise.appDeploy.listRuntimeInstances.queryOptions({ + input, + })) const createRelease = useCreateDeploymentRelease() const [isCreating, setIsCreating] = useState(false) const [releaseName, setReleaseName] = useState('') 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 b53d4ce898..a792b1c003 100644 --- a/web/features/deployments/detail/versions-tab/deploy-release-menu.tsx +++ b/web/features/deployments/detail/versions-tab/deploy-release-menu.tsx @@ -12,7 +12,6 @@ import { useQuery } from '@tanstack/react-query' import { useMemo, useState } from 'react' import { useTranslation } from 'react-i18next' import { consoleQuery } from '@/service/client' -import { deploymentEnvironmentDeploymentsQueryOptions } from '../../queries' import { useDeploymentsStore } from '../../store' import { activeRelease, @@ -32,14 +31,15 @@ export const DeployReleaseMenu: FC = ({ appInstanceId, r const { t } = useTranslation('deployments') const openDeployDrawer = useDeploymentsStore(state => state.openDeployDrawer) const [open, setOpen] = useState(false) - const { data: environmentDeployments } = useQuery({ - ...deploymentEnvironmentDeploymentsQueryOptions(appInstanceId), + const { data: environmentDeployments } = useQuery(consoleQuery.enterprise.appDeploy.listRuntimeInstances.queryOptions({ + input: { + params: { appInstanceId }, + }, enabled: open, - }) - const { data: environmentOptionsReply } = useQuery({ - ...consoleQuery.enterprise.appDeploy.listDeploymentEnvironmentOptions.queryOptions(), + })) + const { data: environmentOptionsReply } = useQuery(consoleQuery.enterprise.appDeploy.listDeploymentEnvironmentOptions.queryOptions({ enabled: open, - }) + })) const environmentOptions = useMemo( () => environmentOptionsFromOptionsReply(environmentOptionsReply), diff --git a/web/features/deployments/hooks/use-deployment-mutations.ts b/web/features/deployments/hooks/use-deployment-mutations.ts index 49e2a0d79d..e98aab50f1 100644 --- a/web/features/deployments/hooks/use-deployment-mutations.ts +++ b/web/features/deployments/hooks/use-deployment-mutations.ts @@ -4,18 +4,7 @@ import type { DeploymentRuntimeBinding } from '@dify/contracts/enterprise/types. import type { QueryClient, QueryKey } from '@tanstack/react-query' import { useMutation, useQueryClient } from '@tanstack/react-query' import { consoleClient, consoleQuery } from '@/service/client' -import { - deploymentAccessConfigQueryKey, - deploymentAccessStateQueryKeys, - deploymentEnvironmentAccessPolicyQueryKeyForEnvironment, - deploymentInstanceDetailQueryKeys, - deploymentInstanceIdentityQueryKeys, - deploymentInstanceStateQueryKeys, - deploymentOverviewQueryKey, - deploymentReleaseHistoryQueryKey, - deploymentsListQueryKey, - deploymentsListQueryOptions, -} from '../queries' +import { SOURCE_APPS_PAGE_SIZE } from '../data' export type CreateDeploymentInstanceResult = { appInstanceId: string @@ -60,20 +49,57 @@ const removeQueries = (queryClient: QueryClient, queryKeys: readonly QueryKey[]) const invalidateInstanceList = (queryClient: QueryClient): Promise => { return queryClient.invalidateQueries({ - queryKey: deploymentsListQueryKey(), + queryKey: consoleQuery.enterprise.appDeploy.listAppInstances.key({ type: 'query' }), }) } const invalidateInstanceIdentity = (queryClient: QueryClient, appInstanceId: string): Promise => { - return invalidateQueries(queryClient, deploymentInstanceIdentityQueryKeys(appInstanceId)) + return invalidateQueries(queryClient, [ + consoleQuery.enterprise.appDeploy.listAppInstances.key({ type: 'query' }), + consoleQuery.enterprise.appDeploy.getAppInstanceOverview.key({ + type: 'query', + input: { params: { appInstanceId } }, + }), + consoleQuery.enterprise.appDeploy.getAppInstanceSettings.key({ + type: 'query', + input: { params: { appInstanceId } }, + }), + ]) } const invalidateDeploymentState = (queryClient: QueryClient, appInstanceId: string): Promise => { - return invalidateQueries(queryClient, deploymentInstanceStateQueryKeys(appInstanceId)) + return invalidateQueries(queryClient, [ + consoleQuery.enterprise.appDeploy.listAppInstances.key({ type: 'query' }), + consoleQuery.enterprise.appDeploy.getAppInstanceOverview.key({ + type: 'query', + input: { params: { appInstanceId } }, + }), + consoleQuery.enterprise.appDeploy.listRuntimeInstances.key({ + type: 'query', + input: { params: { appInstanceId } }, + }), + consoleQuery.enterprise.appDeploy.listReleases.key({ + type: 'query', + input: { params: { appInstanceId } }, + }), + consoleQuery.enterprise.appDeploy.getAppInstanceAccess.key({ + type: 'query', + input: { params: { appInstanceId } }, + }), + ]) } const invalidateAccessState = (queryClient: QueryClient, appInstanceId: string): Promise => { - return invalidateQueries(queryClient, deploymentAccessStateQueryKeys(appInstanceId)) + return invalidateQueries(queryClient, [ + consoleQuery.enterprise.appDeploy.getAppInstanceOverview.key({ + type: 'query', + input: { params: { appInstanceId } }, + }), + consoleQuery.enterprise.appDeploy.getAppInstanceAccess.key({ + type: 'query', + input: { params: { appInstanceId } }, + }), + ]) } const invalidateEnvironmentAccessPolicy = ( @@ -82,13 +108,49 @@ const invalidateEnvironmentAccessPolicy = ( environmentId: string, ): Promise => { return invalidateQueries(queryClient, [ - deploymentAccessConfigQueryKey(appInstanceId), - deploymentEnvironmentAccessPolicyQueryKeyForEnvironment(appInstanceId, environmentId), + consoleQuery.enterprise.appDeploy.getAppInstanceAccess.key({ + type: 'query', + input: { params: { appInstanceId } }, + }), + consoleQuery.enterprise.appDeploy.getEnvironmentAccessPolicy.key({ + type: 'query', + input: { + params: { + appInstanceId, + environmentId, + }, + }, + }), ]) } const removeDeletedInstanceState = (queryClient: QueryClient, appInstanceId: string): Promise => { - removeQueries(queryClient, deploymentInstanceDetailQueryKeys(appInstanceId)) + removeQueries(queryClient, [ + consoleQuery.enterprise.appDeploy.getAppInstanceOverview.key({ + type: 'query', + input: { params: { appInstanceId } }, + }), + consoleQuery.enterprise.appDeploy.getAppInstanceSettings.key({ + type: 'query', + input: { params: { appInstanceId } }, + }), + consoleQuery.enterprise.appDeploy.listRuntimeInstances.key({ + type: 'query', + input: { params: { appInstanceId } }, + }), + consoleQuery.enterprise.appDeploy.listReleases.key({ + type: 'query', + input: { params: { appInstanceId } }, + }), + consoleQuery.enterprise.appDeploy.getAppInstanceAccess.key({ + type: 'query', + input: { params: { appInstanceId } }, + }), + consoleQuery.enterprise.appDeploy.getEnvironmentAccessPolicy.key({ + type: 'query', + input: { params: { appInstanceId } }, + }), + ]) return invalidateInstanceList(queryClient) } @@ -112,7 +174,16 @@ export const useCreateDeploymentInstance = () => { if (delay > 0) await wait(delay) - const listResponse = await queryClient.fetchQuery(deploymentsListQueryOptions()).catch(() => undefined) + const listResponse = await queryClient + .fetchQuery(consoleQuery.enterprise.appDeploy.listAppInstances.queryOptions({ + input: { + query: { + pageNumber: 1, + resultsPerPage: SOURCE_APPS_PAGE_SIZE, + }, + }, + })) + .catch(() => undefined) if (listResponse?.data?.some(app => app.id === response.appInstanceId)) break } @@ -149,8 +220,14 @@ export const useCreateDeploymentRelease = () => { }, onSuccess: (_data, variables) => { return invalidateQueries(queryClient, [ - deploymentReleaseHistoryQueryKey(variables.appInstanceId), - deploymentOverviewQueryKey(variables.appInstanceId), + consoleQuery.enterprise.appDeploy.listReleases.key({ + type: 'query', + input: { params: { appInstanceId: variables.appInstanceId } }, + }), + consoleQuery.enterprise.appDeploy.getAppInstanceOverview.key({ + type: 'query', + input: { params: { appInstanceId: variables.appInstanceId } }, + }), ]) }, }) diff --git a/web/features/deployments/list/index.tsx b/web/features/deployments/list/index.tsx index 4141084003..964a856848 100644 --- a/web/features/deployments/list/index.tsx +++ b/web/features/deployments/list/index.tsx @@ -11,7 +11,7 @@ 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 { deploymentsListQueryOptions } from '../queries' +import { SOURCE_APPS_PAGE_SIZE } from '../data' import { useDeploymentsStore } from '../store' import { deploymentSummariesFromList, @@ -45,10 +45,16 @@ const DeploymentsMain: FC = () => { const requestedEnvironmentId = envFilter !== 'all' && envFilter !== 'not-deployed' ? envFilter : undefined - const listQuery = useQuery(deploymentsListQueryOptions({ - ...(requestedEnvironmentId ? { environmentId: requestedEnvironmentId } : {}), - ...(envFilter === 'not-deployed' ? { notDeployed: true } : {}), - ...(queryKeywords.trim() ? { query: queryKeywords.trim() } : {}), + const listQuery = useQuery(consoleQuery.enterprise.appDeploy.listAppInstances.queryOptions({ + input: { + query: { + pageNumber: 1, + resultsPerPage: SOURCE_APPS_PAGE_SIZE, + ...(requestedEnvironmentId ? { environmentId: requestedEnvironmentId } : {}), + ...(envFilter === 'not-deployed' ? { notDeployed: true } : {}), + ...(queryKeywords.trim() ? { query: queryKeywords.trim() } : {}), + }, + }, })) const { data: environmentOptionsReply } = useQuery(consoleQuery.enterprise.appDeploy.listDeploymentEnvironmentOptions.queryOptions()) const apps = useMemo(() => sourceAppsFromList(listQuery.data), [listQuery.data]) diff --git a/web/features/deployments/nav/index.tsx b/web/features/deployments/nav/index.tsx index 5b7cd1945c..faabc41192 100644 --- a/web/features/deployments/nav/index.tsx +++ b/web/features/deployments/nav/index.tsx @@ -2,15 +2,13 @@ import type { NavItem } from '@/app/components/header/nav/nav-selector' import type { AppIconType, AppModeEnum } from '@/types/app' -import { useQuery } from '@tanstack/react-query' +import { skipToken, useQuery } from '@tanstack/react-query' import { useCallback, useMemo } from 'react' import { useTranslation } from 'react-i18next' import Nav from '@/app/components/header/nav' import { useParams, useRouter, useSelectedLayoutSegment } from '@/next/navigation' -import { - deploymentOverviewQueryOptions, - deploymentsListQueryOptions, -} from '../queries' +import { consoleQuery } from '@/service/client' +import { SOURCE_APPS_PAGE_SIZE } from '../data' import { useDeploymentsStore } from '../store' import { sourceAppsFromList, @@ -26,16 +24,23 @@ const DeploymentsNav = () => { const instanceId = params?.instanceId const openCreateInstanceModal = useDeploymentsStore(state => state.openCreateInstanceModal) - const { data: currentInstance } = useQuery({ - ...deploymentOverviewQueryOptions(instanceId), + const { data: currentInstance } = useQuery(consoleQuery.enterprise.appDeploy.getAppInstanceOverview.queryOptions({ + input: instanceId + ? { params: { appInstanceId: instanceId } } + : skipToken, enabled: isActive && Boolean(instanceId), select: data => toAppInfoFromOverview(data.instance), - }) + })) - const listQuery = useQuery({ - ...deploymentsListQueryOptions(), + const listQuery = useQuery(consoleQuery.enterprise.appDeploy.listAppInstances.queryOptions({ + input: { + query: { + pageNumber: 1, + resultsPerPage: SOURCE_APPS_PAGE_SIZE, + }, + }, enabled: isActive, - }) + })) const apps = useMemo(() => sourceAppsFromList(listQuery.data), [listQuery.data]) const navigationItems = useMemo(() => { diff --git a/web/features/deployments/queries.ts b/web/features/deployments/queries.ts deleted file mode 100644 index cf90df2d04..0000000000 --- a/web/features/deployments/queries.ts +++ /dev/null @@ -1,121 +0,0 @@ -import type { ListAppDeploymentsQuery } from '@/features/deployments/types' -import { skipToken } from '@tanstack/react-query' -import { consoleQuery } from '@/service/client' -import { DEPLOYMENT_PAGE_SIZE, SOURCE_APPS_PAGE_SIZE } from './data' - -export const deploymentsListQueryOptions = (query: ListAppDeploymentsQuery = {}) => - consoleQuery.enterprise.appDeploy.listAppInstances.queryOptions({ - input: { - query: { - pageNumber: 1, - resultsPerPage: SOURCE_APPS_PAGE_SIZE, - ...query, - }, - }, - }) - -export const deploymentsListQueryKey = () => - consoleQuery.enterprise.appDeploy.listAppInstances.key({ type: 'query' }) - -export const deploymentAppInstanceInput = (appInstanceId: string) => ({ - params: { appInstanceId }, -}) - -export const deploymentAppInstanceQueryKey = (appInstanceId: string) => ({ - type: 'query' as const, - input: deploymentAppInstanceInput(appInstanceId), -}) - -export const deploymentEnvironmentAccessPolicyQueryKey = ( - appInstanceId: string, - environmentId: string, -) => ({ - type: 'query' as const, - input: { - params: { - appInstanceId, - environmentId, - }, - }, -}) - -export const deploymentOverviewQueryKey = (appInstanceId: string) => - consoleQuery.enterprise.appDeploy.getAppInstanceOverview.key(deploymentAppInstanceQueryKey(appInstanceId)) - -export const deploymentSettingsQueryKey = (appInstanceId: string) => - consoleQuery.enterprise.appDeploy.getAppInstanceSettings.key(deploymentAppInstanceQueryKey(appInstanceId)) - -export const deploymentEnvironmentDeploymentsQueryKey = (appInstanceId: string) => - consoleQuery.enterprise.appDeploy.listRuntimeInstances.key(deploymentAppInstanceQueryKey(appInstanceId)) - -export const deploymentReleaseHistoryQueryKey = (appInstanceId: string) => - consoleQuery.enterprise.appDeploy.listReleases.key(deploymentAppInstanceQueryKey(appInstanceId)) - -export const deploymentAccessConfigQueryKey = (appInstanceId: string) => - consoleQuery.enterprise.appDeploy.getAppInstanceAccess.key(deploymentAppInstanceQueryKey(appInstanceId)) - -export const deploymentEnvironmentAccessPolicyQueryKeyForEnvironment = ( - appInstanceId: string, - environmentId: string, -) => - consoleQuery.enterprise.appDeploy.getEnvironmentAccessPolicy.key( - deploymentEnvironmentAccessPolicyQueryKey(appInstanceId, environmentId), - ) - -export const deploymentEnvironmentAccessPoliciesQueryKey = (appInstanceId: string) => - consoleQuery.enterprise.appDeploy.getEnvironmentAccessPolicy.key(deploymentAppInstanceQueryKey(appInstanceId)) - -export const deploymentInstanceIdentityQueryKeys = (appInstanceId: string) => [ - deploymentsListQueryKey(), - deploymentOverviewQueryKey(appInstanceId), - deploymentSettingsQueryKey(appInstanceId), -] - -export const deploymentInstanceStateQueryKeys = (appInstanceId: string) => [ - deploymentsListQueryKey(), - deploymentOverviewQueryKey(appInstanceId), - deploymentEnvironmentDeploymentsQueryKey(appInstanceId), - deploymentReleaseHistoryQueryKey(appInstanceId), - deploymentAccessConfigQueryKey(appInstanceId), -] - -export const deploymentInstanceDetailQueryKeys = (appInstanceId: string) => [ - deploymentOverviewQueryKey(appInstanceId), - deploymentSettingsQueryKey(appInstanceId), - deploymentEnvironmentDeploymentsQueryKey(appInstanceId), - deploymentReleaseHistoryQueryKey(appInstanceId), - deploymentAccessConfigQueryKey(appInstanceId), - deploymentEnvironmentAccessPoliciesQueryKey(appInstanceId), -] - -export const deploymentAccessStateQueryKeys = (appInstanceId: string) => [ - deploymentOverviewQueryKey(appInstanceId), - deploymentAccessConfigQueryKey(appInstanceId), -] - -export const deploymentOverviewQueryOptions = (appInstanceId?: string) => - consoleQuery.enterprise.appDeploy.getAppInstanceOverview.queryOptions({ - input: appInstanceId - ? { params: { appInstanceId } } - : skipToken, - }) - -export const deploymentEnvironmentDeploymentsQueryOptions = (appInstanceId?: string) => - consoleQuery.enterprise.appDeploy.listRuntimeInstances.queryOptions({ - input: appInstanceId - ? { params: { appInstanceId } } - : skipToken, - }) - -export const deploymentReleaseHistoryQueryOptions = (appInstanceId?: string) => - consoleQuery.enterprise.appDeploy.listReleases.queryOptions({ - input: appInstanceId - ? { - params: { appInstanceId }, - query: { - pageNumber: 1, - resultsPerPage: DEPLOYMENT_PAGE_SIZE, - }, - } - : skipToken, - }) diff --git a/web/service/client.ts b/web/service/client.ts index 65c2b1fc68..00fc09ec3e 100644 --- a/web/service/client.ts +++ b/web/service/client.ts @@ -84,4 +84,7 @@ const consoleLink = new OpenAPILink(consoleRouterContract, { }) export const consoleClient: JsonifiedClient> = createORPCClient(consoleLink) -export const consoleQuery = createTanstackQueryUtils(consoleClient, { path: ['console'] }) +export const consoleQuery = createTanstackQueryUtils(consoleClient, { + path: ['console'], + experimental_defaults: { }, +})