Show an Argo CD Application Set as Details page in Dev Console #105
Conversation
| @@ -106,39 +102,10 @@ const ApplicationList: React.FC<ApplicationProps> = ({ | |||
| return sortData(applications, sortBy, direction); | |||
| }, [applications, sortBy, direction]); | |||
| // TODO: use alternate filter since it is deprecated. See DataTableView potentially | |||
| const [data, filteredData, onFilterChange] = useListPageFilter(sortedApplications, filters); | |||
There was a problem hiding this comment.
@aali309 , what's the reason for removing this? We no longer get the message saying that there are no applications in the project(s)
There was a problem hiding this comment.
To just display the apps generated by the appset, its fixed now.
There was a problem hiding this comment.
Ok, just have to consider both cases. Applications on their own, and applications related to the appset that is passed in.
|
|
||
| // Determine the correct icon text and styling based on the model | ||
| const isApplicationSet = model.kind === 'ApplicationSet'; | ||
| const iconText = isApplicationSet ? 'AS' : 'A'; |
There was a problem hiding this comment.
Maybe provide these const's as properties? We will have another details page for App Projects.
Also we should rename this and move it to where DetailsPageTitle currently is.
| {/* Tabs Section */} | ||
| <div className="co-m-pane__body"> | ||
| <Tabs activeKey={activeTabKey} onSelect={handleTabClick} className="pf-v6-c-tabs"> | ||
| <Tab eventKey={0} title={<TabTitleText>Details</TabTitleText>} className="pf-v6-c-tab-content"> |
There was a problem hiding this comment.
We don't need this border here. The other console pages do not have this.
| </div> | ||
| </Tab> | ||
|
|
||
| <Tab eventKey={1} title={<TabTitleText>YAML</TabTitleText>} className="pf-v6-c-tab-content"> |
There was a problem hiding this comment.
This YAML view should look similar to other YAML views, and it isn't properly themed (The text is not colorized):
Compare this to the YAML tab for a Deployment:
| <CardTitle>ApplicationSet details</CardTitle> | ||
| </CardHeader> | ||
| <CardBody> | ||
| <DescriptionList data-test-id="resource-summary"> |
There was a problem hiding this comment.
We will probably pull these common attributes (Name, Namespace, Labels, Annotations, etc.) to a common component.
| </CardHeader> | ||
| <CardBody> | ||
| <DescriptionList data-test-id="resource-summary"> | ||
| <div className="pf-v6-c-description-list__group"> |
There was a problem hiding this comment.
These can be replaced by pattern fly's <DescriptionListGroup >, <DescriptionListDescription> and make use of <DescriptionListTermHelpText> and <DescriptionListTermHelpTextButton>
| <CardBody> | ||
| <DescriptionList data-test-id="resource-summary"> | ||
| <div className="pf-v6-c-description-list__group"> | ||
| <dt className="pf-v6-c-description-list__term" data-test-selector="details-item-label_Name"> |
There was a problem hiding this comment.
I'll try to create a draft PR of my Application Details Page Details Tab. I don't have that many defined styles (which should be pulled out to the scss file).
| right: 0, | ||
| fontSize: 13, | ||
| }} | ||
| aria-label="Edit labels" |
There was a problem hiding this comment.
We should enable or disable the button if we know whether this resource can be updated.
| </dd> | ||
| </div> | ||
|
|
||
| {/* Generators Section */} |
There was a problem hiding this comment.
on my new changes all borders are fixed
| </div> | ||
| </Tab> | ||
|
|
||
| <Tab eventKey={4} title={<TabTitleText>Events</TabTitleText>} className="pf-v6-c-tab-content"> |
There was a problem hiding this comment.
Similar rounded border here that is unneeded.
| </div> | ||
| </Tab> | ||
|
|
||
| <Tab eventKey={2} title={<TabTitleText>Generators</TabTitleText>} className="pf-v6-c-tab-content"> |
There was a problem hiding this comment.
Similar 'extra' rounded border here, like in the Details tab. See my previous comment.
| </CardHeader> | ||
| <CardBody> | ||
| <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}> | ||
| {appSet.spec?.generators?.map((generator: any, index: number) => { |
There was a problem hiding this comment.
For an appset with a matrix generator, I don't see the individual generators listed under this tab. Similarly, check your list generator, I don't see the related details for it.
| {generator.directories && ( | ||
| <DescriptionListGroup> | ||
| <DescriptionListTerm>Directories</DescriptionListTerm> | ||
| <DescriptionListDescription>{generator.directories.length} directory(ies)</DescriptionListDescription> |
There was a problem hiding this comment.
We should explicitly say: 1 directory
and for more than 1, say: 2 directories
It will be more polished that way
| <DescriptionListDescription> | ||
| <pre style={{ | ||
| fontSize: '12px', | ||
| backgroundColor: '#f6f6f6', |
There was a problem hiding this comment.
This doesn't look right in dark theme or light theme. To test it out, you can change the theme from the top right drop down of the Console UI (usually the login name, or Auth disabled), and select User Preferences
| </Popover> | ||
| </DescriptionListTermHelpText> | ||
| <DescriptionListDescription> | ||
| <a href="https://github.com/aal/309/argocd-test-nested.git" target="_blank" rel="noopener noreferrer"> |
There was a problem hiding this comment.
These URLs are hardcoded here :-)
| <PaneHeading> | ||
| <Title headingLevel="h1"> | ||
| <span | ||
| className="co-m-resource-icon co-m-resource-icon--lg" |
There was a problem hiding this comment.
I think the application-details-title.scss (in src/gitops/components/application) needs to be moved over to this folder and renamed resource-details-title.scss. The original class name I had was argocd-application-icon, so call it argocd-resource-icon and add it to this here. The text (A or AS) doesn't have the proper background colour.
I originally only had:
.argocd-application-icon {
background-color: #E9654B;
}
Do we need all those styles that are currently in application-detials-title.scss?
| resourcePrefix="Argo CD" | ||
| showDevPreviewBadge={true} | ||
| /> | ||
| <div className="application-set-details-page__body"> |
There was a problem hiding this comment.
I believe in this case, we shouldn't use PF. we should use <HorizontalNav> from @openshift-console/dynamic-plugin-sdk
If you currently click on the various tabs, you should be able to press the browser's Back and Forward buttons to navigate to the tabs again.
There was a problem hiding this comment.
There's also some extra padding on the left side within the contents of each tab, which might be fixed by the change to HorizontalNav
| )} | ||
| </Title> | ||
| <div className="co-actions" style={{ display: 'flex', alignItems: 'center', gap: '16px' }}> | ||
| <FavoriteButton defaultName={name ?? obj?.metadata?.name} /> |
There was a problem hiding this comment.
This Favorites button doesn't add the page to Favorites section.
I think for now, we should not include this. We got it "for free" when using ListPageHeader for the two List pages, and it works there.
| @@ -0,0 +1,25 @@ | |||
| import * as React from 'react'; | |||
There was a problem hiding this comment.
Can we move this to a shared component or a utils component? The Applications YAML tab will use this too
Signed-off-by: Atif Ali <[email protected]>
Signed-off-by: Atif Ali <[email protected]>
Signed-off-by: Atif Ali <[email protected]>
Signed-off-by: Atif Ali <[email protected]>
Signed-off-by: Atif Ali <[email protected]>
Signed-off-by: Atif Ali <[email protected]>
Signed-off-by: Atif Ali <[email protected]>
Signed-off-by: Atif Ali <[email protected]>
Signed-off-by: Atif Ali <[email protected]>
Signed-off-by: Atif Ali <[email protected]>
Signed-off-by: Atif Ali <[email protected]>
Signed-off-by: Atif Ali <[email protected]>
Signed-off-by: Atif Ali <[email protected]>
Signed-off-by: Atif Ali <[email protected]>
Signed-off-by: Atif Ali <[email protected]>
Signed-off-by: Atif Ali <[email protected]>
Signed-off-by: Atif Ali <[email protected]>
Signed-off-by: Atif Ali <[email protected]>
Signed-off-by: Atif Ali <[email protected]>
Signed-off-by: Atif Ali <[email protected]>
Signed-off-by: Atif Ali <[email protected]>
Signed-off-by: Atif Ali <[email protected]>
Signed-off-by: Atif Ali <[email protected]>
Signed-off-by: Atif Ali <[email protected]>
aali309
force-pushed
the
newDetailsPage
branch
from
fc09c51 to
9187306
Compare
See: GITOPS-7298
This PR adds a custom details page that overrides the provided one by the console