Merge pull request #19333 from netbox-community/17405-plugin-icons

Fixes #17405: Added plugin icon to plugin list/detail

Author: bctiemann

netbox/core/plugins.py

@@ -47,6 +47,7 @@ class Plugin:
     The representation of a NetBox plugin in the catalog API.
     """
     id: str = ''
+    icon_url: str = ''
     status: str = ''
     title_short: str = ''
     title_long: str = ''
@@ -193,6 +194,7 @@ def make_plugin_dict():
                 # Populate plugin data
                 plugins[data['config_name']] = Plugin(
                     id=data['id'],
+                    icon_url=data['icon'],
                     status=data['status'],
                     title_short=data['title_short'],
                     title_long=data['title_long'],

netbox/core/tables/plugins.py

@@ -9,6 +9,12 @@
 )
 
 
+PLUGIN_NAME_TEMPLATE = """
+<img class="plugin-icon" src="{{ record.icon_url }}">
+<a href="{% url 'core:plugin' record.config_name %}">{{ record.title_long }}</a>
+"""
+
+
 class PluginVersionTable(BaseTable):
     version = tables.Column(
         verbose_name=_('Version')
@@ -39,8 +45,8 @@ class Meta(BaseTable.Meta):
 
 
 class CatalogPluginTable(BaseTable):
-    title_long = tables.Column(
-        linkify=('core:plugin', [tables.A('config_name')]),
+    title_long = columns.TemplateColumn(
+        template_code=PLUGIN_NAME_TEMPLATE,
         verbose_name=_('Name')
     )
     author = tables.Column(

netbox/project-static/dist/netbox.css

@@ -75,3 +75,15 @@ span.color-label {
 .btn-grey, .btn-gray {
   @extend .btn-secondary;
 }
+
+img.plugin-icon {
+  max-width: 1.4285em;
+  height: auto;
+}
+
+body[data-bs-theme=dark] {
+  // Assuming icon is black/white line art, invert it and tone down brightness
+  img.plugin-icon {
+    filter: grayscale(100%) invert(100%) brightness(80%);
+  }
+}

netbox/project-static/styles/custom/_misc.scss

@@ -4,7 +4,7 @@
 {% load i18n %}
 {% load render_table from django_tables2 %}
 
-{% block title %}{{ plugin.title_long }}{% endblock %}
+{% block title %}<img class="plugin-icon" src="{{ plugin.icon_url }}">&nbsp;{{ plugin.title_long }}{% endblock %}
 
 {% block object_identifier %}
 {% endblock object_identifier %}