Skip to content

Commit

Permalink
fix(ui): switch podgroup notification to tooltip message (argoproj#14821
Browse files Browse the repository at this point in the history 
)

* improve pod grouping ux

Signed-off-by: ashutosh16 <[email protected]>

fix: update log view on container select

Signed-off-by: ashutosh16 <[email protected]>

* fix(ui): improve pod grouping ux

Signed-off-by: ashutosh16 <[email protected]>

* fix(ui):update the pod grouping messages to tooltip

Signed-off-by: ashutosh16 <[email protected]>

* fix(ui):update the pod grouping messages to tooltip

Signed-off-by: ashutosh16 <[email protected]>

* fix: GroupNodes notification

Signed-off-by: AS <[email protected]>

* fix: GroupNodes notification

Signed-off-by: AS <[email protected]>

---------

Signed-off-by: ashutosh16 <[email protected]>
Signed-off-by: AS <[email protected]>
  • Loading branch information
@ashutosh16
ashutosh16 authored Aug 24, 2023
1 parent fed4506 commit e689618
Show file tree
Hide file tree
Showing 5 changed files with 66 additions and 21 deletions.
34 changes: 26 additions & 8 deletions ui/src/app/applications/components/application-details/application-details.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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.userHelpTipMsgs = pref.userHelpTipMsgs.map(usrMsg => (usrMsg.appName === appName && usrMsg.msgKey === 'groupNodes' ? {...usrMsg, display: true} : usrMsg));
services.viewPreferences.updatePreferences({appDetails: {...pref, groupNodes: !pref.groupNodes}});
}

Expand Down Expand Up @@ -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?.userHelpTipMsgs.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));
Expand Down Expand Up @@ -296,6 +298,14 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
const setShowCompactNodes = (showCompactView: boolean) => {
services.viewPreferences.updatePreferences({appDetails: {...pref, groupNodes: showCompactView}});
};
const updateHelpTipState = (usrHelpTip: models.UserMessages) => {
const existingIndex = pref.userHelpTipMsgs.findIndex(msg => msg.appName === usrHelpTip.appName && msg.msgKey === usrHelpTip.msgKey);
if (existingIndex !== -1) {
pref.userHelpTipMsgs[existingIndex] = usrHelpTip;
} else {
(pref.userHelpTipMsgs || []).push(usrHelpTip);
}
};
const toggleNameDirection = () => {
this.setState({truncateNameOnRight: !this.state.truncateNameOnRight});
};
Expand Down Expand Up @@ -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={AppUtils.userMsgsList[showToolTip?.msgKey] || 'Group Nodes'}
visible={pref.groupNodes && showToolTip !== undefined && !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' />
Expand Down Expand Up @@ -481,6 +497,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
)
}
showCompactNodes={pref.groupNodes}
userMsgs={pref.userHelpTipMsgs}
tree={tree}
app={application}
showOrphanedResources={pref.orphanedResources}
Expand All @@ -493,6 +510,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
nameDirection={this.state.truncateNameOnRight}
filters={pref.resourceFilter}
setTreeFilterGraph={setFilterGraph}
updateUsrHelpTipMsgs={updateHelpTipState}
setShowCompactNodes={setShowCompactNodes}
setNodeExpansion={(node, isExpanded) => this.setNodeExpansion(node, isExpanded)}
getNodeExpansion={node => this.getNodeExpansion(node)}
Expand Down
25 changes: 13 additions & 12 deletions ui/src/app/applications/components/application-resource-tree/application-resource-tree.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -22,7 +22,8 @@ import {
isYoungerThanXMinutes,
NodeId,
nodeKey,
PodHealthIcon
PodHealthIcon,
getUsrMsgKeyToDisplay
} from '../utils';
import {NodeUpdateAnimation} from './node-update-animation';
import {PodGroup} from '../application-pod-view/pod-view';
Expand Down Expand Up @@ -59,6 +60,8 @@ export interface ApplicationResourceTreeProps {
appContext?: AppContext;
showOrphanedResources: boolean;
showCompactNodes: boolean;
userMsgs: models.UserMessages[];
updateUsrHelpTipMsgs: (userMsgs: models.UserMessages) => void;
setShowCompactNodes: (showCompactNodes: boolean) => void;
zoom: number;
podGroupCount: number;
Expand Down Expand Up @@ -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, updateUsrHelpTipMsgs, setShowCompactNodes} = props;
const podCount = nodes.filter(node => node.kind === 'Pod').length;

React.useEffect(() => {
const {podGroupCount, setShowCompactNodes, appContext} = props;
if (podCount > podGroupCount) {
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);
const userMsg = getUsrMsgKeyToDisplay(appNode.name, 'groupNodes', userMsgs);
updateUsrHelpTipMsgs(userMsg);
if (!userMsg.display) {
setShowCompactNodes(true);
}
}
}, [podCount]);

Expand Down
14 changes: 14 additions & 0 deletions ui/src/app/applications/components/utils.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1252,3 +1252,17 @@ export function formatCreationTimestamp(creationTimestamp: string) {
}

export const selectPostfix = (arr: string[], singular: string, plural: string) => (arr.length > 1 ? plural : singular);

export function getUsrMsgKeyToDisplay(appName: string, msgKey: string, usrMessages: appModels.UserMessages[]) {
const usrMsg = usrMessages?.find((msg: appModels.UserMessages) => msg.appName === appName && msg.msgKey === msgKey);
if (usrMsg !== undefined) {
return {...usrMsg, display: true};
} else {
return {appName, msgKey, display: false, duration: 1} as appModels.UserMessages;
}
}

export const userMsgsList: {[key: string]: string} = {
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.`
};
9 changes: 9 additions & 0 deletions ui/src/app/shared/models.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -955,3 +955,12 @@ export interface LinkInfo {
export interface LinksResponse {
items: LinkInfo[];
}

export interface UserMessages {
appName: string;
msgKey: string;
display: boolean;
condition?: HealthStatusCode;
duration?: number;
animation?: string;
}
5 changes: 4 additions & 1 deletion ui/src/app/shared/services/view-preferences-service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand All @@ -28,6 +29,7 @@ export interface AppDetailsPreferences {
groupNodes?: boolean;
zoom: number;
podGroupCount: number;
userHelpTipMsgs: UserMessages[];
}

export interface PodViewPreferences {
Expand Down Expand Up @@ -122,7 +124,8 @@ const DEFAULT_PREFERENCES: ViewPreferences = {
followLogs: false,
wrapLines: false,
zoom: 1.0,
podGroupCount: 15.0
podGroupCount: 15.0,
userHelpTipMsgs: []
},
appList: {
view: 'tiles' as AppsListViewType,
Expand Down

0 comments on commit e689618

Please sign in to comment.