Show snippet on service page when not hits are recorded yet

shynet/core/models.py

@@ -132,6 +132,10 @@ class Service(models.Model):
             service=self, start_time__lt=end_time, start_time__gt=start_time
         )
         hit_count = hits.count()
+        hits = Hit.objects.filter(
+            service=self
+        )
+        has_hits = hits.exists()
 
         bounces = sessions.filter(is_bounce=True)
         bounce_count = bounces.count()
@@ -218,6 +222,7 @@ class Service(models.Model):
             "currently_online": currently_online,
             "session_count": session_count,
             "hit_count": hit_count,
+            "has_hits": has_hits,
             "avg_hits_per_session": hit_count / (max(session_count, 1)),
             "bounce_rate_pct": bounce_count * 100 / session_count
             if session_count > 0

shynet/dashboard/templates/dashboard/includes/service_snippet.html

@@ -0,0 +1,5 @@
+<div class="card ~neutral !high font-mono text-sm whitespace-pre-wrap break-all">{% filter force_escape %}<noscript>
+    <img src="{{script_protocol}}{{request.site.domain}}{% url 'ingress:endpoint_pixel' object.uuid %}">
+</noscript>
+<script defer src="{{script_protocol}}{{request.site.domain}}{% url 'ingress:endpoint_script' object.uuid %}"></script>{% endfilter %}
+</div>

shynet/dashboard/templates/dashboard/pages/service.html

@@ -11,6 +11,17 @@
 {% endblock %}
 
 {% block service_content %}
+{% if not stats.has_hits %}
+<div class="content mb-6">
+    <h5>Get started</h5>
+    <p>
+        It seems that you have not recorded any data yet!
+        <br>
+        Get started by placing the following snippet at the end of the <code>&lt;body&gt;</code> tag on any page you'd like to track.
+    </p>
+    {% include 'dashboard/includes/service_snippet.html' %}
+</div>
+{% endif %}
 <div class="grid grid-cols-2 gap-6 md:flex justify-between mb-6 card ~neutral !high px-6" id="stats">
     {% with classes="text-sm font-semibold" good_classes="text-positive-400" bad_classes="text-critical-400" neutral_classes="text-gray-400" %}
     <article class="">

shynet/dashboard/templates/dashboard/pages/service_update.html

@@ -12,12 +12,7 @@
 <div class="max-w-xl content">
     <h5>Installation</h5>
     <p>Place the following snippet at the end of the <code>&lt;body&gt;</code> tag on any page you'd like to track.</p>
-    <div class="card ~neutral !high font-mono text-sm">
+    {% include 'dashboard/includes/service_snippet.html' %}
-        {% filter force_escape %}<noscript><img
-                src="{{script_protocol}}{{request.site.domain}}{% url 'ingress:endpoint_pixel' object.uuid %}"></noscript>
-        <script defer src="{{script_protocol}}{{request.site.domain}}{% url 'ingress:endpoint_script' object.uuid %}"></script>
-        {% endfilter %}
-    </div>
     <hr class="sep h-4">
     <h5>Settings</h5>
     <form class="card ~neutral !low p-0" method="POST">