Commit 2b5c2980 authored by Andrew Fontaine's avatar Andrew Fontaine

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
parents d59c866b c76cba39
<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>
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', {});
},
});
};
import AlertDetails from '~/alert_management/details';
document.addEventListener('DOMContentLoaded', () => {
AlertDetails('#js-alert_details');
});
- page_title _('Alert Details') - page_title _('Alert Details')
#js-alert_details
...@@ -1704,9 +1704,18 @@ msgstr "" ...@@ -1704,9 +1704,18 @@ msgstr ""
msgid "AlertManagement|End time" msgid "AlertManagement|End time"
msgstr "" msgstr ""
msgid "AlertManagement|End time:"
msgstr ""
msgid "AlertManagement|Events" msgid "AlertManagement|Events"
msgstr "" msgstr ""
msgid "AlertManagement|Events:"
msgstr ""
msgid "AlertManagement|Full Alert Details"
msgstr ""
msgid "AlertManagement|More information" msgid "AlertManagement|More information"
msgstr "" msgstr ""
...@@ -1716,12 +1725,18 @@ msgstr "" ...@@ -1716,12 +1725,18 @@ msgstr ""
msgid "AlertManagement|No alerts to display." msgid "AlertManagement|No alerts to display."
msgstr "" msgstr ""
msgid "AlertManagement|Overview"
msgstr ""
msgid "AlertManagement|Severity" msgid "AlertManagement|Severity"
msgstr "" msgstr ""
msgid "AlertManagement|Start time" msgid "AlertManagement|Start time"
msgstr "" msgstr ""
msgid "AlertManagement|Start time:"
msgstr ""
msgid "AlertManagement|Status" msgid "AlertManagement|Status"
msgstr "" msgstr ""
......
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);
});
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment