Skip to content

feat: Create a graphical tree and PS flow view of AppSets (#8558, #9202) #217

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
keithchong merged 3 commits into from
Mar 31, 2026
Merged

feat: Create a graphical tree and PS flow view of AppSets (#8558, #9202) #217

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1018bbb
feat: Create a graphical tree and PS flow view of AppSets (#8558, #9202)
keithchong Mar 25, 2026
37e06a4
Update based on Atif's comments (#8558, #9202)
keithchong Mar 31, 2026
0398da6
Update based on Atif's comments (#8558, #9202)
keithchong Mar 31, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 11 additions & 2 deletions locales/en/plugin__gitops-plugin.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,9 @@
"There is no health status for this resource": "There is no health status for this resource",
"Sync Unknown": "Sync Unknown",
"One or more resources are in Progressing state": "One or more resources are in Progressing state",
"Go to application": "Go to application",
"Step {{x}}": "Step {{x}}",
"Step: unmatched": "Step: unmatched",
"There is no history associated with the application.": "There is no history associated with the application.",
"ID": "ID",
"Deploy Started At": "Deploy Started At",
Expand All @@ -143,6 +146,12 @@
"Argo CD project that this ApplicationSet belongs to.": "Argo CD project that this ApplicationSet belongs to.",
"Git repository URL where the ApplicationSet configuration is stored.": "Git repository URL where the ApplicationSet configuration is stored.",
"Applications": "ArgoCD Applications",
"Edit ApplicationSet": "Edit ApplicationSet",
"Delete ApplicationSet": "Delete ApplicationSet",
"AppSet ownerReference Tree View": "AppSet ownerReference Tree View",
"Progressive Sync Flow View": "Progressive Sync Flow View",
"Expand or collapse all progressive sync step groups": "Expand or collapse all progressive sync step groups",
"No Applications In This Step": "No Applications In This Step",
"Server": "Server",
"Deny": "Deny",
"Allow": "Allow",
Expand Down Expand Up @@ -306,6 +315,8 @@
"There are no Argo CD Applications in this project.": "There are no Argo CD Applications in this project.",
"There are no Argo CD Applications in all projects.": "There are no Argo CD Applications in all projects.",
"There was an error retrieving applications. Check your connection and reload the page.": "There was an error retrieving applications. Check your connection and reload the page.",
"ApplicationSet Applications": "ApplicationSet Applications",
"The graph and table views show the ApplicationSet's applications. Use the filter below the graph to filter applications based on their health and sync status.": "The graph and table views show the ApplicationSet's applications. Use the filter below the graph to filter applications based on their health and sync status.",
"No Argo CD ApplicationSets match the label filter": "No Argo CD ApplicationSets match the label filter",
"Try removing the filter or selecting a different label to see more ApplicationSets.": "Try removing the filter or selecting a different label to see more ApplicationSets.",
"There are no Argo CD ApplicationSets in this project.": "There are no Argo CD ApplicationSets in this project.",
Expand All @@ -328,8 +339,6 @@
"Stop": "Stop",
"Refresh": "Refresh",
"Refresh (Hard)": "Refresh (Hard)",
"Edit ApplicationSet": "Edit ApplicationSet",
"Delete ApplicationSet": "Delete ApplicationSet",
"Actions": "Actions",
"You don't have permission to perform this action": "You don't have permission to perform this action",
"annotations": "annotations",
Expand Down
13 changes: 11 additions & 2 deletions locales/ja/plugin__gitops-plugin.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,9 @@
"There is no health status for this resource": "There is no health status for this resource",
"Sync Unknown": "Sync Unknown",
"One or more resources are in Progressing state": "One or more resources are in Progressing state",
"Go to application": "Go to application",
"Step {{x}}": "Step {{x}}",
"Step: unmatched": "Step: unmatched",
"There is no history associated with the application.": "There is no history associated with the application.",
"ID": "ID",
"Deploy Started At": "Deploy Started At",
Expand All @@ -143,6 +146,12 @@
"Argo CD project that this ApplicationSet belongs to.": "Argo CD project that this ApplicationSet belongs to.",
"Git repository URL where the ApplicationSet configuration is stored.": "Git repository URL where the ApplicationSet configuration is stored.",
"Applications": "Applications",
"Edit ApplicationSet": "Edit ApplicationSet",
"Delete ApplicationSet": "Delete ApplicationSet",
"AppSet ownerReference Tree View": "AppSet ownerReference Tree View",
"Progressive Sync Flow View": "Progressive Sync Flow View",
"Expand or collapse all progressive sync step groups": "Expand or collapse all progressive sync step groups",
"No Applications In This Step": "No Applications In This Step",
"Server": "Server",
"Deny": "Deny",
"Allow": "Allow",
Expand Down Expand Up @@ -306,6 +315,8 @@
"There are no Argo CD Applications in this project.": "There are no Argo CD Applications in this project.",
"There are no Argo CD Applications in all projects.": "There are no Argo CD Applications in all projects.",
"There was an error retrieving applications. Check your connection and reload the page.": "There was an error retrieving applications. Check your connection and reload the page.",
"ApplicationSet Applications": "ApplicationSet Applications",
"The graph and table views show the ApplicationSet's applications. Use the filter below the graph to filter applications based on their health and sync status.": "The graph and table views show the ApplicationSet's applications. Use the filter below the graph to filter applications based on their health and sync status.",
"No Argo CD ApplicationSets match the label filter": "No Argo CD ApplicationSets match the label filter",
"Try removing the filter or selecting a different label to see more ApplicationSets.": "Try removing the filter or selecting a different label to see more ApplicationSets.",
"There are no Argo CD ApplicationSets in this project.": "There are no Argo CD ApplicationSets in this project.",
Expand All @@ -328,8 +339,6 @@
"Stop": "Stop",
"Refresh": "Refresh",
"Refresh (Hard)": "Refresh (Hard)",
"Edit ApplicationSet": "Edit ApplicationSet",
"Delete ApplicationSet": "Delete ApplicationSet",
"Actions": "Actions",
"You don't have permission to perform this action": "You don't have permission to perform this action",
"annotations": "annotations",
Expand Down
13 changes: 11 additions & 2 deletions locales/ko/plugin__gitops-plugin.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,9 @@
"There is no health status for this resource": "There is no health status for this resource",
"Sync Unknown": "Sync Unknown",
"One or more resources are in Progressing state": "One or more resources are in Progressing state",
"Go to application": "Go to application",
"Step {{x}}": "Step {{x}}",
"Step: unmatched": "Step: unmatched",
"There is no history associated with the application.": "There is no history associated with the application.",
"ID": "ID",
"Deploy Started At": "Deploy Started At",
Expand All @@ -143,6 +146,12 @@
"Argo CD project that this ApplicationSet belongs to.": "Argo CD project that this ApplicationSet belongs to.",
"Git repository URL where the ApplicationSet configuration is stored.": "Git repository URL where the ApplicationSet configuration is stored.",
"Applications": "Applications",
"Edit ApplicationSet": "Edit ApplicationSet",
"Delete ApplicationSet": "Delete ApplicationSet",
"AppSet ownerReference Tree View": "AppSet ownerReference Tree View",
"Progressive Sync Flow View": "Progressive Sync Flow View",
"Expand or collapse all progressive sync step groups": "Expand or collapse all progressive sync step groups",
"No Applications In This Step": "No Applications In This Step",
"Server": "Server",
"Deny": "Deny",
"Allow": "Allow",
Expand Down Expand Up @@ -306,6 +315,8 @@
"There are no Argo CD Applications in this project.": "There are no Argo CD Applications in this project.",
"There are no Argo CD Applications in all projects.": "There are no Argo CD Applications in all projects.",
"There was an error retrieving applications. Check your connection and reload the page.": "There was an error retrieving applications. Check your connection and reload the page.",
"ApplicationSet Applications": "ApplicationSet Applications",
"The graph and table views show the ApplicationSet's applications. Use the filter below the graph to filter applications based on their health and sync status.": "The graph and table views show the ApplicationSet's applications. Use the filter below the graph to filter applications based on their health and sync status.",
"No Argo CD ApplicationSets match the label filter": "No Argo CD ApplicationSets match the label filter",
"Try removing the filter or selecting a different label to see more ApplicationSets.": "Try removing the filter or selecting a different label to see more ApplicationSets.",
"There are no Argo CD ApplicationSets in this project.": "There are no Argo CD ApplicationSets in this project.",
Expand All @@ -328,8 +339,6 @@
"Stop": "Stop",
"Refresh": "Refresh",
"Refresh (Hard)": "Refresh (Hard)",
"Edit ApplicationSet": "Edit ApplicationSet",
"Delete ApplicationSet": "Delete ApplicationSet",
"Actions": "Actions",
"You don't have permission to perform this action": "You don't have permission to perform this action",
"annotations": "annotations",
Expand Down
13 changes: 11 additions & 2 deletions locales/zh/plugin__gitops-plugin.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,9 @@
"There is no health status for this resource": "There is no health status for this resource",
"Sync Unknown": "Sync Unknown",
"One or more resources are in Progressing state": "One or more resources are in Progressing state",
"Go to application": "Go to application",
"Step {{x}}": "Step {{x}}",
"Step: unmatched": "Step: unmatched",
"There is no history associated with the application.": "There is no history associated with the application.",
"ID": "ID",
"Deploy Started At": "Deploy Started At",
Expand All @@ -143,6 +146,12 @@
"Argo CD project that this ApplicationSet belongs to.": "Argo CD project that this ApplicationSet belongs to.",
"Git repository URL where the ApplicationSet configuration is stored.": "Git repository URL where the ApplicationSet configuration is stored.",
"Applications": "Applications",
"Edit ApplicationSet": "Edit ApplicationSet",
"Delete ApplicationSet": "Delete ApplicationSet",
"AppSet ownerReference Tree View": "AppSet ownerReference Tree View",
"Progressive Sync Flow View": "Progressive Sync Flow View",
"Expand or collapse all progressive sync step groups": "Expand or collapse all progressive sync step groups",
"No Applications In This Step": "No Applications In This Step",
"Server": "Server",
"Deny": "Deny",
"Allow": "Allow",
Expand Down Expand Up @@ -306,6 +315,8 @@
"There are no Argo CD Applications in this project.": "There are no Argo CD Applications in this project.",
"There are no Argo CD Applications in all projects.": "There are no Argo CD Applications in all projects.",
"There was an error retrieving applications. Check your connection and reload the page.": "There was an error retrieving applications. Check your connection and reload the page.",
"ApplicationSet Applications": "ApplicationSet Applications",
"The graph and table views show the ApplicationSet's applications. Use the filter below the graph to filter applications based on their health and sync status.": "The graph and table views show the ApplicationSet's applications. Use the filter below the graph to filter applications based on their health and sync status.",
"No Argo CD ApplicationSets match the label filter": "No Argo CD ApplicationSets match the label filter",
"Try removing the filter or selecting a different label to see more ApplicationSets.": "Try removing the filter or selecting a different label to see more ApplicationSets.",
"There are no Argo CD ApplicationSets in this project.": "There are no Argo CD ApplicationSets in this project.",
Expand All @@ -328,8 +339,6 @@
"Stop": "Stop",
"Refresh": "Refresh",
"Refresh (Hard)": "Refresh (Hard)",
"Edit ApplicationSet": "Edit ApplicationSet",
"Delete ApplicationSet": "Delete ApplicationSet",
"Actions": "Actions",
"You don't have permission to perform this action": "You don't have permission to perform this action",
"annotations": "annotations",
Expand Down
1 change: 0 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,6 @@
"@patternfly/react-icons": "^6.4.0",
"@patternfly/react-table": "^6.4.0",
"@patternfly/react-tokens": "6.4.0",
"@patternfly/react-topology": "^6.4.0",
"@svgr/webpack": "^8.1.0",
"@types/classnames": "^2.3.1",
"@types/dagre": "^0.7.53",
Expand Down
121 changes: 120 additions & 1 deletion src/gitops/components/application/graph/ApplicationGraphView.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,14 +2,64 @@
.gitops-topology-view {
height: 100%;
width: 100%;

// Background grid
.pf-topology-content
{
background-image: radial-gradient( var(--pf-t--global--text--color--regular) 0.5px, transparent 0.5px) !important;
background-size: 24px 24px !important;
}

// Customize the edge colors for the progressive sync flow view
.pf-topology__edge {
.pf-topology__edge__background {
stroke: transparent !important;
stroke-width: 0 !important;
}
&.pf-m-hover {
stroke-width: 4;

.pf-topology__edge__link {
stroke: inherit;
stroke-width: inherit;
}

.step-edge-terminal.pf-topology-connector-arrow {
stroke-width: inherit;
}
}
}
// .pf-topology__edge__background {
// stroke: var(--pf-t--global--dark--background--color--100);
// }

.step-edge {
&.step-edge-healthy {
stroke: var(--pf-v5-global--success-color--100);
}
&.step-edge-warning {
stroke: var(--pf-v5-global--warning-color--100);
}
&.step-edge-progressing {
stroke: lightblue;
}
}

.step-edge-terminal.pf-topology-connector-arrow {
&.step-edge-terminal-healthy {
stroke: var(--pf-v5-global--success-color--100);
fill: var(--pf-v5-global--success-color--100);
}
&.step-edge-terminal-warning {
stroke: var(--pf-v5-global--warning-color--100);
fill: var(--pf-v5-global--warning-color--100);
}
&.step-edge-terminal-progressing {
stroke: lightblue;
fill: lightblue;
}
}

// Toolbar - move to the top left corner and override Patternfly's style
// Argo CD toolbar is in the top left corner
.pf-topology-control-bar {
Expand All @@ -19,11 +69,80 @@
height: 40px !important;
border-radius: 4px;
padding: 8px;

.pf-v6-c-toolbar__item:has(button#reset-view) {
padding-right: 6px;
}

.pf-v6-c-toolbar__item:has(button#setting-owner-reference-layout) {
padding-left: 8px;
border-left: 2px solid var(--pf-t--global--border--color--default);
}
}

// Not the same as in the Topology view, but seems like a border is better for more visibility,
// especially when in dark mode. Remove this if we want to be consistent with the Topology view.
.pf-topology-control-bar__button.pf-v6-c-button.pf-m-tertiary {
border: 1px solid darkgray;
}

// Step group customization - thicker border
.gitops-step-group {
.pf-topology__group__background {
stroke: var(--pf-t--global--border--color--default);
fill: var(--pf-t--global--background--color--floating--default);
stroke-width: 1;
transform: translateY(10px);
}

&.pf-m-selected .pf-topology__group__background {
stroke-width: 3 !important;
}

&.pf-m-hover .pf-topology__group__background {
stroke: var(--pf-t--global--border--color--default);
}
}

.gitops-step-group-label > * {
transform: translate(0px, -4px);

}
.gitops-step-group-label > .pf-topology__node__label__badge > * {
transform: translate(5px, 5px);
}

.gitops-step-group-collapsed-text {
fill: var(--pf-t--global--text--color--regular);
}

.gitops-step-group-label {
text {
fill: var(--pf-t--global--text--color--regular);
}

.pf-topology__node__label__background {
fill: var(--pf-t--global--background--color--floating--default);
}

.pf-topology__node__action-icon:hover svg{
fill: var(--pf-t--global--border--color--default) !important;
}

.pf-topology__node__action-icon__icon svg {
fill: var(--pf-t--global--text--color--regular);
}

&.pf-m-selected > .pf-topology__node__label__background {
fill: var(--pf-t--global--background--color--floating--default);
stroke: var(--pf-t--global--border--color--default);
stroke-width: 2;
}
}

.pf-topology__node.pf-m-selected.pf-m-warning {
.pf-topology__node__label >text {
fill: var(--pf-t--global--background--color--floating--default);
}
}
}
Loading