improve pod grouping ux

Signed-off-by: ashutosh16 <[email protected]> fix: update log view on container select Signed-off-by: ashutosh16 <[email protected]>
argoproj · Aug 1, 2023 · 781bba3 · 781bba3
1 parent 951b6b1
commit 781bba3
Show file tree

Hide file tree

Showing 5 changed files with 66 additions and 20 deletions.
diff --git a/ui/src/app/applications/components/application-details/application-details.tsx b/ui/src/app/applications/components/application-details/application-details.tsx
@@ -1,4 +1,4 @@
-import {DropDownMenu, NotificationType, SlidingPanel} from 'argo-ui';
+import {DropDownMenu, NotificationType, SlidingPanel, Tooltip} from 'argo-ui';
 import * as classNames from 'classnames';
 import * as PropTypes from 'prop-types';
 import * as React from 'react';
@@ -147,7 +147,8 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
         this.setState({slidingPanelPage: 0});
     }
 
-    private toggleCompactView(pref: AppDetailsPreferences) {
+    private toggleCompactView(appName: string, pref: AppDetailsPreferences) {
+        pref.displayUserMsgs = pref.displayUserMsgs.map(usrMsg => (usrMsg.appName === appName && usrMsg.msgKey === 'groupNodes' ? {...usrMsg, display: true} : usrMsg));
         services.viewPreferences.updatePreferences({appDetails: {...pref, groupNodes: !pref.groupNodes}});
     }
 
@@ -231,6 +232,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
                             const syncResourceKey = new URLSearchParams(this.props.history.location.search).get('deploy');
                             const tab = new URLSearchParams(this.props.history.location.search).get('tab');
                             const source = getAppDefaultSource(application);
+                            const showToolTip = pref?.displayUserMsgs.find(usrMsg => usrMsg.appName === application.metadata.name);
                             const resourceNodes = (): any[] => {
                                 const statusByKey = new Map<string, models.ResourceStatus>();
                                 application.status.resources.forEach(res => statusByKey.set(AppUtils.nodeKey(res), res));
@@ -296,6 +298,14 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
                             const setShowCompactNodes = (showCompactView: boolean) => {
                                 services.viewPreferences.updatePreferences({appDetails: {...pref, groupNodes: showCompactView}});
                             };
+                            const updateToolTipState = (appToolTip: models.UserMessages) => {
+                                const existingIndex = pref.displayUserMsgs.findIndex(msg => msg.appName === appToolTip.appName && msg.msgKey === appToolTip.msgKey);
+                                if (existingIndex !== -1) {
+                                    pref.displayUserMsgs[existingIndex] = appToolTip;
+                                } else {
+                                    (pref.displayUserMsgs || []).push(appToolTip);
+                                }
+                            };
                             const toggleNameDirection = () => {
                                 this.setState({truncateNameOnRight: !this.state.truncateNameOnRight});
                             };
@@ -446,13 +456,19 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
                                                             />
                                                         </a>
                                                         {(pref.view === 'tree' || pref.view === 'network') && (
-                                                            <a
-                                                                className={`group-nodes-button group-nodes-button${!pref.groupNodes ? '' : '-on'}`}
-                                                                title={pref.view === 'tree' ? 'Group Nodes' : 'Collapse Pods'}
-                                                                onClick={() => this.toggleCompactView(pref)}>
-                                                                <i className={classNames('fa fa-object-group fa-fw')} />
-                                                            </a>
+                                                            <Tooltip
+                                                                content={showToolTip?.messages || ''}
+                                                                visible={pref.groupNodes && showToolTip && !showToolTip?.display}
+                                                                duration={showToolTip?.duration}>
+                                                                <a
+                                                                    className={`group-nodes-button group-nodes-button${!pref.groupNodes ? '' : '-on'}`}
+                                                                    title={pref.view === 'tree' ? 'Group Nodes' : 'Collapse Pods'}
+                                                                    onClick={() => this.toggleCompactView(application.metadata.name, pref)}>
+                                                                    <i className={classNames('fa fa-object-group fa-fw')} />
+                                                                </a>
+                                                            </Tooltip>
                                                         )}
+
                                                         <span className={`separator`} />
                                                         <a className={`group-nodes-button`} onClick={() => expandAll()} title='Expand all child nodes of all parent nodes'>
                                                             <i className='fa fa-plus fa-fw' />
@@ -481,6 +497,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
                                                             )
                                                         }
                                                         showCompactNodes={pref.groupNodes}
+                                                        userMsgs={pref.displayUserMsgs}
                                                         tree={tree}
                                                         app={application}
                                                         showOrphanedResources={pref.orphanedResources}
@@ -493,6 +510,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
                                                         nameDirection={this.state.truncateNameOnRight}
                                                         filters={pref.resourceFilter}
                                                         setTreeFilterGraph={setFilterGraph}
+                                                        updateUserMsgs={updateToolTipState}
                                                         setShowCompactNodes={setShowCompactNodes}
                                                         setNodeExpansion={(node, isExpanded) => this.setNodeExpansion(node, isExpanded)}
                                                         getNodeExpansion={node => this.getNodeExpansion(node)}

diff --git a/ui/src/app/applications/components/application-resource-tree/application-resource-tree.tsx b/ui/src/app/applications/components/application-resource-tree/application-resource-tree.tsx
@@ -1,4 +1,4 @@
-import {DropDown, DropDownMenu, NotificationType, Tooltip} from 'argo-ui';
+import {DropDown, DropDownMenu, Tooltip} from 'argo-ui';
 import * as classNames from 'classnames';
 import * as dagre from 'dagre';
 import * as React from 'react';
@@ -22,7 +22,8 @@ import {
     isYoungerThanXMinutes,
     NodeId,
     nodeKey,
-    PodHealthIcon
+    PodHealthIcon,
+    getUsrMsgToDisplay
 } from '../utils';
 import {NodeUpdateAnimation} from './node-update-animation';
 import {PodGroup} from '../application-pod-view/pod-view';
@@ -59,6 +60,8 @@ export interface ApplicationResourceTreeProps {
     appContext?: AppContext;
     showOrphanedResources: boolean;
     showCompactNodes: boolean;
+    userMsgs: models.UserMessages[];
+    updateUserMsgs: (userMsgs: models.UserMessages) => void;
     setShowCompactNodes: (showCompactNodes: boolean) => void;
     zoom: number;
     podGroupCount: number;
@@ -179,7 +182,7 @@ function groupNodes(nodes: ResourceTreeNode[], graph: dagre.graphlib.Graph) {
             nodeIds.forEach((nodeId: string) => {
                 const index = nodes.findIndex(node => nodeId === node.uid || nodeId === nodeKey(node));
                 const graphNode = graph.node(nodeId);
-                if (!graphNode?.podGroup && index > -1) {
+                if (!graphNode.podGroup && index > -1) {
                     groupedNodeIds.push(nodeId);
                 } else {
                     podGroupIds.push(nodeId);
@@ -927,26 +930,24 @@ export const ApplicationResourceTree = (props: ApplicationResourceTreeProps) =>
     const [filters, setFilters] = React.useState(props.filters);
     const [filteredGraph, setFilteredGraph] = React.useState([]);
     const filteredNodes: any[] = [];
+
     React.useEffect(() => {
         if (props.filters !== filters) {
             setFilters(props.filters);
             setFilteredGraph(filteredNodes);
             props.setTreeFilterGraph(filteredGraph);
         }
     }, [props.filters]);
-
+    const {podGroupCount, userMsgs, updateUserMsgs, setShowCompactNodes} = props;
     const podCount = nodes.filter(node => node.kind === 'Pod').length;
+
     React.useEffect(() => {
-        const {podGroupCount, setShowCompactNodes, appContext} = props;
         if (podCount > podGroupCount) {
+            const userMsg = getUsrMsgToDisplay(appNode.name, 'groupNodes', userMsgs);
+            updateUserMsgs(userMsg);
             setShowCompactNodes(true);
-            appContext.apis.notifications.show({
-                content: `Since the number of pods has surpassed the threshold pod count of ${podGroupCount}, you will now be switched to the group node view.
-                 If you prefer the tree view, you can simply click on the Group Nodes toolbar button to deselect the current view.`,
-                type: NotificationType.Success
-            });
         } else {
-            props.setShowCompactNodes(false);
+            setShowCompactNodes(false);
         }
     }, [podCount]);
 

diff --git a/ui/src/app/applications/components/utils.tsx b/ui/src/app/applications/components/utils.tsx
@@ -1251,3 +1251,17 @@ export function formatCreationTimestamp(creationTimestamp: string) {
 }
 
 export const selectPostfix = (arr: string[], singular: string, plural: string) => (arr.length > 1 ? plural : singular);
+
+export function getUsrMsgToDisplay(appName: string, msgKey: string, usrMessages: appModels.UserMessages[], showMsgIntervals?: string) {
+    const usrMsg = usrMessages?.find((msg: appModels.UserMessages) => msg.appName === appName && msg.msgKey === msgKey);
+    if (usrMsg !== undefined) {
+        return {...usrMsg, display: true};
+    } else {
+        return {appName, msgKey, messages: userMsgs[msgKey], display: false, duration: 1} as appModels.UserMessages;
+    }
+}
+type UserMsgType = {[key: string]: string};
+export const userMsgs: UserMsgType = {
+    groupNodes: `Since the number of pods has surpassed the threshold pod count of 15, you will now be switched to the group node view.
+                 If you prefer the tree view, you can simply click on the Group Nodes toolbar button to deselect the current view.`
+};
diff --git a/ui/src/app/shared/models.ts b/ui/src/app/shared/models.ts
@@ -953,3 +953,13 @@ export interface LinkInfo {
 export interface LinksResponse {
     items: LinkInfo[];
 }
+
+export interface UserMessages {
+    appName: string;
+    msgKey: string;
+    messages?: string;
+    display: boolean;
+    condition?: HealthStatusCode;
+    duration?: number;
+    animation?: string;
+}
diff --git a/ui/src/app/shared/services/view-preferences-service.ts b/ui/src/app/shared/services/view-preferences-service.ts
@@ -2,6 +2,7 @@ import * as deepMerge from 'deepmerge';
 import {BehaviorSubject, Observable} from 'rxjs';
 
 import {PodGroupType} from '../../applications/components/application-pod-view/pod-view';
+import {UserMessages} from '../models';
 
 export type AppsDetailsViewType = 'tree' | 'network' | 'list' | 'pods';
 
@@ -28,6 +29,7 @@ export interface AppDetailsPreferences {
     groupNodes?: boolean;
     zoom: number;
     podGroupCount: number;
+    displayUserMsgs: UserMessages[];
 }
 
 export interface PodViewPreferences {
@@ -122,7 +124,8 @@ const DEFAULT_PREFERENCES: ViewPreferences = {
         followLogs: false,
         wrapLines: false,
         zoom: 1.0,
-        podGroupCount: 15.0
+        podGroupCount: 15.0,
+        displayUserMsgs: []
     },
     appList: {
         view: 'tiles' as AppsListViewType,