Skip to content

Commit b326ba4

Browse files
dominikvagnerdominikvagner
committed
fix: correct repeatable build repositories view
This adds a different view for the 'Repositories' step that reflects if repeatable build with a set snapshot date was chosen. It hides information about repositories that might be incorrect at the chosen date and present a snapshot date and displays correct package count with a link to the snapshot detail.
1 parent 1c8a6fe commit b326ba4

File tree

2 files changed

+142
-84
lines changed

2 files changed

+142
-84
lines changed

‎src/Components/CreateImageWizard/steps/Repositories/Repositories.tsx‎

Lines changed: 140 additions & 83 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import {
1313
Panel,
1414
PanelMain,
1515
SearchInput,
16+
Spinner,
1617
ToggleGroup,
1718
ToggleGroupItem,
1819
Toolbar,
@@ -21,7 +22,6 @@ import {
2122
} from '@patternfly/react-core';
2223
import { ExternalLinkAltIcon } from '@patternfly/react-icons';
2324
import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
24-
import useChrome from '@redhat-cloud-services/frontend-components/useChrome';
2525

2626
import { BulkSelect } from './components/BulkSelect';
2727
import CommunityRepositoryLabel from './components/CommunityRepositoryLabel';
@@ -38,17 +38,17 @@ import RepositoriesStatus from './RepositoriesStatus';
3838
import RepositoryUnavailable from './RepositoryUnavailable';
3939

4040
import {
41-
AMPLITUDE_MODULE_NAME,
41+
CONTENT_URL,
4242
ContentOrigin,
4343
PAGINATION_COUNT,
4444
TEMPLATES_URL,
4545
} from '../../../../constants';
46-
import { useGetUser } from '../../../../Hooks';
4746
import {
4847
ApiRepositoryResponseRead,
4948
useGetTemplateQuery,
5049
useListRepositoriesQuery,
5150
useListRepositoryParametersQuery,
51+
useListSnapshotsByDateMutation,
5252
} from '../../../../store/contentSourcesApi';
5353
import { useAppDispatch, useAppSelector } from '../../../../store/hooks';
5454
import {
@@ -62,17 +62,20 @@ import {
6262
selectPackages,
6363
selectPayloadRepositories,
6464
selectRecommendedRepositories,
65+
selectSnapshotDate,
6566
selectTemplate,
6667
selectUseLatest,
6768
selectWizardMode,
6869
} from '../../../../store/wizardSlice';
6970
import { releaseToVersion } from '../../../../Utilities/releaseToVersion';
71+
import {
72+
convertStringToDate,
73+
timestampToDisplayStringDetailed,
74+
} from '../../../../Utilities/time';
7075
import useDebounce from '../../../../Utilities/useDebounce';
7176
import { useFlag } from '../../../../Utilities/useGetEnvironment';
7277

7378
const Repositories = () => {
74-
const { analytics, auth } = useChrome();
75-
const { userData } = useGetUser(auth);
7679
const dispatch = useAppDispatch();
7780
const wizardMode = useAppSelector(selectWizardMode);
7881
const arch = useAppSelector(selectArchitecture);
@@ -82,6 +85,7 @@ const Repositories = () => {
8285
const packages = useAppSelector(selectPackages);
8386
const groups = useAppSelector(selectGroups);
8487
const useLatestContent = useAppSelector(selectUseLatest);
88+
const snapshotDate = useAppSelector(selectSnapshotDate);
8589

8690
const payloadRepositories = useAppSelector(selectPayloadRepositories);
8791
const recommendedRepos = useAppSelector(selectRecommendedRepositories);
@@ -503,6 +507,7 @@ const Repositories = () => {
503507
} = {},
504508
isError: isReposInTemplateError,
505509
isLoading: isReposInTemplateLoading,
510+
isFetching: isReposInTemplateFetching,
506511
} = useListRepositoriesQuery(
507512
{
508513
contentType: 'rpm',
@@ -516,6 +521,42 @@ const Repositories = () => {
516521
{ refetchOnMountOrArgChange: true, skip: !isTemplateSelected },
517522
);
518523

524+
const [
525+
listSnapshotsByDate,
526+
{
527+
data: snapshotsByDate,
528+
isError: isSnapshotsError,
529+
isLoading: isSnapshotsLoading,
530+
isUninitialized: isSnapshotsUninitilized,
531+
},
532+
] = useListSnapshotsByDateMutation();
533+
534+
useEffect(() => {
535+
if (
536+
!snapshotDate ||
537+
useLatestContent ||
538+
isTemplateSelected ||
539+
!contentList.length
540+
) {
541+
return;
542+
}
543+
544+
listSnapshotsByDate({
545+
apiListSnapshotByDateRequest: {
546+
repository_uuids: contentList
547+
.filter((c) => !!c.uuid)
548+
.map((c) => c.uuid!),
549+
date: new Date(convertStringToDate(snapshotDate)).toISOString(),
550+
},
551+
});
552+
}, [
553+
contentList,
554+
listSnapshotsByDate,
555+
snapshotDate,
556+
useLatestContent,
557+
isTemplateSelected,
558+
]);
559+
519560
useEffect(() => {
520561
if (isTemplateSelected && reposInTemplate.length > 0) {
521562
const customReposInTemplate = reposInTemplate.filter(
@@ -551,9 +592,24 @@ const Repositories = () => {
551592
}
552593
}, [templateUuid, reposInTemplate]);
553594

554-
if (isError || isTemplateError || isReposInTemplateError) return <Error />;
555-
if (isLoading || isTemplateLoading || isReposInTemplateLoading)
595+
if (
596+
isError ||
597+
isTemplateError ||
598+
isReposInTemplateError ||
599+
isSnapshotsError
600+
) {
601+
return <Error />;
602+
}
603+
if (
604+
isLoading ||
605+
isTemplateLoading ||
606+
isReposInTemplateLoading ||
607+
isReposInTemplateFetching ||
608+
(isSnapshotsLoading && isSnapshotsUninitilized)
609+
) {
556610
return <Loading />;
611+
}
612+
557613
if (!isTemplateSelected) {
558614
return (
559615
<Grid>
@@ -662,10 +718,19 @@ const Repositories = () => {
662718
<Tr>
663719
<Th aria-label='Selected' />
664720
<Th width={45}>Name</Th>
665-
<Th width={15}>Architecture</Th>
666-
<Th>Version</Th>
667-
<Th width={10}>Packages</Th>
668-
<Th>Status</Th>
721+
{!snapshotDate ? (
722+
<>
723+
<Th width={15}>Architecture</Th>
724+
<Th>Version</Th>
725+
<Th width={10}>Packages</Th>
726+
<Th>Status</Th>
727+
</>
728+
) : (
729+
<>
730+
<Th width={30}>Snapshot date</Th>
731+
<Th>Packages</Th>
732+
</>
733+
)}
669734
</Tr>
670735
</Thead>
671736
<Tbody>
@@ -688,6 +753,12 @@ const Repositories = () => {
688753
selected.has(uuid),
689754
);
690755

756+
const snapshot = snapshotsByDate?.data?.find(
757+
(s) => s.repository_uuid === uuid,
758+
);
759+
const packages =
760+
snapshot?.match?.content_counts?.['rpm.package'];
761+
691762
return (
692763
<Tr key={`${uuid}-${rowIndex}`}>
693764
<Td
@@ -705,81 +776,67 @@ const Repositories = () => {
705776
{origin === ContentOrigin.UPLOAD ? (
706777
<UploadRepositoryLabel />
707778
) : origin === ContentOrigin.COMMUNITY ? (
708-
<>
709-
<CommunityRepositoryLabel />
710-
<br />
711-
<Button
712-
component='a'
713-
target='_blank'
714-
variant='link'
715-
icon={<ExternalLinkAltIcon />}
716-
iconPosition='right'
717-
isInline
718-
onClick={() => {
719-
if (!process.env.IS_ON_PREMISE) {
720-
analytics.track(
721-
`${AMPLITUDE_MODULE_NAME} - Outside link clicked`,
722-
{
723-
step_id: 'step-repositories',
724-
account_id:
725-
userData?.identity.internal
726-
?.account_id || 'Not found',
727-
},
728-
);
729-
}
730-
}}
731-
href={url}
732-
>
733-
{url}
734-
</Button>
735-
</>
736-
) : isSharedEPELEnabled && isEPELUrl(url) ? (
737-
<>
738-
<CustomEpelWarning />
739-
<Button
740-
component='a'
741-
target='_blank'
742-
variant='link'
743-
icon={<ExternalLinkAltIcon />}
744-
iconPosition='right'
745-
isInline
746-
href={url}
747-
>
748-
{url}
749-
</Button>
750-
</>
779+
<CommunityRepositoryLabel />
751780
) : (
752-
<>
753-
<br />
754-
<Button
755-
component='a'
756-
target='_blank'
757-
variant='link'
758-
icon={<ExternalLinkAltIcon />}
759-
iconPosition='right'
760-
isInline
761-
href={url}
762-
>
763-
{url}
764-
</Button>
765-
</>
781+
isSharedEPELEnabled &&
782+
isEPELUrl(url) && <CustomEpelWarning />
766783
)}
767784
</Td>
768-
<Td dataLabel={'Architecture'}>
769-
{getReadableArchitecture(distribution_arch)}
770-
</Td>
771-
<Td dataLabel={'Version'}>
772-
{getReadableVersions(distribution_versions)}
773-
</Td>
774-
<Td dataLabel={'Packages'}>{package_count || '-'}</Td>
775-
<Td dataLabel={'Status'}>
776-
<RepositoriesStatus
777-
repoStatus={status || 'Unavailable'}
778-
repoUrl={url}
779-
repoIntrospections={last_introspection_time}
780-
repoFailCount={failed_introspections_count}
781-
/>
782-
</Td>
785+
{!snapshotDate ? (
786+
<>
787+
<Td dataLabel={'Architecture'}>
788+
{getReadableArchitecture(distribution_arch)}
789+
</Td>
790+
<Td dataLabel={'Version'}>
791+
{getReadableVersions(distribution_versions)}
792+
</Td>
793+
<Td dataLabel={'Packages'}>
794+
{package_count || '-'}
795+
</Td>
796+
<Td dataLabel={'Status'}>
797+
<RepositoriesStatus
798+
repoStatus={status || 'Unavailable'}
799+
repoUrl={url}
800+
repoIntrospections={last_introspection_time}
801+
repoFailCount={failed_introspections_count}
802+
/>
803+
</Td>
804+
</>
805+
) : (
806+
<>
807+
<Td dataLabel={'Snapshot date'}>
808+
{!isSnapshotsLoading ? (
809+
timestampToDisplayStringDetailed(
810+
snapshot?.match?.created_at ?? '',
811+
'UTC',
812+
) || '-'
813+
) : (
814+
<Spinner size='sm' />
815+
)}
816+
</Td>
817+
<Td dataLabel={'Packages'}>
818+
{!isSnapshotsLoading ? (
819+
packages && snapshot.match?.uuid ? (
820+
<Button
821+
component='a'
822+
target='_blank'
823+
variant='link'
824+
icon={<ExternalLinkAltIcon />}
825+
iconPosition='right'
826+
isInline
827+
href={`${CONTENT_URL}/${uuid}/snapshots/${snapshot.match.uuid}`}
828+
>
829+
{packages}
830+
</Button>
831+
) : (
832+
'-'
833+
)
834+
) : (
835+
<Spinner size='sm' />
836+
)}
837+
</Td>
838+
</>
839+
)}
783840
</Tr>
784841
);
785842
})}

‎src/Utilities/time.ts‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,7 @@ export const timestampToDisplayString = (ts?: string) => {
3333
return tsDisplay;
3434
};
3535

36-
export const timestampToDisplayStringDetailed = (ts?: string) => {
36+
export const timestampToDisplayStringDetailed = (ts?: string, tz?: string) => {
3737
// Detailed representation including time and time zone
3838
if (!ts) {
3939
return '';
@@ -49,6 +49,7 @@ export const timestampToDisplayStringDetailed = (ts?: string) => {
4949
second: 'numeric',
5050
hour12: false,
5151
timeZoneName: 'short',
52+
timeZone: tz,
5253
};
5354

5455
const tsDisplay = new Intl.DateTimeFormat('en-US', options).format(ms);

0 commit comments

Comments
 (0)