mirror of
https://github.com/langgenius/dify.git
synced 2026-05-09 21:28:25 +08:00
tweaks
This commit is contained in:
Stephen Zhou
parent
605dca6431
commit
e7e6ccd11a
@ -16,6 +16,25 @@ type AccessChannelsSectionProps = {
|
||||
cliDocsUrl?: string
|
||||
}
|
||||
|
||||
function AccessChannelsSwitch({ appId, checked }: {
|
||||
appId: string
|
||||
checked: boolean
|
||||
}) {
|
||||
const toggleAccessChannel = useMutation(consoleQuery.enterprise.appDeploy.updateAccessChannels.mutationOptions())
|
||||
|
||||
return (
|
||||
<Switch
|
||||
checked={checked}
|
||||
onCheckedChange={(enabled) => {
|
||||
toggleAccessChannel.mutate({
|
||||
params: { appInstanceId: appId },
|
||||
body: { enabled },
|
||||
})
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export function AccessChannelsSection({
|
||||
appId,
|
||||
runEnabled,
|
||||
@ -24,23 +43,15 @@ export function AccessChannelsSection({
|
||||
cliDocsUrl,
|
||||
}: AccessChannelsSectionProps) {
|
||||
const { t } = useTranslation('deployments')
|
||||
const toggleAccessChannel = useMutation(consoleQuery.enterprise.appDeploy.updateAccessChannels.mutationOptions())
|
||||
|
||||
function handleToggle(enabled: boolean) {
|
||||
toggleAccessChannel.mutate({
|
||||
params: { appInstanceId: appId },
|
||||
body: { enabled },
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<Section
|
||||
title={t('access.channels.title')}
|
||||
description={t('access.channels.description')}
|
||||
action={(
|
||||
<Switch
|
||||
<AccessChannelsSwitch
|
||||
appId={appId}
|
||||
checked={runEnabled}
|
||||
onCheckedChange={handleToggle}
|
||||
/>
|
||||
)}
|
||||
>
|
||||
|
||||
@ -18,6 +18,66 @@ type DeveloperApiSectionProps = {
|
||||
apiKeys: DeveloperApiKeyRow[]
|
||||
}
|
||||
|
||||
function DeveloperApiSwitch({ appId, checked }: {
|
||||
appId: string
|
||||
checked: boolean
|
||||
}) {
|
||||
const toggleDeveloperAPI = useMutation(consoleQuery.enterprise.appDeploy.updateDeveloperApi.mutationOptions())
|
||||
|
||||
return (
|
||||
<Switch
|
||||
checked={checked}
|
||||
onCheckedChange={(enabled) => {
|
||||
toggleDeveloperAPI.mutate({
|
||||
params: { appInstanceId: appId },
|
||||
body: { enabled },
|
||||
})
|
||||
}}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function CreatedApiTokenCard({ appId }: {
|
||||
appId: string
|
||||
}) {
|
||||
const { t } = useTranslation('deployments')
|
||||
const createdApiToken = useAtomValue(createdDeveloperApiTokenAtom)
|
||||
const setCreatedApiToken = useSetAtom(createdDeveloperApiTokenAtom)
|
||||
const visibleCreatedApiToken = createdApiToken?.appId === appId
|
||||
? createdApiToken.token
|
||||
: undefined
|
||||
|
||||
if (!visibleCreatedApiToken)
|
||||
return null
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-2 rounded-lg border border-components-panel-border bg-components-panel-bg-blur p-3">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex min-w-0 flex-col">
|
||||
<span className="system-sm-medium text-text-primary">
|
||||
{t('access.api.newTokenTitle')}
|
||||
</span>
|
||||
<span className="system-xs-regular text-text-tertiary">
|
||||
{t('access.api.newTokenDescription')}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setCreatedApiToken(undefined)}
|
||||
aria-label={t('access.api.dismissToken')}
|
||||
className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
|
||||
>
|
||||
<span className="i-ri-close-line h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
<CopyPill
|
||||
label={t('access.api.newTokenLabel')}
|
||||
value={visibleCreatedApiToken}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function DeveloperApiSection({
|
||||
appId,
|
||||
apiEnabled,
|
||||
@ -26,29 +86,15 @@ export function DeveloperApiSection({
|
||||
apiKeys,
|
||||
}: DeveloperApiSectionProps) {
|
||||
const { t } = useTranslation('deployments')
|
||||
const createdApiToken = useAtomValue(createdDeveloperApiTokenAtom)
|
||||
const setCreatedApiToken = useSetAtom(createdDeveloperApiTokenAtom)
|
||||
const toggleDeveloperAPI = useMutation(consoleQuery.enterprise.appDeploy.updateDeveloperApi.mutationOptions())
|
||||
|
||||
function handleToggle(enabled: boolean) {
|
||||
toggleDeveloperAPI.mutate({
|
||||
params: { appInstanceId: appId },
|
||||
body: { enabled },
|
||||
})
|
||||
}
|
||||
|
||||
const visibleCreatedApiToken = createdApiToken?.appId === appId
|
||||
? createdApiToken.token
|
||||
: undefined
|
||||
|
||||
return (
|
||||
<Section
|
||||
title={t('access.api.developerTitle')}
|
||||
description={t('access.api.description')}
|
||||
action={(
|
||||
<Switch
|
||||
<DeveloperApiSwitch
|
||||
appId={appId}
|
||||
checked={apiEnabled}
|
||||
onCheckedChange={handleToggle}
|
||||
/>
|
||||
)}
|
||||
>
|
||||
@ -76,32 +122,7 @@ export function DeveloperApiSection({
|
||||
apiKeys={apiKeys}
|
||||
/>
|
||||
</div>
|
||||
{visibleCreatedApiToken && (
|
||||
<div className="flex flex-col gap-2 rounded-lg border border-components-panel-border bg-components-panel-bg-blur p-3">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="flex min-w-0 flex-col">
|
||||
<span className="system-sm-medium text-text-primary">
|
||||
{t('access.api.newTokenTitle')}
|
||||
</span>
|
||||
<span className="system-xs-regular text-text-tertiary">
|
||||
{t('access.api.newTokenDescription')}
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setCreatedApiToken(undefined)}
|
||||
aria-label={t('access.api.dismissToken')}
|
||||
className="flex h-6 w-6 shrink-0 items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
|
||||
>
|
||||
<span className="i-ri-close-line h-3.5 w-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
<CopyPill
|
||||
label={t('access.api.newTokenLabel')}
|
||||
value={visibleCreatedApiToken}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<CreatedApiTokenCard appId={appId} />
|
||||
{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">
|
||||
|
||||
@ -1,8 +1,5 @@
|
||||
'use client'
|
||||
import type { RuntimeInstanceRow } from '@dify/contracts/enterprise/types.gen'
|
||||
import type { KeyboardEvent } from 'react'
|
||||
import type { EnvironmentOption } from '../types'
|
||||
import { Button } from '@langgenius/dify-ui/button'
|
||||
import { cn } from '@langgenius/dify-ui/cn'
|
||||
import {
|
||||
DropdownMenu,
|
||||
@ -10,30 +7,19 @@ import {
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@langgenius/dify-ui/dropdown-menu'
|
||||
import { useMutation, useQuery } from '@tanstack/react-query'
|
||||
import { useQuery } from '@tanstack/react-query'
|
||||
import { useSetAtom } from 'jotai'
|
||||
import { useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { consoleQuery } from '@/service/client'
|
||||
import { openDeployDrawerAtom } from '../store'
|
||||
import {
|
||||
activeRelease,
|
||||
deployedRows,
|
||||
deploymentId,
|
||||
deploymentStatus,
|
||||
environmentBackend,
|
||||
environmentId,
|
||||
environmentMode,
|
||||
environmentName,
|
||||
environmentOptionsFromOptionsReply,
|
||||
isUndeployedDeploymentRow,
|
||||
releaseCommit,
|
||||
releaseLabel,
|
||||
} from '../utils'
|
||||
import { DeploymentPanel } from './deploy-tab/deployment-panel'
|
||||
import { DeploymentStatusSummary } from './deploy-tab/deployment-status-summary'
|
||||
|
||||
const GRID_TEMPLATE = 'lg:grid-cols-[minmax(180px,1fr)_minmax(140px,0.75fr)_minmax(180px,0.85fr)_240px]'
|
||||
import { DeploymentEnvironmentList } from './deploy-tab/deployment-environment-list'
|
||||
|
||||
function NewDeploymentMenu({ appInstanceId, availableEnvs }: {
|
||||
appInstanceId: string
|
||||
@ -95,90 +81,6 @@ function NewDeploymentMenu({ appInstanceId, availableEnvs }: {
|
||||
)
|
||||
}
|
||||
|
||||
function DeploymentRowActions({ appInstanceId, envId, row }: {
|
||||
appInstanceId: string
|
||||
envId: string
|
||||
row: RuntimeInstanceRow
|
||||
}) {
|
||||
const { t } = useTranslation('deployments')
|
||||
const [menuOpen, setMenuOpen] = useState(false)
|
||||
const openDeployDrawer = useSetAtom(openDeployDrawerAtom)
|
||||
const cancelDeployment = useMutation(consoleQuery.enterprise.appDeploy.cancelRuntimeDeployment.mutationOptions())
|
||||
const undeployDeployment = useMutation(consoleQuery.enterprise.appDeploy.undeployRuntimeInstance.mutationOptions())
|
||||
const isUndeployed = isUndeployedDeploymentRow(row)
|
||||
const status = deploymentStatus(row)
|
||||
|
||||
function handleRuntimeAction() {
|
||||
const runtimeInstanceId = deploymentId(row)
|
||||
setMenuOpen(false)
|
||||
|
||||
if (status === 'deploying') {
|
||||
cancelDeployment.mutate({
|
||||
params: {
|
||||
appInstanceId,
|
||||
runtimeInstanceId,
|
||||
},
|
||||
body: {
|
||||
appInstanceId,
|
||||
runtimeInstanceId,
|
||||
},
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
undeployDeployment.mutate({
|
||||
params: {
|
||||
appInstanceId,
|
||||
runtimeInstanceId,
|
||||
},
|
||||
body: {
|
||||
appInstanceId,
|
||||
runtimeInstanceId,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex shrink-0 items-center gap-1"
|
||||
onClick={e => e.stopPropagation()}
|
||||
onKeyDown={e => e.stopPropagation()}
|
||||
>
|
||||
<Button size="small" variant="secondary" onClick={() => openDeployDrawer({ appInstanceId, environmentId: envId })}>
|
||||
{isUndeployed
|
||||
? t('deployDrawer.deploy')
|
||||
: status === 'ready'
|
||||
? t('deployTab.deployOtherVersion')
|
||||
: status === 'deploying'
|
||||
? t('deployTab.viewProgress')
|
||||
: t('deployTab.viewError')}
|
||||
</Button>
|
||||
{!isUndeployed && (
|
||||
<DropdownMenu modal={false} open={menuOpen} onOpenChange={setMenuOpen}>
|
||||
<DropdownMenuTrigger
|
||||
aria-label={t('deployTab.moreActions')}
|
||||
className="flex h-7 w-7 items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
|
||||
>
|
||||
<span className="i-ri-more-line h-4 w-4" />
|
||||
</DropdownMenuTrigger>
|
||||
{menuOpen && (
|
||||
<DropdownMenuContent placement="bottom-end" sideOffset={4} popupClassName="w-[200px]">
|
||||
<DropdownMenuItem
|
||||
className="gap-2 px-3"
|
||||
onClick={handleRuntimeAction}
|
||||
>
|
||||
<span className="system-sm-regular text-text-destructive">
|
||||
{status === 'deploying' ? t('deployTab.cancelDeployment') : t('deployTab.undeploy')}
|
||||
</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
)}
|
||||
</DropdownMenu>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function DeployTab({ instanceId: appInstanceId }: {
|
||||
instanceId: string
|
||||
}) {
|
||||
@ -195,19 +97,6 @@ export function DeployTab({ instanceId: appInstanceId }: {
|
||||
|
||||
const deployedEnvIds = new Set(deployedRuntimeRows.map(row => environmentId(row.environment)))
|
||||
const availableEnvs = environmentOptions.filter(env => env.id && !deployedEnvIds.has(env.id))
|
||||
const expandableEnvIds = rows.filter(row => !isUndeployedDeploymentRow(row)).map(row => environmentId(row.environment))
|
||||
const [expanded, setExpanded] = useState<string | null>()
|
||||
const activeExpanded = expanded === undefined
|
||||
? expandableEnvIds[0] ?? null
|
||||
: expanded !== null && expandableEnvIds.includes(expanded)
|
||||
? expanded
|
||||
: null
|
||||
const toggle = (id: string) => {
|
||||
setExpanded((prev) => {
|
||||
const current = prev === undefined ? expandableEnvIds[0] ?? null : prev
|
||||
return current === id ? null : id
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex w-full max-w-[960px] flex-col gap-4 p-6">
|
||||
@ -231,90 +120,7 @@ export function DeployTab({ instanceId: appInstanceId }: {
|
||||
</div>
|
||||
)
|
||||
: (
|
||||
<div className="overflow-hidden rounded-xl border border-components-panel-border bg-components-panel-bg">
|
||||
<div className={cn(
|
||||
'hidden items-center gap-4 border-b border-divider-subtle px-4 py-3 system-xs-medium-uppercase text-text-tertiary lg:grid',
|
||||
GRID_TEMPLATE,
|
||||
)}
|
||||
>
|
||||
<div>{t('deployTab.col.environment')}</div>
|
||||
<div>{t('deployTab.col.currentRelease')}</div>
|
||||
<div>{t('deployTab.col.status')}</div>
|
||||
<div className="text-right">{t('deployTab.col.actions')}</div>
|
||||
</div>
|
||||
{rows.map((row) => {
|
||||
const envId = environmentId(row.environment)
|
||||
const isUndeployed = isUndeployedDeploymentRow(row)
|
||||
const isExpanded = !isUndeployed && activeExpanded === envId
|
||||
const release = activeRelease(row)
|
||||
const chevron = !isUndeployed && (
|
||||
<span
|
||||
className={cn(
|
||||
'i-ri-arrow-down-s-line h-4 w-4 shrink-0 text-text-tertiary transition-transform',
|
||||
isExpanded && 'rotate-180',
|
||||
)}
|
||||
/>
|
||||
)
|
||||
const handleRowToggle = () => {
|
||||
if (!isUndeployed)
|
||||
toggle(envId)
|
||||
}
|
||||
const handleRowKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
|
||||
if (isUndeployed)
|
||||
return
|
||||
|
||||
if (event.key === 'Enter' || event.key === ' ') {
|
||||
event.preventDefault()
|
||||
toggle(envId)
|
||||
}
|
||||
}
|
||||
return (
|
||||
<div key={envId} className="border-b border-divider-subtle last:border-b-0">
|
||||
<div
|
||||
role={isUndeployed ? undefined : 'button'}
|
||||
tabIndex={isUndeployed ? undefined : 0}
|
||||
onClick={handleRowToggle}
|
||||
onKeyDown={handleRowKeyDown}
|
||||
className={cn(
|
||||
'flex w-full flex-col gap-2 px-4 py-3 text-left',
|
||||
!isUndeployed && 'cursor-pointer hover:bg-state-base-hover',
|
||||
'lg:grid lg:items-center lg:gap-4',
|
||||
GRID_TEMPLATE,
|
||||
)}
|
||||
>
|
||||
<div className="flex min-w-0 items-start justify-between gap-3 lg:block">
|
||||
<div className="flex min-w-0 flex-col gap-0.5">
|
||||
<span className="truncate system-sm-semibold text-text-primary">{environmentName(row.environment)}</span>
|
||||
<div className="flex items-center gap-1.5 system-xs-regular text-text-tertiary">
|
||||
<span className="uppercase">{environmentBackend(row.environment)}</span>
|
||||
<span>·</span>
|
||||
<span>{t(environmentMode(row.environment) === 'isolated' ? 'mode.isolated' : 'mode.shared')}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex shrink-0 items-center gap-1 lg:hidden">
|
||||
<DeploymentRowActions appInstanceId={appInstanceId} envId={envId} row={row} />
|
||||
{chevron}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<span className="min-w-0 truncate font-mono system-sm-medium text-text-primary">{isUndeployed ? '—' : releaseLabel(release)}</span>
|
||||
{!isUndeployed && (
|
||||
<span className="shrink-0 font-mono system-xs-regular text-text-tertiary">{releaseCommit(release)}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<DeploymentStatusSummary row={row} />
|
||||
</div>
|
||||
<div className="hidden min-w-0 items-center justify-end gap-1 lg:flex">
|
||||
<DeploymentRowActions appInstanceId={appInstanceId} envId={envId} row={row} />
|
||||
{chevron}
|
||||
</div>
|
||||
</div>
|
||||
{isExpanded && <DeploymentPanel row={row} />}
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
<DeploymentEnvironmentList appInstanceId={appInstanceId} rows={rows} />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -0,0 +1,248 @@
|
||||
'use client'
|
||||
|
||||
import type { RuntimeInstanceRow } from '@dify/contracts/enterprise/types.gen'
|
||||
import type { KeyboardEvent } from 'react'
|
||||
import { Button } from '@langgenius/dify-ui/button'
|
||||
import { cn } from '@langgenius/dify-ui/cn'
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
DropdownMenuItem,
|
||||
DropdownMenuTrigger,
|
||||
} from '@langgenius/dify-ui/dropdown-menu'
|
||||
import { useMutation } from '@tanstack/react-query'
|
||||
import { useSetAtom } from 'jotai'
|
||||
import { useState } from 'react'
|
||||
import { useTranslation } from 'react-i18next'
|
||||
import { consoleQuery } from '@/service/client'
|
||||
import { openDeployDrawerAtom } from '../../store'
|
||||
import {
|
||||
activeRelease,
|
||||
deploymentId,
|
||||
deploymentStatus,
|
||||
environmentBackend,
|
||||
environmentId,
|
||||
environmentMode,
|
||||
environmentName,
|
||||
isUndeployedDeploymentRow,
|
||||
releaseCommit,
|
||||
releaseLabel,
|
||||
} from '../../utils'
|
||||
import { DeploymentPanel } from './deployment-panel'
|
||||
import { DeploymentStatusSummary } from './deployment-status-summary'
|
||||
|
||||
const GRID_TEMPLATE = 'lg:grid-cols-[minmax(180px,1fr)_minmax(140px,0.75fr)_minmax(180px,0.85fr)_240px]'
|
||||
|
||||
function DeploymentRowActions({ appInstanceId, envId, row }: {
|
||||
appInstanceId: string
|
||||
envId: string
|
||||
row: RuntimeInstanceRow
|
||||
}) {
|
||||
const { t } = useTranslation('deployments')
|
||||
const [menuOpen, setMenuOpen] = useState(false)
|
||||
const openDeployDrawer = useSetAtom(openDeployDrawerAtom)
|
||||
const cancelDeployment = useMutation(consoleQuery.enterprise.appDeploy.cancelRuntimeDeployment.mutationOptions())
|
||||
const undeployDeployment = useMutation(consoleQuery.enterprise.appDeploy.undeployRuntimeInstance.mutationOptions())
|
||||
const isUndeployed = isUndeployedDeploymentRow(row)
|
||||
const status = deploymentStatus(row)
|
||||
|
||||
function handleRuntimeAction() {
|
||||
const runtimeInstanceId = deploymentId(row)
|
||||
setMenuOpen(false)
|
||||
|
||||
if (status === 'deploying') {
|
||||
cancelDeployment.mutate({
|
||||
params: {
|
||||
appInstanceId,
|
||||
runtimeInstanceId,
|
||||
},
|
||||
body: {
|
||||
appInstanceId,
|
||||
runtimeInstanceId,
|
||||
},
|
||||
})
|
||||
return
|
||||
}
|
||||
|
||||
undeployDeployment.mutate({
|
||||
params: {
|
||||
appInstanceId,
|
||||
runtimeInstanceId,
|
||||
},
|
||||
body: {
|
||||
appInstanceId,
|
||||
runtimeInstanceId,
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
className="flex shrink-0 items-center gap-1"
|
||||
onClick={e => e.stopPropagation()}
|
||||
onKeyDown={e => e.stopPropagation()}
|
||||
>
|
||||
<Button size="small" variant="secondary" onClick={() => openDeployDrawer({ appInstanceId, environmentId: envId })}>
|
||||
{isUndeployed
|
||||
? t('deployDrawer.deploy')
|
||||
: status === 'ready'
|
||||
? t('deployTab.deployOtherVersion')
|
||||
: status === 'deploying'
|
||||
? t('deployTab.viewProgress')
|
||||
: t('deployTab.viewError')}
|
||||
</Button>
|
||||
{!isUndeployed && (
|
||||
<DropdownMenu modal={false} open={menuOpen} onOpenChange={setMenuOpen}>
|
||||
<DropdownMenuTrigger
|
||||
aria-label={t('deployTab.moreActions')}
|
||||
className="flex h-7 w-7 items-center justify-center rounded-md text-text-tertiary hover:bg-state-base-hover hover:text-text-secondary"
|
||||
>
|
||||
<span className="i-ri-more-line h-4 w-4" />
|
||||
</DropdownMenuTrigger>
|
||||
{menuOpen && (
|
||||
<DropdownMenuContent placement="bottom-end" sideOffset={4} popupClassName="w-[200px]">
|
||||
<DropdownMenuItem
|
||||
className="gap-2 px-3"
|
||||
onClick={handleRuntimeAction}
|
||||
>
|
||||
<span className="system-sm-regular text-text-destructive">
|
||||
{status === 'deploying' ? t('deployTab.cancelDeployment') : t('deployTab.undeploy')}
|
||||
</span>
|
||||
</DropdownMenuItem>
|
||||
</DropdownMenuContent>
|
||||
)}
|
||||
</DropdownMenu>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function DeploymentEnvironmentRow({ appInstanceId, row, isExpanded, onToggle }: {
|
||||
appInstanceId: string
|
||||
row: RuntimeInstanceRow
|
||||
isExpanded: boolean
|
||||
onToggle: (envId: string) => void
|
||||
}) {
|
||||
const { t } = useTranslation('deployments')
|
||||
const envId = environmentId(row.environment)
|
||||
const isUndeployed = isUndeployedDeploymentRow(row)
|
||||
const release = activeRelease(row)
|
||||
const chevron = !isUndeployed && (
|
||||
<span
|
||||
className={cn(
|
||||
'i-ri-arrow-down-s-line h-4 w-4 shrink-0 text-text-tertiary transition-transform',
|
||||
isExpanded && 'rotate-180',
|
||||
)}
|
||||
/>
|
||||
)
|
||||
|
||||
function handleRowToggle() {
|
||||
if (!isUndeployed)
|
||||
onToggle(envId)
|
||||
}
|
||||
|
||||
function handleRowKeyDown(event: KeyboardEvent<HTMLDivElement>) {
|
||||
if (isUndeployed)
|
||||
return
|
||||
|
||||
if (event.key === 'Enter' || event.key === ' ') {
|
||||
event.preventDefault()
|
||||
onToggle(envId)
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="border-b border-divider-subtle last:border-b-0">
|
||||
<div
|
||||
role={isUndeployed ? undefined : 'button'}
|
||||
tabIndex={isUndeployed ? undefined : 0}
|
||||
onClick={handleRowToggle}
|
||||
onKeyDown={handleRowKeyDown}
|
||||
className={cn(
|
||||
'flex w-full flex-col gap-2 px-4 py-3 text-left',
|
||||
!isUndeployed && 'cursor-pointer hover:bg-state-base-hover',
|
||||
'lg:grid lg:items-center lg:gap-4',
|
||||
GRID_TEMPLATE,
|
||||
)}
|
||||
>
|
||||
<div className="flex min-w-0 items-start justify-between gap-3 lg:block">
|
||||
<div className="flex min-w-0 flex-col gap-0.5">
|
||||
<span className="truncate system-sm-semibold text-text-primary">{environmentName(row.environment)}</span>
|
||||
<div className="flex items-center gap-1.5 system-xs-regular text-text-tertiary">
|
||||
<span className="uppercase">{environmentBackend(row.environment)}</span>
|
||||
<span>·</span>
|
||||
<span>{t(environmentMode(row.environment) === 'isolated' ? 'mode.isolated' : 'mode.shared')}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex shrink-0 items-center gap-1 lg:hidden">
|
||||
<DeploymentRowActions appInstanceId={appInstanceId} envId={envId} row={row} />
|
||||
{chevron}
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex min-w-0 items-center gap-2">
|
||||
<span className="min-w-0 truncate font-mono system-sm-medium text-text-primary">{isUndeployed ? '—' : releaseLabel(release)}</span>
|
||||
{!isUndeployed && (
|
||||
<span className="shrink-0 font-mono system-xs-regular text-text-tertiary">{releaseCommit(release)}</span>
|
||||
)}
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<DeploymentStatusSummary row={row} />
|
||||
</div>
|
||||
<div className="hidden min-w-0 items-center justify-end gap-1 lg:flex">
|
||||
<DeploymentRowActions appInstanceId={appInstanceId} envId={envId} row={row} />
|
||||
{chevron}
|
||||
</div>
|
||||
</div>
|
||||
{isExpanded && <DeploymentPanel row={row} />}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export function DeploymentEnvironmentList({ appInstanceId, rows }: {
|
||||
appInstanceId: string
|
||||
rows: RuntimeInstanceRow[]
|
||||
}) {
|
||||
const { t } = useTranslation('deployments')
|
||||
const expandableEnvIds = rows.filter(row => !isUndeployedDeploymentRow(row)).map(row => environmentId(row.environment))
|
||||
const [expanded, setExpanded] = useState<string | null>()
|
||||
const activeExpanded = expanded === undefined
|
||||
? expandableEnvIds[0] ?? null
|
||||
: expanded !== null && expandableEnvIds.includes(expanded)
|
||||
? expanded
|
||||
: null
|
||||
|
||||
function toggleExpandedEnv(envId: string) {
|
||||
setExpanded((prev) => {
|
||||
const current = prev === undefined ? expandableEnvIds[0] ?? null : prev
|
||||
return current === envId ? null : envId
|
||||
})
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="overflow-hidden rounded-xl border border-components-panel-border bg-components-panel-bg">
|
||||
<div className={cn(
|
||||
'hidden items-center gap-4 border-b border-divider-subtle px-4 py-3 system-xs-medium-uppercase text-text-tertiary lg:grid',
|
||||
GRID_TEMPLATE,
|
||||
)}
|
||||
>
|
||||
<div>{t('deployTab.col.environment')}</div>
|
||||
<div>{t('deployTab.col.currentRelease')}</div>
|
||||
<div>{t('deployTab.col.status')}</div>
|
||||
<div className="text-right">{t('deployTab.col.actions')}</div>
|
||||
</div>
|
||||
{rows.map((row) => {
|
||||
const envId = environmentId(row.environment)
|
||||
const isExpanded = !isUndeployedDeploymentRow(row) && activeExpanded === envId
|
||||
return (
|
||||
<DeploymentEnvironmentRow
|
||||
key={envId}
|
||||
appInstanceId={appInstanceId}
|
||||
row={row}
|
||||
isExpanded={isExpanded}
|
||||
onToggle={toggleExpandedEnv}
|
||||
/>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@ -88,6 +88,19 @@ function overviewDeploymentStatus(status?: string): 'deploying' | 'deploy_failed
|
||||
return 'ready'
|
||||
}
|
||||
|
||||
function DeployFromOverviewButton({ appId }: {
|
||||
appId: string
|
||||
}) {
|
||||
const { t } = useTranslation('deployments')
|
||||
const openDeployDrawer = useSetAtom(openDeployDrawerAtom)
|
||||
|
||||
return (
|
||||
<Button size="small" variant="primary" onClick={() => openDeployDrawer({ appInstanceId: appId })}>
|
||||
{t('overview.deploy')}
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
|
||||
export function OverviewTab({ instanceId }: {
|
||||
instanceId: string
|
||||
}) {
|
||||
@ -109,7 +122,6 @@ export function OverviewTab({ instanceId }: {
|
||||
const { data: accessConfig } = useQuery(consoleQuery.enterprise.appDeploy.getAppInstanceAccess.queryOptions({
|
||||
input,
|
||||
}))
|
||||
const openDeployDrawer = useSetAtom(openDeployDrawerAtom)
|
||||
const overviewApp = overview?.instance
|
||||
const deployments = overview?.deployments?.filter(row => row.environment?.id && row.status?.toLowerCase() !== 'undeployed') ?? []
|
||||
const releaseRows = releaseHistory?.data?.filter(row => row.id) ?? []
|
||||
@ -168,9 +180,7 @@ export function OverviewTab({ instanceId }: {
|
||||
</Button>
|
||||
)
|
||||
: (
|
||||
<Button size="small" variant="primary" onClick={() => openDeployDrawer({ appInstanceId: appId })}>
|
||||
{t('overview.deploy')}
|
||||
</Button>
|
||||
<DeployFromOverviewButton appId={appId} />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
||||
@ -29,7 +29,7 @@ type DeleteInstanceControlProps = {
|
||||
hasDeployments: boolean
|
||||
}
|
||||
|
||||
function DeleteInstanceControl({
|
||||
function DeleteInstanceButton({
|
||||
app,
|
||||
settings,
|
||||
hasDeployments,
|
||||
@ -70,27 +70,14 @@ function DeleteInstanceControl({
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex flex-col gap-3 rounded-xl border border-util-colors-red-red-200 bg-util-colors-red-red-50 p-4">
|
||||
<div className="system-sm-semibold text-util-colors-red-red-700">{t('settings.danger')}</div>
|
||||
<div className="system-xs-regular text-util-colors-red-red-600">
|
||||
{t('settings.dangerDesc')}
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="system-xs-regular text-text-tertiary">
|
||||
{hasDeployments
|
||||
? t('settings.undeployFirst')
|
||||
: settings?.deleteGuard?.disabledReason || t('settings.safeToDelete')}
|
||||
</div>
|
||||
<Button
|
||||
variant="primary"
|
||||
tone="destructive"
|
||||
disabled={!canDelete || isDeleting}
|
||||
onClick={() => setShowDeleteConfirm(true)}
|
||||
>
|
||||
{t('settings.delete')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<Button
|
||||
variant="primary"
|
||||
tone="destructive"
|
||||
disabled={!canDelete || isDeleting}
|
||||
onClick={() => setShowDeleteConfirm(true)}
|
||||
>
|
||||
{t('settings.delete')}
|
||||
</Button>
|
||||
|
||||
<AlertDialog open={showDeleteConfirm} onOpenChange={open => !open && setShowDeleteConfirm(false)}>
|
||||
<AlertDialogContent className="w-[520px]">
|
||||
@ -116,6 +103,35 @@ function DeleteInstanceControl({
|
||||
)
|
||||
}
|
||||
|
||||
function DeleteInstanceControl({
|
||||
app,
|
||||
settings,
|
||||
hasDeployments,
|
||||
}: DeleteInstanceControlProps) {
|
||||
const { t } = useTranslation('deployments')
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-3 rounded-xl border border-util-colors-red-red-200 bg-util-colors-red-red-50 p-4">
|
||||
<div className="system-sm-semibold text-util-colors-red-red-700">{t('settings.danger')}</div>
|
||||
<div className="system-xs-regular text-util-colors-red-red-600">
|
||||
{t('settings.dangerDesc')}
|
||||
</div>
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<div className="system-xs-regular text-text-tertiary">
|
||||
{hasDeployments
|
||||
? t('settings.undeployFirst')
|
||||
: settings?.deleteGuard?.disabledReason || t('settings.safeToDelete')}
|
||||
</div>
|
||||
<DeleteInstanceButton
|
||||
app={app}
|
||||
settings={settings}
|
||||
hasDeployments={hasDeployments}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
function SettingsForm({ app, settings }: SettingsFormProps) {
|
||||
const { t } = useTranslation('deployments')
|
||||
const updateInstance = useMutation(consoleQuery.enterprise.appDeploy.updateAppInstance.mutationOptions())
|
||||
|
||||
@ -39,21 +39,29 @@ function NewInstanceAction({ icon, label, disabled, onClick }: NewInstanceAction
|
||||
)
|
||||
}
|
||||
|
||||
export function NewInstanceCard() {
|
||||
function CreateFromStudioAction() {
|
||||
const { t } = useTranslation('deployments')
|
||||
const openCreateInstanceModal = useSetAtom(openCreateInstanceModalAtom)
|
||||
|
||||
return (
|
||||
<NewInstanceAction
|
||||
icon="i-ri-stack-line"
|
||||
label={t('newInstance.fromStudio')}
|
||||
onClick={openCreateInstanceModal}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export function NewInstanceCard() {
|
||||
const { t } = useTranslation('deployments')
|
||||
|
||||
return (
|
||||
<div className="relative col-span-1 inline-flex h-[160px] flex-col justify-between rounded-xl border-[0.5px] border-components-card-border bg-components-card-bg">
|
||||
<div className="grow rounded-t-xl p-2">
|
||||
<div className="px-6 pt-2 pb-1 text-xs leading-[18px] font-medium text-text-tertiary">
|
||||
{t('newInstance.title')}
|
||||
</div>
|
||||
<NewInstanceAction
|
||||
icon="i-ri-stack-line"
|
||||
label={t('newInstance.fromStudio')}
|
||||
onClick={openCreateInstanceModal}
|
||||
/>
|
||||
<CreateFromStudioAction />
|
||||
<NewInstanceAction
|
||||
icon="i-ri-file-code-line"
|
||||
label={t('newInstance.importDSL')}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user