Commit a6cec3bb authored by David O'Regan's avatar David O'Regan Committed by Kushal Pandya

Update mobile view for alert lists

parent 793b0ffd
...@@ -13,6 +13,8 @@ import { s__ } from '~/locale'; ...@@ -13,6 +13,8 @@ import { s__ } from '~/locale';
import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue'; import TimeAgo from '~/vue_shared/components/time_ago_tooltip.vue';
import getAlerts from '../graphql/queries/getAlerts.query.graphql'; import getAlerts from '../graphql/queries/getAlerts.query.graphql';
const tdClass = 'table-col d-flex d-md-table-cell align-items-center';
export default { export default {
i18n: { i18n: {
noAlertsMsg: s__( noAlertsMsg: s__(
...@@ -26,29 +28,34 @@ export default { ...@@ -26,29 +28,34 @@ export default {
{ {
key: 'severity', key: 'severity',
label: s__('AlertManagement|Severity'), label: s__('AlertManagement|Severity'),
tdClass: `${tdClass} rounded-top text-capitalize`,
}, },
{ {
key: 'startedAt', key: 'startedAt',
label: s__('AlertManagement|Start time'), label: s__('AlertManagement|Start time'),
tdClass,
}, },
{ {
key: 'endedAt', key: 'endedAt',
label: s__('AlertManagement|End time'), label: s__('AlertManagement|End time'),
tdClass,
}, },
{ {
key: 'title', key: 'title',
label: s__('AlertManagement|Alert'), label: s__('AlertManagement|Alert'),
thClass: 'w-30p', thClass: 'w-30p',
tdClass,
}, },
{ {
key: 'eventCount', key: 'eventCount',
label: s__('AlertManagement|Events'), label: s__('AlertManagement|Events'),
thClass: 'text-right event-count', thClass: 'text-right event-count',
tdClass: 'text-right event-count', tdClass: `${tdClass} text-md-right event-count`,
}, },
{ {
key: 'status', key: 'status',
label: s__('AlertManagement|Status'), label: s__('AlertManagement|Status'),
tdClass: `${tdClass} rounded-bottom text-capitalize`,
}, },
], ],
statuses: { statuses: {
...@@ -137,8 +144,11 @@ export default { ...@@ -137,8 +144,11 @@ export default {
{{ $options.i18n.errorMsg }} {{ $options.i18n.errorMsg }}
</gl-alert> </gl-alert>
<h4 class="d-block d-md-none my-3">
{{ s__('AlertManagement|Alerts') }}
</h4>
<gl-table <gl-table
class="mt-3" class="alert-management-table mt-3"
:items="alerts" :items="alerts"
:fields="$options.fields" :fields="$options.fields"
:show-empty="true" :show-empty="true"
...@@ -169,6 +179,7 @@ export default { ...@@ -169,6 +179,7 @@ export default {
<template #cell(title)="{ item }"> <template #cell(title)="{ item }">
<div class="gl-max-w-full text-truncate">{{ item.title }}</div> <div class="gl-max-w-full text-truncate">{{ item.title }}</div>
</template> </template>
<template #cell(status)="{ item }"> <template #cell(status)="{ item }">
<gl-new-dropdown class="w-100" :text="item.status"> <gl-new-dropdown class="w-100" :text="item.status">
<gl-new-dropdown-item v-for="(label, field) in $options.statuses" :key="field"> <gl-new-dropdown-item v-for="(label, field) in $options.statuses" :key="field">
......
...@@ -53,4 +53,25 @@ ...@@ -53,4 +53,25 @@
} }
} }
} }
@include media-breakpoint-down(sm) {
.alert-management-table {
.table-col {
min-height: 68px;
&:last-child {
background-color: $gray-normal;
&::before {
content: none !important;
}
div {
width: 100% !important;
padding: 0 !important;
}
}
}
}
}
} }
---
title: Alert Management mobile styling
merge_request: 31082
author:
type: other
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