From 0275a6d4fd7d91bf143d51385f6af623320cc4d3 Mon Sep 17 00:00:00 2001 From: Mike Greiling Date: Thu, 22 Sep 2016 23:17:41 -0500 Subject: implement ci notification email template (first pass) --- .../gitlab-logo-full-horizontal.gif | Bin 0 -> 3654 bytes .../mailers/ci_pipeline_notif_v1/gitlab-logo.gif | Bin 0 -> 3040 bytes .../ci_pipeline_notif_v1/icon-branch-gray.gif | Bin 0 -> 663 bytes .../ci_pipeline_notif_v1/icon-commit-gray.gif | Bin 0 -> 278 bytes .../ci_pipeline_notif_v1/icon-x-red-inverted.gif | Bin 0 -> 591 bytes .../mailers/ci_pipeline_notif_v1/icon-x-red.gif | Bin 0 -> 660 bytes app/views/notify/pipeline_failed_email.html.haml | 209 ++++++++++++++++----- 7 files changed, 167 insertions(+), 42 deletions(-) create mode 100644 app/assets/images/mailers/ci_pipeline_notif_v1/gitlab-logo-full-horizontal.gif create mode 100644 app/assets/images/mailers/ci_pipeline_notif_v1/gitlab-logo.gif create mode 100644 app/assets/images/mailers/ci_pipeline_notif_v1/icon-branch-gray.gif create mode 100644 app/assets/images/mailers/ci_pipeline_notif_v1/icon-commit-gray.gif create mode 100644 app/assets/images/mailers/ci_pipeline_notif_v1/icon-x-red-inverted.gif create mode 100644 app/assets/images/mailers/ci_pipeline_notif_v1/icon-x-red.gif (limited to 'app') diff --git a/app/assets/images/mailers/ci_pipeline_notif_v1/gitlab-logo-full-horizontal.gif b/app/assets/images/mailers/ci_pipeline_notif_v1/gitlab-logo-full-horizontal.gif new file mode 100644 index 00000000000..3f4ef31947b Binary files /dev/null and b/app/assets/images/mailers/ci_pipeline_notif_v1/gitlab-logo-full-horizontal.gif differ diff --git a/app/assets/images/mailers/ci_pipeline_notif_v1/gitlab-logo.gif b/app/assets/images/mailers/ci_pipeline_notif_v1/gitlab-logo.gif new file mode 100644 index 00000000000..387628f831c Binary files /dev/null and b/app/assets/images/mailers/ci_pipeline_notif_v1/gitlab-logo.gif differ diff --git a/app/assets/images/mailers/ci_pipeline_notif_v1/icon-branch-gray.gif b/app/assets/images/mailers/ci_pipeline_notif_v1/icon-branch-gray.gif new file mode 100644 index 00000000000..5f8f8ca143c Binary files /dev/null and b/app/assets/images/mailers/ci_pipeline_notif_v1/icon-branch-gray.gif differ diff --git a/app/assets/images/mailers/ci_pipeline_notif_v1/icon-commit-gray.gif b/app/assets/images/mailers/ci_pipeline_notif_v1/icon-commit-gray.gif new file mode 100644 index 00000000000..8fe3281d2f6 Binary files /dev/null and b/app/assets/images/mailers/ci_pipeline_notif_v1/icon-commit-gray.gif differ diff --git a/app/assets/images/mailers/ci_pipeline_notif_v1/icon-x-red-inverted.gif b/app/assets/images/mailers/ci_pipeline_notif_v1/icon-x-red-inverted.gif new file mode 100644 index 00000000000..798c2531be0 Binary files /dev/null and b/app/assets/images/mailers/ci_pipeline_notif_v1/icon-x-red-inverted.gif differ diff --git a/app/assets/images/mailers/ci_pipeline_notif_v1/icon-x-red.gif b/app/assets/images/mailers/ci_pipeline_notif_v1/icon-x-red.gif new file mode 100644 index 00000000000..6de166ce0a2 Binary files /dev/null and b/app/assets/images/mailers/ci_pipeline_notif_v1/icon-x-red.gif differ diff --git a/app/views/notify/pipeline_failed_email.html.haml b/app/views/notify/pipeline_failed_email.html.haml index 44eff38b571..3196916648c 100644 --- a/app/views/notify/pipeline_failed_email.html.haml +++ b/app/views/notify/pipeline_failed_email.html.haml @@ -1,43 +1,168 @@ -.p - Project: - = @project.path_with_namespace -.p - Branch: - = @pipeline.ref -.p - Commit: - = @pipeline.short_sha - ( - = @pipeline.sha - ) -.p - Commit Message: - = @pipeline.git_commit_message -.p - Commit Author: - = @pipeline.git_author_name -.p - Pusher: - = @pipeline.user.try(:name) -- failed = @pipeline.statuses.latest.failed -.p - Pipeline # - = @pipeline.id - had - = failed.size - failed - = 'job'.pluralize(failed.size) +!!! +%html{:lang => "en"} + %head + %meta{:content => "text/html; charset=UTF-8", "http-equiv" => "Content-Type"}/ + %meta{:content => "width=device-width, initial-scale=1", :name => "viewport"}/ + %meta{:content => "IE=edge", "http-equiv" => "X-UA-Compatible"}/ + %title + :css + /* CLIENT-SPECIFIC STYLES */ + body, table, td, a { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } + table, td { mso-table-lspace: 0pt; mso-table-rspace: 0pt; } + img { -ms-interpolation-mode: bicubic; } -- failed.each do |job| - .p - ID: - = job.id - .p - Stage: - = job.stage - .p - Name: - = job.name - .p - Trace: - = job.trace_with_state[:html].html_safe + /* iOS BLUE LINKS */ + a[x-apple-data-detectors] { + color: inherit !important; + text-decoration: none !important; + font-size: inherit !important; + font-family: inherit !important; + font-weight: inherit !important; + line-height: inherit !important; + } + + /* ANDROID MARGIN HACK */ + body { margin:0 !important; } + div[style*="margin: 16px 0"] { margin:0 !important; } + + @media only screen and (max-width: 639px) { + body, #body { + min-width: 320px !important; + } + table.wrapper { + width: 100% !important; + min-width: 320px !important; + } + table.wrapper > tbody > tr > td { + border-left: 0 !important; + border-right: 0 !important; + border-radius: 0 !important; + padding: 0 10px !important; + } + } + %body{:style => "background-color:#fafafa;margin:0;padding:0;text-align:center;min-width:640px;width:100%;height:100%;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;"} + %table#body{:border => "0", :cellpadding => "0", :cellspacing => "0", :style => "background-color:#fafafa;margin:0;padding:0;text-align:center;min-width:640px;width:100%;"} + %tbody + %tr.line + %td{:style => "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:#6b4fbb;height:4px;font-size:4px;line-height:4px;"}   + %tr.header + %td{:style => "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:25px 0;font-size:13px;line-height:1.6;color:#5c5c5c;"} + %img{:alt => "GitLab", :height => "50", :src => image_url('mailers/ci_pipeline_notif_v1/gitlab-logo.gif'), :width => "55"}/ + %tr + %td{:style => "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;"} + %table.wrapper{:border => "0", :cellpadding => "0", :cellspacing => "0", :style => "width:640px;margin:0 auto;border-collapse:separate;border-spacing:0;"} + %tbody + %tr + %td{:style => "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;background-color:#ffffff;text-align:left;padding:0 25px 25px;border:1px solid #ededed;border-radius:3px;overflow:hidden;"} + %table.content{:border => "0", :cellpadding => "0", :cellspacing => "0", :style => "width:100%;border-collapse:separate;border-spacing:0;"} + %tbody + %tr.alert + %td{:style => "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:10px;border-radius:3px;font-size:14px;line-height:1.3;text-align:center;overflow:hidden;background-color:#d22f57;color:#ffffff;"} + %table.img{:border => "0", :cellpadding => "0", :cellspacing => "0", :style => "border-collapse:collapse;margin:0 auto;"} + %tbody + %tr + %td{:style => "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;vertical-align:middle;color:#ffffff;text-align:center;padding-right:5px;"} + %img{:alt => "x", :height => "10", :src => image_url('mailers/ci_pipeline_notif_v1/icon-x-red-inverted.gif'), :style => "display:block;", :width => "10"}/ + %td{:style => "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;vertical-align:middle;color:#ffffff;text-align:center;"} Uh oh, your CI pipeline has failed. + %tr.spacer + %td{:style => "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;height:18px;font-size:18px;line-height:18px;"} +   + %tr.section + %td{:style => "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:0 15px;border:1px solid #ededed;border-radius:3px;overflow:hidden;"} + %table.info{:border => "0", :cellpadding => "0", :cellspacing => "0", :style => "width:100%;"} + %tbody + %tr + %td{:style => "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;"} Project + %td{:style => "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;color:#333333;font-weight:400;width:75%;padding-left:5px;"} + - if @project.group + %a.muted{:href => group_url(@project.group), :style => "color:#333333;text-decoration:none;"} + = @project.group.name + - else + %a.muted{:href => user_url(@project.namespace.owner), :style => "color:#333333;text-decoration:none;"} + = @project.namespace.owner.name + \/ + %a.muted{:href => namespace_project_url(@project.namespace, @project), :style => "color:#333333;text-decoration:none;"} + = @project.name + %tr + %td{:style => "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;border-top:1px solid #ededed;"} Branch + %td{:style => "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;color:#333333;font-weight:400;width:75%;padding-left:5px;border-top:1px solid #ededed;"} + %table.img{:border => "0", :cellpadding => "0", :cellspacing => "0", :style => "border-collapse:collapse;"} + %tbody + %tr + %td{:style => "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;padding-right:5px;"} + %img{:height => "13", :src => image_url('mailers/ci_pipeline_notif_v1/icon-branch-gray.gif'), :style => "display:block;", :width => "13"}/ + %td{:style => "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;"} + %a.muted{:href => namespace_project_commits_path(@project.namespace, @project, @pipeline.ref), :style => "color:#333333;text-decoration:none;"} + = @pipeline.ref + ( + %a{:href => "{{{merge-request-link}}}", :style => "color:#3084bb;text-decoration:none;white-space: nowrap;"}> merge request + ) + %tr + %td{:style => "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;border-top:1px solid #ededed;"} Commit + %td{:style => "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;color:#333333;font-weight:400;width:75%;padding-left:5px;border-top:1px solid #ededed;"} + %table.img{:border => "0", :cellpadding => "0", :cellspacing => "0", :style => "border-collapse:collapse;"} + %tbody + %tr + %td{:style => "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;padding-right:5px;"} + %img{:height => "13", :src => image_url('mailers/ci_pipeline_notif_v1/icon-commit-gray.gif'), :style => "display:block;", :width => "13"}/ + %td{:style => "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;"} + %a{:href => namespace_project_commit_url(@project.namespace, @project, @pipeline.sha), :style => "color:#3084bb;text-decoration:none;"} + = @pipeline.short_sha + .commit{:style => "color:#5c5c5c;font-weight:300;"} + = @pipeline.git_commit_message.truncate(50) + %tr + %td{:style => "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;border-top:1px solid #ededed;"} Author + %td{:style => "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;color:#8c8c8c;font-weight:300;padding:14px 0;margin:0;color:#333333;font-weight:400;width:75%;padding-left:5px;border-top:1px solid #ededed;"} + %table.img{:border => "0", :cellpadding => "0", :cellspacing => "0", :style => "border-collapse:collapse;"} + %tbody + %tr + %td{:style => "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;padding-right:5px;"} + %img.avatar{:height => "24", :src => "{{{commit-author-avatar-url}}}", :style => "display:block;border-radius:12px;margin:-2px 0;", :width => "24"}/ + %td{:style => "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:15px;line-height:1.4;vertical-align:middle;"} + %a.muted{:href => "{{{commit-author-link}}}", :style => "color:#333333;text-decoration:none;"} + = @pipeline.git_author_name + %tr.spacer + %td{:style => "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;height:18px;font-size:18px;line-height:18px;"} +   + - failed = @pipeline.statuses.latest.failed + %tr.pre-section + %td{:style => "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:#333333;font-size:15px;font-weight:400;line-height:1.4;padding:15px 0;"} + Pipeline + %a{:href => "{{{pipline-link}}}", :style => "color:#3084bb;text-decoration:none;"} + = "\##{@pipeline.id}" + had + = failed.size + failed + = 'build'.pluralize(failed.size) + '.' + %tr.warning + %td{:style => "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;border:1px solid #ededed;border-bottom:0;border-radius:3px 3px 0 0;overflow:hidden;background-color:#fdf4f6;color:#d22852;font-size:14px;line-height:1.4;text-align:center;padding:8px 15px;"} + Logs may contain sensitive data. Please consider before forwarding this email. + %tr.section + %td{:style => "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:0 15px;border:1px solid #ededed;border-radius:3px;overflow:hidden;border-top:0;border-radius:0 0 3px 3px;"} + %table.builds{:border => "0", :cellpadding => "0", :cellspacing => "0", :style => "width:100%;border-collapse:collapse;"} + %tbody + - failed.each do |build| + %tr.build-state + %td{:style => "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:20px 0;color:#8c8c8c;font-weight:500;font-size:15px;"} + %table.img{:border => "0", :cellpadding => "0", :cellspacing => "0", :style => "border-collapse:collapse;"} + %tbody + %tr + %td{:style => "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:#8c8c8c;font-weight:500;font-size:15px;vertical-align:middle;padding-right:5px;"} + %img{:alt => "x", :height => "10", :src => image_url('mailers/ci_pipeline_notif_v1/icon-x-red.gif'), :style => "display:block;", :width => "10"}/ + %td{:style => "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;color:#8c8c8c;font-weight:500;font-size:15px;vertical-align:middle;"} + = build.stage + %td{:align => "right", :style => "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:20px 0;color:#8c8c8c;font-weight:500;font-size:15px;"} + %a{:href => "{{{pipeline-build-link}}}", :style => "color:#3084bb;text-decoration:none;"} + = build.name + %tr.build-log + %td{:colspan => "2", :style => "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:0 0 15px;"} + %pre{:style => "font-family:Monaco,'Lucida Console','Courier New',Courier,monospace;background-color:#fafafa;border-radius:3px;overflow:hidden;white-space:pre-wrap;word-break:break-all;font-size:13px;line-height:1.4;padding:12px;color:#333333;margin:0;"} + = build.trace_with_state[:html].html_safe + %tr.footer + %td{:style => "font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;padding:25px 0;font-size:13px;line-height:1.6;color:#5c5c5c;"} + %img{:alt => "GitLab", :height => "33", :src => image_url('mailers/ci_pipeline_notif_v1/gitlab-logo-full-horizontal.gif'), :style => "display:block;margin:0 auto 1em;", :width => "90"}/ + %div + %a{:href => "{{{manage-notifications-link}}}", :style => "color:#3084bb;text-decoration:none;"} Manage all notifications + · + %a{:href => "{{{help-link}}}", :style => "color:#3084bb;text-decoration:none;"} Help + %div GitLab, 1233 Howard St 2F, San Francisco, CA 94103, USA -- cgit v1.2.3