Merge pull request #36 from alphagov/service-activity-flow

Service activity flow

app/assets/stylesheets/components/banner.scss

@@ -0,0 +1,21 @@
+.banner {
+
+  @include core-19;
+  background: $turquoise;
+  color: $white;
+  display: block;
+  padding: $gutter-half $gutter;
+  margin: 0 0 $gutter 0;
+  text-align: center;
+  position: relative;
+
+  &:before {
+    @include core-24;
+    content: '✔';
+    position: absolute;
+    top: $gutter-half;
+    left: $gutter-half;
+    margin-top: -2px;
+  }
+
+}

app/assets/stylesheets/components/big-number.scss

@@ -0,0 +1,10 @@
+.big-number {
+
+  @include bold-48;
+
+  &-label {
+    @include core-19;
+    display: block;
+  }
+
+}

app/assets/stylesheets/components/sms-message.scss

@@ -28,6 +28,7 @@
   }
 
   &-wrapper {
+    width: 100%;
     display: inline-block;
     box-sizing: border-box;
     position: relative;
@@ -41,7 +42,30 @@
   &-recipient {
     @include copy-19;
     color: $secondary-text-colour;
-    margin: 0;
+    margin: -$gutter-half 0 $gutter 0;
+  }
+
+  &-history {
+
+    background: $turquoise;
+    color: $white;
+    padding: $gutter-half;
+    @include bold-19;
+    margin: 0 0 $gutter 0;
+
+    &-heading {
+
+      @include bold-19;
+      margin: 0;
+
+      &-time {
+        @include inline-block;
+        margin-left: 10px;
+        font-weight: normal;
+      }
+
+    }
+
   }
 
 }

app/assets/stylesheets/components/table.scss

@@ -1,7 +1,43 @@
-.table {
+.table-heading {
+  text-align: left;
+}
+
+%table-field,
+.table-field {
+
+  &:last-child {
+    padding-right: 0;
+  }
+
+  &-status {
+
+    &-default {
+      color: $secondary-text-colour;
+    }
+
+    &-error {
+      color: $error-colour;
+      font-weight: bold;
+    }
 
-  &-heading {
-    text-align: left;
   }
 
 }
+
+.table-field-heading {
+
+  &:last-child {
+    padding-right: 0;
+  }
+
+  &-right-aligned {
+    display: block;
+    text-align: right;
+  }
+
+}
+
+.table-field-right-aligned {
+  @extend .table-field;
+  text-align: right;
+}

app/assets/stylesheets/main.scss

@@ -27,6 +27,7 @@
 @import '../govuk_elements/public/sass/elements/panels';
 @import '../govuk_elements/public/sass/elements/tables';
 
+
 // Specific to this application
 @import 'grids';
 @import 'components/template-picker';
@@ -35,6 +36,10 @@
 @import 'components/submit-form';
 @import 'components/table';
 @import 'components/navigation';
+@import 'components/big-number';
+@import 'components/banner';
+
+@import 'views/job';
 
 // TODO: break this up
 @import 'app';

app/assets/stylesheets/views/job.scss

@@ -0,0 +1,3 @@
+.job-totals {
+  margin-bottom: $gutter;
+}

app/main/__init__.py

@@ -3,4 +3,6 @@ from flask import Blueprint
 main = Blueprint('main', __name__)
 
 
-from app.main.views import index, sign_in, register, two_factor, verify, sms, add_service, code_not_received
+from app.main.views import (
+    index, sign_in, register, two_factor, verify, sms, add_service, code_not_received, jobs, dashboard
+)

app/main/views/_jobs.py

@@ -0,0 +1,62 @@
+jobs = [
+    {
+        'job': 'Test message 1',
+        'file': 'dispatch_20151114.csv',
+        'time': 'Just now',
+        'status': 'Queued'
+    },
+    {
+        'job': 'Mickey Mouse',
+        'file': 'dispatch_20151117.csv',
+        'time': '5 minutes ago',
+        'status': 'Delivered'
+    },
+    {
+        'job': 'Asdfgg',
+        'file': 'remdinder_monday.csv',
+        'time': '30 minutes ago',
+        'status': 'Failed'
+    },
+    {
+        'job': 'Test message 2',
+        'file': 'appointments_wed.csv',
+        'time': '2 hours ago',
+        'status': 'Delivered'
+    },
+    {
+        'job': 'Reminder file',
+        'file': 'appointments_mon.csv',
+        'time': '11:44 Yesterday',
+        'status': 'Delivered'
+    },
+    {
+        'job': 'Test message 1',
+        'file': 'dispatch_20151114.csv',
+        'time': '20 Jun 2015',
+        'status': 'Queued'
+    },
+    {
+        'job': 'Mickey Mouse',
+        'file': 'dispatch_20151117.csv',
+        'time': '18 Jun 2015',
+        'status': 'Delivered'
+    },
+    {
+        'job': 'Asdfgg',
+        'file': 'remdinder_monday.csv',
+        'time': '11 Jun 2015',
+        'status': 'Failed'
+    },
+    {
+        'job': 'Test message 2',
+        'file': 'appointments_wed.csv',
+        'time': '11 Jun 2015',
+        'status': 'Delivered'
+    },
+    {
+        'job': 'Final reminder',
+        'file': 'appointments_mon.csv',
+        'time': '11 Jun 2015',
+        'status': 'Delivered'
+    }
+]

app/main/views/dashboard.py

@@ -0,0 +1,15 @@
+from flask import render_template
+
+from app.main import main
+
+from ._jobs import jobs
+
+
+@main.route("/dashboard")
+def dashboard():
+    return render_template(
+        'views/dashboard.html',
+        jobs=jobs,
+        free_text_messages_remaining=560,
+        spent_this_month='0.00'
+    )

app/main/views/index.py

@@ -24,17 +24,6 @@ def verifymobile():
     return render_template('views/verify-mobile.html')
 
 
-@main.route("/text-not-received-2")
-def textnotreceived2():
-    return render_template('views/text-not-received-2.html')
-
-
-@main.route("/dashboard")
-@login_required
-def dashboard():
-    return render_template('views/dashboard.html')
-
-
 @main.route("/send-email")
 def sendemail():
     return render_template('views/send-email.html')
@@ -45,21 +34,6 @@ def checkemail():
     return render_template('views/check-email.html')
 
 
-@main.route("/jobs")
-def showjobs():
-    return render_template('views/jobs.html')
-
-
-@main.route("/jobs/job")
-def showjob():
-    return render_template('views/job.html')
-
-
-@main.route("/jobs/job/notification")
-def shownotification():
-    return render_template('views/notification.html')
-
-
 @main.route("/forgot-password")
 def forgotpassword():
     return render_template('views/forgot-password.html')
@@ -90,11 +64,6 @@ def apikeys():
     return render_template('views/api-keys.html')
 
 
-@main.route("/verification-not-received")
-def verificationnotreceived():
-    return render_template('views/verification-not-received.html')
-
-
 @main.route("/manage-templates")
 def managetemplates():
     return render_template('views/manage-templates.html')

app/main/views/jobs.py

@@ -0,0 +1,80 @@
+import time
+from flask import render_template
+from app.main import main
+
+from ._jobs import jobs
+
+now = time.strftime('%H:%M')
+
+messages = [
+    {
+        'phone': '+44 7700 900 579',
+        'message': 'Vehicle tax: Your vehicle tax for LV75 TDG expires on 18 January 2016. Renew at www.gov.uk/vehicletax',  # noqa
+        'status': 'Delivered',
+        'time': now,
+        'id': '0'
+    },
+    {
+        'phone': '+44 7700 900 306',
+        'message': 'Vehicle tax: Your vehicle tax for PL53 GBD expires on 18 January 2016. Renew at www.gov.uk/vehicletax',  # noqa
+        'status': 'Delivered',
+        'time': now,
+        'id': '1'
+    },
+    {
+        'phone': '+44 7700 900 454',
+        'message': 'Vehicle tax: Your vehicle tax for LV75 TDG expires on 18 January 2016. Renew at www.gov.uk/vehicletax',  # noqa
+        'status': 'Delivered',
+        'time': now,
+        'id': '2'
+    },
+    {
+        'phone': '+44 7700 900 522',
+        'message': 'Vehicle tax: Your vehicle tax for RE67 PLM expires on 18 January 2016. Renew at www.gov.uk/vehicletax',  # noqa
+        'status': 'Failed',
+        'time': now,
+        'id': '3'
+    }
+]
+
+
+@main.route("/jobs")
+def showjobs():
+    return render_template(
+        'views/jobs.html',
+        jobs=jobs
+    )
+
+
+@main.route("/jobs/job")
+def showjob():
+    return render_template(
+        'views/job.html',
+        messages=messages,
+        counts={
+            'total': len(messages),
+            'delivered': len([
+                message for message in messages if message['status'] == 'Delivered'
+            ]),
+            'failed': len([
+                message for message in messages if message['status'] == 'Failed'
+            ])
+        },
+        cost='£0.00',
+        uploaded_file_name='dispatch_20151114.csv',
+        uploaded_file_time=now,
+        template_used='Test message 1',
+        flash_message='We’ve started sending your messages'
+    )
+
+
+@main.route("/jobs/job/notification/<string:notification_id>")
+def shownotification(notification_id):
+    return render_template(
+        'views/notification.html',
+        message=[
+            message for message in messages if message['id'] == notification_id
+        ][0],
+        delivered_at=now,
+        uploaded_at=now
+    )

app/templates/components/banner.html

@@ -0,0 +1,3 @@
+{% macro banner(body) %}
+  <div class='banner'>{{ body }}</div>
+{% endmacro %}

app/templates/components/big-number.html

@@ -0,0 +1,6 @@
+{% macro big_number(number, label) %}
+  <div class="big-number">
+    {{ number }}
+    <span class="big-number-label">{{ label }}</span>
+  </div>
+{% endmacro %}

app/templates/components/sms-message.html

@@ -1,12 +1,20 @@
 {% macro sms_message(body, recipient) %}
-  {% if recipient %}
-    <p class="sms-message-recipient">
-      {{ recipient }}
-    </p>
-  {% endif %}
   <div class="sms-message">
     <div class="sms-message-wrapper">
       {{ body|placeholders }}
     </div>
   </div>
+  {% if recipient %}
+    <p class="sms-message-recipient">
+      {{ recipient }}
+    </p>
+  {% endif %}
+{% endmacro %}
+
+{% macro message_status(status, time) %}
+  <div class="sms-message-history">
+    <p class="sms-message-history-heading">
+      {{ status }} <span class="sms-message-history-heading-time">{{ time }}</span>
+    </p>
+  </div>
 {% endmacro %}

app/templates/components/table.html

@@ -1,6 +1,6 @@
-{% macro table(items, caption='', field_headings='', field_headings_visible=True) -%}
+{% macro table(items, caption='', field_headings='', field_headings_visible=True, caption_visible=True) -%}
   <table class="table">
-    <caption class="heading-medium table-heading">
+    <caption class="heading-medium table-heading{{ ' visuallyhidden' if not caption_visible}}">
       {{ caption }}
     </caption>
     <thead class="table-field-headings{% if field_headings_visible %}-visible{% endif %}">
@@ -32,8 +32,12 @@
   </table>
 {%- endmacro %}
 
-{% macro field(first=False, wide=False, action=False) -%}
+{% macro field(align='left', status='') -%}
-  <td class="table-field{% if first %}-first{% endif %}{% if first and wide %}-wider{% endif %}{% if action %}-with-action{% endif %}">
+  <td class="table-field{% if align == 'right' %}-right-aligned{% endif %}">
-    <span>{{ caller() }}</span>
+    <span class="{{ 'table-field-status-' + status if status }}">{{ caller() }}</span>
   </td>
 {%- endmacro %}
+
+{% macro right_aligned_field_heading(text) %}
+  <span class="table-field-heading-right-aligned">{{ text }}</span>
+{%- endmacro %}

app/templates/views/dashboard.html

@@ -1,55 +1,51 @@
 {% extends "withnav_template.html" %}
-
+{% from "components/table.html" import table, field %}
+{% from "components/big-number.html" import big_number %}
 
 {% block page_title %}
-GOV.UK Notify | Dashboard
+	GOV.UK Notify | Dashboard
 {% endblock %}
 
 {% block maincolumn_content %}
 
-		<h1 class="heading-xlarge">Dashboard</h1>
+    <h1 class="heading-xlarge">Service name</h1>
 
-		<table>
+		<ul class="grid-row job-totals">
-		  <thead>
+			<li class="column-half">
-			<tr>
+				{{ big_number(
-			  <th colspan="4">Recent activity</th>
+					free_text_messages_remaining,
-			</tr>
+					'free text messages remaining'
-		  </thead>
+				)}}
-		  <tbody>
+			</li>
-			<tr>
+			<li class="column-half">
-			  <td><a href={{ url_for('.showjob') }}>Test message 1</a></td>
+				{{ big_number(
-			  <td>dispatch_20151114.csv</td>
+					'£' + spent_this_month,
-			  <td>Just now</td>
+					'spent this month'
-			  <td>Queued</td>
+				)}}
-			</tr>
+			</li>
-			<tr>
+		</ul>
-			  <td><a href={{ url_for('.showjob') }}>Mickey Mouse</a></td>
+
-			  <td>dispatch_20151117.csv</td>
+    {% call(item) table(
-			  <td>5 minutes ago</td>
+      jobs[:3],
-			  <td>Delivered</td>
+      caption="Recent text messages",
-			</tr>
+      field_headings=['Job', 'File', 'Time', 'Status']
-			<tr>
+    ) %}
-			  <td><a href={{ url_for('.showjob') }}>Asdfgg</a></td>
+			{% call field() %}
-			  <td>remdinder_monday.csv</td>
+				<a href="{{ url_for('.showjob') }}">{{ item.file }}</a>
-			  <td>30 minutes ago</td>
+			{% endcall %}
-			  <td>Failed</td>
+			{% call field() %}
-			</tr>
+				<a href="{{ url_for('.showjob') }}">{{ item.job }}</a>
-			<tr>
+			{% endcall %}
-			  <td><a href={{ url_for('.showjob') }}>Test message 2</a></td>
+			{% call field() %}
-			  <td>appointments_wed.csv</td>
+				{{ item.time }}
-			  <td>2 hours ago</td>
+			{% endcall %}
-			  <td>Delivered</td>
+			{% call field() %}
-			</tr>
+				{{ item.status }}
-			<tr>
+			{% endcall %}
-			  <td><a href={{ url_for('.showjob') }}>Reminder file</a></td>
+    {% endcall %}
-			  <td>+447889887634</td>
+    <p>
-			  <td>11:44 - 21 Nov 2015</td>
+      <a href={{ url_for('.showjobs') }}>See all notifications activity</a>
-			  <td>Delivered</td>
+    </p>
-			</tr>
-		  </tbody>
-		</table>
-		<br/>
-		<p><a href={{ url_for('.showjobs') }}>See all notifications activity</a></p>
 
 
 {% endblock %}

app/templates/views/job.html

@@ -1,4 +1,7 @@
 {% extends "withnav_template.html" %}
+{% from "components/table.html" import table, field, right_aligned_field_heading %}
+{% from "components/big-number.html" import big_number %}
+{% from "components/banner.html" import banner %}
 
 {% block page_title %}
 GOV.UK Notify | Notifications activity
@@ -6,14 +9,58 @@ GOV.UK Notify | Notifications activity
 
 {% block maincolumn_content %}
 
-		<h1 class="heading-xlarge">Notifications for a specific job</h1>
+    <h1 class="heading-large">
+			{{ uploaded_file_name }}
+		</h1>
 
-		<p>This page will be where we list the notifications for a specific job.</p>
+    {{ banner(flash_message) }}
 
-  	<ul>
+		<ul class="grid-row job-totals">
-  		<li><a href="/jobs/job/notification">view a specific notification</a></li>
+			<li class="column-one-third">
-		<li><a href="/jobs">view all the activity for this service</a></li>
+				{{ big_number(
-  	</ul>
+					counts.total,
-	
+					'text message' if 1 == counts.total else 'text messages'
+				)}}
+			</li>
+			<li class="column-one-third">
+				{{ big_number(
+					counts.failed,
+					'failed delivery' if 1 == counts.failed else 'failed deliveries'
+				)}}
+			</li>
+			<li class="column-one-third">
+				{{ big_number(
+					cost, 'total cost'
+				)}}
+			</li>
+		</ul>
+
+    <p>
+      Sent with template <a href="{{ url_for('.edittemplate') }}">{{ template_used }}</a> at {{ uploaded_file_time }}
+    </p>
+
+    {% call(item) table(
+      messages,
+      caption='Messages',
+      caption_visible=False,
+      field_headings=[
+        'To',
+        'Message',
+        right_aligned_field_heading('Delivery status')
+      ]
+    ) %}
+      {% call field() %}
+        <a href="{{ url_for('.shownotification', notification_id=item.id) }}">{{item.phone}}</a>
+      {% endcall %}
+      {% call field() %}
+        <a href="{{ url_for('.shownotification', notification_id=item.id) }}">{{item.message[:50]}}…</a>
+      {% endcall %}
+      {% call field(
+        align='right',
+        status='error' if item.status == 'Failed' else 'default'
+      ) %}
+				{{ item.status }}&emsp;{{ item.time }}
+			{% endcall %}
+    {% endcall %}
 
 {% endblock %}

app/templates/views/jobs.html

@@ -1,4 +1,5 @@
 {% extends "withnav_template.html" %}
+{% from "components/table.html" import table, field %}
 
 {% block page_title %}
 GOV.UK Notify | Notifications activity
@@ -8,11 +9,25 @@ GOV.UK Notify | Notifications activity
 
 		<h1 class="heading-xlarge">Notifications activity</h1>
 
-		<p>This page will be where we show the list of jobs that this service has processed</p>
+		{% call(item) table(
-
+			jobs,
-  	<p>
+			caption="Recent activity",
-  	<a href="jobs/job">view a particular notification job</a>
+			caption_visible=False,
-  	</p>
+			field_headings=['Job', 'File', 'Time', 'Status']
+		) %}
+			{% call field() %}
+				<a href="{{ url_for('.showjob') }}">{{ item.file }}</a>
+			{% endcall %}
+			{% call field() %}
+				<a href="{{ url_for('.showjob') }}">{{ item.job }}</a>
+			{% endcall %}
+			{% call field() %}
+				{{ item.time }}
+			{% endcall %}
+			{% call field() %}
+				{{ item.status }}
+			{% endcall %}
+		{% endcall %}
 
 
 {% endblock %}

app/templates/views/notification.html

@@ -1,4 +1,5 @@
 {% extends "withnav_template.html" %}
+{% from "components/sms-message.html" import sms_message, message_status %}
 
 {% block page_title %}
 GOV.UK Notify | Notifications activity
@@ -7,12 +8,21 @@ GOV.UK Notify | Notifications activity
 {% block maincolumn_content %}
 
 
-		<h1 class="heading-xlarge">A specific notification</h1>
+		<h1 class="heading-large">
+			Text message
+		</h1>
 
-		<p>This page will be where we show what happened for a specific notification.</p>
+		<div class="grid-row">
+			<div class="column-two-thirds">
+				{{ sms_message(message.message, message.phone) }}
+			</div>
+			<div class="column-one-third">
+				{{ message_status(message.status, delivered_at) }}
+			</div>
+		</div>
 
   	<p>
-  	<a href="/jobs/job">View other notifications in this job</a>
+	  	<a href="{{ url_for('.showjob') }}">View other notifications in this job</a>
   	</p>
 
 

tests/app/main/views/test_dashboard.py

@@ -0,0 +1,6 @@
+def test_should_show_recent_jobs_on_dashboard(notifications_admin):
+    response = notifications_admin.test_client().get('/dashboard')
+
+    assert response.status_code == 200
+    assert 'Test message 1' in response.get_data(as_text=True)
+    assert 'Asdfgg' in response.get_data(as_text=True)

tests/app/main/views/test_jobs.py

@@ -0,0 +1,22 @@
+def test_should_return_list_of_all_jobs(notifications_admin):
+    response = notifications_admin.test_client().get('/jobs')
+
+    assert response.status_code == 200
+    assert 'Test message 1' in response.get_data(as_text=True)
+    assert 'Final reminder' in response.get_data(as_text=True)
+
+
+def test_should_show_page_for_one_job(notifications_admin):
+    response = notifications_admin.test_client().get('/jobs/job')
+
+    assert response.status_code == 200
+    assert 'dispatch_20151114.csv' in response.get_data(as_text=True)
+    assert 'Test message 1' in response.get_data(as_text=True)
+
+
+def test_should_show_page_for_one_notification(notifications_admin):
+    response = notifications_admin.test_client().get('/jobs/job/notification/3')
+
+    assert response.status_code == 200
+    assert 'Text message' in response.get_data(as_text=True)
+    assert '+44 7700 900 522' in response.get_data(as_text=True)

tests/app/main/views/test_sms.py

@@ -0,0 +1,27 @@
+def test_should_return_sms_template_picker(notifications_admin):
+    response = notifications_admin.test_client().get('/sms/send')
+
+    assert response.status_code == 200
+    assert 'Choose text message template' in response.get_data(as_text=True)
+
+
+def test_should_redirect_to_sms_check_page(notifications_admin):
+    response = notifications_admin.test_client().post('/sms/send')
+
+    assert response.status_code == 302
+    assert response.location == 'http://localhost/sms/check'
+
+
+def test_should_return_check_sms_page(notifications_admin):
+    response = notifications_admin.test_client().get('/sms/check')
+
+    assert response.status_code == 200
+    assert 'Check and confirm' in response.get_data(as_text=True)
+    assert 'Send 10 text messages' in response.get_data(as_text=True)
+
+
+def test_should_redirect_to_job(notifications_admin):
+    response = notifications_admin.test_client().post('/sms/check')
+
+    assert response.status_code == 302
+    assert response.location == 'http://localhost/jobs/job'