-
Notifications
You must be signed in to change notification settings - Fork 31
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Signed-off-by: Gowtham Shanmugasundaram <gshanmug@redhat.com>
- Loading branch information
1 parent
eb8baf6
commit 661ae39
Showing
23 changed files
with
784 additions
and
138 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
199 changes: 199 additions & 0 deletions
199
packages/odf/components/s3-browser/buckets-list-page/bucketListTable.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,199 @@ | ||
| import * as React from 'react'; | ||
| import { | ||
| BUCKET_BOOKMARKS_USER_SETTINGS_KEY, | ||
| BUCKET_DETAILS_PAGE_PATH, | ||
| } from '@odf/core/constants'; | ||
| import { BucketCrFormat } from '@odf/core/types'; | ||
| import { EmptyPage } from '@odf/shared/empty-state-page'; | ||
| import { useUserSettingsLocalStorage } from '@odf/shared/hooks/useUserSettingsLocalStorage'; | ||
| import { | ||
| ComposableTable, | ||
| RowComponentType, | ||
| } from '@odf/shared/table/composable-table'; | ||
| import { useCustomTranslation } from '@odf/shared/useCustomTranslationHook'; | ||
| import { sortRows } from '@odf/shared/utils'; | ||
| import { Timestamp } from '@openshift-console/dynamic-plugin-sdk'; | ||
| import { TFunction, Trans } from 'react-i18next'; | ||
| import { Link } from 'react-router-dom-v5-compat'; | ||
| import { Bullseye, Label } from '@patternfly/react-core'; | ||
| import { UserIcon } from '@patternfly/react-icons'; | ||
| import { ActionsColumn, IAction, Td, Tr } from '@patternfly/react-table'; | ||
|
|
||
| const getRowActions = (t: TFunction<string>): IAction[] => [ | ||
| { | ||
| title: ( | ||
| <> | ||
| {t('Empty bucket')} | ||
| <p className="text-muted pf-v5-u-font-size-xs"> | ||
| {t('Erase the contents of your bucket')} | ||
| </p> | ||
| </> | ||
| ), | ||
| onClick: () => undefined, | ||
| }, | ||
| { | ||
| title: t('Delete bucket'), | ||
| onClick: () => undefined, | ||
| }, | ||
| ]; | ||
|
|
||
| const getColumnNames = (t: TFunction<string>) => [ | ||
| '', // favoritable, | ||
| t('Name'), | ||
| t('Storage endpoint'), | ||
| t('Create on'), | ||
| t('Owner'), | ||
| '', // action kebab | ||
| ]; | ||
|
|
||
| const getHeaderColumns = (t: TFunction<string>, favorites: string[]) => { | ||
| const columnNames = getColumnNames(t); | ||
| return [ | ||
| { | ||
| columnName: columnNames[0], | ||
| sortFunction: (a, b, c) => sortRows(a, b, c, 'metadata.name', favorites), | ||
| }, | ||
| { | ||
| columnName: columnNames[1], | ||
| sortFunction: (a, b, c) => sortRows(a, b, c, 'metadata.name'), | ||
| }, | ||
| { | ||
| columnName: columnNames[2], | ||
| thProps: { | ||
| className: 'pf-v5-u-w-16-on-lg', | ||
| }, | ||
| }, | ||
| { | ||
| columnName: columnNames[3], | ||
| sortFunction: (a, b, c) => | ||
| sortRows(a, b, c, 'metadata.creationTimestamp'), | ||
| thProps: { | ||
| className: 'pf-v5-u-w-16-on-lg', | ||
| }, | ||
| }, | ||
| { | ||
| columnName: columnNames[4], | ||
| thProps: { | ||
| className: 'pf-v5-u-w-16-on-lg', | ||
| }, | ||
| }, | ||
| { | ||
| columnName: columnNames[5], | ||
| }, | ||
| ]; | ||
| }; | ||
|
|
||
| const NoBucketMessage: React.FC = () => { | ||
| const { t } = useCustomTranslation(); | ||
| return ( | ||
| <EmptyPage | ||
| ButtonComponent={() => <></>} | ||
| title={t('Create and manage your buckets')} | ||
| isLoaded | ||
| canAccess | ||
| > | ||
| <Trans t={t}> | ||
| Navigate through your buckets effortlessly. View the contents of your | ||
| S3-managed and Openshift-managed buckets, making it easy to locate and | ||
| inspect objects. | ||
| </Trans> | ||
| </EmptyPage> | ||
| ); | ||
| }; | ||
|
|
||
| const EmptyRowMessage: React.FC = () => { | ||
| const { t } = useCustomTranslation(); | ||
| return <Bullseye className="pf-v5-u-mt-xl">{t('No buckets found')}</Bullseye>; | ||
| }; | ||
|
|
||
| const BucketsTableRow: React.FC<RowComponentType<BucketCrFormat>> = ({ | ||
| row: bucket, | ||
| rowIndex, | ||
| extraProps, | ||
| }) => { | ||
| const { t } = useCustomTranslation(); | ||
| const columnNames = getColumnNames(t); | ||
| const { | ||
| apiResponse: { owner }, | ||
| metadata: { name, creationTimestamp }, | ||
| } = bucket; | ||
| const { favorites, setFavorites }: RowExtraPropsType = extraProps; | ||
|
|
||
| const onSetFavorite = (key, active) => { | ||
| setFavorites((oldFavorites) => [ | ||
| ...oldFavorites.filter((oldFavorite) => oldFavorite !== key), | ||
| ...(active ? [key] : []), | ||
| ]); | ||
| }; | ||
|
|
||
| return ( | ||
| <Tr translate={null} key={rowIndex}> | ||
| <Td | ||
| translate={null} | ||
| favorites={{ | ||
| isFavorited: favorites.includes(name), | ||
| onFavorite: (_event, isFavoriting) => | ||
| onSetFavorite(name, isFavoriting), | ||
| rowIndex, | ||
| }} | ||
| /> | ||
| <Td translate={null} dataLabel={columnNames[1]}> | ||
| <Link to={`${BUCKET_DETAILS_PAGE_PATH}/${name}`}>{name}</Link> | ||
| </Td> | ||
| <Td translate={null} dataLabel={columnNames[2]}> | ||
| {/* ToDo: Currently we only support MCG, make is configurable once RGW is supported as well */} | ||
| <Label color="gold">{t('MCG')}</Label> | ||
| </Td> | ||
| <Td translate={null} dataLabel={columnNames[3]}> | ||
| {<Timestamp timestamp={creationTimestamp} />} | ||
| </Td> | ||
| <Td translate={null} dataLabel={columnNames[4]}> | ||
| <UserIcon /> <span data-test="owner">{owner}</span> | ||
| </Td> | ||
| <Td translate={null} isActionCell> | ||
| <ActionsColumn items={getRowActions(t)} translate={null} /> | ||
| </Td> | ||
| </Tr> | ||
| ); | ||
| }; | ||
|
|
||
| export const BucketsListTable: React.FC<BucketsListTableProps> = ({ | ||
| allBuckets, | ||
| filteredBuckets, | ||
| loaded, | ||
| error, | ||
| }) => { | ||
| const { t } = useCustomTranslation(); | ||
| const [favorites, setFavorites] = useUserSettingsLocalStorage<string[]>( | ||
| BUCKET_BOOKMARKS_USER_SETTINGS_KEY, | ||
| true, | ||
| [] | ||
| ); | ||
| return ( | ||
| <ComposableTable | ||
| rows={filteredBuckets} | ||
| columns={getHeaderColumns(t, favorites)} | ||
| RowComponent={BucketsTableRow} | ||
| noDataMsg={NoBucketMessage} | ||
| emptyRowMessage={EmptyRowMessage} | ||
| unfilteredData={allBuckets as []} | ||
| loaded={loaded} | ||
| loadError={error} | ||
| isFavorites={true} | ||
| isCompact={true} | ||
| extraProps={{ favorites, setFavorites }} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| type BucketsListTableProps = { | ||
| allBuckets: BucketCrFormat[]; | ||
| filteredBuckets: BucketCrFormat[]; | ||
| loaded: boolean; | ||
| error: any; | ||
| }; | ||
|
|
||
| type RowExtraPropsType = { | ||
| favorites: string[]; | ||
| setFavorites: React.Dispatch<React.SetStateAction<string[]>>; | ||
| }; |
87 changes: 87 additions & 0 deletions
87
packages/odf/components/s3-browser/buckets-list-page/bucketPagination.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| import * as React from 'react'; | ||
| import { LIST_BUCKET, MAX_BUCKETS } from '@odf/core/constants'; | ||
| import { BucketCrFormat } from '@odf/core/types'; | ||
| import { convertBucketDataToCrFormat } from '@odf/core/utils'; | ||
| import useSWRMutation from 'swr/mutation'; | ||
| import { NoobaaS3Context } from '../noobaa-context'; | ||
| import { | ||
| ContinuationTokens, | ||
| fetchObjects, | ||
| Pagination, | ||
| } from '../pagination-helper'; | ||
|
|
||
| export const BucketPagination: React.FC<BucketPaginationProps> = ({ | ||
| setBucketInfo, | ||
| }) => { | ||
| const { noobaaS3 } = React.useContext(NoobaaS3Context); | ||
| const { data, error, isMutating, trigger } = useSWRMutation( | ||
| LIST_BUCKET, | ||
| (_url, { arg }: { arg: string }) => | ||
| noobaaS3.listBuckets({ | ||
| MaxBuckets: MAX_BUCKETS, | ||
| ...(!!arg && { ContinuationToken: arg }), | ||
| }) | ||
| ); | ||
|
|
||
| const loadedWOError = !isMutating && !error; | ||
| const [continuationTokens, setContinuationTokens] = | ||
| React.useState<ContinuationTokens>({ | ||
| previous: [], | ||
| current: '', | ||
| next: '', | ||
| }); | ||
|
|
||
| React.useEffect(() => { | ||
| setBucketInfo([ | ||
| convertBucketDataToCrFormat(data), | ||
| !isMutating && !error, | ||
| error, | ||
| ]); | ||
| }, [data, isMutating, error, setBucketInfo]); | ||
|
|
||
| // initial fetch on first mount | ||
| React.useEffect(() => { | ||
| fetchObjects(setContinuationTokens, trigger, true, undefined); | ||
| // eslint-disable-next-line react-hooks/exhaustive-deps | ||
| }, []); | ||
|
|
||
| const onNextClick = async () => { | ||
| if (!!continuationTokens.next && loadedWOError) | ||
| fetchObjects( | ||
| setContinuationTokens, | ||
| trigger, | ||
| true, | ||
| undefined, | ||
| continuationTokens.next | ||
| ); | ||
| }; | ||
|
|
||
| const onPreviousClick = async () => { | ||
| if (!!continuationTokens.current && loadedWOError) { | ||
| const paginationToken = | ||
| continuationTokens.previous[continuationTokens.previous.length - 1]; | ||
| fetchObjects( | ||
| setContinuationTokens, | ||
| trigger, | ||
| false, | ||
| undefined, | ||
| paginationToken | ||
| ); | ||
| } | ||
| }; | ||
|
|
||
| return ( | ||
| <Pagination | ||
| disableNext={!continuationTokens.next || !loadedWOError} | ||
| disablePrevious={!continuationTokens.current || !loadedWOError} | ||
| onNext={onNextClick} | ||
| onPrevious={onPreviousClick} | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| type BucketPaginationProps = { | ||
| setBucketInfo: React.Dispatch< | ||
| React.SetStateAction<[BucketCrFormat[], boolean, any]> | ||
| >; | ||
| }; |
Oops, something went wrong.