UI polish on the webhook log page

Changelog: changed

app/views/projects/hook_logs/show.html.haml

@@ -2,11 +2,11 @@
 - add_to_breadcrumbs _('Webhook Settings'), namespace_project_hooks_path
 - page_title _('Webhook Logs')
 
-.row.gl-mt-3.gl-mb-3
-  .col-lg-3
-    %h4.gl-mt-0
+%h3.page-title
   = _("Request details")
-  .col-lg-9
-    = link_to _('Resend Request'), @hook_log.present.retry_path, method: :post, class: "btn gl-button btn-default float-right gl-ml-3"
 
-    = render partial: 'shared/hook_logs/content', locals: { hook_log: @hook_log }
+%hr
+
+= link_to _("Resend Request"), @hook_log.present.retry_path, method: :post, class: "btn gl-button btn-default float-right gl-ml-3"
+
+= render partial: 'shared/hook_logs/content', locals: { hook_log: @hook_log }

app/views/shared/hook_logs/_content.html.haml

-%p
-  %strong Request URL:
+%span.gl-display-flex.gl-align-items-center
+  %h4
     POST
     = hook_log.url
-  = render partial: 'shared/hook_logs/status_label', locals: { hook_log: hook_log }
-
-%p
-  %strong Trigger:
-  %td.d-none.d-sm-block
-    %span.badge.badge-gray.deploy-project-label
+  %span.badge.gl-badge.badge-pill.badge-muted.sm.gl-ml-3
     = hook_log.trigger.singularize.titleize
+
 %p
-  %strong Elapsed time:
-  #{number_with_precision(hook_log.execution_duration, precision: 2)} sec
-%p
-  %strong Request time:
-  = time_ago_with_tooltip(hook_log.created_at)
+  = _('Completed in %{duration_seconds} seconds (%{relative_time})').html_safe % { duration_seconds: number_with_precision(hook_log.execution_duration, precision: 2), relative_time: time_ago_with_tooltip(hook_log.created_at) }
 
 %hr
 
 - if hook_log.internal_error_message.present?
-  .bs-callout.bs-callout-danger
-    = hook_log.internal_error_message
+  .gl-alert-container
+    .gl-alert.gl-alert-danger
+      .gl-alert-container
+        = sprite_icon('error', size: 16, css_class: 'gl-icon gl-alert-icon gl-alert-icon-no-title')
+        .gl-alert-content
+          %h4.gl-alert-title= _('Internal error occured while delivering this webhook.')
+          .gl-alert-body
+            = _('Error: %{error}') % { error: hook_log.internal_error_message }
 
-%h5 Request headers:
+%h4= _('Response')
+= render partial: 'shared/hook_logs/status_label', locals: { hook_log: hook_log }
+%pre.gl-mt-3
+  :escaped
+    #{hook_log.response_body}
+
+%h5= _('Headers')
 %pre
-  - hook_log.request_headers.each do |k, v|
-    <strong>#{k}:</strong> #{v}
+  - hook_log.response_headers.each do |k, v|
+    <span class="gl-font-weight-bold">#{k}:</span> #{v}
     %br
 
-%h5 Request body:
+%h4.gl-mt-6= _('Request')
 %pre
   :escaped
     #{Gitlab::Json.pretty_generate(hook_log.request_data)}
-%h5 Response headers:
+
+%h5= _('Headers')
 %pre
-  - hook_log.response_headers.each do |k, v|
-    <strong>#{k}:</strong> #{v}
+  - hook_log.request_headers.each do |k, v|
+    <span class="gl-font-weight-bold">#{k}:</span> #{v}
     %br
 
-%h5 Response body:
-%pre
-  :escaped
-    #{hook_log.response_body}
+
+

locale/gitlab.pot

@@ -8488,6 +8488,9 @@ msgstr ""
 msgid "Completed"
 msgstr ""
 
+msgid "Completed in %{duration_seconds} seconds (%{relative_time})"
+msgstr ""
+
 msgid "Compliance framework"
 msgstr ""
 
@@ -13471,6 +13474,9 @@ msgstr ""
 msgid "Error: %{error_message}"
 msgstr ""
 
+msgid "Error: %{error}"
+msgstr ""
+
 msgid "Error: Couldn't load some or all of the changes."
 msgstr ""
 
@@ -16755,6 +16761,9 @@ msgstr ""
 msgid "Header must be associated with a request or response"
 msgstr ""
 
+msgid "Headers"
+msgstr ""
+
 msgid "Heading 1"
 msgstr ""
 
@@ -18504,6 +18513,9 @@ msgstr ""
 msgid "Internal URL (optional)"
 msgstr ""
 
+msgid "Internal error occured while delivering this webhook."
+msgstr ""
+
 msgid "Internal users"
 msgstr ""
 
@@ -28946,6 +28958,9 @@ msgstr ""
 msgid "RepositorySettingsAccessLevel|Select"
 msgstr ""
 
+msgid "Request"
+msgstr ""
+
 msgid "Request Access"
 msgstr ""