dify/web/features/deployments/detail/instances/index.tsx

'use client'
import { useAtomValue } from 'jotai'
import { useTranslation } from 'react-i18next'
import { SkeletonRectangle, SkeletonRow } from '@/app/components/base/skeleton'
import {
  DetailTable,
  DetailTableBody,
  DetailTableCard,
  DetailTableCardList,
  DetailTableCell,
  DetailTableHead,
  DetailTableHeader,
  DetailTableRow,
} from '../../shared/components/detail-table'
import { DeploymentEmptyState, DeploymentStateMessage } from '../../shared/components/empty-state'
import {
  deploymentEnvironmentDeploymentsIsErrorAtom,
  deploymentEnvironmentDeploymentsIsLoadingAtom,
  deploymentRuntimeInstanceRowsAtom,
} from '../state'
import { DeploymentEnvironmentList } from './environment-list/deployment-environment-list'
import { NewDeploymentButton } from './header-actions/new-deployment-button'
import { DEPLOYMENT_DETAIL_TABLE_COLUMN_CLASS_NAMES } from './table-styles'

const DEPLOYMENT_TABLE_ROW_SKELETON_KEYS = ['production', 'staging']

function DeploymentEnvironmentListSkeleton() {
  const { t } = useTranslation('deployments')

  return (
    <>
      <DetailTableCardList className="pc:hidden">
        {DEPLOYMENT_TABLE_ROW_SKELETON_KEYS.map(key => (
          <DetailTableCard key={key}>
            <div className="flex flex-col gap-3 p-4">
              <div className="flex min-w-0 flex-col gap-1.5">
                <SkeletonRectangle className="h-3 w-32 animate-pulse" />
                <SkeletonRectangle className="my-0 h-4 w-18 animate-pulse rounded-md" />
              </div>
              <div className="flex min-w-0 flex-col gap-1.5">
                <SkeletonRectangle className="h-2.5 w-24 animate-pulse" />
                <SkeletonRow className="gap-2">
                  <SkeletonRectangle className="h-3 w-16 animate-pulse" />
                  <SkeletonRectangle className="h-2.5 w-18 animate-pulse" />
                </SkeletonRow>
              </div>
              <SkeletonRectangle className="my-0 size-8 animate-pulse rounded-md" />
            </div>
          </DetailTableCard>
        ))}
      </DetailTableCardList>
      <div className="hidden pc:block">
        <DetailTable>
          <DetailTableHeader>
            <DetailTableRow>
              <DetailTableHead className={DEPLOYMENT_DETAIL_TABLE_COLUMN_CLASS_NAMES.environment}>{t('deployTab.col.environment')}</DetailTableHead>
              <DetailTableHead className={DEPLOYMENT_DETAIL_TABLE_COLUMN_CLASS_NAMES.status}>{t('deployTab.col.status')}</DetailTableHead>
              <DetailTableHead className={DEPLOYMENT_DETAIL_TABLE_COLUMN_CLASS_NAMES.currentRelease}>{t('deployTab.col.currentRelease')}</DetailTableHead>
              <DetailTableHead className={`${DEPLOYMENT_DETAIL_TABLE_COLUMN_CLASS_NAMES.actions} text-right`}>{t('deployTab.col.actions')}</DetailTableHead>
            </DetailTableRow>
          </DetailTableHeader>
          <DetailTableBody>
            {DEPLOYMENT_TABLE_ROW_SKELETON_KEYS.map(key => (
              <DetailTableRow key={key}>
                <DetailTableCell>
                  <SkeletonRectangle className="h-3 w-32 animate-pulse" />
                </DetailTableCell>
                <DetailTableCell>
                  <SkeletonRectangle className="my-0 h-4 w-18 animate-pulse rounded-md" />
                </DetailTableCell>
                <DetailTableCell>
                  <SkeletonRow className="gap-2">
                    <SkeletonRectangle className="h-3 w-16 animate-pulse" />
                    <SkeletonRectangle className="h-2.5 w-18 animate-pulse" />
                  </SkeletonRow>
                </DetailTableCell>
                <DetailTableCell className={DEPLOYMENT_DETAIL_TABLE_COLUMN_CLASS_NAMES.actions}>
                  <div className="flex justify-end">
                    <SkeletonRectangle className="my-0 size-8 animate-pulse rounded-md" />
                  </div>
                </DetailTableCell>
              </DetailTableRow>
            ))}
          </DetailTableBody>
        </DetailTable>
      </div>
    </>
  )
}

export function DeploymentInstances() {
  const { t } = useTranslation('deployments')
  const isLoading = useAtomValue(deploymentEnvironmentDeploymentsIsLoadingAtom)
  const hasError = useAtomValue(deploymentEnvironmentDeploymentsIsErrorAtom)
  const rows = useAtomValue(deploymentRuntimeInstanceRowsAtom)

  return (
    <div className="flex w-full min-w-0 flex-col gap-4 px-6 py-6">
      {isLoading
        ? <DeploymentEnvironmentListSkeleton />
        : hasError
          ? <DeploymentStateMessage variant="list">{t('common.loadFailed')}</DeploymentStateMessage>
          : rows.length === 0
            ? (
                <DeploymentEmptyState
                  icon="i-ri-server-line"
                  title={t('deployTab.emptyTitle')}
                  description={t('deployTab.emptyDescription')}
                  action={<NewDeploymentButton />}
                />
              )
            : (
                <DeploymentEnvironmentList rows={rows} />
              )}
    </div>
  )
}