feat: add Relations tab with force-directed resource dependency graph (#96)

Add a new "Relations" tab after "Images" that visualizes resource
dependencies within a Helm release as an interactive force-directed graph.
Detects relationships via ownerReferences, *Ref fields, volumes, env refs,
service selectors, ingress backends, and RBAC bindings. External resources
appear as dashed oval ghost nodes. Color-coded by resource category.

Closes #96

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Andrei Pohilko
2026-03-17 17:58:00 +00:00
parent 443207191d
commit cfc28cf3a0
10 changed files with 7717 additions and 0 deletions

View File

@@ -96,6 +96,35 @@ export function useGetImages(ns: string, name: string) {
});
}
export interface RelationNode {
id: string;
kind: string;
name: string;
inRelease: boolean;
}
export interface RelationEdge {
source: string;
target: string;
type: string;
}
export interface RelationGraph {
nodes: RelationNode[];
edges: RelationEdge[];
}
export function useGetRelations(ns: string, name: string) {
return useQuery<RelationGraph>({
queryKey: ["relations", ns, name],
queryFn: () =>
apiService.fetchWithSafeDefaults<RelationGraph>({
url: `/api/helm/releases/${ns}/${name}/relations`,
fallback: { nodes: [], edges: [] },
}),
});
}
// List of installed k8s resources for this release
export function useGetResources(ns: string, name: string, enabled?: boolean) {
return useQuery<StructuredResources[]>({