Skip to content

Commit

Permalink
fix(ui):update the pod grouping messages to tooltip
Browse files Browse the repository at this point in the history 
Signed-off-by: ashutosh16 <[email protected]>
  • Loading branch information
@ashutosh16
ashutosh16 committed Aug 21, 2023
1 parent 35f10d3 commit 2add3cc
Show file tree
Hide file tree
Showing 5 changed files with 22 additions and 25 deletions.
18 changes: 9 additions & 9 deletions ui/src/app/applications/components/application-details/application-details.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
}

private toggleCompactView(appName: string, pref: AppDetailsPreferences) {
pref.displayUserMsgs = pref.displayUserMsgs.map(usrMsg => (usrMsg.appName === appName && usrMsg.msgKey === 'groupNodes' ? {...usrMsg, display: true} : usrMsg));
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 @@ -232,7 +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 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 @@ -298,12 +298,12 @@ 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);
const updateHelpTipState = (usrHelpTip: models.UserMessages) => {
const existingIndex = pref.userHelpTipMsgs.findIndex(msg => msg.appName === usrHelpTip.appName && msg.msgKey === usrHelpTip.msgKey);
if (existingIndex !== -1) {
pref.displayUserMsgs[existingIndex] = appToolTip;
pref.userHelpTipMsgs[existingIndex] = usrHelpTip;
} else {
(pref.displayUserMsgs || []).push(appToolTip);
(pref.userHelpTipMsgs || []).push(usrHelpTip);
}
};
const toggleNameDirection = () => {
Expand Down Expand Up @@ -457,7 +457,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
</a>
{(pref.view === 'tree' || pref.view === 'network') && (
<Tooltip
content={showToolTip?.messages || ''}
content={AppUtils.userMsgsList[showToolTip?.msgKey] || ''}
visible={pref.groupNodes && showToolTip && !showToolTip?.display}
duration={showToolTip?.duration}>
<a
Expand Down Expand Up @@ -497,7 +497,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
)
}
showCompactNodes={pref.groupNodes}
userMsgs={pref.displayUserMsgs}
userMsgs={pref.userHelpTipMsgs}
tree={tree}
app={application}
showOrphanedResources={pref.orphanedResources}
Expand All @@ -510,7 +510,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
nameDirection={this.state.truncateNameOnRight}
filters={pref.resourceFilter}
setTreeFilterGraph={setFilterGraph}
updateUserMsgs={updateToolTipState}
updateUsrHelpTipMsgs={updateHelpTipState}
setShowCompactNodes={setShowCompactNodes}
setNodeExpansion={(node, isExpanded) => this.setNodeExpansion(node, isExpanded)}
getNodeExpansion={node => this.getNodeExpansion(node)}
Expand Down
16 changes: 8 additions & 8 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
Expand Up @@ -23,7 +23,7 @@ import {
NodeId,
nodeKey,
PodHealthIcon,
getUsrMsgToDisplay
getUsrMsgKeyToDisplay
} from '../utils';
import {NodeUpdateAnimation} from './node-update-animation';
import {PodGroup} from '../application-pod-view/pod-view';
Expand Down Expand Up @@ -61,7 +61,7 @@ export interface ApplicationResourceTreeProps {
showOrphanedResources: boolean;
showCompactNodes: boolean;
userMsgs: models.UserMessages[];
updateUserMsgs: (userMsgs: models.UserMessages) => void;
updateUsrHelpTipMsgs: (userMsgs: models.UserMessages) => void;
setShowCompactNodes: (showCompactNodes: boolean) => void;
zoom: number;
podGroupCount: number;
Expand Down Expand Up @@ -938,16 +938,16 @@ export const ApplicationResourceTree = (props: ApplicationResourceTreeProps) =>
props.setTreeFilterGraph(filteredGraph);
}
}, [props.filters]);
const {podGroupCount, userMsgs, updateUserMsgs, setShowCompactNodes} = props;
const {podGroupCount, userMsgs, updateUsrHelpTipMsgs, setShowCompactNodes} = props;
const podCount = nodes.filter(node => node.kind === 'Pod').length;

React.useEffect(() => {
if (podCount > podGroupCount) {
const userMsg = getUsrMsgToDisplay(appNode.name, 'groupNodes', userMsgs);
updateUserMsgs(userMsg);
setShowCompactNodes(true);
} else {
setShowCompactNodes(false);
const userMsg = getUsrMsgKeyToDisplay(appNode.name, 'groupNodes', userMsgs);
updateUsrHelpTipMsgs(userMsg);
if (!userMsg.display) {
setShowCompactNodes(true);
}
}
}, [podCount]);

Expand Down
8 changes: 3 additions & 5 deletions ui/src/app/applications/components/utils.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1253,18 +1253,16 @@ 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[]) {
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, messages: userMsgs[msgKey], display: false, duration: 1} as appModels.UserMessages;
return {appName, msgKey, display: false, duration: 1} as appModels.UserMessages;
}
}

type UserMsgType = {[key: string]: string};

export const userMsgs: UserMsgType = {
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.`
};
1 change: 0 additions & 1 deletion ui/src/app/shared/models.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -959,7 +959,6 @@ export interface LinksResponse {
export interface UserMessages {
appName: string;
msgKey: string;
messages?: string;
display: boolean;
condition?: HealthStatusCode;
duration?: number;
Expand Down
4 changes: 2 additions & 2 deletions ui/src/app/shared/services/view-preferences-service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ export interface AppDetailsPreferences {
groupNodes?: boolean;
zoom: number;
podGroupCount: number;
displayUserMsgs: UserMessages[];
userHelpTipMsgs: UserMessages[];
}

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

0 comments on commit 2add3cc

Please sign in to comment.