From 2c34f9849d7dd5c23776b56ad40fc99d066aa502 Mon Sep 17 00:00:00 2001 From: Stephen Zhou <38493346+hyoban@users.noreply.github.com> Date: Thu, 30 Apr 2026 11:18:56 +0800 Subject: [PATCH] tweaks --- web/contract/console/deployments.ts | 30 ++++-------- .../deployments/components/deploy-drawer.tsx | 24 +++++----- .../deployments/components/rollback-modal.tsx | 38 ++++++--------- .../deployments/detail/access-tab.tsx | 12 +---- .../deployments/detail/deploy-tab.tsx | 31 +++---------- web/features/deployments/detail/index.tsx | 46 +++++++------------ .../deployments/detail/overview-tab.tsx | 22 ++------- .../deployments/detail/settings-tab.tsx | 39 ++++------------ .../deployments/detail/versions-tab.tsx | 8 +--- .../versions-tab/deploy-release-menu.tsx | 34 ++++---------- web/features/deployments/list/index.tsx | 19 ++------ web/features/deployments/nav/index.tsx | 27 +++++------ web/features/deployments/queries.ts | 29 ++++++++++++ web/features/deployments/utils.ts | 14 +++--- 14 files changed, 136 insertions(+), 237 deletions(-) create mode 100644 web/features/deployments/queries.ts diff --git a/web/contract/console/deployments.ts b/web/contract/console/deployments.ts index b04ba8e7cd..f4be75957d 100644 --- a/web/contract/console/deployments.ts +++ b/web/contract/console/deployments.ts @@ -41,11 +41,6 @@ export type ConsoleUser = { displayName?: string } -export type ConsoleWarning = { - code?: string - message?: string -} - export type DeploymentStatusCount = { status?: string count?: number @@ -60,10 +55,8 @@ export type AppInstanceFilter = { export type AppDeploymentSummary = { id?: string name?: string - description?: string icon?: string mode?: string - sourceAppId?: string sourceAppName?: string statuses?: DeploymentStatusCount[] lastDeployedAt?: Timestamp | null @@ -92,7 +85,6 @@ export type AppInstanceOverview = { sourceAppId?: string sourceAppName?: string mode?: string - icon?: string createdAt?: Timestamp } @@ -114,7 +106,6 @@ export type GetDeploymentOverviewReply = { instance?: AppInstanceOverview deployments?: DeploymentSummaryRow[] access?: AccessSummary - warnings?: ConsoleWarning[] } export type RuntimeBindingDisplay = { @@ -151,7 +142,6 @@ export type EnvironmentDeploymentRow = { export type ListEnvironmentDeploymentsReply = { data?: EnvironmentDeploymentRow[] - pagination?: Pagination } export type EnvironmentOption = ConsoleEnvironmentSummary & { @@ -330,19 +320,21 @@ export type UpdateAppInstanceReply = GetAppInstanceSettingsReply export type DeleteAppInstanceReply = Record +export type ListAppDeploymentsQuery = { + environmentId?: string + notDeployed?: boolean + query?: string + pageNumber?: number + resultsPerPage?: number +} + export const listAppDeploymentsContract = base .route({ path: '/enterprise/app-instances', method: 'GET', }) .input(type<{ - query?: { - environmentId?: string - notDeployed?: boolean - query?: string - pageNumber?: number - resultsPerPage?: number - } + query?: ListAppDeploymentsQuery }>()) .output(type()) @@ -375,10 +367,6 @@ export const runtimeInstancesContract = base }) .input(type<{ params: { appInstanceId: string } - query?: { - pageNumber?: number - resultsPerPage?: number - } }>()) .output(type()) diff --git a/web/features/deployments/components/deploy-drawer.tsx b/web/features/deployments/components/deploy-drawer.tsx index 0ba3ebfe30..df16a62135 100644 --- a/web/features/deployments/components/deploy-drawer.tsx +++ b/web/features/deployments/components/deploy-drawer.tsx @@ -8,11 +8,11 @@ import { useTranslation } from 'react-i18next' import { consoleQuery } from '@/service/client' import { DEPLOYMENT_PAGE_SIZE, - SOURCE_APPS_PAGE_SIZE, } from '../data' import { useStartDeployment } from '../hooks/use-deployment-mutations' +import { deploymentEnvironmentDeploymentsQueryOptions } from '../queries' import { useDeploymentsStore } from '../store' -import { environmentOptionsFromList } from '../utils' +import { environmentOptionsFromDeploymentRows } from '../utils' import { DeployForm } from './deploy-drawer/form' const DeployDrawer: FC = () => { @@ -22,15 +22,6 @@ const DeployDrawer: FC = () => { const closeDeployDrawer = useDeploymentsStore(state => state.closeDeployDrawer) const startDeploy = useStartDeployment() const open = drawer.open - const listQuery = useQuery(consoleQuery.deployments.list.queryOptions({ - input: { - query: { - pageNumber: 1, - resultsPerPage: SOURCE_APPS_PAGE_SIZE, - }, - }, - enabled: open, - })) const { data: releaseHistory } = useQuery(consoleQuery.deployments.releaseHistory.queryOptions({ input: drawerAppId ? { @@ -43,8 +34,15 @@ const DeployDrawer: FC = () => { : skipToken, enabled: open && Boolean(drawerAppId), })) + const { data: environmentDeployments } = useQuery({ + ...deploymentEnvironmentDeploymentsQueryOptions(drawerAppId), + enabled: open && Boolean(drawerAppId), + }) - const environmentOptions = useMemo(() => environmentOptionsFromList(listQuery.data), [listQuery.data]) + const environmentOptions = useMemo( + () => environmentOptionsFromDeploymentRows(environmentDeployments?.data), + [environmentDeployments?.data], + ) const environments = environmentOptions const releases = releaseHistory?.data?.map(row => row.release ?? row).filter(release => release.id) ?? [] const defaultReleaseId = releases[0]?.id @@ -59,7 +57,7 @@ const DeployDrawer: FC = () => { {!drawerAppId ?
{t('deployDrawer.notFound')}
- : !releaseHistory + : (!releaseHistory || !environmentDeployments) ? (
diff --git a/web/features/deployments/components/rollback-modal.tsx b/web/features/deployments/components/rollback-modal.tsx index 9d30c73097..8c9d6ba52c 100644 --- a/web/features/deployments/components/rollback-modal.tsx +++ b/web/features/deployments/components/rollback-modal.tsx @@ -15,20 +15,21 @@ import { useTranslation } from 'react-i18next' import { consoleQuery } from '@/service/client' import { DEPLOYMENT_PAGE_SIZE, - SOURCE_APPS_PAGE_SIZE, } from '../data' import { useStartDeployment } from '../hooks/use-deployment-mutations' +import { + deploymentEnvironmentDeploymentsQueryOptions, + deploymentOverviewQueryOptions, +} from '../queries' import { useDeploymentsStore } from '../store' import { activeRelease, deployedRows, environmentId, environmentName, - environmentOptionsFromList, + environmentOptionsFromDeploymentRows, releaseCommit, releaseLabel, - sourceAppMapFromApps, - sourceAppsFromList, toAppInfoFromOverview, } from '../utils' @@ -58,30 +59,22 @@ const RollbackModal: FC = () => { }, } : undefined - const { data: overview } = useQuery(consoleQuery.deployments.overview.queryOptions({ - input: appInput ?? skipToken, + const { data: overview } = useQuery({ + ...deploymentOverviewQueryOptions(modal.appId), enabled: modal.open && Boolean(modal.appId), - })) - const { data: environmentDeployments } = useQuery(consoleQuery.deployments.environmentDeployments.queryOptions({ - input: pagedInput ?? skipToken, + }) + const { data: environmentDeployments } = useQuery({ + ...deploymentEnvironmentDeploymentsQueryOptions(modal.appId), enabled: modal.open && Boolean(modal.appId), - })) + }) const { data: releaseHistory } = useQuery(consoleQuery.deployments.releaseHistory.queryOptions({ input: pagedInput ?? skipToken, enabled: modal.open && Boolean(modal.appId), })) - const listQuery = useQuery(consoleQuery.deployments.list.queryOptions({ - input: { - query: { - pageNumber: 1, - resultsPerPage: SOURCE_APPS_PAGE_SIZE, - }, - }, - enabled: modal.open, - })) - const sourceApps = useMemo(() => sourceAppsFromList(listQuery.data), [listQuery.data]) - const appMap = useMemo(() => sourceAppMapFromApps(sourceApps), [sourceApps]) - const environmentOptions = useMemo(() => environmentOptionsFromList(listQuery.data), [listQuery.data]) + const environmentOptions = useMemo( + () => environmentOptionsFromDeploymentRows(environmentDeployments?.data), + [environmentDeployments?.data], + ) const currentRow = deployedRows(environmentDeployments?.data) .find(row => environmentId(row.environment) === modal.environmentId) @@ -92,7 +85,6 @@ const RollbackModal: FC = () => { const environment = currentRow?.environment ?? environmentOptions.find(env => env.id === modal.environmentId) const app = toAppInfoFromOverview(overview?.instance) - ?? (modal.appId ? appMap.get(modal.appId) : undefined) const confirm = () => { if (!modal.appId || !modal.environmentId || !modal.targetReleaseId) diff --git a/web/features/deployments/detail/access-tab.tsx b/web/features/deployments/detail/access-tab.tsx index f3575ffdea..b8fafe5c3b 100644 --- a/web/features/deployments/detail/access-tab.tsx +++ b/web/features/deployments/detail/access-tab.tsx @@ -9,13 +9,13 @@ import type { import { useQuery } from '@tanstack/react-query' import { useMemo, useState } from 'react' import { consoleQuery } from '@/service/client' -import { DEPLOYMENT_PAGE_SIZE } from '../data' import { useGenerateDeploymentApiKey, useRevokeDeploymentApiKey, useSetEnvironmentAccessPolicy, useToggleDeploymentAccessChannel, } from '../hooks/use-deployment-mutations' +import { deploymentEnvironmentDeploymentsQueryOptions } from '../queries' import { deployedRows, } from '../utils' @@ -43,15 +43,7 @@ const AccessTab: FC = ({ instanceId: appId }) => { const { data: accessConfig } = useQuery(consoleQuery.deployments.accessConfig.queryOptions({ input: appInput, })) - const { data: environmentDeployments } = useQuery(consoleQuery.deployments.environmentDeployments.queryOptions({ - input: { - ...appInput, - query: { - pageNumber: 1, - resultsPerPage: DEPLOYMENT_PAGE_SIZE, - }, - }, - })) + const { data: environmentDeployments } = useQuery(deploymentEnvironmentDeploymentsQueryOptions(appId)) 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 94c07a0aa5..304ed33f1c 100644 --- a/web/features/deployments/detail/deploy-tab.tsx +++ b/web/features/deployments/detail/deploy-tab.tsx @@ -11,12 +11,8 @@ import { import { useQuery } from '@tanstack/react-query' import { useMemo, useState } from 'react' import { useTranslation } from 'react-i18next' -import { consoleQuery } from '@/service/client' -import { - DEPLOYMENT_PAGE_SIZE, - SOURCE_APPS_PAGE_SIZE, -} from '../data' import { useUndeployDeployment } from '../hooks/use-deployment-mutations' +import { deploymentEnvironmentDeploymentsQueryOptions } from '../queries' import { useDeploymentsStore } from '../store' import { activeRelease, @@ -27,7 +23,7 @@ import { environmentId, environmentMode, environmentName, - environmentOptionsFromList, + environmentOptionsFromDeploymentRows, isUndeployedDeploymentRow, releaseCommit, releaseLabel, @@ -43,26 +39,13 @@ type DeployTabProps = { const DeployTab: FC = ({ instanceId: appId }) => { const { t } = useTranslation('deployments') - const { data: environmentDeployments } = useQuery(consoleQuery.deployments.environmentDeployments.queryOptions({ - input: { - params: { appInstanceId: appId }, - query: { - pageNumber: 1, - resultsPerPage: DEPLOYMENT_PAGE_SIZE, - }, - }, - })) + const { data: environmentDeployments } = useQuery(deploymentEnvironmentDeploymentsQueryOptions(appId)) const openDeployDrawer = useDeploymentsStore(state => state.openDeployDrawer) const undeployDeployment = useUndeployDeployment() - const listQuery = useQuery(consoleQuery.deployments.list.queryOptions({ - input: { - query: { - pageNumber: 1, - resultsPerPage: SOURCE_APPS_PAGE_SIZE, - }, - }, - })) - const environmentOptions = useMemo(() => environmentOptionsFromList(listQuery.data), [listQuery.data]) + const environmentOptions = useMemo( + () => environmentOptionsFromDeploymentRows(environmentDeployments?.data), + [environmentDeployments?.data], + ) const rows = useMemo( () => environmentDeployments?.data?.filter(row => row.environment?.id) ?? [], diff --git a/web/features/deployments/detail/index.tsx b/web/features/deployments/detail/index.tsx index 87d8829895..ca25ecdbdd 100644 --- a/web/features/deployments/detail/index.tsx +++ b/web/features/deployments/detail/index.tsx @@ -9,17 +9,13 @@ 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 { - SOURCE_APPS_PAGE_SIZE, -} from '../data' -import { - deploymentSummariesFromList, - sourceAppMapFromApps, - sourceAppsFromList, -} from '../utils' + deploymentEnvironmentDeploymentsQueryOptions, + deploymentOverviewQueryOptions, +} from '../queries' +import { deployedRows, deploymentStatus, toAppInfoFromOverview } from '../utils' import { DeploymentSidebar } from './deployment-sidebar' import { isInstanceDetailTabKey } from './tabs' @@ -35,31 +31,20 @@ const InstanceDetail: FC = ({ instanceId, children }) => { const selectedSegment = useSelectedLayoutSegment() const selectedTab = selectedSegment ?? undefined const activeTab: InstanceDetailTabKey = isInstanceDetailTabKey(selectedTab) ? selectedTab : 'overview' - const listQuery = useQuery(consoleQuery.deployments.list.queryOptions({ - input: { - query: { - pageNumber: 1, - resultsPerPage: SOURCE_APPS_PAGE_SIZE, - }, - }, - })) + const overviewQuery = useQuery(deploymentOverviewQueryOptions(instanceId)) + const { data: environmentDeployments } = useQuery(deploymentEnvironmentDeploymentsQueryOptions(instanceId)) useDocumentTitle(t('documentTitle.detail')) - const apps = useMemo(() => sourceAppsFromList(listQuery.data), [listQuery.data]) - const appMap = useMemo(() => sourceAppMapFromApps(apps), [apps]) - const summaries = useMemo(() => deploymentSummariesFromList(listQuery.data), [listQuery.data]) const app = useMemo( - () => appMap.get(instanceId), - [instanceId, appMap], + () => toAppInfoFromOverview(overviewQuery.data?.instance), + [overviewQuery.data?.instance], + ) + const deploymentRows = useMemo( + () => deployedRows(environmentDeployments?.data), + [environmentDeployments?.data], ) - const summary = summaries[instanceId] - const statusCount = (status: string) => - summary?.statuses?.find(item => item.status === status)?.count ?? 0 - const envCount = summary?.statuses - ?.filter(item => item.status !== 'undeployed') - .reduce((total, item) => total + (item.count ?? 0), 0) ?? 0 - if (!app && listQuery.isLoading) { + if (!app && overviewQuery.isLoading) { return (
@@ -79,8 +64,9 @@ const InstanceDetail: FC = ({ instanceId, children }) => { ) } - const deployingCount = statusCount('deploying') - const failedCount = statusCount('failed') + statusCount('deploy_failed') + const deployingCount = deploymentRows.filter(row => deploymentStatus(row) === 'deploying').length + const failedCount = deploymentRows.filter(row => deploymentStatus(row) === 'deploy_failed').length + const envCount = deploymentRows.length const appModeLabel = app ? getAppModeLabel(app.mode, tCommon) : t('detail.sourceAppDeleted') return ( diff --git a/web/features/deployments/detail/overview-tab.tsx b/web/features/deployments/detail/overview-tab.tsx index cb9695ac04..d3d882865e 100644 --- a/web/features/deployments/detail/overview-tab.tsx +++ b/web/features/deployments/detail/overview-tab.tsx @@ -9,14 +9,10 @@ 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 { - SOURCE_APPS_PAGE_SIZE, -} from '../data' +import { deploymentOverviewQueryOptions } from '../queries' import { useDeploymentsStore } from '../store' import { releaseLabel, - sourceAppMapFromApps, - sourceAppsFromList, toAppInfoFromOverview, webappUrl, } from '../utils' @@ -101,24 +97,12 @@ const OverviewTab: FC = ({ instanceId }) => { const { t: tCommon } = useTranslation() const router = useRouter() const input = { params: { appInstanceId: instanceId } } - const { data: overview } = useQuery(consoleQuery.deployments.overview.queryOptions({ - input, - })) + const { data: overview } = useQuery(deploymentOverviewQueryOptions(instanceId)) 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 sourceApps = useMemo(() => sourceAppsFromList(listQuery.data), [listQuery.data]) - const appMap = useMemo(() => sourceAppMapFromApps(sourceApps), [sourceApps]) - const app = toAppInfoFromOverview(overview?.instance) ?? appMap.get(instanceId) + const app = toAppInfoFromOverview(overview?.instance) const overviewApp = overview?.instance const deployments = useMemo( () => overview?.deployments?.filter(row => row.environment?.id && row.status?.toLowerCase() !== 'undeployed') ?? [], diff --git a/web/features/deployments/detail/settings-tab.tsx b/web/features/deployments/detail/settings-tab.tsx index 0d9cc8466d..f4c45a96fd 100644 --- a/web/features/deployments/detail/settings-tab.tsx +++ b/web/features/deployments/detail/settings-tab.tsx @@ -18,18 +18,16 @@ import { useMemo, useState } from 'react' import { useTranslation } from 'react-i18next' import { useRouter } from '@/next/navigation' import { consoleQuery } from '@/service/client' -import { - DEPLOYMENT_PAGE_SIZE, - SOURCE_APPS_PAGE_SIZE, -} from '../data' import { useDeleteDeploymentInstance, useUpdateDeploymentInstance, } from '../hooks/use-deployment-mutations' +import { + deploymentEnvironmentDeploymentsQueryOptions, + deploymentOverviewQueryOptions, +} from '../queries' import { deployedRows, - sourceAppMapFromApps, - sourceAppsFromList, toAppInfoFromOverview, } from '../utils' @@ -190,29 +188,12 @@ const SettingsTab: FC = ({ instanceId }) => { const updateInstance = useUpdateDeploymentInstance() const deleteInstance = useDeleteDeploymentInstance() const appInput = { params: { appInstanceId: instanceId } } - const listQuery = useQuery(consoleQuery.deployments.list.queryOptions({ - input: { - query: { - pageNumber: 1, - resultsPerPage: SOURCE_APPS_PAGE_SIZE, - }, - }, - })) - 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 { data: overview } = useQuery(deploymentOverviewQueryOptions(instanceId)) + const { data: environmentDeployments } = useQuery(deploymentEnvironmentDeploymentsQueryOptions(instanceId)) + const app = useMemo( + () => toAppInfoFromOverview(overview?.instance), + [overview?.instance], + ) const settingsQuery = useQuery(consoleQuery.deployments.settings.queryOptions({ input: appInput, })) diff --git a/web/features/deployments/detail/versions-tab.tsx b/web/features/deployments/detail/versions-tab.tsx index db9b64e393..28c6626ad4 100644 --- a/web/features/deployments/detail/versions-tab.tsx +++ b/web/features/deployments/detail/versions-tab.tsx @@ -7,6 +7,7 @@ import { useMemo } from 'react' import { useTranslation } from 'react-i18next' import { consoleQuery } from '@/service/client' import { DEPLOYMENT_PAGE_SIZE } from '../data' +import { deploymentEnvironmentDeploymentsQueryOptions } from '../queries' import { deployedRows, formatDate, @@ -35,12 +36,7 @@ const VersionsTab: FC = ({ instanceId: appId }) => { query, }, })) - const { data: environmentDeployments } = useQuery(consoleQuery.deployments.environmentDeployments.queryOptions({ - input: { - params: { appInstanceId: appId }, - query, - }, - })) + const { data: environmentDeployments } = useQuery(deploymentEnvironmentDeploymentsQueryOptions(appId)) const releaseRows = useMemo( () => releaseHistory?.data?.filter(row => (row.release ?? row).id) ?? [], [releaseHistory?.data], 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 e06f6ea3db..def1bb02f3 100644 --- a/web/features/deployments/detail/versions-tab/deploy-release-menu.tsx +++ b/web/features/deployments/detail/versions-tab/deploy-release-menu.tsx @@ -11,11 +11,7 @@ import { import { useQuery } from '@tanstack/react-query' import { useMemo, useState } from 'react' import { useTranslation } from 'react-i18next' -import { consoleQuery } from '@/service/client' -import { - DEPLOYMENT_PAGE_SIZE, - SOURCE_APPS_PAGE_SIZE, -} from '../../data' +import { deploymentEnvironmentDeploymentsQueryOptions } from '../../queries' import { useDeploymentsStore } from '../../store' import { activeRelease, @@ -24,7 +20,7 @@ import { deploymentStatus, environmentId, environmentName, - environmentOptionsFromList, + environmentOptionsFromDeploymentRows, } from '../../utils' type DeployReleaseMenuProps = { @@ -37,27 +33,15 @@ export const DeployReleaseMenu: FC = ({ appId, releaseId const openDeployDrawer = useDeploymentsStore(state => state.openDeployDrawer) const openRollbackModal = useDeploymentsStore(state => state.openRollbackModal) const [open, setOpen] = useState(false) - const listQuery = useQuery(consoleQuery.deployments.list.queryOptions({ - input: { - query: { - pageNumber: 1, - resultsPerPage: SOURCE_APPS_PAGE_SIZE, - }, - }, + const { data: environmentDeployments } = useQuery({ + ...deploymentEnvironmentDeploymentsQueryOptions(appId), 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 environmentOptions = useMemo( + () => environmentOptionsFromDeploymentRows(environmentDeployments?.data), + [environmentDeployments?.data], + ) const environments = environmentOptions.filter(env => env.id) const deploymentRows = deployedRows(environmentDeployments?.data) diff --git a/web/features/deployments/list/index.tsx b/web/features/deployments/list/index.tsx index a22faf7920..d748eb2b88 100644 --- a/web/features/deployments/list/index.tsx +++ b/web/features/deployments/list/index.tsx @@ -7,13 +7,10 @@ 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 { - SOURCE_APPS_PAGE_SIZE, -} from '../data' +import { deploymentsListQueryOptions } from '../queries' import { useDeploymentsStore } from '../store' import { deploymentSummariesFromList, @@ -50,16 +47,10 @@ const DeploymentsMain: FC = () => { const requestedEnvironmentId = envFilter !== 'all' && envFilter !== 'not-deployed' ? envFilter : 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 listQuery = useQuery(deploymentsListQueryOptions({ + ...(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]) diff --git a/web/features/deployments/nav/index.tsx b/web/features/deployments/nav/index.tsx index 26e641d58e..5b7cd1945c 100644 --- a/web/features/deployments/nav/index.tsx +++ b/web/features/deployments/nav/index.tsx @@ -2,13 +2,15 @@ import type { NavItem } from '@/app/components/header/nav/nav-selector' import type { AppIconType, AppModeEnum } from '@/types/app' -import { skipToken, useQuery } from '@tanstack/react-query' +import { 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 { consoleQuery } from '@/service/client' -import { SOURCE_APPS_PAGE_SIZE } from '../data' +import { + deploymentOverviewQueryOptions, + deploymentsListQueryOptions, +} from '../queries' import { useDeploymentsStore } from '../store' import { sourceAppsFromList, @@ -24,23 +26,16 @@ const DeploymentsNav = () => { const instanceId = params?.instanceId const openCreateInstanceModal = useDeploymentsStore(state => state.openCreateInstanceModal) - const { data: currentInstance } = useQuery(consoleQuery.deployments.overview.queryOptions({ - input: instanceId - ? { params: { appInstanceId: instanceId } } - : skipToken, + const { data: currentInstance } = useQuery({ + ...deploymentOverviewQueryOptions(instanceId), enabled: isActive && Boolean(instanceId), select: data => toAppInfoFromOverview(data.instance), - })) + }) - const listQuery = useQuery(consoleQuery.deployments.list.queryOptions({ - input: { - query: { - pageNumber: 1, - resultsPerPage: SOURCE_APPS_PAGE_SIZE, - }, - }, + const listQuery = useQuery({ + ...deploymentsListQueryOptions(), 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 new file mode 100644 index 0000000000..b0d95f7bb1 --- /dev/null +++ b/web/features/deployments/queries.ts @@ -0,0 +1,29 @@ +import type { ListAppDeploymentsQuery } from '@/contract/console/deployments' +import { skipToken } from '@tanstack/react-query' +import { consoleQuery } from '@/service/client' +import { SOURCE_APPS_PAGE_SIZE } from './data' + +export const deploymentsListQueryOptions = (query: ListAppDeploymentsQuery = {}) => + consoleQuery.deployments.list.queryOptions({ + input: { + query: { + pageNumber: 1, + resultsPerPage: SOURCE_APPS_PAGE_SIZE, + ...query, + }, + }, + }) + +export const deploymentOverviewQueryOptions = (appInstanceId?: string) => + consoleQuery.deployments.overview.queryOptions({ + input: appInstanceId + ? { params: { appInstanceId } } + : skipToken, + }) + +export const deploymentEnvironmentDeploymentsQueryOptions = (appInstanceId?: string) => + consoleQuery.deployments.environmentDeployments.queryOptions({ + input: appInstanceId + ? { params: { appInstanceId } } + : skipToken, + }) diff --git a/web/features/deployments/utils.ts b/web/features/deployments/utils.ts index edad6ff629..8ef2a4d619 100644 --- a/web/features/deployments/utils.ts +++ b/web/features/deployments/utils.ts @@ -125,8 +125,6 @@ export function toAppInfoFromSummary(summary: AppDeploymentSummary): AppInfo | u mode: (summary.mode || 'workflow') as AppMode, iconType: 'emoji', icon: summary.icon, - description: summary.description ?? undefined, - sourceAppId: summary.sourceAppId, sourceAppName: summary.sourceAppName, } } @@ -140,7 +138,6 @@ export function toAppInfoFromOverview(instance?: AppInstanceOverview): AppInfo | name: instance.name ?? instance.id, mode: (instance.mode || 'workflow') as AppMode, iconType: 'emoji', - icon: instance.icon, description: instance.description ?? undefined, sourceAppId: instance.sourceAppId, sourceAppName: instance.sourceAppName, @@ -153,10 +150,6 @@ export const sourceAppsFromList = (response?: ListAppDeploymentsReply) => { .filter((app): app is AppInfo => Boolean(app)) } -export const sourceAppMapFromApps = (apps: AppInfo[]) => { - return new Map(apps.map(app => [app.id, app])) -} - export const deploymentSummariesFromList = (response?: ListAppDeploymentsReply): Record => { return Object.fromEntries( (response?.data ?? []) @@ -176,6 +169,13 @@ export const environmentOptionsFromList = (response?: ListAppDeploymentsReply): })) } +export const environmentOptionsFromDeploymentRows = (rows?: EnvironmentDeploymentRow[]): EnvironmentOption[] => { + return rows + ?.map(row => row.environment) + .filter((environment): environment is ConsoleEnvironmentSummary => Boolean(environment?.id)) + .map(environment => ({ ...environment })) ?? [] +} + export const accessModeToPermissionKey = (mode?: string): AccessPermissionKind => { const normalized = mode?.toLowerCase() ?? '' if (normalized === 'private')