Skip to content

Commit

Permalink
fix: Resource list loading slowly due to Sync Wave sorting (#10932)
Browse files Browse the repository at this point in the history 
Signed-off-by: Alexander Matyushentsev <AMatyushentsev@gmail.com>
  • Loading branch information
@alexmt
alexmt committed Oct 13, 2022
1 parent cd171bf commit bff4860
Show file tree
Hide file tree
Showing 13 changed files with 586 additions and 557 deletions.
4 changes: 4 additions & 0 deletions assets/swagger.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7423,6 +7423,10 @@
"status": {
"type": "string"
},
"syncWave": {
"type": "string",
"format": "int64"
},
"version": {
"type": "string"
}
Expand Down
4 changes: 4 additions & 0 deletions controller/state.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import (
hookutil "github.com/argoproj/gitops-engine/pkg/sync/hook"
"github.com/argoproj/gitops-engine/pkg/sync/ignore"
resourceutil "github.com/argoproj/gitops-engine/pkg/sync/resource"
"github.com/argoproj/gitops-engine/pkg/sync/syncwaves"
kubeutil "github.com/argoproj/gitops-engine/pkg/utils/kube"
log "github.com/sirupsen/logrus"
metav1 "k8s.io/apimachinery/pkg/apis/meta/v1"
Expand Down Expand Up @@ -524,6 +525,9 @@ func (m *appStateManager) CompareAppState(app *v1alpha1.Application, project *ap
Hook: hookutil.IsHook(obj),
RequiresPruning: targetObj == nil && liveObj != nil && isSelfReferencedObj,
}
if targetObj != nil {
resState.SyncWave = int64(syncwaves.Wave(targetObj))
}

var diffResult diff.DiffResult
if i < len(diffResults.Diffs) {
Expand Down
3 changes: 3 additions & 0 deletions manifests/core-install.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1845,6 +1845,9 @@ spec:
description: SyncStatusCode is a type which represents possible
comparison results
type: string
syncWave:
format: int64
type: integer
version:
type: string
type: object
Expand Down
3 changes: 3 additions & 0 deletions manifests/crds/application-crd.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1844,6 +1844,9 @@ spec:
description: SyncStatusCode is a type which represents possible
comparison results
type: string
syncWave:
format: int64
type: integer
version:
type: string
type: object
Expand Down
3 changes: 3 additions & 0 deletions manifests/ha/install.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1845,6 +1845,9 @@ spec:
description: SyncStatusCode is a type which represents possible
comparison results
type: string
syncWave:
format: int64
type: integer
version:
type: string
type: object
Expand Down
3 changes: 3 additions & 0 deletions manifests/install.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1845,6 +1845,9 @@ spec:
description: SyncStatusCode is a type which represents possible
comparison results
type: string
syncWave:
format: int64
type: integer
version:
type: string
type: object
Expand Down
1,001 changes: 513 additions & 488 deletions pkg/apis/application/v1alpha1/generated.pb.go
View file

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions pkg/apis/application/v1alpha1/generated.proto
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 6 additions & 0 deletions pkg/apis/application/v1alpha1/openapi_generated.go
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions pkg/apis/application/v1alpha1/types.go
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1185,6 +1185,7 @@ type ResourceStatus struct {
Health *HealthStatus `json:"health,omitempty" protobuf:"bytes,7,opt,name=health"`
Hook bool `json:"hook,omitempty" protobuf:"bytes,8,opt,name=hook"`
RequiresPruning bool `json:"requiresPruning,omitempty" protobuf:"bytes,9,opt,name=requiresPruning"`
SyncWave int64 `json:"syncWave,omitempty" protobuf:"bytes,10,opt,name=syncWave"`
}

// GroupKindVersion returns the GVK schema type for given resource status
Expand Down
109 changes: 42 additions & 67 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 @@ -211,6 +211,7 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
resource.health = status.health;
resource.status = status.status;
resource.hook = status.hook;
resource.syncWave = status.syncWave;
resource.requiresPruning = status.requiresPruning;
}
resources.set(node.uid || AppUtils.nodeKey(node), resource);
Expand Down Expand Up @@ -450,75 +451,49 @@ export class ApplicationDetails extends React.Component<RouteComponentProps<{app
quickStarts={node => AppUtils.renderResourceButtons(node, application, tree, this.appContext, this.appChanged)}
/>
)) || (
<DataLoader
input={{filteredRes: filteredRes.map(res => AppUtils.nodeKey(res))}}
load={async () => {
const liveStatePromises = filteredRes.map(async resource => {
const resourceRow: any = {...resource, group: resource.group || ''};
const liveState =
typeof resource.group !== 'undefined' &&
(await services.applications
.getResource(application.metadata.name, application.metadata.namespace, resource)
.catch(() => null));
if (liveState?.metadata?.annotations?.[models.AnnotationHookKey]) {
resourceRow.syncOrder = liveState?.metadata.annotations[models.AnnotationHookKey];
if (liveState?.metadata?.annotations?.[models.AnnotationSyncWaveKey]) {
resourceRow.syncOrder =
resourceRow.syncOrder + ': ' + liveState?.metadata.annotations[models.AnnotationSyncWaveKey];
}
} else {
resourceRow.syncOrder = '-';
}
return resourceRow;
});
return await Promise.all(liveStatePromises);
}}>
{(filteredResWithSyncInfo: any[]) => (
<div>
<DataLoader load={() => services.viewPreferences.getPreferences()}>
{viewPref => (
<ApplicationDetailsFilters
pref={pref}
tree={tree}
onSetFilter={setFilter}
onClearFilter={clearFilter}
collapsed={viewPref.hideSidebar}
resourceNodes={filteredResWithSyncInfo}
/>
)}
</DataLoader>
{(filteredResWithSyncInfo.length > 0 && (
<Paginate
page={this.state.page}
data={filteredResWithSyncInfo}
onPageChange={page => this.setState({page})}
preferencesKey='application-details'>
{data => (
<ApplicationResourceList
onNodeClick={fullName => this.selectNode(fullName)}
resources={data}
nodeMenu={node =>
AppUtils.renderResourceMenu(
{...node, root: node},
application,
tree,
this.appContext,
this.appChanged,
() => this.getApplicationActionMenu(application, false)
)
}
/>
)}
</Paginate>
)) || (
<EmptyState icon='fa fa-search'>
<h4>No resources found</h4>
<h5>Try to change filter criteria</h5>
</EmptyState>
<div>
<DataLoader load={() => services.viewPreferences.getPreferences()}>
{viewPref => (
<ApplicationDetailsFilters
pref={pref}
tree={tree}
onSetFilter={setFilter}
onClearFilter={clearFilter}
collapsed={viewPref.hideSidebar}
resourceNodes={filteredRes}
/>
)}
</DataLoader>
{(filteredRes.length > 0 && (
<Paginate
page={this.state.page}
data={filteredRes}
onPageChange={page => this.setState({page})}
preferencesKey='application-details'>
{data => (
<ApplicationResourceList
onNodeClick={fullName => this.selectNode(fullName)}
resources={data}
nodeMenu={node =>
AppUtils.renderResourceMenu(
{...node, root: node},
application,
tree,
this.appContext,
this.appChanged,
() => this.getApplicationActionMenu(application, false)
)
}
/>
)}
</div>
</Paginate>
)) || (
<EmptyState icon='fa fa-search'>
<h4>No resources found</h4>
<h5>Try to change filter criteria</h5>
</EmptyState>
)}
</DataLoader>
</div>
)}
</div>
<SlidingPanel isShown={this.state.groupedResources.length > 0} onClose={() => this.closeGroupedNodesPanel()}>
Expand Down
2 changes: 1 addition & 1 deletion ui/src/app/applications/components/application-details/application-resource-list.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,7 +55,7 @@ export const ApplicationResourceList = ({
)}
</div>
<div className='columns small-2 xxxlarge-2'>{[res.group, res.kind].filter(item => !!item).join('/')}</div>
<div className='columns small-1 xxxlarge-2'>{res.syncOrder}</div>
<div className='columns small-1 xxxlarge-2'>{res.syncWave || '-'}</div>
<div className='columns small-3 xxxlarge-3'>{res.namespace}</div>
<div className='columns small-2 xxxlarge-2'>
{res.health && (
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 @@ -312,7 +312,7 @@ export interface ResourceStatus {
health: HealthStatus;
hook?: boolean;
requiresPruning?: boolean;
syncOrder?: string;
syncWave?: number;
}

export interface ResourceRef {
Expand Down

0 comments on commit bff4860

Please sign in to comment.