Add icons to dashboard

milesmcc · Nov 26, 2020 · cc094fe · cc094fe
1 parent ac5c743
commit cc094fe
Show file tree

Hide file tree

Showing 8 changed files with 67 additions and 28 deletions.
diff --git a/TEMPLATE.env b/TEMPLATE.env
@@ -70,3 +70,6 @@ SHOW_SHYNET_VERSION=True
 # that you have a separate queue consumer running somewhere via `celeryworker.sh`.
 # CELERY_TASK_ALWAYS_EAGER=False
 # CELERY_BROKER_URL=redis://redis.default.svc.cluster.local/1
+
+# Should Shynet show third-party icons in the dashboard?
+SHOW_THIRD_PARTY_ICONS=True
diff --git a/shynet/dashboard/templates/base.html b/shynet/dashboard/templates/base.html
@@ -41,7 +41,7 @@
 
         {% for service in user.owning_services.all %}
         {% url 'dashboard:service' service.uuid as url %}
-        {% include 'dashboard/includes/sidebar_portal.html' with label=service.name|truncatechars:20 url=url %}
+        {% include 'dashboard/includes/sidebar_portal.html' with label=service.name|truncatechars:20 url=url icon=service.link|iconify %}
         {% endfor %}
 
         {% endif %}

diff --git a/shynet/dashboard/templates/dashboard/includes/service_overview.html b/shynet/dashboard/templates/dashboard/includes/service_overview.html
@@ -4,7 +4,8 @@
     {% with stats=object.stats %}
     <div class="p-4 md:flex justify-between">
         <div class="flex items-center mb-4 md:mb-0">
-            <h3 class="heading text-xl md:text-2xl mr-2 mb-1 text-urge-600">
+            <h3 class="heading text-xl md:text-2xl mr-2 mb-1 text-urge-600 flex items-center">
+                {{object.link|iconify}}
                 {{object.name}}
             </h3>
             {% include 'dashboard/includes/stats_status_chip.html' %}

diff --git a/shynet/dashboard/templates/dashboard/includes/sidebar_portal.html b/shynet/dashboard/templates/dashboard/includes/sidebar_portal.html
@@ -1,6 +1,6 @@
 {% load helpers %}
 
 <div>
-    <a class="portal !low {% if request.get_full_path|startswith:url %}~urge active bg-neutral-100{% endif %}"
-        {% if disable_turbolinks %}data-turbolinks="false"{% endif %} href="{{url}}">{{label}}</a>
+    <a class="portal !low {% if request.get_full_path|startswith:url %}~urge active bg-neutral-100{% endif %} flex items-center"
+        {% if disable_turbolinks %}data-turbolinks="false"{% endif %} href="{{url}}">{{icon}} {{label}}</a>
 </div>
diff --git a/shynet/dashboard/templates/dashboard/pages/service.html b/shynet/dashboard/templates/dashboard/pages/service.html
@@ -17,18 +17,18 @@
         <p class="label text-gray-400">Sessions</p>
         <p class="heading">
             {{stats.session_count|intcomma}}
-            <div>
-                {% compare stats.compare.session_count stats.session_count "UP" classes=classes good_classes=good_classes bad_classes=bad_classes neutral_classes=neutral_classes %}
-            </div>
+        <div>
+            {% compare stats.compare.session_count stats.session_count "UP" classes=classes good_classes=good_classes bad_classes=bad_classes neutral_classes=neutral_classes %}
+        </div>
         </p>
     </article>
     <article class="">
         <p class="label text-gray-400">Hits</p>
         <p class="heading">
             {{stats.hit_count|intcomma}}
-            <div>
-                {% compare stats.compare.hit_count stats.hit_count "UP" classes=classes good_classes=good_classes bad_classes=bad_classes neutral_classes=neutral_classes %}
-            </div>
+        <div>
+            {% compare stats.compare.hit_count stats.hit_count "UP" classes=classes good_classes=good_classes bad_classes=bad_classes neutral_classes=neutral_classes %}
+        </div>
         </p>
     </article>
     <article class="">
@@ -39,9 +39,9 @@
             {% else %}
             ?
             {% endif %}
-            <div>
-                {% compare stats.compare.avg_load_time stats.avg_load_time "DOWN" classes=classes good_classes=good_classes bad_classes=bad_classes neutral_classes=neutral_classes %}
-            </div>
+        <div>
+            {% compare stats.compare.avg_load_time stats.avg_load_time "DOWN" classes=classes good_classes=good_classes bad_classes=bad_classes neutral_classes=neutral_classes %}
+        </div>
         </p>
     </article>
     <article class="">
@@ -52,9 +52,9 @@
             {% else %}
             ?
             {% endif %}
-            <div>
-                {% compare stats.compare.bounce_rate_pct stats.bounce_rate_pct "DOWN" classes=classes good_classes=good_classes bad_classes=bad_classes neutral_classes=neutral_classes %}
-            </div>
+        <div>
+            {% compare stats.compare.bounce_rate_pct stats.bounce_rate_pct "DOWN" classes=classes good_classes=good_classes bad_classes=bad_classes neutral_classes=neutral_classes %}
+        </div>
         </p>
     </article>
     <article class="">
@@ -65,9 +65,9 @@
             {% else %}
             ?
             {% endif %}
-            <div>
-                {% compare stats.compare.avg_session_duration stats.avg_session_duration "UP" classes=classes good_classes=good_classes bad_classes=bad_classes neutral_classes=neutral_classes %}
-            </div>
+        <div>
+            {% compare stats.compare.avg_session_duration stats.avg_session_duration "UP" classes=classes good_classes=good_classes bad_classes=bad_classes neutral_classes=neutral_classes %}
+        </div>
         </p>
     </article>
     <article class="">
@@ -78,9 +78,9 @@
             {% else %}
             ?
             {% endif %}
-            <div>
-                {% compare stats.compare.avg_hits_per_session stats.avg_hits_per_session "UP" classes=classes good_classes=good_classes bad_classes=bad_classes neutral_classes=neutral_classes %}
-            </div>
+        <div>
+            {% compare stats.compare.avg_hits_per_session stats.avg_hits_per_session "UP" classes=classes good_classes=good_classes bad_classes=bad_classes neutral_classes=neutral_classes %}
+        </div>
         </p>
     </article>
     {% endwith %}
@@ -166,7 +166,7 @@
             <tbody>
                 {% for os in stats.operating_systems %}
                 <tr>
-                    <td>{{os.os|default:"Unknown"}}</td>
+                    <td class="flex items-center">{{os.os|iconify}}<span>{{os.os|default:"Unknown"}}</span></td>
                     <td class="rf">{{os.count|intcomma}}</td>
                 </tr>
                 {% empty %}
@@ -188,7 +188,8 @@
             <tbody>
                 {% for browser in stats.browsers %}
                 <tr>
-                    <td>{{browser.browser|default:"Unknown"}}</td>
+                    <td class="flex items-center">
+                        {{browser.browser|iconify}}<span>{{browser.browser|default:"Unknown"}}</span></td>
                     <td class="rf">{{browser.count|intcomma}}</td>
                 </tr>
                 {% empty %}
@@ -225,7 +226,8 @@
 <div class="card ~neutral !low limited-height py-2">
     {% include 'dashboard/includes/session_list.html' %}
     <hr class="sep h-8">
-    <a href="{% url 'dashboard:service_session_list' service.uuid %}" class="button ~neutral w-auto mb-2">View more sessions
+    <a href="{% url 'dashboard:service_session_list' service.uuid %}" class="button ~neutral w-auto mb-2">View more
+        sessions
         &rarr;</a>
 </div>
 {% endblock %}
diff --git a/shynet/dashboard/templates/dashboard/service_base.html b/shynet/dashboard/templates/dashboard/service_base.html
@@ -8,6 +8,7 @@
 <div class="md:flex justify-between items-center" id="heading">
     <a class="flex items-center mb-4 md:mb-0" href="{% url 'dashboard:service' object.uuid %}">
         <h3 class="heading leading-none mr-4">
+            {{object.link|iconify}}
             {{object.name}}
         </h3>
         <div class='text-3xl'>

diff --git a/shynet/dashboard/templatetags/helpers.py b/shynet/dashboard/templatetags/helpers.py
@@ -84,8 +84,7 @@ def percent_change_display(start, end):
 
 @register.inclusion_tag("dashboard/includes/sidebar_footer.html")
 def sidebar_footer():
-    return {"version": settings.VERSION if settings.SHOW_SHYNET_VERSION
-            else ""}
+    return {"version": settings.VERSION if settings.SHOW_SHYNET_VERSION else ""}
 
 
 @register.inclusion_tag("dashboard/includes/stat_comparison.html")
@@ -116,12 +115,42 @@ def startswith(text, starts):
     return False
 
 
+@register.filter
+def iconify(text):
+    if not settings.SHOW_THIRD_PARTY_ICONS:
+        return ""
+
+    text = text.lower()
+    icons = {
+        "chrome": "chrome.com",
+        "safari": "www.apple.com",
+        "windows": "windows.com",
+        "edge": "microsoft.com",
+        "firefox": "firefox.com",
+        "opera": "opera.com",
+        "unknown": "example.com",
+    }
+
+    domain = None
+    if text.startswith("http"):
+        domain = urlparse(text).netloc
+    elif text in icons:
+        domain = icons[text]
+    else:
+        # This fallback works better than you'd think!
+        domain = text + ".com"
+
+    return SafeString(
+        f'<span class="icon mr-1"><img src="https://icons.duckduckgo.com/ip3/{domain}.ico"></span>'
+    )
+
+
 @register.filter
 def urldisplay(url):
     if url.startswith("http"):
         display_url = url.replace("http://", "").replace("https://", "")
         return SafeString(
-            f"<a href='{url}' title='{url}' rel='nofollow'>{escape(display_url if len(display_url) < 40 else display_url[:40] + '...')}</a>"
+            f"<a href='{url}' title='{url}' rel='nofollow' class='flex items-center'>{iconify(url)} {escape(display_url if len(display_url) < 40 else display_url[:40] + '...')}</a>"
         )
     else:
         return url
diff --git a/shynet/shynet/settings.py b/shynet/shynet/settings.py
@@ -318,3 +318,6 @@
 
 # Should the Shynet version information be displayed?
 SHOW_SHYNET_VERSION = os.getenv("SHOW_SHYNET_VERSION", "True") == "True"
+
+# Should Shynet show third-party icons in the dashboard?
+SHOW_THIRD_PARTY_ICONS = os.getenv("SHOW_THIRD_PARTY_ICONS", "True") == "True"