Skip to content
Snippets Groups Projects
implementations.tsx 3.78 KiB
Newer Older
bruno's avatar
bruno committed
import React from 'react'

brunoravera's avatar
brunoravera committed
import {
  Text,
  TableContainer,
  Table,
  TableCaption,
  Thead,
  Tr,
  Th,
  Tbody,
  Td,
  Tooltip,
  HStack,
  IconButton,
  Icon,
brunoravera's avatar
brunoravera committed
  VStack,
  Button,
brunoravera's avatar
brunoravera committed
} from '@chakra-ui/react'
brunoravera's avatar
brunoravera committed
import { FaEye, FaPlay, FaPlus, FaTrash } from 'react-icons/fa'
brunoravera's avatar
brunoravera committed

brunoravera's avatar
brunoravera committed
import { Implementation, Pattern } from 'src/models'
brunoravera's avatar
brunoravera committed
import { GetPatternQuery } from '../patterns/query-builder'
brunoravera's avatar
brunoravera committed
import { GetImplementationsByPatternIdQuery } from './query-builder/get-implementations-by-pattern-id-query'
brunoravera's avatar
brunoravera committed
import { DateUtils } from 'src/utils/date-utils'
brunoravera's avatar
brunoravera committed
import { AddImplementationButton } from './add-implementation'
brunoravera's avatar
brunoravera committed
import { RunTestsButton } from './run-tests'
brunoravera's avatar
brunoravera committed

brunoravera's avatar
brunoravera committed
const tableHeaders = [
  'Nombre',
  ' Imagen',
  'Descripcion',
  'Fecha de creacion',
  '',
]
brunoravera's avatar
brunoravera committed

export type ImplementationsProps = {
  patternId: Pattern['id']
}
export const Implementations: React.FC<ImplementationsProps> = ({
  patternId,
}) => {
brunoravera's avatar
brunoravera committed
  const patternQuery = GetPatternQuery.useQuery({ id: patternId })
brunoravera's avatar
brunoravera committed
  const implementationsQuery = GetImplementationsByPatternIdQuery.useQuery({
    patternId,
  })
brunoravera's avatar
brunoravera committed
  const tableCaption =
brunoravera's avatar
brunoravera committed
    implementationsQuery.data?.length === 0
      ? `No hay implementaciones disponibles de ${patternQuery.data?.name}`
      : `Implementaciones disponibles de ${patternQuery.data?.name}`
brunoravera's avatar
brunoravera committed

  return (
brunoravera's avatar
brunoravera committed
    <VStack spacing="2">
      <TableContainer>
        <Table variant="striped" size="lg" minW="80vw">
          <TableCaption>{tableCaption}</TableCaption>
          <Thead>
            <Tr>
              {tableHeaders.map((header, index) => (
                <Th key={`th-${index}`}>{header}</Th>
              ))}
brunoravera's avatar
brunoravera committed
            </Tr>
brunoravera's avatar
brunoravera committed
          </Thead>
          <Tbody>
            {implementationsQuery.data?.map((implementation, index) => (
              <Tr key={`implementation-${implementation.name}-${index}`}>
                <Td>{implementation.name}</Td>
brunoravera's avatar
brunoravera committed
                <Td>{implementation.dockerhubImageName}</Td>
brunoravera's avatar
brunoravera committed
                <Td>
                  <Tooltip label={implementation.description} hasArrow>
                    <Text isTruncated maxW="sm">
                      {implementation.description}
                    </Text>
                  </Tooltip>
                </Td>
                <Td>
                  {DateUtils.formatLocalDateTime(implementation.createdDate)}
                </Td>
                <Td>
brunoravera's avatar
brunoravera committed
                  <ActionsRow
                    implementation={implementation}
                    pattern={patternQuery.data}
                  />
brunoravera's avatar
brunoravera committed
                </Td>
              </Tr>
            ))}
          </Tbody>
        </Table>
      </TableContainer>
      <HStack w="full" justifyContent="flex-end">
        {patternQuery.data && (
          <AddImplementationButton
            pattern={patternQuery.data}
            hasTooltip={true}
          >
            <Button variant="solid" colorScheme="blue">
brunoravera's avatar
brunoravera committed
              Crear Implementacion
brunoravera's avatar
brunoravera committed
            </Button>
          </AddImplementationButton>
        )}
      </HStack>
    </VStack>
brunoravera's avatar
brunoravera committed
  )
}
type ActionsRowProps = {
brunoravera's avatar
brunoravera committed
  implementation: Implementation
  pattern: Pattern
brunoravera's avatar
brunoravera committed
const ActionsRow: React.FC<ActionsRowProps> = ({ implementation, pattern }) => {
bruno's avatar
bruno committed
  return (
brunoravera's avatar
brunoravera committed
    <HStack>
brunoravera's avatar
brunoravera committed
      <Tooltip label={<Text>Ver detalles</Text>}>
        <IconButton
          aria-label="view implementation"
          variant="unstyled"
          icon={<Icon as={FaEye} />}
        />
      </Tooltip>
brunoravera's avatar
brunoravera committed
      <RunTestsButton implementation={implementation} pattern={pattern}>
brunoravera's avatar
brunoravera committed
        <IconButton
          aria-label="test implementation"
          variant="unstyled"
          icon={<Icon as={FaPlay} />}
        />
brunoravera's avatar
brunoravera committed
      </RunTestsButton>
brunoravera's avatar
brunoravera committed
      <Tooltip label={<Text>Eliminar implementacion</Text>}>
        <IconButton
          aria-label="delete implementation"
          variant="unstyled"
          icon={<Icon as={FaTrash} />}
        />
      </Tooltip>
brunoravera's avatar
brunoravera committed
    </HStack>
bruno's avatar
bruno committed
  )
}