diff --git a/app/assets/javascripts/alert_management/components/alert_management_list.vue b/app/assets/javascripts/alert_management/components/alert_management_list.vue index d7972de62d9c860397a9f704536f14d10194d156..37901c21f9b462ecdbca83472d53e78e5f8a5ac7 100644 --- a/app/assets/javascripts/alert_management/components/alert_management_list.vue +++ b/app/assets/javascripts/alert_management/components/alert_management_list.vue @@ -31,7 +31,8 @@ import updateAlertStatus from '../graphql/mutations/update_alert_status.graphql' import { convertToSnakeCase } from '~/lib/utils/text_utility'; import Tracking from '~/tracking'; -const tdClass = 'table-col d-flex d-md-table-cell align-items-center'; +const tdClass = 'table-col gl-display-flex d-md-table-cell gl-align-items-center'; +const thClass = 'gl-hover-bg-blue-50'; const bodyTrClass = 'gl-border-1 gl-border-t-solid gl-border-gray-100 gl-hover-bg-blue-50 gl-hover-cursor-pointer gl-hover-border-b-solid gl-hover-border-blue-200'; @@ -57,32 +58,34 @@ export default { key: 'severity', label: s__('AlertManagement|Severity'), tdClass: `${tdClass} rounded-top text-capitalize`, + thClass, sortable: true, }, { key: 'startedAt', label: s__('AlertManagement|Start time'), - thClass: 'js-started-at', + thClass: `${thClass} js-started-at`, tdClass, sortable: true, }, { key: 'endedAt', label: s__('AlertManagement|End time'), + thClass, tdClass, sortable: true, }, { key: 'title', label: s__('AlertManagement|Alert'), - thClass: 'w-30p alert-title', + thClass: `${thClass} w-30p gl-pointer-events-none`, tdClass, sortable: false, }, { key: 'eventCount', label: s__('AlertManagement|Events'), - thClass: 'text-right gl-pr-9 w-3rem', + thClass: `${thClass} text-right gl-pr-9 w-3rem`, tdClass: `${tdClass} text-md-right`, sortable: true, }, @@ -93,7 +96,7 @@ export default { }, { key: 'status', - thClass: 'w-15p', + thClass: `${thClass} w-15p`, label: s__('AlertManagement|Status'), tdClass: `${tdClass} rounded-bottom`, sortable: true, @@ -194,6 +197,7 @@ export default { pagination: initialPaginationState, sortBy: 'startedAt', sortDesc: true, + sortDirection: 'desc', }; }, computed: { @@ -239,11 +243,11 @@ export default { this.filteredByStatus = status; }, fetchSortedData({ sortBy, sortDesc }) { - const sortDirection = sortDesc ? 'DESC' : 'ASC'; - const sortColumn = convertToSnakeCase(sortBy).toUpperCase(); + const sortingDirection = sortDesc ? 'DESC' : 'ASC'; + const sortingColumn = convertToSnakeCase(sortBy).toUpperCase(); this.resetPagination(); - this.sort = `${sortColumn}_${sortDirection}`; + this.sort = `${sortingColumn}_${sortingDirection}`; }, updateAlertStatus(status, iid) { this.$apollo @@ -344,6 +348,7 @@ export default { stacked="md" :tbody-tr-class="tbodyTrClass" :no-local-sorting="true" + :sort-direction="sortDirection" :sort-desc.sync="sortDesc" :sort-by.sync="sortBy" sort-icon-left diff --git a/app/assets/stylesheets/pages/alert_management/list.scss b/app/assets/stylesheets/pages/alert_management/list.scss index f420949635428037856f4d24b1a499a3895a8820..c1ea9b7604aed3226567a7626ef0f3f297b24db1 100644 --- a/app/assets/stylesheets/pages/alert_management/list.scss +++ b/app/assets/stylesheets/pages/alert_management/list.scss @@ -8,22 +8,43 @@ outline: none; } + > :not([aria-sort='none']).b-table-sort-icon-left:hover::before { + content: '' !important; + } + td, th { // TODO: There is no gl-pl-9 utlity for this padding, to be done and then removed. padding-left: 1.25rem; @include gl-py-5; @include gl-outline-none; - - &.alert-title { - @include gl-pointer-events-none; - } + @include gl-relative; } th { background-color: transparent; font-weight: $gl-font-weight-bold; color: $gl-gray-600; + + &:hover::before { + left: 3%; + top: 34%; + @include gl-absolute; + content: url("data:image/svg+xml,%3Csvg \ + xmlns='http://www.w3.org/2000/svg' \ + width='14' height='14' viewBox='0 0 16 \ + 16'%3E%3Cpath fill='%23BABABA' fill-rule='evenodd' \ + d='M11.707085,11.7071 L7.999975,15.4142 L4.292875,11.7071 \ + C3.902375,11.3166 3.902375,10.6834 \ + 4.292875,10.2929 C4.683375,9.90237 \ + 5.316575,9.90237 5.707075,10.2929 \ + L6.999975,11.5858 L6.999975,2 C6.999975,1.44771 \ + 7.447695,1 7.999975,1 C8.552255,1 8.999975,1.44771 \ + 8.999975,2 L8.999975,11.5858 L10.292865,10.2929 \ + C10.683395,9.90237 11.316555,9.90237 11.707085,10.2929 \ + C12.097605,10.6834 12.097605,11.3166 11.707085,11.7071 \ + Z'/%3E%3C/svg%3E%0A"); + } } } diff --git a/changelogs/unreleased/lm-hover-state-sort.yml b/changelogs/unreleased/lm-hover-state-sort.yml new file mode 100644 index 0000000000000000000000000000000000000000..4a70151178708b70e19bed5819d2457c6fbf8ca0 --- /dev/null +++ b/changelogs/unreleased/lm-hover-state-sort.yml @@ -0,0 +1,5 @@ +--- +title: Add hovering icon for sorting columns on alert management list +merge_request: 33429 +author: +type: other diff --git a/spec/frontend/alert_management/components/alert_management_list_spec.js b/spec/frontend/alert_management/components/alert_management_list_spec.js index 39099f25150fccf3ec4ce54830c6093a466e8742..0154e5fa112bd49488358f7b2dc99b1c3239b960 100644 --- a/spec/frontend/alert_management/components/alert_management_list_spec.js +++ b/spec/frontend/alert_management/components/alert_management_list_spec.js @@ -344,11 +344,11 @@ describe('AlertManagementList', () => { it('updates sort with new direction and column key', () => { findSeverityColumnHeader().trigger('click'); - expect(wrapper.vm.$data.sort).toBe('SEVERITY_ASC'); + expect(wrapper.vm.$data.sort).toBe('SEVERITY_DESC'); findSeverityColumnHeader().trigger('click'); - expect(wrapper.vm.$data.sort).toBe('SEVERITY_DESC'); + expect(wrapper.vm.$data.sort).toBe('SEVERITY_ASC'); }); });