Show an Argo CD Application Set as Details page in Dev Console #105
Conversation
| 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
There was a problem hiding this comment.
This still has to be fixed. If you click on the different tabs (YAML, then Generators, then Applications....etc), you should be able to click on the web browser's Back and Forward buttons to navigate back to the previous tabs.
Also that extra space on the left side of the Appications tab is still there.
src/gitops/utils/components/DetailsPageTitle/ResourceDetailsTitle.tsx
Outdated
Show resolved
Hide resolved
| @@ -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
There was a problem hiding this comment.
Get rid of this one, since we want to use one YAML editor if possible. (We have other Argo resources to add still)
aali309
force-pushed
the
newDetailsPage
branch
from
fc09c51 to
9187306
Compare
aali309
force-pushed
the
newDetailsPage
branch
from
9187306 to
6012e3d
Compare
aali309
force-pushed
the
newDetailsPage
branch
2 times, most recently
from
2158260 to
64799b5
Compare
Signed-off-by: Atif Ali <[email protected]>
Signed-off-by: Atif Ali <[email protected]>
Signed-off-by: Atif Ali <[email protected]> more label styling Signed-off-by: Atif Ali <[email protected]> add annotation && Generators && more formatting Signed-off-by: Atif Ali <[email protected]>
Signed-off-by: Atif Ali <[email protected]>
Signed-off-by: Atif Ali <[email protected]> restore Applist Signed-off-by: Atif Ali <[email protected]> reapply filter logic keeping the empty state when no apps are available Signed-off-by: Atif Ali <[email protected]> rename ApplicationDetailsTitle and move it to where DetailsPageTitle Signed-off-by: Atif Ali <[email protected]> remove border on the pages Signed-off-by: Atif Ali <[email protected]> fix formatting Signed-off-by: Atif Ali <[email protected]>
Signed-off-by: Atif Ali <[email protected]> use pf Signed-off-by: Atif Ali <[email protected]> Replaced inline styles with CSS classes Signed-off-by: Atif Ali <[email protected]> enable or disable the edit buttons according to permission Signed-off-by: Atif Ali <[email protected]>
Signed-off-by: Atif Ali <[email protected]> refactor and restructure code Signed-off-by: Atif Ali <[email protected]>
Signed-off-by: Atif Ali <[email protected]> show YAML page better Signed-off-by: Atif Ali <[email protected]> complete YAML page and cleanup Signed-off-by: Atif Ali <[email protected]> implement edit appset Signed-off-by: Atif Ali <[email protected]>
Signed-off-by: Atif Ali <[email protected]> more Details formating Signed-off-by: Atif Ali <[email protected]>
Signed-off-by: Atif Ali <[email protected]> format details tab info Signed-off-by: Atif Ali <[email protected]> fix condition to use pf && generators styling Signed-off-by: Atif Ali <[email protected]> remove rebase/conflict commit markers Signed-off-by: Atif Ali <[email protected]>
Signed-off-by: Atif Ali <[email protected]>
aali309
force-pushed
the
newDetailsPage
branch
from
64799b5 to
2ac7dac
Compare
| resourcePrefix="Argo CD" | ||
| showDevPreviewBadge={true} | ||
| /> | ||
| <div className="application-set-details-page__body"> |
There was a problem hiding this comment.
This still has to be fixed. If you click on the different tabs (YAML, then Generators, then Applications....etc), you should be able to click on the web browser's Back and Forward buttons to navigate back to the previous tabs.
Also that extra space on the left side of the Appications tab is still there.
| const sortedApplications = React.useMemo(() => { | ||
| return sortData(applications, sortBy, direction); | ||
| }, [applications, sortBy, direction]); | ||
|
|
There was a problem hiding this comment.
There's something strange going on here. The filter disappears if there is no search hit on any application
There was a problem hiding this comment.
I see the issue, I have added a page (similar to when there is no argocd applications or argocd applicationsets)
| <DescriptionListGroup> | ||
| <DescriptionListTermHelpText> | ||
| <Popover | ||
| headerContent={<div>App Project</div>} |
There was a problem hiding this comment.
Use ResourceLink (see the application details page). You will get the icon and color automatically
Something like this:
<ResourceLink
namespace={obj?.metadata?.namespace}
groupVersionKind={{
group: 'argoproj.io',
version: 'v1alpha1',
kind: 'AppProject',
}}
name={obj?.spec?.project}
/>
| ); | ||
| }; | ||
|
|
||
| export default EventsTab; |
There was a problem hiding this comment.
This is the same Conditions info that is on the first tab (Details). I think this Events tab is for the resource itself. Use the one in /src/gitops/components/shared/EventsTab
Check out the Application's Events tab...it should be similar.
| } | ||
| > | ||
| <ResourceYAMLEditor initialResource={obj} header={obj?.kind} hideHeader={true} /> | ||
| <ResourceYAMLEditor initialResource={obj} /> |
| @@ -0,0 +1,92 @@ | |||
| # ApplicationSet Components | |||
There was a problem hiding this comment.
This is helpful in describing what was done, but ultimately, I don't think we will need this, as our plugin is the official version.
| import GeneratorsTab from './GeneratorsTab'; | ||
| import AppsTab from './AppsTab'; | ||
| import EventsTab from './EventsTab'; | ||
| import YAMLTab from './YAMLTab'; |
There was a problem hiding this comment.
Could you use the one in the shared folder if possible, and then get rid of this one in appset?
| @@ -0,0 +1,25 @@ | |||
| import * as React from 'react'; | |||
There was a problem hiding this comment.
Get rid of this one, since we want to use one YAML editor if possible. (We have other Argo resources to add still)
Signed-off-by: Atif Ali <[email protected]>
Signed-off-by: Atif Ali <[email protected]>
Signed-off-by: Atif Ali <[email protected]>
src/gitops/components/application/ApplicationSetDetailsPage.scss
Outdated
Show resolved
Hide resolved
src/gitops/components/application/application-details-title.scss
Outdated
Show resolved
Hide resolved
Signed-off-by: Atif Ali <[email protected]>
2 participants
See: GITOPS-7298
This PR adds a custom details page that overrides the provided one by the console
Details Tab
Generators Tab
Applications Tab (Displays all related generated apps)
Events Tab
Label filter table (for ApplicationSet resources)
Label filter table (for Application resources)
Label filter table (for ApplicationSet resources) when no applicationSets found matching the labels
