Skip to content

Commit 1e613ed

Browse files
aali309aali309
committed
add Generators, Applications and Event tabs
Signed-off-by: Atif Ali <atali@redhat.com>
1 parent f8260f4 commit 1e613ed

File tree

1 file changed

+246
-0
lines changed

1 file changed

+246
-0
lines changed

‎src/gitops/components/application/ApplicationSetDetailsPage.tsx‎

Lines changed: 246 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ import ApplicationDetailsTitle from './ApplicationDetailsTitle';
2424
import { useLabelsModal, useAnnotationsModal } from '@openshift-console/dynamic-plugin-sdk';
2525

2626
import { ResourceLink } from '@openshift-console/dynamic-plugin-sdk';
27+
import ApplicationList from '../shared/ApplicationList';
2728

2829
const ApplicationSetDetailsPage: React.FC = () => {
2930
const { name, ns } = useParams<{ name: string; ns: string }>();
@@ -380,6 +381,251 @@ const ApplicationSetDetailsPage: React.FC = () => {
380381
</div>
381382
</div>
382383
</Tab>
384+
385+
<Tab eventKey={2} title={<TabTitleText>Generators</TabTitleText>} className="pf-v6-c-tab-content">
386+
<div className="co-m-pane__body">
387+
<div className="pf-v6-l-grid pf-m-gutter">
388+
<div className="pf-v6-l-grid__item pf-m-12-col-on-md">
389+
<Card>
390+
<CardHeader>
391+
<CardTitle>Generators</CardTitle>
392+
</CardHeader>
393+
<CardBody>
394+
<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
395+
{appSet.spec?.generators?.map((generator: any, index: number) => {
396+
const generatorType = Object.keys(generator)[0];
397+
const generatorData = generator[generatorType];
398+
399+
return (
400+
<div key={index} style={{
401+
border: '1px solid #393F44',
402+
borderRadius: '8px',
403+
padding: '16px',
404+
backgroundColor: '#212427'
405+
}}>
406+
<div style={{ display: 'flex', alignItems: 'center', marginBottom: '12px' }}>
407+
<div style={{
408+
width: '24px',
409+
height: '24px',
410+
backgroundColor: '#73bcf7',
411+
borderRadius: '4px',
412+
display: 'flex',
413+
alignItems: 'center',
414+
justifyContent: 'center',
415+
marginRight: '8px',
416+
fontSize: '12px',
417+
fontWeight: 'bold',
418+
color: '#003a70'
419+
}}>
420+
{generatorType.charAt(0).toUpperCase()}
421+
</div>
422+
<span style={{ fontWeight: '600', fontSize: '16px' }}>{generatorType}</span>
423+
</div>
424+
425+
{/* Render different generator types */}
426+
{generatorType === 'git' && (
427+
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
428+
{generatorData.repoURL && (
429+
<div style={{ display: 'flex', alignItems: 'center' }}>
430+
<span style={{ fontWeight: '500', minWidth: '80px', color: '#8a8d90' }}>Repository:</span>
431+
<span style={{ color: '#73bcf7', textDecoration: 'underline', cursor: 'pointer' }}>
432+
{generatorData.repoURL}
433+
</span>
434+
</div>
435+
)}
436+
{generatorData.revision && (
437+
<div style={{ display: 'flex', alignItems: 'center' }}>
438+
<span style={{ fontWeight: '500', minWidth: '80px', color: '#8a8d90' }}>Revision:</span>
439+
<span>{generatorData.revision}</span>
440+
</div>
441+
)}
442+
{generatorData.directories && (
443+
<div style={{ display: 'flex', alignItems: 'center' }}>
444+
<span style={{ fontWeight: '500', minWidth: '80px', color: '#8a8d90' }}>Directories:</span>
445+
<span>{generatorData.directories.length} directory(ies)</span>
446+
</div>
447+
)}
448+
</div>
449+
)}
450+
451+
{generatorType === 'clusterDecisionResource' && (
452+
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
453+
{generatorData.configMapRef && (
454+
<div style={{ display: 'flex', alignItems: 'center' }}>
455+
<span style={{ fontWeight: '500', minWidth: '80px', color: '#8a8d90' }}>ConfigMap:</span>
456+
<span>{generatorData.configMapRef.name}</span>
457+
</div>
458+
)}
459+
</div>
460+
)}
461+
462+
{generatorType === 'matrix' && (
463+
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
464+
<div style={{ color: '#8a8d90', fontSize: '14px' }}>
465+
Matrix generator with {Object.keys(generatorData).length} generators
466+
</div>
467+
</div>
468+
)}
469+
470+
{generatorType === 'clusters' && (
471+
<div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
472+
{generatorData.selector && (
473+
<div style={{ display: 'flex', alignItems: 'center' }}>
474+
<span style={{ fontWeight: '500', minWidth: '80px', color: '#8a8d90' }}>Selector:</span>
475+
<span style={{ fontFamily: 'Monaco, Menlo, Ubuntu Mono, monospace', fontSize: '12px' }}>
476+
{JSON.stringify(generatorData.selector)}
477+
</span>
478+
</div>
479+
)}
480+
</div>
481+
)}
482+
</div>
483+
);
484+
})}
485+
486+
{(!appSet.spec?.generators || appSet.spec.generators.length === 0) && (
487+
<div style={{
488+
display: 'flex',
489+
flexDirection: 'column',
490+
alignItems: 'center',
491+
justifyContent: 'center',
492+
padding: '40px 20px',
493+
color: '#8a8d90',
494+
fontSize: '16px'
495+
}}>
496+
<div style={{
497+
width: '48px',
498+
height: '48px',
499+
backgroundColor: '#393F44',
500+
borderRadius: '50%',
501+
display: 'flex',
502+
alignItems: 'center',
503+
justifyContent: 'center',
504+
marginBottom: '16px',
505+
fontSize: '24px'
506+
}}>
507+
⚙️
508+
</div>
509+
<div style={{ textAlign: 'center' }}>
510+
<div style={{ fontWeight: '600', marginBottom: '8px' }}>No Generators</div>
511+
<div style={{ fontSize: '14px' }}>
512+
This ApplicationSet has no generators configured.
513+
</div>
514+
</div>
515+
</div>
516+
)}
517+
</div>
518+
</CardBody>
519+
</Card>
520+
</div>
521+
</div>
522+
</div>
523+
</Tab>
524+
525+
<Tab eventKey={3} title={<TabTitleText>Applications</TabTitleText>} className="pf-v6-c-tab-content">
526+
<div className="co-m-pane__body">
527+
<div style={{ padding: '0' }}>
528+
<ApplicationList
529+
namespace={ns}
530+
hideNameLabelFilters={false}
531+
showTitle={false}
532+
appset={appSet}
533+
/>
534+
</div>
535+
</div>
536+
</Tab>
537+
538+
<Tab eventKey={4} title={<TabTitleText>Events</TabTitleText>} className="pf-v6-c-tab-content">
539+
<div className="co-m-pane__body">
540+
<div className="pf-v6-l-grid pf-m-gutter">
541+
<div className="pf-v6-l-grid__item pf-m-12-col-on-md">
542+
<Card>
543+
<CardHeader>
544+
<CardTitle>Events</CardTitle>
545+
</CardHeader>
546+
<CardBody>
547+
{status.conditions && status.conditions.length > 0 ? (
548+
<div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
549+
{status.conditions.map((condition: any, index: number) => (
550+
<div key={index} style={{
551+
border: '1px solid #393F44',
552+
borderRadius: '8px',
553+
padding: '16px',
554+
backgroundColor: '#212427'
555+
}}>
556+
<div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between', marginBottom: '8px' }}>
557+
<div style={{ display: 'flex', alignItems: 'center' }}>
558+
<div style={{
559+
width: '24px',
560+
height: '24px',
561+
backgroundColor: condition.status === 'True' ? '#3e8635' : '#c9190b',
562+
borderRadius: '4px',
563+
display: 'flex',
564+
alignItems: 'center',
565+
justifyContent: 'center',
566+
marginRight: '8px',
567+
fontSize: '12px',
568+
fontWeight: 'bold',
569+
color: 'white'
570+
}}>
571+
{condition.status === 'True' ? '✓' : '✗'}
572+
</div>
573+
<span style={{ fontWeight: '600', fontSize: '16px' }}>
574+
{condition.type}
575+
</span>
576+
</div>
577+
<Badge isRead color={condition.status === 'True' ? 'green' : 'red'}>
578+
{condition.status}
579+
</Badge>
580+
</div>
581+
<div style={{ fontSize: '14px', color: '#8a8d90', marginBottom: '8px' }}>
582+
{condition.message || 'No message available'}
583+
</div>
584+
{condition.lastTransitionTime && (
585+
<div style={{ fontSize: '12px', color: '#8a8d90' }}>
586+
Last updated: {new Date(condition.lastTransitionTime).toLocaleString()}
587+
</div>
588+
)}
589+
</div>
590+
))}
591+
</div>
592+
) : (
593+
<div style={{
594+
display: 'flex',
595+
flexDirection: 'column',
596+
alignItems: 'center',
597+
justifyContent: 'center',
598+
padding: '40px 20px',
599+
color: '#8a8d90',
600+
fontSize: '16px'
601+
}}>
602+
<div style={{
603+
width: '48px',
604+
height: '48px',
605+
backgroundColor: '#393F44',
606+
borderRadius: '50%',
607+
display: 'flex',
608+
alignItems: 'center',
609+
justifyContent: 'center',
610+
marginBottom: '16px',
611+
fontSize: '24px'
612+
}}>
613+
📊
614+
</div>
615+
<div style={{ textAlign: 'center' }}>
616+
<div style={{ fontWeight: '600', marginBottom: '8px' }}>No Events</div>
617+
<div style={{ fontSize: '14px' }}>
618+
No events have been recorded for this ApplicationSet.
619+
</div>
620+
</div>
621+
</div>
622+
)}
623+
</CardBody>
624+
</Card>
625+
</div>
626+
</div>
627+
</div>
628+
</Tab>
383629
</Tabs>
384630
</div>
385631
</div>

0 commit comments

Comments
 (0)