Add responsive email format to the babylon-notifier

notifier/.s2i/bin/assemble

@@ -0,0 +1,6 @@
+#!/bin/bash
+
+npm install -g npm@8.19.3
+npm install -g mjml@4.13.0
+
+exec /usr/libexec/s2i/assemble

notifier/Dockerfile

@@ -9,10 +9,11 @@ RUN dnf install -y @ruby && \
     rm -rf /tmp/src/.git* && \
     chown -R 1001 /tmp/src && \
     chgrp -R 0 /tmp/src && \
-    chmod -R g+w /tmp/src
+    chmod -R g+w /tmp/src \
+    cp -rp /tmp/src/.s2i/bin /tmp/scripts
 
 USER 1001
 
-RUN /usr/libexec/s2i/assemble
+RUN /tmp/scripts/assemble
 
 CMD ["/usr/libexec/s2i/run"]

notifier/devfile.yaml

@@ -1,6 +1,7 @@
 commands:
 - exec:
-    commandLine: /usr/libexec/s2i/assemble
+    commandLine: >-
+      rm -rf /tmp/src && cp /tmp/projects -r /tmp/src && /tmp/src/.s2i/bin/assemble
     component: s2i-builder
     group:
       isDefault: true

notifier/operator/operator.py

@@ -718,6 +718,7 @@ def send_notification_email(
         )
     )
     template_vars['have_attachments'] = len(attachments) > 0
+    template_vars['service_status'] = ' '.join(elem.capitalize() for elem in template.replace('-', ' ').split())
 
     email_subject = j2env.from_string(subject).render(**template_vars)
 
@@ -726,9 +727,16 @@ def send_notification_email(
     else:
         message_template = catalog_item.get_message_template(kebabToCamelCase(template))
         if message_template:
-            email_body = j2env.from_string(message_template).render(**template_vars)
+            mjml_template = j2env.from_string(message_template).render(**template_vars)
         else:
-            email_body = j2env.get_template(template + '.html.j2').render(**template_vars)
+            mjml_template = j2env.get_template(template + '.mjml.j2').render(**template_vars)
+
+        # Call for the MJML CLI to generate final HTML
+        email_body = subprocess.run(
+                        ['mjml', '-i'], 
+                        stdout=subprocess.PIPE,
+                        input=mjml_template,
+                        encoding='ascii').stdout
 
     msg = MIMEMultipart('alternative')
     msg['Subject'] = email_subject

notifier/operator/templates/base.mjml.j2

@@ -0,0 +1,58 @@
+<mjml>
+  <mj-body>
+    <!-- Company Header -->
+    <mj-section full-width="full-width" background-color="#151515" padding-top="8px" padding-bottom="8px" padding-left="12px" padding-right="12px">
+      <mj-group>
+        <mj-column vertical-align="middle">
+          <mj-image href="https://demo.redhat.com/" title="RedHat" alt="RedHat" width="185px" src="https://public-assets-email.s3.us-east-2.amazonaws.com/Logo-Red_Hat-A-Reverse-RGB.png" />
+        </mj-column>
+      </mj-group>
+    </mj-section>
+    <!-- spacer -->
+    <mj-section padding-top="0" padding-bottom="0" padding-left="0" padding-right="0">
+      <mj-column>
+        <mj-spacer height="25px" />
+      </mj-column>
+    </mj-section>
+    <!-- Title -->
+    <mj-section padding-top="21px" padding-bottom="12px" padding-left="12px" padding-right="12px">
+      <mj-column>
+        <mj-text font-family="Red Hat Text" font-weight="regular" align="center" font-size="16px" color="#000" line-height="1.2">
+          Status: {{ service_status }}
+        </mj-text>
+        <mj-text font-family="Red Hat Display" font-weight="regular" align="center" font-size="35px" color="#000" line-height="1.2">
+          {{ service_display_name }}
+        </mj-text>
+        <mj-text font-family="Red Hat Text" font-weight="regular" align="center" font-size="16px" color="#000" line-height="1.2">
+          from {{ catalog_namespace.display_name }}
+        </mj-text>
+      </mj-column>
+    </mj-section>
+
+    <!-- spacer -->
+    <mj-section padding-top="0" padding-bottom="0" padding-left="0" padding-right="0">
+      <mj-column>
+        <mj-spacer height="25px" />
+      </mj-column>
+    </mj-section>
+    <!-- Text -->
+    <mj-section padding-top="12px" padding-bottom="12px" padding-left="12px" padding-right="12px" background-color="#f0f0f0">
+      <mj-column>
+        <mj-text font-family="Red Hat Text" color="#4a5557" font-size="16px" line-height="1.5" padding-bottom="12px">
+          {% block content %}{% endblock %}
+        </mj-text>
+      </mj-column>
+    </mj-section>
+
+    <!-- Footer -->
+    <mj-section padding-top="12px" padding-bottom="12px" padding-left="12px" padding-right="12px">
+      <mj-column>
+        <mj-text align="center" font-size="12px" color="#4a5557" font-family="Red Hat Text" line-height="1.5">
+          <b>RedHat
+          </b> &copy; Copyright 2022 - All rights reserved
+        </mj-text>
+      </mj-column>
+    </mj-section>
+    <!-- Footer -->
+  </mj-body>
+</mjml>

notifier/operator/templates/provision-failed.html.j2 → notifier/operator/templates/provision-failed.mjml.j2

@@ -1,3 +1,6 @@
+{% extends "base.mjml.j2" %}
+{% block content %}
+
 <p>Your {{ catalog_namespace.display_name }} service, {{ service_display_name }}, has failed to provision.
 {% if have_attachments %}
 Please see attached Ansible log.
@@ -8,3 +11,5 @@ Please see attached Ansible log.
 <p>You may manage your {{ catalog_namespace.display_name }} service at:<br>
 <a href="{{ service_url }}">{{ service_url }}</a>.</p>
 {% endif %}
+
+{% endblock content %}

notifier/operator/templates/provision-started.html.j2 → notifier/operator/templates/provision-started.mjml.j2

@@ -1,3 +1,6 @@
+{% extends "base.mjml.j2" %}
+{% block content %}
+
 <p>Thank you for ordering {{ catalog_item.display_name }}.</p>
 
 <p>Provisioning has started on your {{ catalog_namespace.display_name }} service, {{ service_display_name }}.</p>
@@ -8,3 +11,5 @@
 <p>You may manage your {{ catalog_namespace.display_name }} service at:<br>
 <a href="{{ service_url }}">{{ service_url }}</a>.</p>
 {% endif %}
+
+{% endblock content %}

notifier/operator/templates/retirement-scheduled.html.j2 → notifier/operator/templates/retirement-scheduled.mjml.j2

@@ -1,7 +1,12 @@
+{% extends "base.mjml.j2" %}
+{% block content %}
+
 <p>Reminder:<br>
 Your environment will expire and be deleted in {{ retirement_timedelta_humanized }} at {{ retirement_timestamp }}.</p>
 
 {% if service_url %}
 <p>You may manage your {{ catalog_namespace.display_name }} service at:<br>
 <a href="{{ service_url }}">{{ service_url }}</a>.</p>
 {% endif %}
+
+{% endblock content %}

notifier/operator/templates/service-deleted.html.j2 → notifier/operator/templates/service-deleted.mjml.j2

@@ -1,3 +1,6 @@
+{% extends "base.mjml.j2" %}
+{% block content %}
+
 <p>Your {{ catalog_namespace.display_name }} service {{ service_display_name }} has been deleted.</p>
 
 <p>To conserve resources data on these systems is not archived and cannot be retrieved.
@@ -7,3 +10,5 @@ Thank you for using {{ catalog_namespace.display_name }}.</p>
 {% if survey_link %}
 <p>We would love your feedback on your demo/lab, please fill out our short Survey (<a href="{{ survey_link | escape }}">click here</a>) to help us improve your experience.</p>
 {% endif %}
+
+{% endblock content %}

notifier/operator/templates/service-ready.html.j2 → notifier/operator/templates/service-ready.mjml.j2

@@ -1,3 +1,6 @@
+{% extends "base.mjml.j2" %}
+{% block content %}
+
 <p>Thank you for ordering {{ catalog_item.display_name }}.</p>
 
 <p>Your {{ catalog_namespace.display_name }} service {{ service_display_name }} is ready.</p>
@@ -42,3 +45,5 @@ All data will be lost upon expiration.</p>
 <p>You may manage your {{ catalog_namespace.display_name }} service at:<br>
 <a href="{{ service_url }}">{{ service_url }}</a>.</p>
 {% endif %}
+
+{% endblock content %}

notifier/operator/templates/start-complete.html.j2 → notifier/operator/templates/start-complete.mjml.j2

@@ -1,3 +1,6 @@
+{% extends "base.mjml.j2" %}
+{% block content %}
+
 <p>Your {{ catalog_namespace.display_name }} service {{ service_display_name }} has started.</p>
 
 <p>NOTICE:<br>
@@ -8,3 +11,5 @@ Your environment will expire and be deleted in {{ retirement_timedelta_humanized
 <p>You may manage your {{ catalog_namespace.display_name }} service at:<br>
 <a href="{{ service_url }}">{{ service_url }}</a>.</p>
 {% endif %}
+
+{% endblock content %}

notifier/operator/templates/start-failed.html.j2 → notifier/operator/templates/start-failed.mjml.j2

@@ -1,3 +1,6 @@
+{% extends "base.mjml.j2" %}
+{% block content %}
+
 <p>Your {{ catalog_namespace.display_name }} service {{ service_display_name }} failed to start.
 {% if have_attachments %}
 Please see attached Ansible log.
@@ -8,3 +11,5 @@ Please see attached Ansible log.
 <p>You may manage your {{ catalog_namespace.display_name }} service at:<br>
 <a href="{{ service_url }}">{{ service_url }}</a>.</p>
 {% endif %}
+
+{% endblock content %}

notifier/operator/templates/stop-complete.html.j2 → notifier/operator/templates/stop-complete.mjml.j2

@@ -1,6 +1,11 @@
+{% extends "base.mjml.j2" %}
+{% block content %}
+
 <p>Your {{ catalog_namespace.display_name }} service {{ service_display_name }} has stopped.</p>
 
 {% if service_url %}
 <p>You may manage your {{ catalog_namespace.display_name }} service at:<br>
 <a href="{{ service_url }}">{{ service_url }}</a>.</p>
 {% endif %}
+
+{% endblock content %}

notifier/operator/templates/stop-failed.html.j2 → notifier/operator/templates/stop-failed.mjml.j2

@@ -1,3 +1,6 @@
+{% extends "base.mjml.j2" %}
+{% block content %}
+
 <p>Your {{ catalog_namespace.display_name }} service {{ service_display_name }} failed to stop.
 {% if have_attachments %}
 Please see attached Ansible log.
@@ -8,3 +11,5 @@ Please see attached Ansible log.
 <p>You may manage your {{ catalog_namespace.display_name }} service at:<br>
 <a href="{{ service_url }}">{{ service_url }}</a>.</p>
 {% endif %}
+
+{% endblock content %}

notifier/operator/templates/stop-scheduled.html.j2 → notifier/operator/templates/stop-scheduled.mjml.j2

@@ -1,7 +1,12 @@
+{% extends "base.mjml.j2" %}
+{% block content %}
+
 <p>Reminder:<br>
 Your environment will be stopped in {{ stop_timedelta_humanized }} at {{ stop_timestamp }}.</p>
 
 {% if service_url %}
 <p>You may manage your {{ catalog_namespace.display_name }} service at:<br>
 <a href="{{ service_url }}">{{ service_url }}</a>.</p>
 {% endif %}
+
+{% endblock content %}