123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517 |
- import {useState} from 'react';
- import styled from '@emotion/styled';
- import memoize from 'lodash/memoize';
- import Access from 'sentry/components/acl/access';
- import AlertBadge from 'sentry/components/alertBadge';
- import ActorAvatar from 'sentry/components/avatar/actorAvatar';
- import TeamAvatar from 'sentry/components/avatar/teamAvatar';
- import {openConfirmModal} from 'sentry/components/confirm';
- import DropdownAutoComplete from 'sentry/components/dropdownAutoComplete';
- import DropdownBubble from 'sentry/components/dropdownBubble';
- import DropdownMenuControl from 'sentry/components/dropdownMenuControl';
- import {MenuItemProps} from 'sentry/components/dropdownMenuItem';
- import ErrorBoundary from 'sentry/components/errorBoundary';
- import Highlight from 'sentry/components/highlight';
- import IdBadge from 'sentry/components/idBadge';
- import Link from 'sentry/components/links/link';
- import LoadingIndicator from 'sentry/components/loadingIndicator';
- import TextOverflow from 'sentry/components/textOverflow';
- import TimeSince from 'sentry/components/timeSince';
- import Tooltip from 'sentry/components/tooltip';
- import {IconArrow, IconChevron, IconEllipsis, IconUser} from 'sentry/icons';
- import {t, tct} from 'sentry/locale';
- import space from 'sentry/styles/space';
- import {Actor, Project} from 'sentry/types';
- import type {Color} from 'sentry/utils/theme';
- import {getThresholdUnits} from 'sentry/views/alerts/rules/metric/constants';
- import {
- AlertRuleComparisonType,
- AlertRuleThresholdType,
- AlertRuleTriggerType,
- } from 'sentry/views/alerts/rules/metric/types';
- import {CombinedAlertType, CombinedMetricIssueAlerts, IncidentStatus} from '../../types';
- import {isIssueAlert} from '../../utils';
- type Props = {
- hasEditAccess: boolean;
- onDelete: (projectId: string, rule: CombinedMetricIssueAlerts) => void;
- onOwnerChange: (
- projectId: string,
- rule: CombinedMetricIssueAlerts,
- ownerValue: string
- ) => void;
- orgId: string;
- projects: Project[];
- projectsLoaded: boolean;
- rule: CombinedMetricIssueAlerts;
- // Set of team ids that the user belongs to
- userTeams: Set<string>;
- };
- /**
- * Memoized function to find a project from a list of projects
- */
- const getProject = memoize((slug: string, projects: Project[]) =>
- projects.find(project => project.slug === slug)
- );
- function RuleListRow({
- rule,
- projectsLoaded,
- projects,
- orgId,
- onDelete,
- onOwnerChange,
- userTeams,
- hasEditAccess,
- }: Props) {
- const [assignee, setAssignee] = useState<string>('');
- const activeIncident =
- rule.latestIncident?.status !== undefined &&
- [IncidentStatus.CRITICAL, IncidentStatus.WARNING].includes(
- rule.latestIncident.status
- );
- function renderLastIncidentDate(): React.ReactNode {
- if (isIssueAlert(rule)) {
- if (!rule.lastTriggered) {
- return t('Alerts not triggered yet');
- }
- return (
- <div>
- {t('Triggered ')}
- <TimeSince date={rule.lastTriggered} />
- </div>
- );
- }
- if (!rule.latestIncident) {
- return t('Alerts not triggered yet');
- }
- if (activeIncident) {
- return (
- <div>
- {t('Triggered ')}
- <TimeSince date={rule.latestIncident.dateCreated} />
- </div>
- );
- }
- return (
- <div>
- {t('Resolved ')}
- <TimeSince date={rule.latestIncident.dateClosed!} />
- </div>
- );
- }
- function renderAlertRuleStatus(): React.ReactNode {
- if (isIssueAlert(rule)) {
- return null;
- }
- const criticalTrigger = rule.triggers.find(
- ({label}) => label === AlertRuleTriggerType.CRITICAL
- );
- const warningTrigger = rule.triggers.find(
- ({label}) => label === AlertRuleTriggerType.WARNING
- );
- const resolvedTrigger = rule.resolveThreshold;
- const trigger =
- activeIncident && rule.latestIncident?.status === IncidentStatus.CRITICAL
- ? criticalTrigger
- : warningTrigger ?? criticalTrigger;
- let iconColor: Color = 'green300';
- let iconDirection: 'up' | 'down' | undefined;
- let thresholdTypeText =
- activeIncident && rule.thresholdType === AlertRuleThresholdType.ABOVE
- ? t('Above')
- : t('Below');
- if (activeIncident) {
- iconColor =
- trigger?.label === AlertRuleTriggerType.CRITICAL
- ? 'red300'
- : trigger?.label === AlertRuleTriggerType.WARNING
- ? 'yellow300'
- : 'green300';
- iconDirection = rule.thresholdType === AlertRuleThresholdType.ABOVE ? 'up' : 'down';
- } else {
- // Use the Resolved threshold type, which is opposite of Critical
- iconDirection = rule.thresholdType === AlertRuleThresholdType.ABOVE ? 'down' : 'up';
- thresholdTypeText =
- rule.thresholdType === AlertRuleThresholdType.ABOVE ? t('Below') : t('Above');
- }
- return (
- <FlexCenter>
- <IconArrow color={iconColor} direction={iconDirection} />
- <TriggerText>
- {`${thresholdTypeText} ${
- rule.latestIncident || (!rule.latestIncident && !resolvedTrigger)
- ? trigger?.alertThreshold?.toLocaleString()
- : resolvedTrigger?.toLocaleString()
- }`}
- {getThresholdUnits(
- rule.aggregate,
- rule.comparisonDelta
- ? AlertRuleComparisonType.CHANGE
- : AlertRuleComparisonType.COUNT
- )}
- </TriggerText>
- </FlexCenter>
- );
- }
- const slug = rule.projects[0];
- const editLink = `/organizations/${orgId}/alerts/${
- isIssueAlert(rule) ? 'rules' : 'metric-rules'
- }/${slug}/${rule.id}/`;
- const duplicateLink = {
- pathname: `/organizations/${orgId}/alerts/new/${
- rule.type === CombinedAlertType.METRIC ? 'metric' : 'issue'
- }/`,
- query: {
- project: slug,
- duplicateRuleId: rule.id,
- createFromDuplicate: true,
- referrer: 'alert_stream',
- },
- };
- const detailsLink = `/organizations/${orgId}/alerts/rules/details/${rule.id}/`;
- const ownerId = rule.owner?.split(':')[1];
- const teamActor = ownerId
- ? {type: 'team' as Actor['type'], id: ownerId, name: ''}
- : null;
- const canEdit = ownerId ? userTeams.has(ownerId) : true;
- const alertLink = isIssueAlert(rule) ? (
- <Link
- to={`/organizations/${orgId}/alerts/rules/${rule.projects[0]}/${rule.id}/details/`}
- >
- {rule.name}
- </Link>
- ) : (
- <TitleLink to={isIssueAlert(rule) ? editLink : detailsLink}>{rule.name}</TitleLink>
- );
- const IssueStatusText: Record<IncidentStatus, string> = {
- [IncidentStatus.CRITICAL]: t('Critical'),
- [IncidentStatus.WARNING]: t('Warning'),
- [IncidentStatus.CLOSED]: t('Resolved'),
- [IncidentStatus.OPENED]: t('Resolved'),
- };
- const actions: MenuItemProps[] = [
- {
- key: 'edit',
- label: t('Edit'),
- to: editLink,
- },
- {
- key: 'duplicate',
- label: t('Duplicate'),
- to: duplicateLink,
- },
- {
- key: 'delete',
- label: t('Delete'),
- priority: 'danger',
- onAction: () => {
- openConfirmModal({
- onConfirm: () => onDelete(slug, rule),
- header: t('Delete Alert Rule?'),
- message: tct(
- "Are you sure you want to delete [name]? You won't be able to view the history of this alert once it's deleted.",
- {name: rule.name}
- ),
- confirmText: t('Delete Rule'),
- priority: 'danger',
- });
- },
- },
- ];
- function handleOwnerChange({value}: {value: string}) {
- const ownerValue = value && `team:${value}`;
- setAssignee(ownerValue);
- onOwnerChange(slug, rule, ownerValue);
- }
- const unassignedOption = {
- value: '',
- label: () => (
- <MenuItemWrapper>
- <StyledIconUser size="20px" />
- {t('Unassigned')}
- </MenuItemWrapper>
- ),
- searchKey: 'unassigned',
- actor: '',
- disabled: false,
- };
- const projectRow = projects.filter(project => project.slug === slug);
- const projectRowTeams = projectRow[0].teams;
- const filteredProjectTeams = projectRowTeams?.filter(projTeam => {
- return userTeams.has(projTeam.id);
- });
- const dropdownTeams = filteredProjectTeams
- ?.map((team, idx) => ({
- value: team.id,
- searchKey: team.slug,
- label: ({inputValue}) => (
- <MenuItemWrapper data-test-id="assignee-option" key={idx}>
- <IconContainer>
- <TeamAvatar team={team} size={24} />
- </IconContainer>
- <Label>
- <Highlight text={inputValue}>{`#${team.slug}`}</Highlight>
- </Label>
- </MenuItemWrapper>
- ),
- }))
- .concat(unassignedOption);
- const teamId = assignee?.split(':')[1];
- const teamName = filteredProjectTeams?.find(team => team.id === teamId);
- const assigneeTeamActor = assignee && {
- type: 'team' as Actor['type'],
- id: teamId,
- name: '',
- };
- const avatarElement = assigneeTeamActor ? (
- <ActorAvatar
- actor={assigneeTeamActor}
- className="avatar"
- size={24}
- tooltip={
- <TooltipWrapper>
- {tct('Assigned to [name]', {
- name: teamName && `#${teamName.name}`,
- })}
- </TooltipWrapper>
- }
- />
- ) : (
- <Tooltip isHoverable skipWrapper title={t('Unassigned')}>
- <StyledIconUser size="20px" color="gray400" />
- </Tooltip>
- );
- return (
- <ErrorBoundary>
- <AlertNameWrapper isIssueAlert={isIssueAlert(rule)}>
- <FlexCenter>
- <Tooltip
- title={
- isIssueAlert(rule)
- ? t('Issue Alert')
- : tct('Metric Alert Status: [status]', {
- status:
- IssueStatusText[
- rule?.latestIncident?.status ?? IncidentStatus.CLOSED
- ],
- })
- }
- >
- <AlertBadge
- status={rule?.latestIncident?.status}
- isIssue={isIssueAlert(rule)}
- hideText
- />
- </Tooltip>
- </FlexCenter>
- <AlertNameAndStatus>
- <AlertName>{alertLink}</AlertName>
- <AlertIncidentDate>{renderLastIncidentDate()}</AlertIncidentDate>
- </AlertNameAndStatus>
- </AlertNameWrapper>
- <FlexCenter>{renderAlertRuleStatus()}</FlexCenter>
- <FlexCenter>
- <ProjectBadgeContainer>
- <ProjectBadge
- avatarSize={18}
- project={!projectsLoaded ? {slug} : getProject(slug, projects)}
- />
- </ProjectBadgeContainer>
- </FlexCenter>
- <FlexCenter>
- {teamActor ? (
- <ActorAvatar actor={teamActor} size={24} />
- ) : (
- <AssigneeWrapper>
- {!projectsLoaded && (
- <LoadingIndicator
- mini
- style={{height: '24px', margin: 0, marginRight: 11}}
- />
- )}
- {projectsLoaded && (
- <DropdownAutoComplete
- data-test-id="alert-row-assignee"
- maxHeight={400}
- onOpen={e => {
- e?.stopPropagation();
- }}
- items={dropdownTeams}
- alignMenu="right"
- onSelect={handleOwnerChange}
- itemSize="small"
- searchPlaceholder={t('Filter teams')}
- disableLabelPadding
- emptyHidesInput
- disabled={!hasEditAccess}
- >
- {({getActorProps, isOpen}) => (
- <DropdownButton {...getActorProps({})}>
- {avatarElement}
- {hasEditAccess && (
- <StyledChevron direction={isOpen ? 'up' : 'down'} size="xs" />
- )}
- </DropdownButton>
- )}
- </DropdownAutoComplete>
- )}
- </AssigneeWrapper>
- )}
- </FlexCenter>
- <ActionsRow>
- <Access access={['alerts:write']}>
- {({hasAccess}) => (
- <DropdownMenuControl
- items={actions}
- placement="bottom right"
- triggerProps={{
- 'aria-label': t('Show more'),
- 'data-test-id': 'alert-row-actions',
- size: 'xs',
- icon: <IconEllipsis size="xs" />,
- showChevron: false,
- }}
- disabledKeys={hasAccess && canEdit ? [] : ['delete']}
- />
- )}
- </Access>
- </ActionsRow>
- </ErrorBoundary>
- );
- }
- const TitleLink = styled(Link)`
- ${p => p.theme.overflowEllipsis}
- `;
- const FlexCenter = styled('div')`
- display: flex;
- align-items: center;
- `;
- const AlertNameWrapper = styled(FlexCenter)<{isIssueAlert?: boolean}>`
- position: relative;
- ${p => p.isIssueAlert && `padding: ${space(3)} ${space(2)}; line-height: 2.4;`}
- `;
- const AlertNameAndStatus = styled('div')`
- ${p => p.theme.overflowEllipsis}
- margin-left: ${space(2)};
- line-height: 1.35;
- `;
- const AlertName = styled('div')`
- ${p => p.theme.overflowEllipsis}
- font-size: ${p => p.theme.fontSizeLarge};
- @media (max-width: ${p => p.theme.breakpoints.xlarge}) {
- max-width: 300px;
- }
- @media (max-width: ${p => p.theme.breakpoints.large}) {
- max-width: 165px;
- }
- @media (max-width: ${p => p.theme.breakpoints.medium}) {
- max-width: 100px;
- }
- `;
- const AlertIncidentDate = styled('div')`
- color: ${p => p.theme.gray300};
- `;
- const ProjectBadgeContainer = styled('div')`
- width: 100%;
- `;
- const ProjectBadge = styled(IdBadge)`
- flex-shrink: 0;
- `;
- const TriggerText = styled('div')`
- margin-left: ${space(1)};
- white-space: nowrap;
- font-variant-numeric: tabular-nums;
- `;
- const ActionsRow = styled(FlexCenter)`
- justify-content: center;
- padding: ${space(1)};
- `;
- const AssigneeWrapper = styled('div')`
- display: flex;
- justify-content: flex-end;
- /* manually align menu underneath dropdown caret */
- ${DropdownBubble} {
- right: -14px;
- }
- `;
- const DropdownButton = styled('div')`
- display: flex;
- align-items: center;
- font-size: 20px;
- `;
- const StyledChevron = styled(IconChevron)`
- margin-left: ${space(1)};
- `;
- const TooltipWrapper = styled('div')`
- text-align: left;
- `;
- const StyledIconUser = styled(IconUser)`
- /* We need this to center with Avatar */
- margin-right: 2px;
- `;
- const IconContainer = styled('div')`
- display: flex;
- align-items: center;
- justify-content: center;
- width: 24px;
- height: 24px;
- flex-shrink: 0;
- `;
- const MenuItemWrapper = styled('div')`
- display: flex;
- align-items: center;
- font-size: 13px;
- `;
- const Label = styled(TextOverflow)`
- margin-left: 6px;
- `;
- export default RuleListRow;
|