fix(ui): trash icon for resources to be pruned, plus better tooltip (a…

…rgoproj#10290) (argoproj#11171) * Trash Icon for the resource that will be pruned on sync Signed-off-by: schakradari <58915923+schakrad@users.noreply.github.com> * Trash icon for the resource that gets pruned on sync. Signed-off-by: schakradari <58915923+schakrad@users.noreply.github.com> * Tobepruned icon on grid view Signed-off-by: schakradari <58915923+schakrad@users.noreply.github.com> * Update ui/src/app/applications/components/utils.tsx Signed-off-by: Michael Crenshaw <350466+crenshaw-dev@users.noreply.github.com> Signed-off-by: schakradari <58915923+schakrad@users.noreply.github.com> Signed-off-by: Michael Crenshaw <350466+crenshaw-dev@users.noreply.github.com> Co-authored-by: Michael Crenshaw <350466+crenshaw-dev@users.noreply.github.com>
schakrad · Jan 12, 2023 · 63e410a · 63e410a
1 parent e82a644
commit 63e410a
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 4 deletions.
diff --git a/ui/src/app/applications/components/application-pod-view/pod-view.tsx b/ui/src/app/applications/components/application-pod-view/pod-view.tsx
@@ -51,6 +51,7 @@ export class PodView extends React.Component<PodViewProps> {
                 {prefs => {
                     const podPrefs = prefs.appDetails.podView || ({} as PodViewPreferences);
                     const groups = this.processTree(podPrefs.sortMode, this.props.tree.hosts || []) || [];
+
                     return (
                         <React.Fragment>
                             <div className='pod-view__settings'>
@@ -106,7 +107,9 @@ export class PodView extends React.Component<PodViewProps> {
                                                                 <div>
                                                                     {group.resourceStatus.health && <HealthStatusIcon state={group.resourceStatus.health} />}
                                                                     &nbsp;
-                                                                    {group.resourceStatus.status && <ComparisonStatusIcon status={group.resourceStatus.status} />}
+                                                                    {group.resourceStatus.status && (
+                                                                        <ComparisonStatusIcon status={group.resourceStatus.status} resource={group.resourceStatus} />
+                                                                    )}
                                                                 </div>
                                                             )}
                                                         </div>
@@ -315,6 +318,7 @@ export class PodView extends React.Component<PodViewProps> {
 
         const statusByKey = new Map<string, ResourceStatus>();
         this.props.app.status?.resources?.forEach(res => statusByKey.set(nodeKey(res), res));
+
         (tree.nodes || []).forEach((rnode: ResourceTreeNode) => {
             // make sure each node has not null/undefined parentRefs field
             rnode.parentRefs = rnode.parentRefs || [];
@@ -323,6 +327,7 @@ export class PodView extends React.Component<PodViewProps> {
                 parentsFor[rnode.uid] = rnode.parentRefs as PodGroup[];
                 const fullName = nodeKey(rnode);
                 const status = statusByKey.get(fullName);
+
                 if ((rnode.parentRefs || []).length === 0) {
                     rnode.root = rnode;
                 }
@@ -333,7 +338,7 @@ export class PodView extends React.Component<PodViewProps> {
                     ...rnode,
                     info: (rnode.info || []).filter(i => !i.name.includes('Resource.')),
                     createdAt: rnode.createdAt,
-                    resourceStatus: {health: rnode.health, status: status ? status.status : null},
+                    resourceStatus: {health: rnode.health, status: status ? status.status : null, requiresPruning: status && status.requiresPruning ? true : false},
                     renderMenu: () => this.props.nodeMenu(rnode),
                     renderQuickStarts: () => this.props.quickStarts(rnode)
                 };

diff --git a/ui/src/app/applications/components/utils.tsx b/ui/src/app/applications/components/utils.tsx
@@ -243,10 +243,10 @@ export const ComparisonStatusIcon = ({
             break;
         case appModels.SyncStatuses.OutOfSync:
             const requiresPruning = resource && resource.requiresPruning;
-            className = requiresPruning ? 'fa fa-times-circle' : 'fa fa-arrow-alt-circle-up';
+            className = requiresPruning ? 'fa fa-trash' : 'fa fa-arrow-alt-circle-up';
             title = 'OutOfSync';
             if (requiresPruning) {
-                title = `${title} (requires pruning)`;
+                title = `${title} (This resource is not present in the application's source. It will be deleted from Kubernetes if the prune option is enabled during sync.)`;
             }
             color = COLORS.sync.out_of_sync;
             break;