function CustomImagesList()

in frontend/src/old-pages/Images/CustomImages/CustomImages.tsx [49:118]


function CustomImagesList() {
  const {t} = useTranslation()
  const images = useSelector(selectCustomImagesList)

  const [selected, setSelected] = React.useState<ImageInfoSummary[]>([])

  const imageStatus = useState(['app', 'customImages', 'selectedImageStatus'])

  let select = (image: ImageInfoSummary) => {
    setSelected([image])
    DescribeCustomImage(image.imageId)
    setState(['app', 'customImages', 'selected'], image.imageId)
  }

  const buildImage = () => {
    setState([...imageBuildPath, 'dialog'], true)
  }

  const refreshImages = () => {
    setSelected([])
    clearState(['customImages', 'list'])
    clearState(['app', 'customImages', 'selected'])
    ListCustomImages(imageStatus || 'AVAILABLE')
  }

  const imagesCount = (images || []).length

  const {
    items,
    actions,
    filteredItemsCount,
    collectionProps,
    filterProps,
    paginationProps,
  } = useCollection(
    images || [],
    extendCollectionsOptions({
      filtering: {
        empty: (
          <EmptyState
            title={t('customImages.list.filtering.empty.title')}
            subtitle={t('customImages.list.filtering.empty.subtitle')}
            action={
              <Button onClick={buildImage}>
                {t('customImages.list.filtering.empty.action')}
              </Button>
            }
          />
        ),
        noMatch: (
          <EmptyState
            title={t('customImages.list.filtering.noMatch.title')}
            subtitle={t('customImages.list.filtering.noMatch.subtitle')}
            action={
              <Button onClick={() => actions.setFiltering('')}>
                {t('customImages.list.filtering.noMatch.action')}
              </Button>
            }
          />
        ),
      },
      sorting: {
        defaultState: {
          sortingColumn: {
            sortingField: 'imageId',
          },
        },
      },
      selection: {},
    }),