Show when an event was triggered via the API directly

This commit is contained in:
DaneEveritt 2022-06-18 12:52:26 -04:00
parent 4f3651b578
commit d47a05881b
No known key found for this signature in database
GPG key ID: EEA66103B3D71F53
6 changed files with 26 additions and 2 deletions

View file

@ -23,6 +23,7 @@ interface ActivityLog extends Model<'actor'> {
batch: UUID | null; batch: UUID | null;
event: string; event: string;
ip: string; ip: string;
isApi: boolean;
description: string | null; description: string | null;
properties: Record<string, string | unknown>; properties: Record<string, string | unknown>;
hasAdditionalMetadata: boolean; hasAdditionalMetadata: boolean;

View file

@ -34,6 +34,7 @@ export default class Transformers {
batch: attributes.batch, batch: attributes.batch,
event: attributes.event, event: attributes.event,
ip: attributes.ip, ip: attributes.ip,
isApi: attributes.is_api,
description: attributes.description, description: attributes.description,
properties: attributes.properties, properties: attributes.properties,
hasAdditionalMetadata: attributes.has_additional_metadata ?? false, hasAdditionalMetadata: attributes.has_additional_metadata ?? false,

View file

@ -55,7 +55,7 @@ export default () => {
<ActivityLogEntry key={activity.timestamp.toString() + activity.event} activity={activity}> <ActivityLogEntry key={activity.timestamp.toString() + activity.event} activity={activity}>
{typeof activity.properties.useragent === 'string' && {typeof activity.properties.useragent === 'string' &&
<Tooltip content={activity.properties.useragent} placement={'top'}> <Tooltip content={activity.properties.useragent} placement={'top'}>
<DesktopComputerIcon className={'ml-2 w-4 h-4 cursor-pointer'}/> <span><DesktopComputerIcon/></span>
</Tooltip> </Tooltip>
} }
</ActivityLogEntry> </ActivityLogEntry>

View file

@ -7,6 +7,9 @@ import { format, formatDistanceToNowStrict } from 'date-fns';
import { ActivityLog } from '@definitions/user'; import { ActivityLog } from '@definitions/user';
import { useLocation } from 'react-router'; import { useLocation } from 'react-router';
import ActivityLogMetaButton from '@/components/elements/activity/ActivityLogMetaButton'; import ActivityLogMetaButton from '@/components/elements/activity/ActivityLogMetaButton';
import { TerminalIcon } from '@heroicons/react/solid';
import classNames from 'classnames';
import style from './style.module.css';
interface Props { interface Props {
activity: ActivityLog; activity: ActivityLog;
@ -48,8 +51,15 @@ export default ({ activity, children }: Props) => {
> >
{activity.event} {activity.event}
</Link> </Link>
<div className={classNames(style.icons, 'group-hover:text-gray-300')}>
{activity.isApi &&
<Tooltip placement={'top'} content={'Performed using API Key'}>
<span><TerminalIcon/></span>
</Tooltip>
}
{children} {children}
</div> </div>
</div>
<p className={'mt-1 text-sm break-words line-clamp-2 pr-4'}> <p className={'mt-1 text-sm break-words line-clamp-2 pr-4'}>
<Translate ns={'activity'} values={activity.properties}> <Translate ns={'activity'} values={activity.properties}>
{activity.event.replace(':', '.')} {activity.event.replace(':', '.')}

View file

@ -22,6 +22,7 @@ export default ({ meta }: { meta: Record<string, unknown> }) => {
</Dialog.Buttons> </Dialog.Buttons>
</Dialog> </Dialog>
<button <button
aria-describedby={'View additional event metadata'}
className={'p-2 transition-colors duration-100 text-gray-400 group-hover:text-gray-300 group-hover:hover:text-gray-50'} className={'p-2 transition-colors duration-100 text-gray-400 group-hover:text-gray-300 group-hover:hover:text-gray-50'}
onClick={() => setOpen(true)} onClick={() => setOpen(true)}
> >

View file

@ -0,0 +1,11 @@
.icons {
@apply flex space-x-1 mx-2 transition-colors duration-100 text-gray-400;
& > span {
@apply px-1 py-px cursor-pointer hover:text-gray-50;
}
& svg {
@apply w-4 h-4;
}
}