Merge pull request #4468 from aadhil2k4/issue_4273

frontend: Support apiGroup + kind for registerKindIcon

Author: illume

frontend/src/components/resourceMap/graphViewSlice.tsx

@@ -75,8 +75,13 @@ export const graphViewSlice = createSlice({
       }
       state.graphSources.push(action.payload);
     },
-    addKindIcon(state, action: PayloadAction<{ kind: string; definition: IconDefinition }>) {
-      state.kindIcons[action.payload.kind] = action.payload.definition;
+    addKindIcon(
+      state,
+      action: PayloadAction<{ kind: string; definition: IconDefinition; apiGroup?: string }>
+    ) {
+      const { kind, definition, apiGroup } = action.payload;
+      const key = apiGroup ? `${apiGroup}/${kind}` : kind;
+      state.kindIcons[key] = definition;
     },
     setGlance(state, action: PayloadAction<Glance>) {
       state.glances[action.payload.id] = action.payload;

frontend/src/components/resourceMap/kubeIcon/KubeIcon.tsx

@@ -48,39 +48,54 @@ import SvcIcon from './img/svc.svg?react';
 import UserIcon from './img/user.svg?react';
 import VolIcon from './img/vol.svg?react';
 
-const kindToIcon = {
-  ClusterRole: CRoleIcon,
-  ClusterRoleBinding: CrbIcon,
-  CronJob: CronjobIcon,
-  DaemonSet: DsIcon,
-  Group: GroupIcon,
-  Ingress: IngIcon,
-  LimitRange: LimitsIcon,
+const kindToIcon: Record<string, React.FC<any>> = {
+  // core group
   Namespace: NsIcon,
-  PodSecurityPolicy: PspIcon,
-  PersistentVolumeClaim: PvcIcon,
-  RoleBinding: RbIcon,
-  ReplicaSet: RsIcon,
-  StorageClass: ScIcon,
-  StatefulSet: StsIcon,
-  User: UserIcon,
-  ConfigMap: CmIcon,
-  CustomResourceDefinition: CrdIcon,
-  Deployment: DeployIcon,
-  Endpoint: EpIcon,
+  Pod: PodIcon,
+  Service: SvcIcon,
   Endpoints: EpIcon,
+  Endpoint: EpIcon,
   EndpointSlice: EpIcon,
-  HorizontalPodAutoscaler: HpaIcon,
-  Job: JobIcon,
-  NetworkPolicy: NetpolIcon,
-  Pod: PodIcon,
+  ConfigMap: CmIcon,
+  Secret: SecretIcon,
   PersistentVolume: PvIcon,
-  ResourceQuota: QuotaIcon,
-  Role: RoleIcon,
+  PodSecurityPolicy: PspIcon,
+  PersistentVolumeClaim: PvcIcon,
   ServiceAccount: SaIcon,
-  Secret: SecretIcon,
-  Service: SvcIcon,
+  ResourceQuota: QuotaIcon,
+  LimitRange: LimitsIcon,
   Volume: VolIcon,
+  User: UserIcon,
+  Group: GroupIcon,
+
+  // apps
+  'apps/Deployment': DeployIcon,
+  'apps/ReplicaSet': RsIcon,
+  'apps/StatefulSet': StsIcon,
+  'apps/DaemonSet': DsIcon,
+
+  // batch
+  'batch/Job': JobIcon,
+  'batch/CronJob': CronjobIcon,
+
+  // rbac
+  'rbac.authorization.k8s.io/Role': RoleIcon,
+  'rbac.authorization.k8s.io/RoleBinding': RbIcon,
+  'rbac.authorization.k8s.io/ClusterRole': CRoleIcon,
+  'rbac.authorization.k8s.io/ClusterRoleBinding': CrbIcon,
+
+  // networking
+  'networking.k8s.io/Ingress': IngIcon,
+  'networking.k8s.io/NetworkPolicy': NetpolIcon,
+
+  // autoscaling
+  'autoscaling/HorizontalPodAutoscaler': HpaIcon,
+
+  // storage
+  'storage.k8s.io/StorageClass': ScIcon,
+
+  // apiextensions
+  'apiextensions.k8s.io/CustomResourceDefinition': CrdIcon,
 } as const;
 
 const kindGroups = {
@@ -141,26 +156,37 @@ export const getKindGroupColor = (group: keyof typeof kindGroupColors) =>
  * https://github.com/kubernetes/community/tree/master/icons
  *
  * @param params.kind - Resource kind
+ * @param params.apiGroup - Resource API group
  * @param params.width - width in css units
  * @param params.height - width in css units
  * @returns
  */
 export function KubeIcon({
   kind,
+  apiGroup,
   width,
   height,
 }: {
-  kind: keyof typeof kindToIcon;
+  kind: string;
+  apiGroup?: string;
   width?: string;
   height?: string;
 }) {
   const pluginDefinedIcons = useTypedSelector(state => state.graphView.kindIcons);
 
-  const IconComponent = kindToIcon[kind] ?? kindToIcon['Pod'];
-  const icon = pluginDefinedIcons[kind]?.icon ?? (
+  const apiGroupKey = apiGroup ? `${apiGroup}/${kind}` : null;
+
+  const pluginIcon = (apiGroupKey && pluginDefinedIcons[apiGroupKey]) || pluginDefinedIcons[kind];
+
+  const IconComponent =
+    (apiGroupKey && kindToIcon[apiGroupKey as keyof typeof kindToIcon]) ||
+    kindToIcon[kind as keyof typeof kindToIcon] ||
+    kindToIcon['Pod'];
+
+  const icon = pluginIcon?.icon ?? (
     <IconComponent style={{ scale: '1.1', width: '100%', height: '100%' }} />
   );
-  const color = pluginDefinedIcons[kind]?.color ?? getKindColor(kind);
+  const color = pluginIcon?.color ?? getKindColor(kind);
 
   return (
     <Box

frontend/src/components/resourceMap/nodes/GroupNode.tsx

@@ -50,6 +50,13 @@ export const GroupNodeComponent = memo(({ id }: { id: string }) => {
   const graph = useGraphView();
   const node = useNode(id);
 
+  const kubeObject = node?.kubeObject;
+
+  const apiGroup =
+    kubeObject?.jsonData?.apiVersion && kubeObject.jsonData.apiVersion.includes('/')
+      ? kubeObject.jsonData.apiVersion.split('/')[0]
+      : 'core';
+
   const handleSelect = () => {
     graph.setNodeSelection(id);
   };
@@ -68,7 +75,7 @@ export const GroupNodeComponent = memo(({ id }: { id: string }) => {
       {(node?.label || node?.subtitle) && (
         <Label title={node?.label}>
           {node?.kubeObject ? (
-            <KubeIcon kind={node.kubeObject.kind} width="24px" height="24px" />
+            <KubeIcon kind={node.kubeObject.kind} apiGroup={apiGroup} width="24px" height="24px" />
           ) : (
             node?.icon ?? null
           )}

frontend/src/components/resourceMap/nodes/KubeObjectNode.tsx

@@ -151,6 +151,11 @@ export const KubeObjectNodeComponent = memo(({ id }: NodeProps) => {
   const mainNode = node?.nodes ? getMainNode(node.nodes) : undefined;
   const kubeObject = node?.kubeObject ?? mainNode?.kubeObject;
 
+  const apiGroup =
+    kubeObject?.jsonData?.apiVersion && kubeObject.jsonData.apiVersion.includes('/')
+      ? kubeObject.jsonData.apiVersion.split('/')[0]
+      : 'core';
+
   const isSelected = id === graph.nodeSelection;
   const isCollapsed = node?.nodes?.length ? node?.collapsed : true;
 
@@ -186,7 +191,7 @@ export const KubeObjectNodeComponent = memo(({ id }: NodeProps) => {
   }, [isHovered]);
 
   const icon = kubeObject ? (
-    <KubeIcon width="42px" height="42px" kind={kubeObject.kind} />
+    <KubeIcon width="42px" height="42px" kind={kubeObject.kind} apiGroup={apiGroup} />
   ) : (
     node?.icon ?? null
   );
@@ -207,7 +212,7 @@ export const KubeObjectNodeComponent = memo(({ id }: NodeProps) => {
       cluster: node.kubeObject?.cluster,
       hideTitleInHeader: true,
       icon: node.kubeObject ? (
-        <KubeIcon kind={node.kubeObject.kind} width="100%" height="100%" />
+        <KubeIcon kind={node.kubeObject.kind} apiGroup={apiGroup} width="100%" height="100%" />
       ) : null,
       title: node.label ?? node.kubeObject?.metadata?.name,
       content: <GraphNodeDetails node={node} />,

frontend/src/plugin/registry.tsx

@@ -828,19 +828,33 @@ export function registerMapSource(source: GraphSource) {
 /**
  * Register Icon for a resource kind
  *
+ * By default, icons are matched only by `kind`.
+ * Optionally, `apiGroup` can be provided to differentiate resources that share the same kind across different API groups.
+ *
+ * When `apiGroup` is provided, Headlamp will:
+ * 1. First try to match `${apiGroup}/${kind}`.
+ * 2. Fall back to `kind` if no match is found.
+ *
  * @param kind - Resource kind
  * @param {IconDefinition} definition - icon definition
  * @param definition.icon - React Element of the icon
  * @param definition.color - Color for the icon, optional
+ * @param apiGroup - Kubernetes API group, optional
  *
  * @example
  *
+ * Kind only Matching
  * ```tsx
  * registerKindIcon("MyCustomResource", { icon: <MyIcon />, color: "#FF0000" })
  * ```
+ *
+ * Match only networking service
+ * ```tsx
+ * registerKindIcon("Service", { icon: <NetworkingServiceIcon /> }, "networking.k8s.io");
+ * ```
  */
-export function registerKindIcon(kind: string, definition: IconDefinition) {
-  store.dispatch(graphViewSlice.actions.addKindIcon({ kind, definition }));
+export function registerKindIcon(kind: string, definition: IconDefinition, apiGroup?: string) {
+  store.dispatch(graphViewSlice.actions.addKindIcon({ kind, definition, apiGroup }));
 }
 
 /**