Skip to content

Commit 9480ae0

Browse files
keithchongkeithchong
authored
Merge pull request #217 from keithchong/8558-9202-AppSetGraphView
feat: Create a graphical tree and PS flow view of AppSets (#8558, #9202)
2 parents 1429499 + 0398da6 commit 9480ae0

18 files changed

Lines changed: 2298 additions & 101 deletions

‎locales/en/plugin__gitops-plugin.json‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,9 @@
124124
"There is no health status for this resource": "There is no health status for this resource",
125125
"Sync Unknown": "Sync Unknown",
126126
"One or more resources are in Progressing state": "One or more resources are in Progressing state",
127+
"Go to application": "Go to application",
128+
"Step {{x}}": "Step {{x}}",
129+
"Step: unmatched": "Step: unmatched",
127130
"There is no history associated with the application.": "There is no history associated with the application.",
128131
"ID": "ID",
129132
"Deploy Started At": "Deploy Started At",
@@ -143,6 +146,12 @@
143146
"Argo CD project that this ApplicationSet belongs to.": "Argo CD project that this ApplicationSet belongs to.",
144147
"Git repository URL where the ApplicationSet configuration is stored.": "Git repository URL where the ApplicationSet configuration is stored.",
145148
"Applications": "ArgoCD Applications",
149+
"Edit ApplicationSet": "Edit ApplicationSet",
150+
"Delete ApplicationSet": "Delete ApplicationSet",
151+
"AppSet ownerReference Tree View": "AppSet ownerReference Tree View",
152+
"Progressive Sync Flow View": "Progressive Sync Flow View",
153+
"Expand or collapse all progressive sync step groups": "Expand or collapse all progressive sync step groups",
154+
"No Applications In This Step": "No Applications In This Step",
146155
"Server": "Server",
147156
"Deny": "Deny",
148157
"Allow": "Allow",
@@ -306,6 +315,8 @@
306315
"There are no Argo CD Applications in this project.": "There are no Argo CD Applications in this project.",
307316
"There are no Argo CD Applications in all projects.": "There are no Argo CD Applications in all projects.",
308317
"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.",
318+
"ApplicationSet Applications": "ApplicationSet Applications",
319+
"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.",
309320
"No Argo CD ApplicationSets match the label filter": "No Argo CD ApplicationSets match the label filter",
310321
"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.",
311322
"There are no Argo CD ApplicationSets in this project.": "There are no Argo CD ApplicationSets in this project.",
@@ -328,8 +339,6 @@
328339
"Stop": "Stop",
329340
"Refresh": "Refresh",
330341
"Refresh (Hard)": "Refresh (Hard)",
331-
"Edit ApplicationSet": "Edit ApplicationSet",
332-
"Delete ApplicationSet": "Delete ApplicationSet",
333342
"Actions": "Actions",
334343
"You don't have permission to perform this action": "You don't have permission to perform this action",
335344
"annotations": "annotations",

‎locales/ja/plugin__gitops-plugin.json‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,9 @@
124124
"There is no health status for this resource": "There is no health status for this resource",
125125
"Sync Unknown": "Sync Unknown",
126126
"One or more resources are in Progressing state": "One or more resources are in Progressing state",
127+
"Go to application": "Go to application",
128+
"Step {{x}}": "Step {{x}}",
129+
"Step: unmatched": "Step: unmatched",
127130
"There is no history associated with the application.": "There is no history associated with the application.",
128131
"ID": "ID",
129132
"Deploy Started At": "Deploy Started At",
@@ -143,6 +146,12 @@
143146
"Argo CD project that this ApplicationSet belongs to.": "Argo CD project that this ApplicationSet belongs to.",
144147
"Git repository URL where the ApplicationSet configuration is stored.": "Git repository URL where the ApplicationSet configuration is stored.",
145148
"Applications": "Applications",
149+
"Edit ApplicationSet": "Edit ApplicationSet",
150+
"Delete ApplicationSet": "Delete ApplicationSet",
151+
"AppSet ownerReference Tree View": "AppSet ownerReference Tree View",
152+
"Progressive Sync Flow View": "Progressive Sync Flow View",
153+
"Expand or collapse all progressive sync step groups": "Expand or collapse all progressive sync step groups",
154+
"No Applications In This Step": "No Applications In This Step",
146155
"Server": "Server",
147156
"Deny": "Deny",
148157
"Allow": "Allow",
@@ -306,6 +315,8 @@
306315
"There are no Argo CD Applications in this project.": "There are no Argo CD Applications in this project.",
307316
"There are no Argo CD Applications in all projects.": "There are no Argo CD Applications in all projects.",
308317
"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.",
318+
"ApplicationSet Applications": "ApplicationSet Applications",
319+
"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.",
309320
"No Argo CD ApplicationSets match the label filter": "No Argo CD ApplicationSets match the label filter",
310321
"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.",
311322
"There are no Argo CD ApplicationSets in this project.": "There are no Argo CD ApplicationSets in this project.",
@@ -328,8 +339,6 @@
328339
"Stop": "Stop",
329340
"Refresh": "Refresh",
330341
"Refresh (Hard)": "Refresh (Hard)",
331-
"Edit ApplicationSet": "Edit ApplicationSet",
332-
"Delete ApplicationSet": "Delete ApplicationSet",
333342
"Actions": "Actions",
334343
"You don't have permission to perform this action": "You don't have permission to perform this action",
335344
"annotations": "annotations",

‎locales/ko/plugin__gitops-plugin.json‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,9 @@
124124
"There is no health status for this resource": "There is no health status for this resource",
125125
"Sync Unknown": "Sync Unknown",
126126
"One or more resources are in Progressing state": "One or more resources are in Progressing state",
127+
"Go to application": "Go to application",
128+
"Step {{x}}": "Step {{x}}",
129+
"Step: unmatched": "Step: unmatched",
127130
"There is no history associated with the application.": "There is no history associated with the application.",
128131
"ID": "ID",
129132
"Deploy Started At": "Deploy Started At",
@@ -143,6 +146,12 @@
143146
"Argo CD project that this ApplicationSet belongs to.": "Argo CD project that this ApplicationSet belongs to.",
144147
"Git repository URL where the ApplicationSet configuration is stored.": "Git repository URL where the ApplicationSet configuration is stored.",
145148
"Applications": "Applications",
149+
"Edit ApplicationSet": "Edit ApplicationSet",
150+
"Delete ApplicationSet": "Delete ApplicationSet",
151+
"AppSet ownerReference Tree View": "AppSet ownerReference Tree View",
152+
"Progressive Sync Flow View": "Progressive Sync Flow View",
153+
"Expand or collapse all progressive sync step groups": "Expand or collapse all progressive sync step groups",
154+
"No Applications In This Step": "No Applications In This Step",
146155
"Server": "Server",
147156
"Deny": "Deny",
148157
"Allow": "Allow",
@@ -306,6 +315,8 @@
306315
"There are no Argo CD Applications in this project.": "There are no Argo CD Applications in this project.",
307316
"There are no Argo CD Applications in all projects.": "There are no Argo CD Applications in all projects.",
308317
"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.",
318+
"ApplicationSet Applications": "ApplicationSet Applications",
319+
"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.",
309320
"No Argo CD ApplicationSets match the label filter": "No Argo CD ApplicationSets match the label filter",
310321
"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.",
311322
"There are no Argo CD ApplicationSets in this project.": "There are no Argo CD ApplicationSets in this project.",
@@ -328,8 +339,6 @@
328339
"Stop": "Stop",
329340
"Refresh": "Refresh",
330341
"Refresh (Hard)": "Refresh (Hard)",
331-
"Edit ApplicationSet": "Edit ApplicationSet",
332-
"Delete ApplicationSet": "Delete ApplicationSet",
333342
"Actions": "Actions",
334343
"You don't have permission to perform this action": "You don't have permission to perform this action",
335344
"annotations": "annotations",

‎locales/zh/plugin__gitops-plugin.json‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -124,6 +124,9 @@
124124
"There is no health status for this resource": "There is no health status for this resource",
125125
"Sync Unknown": "Sync Unknown",
126126
"One or more resources are in Progressing state": "One or more resources are in Progressing state",
127+
"Go to application": "Go to application",
128+
"Step {{x}}": "Step {{x}}",
129+
"Step: unmatched": "Step: unmatched",
127130
"There is no history associated with the application.": "There is no history associated with the application.",
128131
"ID": "ID",
129132
"Deploy Started At": "Deploy Started At",
@@ -143,6 +146,12 @@
143146
"Argo CD project that this ApplicationSet belongs to.": "Argo CD project that this ApplicationSet belongs to.",
144147
"Git repository URL where the ApplicationSet configuration is stored.": "Git repository URL where the ApplicationSet configuration is stored.",
145148
"Applications": "Applications",
149+
"Edit ApplicationSet": "Edit ApplicationSet",
150+
"Delete ApplicationSet": "Delete ApplicationSet",
151+
"AppSet ownerReference Tree View": "AppSet ownerReference Tree View",
152+
"Progressive Sync Flow View": "Progressive Sync Flow View",
153+
"Expand or collapse all progressive sync step groups": "Expand or collapse all progressive sync step groups",
154+
"No Applications In This Step": "No Applications In This Step",
146155
"Server": "Server",
147156
"Deny": "Deny",
148157
"Allow": "Allow",
@@ -306,6 +315,8 @@
306315
"There are no Argo CD Applications in this project.": "There are no Argo CD Applications in this project.",
307316
"There are no Argo CD Applications in all projects.": "There are no Argo CD Applications in all projects.",
308317
"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.",
318+
"ApplicationSet Applications": "ApplicationSet Applications",
319+
"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.",
309320
"No Argo CD ApplicationSets match the label filter": "No Argo CD ApplicationSets match the label filter",
310321
"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.",
311322
"There are no Argo CD ApplicationSets in this project.": "There are no Argo CD ApplicationSets in this project.",
@@ -328,8 +339,6 @@
328339
"Stop": "Stop",
329340
"Refresh": "Refresh",
330341
"Refresh (Hard)": "Refresh (Hard)",
331-
"Edit ApplicationSet": "Edit ApplicationSet",
332-
"Delete ApplicationSet": "Delete ApplicationSet",
333342
"Actions": "Actions",
334343
"You don't have permission to perform this action": "You don't have permission to perform this action",
335344
"annotations": "annotations",

‎package.json‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,6 @@
2828
"@patternfly/react-icons": "^6.4.0",
2929
"@patternfly/react-table": "^6.4.0",
3030
"@patternfly/react-tokens": "6.4.0",
31-
"@patternfly/react-topology": "^6.4.0",
3231
"@svgr/webpack": "^8.1.0",
3332
"@types/classnames": "^2.3.1",
3433
"@types/dagre": "^0.7.53",

‎src/gitops/components/application/graph/ApplicationGraphView.scss‎

Lines changed: 120 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,64 @@
22
.gitops-topology-view {
33
height: 100%;
44
width: 100%;
5-
5+
66
// Background grid
77
.pf-topology-content
88
{
99
background-image: radial-gradient( var(--pf-t--global--text--color--regular) 0.5px, transparent 0.5px) !important;
1010
background-size: 24px 24px !important;
1111
}
1212

13+
// Customize the edge colors for the progressive sync flow view
14+
.pf-topology__edge {
15+
.pf-topology__edge__background {
16+
stroke: transparent !important;
17+
stroke-width: 0 !important;
18+
}
19+
&.pf-m-hover {
20+
stroke-width: 4;
21+
22+
.pf-topology__edge__link {
23+
stroke: inherit;
24+
stroke-width: inherit;
25+
}
26+
27+
.step-edge-terminal.pf-topology-connector-arrow {
28+
stroke-width: inherit;
29+
}
30+
}
31+
}
32+
// .pf-topology__edge__background {
33+
// stroke: var(--pf-t--global--dark--background--color--100);
34+
// }
35+
36+
.step-edge {
37+
&.step-edge-healthy {
38+
stroke: var(--pf-v5-global--success-color--100);
39+
}
40+
&.step-edge-warning {
41+
stroke: var(--pf-v5-global--warning-color--100);
42+
}
43+
&.step-edge-progressing {
44+
stroke: lightblue;
45+
}
46+
}
47+
48+
.step-edge-terminal.pf-topology-connector-arrow {
49+
&.step-edge-terminal-healthy {
50+
stroke: var(--pf-v5-global--success-color--100);
51+
fill: var(--pf-v5-global--success-color--100);
52+
}
53+
&.step-edge-terminal-warning {
54+
stroke: var(--pf-v5-global--warning-color--100);
55+
fill: var(--pf-v5-global--warning-color--100);
56+
}
57+
&.step-edge-terminal-progressing {
58+
stroke: lightblue;
59+
fill: lightblue;
60+
}
61+
}
62+
1363
// Toolbar - move to the top left corner and override Patternfly's style
1464
// Argo CD toolbar is in the top left corner
1565
.pf-topology-control-bar {
@@ -19,11 +69,80 @@
1969
height: 40px !important;
2070
border-radius: 4px;
2171
padding: 8px;
72+
73+
.pf-v6-c-toolbar__item:has(button#reset-view) {
74+
padding-right: 6px;
75+
}
76+
77+
.pf-v6-c-toolbar__item:has(button#setting-owner-reference-layout) {
78+
padding-left: 8px;
79+
border-left: 2px solid var(--pf-t--global--border--color--default);
80+
}
2281
}
2382

2483
// Not the same as in the Topology view, but seems like a border is better for more visibility,
2584
// especially when in dark mode. Remove this if we want to be consistent with the Topology view.
2685
.pf-topology-control-bar__button.pf-v6-c-button.pf-m-tertiary {
2786
border: 1px solid darkgray;
2887
}
88+
89+
// Step group customization - thicker border
90+
.gitops-step-group {
91+
.pf-topology__group__background {
92+
stroke: var(--pf-t--global--border--color--default);
93+
fill: var(--pf-t--global--background--color--floating--default);
94+
stroke-width: 1;
95+
transform: translateY(10px);
96+
}
97+
98+
&.pf-m-selected .pf-topology__group__background {
99+
stroke-width: 3 !important;
100+
}
101+
102+
&.pf-m-hover .pf-topology__group__background {
103+
stroke: var(--pf-t--global--border--color--default);
104+
}
105+
}
106+
107+
.gitops-step-group-label > * {
108+
transform: translate(0px, -4px);
109+
110+
}
111+
.gitops-step-group-label > .pf-topology__node__label__badge > * {
112+
transform: translate(5px, 5px);
113+
}
114+
115+
.gitops-step-group-collapsed-text {
116+
fill: var(--pf-t--global--text--color--regular);
117+
}
118+
119+
.gitops-step-group-label {
120+
text {
121+
fill: var(--pf-t--global--text--color--regular);
122+
}
123+
124+
.pf-topology__node__label__background {
125+
fill: var(--pf-t--global--background--color--floating--default);
126+
}
127+
128+
.pf-topology__node__action-icon:hover svg{
129+
fill: var(--pf-t--global--border--color--default) !important;
130+
}
131+
132+
.pf-topology__node__action-icon__icon svg {
133+
fill: var(--pf-t--global--text--color--regular);
134+
}
135+
136+
&.pf-m-selected > .pf-topology__node__label__background {
137+
fill: var(--pf-t--global--background--color--floating--default);
138+
stroke: var(--pf-t--global--border--color--default);
139+
stroke-width: 2;
140+
}
141+
}
142+
143+
.pf-topology__node.pf-m-selected.pf-m-warning {
144+
.pf-topology__node__label >text {
145+
fill: var(--pf-t--global--background--color--floating--default);
146+
}
147+
}
29148
}

0 commit comments

Comments
 (0)