Skip to content

Commit

Permalink
improve pod grouping ux
Browse files Browse the repository at this point in the history 
Signed-off-by: ashutosh16 <[email protected]>
  • Loading branch information
@ashutosh16
ashutosh16 committed Aug 1, 2023
1 parent e24a9ab commit 3086371
Show file tree
Hide file tree
Showing 5 changed files with 29 additions and 28 deletions.
26 changes: 14 additions & 12 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 @@ -147,7 +147,9 @@ 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}});
}

Expand Down Expand Up @@ -231,7 +233,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 toolTipMsg = pref?.appToolTipMsgs.find(usrMsg => usrMsg.appName === application.metadata.name);
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));
Expand Down Expand Up @@ -297,12 +299,12 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
const setShowCompactNodes = (showCompactView: boolean) => {
services.viewPreferences.updatePreferences({appDetails: {...pref, groupNodes: showCompactView}});
};
const updateToolTipState = (appToolTip: models.ToolTipMsg) => {
const existingIndex = pref.appToolTipMsgs.findIndex(msg => msg.appName === appToolTip.appName && msg.msgKey === appToolTip.msgKey);
const updateToolTipState = (appToolTip: models.UserMessages) => {
const existingIndex = pref.displayUserMsgs.findIndex(msg => msg.appName === appToolTip.appName && msg.msgKey === appToolTip.msgKey);
if (existingIndex !== -1) {
pref.appToolTipMsgs[existingIndex] = appToolTip;
pref.displayUserMsgs[existingIndex] = appToolTip;
} else {
(pref.appToolTipMsgs || []).push(appToolTip);
(pref.displayUserMsgs || []).push(appToolTip);
}
};
const toggleNameDirection = () => {
Expand Down Expand Up @@ -456,13 +458,13 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
</a>
{(pref.view === 'tree' || pref.view === 'network') && (
<Tooltip
content={toolTipMsg?.messages}
visible={pref.groupNodes && toolTipMsg && !toolTipMsg?.display}
duration={toolTipMsg?.duration}>
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(pref)}>
onClick={() => this.toggleCompactView(application.metadata.name, pref)}>
<i className={classNames('fa fa-object-group fa-fw')} />
</a>
</Tooltip>
Expand Down Expand Up @@ -496,7 +498,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
)
}
showCompactNodes={pref.groupNodes}
userToolTipMsgs={pref.appToolTipMsgs}
userMsgs={pref.displayUserMsgs}
tree={tree}
app={application}
showOrphanedResources={pref.orphanedResources}
Expand All @@ -509,7 +511,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
nameDirection={this.state.truncateNameOnRight}
filters={pref.resourceFilter}
setTreeFilterGraph={setFilterGraph}
updateToolTipState={updateToolTipState}
updateUserMsgs={updateToolTipState}
setShowCompactNodes={setShowCompactNodes}
setNodeExpansion={(node, isExpanded) => this.setNodeExpansion(node, isExpanded)}
getNodeExpansion={node => this.getNodeExpansion(node)}
Expand Down
12 changes: 6 additions & 6 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,
getUserToolTipMsg
getUsrMsgToDisplay
} from '../utils';
import {NodeUpdateAnimation} from './node-update-animation';
import {PodGroup} from '../application-pod-view/pod-view';
Expand Down Expand Up @@ -60,8 +60,8 @@ export interface ApplicationResourceTreeProps {
appContext?: AppContext;
showOrphanedResources: boolean;
showCompactNodes: boolean;
userToolTipMsgs: models.ToolTipMsg[];
updateToolTipState: (userToolTipMsg: models.ToolTipMsg) => void;
userMsgs: models.UserMessages[];
updateUserMsgs: (userMsgs: models.UserMessages) => void;
setShowCompactNodes: (showCompactNodes: boolean) => void;
zoom: number;
podGroupCount: number;
Expand Down Expand Up @@ -938,13 +938,13 @@ export const ApplicationResourceTree = (props: ApplicationResourceTreeProps) =>
props.setTreeFilterGraph(filteredGraph);
}
}, [props.filters]);
const {podGroupCount, userToolTipMsgs, updateToolTipState, setShowCompactNodes} = props;
const {podGroupCount, userMsgs, updateUserMsgs, setShowCompactNodes} = props;
const podCount = nodes.filter(node => node.kind === 'Pod').length;

React.useEffect(() => {
if (podCount > podGroupCount) {
const userMsg = getUserToolTipMsg(appNode.name, 'groupNodes', userToolTipMsgs);
updateToolTipState(userMsg);
const userMsg = getUsrMsgToDisplay(appNode.name, 'groupNodes', userMsgs);
updateUserMsgs(userMsg);
setShowCompactNodes(true);
} else {
setShowCompactNodes(false);
Expand Down
11 changes: 5 additions & 6 deletions ui/src/app/applications/components/utils.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1252,16 +1252,15 @@ export function formatCreationTimestamp(creationTimestamp: string) {

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

export function getUserToolTipMsg(appName: string, msgKey: string, toolTipMsgs: appModels.ToolTipMsg[], showMsgIntervals?: string) {
const tootipMsg = toolTipMsgs?.find((usrMsg: appModels.ToolTipMsg) => usrMsg.appName === appName && usrMsg.msgKey === msgKey);
if (tootipMsg !== undefined) {
return {...tootipMsg, display: true};
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.ToolTipMsg;
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.`
Expand Down
2 changes: 1 addition & 1 deletion ui/src/app/shared/models.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -954,7 +954,7 @@ export interface LinksResponse {
items: LinkInfo[];
}

export interface ToolTipMsg {
export interface UserMessages {
appName: string;
msgKey: string;
messages?: string;
Expand Down
6 changes: 3 additions & 3 deletions ui/src/app/shared/services/view-preferences-service.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import * as deepMerge from 'deepmerge';
import {BehaviorSubject, Observable} from 'rxjs';

import {PodGroupType} from '../../applications/components/application-pod-view/pod-view';
import {ToolTipMsg} from '../models';
import {UserMessages} from '../models';

export type AppsDetailsViewType = 'tree' | 'network' | 'list' | 'pods';

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

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

0 comments on commit 3086371

Please sign in to comment.