Merge branch 'lm-1-add-details-view-skeleton' into 'master'

Adds the detailed alert skeleton for alert management

See merge request gitlab-org/gitlab!30804

app/assets/javascripts/alert_management/components/alert_details.vue

+<script>
+import { GlTabs, GlTab } from '@gitlab/ui';
+import { s__ } from '~/locale';
+
+export default {
+  i18n: {
+    fullAlertDetailsTitle: s__('AlertManagement|Full Alert Details'),
+    overviewTitle: s__('AlertManagement|Overview'),
+  },
+  components: {
+    GlTab,
+    GlTabs,
+  },
+};
+</script>
+<template>
+  <div>
+    <div class="d-flex justify-content-between">
+      <gl-tabs>
+        <gl-tab data-testid="overviewTab" :title="$options.i18n.overviewTitle">
+          <ul class="pl-3">
+            <li data-testid="startTimeItem" class="font-weight-bold mb-3 mt-2">
+              {{ s__('AlertManagement|Start time:') }}
+            </li>
+            <li class="font-weight-bold my-3">
+              {{ s__('AlertManagement|End time:') }}
+            </li>
+            <li class="font-weight-bold my-3">
+              {{ s__('AlertManagement|Events:') }}
+            </li>
+          </ul>
+        </gl-tab>
+        <gl-tab data-testid="fullDetailsTab" :title="$options.i18n.fullAlertDetailsTitle" />
+      </gl-tabs>
+    </div>
+  </div>
+</template>

app/assets/javascripts/alert_management/details.js

+import Vue from 'vue';
+import AlertDetails from './components/alert_details.vue';
+
+export default selector => {
+  // eslint-disable-next-line no-new
+  new Vue({
+    el: selector,
+    components: {
+      AlertDetails,
+    },
+    render(createElement) {
+      return createElement('alert-details', {});
+    },
+  });
+};

app/assets/javascripts/pages/projects/alert_management/details/index.js

+import AlertDetails from '~/alert_management/details';
+
+document.addEventListener('DOMContentLoaded', () => {
+  AlertDetails('#js-alert_details');
+});

app/views/projects/alert_management/details.html.haml

 - page_title _('Alert Details')
+
+#js-alert_details

locale/gitlab.pot

@@ -1704,9 +1704,18 @@ msgstr ""
 msgid "AlertManagement|End time"
 msgstr ""
 
+msgid "AlertManagement|End time:"
+msgstr ""
+
 msgid "AlertManagement|Events"
 msgstr ""
 
+msgid "AlertManagement|Events:"
+msgstr ""
+
+msgid "AlertManagement|Full Alert Details"
+msgstr ""
+
 msgid "AlertManagement|More information"
 msgstr ""
 
@@ -1716,12 +1725,18 @@ msgstr ""
 msgid "AlertManagement|No alerts to display."
 msgstr ""
 
+msgid "AlertManagement|Overview"
+msgstr ""
+
 msgid "AlertManagement|Severity"
 msgstr ""
 
 msgid "AlertManagement|Start time"
 msgstr ""
 
+msgid "AlertManagement|Start time:"
+msgstr ""
+
 msgid "AlertManagement|Status"
 msgstr ""
 

spec/frontend/alert_management/components/alert_management_detail_spec.js

+import { shallowMount } from '@vue/test-utils';
+import AlertDetails from '~/alert_management/components/alert_details.vue';
+
+describe('AlertDetails', () => {
+  let wrapper;
+
+  function mountComponent() {
+    wrapper = shallowMount(AlertDetails);
+  }
+
+  beforeEach(() => {
+    mountComponent();
+  });
+
+  afterEach(() => {
+    if (wrapper) {
+      wrapper.destroy();
+    }
+  });
+
+  describe('Alert details', () => {
+    it('renders a tab with overview information', () => {
+      expect(wrapper.find('[data-testid="overviewTab"]').exists()).toBe(true);
+    });
+
+    it('renders a tab with full alert information', () => {
+      expect(wrapper.find('[data-testid="fullDetailsTab"]').exists()).toBe(true);
+    });
+
+    it('renders alert details', () => {
+      expect(wrapper.find('[data-testid="startTimeItem"]').exists()).toBe(true);
+    });
+  });
+});