opensource/dify
2
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-05-09 21:28:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

tweaks

Browse Source
This commit is contained in:
Stephen Zhou 2026-05-08 16:49:51 +08:00
parent a223869a23
commit 7a957b18e8
No known key found for this signature in database
26 changed files with 160 additions and 160 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
web/app/(commonLayout)/deployments/[instanceId]/access/page.tsx → web/app/(commonLayout)/deployments/[appInstanceId]/access/page.tsx
View File

@ -1,8 +1,8 @@
import { AccessTab } from '@/features/deployments/detail/access-tab'
export default async function InstanceDetailAccessPage({ params }: {
params: Promise<{ instanceId: string }>
params: Promise<{ appInstanceId: string }>
}) {
const { instanceId } = await params
return <AccessTab instanceId={instanceId} />
const { appInstanceId } = await params
return <AccessTab appInstanceId={appInstanceId} />
}

6
web/app/(commonLayout)/deployments/[instanceId]/deploy/page.tsx → web/app/(commonLayout)/deployments/[appInstanceId]/deploy/page.tsx
View File

@ -1,8 +1,8 @@
import { DeployTab } from '@/features/deployments/detail/deploy-tab'
export default async function InstanceDetailDeployPage({ params }: {
params: Promise<{ instanceId: string }>
params: Promise<{ appInstanceId: string }>
}) {
const { instanceId } = await params
return <DeployTab instanceId={instanceId} />
const { appInstanceId } = await params
return <DeployTab appInstanceId={appInstanceId} />
}

6
web/app/(commonLayout)/deployments/[instanceId]/layout.tsx → web/app/(commonLayout)/deployments/[appInstanceId]/layout.tsx
View File

@ -3,12 +3,12 @@ import { InstanceDetail } from '@/features/deployments/detail'
export default async function InstanceDetailLayout({ children, params }: {
children: ReactNode
params: Promise<{ instanceId: string }>
params: Promise<{ appInstanceId: string }>
}) {
const { instanceId } = await params
const { appInstanceId } = await params
return (
<InstanceDetail instanceId={instanceId}>
<InstanceDetail appInstanceId={appInstanceId}>
{children}
</InstanceDetail>
)

6
web/app/(commonLayout)/deployments/[instanceId]/overview/page.tsx → web/app/(commonLayout)/deployments/[appInstanceId]/overview/page.tsx
View File

@ -1,8 +1,8 @@
import { OverviewTab } from '@/features/deployments/detail/overview-tab'
export default async function InstanceDetailOverviewPage({ params }: {
params: Promise<{ instanceId: string }>
params: Promise<{ appInstanceId: string }>
}) {
const { instanceId } = await params
return <OverviewTab instanceId={instanceId} />
const { appInstanceId } = await params
return <OverviewTab appInstanceId={appInstanceId} />
}

8
web/app/(commonLayout)/deployments/[appInstanceId]/page.tsx Normal file
View File

@ -0,0 +1,8 @@
import { redirect } from '@/next/navigation'
export default async function InstanceDetailPage({ params }: {
params: Promise<{ appInstanceId: string }>
}) {
const { appInstanceId } = await params
redirect(`/deployments/${appInstanceId}/overview`)
}

6
web/app/(commonLayout)/deployments/[instanceId]/settings/page.tsx → web/app/(commonLayout)/deployments/[appInstanceId]/settings/page.tsx
View File

@ -1,8 +1,8 @@
import { SettingsTab } from '@/features/deployments/detail/settings-tab'
export default async function InstanceDetailSettingsPage({ params }: {
params: Promise<{ instanceId: string }>
params: Promise<{ appInstanceId: string }>
}) {
const { instanceId } = await params
return <SettingsTab instanceId={instanceId} />
const { appInstanceId } = await params
return <SettingsTab appInstanceId={appInstanceId} />
}

6
web/app/(commonLayout)/deployments/[instanceId]/versions/page.tsx → web/app/(commonLayout)/deployments/[appInstanceId]/versions/page.tsx
View File

@ -1,8 +1,8 @@
import { VersionsTab } from '@/features/deployments/detail/versions-tab'
export default async function InstanceDetailVersionsPage({ params }: {
params: Promise<{ instanceId: string }>
params: Promise<{ appInstanceId: string }>
}) {
const { instanceId } = await params
return <VersionsTab instanceId={instanceId} />
const { appInstanceId } = await params
return <VersionsTab appInstanceId={appInstanceId} />
}

8
web/app/(commonLayout)/deployments/[instanceId]/page.tsx
View File

@ -1,8 +0,0 @@
import { redirect } from '@/next/navigation'
export default async function InstanceDetailPage({ params }: {
params: Promise<{ instanceId: string }>
}) {
const { instanceId } = await params
redirect(`/deployments/${instanceId}/overview`)
}

14
web/features/deployments/components/create-instance-modal.tsx
View File

@ -47,7 +47,7 @@ type AppPickerProps = {
apps: StudioSourceApp[]
isLoading: boolean
value: string
onChange: (appId: string) => void
onChange: (sourceAppId: string) => void
}
function AppPicker({ apps, isLoading, value, onChange }: AppPickerProps) {
@ -225,10 +225,10 @@ function CreateInstanceForm() {
}))
const apps = (appList?.data ?? []).map(toStudioSourceAppInfo)
const [appId, setAppId] = useState<string>('')
const [sourceAppId, setSourceAppId] = useState<string>('')
const selectedApp = apps.find(a => a.id === appId)
const canCreate = Boolean(appId && !createInstance.isPending)
const selectedApp = apps.find(a => a.id === sourceAppId)
const canCreate = Boolean(sourceAppId && !createInstance.isPending)
const handleCreate = async (form: HTMLFormElement) => {
if (!canCreate)
@ -243,7 +243,7 @@ function CreateInstanceForm() {
try {
const result = await createInstance.mutateAsync({
body: {
sourceAppId: appId,
sourceAppId,
name: name.trim(),
description: description.trim() || undefined,
},
@ -280,8 +280,8 @@ function CreateInstanceForm() {
<AppPicker
apps={apps}
isLoading={isLoading}
value={appId}
onChange={setAppId}
value={sourceAppId}
onChange={setSourceAppId}
/>
</div>

10
web/features/deployments/detail/access-tab.tsx
View File

@ -4,14 +4,14 @@ import { AccessChannelsSection } from './access-tab/channels-section'
import { DeveloperApiSection } from './access-tab/developer-api-section'
import { AccessPermissionsSection } from './access-tab/permissions-section'
export function AccessTab({ instanceId: appId }: {
instanceId: string
export function AccessTab({ appInstanceId }: {
appInstanceId: string
}) {
return (
<div className="flex w-full max-w-[960px] flex-col gap-5 p-6">
<AccessPermissionsSection appId={appId} />
<AccessChannelsSection appId={appId} />
<DeveloperApiSection appId={appId} />
<AccessPermissionsSection appInstanceId={appInstanceId} />
<AccessChannelsSection appInstanceId={appInstanceId} />
<DeveloperApiSection appInstanceId={appInstanceId} />
</div>
)
}

22
web/features/deployments/detail/access-tab/api-keys.tsx
View File

@ -18,8 +18,8 @@ import { createdDeveloperApiTokenAtom } from '../../store'
import { environmentName } from '../../utils'
import { useCopyFeedback } from './use-copy-feedback'
function ApiKeyRow({ appId, apiKey }: {
appId: string
function ApiKeyRow({ appInstanceId, apiKey }: {
appInstanceId: string
apiKey: DeveloperApiKeyRow
}) {
const { t } = useTranslation('deployments')
@ -31,7 +31,7 @@ function ApiKeyRow({ appId, apiKey }: {
async function revealApiKey(apiKeyId: string) {
const response = await consoleClient.enterprise.appDeploy.revealDeveloperApiKey({
params: {
appInstanceId: appId,
appInstanceId,
apiKeyId,
},
})
@ -46,7 +46,7 @@ function ApiKeyRow({ appId, apiKey }: {
revokeApiKey.mutate({
params: {
appInstanceId: appId,
appInstanceId,
apiKeyId: apiKey.id,
},
})
@ -100,8 +100,8 @@ function ApiKeyRow({ appId, apiKey }: {
)
}
export function ApiKeyList({ appId, apiKeys }: {
appId: string
export function ApiKeyList({ appInstanceId, apiKeys }: {
appInstanceId: string
apiKeys: DeveloperApiKeyRow[]
}) {
return (
@ -109,7 +109,7 @@ export function ApiKeyList({ appId, apiKeys }: {
{apiKeys.map(apiKey => (
<ApiKeyRow
key={apiKey.id}
appId={appId}
appInstanceId={appInstanceId}
apiKey={apiKey}
/>
))}
@ -117,8 +117,8 @@ export function ApiKeyList({ appId, apiKeys }: {
)
}
export function ApiKeyGenerateMenu({ appId, environments, apiKeys }: {
appId: string
export function ApiKeyGenerateMenu({ appInstanceId, environments, apiKeys }: {
appInstanceId: string
environments: ConsoleEnvironment[]
apiKeys: DeveloperApiKeyRow[]
}) {
@ -142,7 +142,7 @@ export function ApiKeyGenerateMenu({ appId, environments, apiKeys }: {
generateApiKey.mutate(
{
params: {
appInstanceId: appId,
appInstanceId,
},
body: {
environmentId,
@ -152,7 +152,7 @@ export function ApiKeyGenerateMenu({ appId, environments, apiKeys }: {
{
onSuccess: (response) => {
if (response.token)
setCreatedApiToken({ appId, token: response.token })
setCreatedApiToken({ appInstanceId, token: response.token })
},
},
)

14
web/features/deployments/detail/access-tab/channels-section.tsx
View File

@ -9,11 +9,11 @@ import { CopyPill, EndpointRow, Section } from './common'
import { getUrlOrigin } from './url'
type AccessChannelsSectionProps = {
appId: string
appInstanceId: string
}
function AccessChannelsSwitch({ appId, checked }: {
appId: string
function AccessChannelsSwitch({ appInstanceId, checked }: {
appInstanceId: string
checked: boolean
}) {
const toggleAccessChannel = useMutation(consoleQuery.enterprise.appDeploy.updateAccessChannels.mutationOptions())
@ -23,7 +23,7 @@ function AccessChannelsSwitch({ appId, checked }: {
checked={checked}
onCheckedChange={(enabled) => {
toggleAccessChannel.mutate({
params: { appInstanceId: appId },
params: { appInstanceId },
body: { enabled },
})
}}
@ -32,12 +32,12 @@ function AccessChannelsSwitch({ appId, checked }: {
}
export function AccessChannelsSection({
appId,
appInstanceId,
}: AccessChannelsSectionProps) {
const { t } = useTranslation('deployments')
const { data: accessConfig } = useQuery(consoleQuery.enterprise.appDeploy.getAppInstanceAccess.queryOptions({
input: {
params: { appInstanceId: appId },
params: { appInstanceId },
},
}))
const runEnabled = accessConfig?.accessChannels?.enabled ?? false
@ -51,7 +51,7 @@ export function AccessChannelsSection({
description={t('access.channels.description')}
action={(
<AccessChannelsSwitch
appId={appId}
appInstanceId={appInstanceId}
checked={runEnabled}
/>
)}

26
web/features/deployments/detail/access-tab/developer-api-section.tsx
View File

@ -11,11 +11,11 @@ import { CopyPill, Section } from './common'
import { useAccessEnvironmentScope } from './use-access-environment-scope'
type DeveloperApiSectionProps = {
appId: string
appInstanceId: string
}
function DeveloperApiSwitch({ appId, checked }: {
appId: string
function DeveloperApiSwitch({ appInstanceId, checked }: {
appInstanceId: string
checked: boolean
}) {
const toggleDeveloperAPI = useMutation(consoleQuery.enterprise.appDeploy.updateDeveloperApi.mutationOptions())
@ -25,7 +25,7 @@ function DeveloperApiSwitch({ appId, checked }: {
checked={checked}
onCheckedChange={(enabled) => {
toggleDeveloperAPI.mutate({
params: { appInstanceId: appId },
params: { appInstanceId },
body: { enabled },
})
}}
@ -33,13 +33,13 @@ function DeveloperApiSwitch({ appId, checked }: {
)
}
function CreatedApiTokenCard({ appId }: {
appId: string
function CreatedApiTokenCard({ appInstanceId }: {
appInstanceId: string
}) {
const { t } = useTranslation('deployments')
const createdApiToken = useAtomValue(createdDeveloperApiTokenAtom)
const setCreatedApiToken = useSetAtom(createdDeveloperApiTokenAtom)
const visibleCreatedApiToken = createdApiToken?.appId === appId
const visibleCreatedApiToken = createdApiToken?.appInstanceId === appInstanceId
? createdApiToken.token
: undefined
@ -75,10 +75,10 @@ function CreatedApiTokenCard({ appId }: {
}
export function DeveloperApiSection({
appId,
appInstanceId,
}: DeveloperApiSectionProps) {
const { t } = useTranslation('deployments')
const { accessConfig, environments } = useAccessEnvironmentScope(appId)
const { accessConfig, environments } = useAccessEnvironmentScope(appInstanceId)
const apiEnabled = accessConfig?.developerApi?.enabled ?? false
const apiUrl = accessConfig?.developerApi?.apiUrl
const apiKeys = accessConfig?.developerApi?.apiKeys ?? []
@ -89,7 +89,7 @@ export function DeveloperApiSection({
description={t('access.api.description')}
action={(
<DeveloperApiSwitch
appId={appId}
appInstanceId={appInstanceId}
checked={apiEnabled}
/>
)}
@ -113,12 +113,12 @@ export function DeveloperApiSection({
</span>
</div>
<ApiKeyGenerateMenu
appId={appId}
appInstanceId={appInstanceId}
environments={environments}
apiKeys={apiKeys}
/>
</div>
<CreatedApiTokenCard appId={appId} />
<CreatedApiTokenCard appInstanceId={appInstanceId} />
{apiKeys.length === 0
? (
<div className="rounded-lg border border-dashed border-components-panel-border bg-components-panel-bg-blur px-4 py-6 text-center system-sm-regular text-text-tertiary">
@ -129,7 +129,7 @@ export function DeveloperApiSection({
)
: (
<ApiKeyList
appId={appId}
appInstanceId={appInstanceId}
apiKeys={apiKeys}
/>
)}

8
web/features/deployments/detail/access-tab/permissions-section.tsx
View File

@ -6,14 +6,14 @@ import { EnvironmentPermissionRow } from './permissions'
import { useAccessEnvironmentScope } from './use-access-environment-scope'
type AccessPermissionsSectionProps = {
appId: string
appInstanceId: string
}
export function AccessPermissionsSection({
appId,
appInstanceId,
}: AccessPermissionsSectionProps) {
const { t } = useTranslation('deployments')
const { environments, policies } = useAccessEnvironmentScope(appId)
const { environments, policies } = useAccessEnvironmentScope(appInstanceId)
return (
<Section
@ -33,7 +33,7 @@ export function AccessPermissionsSection({
return (
<EnvironmentPermissionRow
key={env.id}
appId={appId}
appInstanceId={appInstanceId}
environment={env}
summaryPolicy={policy}
/>

16
web/features/deployments/detail/access-tab/permissions.tsx
View File

@ -171,14 +171,14 @@ function SubjectPill({ subject, disabled, onRemove }: {
}
type SubjectPickerProps = {
appId: string
appInstanceId: string
disabled?: boolean
selectedSubjects: SelectableAccessSubject[]
onChange: (subjects: SelectableAccessSubject[]) => void
}
function SubjectPicker({
appId,
appInstanceId,
disabled,
selectedSubjects,
onChange,
@ -191,7 +191,7 @@ function SubjectPicker({
const subjectsQuery = useQuery(consoleQuery.enterprise.appDeploy.searchAccessSubjects.queryOptions({
input: open
? {
params: { appInstanceId: appId },
params: { appInstanceId },
query: {
keyword: debouncedKeyword.trim() || undefined,
subjectTypes: ['account', 'group'],
@ -292,13 +292,13 @@ function SubjectPicker({
}
type EnvironmentPermissionRowProps = {
appId: string
appInstanceId: string
environment: ConsoleEnvironment
summaryPolicy?: EnvironmentAccessRow
}
export function EnvironmentPermissionRow({
appId,
appInstanceId,
environment,
summaryPolicy,
}: EnvironmentPermissionRowProps) {
@ -309,7 +309,7 @@ export function EnvironmentPermissionRow({
input: environmentId
? {
params: {
appInstanceId: appId,
appInstanceId,
environmentId,
},
}
@ -345,7 +345,7 @@ export function EnvironmentPermissionRow({
try {
await setEnvironmentAccessPolicy.mutateAsync({
params: {
appInstanceId: appId,
appInstanceId,
environmentId,
},
body: {
@ -403,7 +403,7 @@ export function EnvironmentPermissionRow({
<div className="flex flex-col gap-2 pl-0 sm:pl-[152px]">
<div className="flex flex-wrap items-center gap-2">
<SubjectPicker
appId={appId}
appInstanceId={appInstanceId}
selectedSubjects={subjects}
disabled={isSaving || policyQuery.isLoading}
onChange={handleSubjectsChange}

4
web/features/deployments/detail/access-tab/use-access-environment-scope.ts
View File

@ -16,8 +16,8 @@ function uniqueEnvironments(environments: (ConsoleEnvironment | undefined)[]) {
})
}
export function useAccessEnvironmentScope(appId: string) {
const appInput = { params: { appInstanceId: appId } }
export function useAccessEnvironmentScope(appInstanceId: string) {
const appInput = { params: { appInstanceId } }
const { data: accessConfig } = useQuery(consoleQuery.enterprise.appDeploy.getAppInstanceAccess.queryOptions({
input: appInput,
}))

4
web/features/deployments/detail/deploy-tab.tsx
View File

@ -81,8 +81,8 @@ function NewDeploymentMenu({ appInstanceId, availableEnvs }: {
)
}
export function DeployTab({ instanceId: appInstanceId }: {
instanceId: string
export function DeployTab({ appInstanceId }: {
appInstanceId: string
}) {
const { t } = useTranslation('deployments')
const { data: environmentDeployments } = useQuery(consoleQuery.enterprise.appDeploy.listRuntimeInstances.queryOptions({

6
web/features/deployments/detail/deployment-sidebar.tsx
View File

@ -114,8 +114,8 @@ export function DeploymentSidebar({
const isMobile = media === MediaType.mobile
const { sidebarMode, toggleSidebarMode } = useDeploymentSidebarMode(isMobile)
const expand = sidebarMode === 'expand'
const instanceId = app.id ?? ''
const instanceName = app.name ?? instanceId
const appInstanceId = app.id ?? ''
const instanceName = app.name ?? appInstanceId
const appModeLabel = getAppModeLabel(toAppMode(app.mode), tCommon)
useKeyPress(`${getKeyboardKeyCodeBySystem('ctrl')}.b`, (e) => {
@ -199,7 +199,7 @@ export function DeploymentSidebar({
mode={sidebarMode}
iconMap={{ selected: tab.selectedIcon, normal: tab.icon }}
name={t(`tabs.${tab.key}.name`)}
href={`/deployments/${instanceId}/${tab.key}`}
href={`/deployments/${appInstanceId}/${tab.key}`}
/>
))}
</nav>

12
web/features/deployments/detail/index.tsx
View File

@ -14,8 +14,8 @@ import { RollbackModal } from '../components/rollback-modal'
import { DeploymentSidebar } from './deployment-sidebar'
import { isInstanceDetailTabKey } from './tabs'
export function InstanceDetail({ instanceId, children }: {
instanceId: string
export function InstanceDetail({ appInstanceId, children }: {
appInstanceId: string
children: ReactNode
}) {
const { t } = useTranslation('deployments')
@ -24,16 +24,16 @@ export function InstanceDetail({ instanceId, children }: {
const activeTab: InstanceDetailTabKey = isInstanceDetailTabKey(selectedTab) ? selectedTab : 'overview'
const overviewQuery = useQuery(consoleQuery.enterprise.appDeploy.getAppInstanceOverview.queryOptions({
input: {
params: { appInstanceId: instanceId },
params: { appInstanceId },
},
}))
useDocumentTitle(t('documentTitle.detail'))
const app = overviewQuery.data?.instance
const appId = app?.id
const resolvedAppInstanceId = app?.id
if (!appId && overviewQuery.isLoading) {
if (!resolvedAppInstanceId && overviewQuery.isLoading) {
return (
<div className="flex h-full items-center justify-center bg-background-body">
<span className="h-6 w-6 animate-spin rounded-full border-2 border-components-panel-border border-t-transparent" />
@ -41,7 +41,7 @@ export function InstanceDetail({ instanceId, children }: {
)
}
if (!appId || !app) {
if (!resolvedAppInstanceId || !app) {
return (
<div className="flex h-full flex-col items-center justify-center gap-3 bg-background-body">
<div className="title-xl-semi-bold text-text-primary">{t('detail.notFound')}</div>

42
web/features/deployments/detail/overview-tab.tsx
View File

@ -88,27 +88,27 @@ function overviewDeploymentStatus(status?: string): 'deploying' | 'deploy_failed
return 'ready'
}
function DeployFromOverviewButton({ appId }: {
appId: string
function DeployFromOverviewButton({ appInstanceId }: {
appInstanceId: string
}) {
const { t } = useTranslation('deployments')
const openDeployDrawer = useSetAtom(openDeployDrawerAtom)
return (
<Button size="small" variant="primary" onClick={() => openDeployDrawer({ appInstanceId: appId })}>
<Button size="small" variant="primary" onClick={() => openDeployDrawer({ appInstanceId })}>
{t('overview.deploy')}
</Button>
)
}
function BasicInfoSection({ appId }: {
appId: string
function BasicInfoSection({ appInstanceId }: {
appInstanceId: string
}) {
const { t } = useTranslation('deployments')
const { t: tCommon } = useTranslation()
const { data: overview } = useQuery(consoleQuery.enterprise.appDeploy.getAppInstanceOverview.queryOptions({
input: {
params: { appInstanceId: appId },
params: { appInstanceId },
},
}))
const overviewApp = overview?.instance
@ -131,11 +131,11 @@ function BasicInfoSection({ appId }: {
)
}
function DeploymentStatusSection({ appId }: {
appId: string
function DeploymentStatusSection({ appInstanceId }: {
appInstanceId: string
}) {
const { t } = useTranslation('deployments')
const input = { params: { appInstanceId: appId } }
const input = { params: { appInstanceId } }
const { data: overview } = useQuery(consoleQuery.enterprise.appDeploy.getAppInstanceOverview.queryOptions({
input,
}))
@ -160,7 +160,7 @@ function DeploymentStatusSection({ appId }: {
<Section
title={t('overview.deploymentStatus')}
action={(
<Button nativeButton={false} size="small" variant="secondary" render={<Link href={`/deployments/${appId}/deploy`} />}>
<Button nativeButton={false} size="small" variant="secondary" render={<Link href={`/deployments/${appInstanceId}/deploy`} />}>
{t('overview.viewDeployments')}
<span className="i-ri-arrow-right-up-line h-3.5 w-3.5" />
</Button>
@ -178,7 +178,7 @@ function DeploymentStatusSection({ appId }: {
{releaseRows.length === 0
? canCreateRelease
? (
<Button nativeButton={false} size="small" variant="primary" render={<Link href={`/deployments/${appId}/versions`} />}>
<Button nativeButton={false} size="small" variant="primary" render={<Link href={`/deployments/${appInstanceId}/versions`} />}>
{t('overview.createRelease')}
</Button>
)
@ -188,7 +188,7 @@ function DeploymentStatusSection({ appId }: {
</Button>
)
: (
<DeployFromOverviewButton appId={appId} />
<DeployFromOverviewButton appInstanceId={appInstanceId} />
)}
</div>
)
@ -214,11 +214,11 @@ function DeploymentStatusSection({ appId }: {
)
}
function AccessStatusSection({ appId }: {
appId: string
function AccessStatusSection({ appInstanceId }: {
appInstanceId: string
}) {
const { t } = useTranslation('deployments')
const input = { params: { appInstanceId: appId } }
const input = { params: { appInstanceId } }
const { data: overview } = useQuery(consoleQuery.enterprise.appDeploy.getAppInstanceOverview.queryOptions({
input,
}))
@ -234,7 +234,7 @@ function AccessStatusSection({ appId }: {
<Section
title={t('overview.accessStatus')}
action={(
<Button nativeButton={false} size="small" variant="secondary" render={<Link href={`/deployments/${appId}/access`} />}>
<Button nativeButton={false} size="small" variant="secondary" render={<Link href={`/deployments/${appInstanceId}/access`} />}>
{t('overview.configureAccess')}
<span className="i-ri-arrow-right-up-line h-3.5 w-3.5" />
</Button>
@ -266,14 +266,14 @@ function AccessStatusSection({ appId }: {
)
}
export function OverviewTab({ instanceId: appId }: {
instanceId: string
export function OverviewTab({ appInstanceId }: {
appInstanceId: string
}) {
return (
<div className="flex w-full max-w-[960px] flex-col gap-5 p-6">
<BasicInfoSection appId={appId} />
<DeploymentStatusSection appId={appId} />
<AccessStatusSection appId={appId} />
<BasicInfoSection appInstanceId={appInstanceId} />
<DeploymentStatusSection appInstanceId={appInstanceId} />
<AccessStatusSection appInstanceId={appInstanceId} />
</div>
)
}

34
web/features/deployments/detail/settings-tab.tsx
View File

@ -39,12 +39,12 @@ function DeleteInstanceButton({
const deleteInstance = useMutation(consoleQuery.enterprise.appDeploy.deleteAppInstance.mutationOptions())
const [isDeleting, setIsDeleting] = useState(false)
const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
const appId = app.id
const appName = app.name ?? appId ?? ''
const appInstanceId = app.id
const appName = app.name ?? appInstanceId ?? ''
const canDelete = !hasDeployments && Boolean(settings) && settings?.deleteGuard?.canDelete !== false
const handleDelete = () => {
if (!appId)
if (!appInstanceId)
return
void (async () => {
@ -52,7 +52,7 @@ function DeleteInstanceButton({
try {
await deleteInstance.mutateAsync({
params: {
appInstanceId: appId,
appInstanceId,
},
})
toast.success(t('settings.deleted'))
@ -144,15 +144,15 @@ function SettingsForm({ app, settings }: SettingsFormProps) {
const canSave = Boolean(name.trim() && (name !== initialName || description !== initialDescription) && !isSaving)
const handleSave = () => {
const appId = app.id
if (!canSave || !appId)
const appInstanceId = app.id
if (!canSave || !appInstanceId)
return
void (async () => {
setIsSaving(true)
try {
await updateInstance.mutateAsync({
params: {
appInstanceId: appId,
appInstanceId,
},
body: {
name: name.trim(),
@ -216,10 +216,10 @@ function SettingsForm({ app, settings }: SettingsFormProps) {
)
}
function SettingsFormSection({ appId }: {
appId: string
function SettingsFormSection({ appInstanceId }: {
appInstanceId: string
}) {
const appInput = { params: { appInstanceId: appId } }
const appInput = { params: { appInstanceId } }
const { data: overview } = useQuery(consoleQuery.enterprise.appDeploy.getAppInstanceOverview.queryOptions({
input: appInput,
}))
@ -243,10 +243,10 @@ function SettingsFormSection({ appId }: {
)
}
function DeleteInstanceControlSection({ appId }: {
appId: string
function DeleteInstanceControlSection({ appInstanceId }: {
appInstanceId: string
}) {
const appInput = { params: { appInstanceId: appId } }
const appInput = { params: { appInstanceId } }
const { data: overview } = useQuery(consoleQuery.enterprise.appDeploy.getAppInstanceOverview.queryOptions({
input: appInput,
}))
@ -272,13 +272,13 @@ function DeleteInstanceControlSection({ appId }: {
)
}
export function SettingsTab({ instanceId: appId }: {
instanceId: string
export function SettingsTab({ appInstanceId }: {
appInstanceId: string
}) {
return (
<div className="flex max-w-[640px] flex-col gap-5 p-6">
<SettingsFormSection appId={appId} />
<DeleteInstanceControlSection appId={appId} />
<SettingsFormSection appInstanceId={appInstanceId} />
<DeleteInstanceControlSection appInstanceId={appInstanceId} />
</div>
)
}

16
web/features/deployments/detail/versions-tab.tsx
View File

@ -11,8 +11,8 @@ import { DEPLOYMENT_PAGE_SIZE } from '../data'
import { deployedRows } from '../utils'
import { ReleaseHistoryTable } from './versions-tab/release-history-table'
function CreateReleaseControl({ appId, canCreateRelease }: {
appId: string
function CreateReleaseControl({ appInstanceId, canCreateRelease }: {
appInstanceId: string
canCreateRelease: boolean
}) {
const { t } = useTranslation('deployments')
@ -32,7 +32,7 @@ function CreateReleaseControl({ appId, canCreateRelease }: {
try {
const response = await createRelease.mutateAsync({
params: {
appInstanceId: appId,
appInstanceId,
},
body: {
name: releaseName,
@ -149,11 +149,11 @@ function CreateReleaseControl({ appId, canCreateRelease }: {
)
}
export function VersionsTab({ instanceId: appId }: {
instanceId: string
export function VersionsTab({ appInstanceId }: {
appInstanceId: string
}) {
const { t } = useTranslation('deployments')
const input = { params: { appInstanceId: appId } }
const input = { params: { appInstanceId } }
const { data: overview } = useQuery(consoleQuery.enterprise.appDeploy.getAppInstanceOverview.queryOptions({
input,
}))
@ -185,7 +185,7 @@ export function VersionsTab({ instanceId: appId }: {
)
</span>
</div>
<CreateReleaseControl appId={appId} canCreateRelease={canCreateRelease} />
<CreateReleaseControl appInstanceId={appInstanceId} canCreateRelease={canCreateRelease} />
</div>
{!canCreateRelease && (
@ -202,7 +202,7 @@ export function VersionsTab({ instanceId: appId }: {
)
: (
<ReleaseHistoryTable
appId={appId}
appInstanceId={appInstanceId}
releaseRows={releaseRows}
deploymentRows={deploymentRows}
/>

8
web/features/deployments/detail/versions-tab/release-history-table.tsx
View File

@ -15,8 +15,8 @@ import { getReleaseDeployments } from './release-deployments'
const GRID_TEMPLATE = 'grid-cols-[minmax(0,0.9fr)_minmax(0,1fr)_minmax(0,0.8fr)_minmax(0,1.5fr)_96px]'
export function ReleaseHistoryTable({ appId, releaseRows, deploymentRows }: {
appId: string
export function ReleaseHistoryTable({ appInstanceId, releaseRows, deploymentRows }: {
appInstanceId: string
releaseRows: ReleaseRow[]
deploymentRows: RuntimeInstanceRow[]
}) {
@ -63,7 +63,7 @@ export function ReleaseHistoryTable({ appId, releaseRows, deploymentRows }: {
</div>
</div>
<div className="flex shrink-0 justify-end gap-1">
<DeployReleaseMenu releaseId={release.id!} appInstanceId={appId} />
<DeployReleaseMenu releaseId={release.id!} appInstanceId={appInstanceId} />
</div>
</div>
<div className="flex flex-wrap items-center gap-x-3 gap-y-2">
@ -114,7 +114,7 @@ export function ReleaseHistoryTable({ appId, releaseRows, deploymentRows }: {
))}
</div>
<div className="flex justify-end gap-1">
<DeployReleaseMenu releaseId={release.id!} appInstanceId={appId} />
<DeployReleaseMenu releaseId={release.id!} appInstanceId={appInstanceId} />
</div>
</div>
</div>

14
web/features/deployments/list/instance-card.tsx
View File

@ -30,10 +30,10 @@ export function InstanceCard({ app }: {
if (!app.id)
return null
const appId = app.id
const appName = app.name ?? appId
const appInstanceId = app.id
const appName = app.name ?? appInstanceId
const appMode = toAppMode(app.mode)
const detailHref = `/deployments/${appId}/overview`
const detailHref = `/deployments/${appInstanceId}/overview`
const statusCount = (status: string) =>
app.statuses?.find(item => item.status === status)?.count ?? 0
@ -184,13 +184,13 @@ export function InstanceCard({ app }: {
</div>
</div>
</Link>
<InstanceCardActions appId={appId} detailHref={detailHref} />
<InstanceCardActions appInstanceId={appInstanceId} detailHref={detailHref} />
</div>
)
}
function InstanceCardActions({ appId, detailHref }: {
appId: string
function InstanceCardActions({ appInstanceId, detailHref }: {
appInstanceId: string
detailHref: string
}) {
const { t } = useTranslation('deployments')
@ -223,7 +223,7 @@ function InstanceCardActions({ appId, detailHref }: {
className="gap-2 px-3"
onClick={() => {
setMenuOpen(false)
openDeployDrawer({ appInstanceId: appId })
openDeployDrawer({ appInstanceId })
}}
>
<span className="system-sm-regular text-text-secondary">{t('card.menu.deploy')}</span>

16
web/features/deployments/nav/index.tsx
View File

@ -51,15 +51,15 @@ export function DeploymentsNav() {
const router = useRouter()
const selectedSegment = useSelectedLayoutSegment()
const isActive = selectedSegment === 'deployments'
const params = useParams<{ instanceId?: string }>()
const instanceId = params?.instanceId
const params = useParams<{ appInstanceId?: string }>()
const appInstanceId = params?.appInstanceId
const openCreateInstanceModal = useSetAtom(openCreateInstanceModalAtom)
const { data: currentInstance } = useQuery(consoleQuery.enterprise.appDeploy.getAppInstanceOverview.queryOptions({
input: instanceId
? { params: { appInstanceId: instanceId } }
input: appInstanceId
? { params: { appInstanceId } }
: skipToken,
enabled: isActive && Boolean(instanceId),
enabled: isActive && Boolean(appInstanceId),
select: data => data.instance,
}))
@ -81,13 +81,13 @@ export function DeploymentsNav() {
: appNavItems
: []
const curNav = instanceId
? navigationItems.find(item => item.id === instanceId)
const curNav = appInstanceId
? navigationItems.find(item => item.id === appInstanceId)
: undefined
function handleCreate() {
openCreateInstanceModal()
if (selectedSegment !== 'deployments' || instanceId)
if (selectedSegment !== 'deployments' || appInstanceId)
router.push('/deployments')
}

2
web/features/deployments/store.ts
View File

@ -14,7 +14,7 @@ type OpenRollbackParams = {
}
type CreatedDeveloperApiToken = {
appId: string
appInstanceId: string
token: string
}