diff --git a/packages/console/src/App.tsx b/packages/console/src/App.tsx index 86741f2d1..fd53bf0ec 100644 --- a/packages/console/src/App.tsx +++ b/packages/console/src/App.tsx @@ -21,6 +21,7 @@ const ApiResources = React.lazy(async () => import('@/pages/ApiResources')); const ApplicationDetails = React.lazy(async () => import('@/pages/ApplicationDetails')); const Applications = React.lazy(async () => import('@/pages/Applications')); const AuditLogs = React.lazy(async () => import('@/pages/AuditLogs')); +const AuditLogDetails = React.lazy(async () => import('@/pages/AuditLogDetails')); const Callback = React.lazy(async () => import('@/pages/Callback')); const ConnectorDetails = React.lazy(async () => import('@/pages/ConnectorDetails')); const Connectors = React.lazy(async () => import('@/pages/Connectors')); @@ -76,6 +77,7 @@ const Main = () => { } /> } /> + } /> } /> diff --git a/packages/console/src/components/ApplicationName/index.module.scss b/packages/console/src/components/ApplicationName/index.module.scss new file mode 100644 index 000000000..b627330e7 --- /dev/null +++ b/packages/console/src/components/ApplicationName/index.module.scss @@ -0,0 +1,4 @@ +.link { + text-decoration: none; + color: var(--color-text-link); +} diff --git a/packages/console/src/components/ApplicationName/index.tsx b/packages/console/src/components/ApplicationName/index.tsx index a2af7dcb4..39af4f568 100644 --- a/packages/console/src/components/ApplicationName/index.tsx +++ b/packages/console/src/components/ApplicationName/index.tsx @@ -1,21 +1,33 @@ import { Application } from '@logto/schemas'; import { adminConsoleApplicationId } from '@logto/schemas/lib/seeds'; import React from 'react'; +import { Link } from 'react-router-dom'; import useSWR from 'swr'; +import * as styles from './index.module.scss'; + type Props = { applicationId: string; + isLink?: boolean; }; -const ApplicationName = ({ applicationId }: Props) => { +const ApplicationName = ({ applicationId, isLink = false }: Props) => { const isAdminConsole = applicationId === adminConsoleApplicationId; const { data } = useSWR(!isAdminConsole && `/api/applications/${applicationId}`); - const name = isAdminConsole ? 'Admin Console' : data?.name; - // eslint-disable-next-line @typescript-eslint/prefer-nullish-coalescing - return {name || '-'}; + const name = (isAdminConsole ? 'Admin Console' : data?.name) || '-'; + + if (isLink && !isAdminConsole) { + return ( + + {name} + + ); + } + + return {name}; }; export default ApplicationName; diff --git a/packages/console/src/components/UserName/index.module.scss b/packages/console/src/components/UserName/index.module.scss index 2cf1d41b1..2850a3995 100644 --- a/packages/console/src/components/UserName/index.module.scss +++ b/packages/console/src/components/UserName/index.module.scss @@ -9,4 +9,9 @@ color: var(--color-caption); margin-left: _.unit(1); } + + .link { + text-decoration: none; + color: var(--color-text-link); + } } diff --git a/packages/console/src/components/UserName/index.tsx b/packages/console/src/components/UserName/index.tsx index 401f2e4f0..5015f6804 100644 --- a/packages/console/src/components/UserName/index.tsx +++ b/packages/console/src/components/UserName/index.tsx @@ -1,6 +1,7 @@ import { User } from '@logto/schemas'; import React from 'react'; import { useTranslation } from 'react-i18next'; +import { Link } from 'react-router-dom'; import useSWR from 'swr'; import { RequestError } from '@/hooks/use-api'; @@ -9,13 +10,15 @@ import * as styles from './index.module.scss'; type Props = { userId: string; + isLink?: boolean; }; -const UserName = ({ userId }: Props) => { +const UserName = ({ userId, isLink = false }: Props) => { const { data, error } = useSWR(`/api/users/${userId}`); const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); const isLoading = !data && !error; + const name = data?.name ?? t('users.unnamed'); if (isLoading) { return null; @@ -23,7 +26,13 @@ const UserName = ({ userId }: Props) => { return (
- {data?.name ?? t('users.unnamed')} + {isLink ? ( + + {name} + + ) : ( + {name} + )} {userId}
); diff --git a/packages/console/src/consts/logs.ts b/packages/console/src/consts/logs.ts index ea33a6338..83a7d3bb8 100644 --- a/packages/console/src/consts/logs.ts +++ b/packages/console/src/consts/logs.ts @@ -16,6 +16,6 @@ export const logEventTitle: LogEventTitle = Object.freeze({ SignInSocialBind: 'Sign in with social related account', SignInSocial: 'Sign in with social account', CodeExchangeToken: 'Exchange token by auth code', - RefreshTokenExchangeToken: 'Exchagne token by refresh token', + RefreshTokenExchangeToken: 'Exchange token by refresh token', RevokeToken: 'Revoke token', }); diff --git a/packages/console/src/pages/AuditLogDetails/components/EventIcon/Failed.tsx b/packages/console/src/pages/AuditLogDetails/components/EventIcon/Failed.tsx new file mode 100644 index 000000000..b204eb19c --- /dev/null +++ b/packages/console/src/pages/AuditLogDetails/components/EventIcon/Failed.tsx @@ -0,0 +1,12 @@ +import React from 'react'; + +const Failed = () => ( + + + +); + +export default Failed; diff --git a/packages/console/src/pages/AuditLogDetails/components/EventIcon/Success.tsx b/packages/console/src/pages/AuditLogDetails/components/EventIcon/Success.tsx new file mode 100644 index 000000000..30a719d7f --- /dev/null +++ b/packages/console/src/pages/AuditLogDetails/components/EventIcon/Success.tsx @@ -0,0 +1,12 @@ +import React from 'react'; + +const Success = () => ( + + + +); + +export default Success; diff --git a/packages/console/src/pages/AuditLogDetails/components/EventIcon/index.module.scss b/packages/console/src/pages/AuditLogDetails/components/EventIcon/index.module.scss new file mode 100644 index 000000000..6196eb47d --- /dev/null +++ b/packages/console/src/pages/AuditLogDetails/components/EventIcon/index.module.scss @@ -0,0 +1,18 @@ +.icon { + width: 60px; + height: 60px; + + &.success { + color: var(--color-success-60); + } + + &.fail { + color: var(--color-error-40); + } +} + +.label { + color: var(--color-icon); + font: var(--font-body-medium); + text-align: center; +} diff --git a/packages/console/src/pages/AuditLogDetails/components/EventIcon/index.tsx b/packages/console/src/pages/AuditLogDetails/components/EventIcon/index.tsx new file mode 100644 index 000000000..6324b30f0 --- /dev/null +++ b/packages/console/src/pages/AuditLogDetails/components/EventIcon/index.tsx @@ -0,0 +1,28 @@ +import classNames from 'classnames'; +import React from 'react'; +import { useTranslation } from 'react-i18next'; + +import Failed from './Failed'; +import Success from './Success'; +import * as styles from './index.module.scss'; + +type Props = { + isSuccess: boolean; +}; + +const EventIcon = ({ isSuccess }: Props) => { + const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); + + return ( +
+
+ {isSuccess ? : } +
+
+ {t(isSuccess ? 'log_details.success' : 'log_details.failed')} +
+
+ ); +}; + +export default EventIcon; diff --git a/packages/console/src/pages/AuditLogDetails/index.module.scss b/packages/console/src/pages/AuditLogDetails/index.module.scss new file mode 100644 index 000000000..3ea22a14b --- /dev/null +++ b/packages/console/src/pages/AuditLogDetails/index.module.scss @@ -0,0 +1,56 @@ +@use '@/scss/underscore' as _; + +.backLink { + margin: _.unit(1) 0 0 _.unit(1); +} + +.header { + padding: _.unit(6); + display: flex; + + > *:not(:first-child) { + margin-left: _.unit(6); + } + + .content { + flex: 1; + + .eventName { + color: var(--color-text); + font: var(--font-title-large); + } + + .basicInfo { + display: flex; + align-items: center; + flex-wrap: wrap; + padding-top: _.unit(4); + + > * { + width: 270px; + margin: 0 _.unit(4) _.unit(4) 0; + } + } + + .infoItem { + color: var(--color-text); + font: var(--font-body-medium); + + .label { + color: var(--color-caption); + font: var(--font-subhead-2); + margin-bottom: _.unit(2); + } + } + } +} + +.body { + > :not(:first-child) { + margin-top: _.unit(4); + } + + .main { + padding-bottom: _.unit(4); + } +} diff --git a/packages/console/src/pages/AuditLogDetails/index.tsx b/packages/console/src/pages/AuditLogDetails/index.tsx new file mode 100644 index 000000000..1561d6ae8 --- /dev/null +++ b/packages/console/src/pages/AuditLogDetails/index.tsx @@ -0,0 +1,104 @@ +import { LogDTO } from '@logto/schemas'; +import classNames from 'classnames'; +import dayjs from 'dayjs'; +import React from 'react'; +import { useTranslation } from 'react-i18next'; +import { useParams } from 'react-router-dom'; +import useSWR from 'swr'; + +import ApplicationName from '@/components/ApplicationName'; +import Card from '@/components/Card'; +import CodeEditor from '@/components/CodeEditor'; +import DetailsSkeleton from '@/components/DetailsSkeleton'; +import LinkButton from '@/components/LinkButton'; +import TabNav, { TabNavItem } from '@/components/TabNav'; +import UserName from '@/components/UserName'; +import { logEventTitle } from '@/consts/logs'; +import { RequestError } from '@/hooks/use-api'; +import Back from '@/icons/Back'; +import * as detailsStyles from '@/scss/details.module.scss'; + +import EventIcon from './components/EventIcon'; +import * as styles from './index.module.scss'; + +const AuditLogDetails = () => { + const { logId } = useParams(); + const { t } = useTranslation(undefined, { keyPrefix: 'admin_console' }); + const { data, error } = useSWR(logId && `/api/logs/${logId}`); + const isLoading = !data && !error; + + return ( +
+ } + title="admin_console.log_details.back_to_logs" + className={styles.backLink} + /> + {isLoading && } + {!data && error &&
{`error occurred: ${error.body?.message ?? error.message}`}
} + {data && ( + <> + + +
+
{logEventTitle[data.type]}
+
+
+
{t('log_details.event_type')}
+
{data.type}
+
+
+
{t('log_details.application')}
+
+ {data.payload.applicationId ? ( + + ) : ( + '-' + )} +
+
+
+
{t('log_details.ip_address')}
+
{data.payload.ip ?? '-'}
+
+
+
{t('log_details.user')}
+
+ {data.payload.userId ? : '-'} +
+
+
+
{t('log_details.log_id')}
+
{data.id}
+
+
+
{t('log_details.time')}
+
{dayjs(data.createdAt).toDate().toLocaleString()}
+
+
+
+
+
{t('log_details.user_agent')}
+
{data.payload.userAgent}
+
+
+
+ + + + + {t('log_details.tab_details')} + + +
+ +
+ + + )} +
+ ); +}; + +export default AuditLogDetails; diff --git a/packages/phrases/src/locales/en.ts b/packages/phrases/src/locales/en.ts index 75f463ef0..61d910cc1 100644 --- a/packages/phrases/src/locales/en.ts +++ b/packages/phrases/src/locales/en.ts @@ -545,6 +545,20 @@ const translation = { time: 'Time', filter_by: 'Filter by', }, + log_details: { + back_to_logs: 'Back to Audit Logs', + success: 'Success', + failed: 'Failed', + event_type: 'Event Type', + application: 'Application', + ip_address: 'IP Address', + user: 'User', + log_id: 'Log ID', + time: 'Time', + user_agent: 'User Agent', + tab_details: 'Details', + raw_data: 'Raw data', + }, session_expired: { title: 'Session Expired', subtitle: diff --git a/packages/phrases/src/locales/zh-cn.ts b/packages/phrases/src/locales/zh-cn.ts index 430c82169..96e9b019f 100644 --- a/packages/phrases/src/locales/zh-cn.ts +++ b/packages/phrases/src/locales/zh-cn.ts @@ -529,6 +529,20 @@ const translation = { time: '时间', filter_by: '过滤', }, + log_details: { + back_to_logs: '返回审计日志', + success: '成功', + failed: '失败', + event_type: '事件类型', + application: '应用', + ip_address: 'IP 地址', + user: '用户', + log_id: '日志 ID', + time: '时间', + user_agent: '用户代理', + tab_details: '详情', + raw_data: '原始数据', + }, session_expired: { title: '会话已过期', subtitle: '会话可能已过期，您已被登出. 请点击下方按钮重新登录到管理界面.', diff --git a/packages/schemas/src/types/log.ts b/packages/schemas/src/types/log.ts index 4eac00442..8654f6dcc 100644 --- a/packages/schemas/src/types/log.ts +++ b/packages/schemas/src/types/log.ts @@ -145,5 +145,7 @@ export type LogDTO = Omit & { userId?: string; applicationId?: string; result?: string; + userAgent?: string; + ip?: string; }; };