Merge pull request #681 from alphagov/tables-of-notifications

Make dashboard and activity pages consistently clickable

app/templates/components/big-number.html

@@ -1,4 +1,7 @@
-{% macro big_number(number, label, label_link=None, currency='', smaller=False, smallest=False) %}
+{% macro big_number(number, label, link=None, currency='', smaller=False, smallest=False) %}
+  {% if link %}
+    <a class="big-number-link" href="{{ link }}">
+  {% endif %}
   <div class="big-number{% if smaller %}-smaller{% endif %}{% if smallest %}-smallest{% endif %}">
     <div class="big-number-number">
       {% if number is number %}
@@ -11,13 +14,13 @@
         {{ number }}
       {% endif %}
     </div>
-    {% if label_link %}
-      <a class="big-number-label" href="{{ label_link }}">{{ label }}</a>
-      <a class="big-number-overlay-link" href="{{ label_link }}" aria-hidden="true"></a>
-    {% elif label %}
+    {% if label %}
       <span class="big-number-label">{{ label }}</span>
     {% endif %}
   </div>
+  {% if link %}
+    </a>
+  {% endif %}
 {% endmacro %}
 
 
@@ -28,12 +31,12 @@
   failure_percentage,
   danger_zone=False,
   failure_link=None,
-  label_link=None,
+  link=None,
   show_more_link=None,
   show_more_text=''
 ) %}
   <div class="big-number-with-status">
-    {{ big_number(number, label, label_link) }}
+    {{ big_number(number, label, link=link) }}
     <div class="big-number-status{% if danger_zone %}-failing{% endif %}">
       {% if failures %}
         {% if failure_link %}

app/templates/components/pill.html

@@ -1,3 +1,5 @@
+{% from 'components/big-number.html' import big_number %}
+
 {% macro pill(
   title,
   items=[],
@@ -5,12 +7,19 @@
 ) %}
   <nav role='navigation' class='pill' aria-labelledby="pill_{{title}}">
     <h2 id="pill_{{title}}" class="visuallyhidden">{{title}}</h2>
-    {% for label, option, link in items %}
+    {% for label, option, link, count in items %}
       {% if current_value == option %}
-        <span aria-hidden="true">{{ label }}</span>
+        <span aria-hidden="true">
       {% else %}
-        <a href="{{ link }}">{{ label }}</a>
+        <a href="{{ link }}">
+      {% endif %}
+          {{ big_number(count, smaller=True) }}
+          <div class="pill-label">{{ label }}</div>
+      {% if current_value == option %}
+        </span>
+      {% else %}
+        </a>
       {% endif %}
     {% endfor %}
   </nav>
-{% endmacro %}
+{% endmacro %}

app/templates/partials/jobs/count.html

@@ -1,30 +1,16 @@
-{% from "components/big-number.html" import big_number %}
+{% from "components/pill.html" import pill %}
 
 <div
   {% if not finished %}
     data-module="update-content"
-    data-resource="{{url_for(".view_job_updates", service_id=current_service.id, job_id=job.id)}}"
+    data-resource="{{url_for(".view_job_updates", service_id=current_service.id, job_id=job.id, status=status, help=request.args.get('help', 0))}}"
     data-key="counts"
     aria-live="polite"
   {% endif %}
 >
 
-  <ul class="grid-row job-totals">
-    <li class="column-one-quarter">
-      {{ big_number(
-        job.get('notifications_sent', 0) - job.get('notifications_delivered', 0) - job.get('notifications_failed', 0), 'sending'
-      )}}
-    </li>
-    <li class="column-one-quarter">
-      {{ big_number(
-        job.get('notifications_delivered', 0), 'delivered'
-      )}}
-    </li>
-    <li class="column-one-quarter">
-      {{ big_number(
-        job.notifications_failed, 'failed'
-      )}}
-    </li>
-  </ul>
+  <div class="bottom-gutter">
+    {{ pill('Status', counts, status) }}
+  </div>
 
 </div>

app/templates/partials/jobs/notifications.html

@@ -1,19 +1,30 @@
 {% from "components/table.html" import list_table, field, right_aligned_field_heading, date_field, row_heading %}
 
 <div
+  {% if notifications %}
+    class='dashboard-table'
+  {% endif %}
   {% if not finished %}
     data-module="update-content"
-    data-resource="{{url_for(".view_job_updates", service_id=current_service.id, job_id=job.id)}}"
+    data-resource="{{url_for(".view_job_updates", service_id=current_service.id, job_id=job.id, status=request.args.get('status'), help=request.args.get('help'))}}"
     data-key="notifications"
     aria-live="polite"
   {% endif %}
 >
 
+  {% if notifications %}
+    <p class="bottom-gutter">
+      <a href="{{ url_for('.view_job_csv', service_id=current_service.id, job_id=job.id, status=status) }}" download="download" class="heading-small">Download as a CSV file</a>
+      &emsp;
+      Delivery information is available for 7 days
+    </p>
+  {% endif %}
+
   {% call(item, row_number) list_table(
     notifications,
     caption=uploaded_file_name,
     caption_visible=False,
-    empty_message="No messages to show yet",
+    empty_message="No messages to show",
     field_headings=[
       'Recipient',
       'Time',

app/templates/partials/jobs/status.html

@@ -1,12 +1,12 @@
 <div
   {% if not finished %}
     data-module="update-content"
-    data-resource="{{url_for(".view_job_updates", service_id=current_service.id, job_id=job.id)}}"
+    data-resource="{{url_for(".view_job_updates", service_id=current_service.id, job_id=job.id, status=status, help=request.args.get('help', 0))}}"
     data-key="status"
     aria-live="polite"
   {% endif %}
 >
-  <p class='heading-small'>
+  <p class='heading-small bottom-gutter'>
     Uploaded by {{ job.created_by.name }} on {{ job.created_at|format_datetime_short }}
   </p>
 </div>

app/templates/views/dashboard/template-statistics.html

@@ -1,26 +1,41 @@
+{% from "components/big-number.html" import big_number %}
 {% from "components/message-count-label.html" import message_count_label %}
+{% from "components/big-number.html" import big_number %}
 
 <dl>
   {% for item in template_statistics %}
     <div class="grid-row">
-      
+
       <dt class="column-half">
         <span class="spark-bar-label">
           <a href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.template.id) }}">{{ item.template.name }}</a>
+          <span class="file-list-hint">
+            {{ message_count_label(1, item.template.template_type, suffix='template')|capitalize }}
+          </span>
         </span>
       </dt>
 
       <dd class="column-half">
         {% if template_statistics|length > 1 %}
-        <span class="spark-bar">
-          <span style="width: {{ item.usage_count / most_used_template_count * 100 }}%"></span>    
-          {{ item.usage_count }} {{ message_count_label(item.usage_count, item.template.template_type) }}
-        </span>
+          <span class="spark-bar">
+            <span style="width: {{ item.usage_count / most_used_template_count * 100 }}%">
+              {{ big_number(
+                item.usage_count,
+                smallest=True
+              ) }}
+              <span class="visually-hidden">
+                {{ message_count_label(item.usage_count, item.template.template_type) }}
+              </span>
+            </span>
+          </span>
         {% else %}
-          {{ item.usage_count }} {{ message_count_label(item.usage_count, item.template.template_type) }}
+          <span class="heading-small">
+            {{ item.usage_count }}
+            {{ message_count_label(item.usage_count, item.template.template_type) }}
+          </span>
         {% endif %}
       </dd>
 
     </div>
   {% endfor %}
-</dl>
+</dl>

app/templates/views/dashboard/today.html

@@ -14,23 +14,23 @@
     <div class="column-half">
       {{ big_number_with_status(
         statistics.emails_requested,
-        message_count_label(statistics.emails_requested, 'email'),
+        message_count_label(statistics.emails_requested, 'email', suffix=''),
         statistics.emails_failed,
         statistics.get('emails_failure_rate', 0.0),
         statistics.get('emails_failure_rate', 0)|float > 3,
         failure_link=url_for(".view_notifications", service_id=current_service.id, message_type='email', status='failed'),
-        label_link=url_for(".view_notifications", service_id=current_service.id, message_type='email', status='sending,delivered,failed')
+        link=url_for(".view_notifications", service_id=current_service.id, message_type='email', status='sending,delivered,failed')
       ) }}
     </div>
     <div class="column-half">
       {{ big_number_with_status(
         statistics.sms_requested,
-        message_count_label(statistics.sms_requested, 'sms'),
+        message_count_label(statistics.sms_requested, 'sms', suffix=''),
         statistics.sms_failed,
         statistics.get('sms_failure_rate', 0.0),
         statistics.get('sms_failure_rate', 0)|float > 3,
         failure_link=url_for(".view_notifications", service_id=current_service.id, message_type='sms', status='failed'),
-        label_link=url_for(".view_notifications", service_id=current_service.id, message_type='sms', status='sending,delivered,failed')
+        link=url_for(".view_notifications", service_id=current_service.id, message_type='sms', status='sending,delivered,failed')
       ) }}
     </div>
     <div class="column-whole">

app/templates/views/jobs/job.html

@@ -36,5 +36,4 @@
 
     {% include 'partials/jobs/notifications.html' %}
 
-
 {% endblock %}

app/templates/views/notifications.html

@@ -3,7 +3,7 @@
 {% from "components/previous-next-navigation.html" import previous_next_navigation %}
 {% from "components/page-footer.html" import page_footer %}
 {% from "components/pill.html" import pill %}
-{% from "components/message-count-label.html" import message_count_label %}
+{% from "components/message-count-label.html" import message_count_label, recipient_count_label %}
 
 {% block page_title %}
   {{ message_count_label(99, message_type, suffix='') | capitalize }} – GOV.UK Notify
@@ -15,7 +15,7 @@
 
     <span class="visually-hidden">
       {%- if request_args.get('status') != 'delivered,failed' -%}
-        {%- for label, option, _ in status_filters -%}
+        {%- for label, option, _, _ in status_filters -%}
           {%- if request_args.get('status', 'delivered,failed') == option -%}{{label}} {% endif -%}
         {%- endfor -%}
       {%- endif -%}