Extended info in the segment overview because vision

src/personalisation/static/personalisation/segment/index.css

@@ -64,38 +64,93 @@
     }
 }
 
-.block_container .block .segment_stats {
-    list-style: none;
-    padding: 0;
-    margin: 0;
-    margin-bottom: 10px;
+.block_container .block h2 {
+    display: block;
 }
 
-    .block_container .block .segment_stats li {
+.block_container .block .inspect_container {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    justify-content: space-between;
+    align-items: stretch;
+    margin-bottom: 5px;
+}
+
+.block_container .block .inspect_container .inspect {
+    display: block;
+    float: left;
+    width: calc(50% - 10px);
+    padding: 0;
+    margin: 0;
+    list-style: none;
+}
+
+    .block_container .block .inspect_container .inspect li {
         display: inline-block;
-        font-size: 24px;
-        font-weight: bold;
-        margin-right: 50px;
-    }
-    .block_container .block .segment_stats li::last-child{
-        margin-right: 0;
+        margin-bottom: 5px;
     }
 
-    .block_container .block .segment_stats li::before {
-        display: inline-block;
-        content: "";
-        width: 20px;
-        height: 20px;
-        margin-right: 5px;
-        background-size: 20px 20px;
+    .block_container .block .inspect_container .inspect li span {
+        display: block;
+        font-size: 20px;
+        font-weight: bold;
+        margin: 5px 0;
+        overflow-wrap: break-word;
     }
-    .block_container .block .segment_stats .visit_stat::before {
-        background-image: url("./rocket_icon.png");
-    }
-    .block_container .block .segment_stats .days_stat::before {
-        background-image: url("./calendar_icon.png");
+
+        .block_container .block .inspect_container .inspect li span::before {
+            display: inline-block;
+            content: "";
+            width: 16px;
+            height: 16px;
+            margin-right: 5px;
+            background-size: contain;
+        }
+
+            .block_container .block .inspect_container .segment_stats .visit_stat span::before {
+                background-image: url("./rocket_icon.png");
+            }
+            .block_container .block .inspect_container .segment_stats .days_stat span::before {
+                background-image: url("./calendar_icon.png");
+            }
+
+            .block_container .block .inspect_container .segment_rules .time_rule span::before {
+                background-image: url("./time_icon.png");
+            }
+            .block_container .block .inspect_container .segment_rules .visit_count_rule span::before {
+                background-image: url("./visit_count_icon.png");
+            }
+
+    .block_container .block .inspect_container .inspect li pre {
+        position: relative;
+        box-sizing: border-box;
+        width: auto;
+        background-color: #eee;
+        border: 1px solid #ccc;
+        margin: 5px 0 5px 21px;
+        padding: 2px 5px;
+        word-wrap: break-word;
+        word-break: break-all;
+        border-radius: 3px;
     }
 
+        .block_container .block .inspect_container .inspect li pre::before {
+            display: inline-block;
+            position: absolute;
+            content: "";
+            left: -21px;
+            top: 6px;
+            width: 16px;
+            height: 16px;
+            margin-right: 5px;
+            background-size: contain;
+        }
+
+            .block_container .block .inspect_container .segment_rules .referral_rule pre::before {
+                background-image: url("./referral_icon.png");
+            }
+
 .block_container .block.suggestion .suggestive_text {
     display: block;
     position: absolute;

src/personalisation/templates/modeladmin/personalisation/segment/index.html

@@ -23,10 +23,42 @@
                                     {% for segment in object_list %}
                                         <div class="block">
                                             <a href="inspect/{{ segment.pk }}"><h2>{{ segment }}</h2></a>
-                                            <ul class="segment_stats">
-                                                <li class="visit_stat">{{ segment.visit_count|localize }} {% trans "visits" %}</li>
-                                                <li class="days_stat">{{ segment.enable_date|days_since:segment.disable_date }} {% trans "days" %}</li>
-                                            </ul>
+                                            <div class="inspect_container">
+                                                <ul class="inspect segment_stats">
+                                                    <li class="visit_stat">
+                                                        <span>{{ segment.visit_count|localize }}</span>
+                                                        {% trans "Visitors are part of this segment" %}
+                                                    </li>
+                                                    <li class="days_stat">
+                                                        <span>{{ segment.enable_date|days_since:segment.disable_date }}</span>
+                                                        {% trans "Days since matching visitors are appointed to this segment" %}
+                                                    </li>
+                                                </ul>
+
+                                                <ul class="inspect segment_rules">
+                                                    {% for rule in segment.time_rules.all %}
+                                                        <li class="time_rule">   
+                                                            These users visit between
+                                                            <span>{{ rule.start_time }} and {{ rule.end_time }}</span>
+                                                        </li>
+                                                    {% endfor %}
+
+                                                    {% for rule in segment.referral_rules.all %}
+                                                        <li class="referral_rule">   
+                                                            These visits originate from
+                                                            <pre>{{ rule.regex_string }}</pre>
+                                                        </li>
+                                                    {% endfor %}
+
+                                                    {% for rule in segment.visit_count_rules.all %}
+                                                        <li class="visit_count_rule">   
+                                                            These users visited {{ rule.counted_page }}
+                                                            <span>{{ rule.get_operator_display }} {{ rule.count }} times</span>
+                                                        </li>
+                                                    {% endfor %}
+                                                </ul>
+                                            </div>
+
                                             {% if user_can_create %}
                                             <ul class="block_actions">
                                                 {% if segment.status == "disabled" %}

src/personalisation/wagtail_hooks.py

@@ -2,7 +2,7 @@ import time
 
 from django.conf.urls import include, url
 from wagtail.contrib.modeladmin.options import ModelAdmin, modeladmin_register
-from wagtail.contrib.modeladmin.views import CreateView
+from wagtail.contrib.modeladmin.views import IndexView
 from wagtail.wagtailcore import hooks
 
 from personalisation import admin_urls
@@ -22,6 +22,15 @@ def register_admin_urls():
     ]
 
 
+class SegmentIndexView(IndexView):
+    def get_context_data(self, **kwargs):
+        context = {
+            'additional_forms': (TimeRuleForm, ReferralRuleForm, VisitCountRuleForm),
+        }
+        context.update(kwargs)
+        return super(SegmentIndexView, self).get_context_data(**context)
+
+
 class SegmentModelAdmin(ModelAdmin):
     """The base model for the Segments administration interface."""
     model = Segment