feat(ui): support custom icons (#20864)

Signed-off-by: Michael Crenshaw <[email protected]>

Author: crenshaw-dev

Makefile

@@ -261,8 +261,12 @@ clidocsgen:
 actionsdocsgen:
 	hack/generate-actions-list.sh
 
+.PHONY: resourceiconsgen
+resourceiconsgen:
+	hack/generate-icons-typescript.sh
+
 .PHONY: codegen-local
-codegen-local: mod-vendor-local mockgen gogen protogen clientgen openapigen clidocsgen actionsdocsgen manifests-local notification-docs notification-catalog
+codegen-local: mod-vendor-local mockgen gogen protogen clientgen openapigen clidocsgen actionsdocsgen resourceiconsgen manifests-local notification-docs notification-catalog
 	rm -rf vendor/
 
 .PHONY: codegen-local-fast

docs/developer-guide/custom-resource-icons.md

@@ -0,0 +1,18 @@
+The Argo CD UI displays icons for various Kubernetes resource types to help users quickly identify them. Argo CD 
+includes a set of built-in icons for common resource types.
+
+You can contribute additional icons for custom resource types by following these steps:
+
+1. Ensure the license is compatible with Apache 2.0.
+2. Add the icon file to the `ui/src/assets/images/resources/<group>/icon.svg` path in the Argo CD repository.
+3. Modify the SVG to use the correct color, `#8fa4b1`.
+4. Run `make resourceiconsgen` to update the generated typescript file that lists all available icons.
+5. Create a pull request to the Argo CD repository with your changes.
+
+`<group>` is the API group of the custom resource. For example, if you are adding an icon for a custom resource with the 
+API group `example.com`, you would place the icon at `ui/src/assets/images/resources/example.com/icon.svg`.
+
+If you want the same icon to apply to resources in multiple API groups with the same suffix, you can create a directory
+prefixed with an underscore. The underscore will be interpreted as a wildcard. For example, to apply the same icon to
+resources in the `example.com` and `another.example.com` API groups, you would place the icon at
+`ui/src/assets/images/resources/_.example.com/icon.svg`.

hack/generate-icons-typescript.sh

@@ -0,0 +1,15 @@
+#!/usr/bin/env bash
+
+# Users may configure custom resource icons in resource_customizations. This script generates a list of those icons so
+# that the UI knows which icons are available.
+
+{
+  echo "// Code generated by hack/generate-icons-typescript.sh; DO NOT EDIT.";
+  echo "/* eslint-disable prettier/prettier */";
+  echo "";
+  echo "// resourceIconGroups is a map of resource kind globs to whether or not a custom icon exists for that kind.";
+  echo "// Each glob corresponds to a directory under ui/src/assets/images/resources, where any asterisk is represented as an underscore (_).";
+  echo "export const resourceIconGroups = {";
+  find ui/src/assets/images/resources -name icon.svg | sort | sed "s/ui\/src\/assets\/images\/resources\//    '/" | sed "s/\/icon.svg/': true,/" | sed 's/_/*/';
+  echo "};";
+} > ui/src/app/applications/components/resource-customizations.ts

mkdocs.yml

@@ -229,6 +229,7 @@ nav:
     - developer-guide/extensions/proxy-extensions.md
   - developer-guide/faq.md
   - developer-guide/tilt.md
+  - developer-guide/custom-resource-icons.md
 - faq.md
 - security_considerations.md
 - Support: SUPPORT.md

ui/src/app/applications/components/application-details/application-resource-list.tsx

@@ -175,7 +175,7 @@ export const ApplicationResourceList = (props: ApplicationResourceListProps) =>
                                 <div className='row'>
                                     <div className='columns small-1 xxxlarge-1'>
                                         <div className='application-details__resource-icon'>
-                                            <ResourceIcon kind={res.kind} />
+                                            <ResourceIcon group={res.group} kind={res.kind} />
                                             <br />
                                             <div>{ResourceLabel({kind: res.kind})}</div>
                                         </div>

ui/src/app/applications/components/application-pod-view/pod-view.tsx

@@ -126,7 +126,7 @@ export function PodView(props: PodViewProps) {
                                                 style={group.kind === 'node' ? {} : {cursor: 'pointer'}}>
                                                 <div style={{display: 'flex', alignItems: 'center'}}>
                                                     <div style={{marginRight: '10px'}}>
-                                                        <ResourceIcon kind={group.kind || 'Unknown'} />
+                                                        <ResourceIcon group={group.group} kind={group.kind || 'Unknown'} />
                                                         <br />
                                                         {<div style={{textAlign: 'center'}}>{ResourceLabel({kind: group.kind})}</div>}
                                                     </div>

ui/src/app/applications/components/application-resource-tree/application-resource-tree.tsx

@@ -284,7 +284,7 @@ function renderGroupedNodes(props: ApplicationResourceTreeProps, node: {count: n
         <React.Fragment>
             <div className='application-resource-tree__node' style={{left: node.x, top: node.y, width: node.width, height: node.height}}>
                 <div className='application-resource-tree__node-kind-icon'>
-                    <ResourceIcon kind={node.kind} />
+                    <ResourceIcon group={node.group} kind={node.kind} />
                     <br />
                     <div className='application-resource-tree__node-kind'>{ResourceLabel({kind: node.kind})}</div>
                 </div>
@@ -462,7 +462,7 @@ function renderPodGroup(props: ApplicationResourceTreeProps, id: string, node: R
                     className={classNames('application-resource-tree__node-kind-icon', {
                         'application-resource-tree__node-kind-icon--big': rootNode
                     })}>
-                    <ResourceIcon kind={node.kind || 'Unknown'} />
+                    <ResourceIcon group={node.group} kind={node.kind || 'Unknown'} />
                     <br />
                     {!rootNode && <div className='application-resource-tree__node-kind'>{ResourceLabel({kind: node.kind})}</div>}
                 </div>
@@ -746,7 +746,7 @@ function renderResourceNode(props: ApplicationResourceTreeProps, id: string, nod
                 className={classNames('application-resource-tree__node-kind-icon', {
                     'application-resource-tree__node-kind-icon--big': rootNode
                 })}>
-                <ResourceIcon kind={node.kind} />
+                <ResourceIcon group={node.group} kind={node.kind} />
                 <br />
                 {!rootNode && <div className='application-resource-tree__node-kind'>{ResourceLabel({kind: node.kind})}</div>}
             </div>

ui/src/app/applications/components/resource-customizations.ts

@@ -0,0 +1,26 @@
+// Code generated by hack/generate-icons-typescript.sh; DO NOT EDIT.
+/* eslint-disable prettier/prettier */
+
+// resourceIconGroups is a map of resource kind globs to whether or not a custom icon exists for that kind.
+// Each glob corresponds to a directory under ui/src/assets/images/resources, where any asterisk is represented as an underscore (_).
+export const resourceIconGroups = {
+    '*.crossplane.io': true,
+    '*.fluxcd.io': true,
+    '*.knative.dev': true,
+    'cassandra.rook.io': true,
+    'cert-manager.io': true,
+    'core.spinkube.dev': true,
+    'external-secrets.io': true,
+    'flagger.app': true,
+    'install.istio.io': true,
+    'jaegertracing.io': true,
+    'k8s.keycloak.org': true,
+    'kafka.strimzi.io': true,
+    'keda.sh': true,
+    'kubevirt.io': true,
+    'kyverno.io': true,
+    'opentelemetry.io': true,
+    'projectcontour.io': true,
+    'work.karmada.io': true,
+    'zookeeper.pravega.io': true,
+};

ui/src/app/applications/components/resource-details/resource-details.tsx

@@ -291,7 +291,7 @@ export const ResourceDetails = (props: ResourceDetailsProps) => {
                         <React.Fragment>
                             <div className='resource-details__header'>
                                 <div style={{display: 'flex', flexDirection: 'column', marginRight: '15px', alignItems: 'center', fontSize: '12px'}}>
-                                    <ResourceIcon kind={selectedNode.kind} />
+                                    <ResourceIcon group={selectedNode.group} kind={selectedNode.kind} />
                                     {ResourceLabel({kind: selectedNode.kind})}
                                 </div>
                                 <h1>{selectedNode.name}</h1>

ui/src/app/applications/components/resource-icon.tsx

@@ -1,17 +1,26 @@
 import * as React from 'react';
 import {resourceIcons} from './resources';
+import {resourceIconGroups as resourceCustomizations} from './resource-customizations';
+import * as minimatch from 'minimatch';
 
-export const ResourceIcon = ({kind, customStyle}: {kind: string; customStyle?: React.CSSProperties}) => {
+export const ResourceIcon = ({group, kind, customStyle}: {group: string; kind: string; customStyle?: React.CSSProperties}) => {
     if (kind === 'node') {
         return <img src={'assets/images/infrastructure_components/' + kind + '.svg'} alt={kind} style={{padding: '2px', width: '40px', height: '32px', ...customStyle}} />;
     }
-    const i = resourceIcons.get(kind);
-    if (i !== undefined) {
-        return <img src={'assets/images/resources/' + i + '.svg'} alt={kind} style={{padding: '2px', width: '40px', height: '32px', ...customStyle}} />;
-    }
     if (kind === 'Application') {
         return <i title={kind} className={`icon argo-icon-application`} style={customStyle} />;
     }
+    if (!group) {
+        const i = resourceIcons.get(kind);
+        if (i !== undefined) {
+            return <img src={'assets/images/resources/' + i + '.svg'} alt={kind} style={{padding: '2px', width: '40px', height: '32px', ...customStyle}} />;
+        }
+    } else {
+        const matchedGroup = matchGroupToResource(group);
+        if (matchedGroup) {
+            return <img src={`assets/images/resources/${matchedGroup}/icon.svg`} alt={kind} style={{paddingBottom: '2px', width: '40px', height: '32px', ...customStyle}} />;
+        }
+    }
     const initials = kind.replace(/[a-z]/g, '');
     const n = initials.length;
     const style: React.CSSProperties = {
@@ -32,3 +41,22 @@ export const ResourceIcon = ({kind, customStyle}: {kind: string; customStyle?: R
         </div>
     );
 };
+
+// Utility function to match group with possible wildcards in resourceCustomizations. If found, returns the matched key
+// as a path component (with '*' replaced by '_' if necessary), otherwise returns an empty string.
+function matchGroupToResource(group: string): string {
+    // Check for an exact match
+    if (group in resourceCustomizations) {
+        return group;
+    }
+
+    // Loop over the map keys to find a match using minimatch
+    for (const key in resourceCustomizations) {
+        if (key.includes('*') && minimatch(group, key)) {
+            return key.replace(/\*/g, '_');
+        }
+    }
+
+    // Return an empty string if no match is found
+    return '';
+}