Skip to content

Commit

Permalink
fix(ui): simplify detail action menu item
Browse files Browse the repository at this point in the history 
Signed-off-by: linghaoSu <[email protected]>
  • Loading branch information
@linghaoSu
linghaoSu committed Nov 25, 2024
1 parent dee5305 commit ab6123e
Showing 1 changed file with 37 additions and 46 deletions.
83 changes: 37 additions & 46 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 @@ -934,93 +934,86 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
const fullName = AppUtils.nodeKey({group: 'argoproj.io', kind: app.kind, name: app.metadata.name, namespace: app.metadata.namespace});
const ActionMenuItem = (prop: {actionLabel: string}) => <span className={needOverlapLabelOnNarrowScreen ? 'show-for-large' : ''}>{prop.actionLabel}</span>;

const actionMenus = [
return [
{
iconClassName: 'fa fa-info-circle',
title: <ActionMenuItem actionLabel='Details' />,
title: <ActionMenuItem actionLabel='Details' key='details' />,
action: () => this.selectNode(fullName),
disabled: !app.spec.source && (!app.spec.sources || app.spec.sources.length === 0)
},
{
iconClassName: 'fa fa-file-medical',
title: <ActionMenuItem actionLabel='Diff' />,
title: <ActionMenuItem actionLabel='Diff' key='diff' />,
action: () => this.selectNode(fullName, 0, 'diff'),
disabled: app.status.sync.status === appModels.SyncStatuses.Synced || (!app.spec.source && (!app.spec.sources || app.spec.sources.length === 0))
}
];

if (!app.status.operationState?.finishedAt || app.status.operationState?.phase === 'Running') {
actionMenus.push({
iconClassName: 'fa fa-stop',
title: <ActionMenuItem actionLabel='Terminate Sync' />,
action: async () => {
const confirmed = await this.context.apis.popup.confirm('Terminate Sync', 'Are you sure you want to terminate sync?');
if (confirmed) {
try {
await services.applications.terminateOperation(app.metadata.name, app.metadata.namespace);
} catch (e) {
this.context.apis.notifications.show({
content: <ErrorNotification title='Unable to Terminate Sync operation' e={e} />,
type: NotificationType.Error
});
}
}
},
disabled: false
});
} else {
actionMenus.push({
iconClassName: 'fa fa-sync',
title: <ActionMenuItem actionLabel='Sync' />,
action: () => AppUtils.showDeploy('all', null, this.appContext.apis),
disabled: !app.spec.source && (!app.spec.sources || app.spec.sources.length === 0)
});
}
},

// Add refresh action
actionMenus.push(
!app.status.operationState?.finishedAt || app.status.operationState?.phase === 'Running'
? {
iconClassName: 'fa fa-stop',
title: <ActionMenuItem actionLabel='Terminate Sync' key='terminate-sync' />,
action: async () => {
const confirmed = await this.context.apis.popup.confirm('Terminate Sync', 'Are you sure you want to terminate sync?');
if (confirmed) {
try {
await services.applications.terminateOperation(app.metadata.name, app.metadata.namespace);
} catch (e) {
this.context.apis.notifications.show({
content: <ErrorNotification title='Unable to Terminate Sync operation' e={e} />,
type: NotificationType.Error
});
}
}
}
}
: {
iconClassName: 'fa fa-sync',
title: <ActionMenuItem actionLabel='Sync' key='sync' />,
action: () => AppUtils.showDeploy('all', null, this.appContext.apis),
disabled: !app.spec.source && (!app.spec.sources || app.spec.sources.length === 0)
},
...(app.status?.operationState?.phase === 'Running' && app.status.resources.find(r => r.requiresDeletionConfirmation)
? [
{
iconClassName: 'fa fa-check',
title: <ActionMenuItem actionLabel='Confirm Pruning' />,
title: <ActionMenuItem actionLabel='Confirm Pruning' key='confirm-pruning' />,
action: () => this.confirmDeletion(app, 'Confirm Prunning', 'Are you sure you want to confirm resources pruning?')
}
]
: []),
{
iconClassName: 'fa fa-info-circle',
title: <ActionMenuItem actionLabel='Sync Status' />,
title: <ActionMenuItem actionLabel='Sync Status' key='sync-status' />,
action: () => this.setOperationStatusVisible(true),
disabled: !app.status.operationState
},
{
iconClassName: 'fa fa-history',
title: <ActionMenuItem actionLabel='History and rollback' />,
title: <ActionMenuItem actionLabel='History and rollback' key='history-rollback' />,
action: () => {
this.setRollbackPanelVisible(0);
},
disabled: !app.status.operationState
},
app.metadata.deletionTimestamp &&
app.status.resources.find(r => r.requiresDeletionConfirmation) &&
!((app.metadata.annotations || {})[appModels.AppDeletionConfirmedAnnotation] == 'true')
app.status.resources.find(r => r.requiresDeletionConfirmation) &&
!((app.metadata.annotations || {})[appModels.AppDeletionConfirmedAnnotation] == 'true')
? {
iconClassName: 'fa fa-check',
title: <ActionMenuItem actionLabel='Confirm Deletion' />,
title: <ActionMenuItem actionLabel='Confirm Deletion' key='confirm-deletion' />,
action: () => this.confirmDeletion(app, 'Confirm Deletion', 'Are you sure you want to delete this application?')
}
: {
iconClassName: 'fa fa-times-circle',
title: <ActionMenuItem actionLabel='Delete' />,
title: <ActionMenuItem actionLabel='Delete' key='delete' />,
action: () => this.deleteApplication(),
disabled: !!app.metadata.deletionTimestamp
},
{
iconClassName: classNames('fa fa-redo', {'status-icon--spin': !!refreshing}),
title: (
<React.Fragment>
<ActionMenuItem actionLabel='Refresh' />{' '}
<ActionMenuItem actionLabel='Refresh' key='refresh' />{' '}
<DropDownMenu
items={[
{
Expand All @@ -1041,9 +1034,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
}
}
}
);

return actionMenus;
];
}

private filterTreeNode(node: ResourceTreeNode, filterInput: FilterInput): boolean {
Expand Down

0 comments on commit ab6123e

Please sign in to comment.