feat: Create a graphical tree and PS flow view of AppSets (#8558, #9202) #217
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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", | ||
|
|
@@ -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 Application Set": "Edit Application Set", | ||
| "Delete Application Set": "Delete Application Set", | ||
| "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", | ||
|
|
@@ -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.", | ||
| "Application Set Applications": "Application Set Applications", | ||
| "The graph and table views show the Application Set'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 Application Set'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.", | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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", | ||
|
|
@@ -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 Application Set": "Edit Application Set", | ||
| "Delete Application Set": "Delete Application Set", | ||
| "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", | ||
|
|
@@ -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.", | ||
| "Application Set Applications": "Application Set Applications", | ||
| "The graph and table views show the Application Set'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 Application Set'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.", | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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", | ||
|
|
@@ -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 Application Set": "Edit Application Set", | ||
| "Delete Application Set": "Delete Application Set", | ||
| "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", | ||
|
|
@@ -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.", | ||
| "Application Set Applications": "Application Set Applications", | ||
| "The graph and table views show the Application Set'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 Application Set'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.", | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -28,7 +28,6 @@ | |
| "@patternfly/react-icons": "^6.4.0", | ||
| "@patternfly/react-table": "^6.4.0", | ||
| "@patternfly/react-tokens": "6.4.0", | ||
| "@svgr/webpack": "^8.1.0", | ||
| "@types/classnames": "^2.3.1", | ||
| "@types/dagre": "^0.7.53", | ||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -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 { | ||
|
|
@@ -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); | ||
| } | ||
| } | ||
| } | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
There is some inconsistency here, most of the places if not all the naming is "ApplicationSet" not "Application Set"
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
same as line 149 and 150