Skip to content

Commit

Permalink
useContext in some more places and improve dynamicity
Browse files Browse the repository at this point in the history 
Signed-off-by: reggie <[email protected]>
  • Loading branch information
@reggie-k
reggie-k committed Dec 2, 2023
1 parent 687b455 commit 253a432
Show file tree
Hide file tree
Showing 16 changed files with 542 additions and 401 deletions.
2 changes: 1 addition & 1 deletion ui/src/app/applications/components/application-details/application-details-app-dropdown.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export const ApplicationsDetailsAppDropdown = (props: {appName: string}) => {
}
/>
</li>
<DataLoader load={() => services.applications.list([], {fields: ['items.metadata.name']})}>
<DataLoader load={() => services.applications.list([], ctx, {fields: ['items.metadata.name']})}>
{apps =>
apps.items
.filter(app => {
Expand Down
58 changes: 42 additions & 16 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 @@ -32,7 +32,7 @@ import {ResourceDetails} from '../resource-details/resource-details';
import * as AppUtils from '../utils';
import {ApplicationResourceList} from './application-resource-list';
import {AbstractFiltersProps, Filters} from './application-resource-filter';
import {getAppDefaultSource, urlPattern, helpTip, isApp, isInvokedFromApps} from '../utils';
import {getAppDefaultSource, urlPattern, helpTip, isApp, isInvokedFromAppsPath} from '../utils';
import {AbstractApplication, ApplicationTree, ChartDetails, ResourceStatus} from '../../../shared/models';
import {ApplicationsDetailsAppDropdown} from './application-details-app-dropdown';
import {useSidebarTarget} from '../../../sidebar/sidebar';
Expand Down Expand Up @@ -194,8 +194,12 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
<ObservableQuery>
{q => (
<DataLoader
errorRenderer={error => <Page title={isInvokedFromApps() ? 'Application Details' : 'ApplicationSet Details'}>{error}</Page>}
loadingRenderer={() => <Page title={isInvokedFromApps() ? 'Application Details' : 'Application Set Details'}>Loading...</Page>}
errorRenderer={error => (
<Page title={isInvokedFromAppsPath(this.props.history.location.pathname) ? 'Application Details' : 'ApplicationSet Details'}>{error}</Page>
)}
loadingRenderer={() => (
<Page title={isInvokedFromAppsPath(this.props.history.location.pathname) ? 'Application Details' : 'Application Set Details'}>Loading...</Page>
)}
input={this.props.match.params.name}
load={name =>
combineLatest([this.loadAppInfo(name, this.appNamespace), services.viewPreferences.getPreferences(), q]).pipe(
Expand Down Expand Up @@ -549,8 +553,14 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
selectedNodeFullName={this.selectedNodeKey}
onNodeClick={fullName => this.selectNode(fullName)}
nodeMenu={node =>
AppUtils.renderResourceMenu(node, application, tree as ApplicationTree, this.appContext.apis, this.appChanged, () =>
this.getApplicationActionMenu(application, false)
AppUtils.renderResourceMenu(
node,
application,
tree as ApplicationTree,
this.appContext.apis,
this.props.history,
this.appChanged,
() => this.getApplicationActionMenu(application, false)
)
}
showCompactNodes={pref.groupNodes}
Expand Down Expand Up @@ -580,12 +590,25 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
app={application}
onItemClick={fullName => this.selectNode(fullName)}
nodeMenu={node =>
AppUtils.renderResourceMenu(node, application, tree as ApplicationTree, this.appContext.apis, this.appChanged, () =>
this.getApplicationActionMenu(application, false)
AppUtils.renderResourceMenu(
node,
application,
tree as ApplicationTree,
this.appContext.apis,
this.props.history,
this.appChanged,
() => this.getApplicationActionMenu(application, false)
)
}
quickStarts={node =>
AppUtils.renderResourceButtons(node, application, tree as ApplicationTree, this.appContext.apis, this.appChanged)
AppUtils.renderResourceButtons(
node,
application,
tree as ApplicationTree,
this.appContext.apis,
this.props.history,
this.appChanged
)
}
/>
)) ||
Expand Down Expand Up @@ -621,6 +644,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
application,
tree as ApplicationTree,
this.appContext.apis,
this.props.history,
this.appChanged,
() => this.getApplicationActionMenu(application, false)
)
Expand Down Expand Up @@ -656,6 +680,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
application,
tree as ApplicationTree,
this.appContext.apis,
this.props.history,
this.appChanged,
() => this.getApplicationActionMenu(application, false)
)
Expand Down Expand Up @@ -862,7 +887,8 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
items={[
{
title: 'Hard Refresh',
action: () => !refreshing && services.applications.get(app.metadata.name, app.metadata.namespace, 'hard')
action: () =>
!refreshing && services.applications.get(app.metadata.name, app.metadata.namespace, this.props.history.location.pathname, 'hard')
}
]}
anchor={() => <i className='fa fa-caret-down' />}
Expand All @@ -872,7 +898,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
disabled: !!refreshing,
action: () => {
if (!refreshing) {
services.applications.get(app.metadata.name, app.metadata.namespace, 'normal');
services.applications.get(app.metadata.name, app.metadata.namespace, this.props.location.pathname, 'normal');
AppUtils.setAppRefreshing(app);
this.appChanged.next(app);
}
Expand Down Expand Up @@ -930,7 +956,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
}

private loadAppInfo(name: string, appNamespace: string): Observable<{application: appModels.AbstractApplication; tree: appModels.AbstractApplicationTree}> {
return from(services.applications.get(name, appNamespace))
return from(services.applications.get(name, appNamespace, this.props.history.location.pathname))
.pipe(
mergeMap(app => {
const fallbackTree = {
Expand All @@ -944,7 +970,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
this.appChanged.pipe(filter(item => !!item)),
AppUtils.handlePageVisibility(() =>
services.applications
.watch({name, appNamespace})
.watch(this.props.history.location.pathname, {name, appNamespace})
.pipe(
map(watchEvent => {
if (watchEvent.type === 'DELETED') {
Expand All @@ -959,10 +985,10 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
),
merge(
from([fallbackTree]),
services.applications.resourceTree(name, appNamespace).catch(() => fallbackTree),
services.applications.resourceTree(name, appNamespace, this.props.history.location.pathname).catch(() => fallbackTree),
AppUtils.handlePageVisibility(() =>
services.applications
.watchResourceTree(name, appNamespace)
.watchResourceTree(name, appNamespace, this.props.history.location.pathname)
.pipe(repeat())
.pipe(retryWhen(errors => errors.pipe(delay(500))))
)
Expand All @@ -980,7 +1006,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
}

private async updateApp(app: appModels.Application, query: {validate?: boolean}) {
const latestApp = await services.applications.get(app.metadata.name, app.metadata.namespace);
const latestApp = await services.applications.get(app.metadata.name, app.metadata.namespace, this.props.history.location.pathname);
latestApp.metadata.labels = app.metadata.labels;
latestApp.metadata.annotations = app.metadata.annotations;
latestApp.spec = app.spec;
Expand Down Expand Up @@ -1058,7 +1084,7 @@ Are you sure you want to disable auto-sync and rollback application '${this.prop
await services.applications.update(update);
}
await services.applications.rollback(this.props.match.params.name, this.appNamespace, revisionHistory.id);
this.appChanged.next(await services.applications.get(this.props.match.params.name, this.appNamespace));
this.appChanged.next(await services.applications.get(this.props.match.params.name, this.appNamespace, this.props.history.location.pathname));
this.setRollbackPanelVisible(-1);
}
} catch (e) {
Expand Down
4 changes: 2 additions & 2 deletions ui/src/app/applications/components/application-details/application-resource-filter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {ApplicationSetTree, ApplicationTree, HealthStatusCode, HealthStatuses, S
import {AppDetailsPreferences, AppSetDetailsPreferences, services} from '../../../shared/services';
import {Context} from '../../../shared/context';
import {Filter, FiltersGroup} from '../filter/filter';
import {ComparisonStatusIcon, HealthStatusIcon, isInvokedFromAppsCtx} from '../utils';
import {ComparisonStatusIcon, HealthStatusIcon, isInvokedFromAppsPath} from '../utils';
import {resources} from '../resources';
import * as models from '../../../shared/models';

Expand Down Expand Up @@ -161,7 +161,7 @@ export const Filters = (props: AbstractFiltersProps) => {
}))
})}
{namespaces.length > 1 && ResourceFilter({label: 'NAMESPACES', prefix: 'namespace', options: (namespaces || []).filter(l => l && l !== '').map(toOption), field: true})}
{((isInvokedFromAppsCtx(ctx) ? (tree as ApplicationTree).orphanedNodes : []) || []).length > 0 && (
{((isInvokedFromAppsPath(ctx.history.location.pathname) ? (tree as ApplicationTree).orphanedNodes : []) || []).length > 0 && (
<div className={`filter filter__item ${pref.orphanedResources ? 'filter__item--selected' : ''}`}>
<Checkbox
value={!!pref.orphanedResources}
Expand Down
Loading

0 comments on commit 253a432

Please sign in to comment.