Skip to content

Commit

Permalink
feat(ui): support diff for application list
Browse files Browse the repository at this point in the history 
Signed-off-by: vivian.zhang <[email protected]>
  • Loading branch information
@vivian-xu
vivian-xu committed Nov 14, 2024
1 parent e9ff075 commit a935890
Show file tree
Hide file tree
Showing 5 changed files with 82 additions and 4 deletions.
25 changes: 25 additions & 0 deletions ...plications/components/application-resource-diff-panel/application-resource-diff-panel.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import {DataLoader, SlidingPanel} from 'argo-ui';
import * as React from 'react';
import * as models from '../../../shared/models';
import {services} from '../../../shared/services';
import {ApplicationResourcesDiff} from '../application-resources-diff/application-resources-diff';

export const ApplicationResourceDiffPanel = ({application, hide}: {application: models.Application; hide: () => any}) => {
const isVisible = !!application;
const header = application?.metadata.name || 'diff';
return (
<SlidingPanel header={header} isShown={isVisible} onClose={() => hide()}>
{isVisible && (
<DataLoader
key='diff'
load={async () =>
await services.applications.managedResources(application.metadata.name, application.metadata.namespace, {
fields: ['items.normalizedLiveState', 'items.predictedLiveState', 'items.group', 'items.kind', 'items.namespace', 'items.name']
})
}>
{managedResources => <ApplicationResourcesDiff states={managedResources} />}
</DataLoader>
)}
</SlidingPanel>
);
};
32 changes: 32 additions & 0 deletions ui/src/app/applications/components/applications-list/applications-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ import {AppsListViewKey, AppsListPreferences, AppsListViewType, HealthStatusBarP
import {ApplicationCreatePanel} from '../application-create-panel/application-create-panel';
import {ApplicationSyncPanel} from '../application-sync-panel/application-sync-panel';
import {ApplicationsSyncPanel} from '../applications-sync-panel/applications-sync-panel';
import {ApplicationResourceDiffPanel} from '../application-resource-diff-panel/application-resource-diff-panel';
import * as AppUtils from '../utils';
import {ApplicationsFilter, FilteredApp, getFilterResults} from './applications-filter';
import {ApplicationsStatusBar} from './applications-status-bar';
Expand Down Expand Up @@ -542,6 +543,9 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
deleteApplication={(appName, appNamespace) =>
AppUtils.deleteApplication(appName, appNamespace, ctx)
}
diffApplication={(appName, appNamespace) =>
ctx.navigation.goto('.', {diffApp: appName, appNamespace}, {replace: true})
}
/>
)) || (
<ApplicationsTable
Expand All @@ -553,6 +557,9 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
deleteApplication={(appName, appNamespace) =>
AppUtils.deleteApplication(appName, appNamespace, ctx)
}
diffApplication={(appName, appNamespace) =>
ctx.navigation.goto('.', {diffApp: appName, appNamespace}, {replace: true})
}
/>
)
}
Expand All @@ -573,6 +580,7 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
apps={filteredApps}
/>
</div>

<ObservableQuery>
{q => (
<DataLoader
Expand All @@ -596,6 +604,30 @@ export const ApplicationsList = (props: RouteComponentProps<{}>) => {
</DataLoader>
)}
</ObservableQuery>

<ObservableQuery>
{q => (
<DataLoader
load={() =>
q.pipe(
mergeMap(params => {
const diffApp = params.get('diffApp');
const appNamespace = params.get('appNamespace');
return (diffApp && from(services.applications.get(diffApp, appNamespace))) || from([null]);
})
)
}>
{app => (
<ApplicationResourceDiffPanel
key='diffPanel'
application={app}
hide={() => ctx.navigation.goto('.', {diffApp: null}, {replace: true})}
/>
)}
</DataLoader>
)}
</ObservableQuery>

<SlidingPanel
isShown={!!appInput}
onClose={() => ctx.navigation.goto('.', {new: null}, {replace: true})}
Expand Down
6 changes: 6 additions & 0 deletions ui/src/app/applications/components/applications-list/applications-table.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@ export const ApplicationsTable = (props: {
syncApplication: (appName: string, appNamespace: string) => any;
refreshApplication: (appName: string, appNamespace: string) => any;
deleteApplication: (appName: string, appNamespace: string) => any;
diffApplication: (appName: string, appNamespace: string) => any;
}) => {
const [selectedApp, navApp, reset] = useNav(props.applications.length);
const ctxh = React.useContext(Context);
Expand Down Expand Up @@ -154,6 +155,11 @@ export const ApplicationsTable = (props: {
title: 'Delete',
iconClassName: 'fa fa-fw fa-times-circle',
action: () => props.deleteApplication(app.metadata.name, app.metadata.namespace)
},
{
title: 'Diff',
iconClassName: 'fa fa-fw fa-file-medical',
action: () => props.diffApplication(app.metadata.name, app.metadata.namespace)
}
]}
/>
Expand Down
2 changes: 1 addition & 1 deletion ui/src/app/applications/components/applications-list/applications-tiles.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
.applications-tiles {
display: grid;
gap: 24px;
grid-template-columns: repeat(auto-fill,minmax(370px,1fr));
grid-template-columns: repeat(auto-fill,minmax(440px,1fr));
padding: 0 12px;

&__wrapper {
Expand Down
21 changes: 18 additions & 3 deletions ui/src/app/applications/components/applications-list/applications-tiles.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export interface ApplicationTilesProps {
syncApplication: (appName: string, appNamespace: string) => any;
refreshApplication: (appName: string, appNamespace: string) => any;
deleteApplication: (appName: string, appNamespace: string) => any;
diffApplication: (appName: string, appNamespace: string) => any;
}

const useItemsPerContainer = (itemRef: any, containerRef: any): number => {
Expand Down Expand Up @@ -46,7 +47,7 @@ const useItemsPerContainer = (itemRef: any, containerRef: any): number => {
return itemsPer || 1;
};

export const ApplicationTiles = ({applications, syncApplication, refreshApplication, deleteApplication}: ApplicationTilesProps) => {
export const ApplicationTiles = ({applications, syncApplication, refreshApplication, deleteApplication, diffApplication}: ApplicationTilesProps) => {
const [selectedApp, navApp, reset] = useNav(applications.length);

const ctxh = React.useContext(Context);
Expand Down Expand Up @@ -109,6 +110,9 @@ export const ApplicationTiles = ({applications, syncApplication, refreshApplicat
{applications.map((app, i) => {
const source = getAppDefaultSource(app);
const targetRevision = source ? source.targetRevision || 'HEAD' : 'Unknown';
const isDisabledDiff =
app.status.sync.status === models.SyncStatuses.Synced || (!app.spec.source && (!app.spec.sources || app.spec.sources.length === 0));

return (
<div
key={AppUtils.appInstanceName(app)}
Expand Down Expand Up @@ -287,7 +291,7 @@ export const ApplicationTiles = ({applications, syncApplication, refreshApplicat
refreshApplication(app.metadata.name, app.metadata.namespace);
}}>
<i className={classNames('fa fa-redo', {'status-icon--spin': AppUtils.isAppRefreshing(app)})} />{' '}
<span className='show-for-xxlarge'>Refresh</span>
<span className='show-for-large'>Refresh</span>
</a>
&nbsp;
<a
Expand All @@ -297,8 +301,19 @@ export const ApplicationTiles = ({applications, syncApplication, refreshApplicat
e.stopPropagation();
deleteApplication(app.metadata.name, app.metadata.namespace);
}}>
<i className='fa fa-times-circle' /> <span className='show-for-xxlarge'>Delete</span>
<i className='fa fa-times-circle' /> <span className='show-for-large'>Delete</span>
</a>
&nbsp;
<button
className='argo-button argo-button--base'
qe-id='applications-tiles-button-delete'
disabled={isDisabledDiff}
onClick={e => {
e.stopPropagation();
diffApplication(app.metadata.name, app.metadata.namespace);
}}>
<i className='fa fa-file-medical' /> <span className='show-for-large'>Diff</span>
</button>
</div>
</div>
</div>
Expand Down

0 comments on commit a935890

Please sign in to comment.