dify/web/features/deployments/detail/deploy-tab/deployment-status-summary.tsx

'use client'

import type { RuntimeInstanceRow } from '@dify/contracts/enterprise/types.gen'
import { useTranslation } from 'react-i18next'
import {
  activeRelease,
  deploymentStatus,
  isUndeployedDeploymentRow,
  releaseLabel,
} from '../../utils'

export function DeploymentStatusSummary({ row }: {
  row: RuntimeInstanceRow
}) {
  const { t } = useTranslation('deployments')
  if (isUndeployedDeploymentRow(row)) {
    return (
      <span className="inline-flex items-center gap-1.5 system-sm-medium text-text-tertiary">
        <span className="size-1.5 rounded-full bg-text-quaternary" />
        {t('status.notDeployed')}
      </span>
    )
  }

  const status = deploymentStatus(row)

  if (status === 'deploying') {
    return (
      <span className="inline-flex items-center gap-1.5 system-sm-medium text-util-colors-blue-blue-700">
        <span className="i-ri-loader-4-line size-3.5 animate-spin" />
        {t('deployTab.status.deployingRelease', { release: releaseLabel(activeRelease(row)) })}
      </span>
    )
  }

  if (status === 'deploy_failed') {
    const hasRunningRelease = !!activeRelease(row)?.id
    return (
      <span className="inline-flex items-center gap-1.5 system-sm-medium text-util-colors-warning-warning-700">
        <span className="i-ri-alert-line size-3.5" />
        {t(hasRunningRelease ? 'deployTab.status.runningWithFailed' : 'deployTab.status.deployFailed')}
      </span>
    )
  }

  return (
    <span className="inline-flex items-center gap-1.5 system-sm-medium text-util-colors-green-green-700">
      <span className="size-1.5 rounded-full bg-util-colors-green-green-500" />
      {t('status.ready')}
    </span>
  )
}