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,54 @@
+<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">
+      {% block content %}{% endblock %}
+    </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.mjml.j2

@@ -0,0 +1,21 @@
+{% extends "base.mjml.j2" %}
+{% block content %}
+
+<mj-column>
+  <mj-text font-family="Red Hat Text" color="#4a5557" font-size="16px" line-height="1.5" padding-bottom="12px">
+
+    <p>Your {{ catalog_namespace.display_name }} service, {{ service_display_name }}, has failed to provision.
+    {% if have_attachments %}
+    Please see attached Ansible log.
+    {% endif %}
+    </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 %}
+
+  </mj-text>
+</mj-column>
+
+{% endblock content %}

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

@@ -0,0 +1,20 @@
+{% extends "base.mjml.j2" %}
+{% block content %}
+
+<mj-column>
+  <mj-text font-family="Red Hat Text" color="#4a5557" font-size="16px" line-height="1.5" padding-bottom="12px">
+
+    <p>Thank you for ordering {{ catalog_item.display_name }}. Provisioning has started on 
+    your {{ catalog_namespace.display_name }} service, {{ service_display_name }}.</p>
+
+    <p>You will receive more information via email when the provisioning completes in about {{ provision_time_estimate }}.</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 %}
+
+  </mj-text>
+</mj-column>
+
+{% endblock content %}

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

@@ -0,0 +1,18 @@
+{% extends "base.mjml.j2" %}
+{% block content %}
+
+<mj-column>
+  <mj-text font-family="Red Hat Text" color="#4a5557" font-size="16px" line-height="1.5" padding-bottom="12px">
+
+    <p><b>Reminder:</b><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 %}
+
+  </mj-text>
+</mj-column>
+
+{% endblock content %}

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

@@ -0,0 +1,21 @@
+{% extends "base.mjml.j2" %}
+{% block content %}
+
+<mj-column>
+  <mj-text font-family="Red Hat Text" color="#4a5557" font-size="16px" line-height="1.5" padding-bottom="12px">
+
+    <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.
+    We apologize for any inconvenience this may cause.</p>
+
+    <p>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 %}
+
+  </mj-text>
+</mj-column>
+
+{% endblock content %}

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

@@ -0,0 +1,62 @@
+{% extends "base.mjml.j2" %}
+{% block content %}
+
+<mj-column>
+  <mj-text font-family="Red Hat Text" color="#4a5557" font-size="16px" line-height="1.5" padding-bottom="12px">
+    <p>Thank you for ordering {{ catalog_item.display_name }}.</p>
+
+    <p>Your {{ catalog_namespace.display_name }} service {{ service_display_name }} is ready.</p>
+
+    <p>Always refer to the instructions to understand how to properly access and navigate your environment.</p>
+
+    <p>
+      <b>NOTICE:</b><br>
+      <ul>
+        <li>Your environment will be stopped in {{ stop_timedelta_humanized }} at {{ stop_timestamp }}.</li>
+        <li>Your environment will expire and be deleted in {{ retirement_timedelta_humanized }} at {{ retirement_timestamp }}.</li>
+      </ul>
+      In order to conserve resources, we cannot archive or restore any data in this environment.
+      All data will be lost upon expiration.
+    </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 %}
+
+  </mj-text>
+
+  {% if provision_messages is defined or provision_data is defined %}
+
+  <mj-text font-family="Red Hat Display" padding-bottom="8px" font-weight="bold" font-size="18px" color="#111" line-height="1.2">
+    Some important information about your environment
+  </mj-text>
+
+  {%   if provision_messages_html is defined %}
+  <mj-text font-family="Red Hat Text" color="#4a5557" font-size="16px" line-height="1.5" padding-bottom="12px">
+    {{ provision_messages_html }}
+  </mj-text>
+  {%   endif %}
+
+  {%   if provision_data is defined %}
+  <mj-text font-family="Red Hat Text" color="#4a5557" font-size="14px" line-height="1.5" padding-bottom="12px">
+    <dl>
+    {%   for k, v in provision_data.items() | sort %}
+    {%     if k != 'users' %}
+    <dt><b>{{ k | escape }}:</b></dt>
+    {%       if v is string or v is not iterable %}
+    <dd>{{ v | escape }}</dd>
+    {%       else %}
+    <dd><pre>{{ v | to_yaml | escape }}</pre></dd>
+    {%       endif %}
+    {%     endif %}
+    {%   endfor %}
+    </dl>
+  </mj-text>
+  {%   endif %}
+
+
+  {% endif %}
+</mj-column>
+
+{% endblock content %}

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

@@ -0,0 +1,25 @@
+{% extends "base.mjml.j2" %}
+{% block content %}
+
+<mj-column>
+  <mj-text font-family="Red Hat Text" color="#4a5557" font-size="16px" line-height="1.5" padding-bottom="12px">
+
+    <p>Your {{ catalog_namespace.display_name }} service {{ service_display_name }} has started.</p>
+
+    <p>
+      <b>NOTICE:</b><br>
+      <ul>
+        <li>Your environment will be stopped in {{ stop_timedelta_humanized }} at {{ stop_timestamp }}.</li>
+        <li>Your environment will expire and be deleted in {{ retirement_timedelta_humanized }} at {{ retirement_timestamp }}.</li>
+      </ul>
+    </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 %}
+
+  </mj-text>
+</mj-column>
+
+{% endblock content %}