Commit b93af54c authored by Jose Vargas's avatar Jose Vargas

Fix error tracking page, not showing an empty state

This MR adds a missing empty state for when a backend response
contains an empty error list, it shows the table but with
`no data to display` empty state, also adds a reload button
that allows to refresh for data
parent 25c91fa4
......@@ -48,7 +48,7 @@ export default {
}
},
methods: {
...mapActions(['startPolling']),
...mapActions(['startPolling', 'restartPolling']),
},
};
</script>
......@@ -56,19 +56,17 @@ export default {
<template>
<div>
<div v-if="errorTrackingEnabled">
<div v-if="loading" class="py-3"><gl-loading-icon :size="3" /></div>
<div v-if="loading" class="py-3">
<gl-loading-icon :size="3" />
</div>
<div v-else>
<div class="d-flex justify-content-end">
<gl-button class="my-3 ml-auto" variant="primary" :href="externalUrl" target="_blank"
>View in Sentry <icon name="external-link" />
<gl-button class="my-3 ml-auto" variant="primary" :href="externalUrl" target="_blank">
{{ __('View in Sentry') }}
<icon name="external-link" />
</gl-button>
</div>
<gl-table
:items="errors"
:fields="$options.fields"
:show-empty="true"
:empty-text="__('No errors to display')"
>
<gl-table :items="errors" :fields="$options.fields" :show-empty="true">
<template slot="HEAD_events" slot-scope="data">
<div class="text-right">{{ data.label }}</div>
</template>
......@@ -102,6 +100,14 @@ export default {
<time-ago :time="errors.item.lastSeen" class="text-secondary" />
</div>
</template>
<template slot="empty">
<div ref="empty">
{{ __('No errors to display.') }}
<gl-link class="js-try-again" @click="restartPolling">
{{ __('Check again') }}
</gl-link>
</div>
</template>
</gl-table>
</div>
</div>
......
......@@ -6,7 +6,7 @@ import { __, sprintf } from '~/locale';
let eTagPoll;
export function startPolling({ commit }, endpoint) {
export function startPolling({ commit, dispatch }, endpoint) {
eTagPoll = new Poll({
resource: Service,
method: 'getErrorList',
......@@ -18,6 +18,7 @@ export function startPolling({ commit }, endpoint) {
commit(types.SET_ERRORS, data.errors);
commit(types.SET_EXTERNAL_URL, data.external_url);
commit(types.SET_LOADING, false);
dispatch('stopPolling');
},
errorCallback: response => {
let errorMessage = '';
......@@ -36,4 +37,16 @@ export function startPolling({ commit }, endpoint) {
eTagPoll.makeRequest();
}
export const stopPolling = () => {
if (eTagPoll) eTagPoll.stop();
};
export function restartPolling({ commit }) {
commit(types.SET_ERRORS, []);
commit(types.SET_EXTERNAL_URL, '');
commit(types.SET_LOADING, true);
if (eTagPoll) eTagPoll.restart();
}
export default () => {};
---
title: Fix error tracking list page
merge_request: 24806
author:
type: fixed
......@@ -1386,6 +1386,9 @@ msgstr ""
msgid "Chat"
msgstr ""
msgid "Check again"
msgstr ""
msgid "Check the %{docs_link_start}documentation%{docs_link_end}."
msgstr ""
......@@ -5000,7 +5003,7 @@ msgstr ""
msgid "No due date"
msgstr ""
msgid "No errors to display"
msgid "No errors to display."
msgstr ""
msgid "No estimate or time spent"
......@@ -8321,6 +8324,9 @@ msgstr ""
msgid "View group labels"
msgstr ""
msgid "View in Sentry"
msgstr ""
msgid "View it on GitLab"
msgstr ""
......
import { createLocalVue, shallowMount } from '@vue/test-utils';
import Vuex from 'vuex';
import ErrorTrackingList from '~/error_tracking/components/error_tracking_list.vue';
import { GlButton, GlEmptyState, GlLoadingIcon, GlTable } from '@gitlab/ui';
import { GlButton, GlEmptyState, GlLoadingIcon, GlTable, GlLink } from '@gitlab/ui';
const localVue = createLocalVue();
localVue.use(Vuex);
......@@ -9,6 +9,7 @@ localVue.use(Vuex);
describe('ErrorTrackingList', () => {
let store;
let wrapper;
let actions;
function mountComponent({ errorTrackingEnabled = true } = {}) {
wrapper = shallowMount(ErrorTrackingList, {
......@@ -20,12 +21,17 @@ describe('ErrorTrackingList', () => {
errorTrackingEnabled,
illustrationPath: 'illustration/path',
},
stubs: {
'gl-link': GlLink,
},
});
}
beforeEach(() => {
const actions = {
actions = {
getErrorList: () => {},
startPolling: () => {},
restartPolling: jasmine.createSpy('restartPolling'),
};
const state = {
......@@ -83,6 +89,18 @@ describe('ErrorTrackingList', () => {
expect(wrapper.find(GlTable).exists()).toBeTruthy();
expect(wrapper.find(GlButton).exists()).toBeTruthy();
});
it('shows a message prompting to refresh', () => {
const refreshLink = wrapper.vm.$refs.empty.querySelector('a');
expect(refreshLink.textContent.trim()).toContain('Check again');
});
it('restarts polling', () => {
wrapper.find('.js-try-again').trigger('click');
expect(actions.restartPolling).toHaveBeenCalled();
});
});
describe('error tracking feature disabled', () => {
......
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