123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364 |
- import {Fragment} from 'react';
- import {RouteComponentProps, WithRouterProps} from 'react-router';
- import styled from '@emotion/styled';
- import {Button} from 'sentry/components/button';
- import ButtonBar from 'sentry/components/buttonBar';
- import DataExport, {ExportQueryType} from 'sentry/components/dataExport';
- import DeprecatedAsyncComponent from 'sentry/components/deprecatedAsyncComponent';
- import {DeviceName} from 'sentry/components/deviceName';
- import {DropdownMenu} from 'sentry/components/dropdownMenu';
- import GlobalSelectionLink from 'sentry/components/globalSelectionLink';
- import UserBadge from 'sentry/components/idBadge/userBadge';
- import * as Layout from 'sentry/components/layouts/thirds';
- import ExternalLink from 'sentry/components/links/externalLink';
- import Link from 'sentry/components/links/link';
- import {extractSelectionParameters} from 'sentry/components/organizations/pageFilters/utils';
- import Pagination from 'sentry/components/pagination';
- import PanelTable from 'sentry/components/panels/panelTable';
- import TimeSince from 'sentry/components/timeSince';
- import {IconArrow, IconEllipsis, IconMail, IconOpen} from 'sentry/icons';
- import {t} from 'sentry/locale';
- import {space} from 'sentry/styles/space';
- import {
- Group,
- Organization,
- Project,
- SavedQueryVersions,
- Tag,
- TagValue,
- } from 'sentry/types';
- import {isUrl, percent} from 'sentry/utils';
- import EventView from 'sentry/utils/discover/eventView';
- import withOrganization from 'sentry/utils/withOrganization';
- // eslint-disable-next-line no-restricted-imports
- import withSentryRouter from 'sentry/utils/withSentryRouter';
- type RouteParams = {
- groupId: string;
- orgId: string;
- tagKey?: string;
- };
- type Props = {
- baseUrl: string;
- group: Group;
- organization: Organization;
- environments?: string[];
- project?: Project;
- } & RouteComponentProps<RouteParams, {}>;
- type State = {
- tag: Tag | null;
- tagValueList: TagValue[] | null;
- tagValueListPageLinks: string;
- };
- const DEFAULT_SORT = 'count';
- class GroupTagValues extends DeprecatedAsyncComponent<
- Props & DeprecatedAsyncComponent['props'] & WithRouterProps,
- State & DeprecatedAsyncComponent['state']
- > {
- getEndpoints(): ReturnType<DeprecatedAsyncComponent['getEndpoints']> {
- const {environments: environment} = this.props;
- const {groupId, tagKey} = this.props.params;
- return [
- ['tag', `/issues/${groupId}/tags/${tagKey}/`],
- [
- 'tagValueList',
- `/issues/${groupId}/tags/${tagKey}/values/`,
- {query: {environment, sort: this.getSort()}},
- ],
- ];
- }
- getSort(): string {
- return this.props.location.query.sort || DEFAULT_SORT;
- }
- renderLoading() {
- return this.renderBody();
- }
- renderResults() {
- const {
- baseUrl,
- project,
- environments: environment,
- group,
- location: {query},
- params: {orgId, tagKey},
- organization,
- } = this.props;
- const {tagValueList, tag} = this.state;
- const discoverFields = [
- 'title',
- 'release',
- 'environment',
- 'user.display',
- 'timestamp',
- ];
- const globalSelectionParams = extractSelectionParameters(query);
- return tagValueList?.map((tagValue, tagValueIdx) => {
- const pct = tag?.totalValues
- ? `${percent(tagValue.count, tag?.totalValues).toFixed(2)}%`
- : '--';
- const key = tagValue.key ?? tagKey;
- const issuesQuery = tagValue.query || `${key}:"${tagValue.value}"`;
- const discoverView = EventView.fromSavedQuery({
- id: undefined,
- name: key ?? '',
- fields: [
- ...(key !== undefined ? [key] : []),
- ...discoverFields.filter(field => field !== key),
- ],
- orderby: '-timestamp',
- query: `issue:${group.shortId} ${issuesQuery}`,
- projects: [Number(project?.id)],
- environment,
- version: 2 as SavedQueryVersions,
- range: '90d',
- });
- const issuesPath = `/organizations/${orgId}/issues/`;
- return (
- <Fragment key={tagValueIdx}>
- <NameColumn>
- <NameWrapper data-test-id="group-tag-value">
- <GlobalSelectionLink
- to={{
- pathname: `${baseUrl}events/`,
- query: {query: issuesQuery},
- }}
- >
- {key === 'user' ? (
- <UserBadge
- user={{...tagValue, id: tagValue.identifier ?? ''}}
- avatarSize={20}
- hideEmail
- />
- ) : (
- <DeviceName value={tagValue.name} />
- )}
- </GlobalSelectionLink>
- </NameWrapper>
- {tagValue.email && (
- <StyledExternalLink
- href={`mailto:${tagValue.email}`}
- data-test-id="group-tag-mail"
- >
- <IconMail size="xs" color="gray300" />
- </StyledExternalLink>
- )}
- {isUrl(tagValue.value) && (
- <StyledExternalLink href={tagValue.value} data-test-id="group-tag-url">
- <IconOpen size="xs" color="gray300" />
- </StyledExternalLink>
- )}
- </NameColumn>
- <RightAlignColumn>{pct}</RightAlignColumn>
- <RightAlignColumn>{tagValue.count.toLocaleString()}</RightAlignColumn>
- <RightAlignColumn>
- <TimeSince date={tagValue.lastSeen} />
- </RightAlignColumn>
- <RightAlignColumn>
- <DropdownMenu
- size="sm"
- position="bottom-end"
- triggerProps={{
- size: 'xs',
- showChevron: false,
- icon: <IconEllipsis size="xs" />,
- 'aria-label': t('More'),
- }}
- items={[
- {
- key: 'open-in-discover',
- label: t('Open in Discover'),
- to: discoverView.getResultsViewUrlTarget(orgId),
- hidden: !organization.features.includes('discover-basic'),
- },
- {
- key: 'search-issues',
- label: t('Search All Issues with Tag Value'),
- to: {
- pathname: issuesPath,
- query: {
- ...globalSelectionParams, // preserve page filter selections
- query: issuesQuery,
- },
- },
- },
- ]}
- />
- </RightAlignColumn>
- </Fragment>
- );
- });
- }
- renderBody() {
- const {
- group,
- params: {orgId, tagKey},
- location: {query},
- environments,
- } = this.props;
- const {tagValueList, tag, tagValueListPageLinks, loading} = this.state;
- const {cursor: _cursor, page: _page, ...currentQuery} = query;
- const title = tagKey === 'user' ? t('Affected Users') : tagKey;
- const sort = this.getSort();
- const sortArrow = <IconArrow color="gray300" size="xs" direction="down" />;
- const lastSeenColumnHeader = (
- <StyledSortLink
- to={{
- pathname: location.pathname,
- query: {
- ...currentQuery,
- sort: 'date',
- },
- }}
- >
- {t('Last Seen')} {sort === 'date' && sortArrow}
- </StyledSortLink>
- );
- const countColumnHeader = (
- <StyledSortLink
- to={{
- pathname: location.pathname,
- query: {
- ...currentQuery,
- sort: 'count',
- },
- }}
- >
- {t('Count')} {sort === 'count' && sortArrow}
- </StyledSortLink>
- );
- return (
- <Layout.Body>
- <Layout.Main fullWidth>
- <TitleWrapper>
- <Title>{t('Tag Details')}</Title>
- <ButtonBar gap={1}>
- <Button
- size="sm"
- priority="default"
- href={`/${orgId}/${group.project.slug}/issues/${group.id}/tags/${tagKey}/export/`}
- >
- {t('Export Page to CSV')}
- </Button>
- <DataExport
- payload={{
- queryType: ExportQueryType.ISSUES_BY_TAG,
- queryInfo: {
- project: group.project.id,
- group: group.id,
- key: tagKey,
- },
- }}
- />
- </ButtonBar>
- </TitleWrapper>
- <StyledPanelTable
- isLoading={loading}
- isEmpty={tagValueList?.length === 0}
- headers={[
- title,
- <PercentColumnHeader key="percent">{t('Percent')}</PercentColumnHeader>,
- countColumnHeader,
- lastSeenColumnHeader,
- '',
- ]}
- emptyMessage={t('Sorry, the tags for this issue could not be found.')}
- emptyAction={
- environments?.length
- ? t('No tags were found for the currently selected environments')
- : null
- }
- >
- {tagValueList && tag && this.renderResults()}
- </StyledPanelTable>
- <StyledPagination pageLinks={tagValueListPageLinks} />
- </Layout.Main>
- </Layout.Body>
- );
- }
- }
- export default withSentryRouter(withOrganization(GroupTagValues));
- const TitleWrapper = styled('div')`
- display: flex;
- flex-direction: row;
- flex-wrap: wrap;
- align-items: center;
- justify-content: space-between;
- margin-bottom: ${space(2)};
- `;
- const Title = styled('h3')`
- margin: 0;
- `;
- const StyledPanelTable = styled(PanelTable)`
- white-space: nowrap;
- font-size: ${p => p.theme.fontSizeMedium};
- overflow: auto;
- @media (min-width: ${p => p.theme.breakpoints.small}) {
- overflow: initial;
- }
- & > * {
- padding: ${space(1)} ${space(2)};
- }
- `;
- const PercentColumnHeader = styled('div')`
- text-align: right;
- `;
- const StyledSortLink = styled(Link)`
- text-align: right;
- color: inherit;
- :hover {
- color: inherit;
- }
- `;
- const StyledExternalLink = styled(ExternalLink)`
- margin-left: ${space(0.5)};
- `;
- const Column = styled('div')`
- display: flex;
- align-items: center;
- `;
- const NameColumn = styled(Column)`
- ${p => p.theme.overflowEllipsis};
- display: flex;
- min-width: 320px;
- `;
- const NameWrapper = styled('span')`
- ${p => p.theme.overflowEllipsis};
- width: auto;
- `;
- const RightAlignColumn = styled(Column)`
- justify-content: flex-end;
- `;
- const StyledPagination = styled(Pagination)`
- margin: 0;
- `;
|