Commit 461d574c authored by Phil Hughes's avatar Phil Hughes

Merge branch '196547-list-issues-upon-clicking-bar-in-issue-analytics-charts' into 'master'

Resolve "Add table to Issues Analytics"

See merge request gitlab-org/gitlab!30603
parents 5111b545 b46573ad
......@@ -6,6 +6,7 @@ import { GlColumnChart, GlChartLegend } from '@gitlab/ui/dist/charts';
import { s__ } from '~/locale';
import { getMonthNames } from '~/lib/utils/datetime_utility';
import { getSvgIconPathContent } from '~/lib/utils/icon_utils';
import IssuesAnalyticsTable from './issues_analytics_table.vue';
export default {
components: {
......@@ -13,12 +14,21 @@ export default {
GlEmptyState,
GlColumnChart,
GlChartLegend,
IssuesAnalyticsTable,
},
props: {
endpoint: {
type: String,
required: true,
},
issuesApiEndpoint: {
type: String,
required: true,
},
issuesPageEndpoint: {
type: String,
required: true,
},
filterBlockEl: {
type: HTMLDivElement,
required: true,
......@@ -99,6 +109,12 @@ export default {
seriesTotal() {
return engineeringNotation(sum(...this.series));
},
issuesTableEndpoints() {
return {
api: `${this.issuesApiEndpoint}${this.appliedFilters}`,
issuesPage: this.issuesPageEndpoint,
};
},
},
watch: {
appliedFilters() {
......@@ -142,7 +158,7 @@ export default {
</script>
<template>
<div class="issues-analytics-wrapper" data-qa-selector="issues_analytics_wrapper">
<gl-loading-icon v-if="loading" size="xl" class="issues-analytics-loading" />
<gl-loading-icon v-if="loading" size="md" class="mt-8" />
<div v-if="showChart" class="issues-analytics-chart">
<h4 class="chart-title">{{ s__('IssuesAnalytics|Issues opened per month') }}</h4>
......@@ -166,6 +182,8 @@ export default {
</div>
</div>
<issues-analytics-table :key="appliedFilters" class="mt-8" :endpoints="issuesTableEndpoints" />
<gl-empty-state
v-if="showFiltersEmptyState"
:title="s__('IssuesAnalytics|Sorry, your filter produced no results')"
......
<script>
import {
GlTable,
GlLoadingIcon,
GlLink,
GlIcon,
GlAvatarLink,
GlAvatar,
GlAvatarsInline,
GlTooltipDirective,
GlPopover,
GlLabel,
} from '@gitlab/ui';
import axios from '~/lib/utils/axios_utils';
import { s__, n__ } from '~/locale';
import createFlash from '~/flash';
import { getDayDifference } from '~/lib/utils/datetime_utility';
import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
import { mergeUrlParams } from '~/lib/utils/url_utility';
const DEFAULT_API_URL_PARAMS = { with_labels_details: true, per_page: 100 };
const SYMBOL = {
ISSUE: '#',
EPIC: '&',
};
const TH_TEST_ID = { 'data-testid': 'header' };
export default {
name: 'IssuesAnalyticsTable',
components: {
GlTable,
GlLoadingIcon,
GlLink,
GlIcon,
GlAvatarLink,
GlAvatar,
GlAvatarsInline,
GlPopover,
GlLabel,
},
directives: {
GlTooltip: GlTooltipDirective,
},
props: {
endpoints: {
type: Object,
required: true,
},
},
tableHeaderFields: [
{
key: 'issue_details',
label: s__('IssueAnalytics|Issue'),
tdClass: 'issues-analytics-td',
thAttr: TH_TEST_ID,
},
{
key: 'created_at',
label: s__('IssueAnalytics|Age'),
class: 'gl-text-left',
thAttr: TH_TEST_ID,
},
{
key: 'state',
label: s__('IssueAnalytics|Status'),
thAttr: TH_TEST_ID,
},
{
key: 'milestone',
label: s__('IssueAnalytics|Milestone'),
thAttr: TH_TEST_ID,
},
{
key: 'weight',
label: s__('IssueAnalytics|Weight'),
class: 'gl-text-right',
thAttr: TH_TEST_ID,
},
{
key: 'due_date',
label: s__('IssueAnalytics|Due date'),
class: 'gl-text-left',
thAttr: TH_TEST_ID,
},
{
key: 'assignees',
label: s__('IssueAnalytics|Assignees'),
class: 'gl-text-left',
thAttr: TH_TEST_ID,
},
{
key: 'author',
label: s__('IssueAnalytics|Opened by'),
class: 'gl-text-left',
thAttr: TH_TEST_ID,
},
],
data() {
return {
issues: [],
isLoading: true,
};
},
created() {
this.fetchIssues();
},
methods: {
fetchIssues() {
return axios
.get(mergeUrlParams(DEFAULT_API_URL_PARAMS, this.endpoints.api))
.then(({ data }) => {
this.issues = data;
this.isLoading = false;
})
.catch(() => {
createFlash(s__('IssueAnalytics|Failed to load issues. Please try again.'));
this.isLoading = false;
});
},
formatAge(date) {
return n__('%d day', '%d days', getDayDifference(new Date(date), new Date(Date.now())));
},
formatStatus(status) {
return capitalizeFirstCharacter(status);
},
formatIssueId(id) {
return `${SYMBOL.ISSUE}${id}`;
},
formatEpicId(id) {
return `${SYMBOL.EPIC}${id}`;
},
labelTarget(name) {
return mergeUrlParams({ 'label_name[]': name }, this.endpoints.issuesPage);
},
},
avatarSize: 24,
};
</script>
<template>
<gl-loading-icon v-if="isLoading" size="md" />
<gl-table
v-else
:fields="$options.tableHeaderFields"
:items="issues"
stacked="sm"
thead-class="thead-white border-bottom"
striped
>
<template #cell(issue_details)="{ item }">
<div class="gl-display-flex gl-flex-direction-column gl-flex-grow-1" data-testid="detailsCol">
<div class="issue-title str-truncated">
<gl-link :href="item.web_url" target="_blank" class="gl-font-weight-bold text-plain">{{
item.title
}}</gl-link>
</div>
<ul class="horizontal-list list-items-separated gl-mb-0">
<li>{{ formatIssueId(item.iid) }}</li>
<li v-if="item.epic">{{ formatEpicId(item.epic.iid) }}</li>
<li v-if="item.labels.length">
<span :id="`${item.id}-labels`" class="gl-display-flex gl-align-items-center">
<gl-icon name="label" class="gl-mr-1" />
{{ item.labels.length }}
</span>
<gl-popover
:target="`${item.id}-labels`"
placement="top"
triggers="hover"
:css-classes="['issue-labels-popover']"
>
<div class="gl-display-flex gl-justify-content-start gl-flex-wrap gl-mr-1">
<gl-label
v-for="label in item.labels"
:key="label.id"
:title="label.name"
:background-color="label.color"
:description="label.description"
:scoped="label.name.includes('::')"
class="gl-ml-1 gl-mt-1"
:target="labelTarget(label.name)"
/>
</div>
</gl-popover>
</li>
</ul>
</div>
</template>
<template #cell(created_at)="{ value }">
<div data-testid="ageCol">{{ formatAge(value) }}</div>
</template>
<template #cell(state)="{ value }">
<div data-testid="statusCol">{{ formatStatus(value) }}</div>
</template>
<template #cell(milestone)="{ value }">
<template v-if="value">
<div class="milestone-title str-truncated">
{{ value.title }}
</div>
</template>
</template>
<template #cell(assignees)="{ value }">
<gl-avatars-inline
:avatars="value"
:avatar-size="$options.avatarSize"
:max-visible="2"
collapsed
>
<template #avatar="{ avatar }">
<gl-avatar-link v-gl-tooltip target="_blank" :href="avatar.web_url" :title="avatar.name">
<gl-avatar :src="avatar.avatar_url" :size="$options.avatarSize" />
</gl-avatar-link>
</template>
</gl-avatars-inline>
</template>
<template #cell(author)="{ value }">
<gl-avatar-link v-gl-tooltip target="_blank" :href="value.web_url" :title="value.name">
<gl-avatar :size="$options.avatarSize" :src="value.avatar_url" :entity-name="value.name" />
</gl-avatar-link>
</template>
</gl-table>
</template>
......@@ -9,7 +9,13 @@ export default () => {
if (!el) return null;
const { endpoint, noDataEmptyStateSvgPath, filtersEmptyStateSvgPath } = el.dataset;
const {
endpoint,
noDataEmptyStateSvgPath,
filtersEmptyStateSvgPath,
issuesApiEndpoint,
issuesPageEndpoint,
} = el.dataset;
// Set default filters from URL
store.dispatch('issueAnalytics/setFilters', window.location.search);
......@@ -31,6 +37,8 @@ export default () => {
filterBlockEl,
noDataEmptyStateSvgPath,
filtersEmptyStateSvgPath,
issuesApiEndpoint,
issuesPageEndpoint,
},
});
},
......
......@@ -10,11 +10,15 @@
}
}
.issues-analytics-loading {
padding-top: $header-height * 2;
}
.issues-analytics-legend {
font-size: $gl-font-size-small;
color: $gl-text-color-secondary;
}
.issue-title {
max-width: px-to-rem(350px);
}
.milestone-title {
max-width: px-to-rem(75px);
}
......@@ -4,4 +4,4 @@
%h3
= _('Issues Analytics')
= render 'shared/issuable/search_bar', type: :issues_analytics, show_sorting_dropdown: false, placeholder: _('Filter results...')
#js-issues-analytics{ data: { endpoint: group_issues_analytics_path(@group), no_data_empty_state_svg_path: image_path('illustrations/monitoring/getting_started.svg'), filters_empty_state_svg_path: image_path('illustrations/issues.svg') } }
#js-issues-analytics{ data: { endpoint: group_issues_analytics_path(@group), no_data_empty_state_svg_path: image_path('illustrations/monitoring/getting_started.svg'), filters_empty_state_svg_path: image_path('illustrations/issues.svg'), issues_api_endpoint: expose_url(api_v4_groups_issues_path(id: @group.id)), issues_page_endpoint: issues_group_path(@group) } }
......@@ -4,4 +4,4 @@
%h3
= _('Issues Analytics')
= render 'shared/issuable/search_bar', type: :issues_analytics, show_sorting_dropdown: false, placeholder: _('Filter results...')
#js-issues-analytics{ data: { endpoint: project_analytics_issues_analytics_path(@project), no_data_empty_state_svg_path: image_path('illustrations/monitoring/getting_started.svg'), filters_empty_state_svg_path: image_path('illustrations/issues.svg') } }
#js-issues-analytics{ data: { endpoint: project_analytics_issues_analytics_path(@project), no_data_empty_state_svg_path: image_path('illustrations/monitoring/getting_started.svg'), filters_empty_state_svg_path: image_path('illustrations/issues.svg'), issues_api_endpoint: expose_url(api_v4_projects_issues_path(id: @project.id)), issues_page_endpoint: project_issues_path(@project) } }
---
title: Add table to Issues Analytics
merge_request: 30603
author:
type: added
......@@ -3,6 +3,7 @@ import MockAdapter from 'axios-mock-adapter';
import Vuex from 'vuex';
import { TEST_HOST } from 'helpers/test_constants';
import IssuesAnalytics from 'ee/issues_analytics/components/issues_analytics.vue';
import IssuesAnalyticsTable from 'ee/issues_analytics/components/issues_analytics_table.vue';
import { createLocalVue, shallowMount } from '@vue/test-utils';
import { GlEmptyState, GlLoadingIcon } from '@gitlab/ui';
import { createStore } from 'ee/issues_analytics/stores';
......@@ -26,6 +27,8 @@ describe('Issues Analytics component', () => {
setFixtures('<div id="mock-filter"></div>');
const propsData = data || {
endpoint: TEST_HOST,
issuesApiEndpoint: `${TEST_HOST}/api/issues`,
issuesPageEndpoint: `${TEST_HOST}/issues`,
filterBlockEl: document.querySelector('#mock-filter'),
noDataEmptyStateSvgPath: 'svg',
filtersEmptyStateSvgPath: 'svg',
......@@ -101,4 +104,8 @@ describe('Issues Analytics component', () => {
expect(wrapper.vm.showFiltersEmptyState).toBe(true);
});
});
it('renders the issues table', () => {
expect(wrapper.find(IssuesAnalyticsTable).exists()).toBe(true);
});
});
import axios from 'axios';
import MockAdapter from 'axios-mock-adapter';
import IssuesAnalyticsTable from 'ee/issues_analytics/components/issues_analytics_table.vue';
import { mount } from '@vue/test-utils';
import { GlLoadingIcon, GlTable } from '@gitlab/ui';
import waitForPromises from 'helpers/wait_for_promises';
import httpStatusCodes from '~/lib/utils/http_status';
import createFlash from '~/flash';
import { mockIssuesApiResponse, tableHeaders, endpoints } from '../mock_data';
jest.mock('~/flash');
describe('IssuesAnalyticsTable', () => {
let wrapper;
let mock;
const createComponent = () => {
return mount(IssuesAnalyticsTable, {
propsData: {
endpoints,
},
});
};
const findTable = () => wrapper.find(GlTable);
const findIssueDetailsCol = rowIndex =>
findTable()
.findAll('[data-testid="detailsCol"]')
.at(rowIndex);
const findAgeCol = rowIndex =>
findTable()
.findAll('[data-testid="ageCol"]')
.at(rowIndex);
const findStatusCol = rowIndex =>
findTable()
.findAll('[data-testid="statusCol"]')
.at(rowIndex);
beforeEach(() => {
jest.spyOn(Date, 'now').mockImplementation(() => new Date('2020-01-08'));
mock = new MockAdapter(axios);
mock.onGet().reply(httpStatusCodes.OK, mockIssuesApiResponse);
wrapper = createComponent();
return waitForPromises();
});
afterEach(() => {
mock.restore();
wrapper.destroy();
wrapper = null;
});
describe('while fetching data', () => {
beforeEach(() => {
wrapper = createComponent();
});
it('displays a loading icon', () => {
expect(wrapper.find(GlLoadingIcon).exists()).toBe(true);
});
it('does not display the table', () => {
expect(findTable().exists()).toBe(false);
});
});
describe('fetching data completed', () => {
it('hides the loading state', () => {
expect(wrapper.find(GlLoadingIcon).exists()).toBe(false);
});
it('displays the table', () => {
expect(findTable().exists()).toBe(true);
});
describe('table data and formatting', () => {
it('displays the correct table headers', () => {
const headers = findTable().findAll('[data-testid="header"]');
expect(headers).toHaveLength(tableHeaders.length);
tableHeaders.forEach((headerText, i) => expect(headers.at(i).text()).toEqual(headerText));
});
it('displays the correct issue details', () => {
const { title, iid, epic } = mockIssuesApiResponse[0];
expect(findIssueDetailsCol(0).text()).toBe(`${title} #${iid} &${epic.iid}`);
});
it('displays the correct issue age', () => {
expect(findAgeCol(0).text()).toBe('0 days');
expect(findAgeCol(1).text()).toBe('1 day');
expect(findAgeCol(2).text()).toBe('2 days');
});
it('capitalizes the status', () => {
expect(findStatusCol(0).text()).toBe('Closed');
});
});
});
describe('error fetching data', () => {
beforeEach(() => {
mock.onGet().reply(httpStatusCodes.NOT_FOUND, mockIssuesApiResponse);
wrapper = createComponent();
return waitForPromises();
});
it('displays an error', () => {
expect(createFlash).toHaveBeenCalledWith('Failed to load issues. Please try again.');
});
});
});
import { TEST_HOST } from 'helpers/test_constants';
const createIssue = values => {
return {
state: 'closed',
epic: {
iid: 12345,
},
labels: [],
milestone: {
title: '11.1',
},
weight: '3',
due_date: '2020-10-08',
assignees: [],
author: {},
web_url: `issues/${values.id}`,
iid: values.id,
...values,
};
};
export const mockIssuesApiResponse = [
createIssue({ id: 12345, title: 'Issue 1', created_at: '2020-01-08' }),
createIssue({ id: 23456, title: 'Issue 2', created_at: '2020-01-07' }),
createIssue({ id: 34567, title: 'Issue 3', created_at: '2020-01-6' }),
];
export const tableHeaders = [
'Issue',
'Age',
'Status',
'Milestone',
'Weight',
'Due date',
'Assignees',
'Opened by',
];
export const endpoints = {
api: `${TEST_HOST}/api`,
issuesPage: `${TEST_HOST}/issues/page`,
};
......@@ -124,6 +124,11 @@ msgid_plural "%d contributions"
msgstr[0] ""
msgstr[1] ""
msgid "%d day"
msgid_plural "%d days"
msgstr[0] ""
msgstr[1] ""
msgid "%d error"
msgid_plural "%d errors"
msgstr[0] ""
......@@ -12140,6 +12145,33 @@ msgstr ""
msgid "Issue weight"
msgstr ""
msgid "IssueAnalytics|Age"
msgstr ""
msgid "IssueAnalytics|Assignees"
msgstr ""
msgid "IssueAnalytics|Due date"
msgstr ""
msgid "IssueAnalytics|Failed to load issues. Please try again."
msgstr ""
msgid "IssueAnalytics|Issue"
msgstr ""
msgid "IssueAnalytics|Milestone"
msgstr ""
msgid "IssueAnalytics|Opened by"
msgstr ""
msgid "IssueAnalytics|Status"
msgstr ""
msgid "IssueAnalytics|Weight"
msgstr ""
msgid "IssueBoards|Board"
msgstr ""
......
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