feat(admin-ui): add Auth Metrics dashboard for authentication and token activity (#2983)

admin-ui/app/components/GluuDatePicker/GluuDatePicker.style.ts

@@ -24,13 +24,14 @@ const buildPickerThemeColors = (
   isDark: boolean,
   textColor?: string,
   backgroundColor?: string,
+  inputBackgroundColor?: string,
 ): PickerThemeColors => {
   const inputText = textColor || themeConfig.fontColor
   const borderColor = isDark ? 'transparent' : themeConfig.borderColor
   const hoverBg = getLoadingOverlayRgba(themeConfig.fontColor, getHoverOpacity(isDark))
   return {
     labelBackground: backgroundColor || themeConfig.background,
-    inputBackground: themeConfig.inputBackground,
+    inputBackground: inputBackgroundColor || themeConfig.inputBackground,
     inputTextColor: inputText,
     labelColor: inputText,
     borderColor,
@@ -113,6 +114,7 @@ const buildTextFieldSx = (
   '& .MuiInputBase-root, & .MuiPickersInputBase-root': {
     color: tc.inputTextColor,
     backgroundColor: tc.inputBackground,
+    borderRadius: `${BORDER_RADIUS.SMALL}px`,
     ...(inputHeight != null ? { height: inputHeight, minHeight: inputHeight } : {}),
     // With the calendar icon hidden on mobile, center the date in the freed space.
     ...(forceIcon ? {} : { [HIDE_ICON_QUERY]: { justifyContent: 'center' } }),
@@ -132,7 +134,10 @@ const buildTextFieldSx = (
     color: tc.inputTextColor,
   },
   '& .MuiOutlinedInput-root, & .MuiPickersOutlinedInput-root': {
-    '& fieldset, & .MuiPickersOutlinedInput-notchedOutline': { borderColor: tc.borderColor },
+    '& fieldset, & .MuiPickersOutlinedInput-notchedOutline': {
+      borderColor: tc.borderColor,
+      borderRadius: `${BORDER_RADIUS.SMALL}px`,
+    },
     '&:hover fieldset, &:hover .MuiPickersOutlinedInput-notchedOutline': {
       borderColor: tc.borderColor,
     },
@@ -462,13 +467,15 @@ export const useDatePickerStyles = (params: GluuDatePickerStyleParams) => {
     isDark,
     textColor,
     backgroundColor,
+    inputBackgroundColor,
     inputHeight,
     labelShrink = true,
     forceIcon = false,
   } = params
   const pickerTheme = useMemo(
-    () => buildPickerThemeColors(themeColors, isDark, textColor, backgroundColor),
-    [themeColors, isDark, textColor, backgroundColor],
+    () =>
+      buildPickerThemeColors(themeColors, isDark, textColor, backgroundColor, inputBackgroundColor),
+    [themeColors, isDark, textColor, backgroundColor, inputBackgroundColor],
   )
   const { classes } = useLayoutStyles({ labelColor: pickerTheme.labelColor })
 

admin-ui/app/components/GluuDatePicker/GluuDatePicker.tsx

@@ -40,6 +40,7 @@ const rangePropsEqual = (a: GluuDatePickerRangeProps, b: GluuDatePickerRangeProp
     a.inputHeight === b.inputHeight &&
     a.textColor === b.textColor &&
     a.backgroundColor === b.backgroundColor &&
+    a.inputBackgroundColor === b.inputBackgroundColor &&
     (a.dateFormat ?? a.format) === (b.dateFormat ?? b.format) &&
     a.onStartDateChange === b.onStartDateChange &&
     a.onEndDateChange === b.onEndDateChange &&
@@ -68,6 +69,7 @@ const GluuDatePicker = memo(
       isDark: isDarkTheme,
       textColor: props.textColor,
       backgroundColor: props.backgroundColor,
+      inputBackgroundColor: props.inputBackgroundColor,
       inputHeight: props.inputHeight,
       labelShrink,
       forceIcon: props.forceIcon,
@@ -135,6 +137,7 @@ const GluuDatePicker = memo(
       prev.inputHeight === next.inputHeight &&
       prev.textColor === next.textColor &&
       prev.backgroundColor === next.backgroundColor &&
+      prev.inputBackgroundColor === next.inputBackgroundColor &&
       prev.minDate === next.minDate &&
       prev.maxDate === next.maxDate &&
       prev.disabled === next.disabled

admin-ui/app/components/GluuDatePicker/types.ts

@@ -24,6 +24,7 @@ export type GluuDatePickerStyleParams = {
   isDark: boolean
   textColor?: string
   backgroundColor?: string
+  inputBackgroundColor?: string
   inputHeight?: number
   labelShrink?: boolean
   forceIcon?: boolean
@@ -34,6 +35,7 @@ type GluuDatePickerBase = {
   dateFormat?: string
   textColor?: string
   backgroundColor?: string
+  inputBackgroundColor?: string
   inputHeight?: number
   showTime?: boolean
   forceIcon?: boolean

admin-ui/app/constants/ui.ts

@@ -310,7 +310,7 @@ export const SUMMARY_CARD = {
 } as const
 
 export const getSegmentedButtonStyle = (isFirst: boolean, isLast: boolean) => {
-  const radius = BORDER_RADIUS.SMALL_MEDIUM
+  const radius = BORDER_RADIUS.SMALL
   return {
     borderRadius: isFirst
       ? `${radius}px 0 0 ${radius}px`

admin-ui/app/helpers/navigation.ts

@@ -138,6 +138,7 @@ const ROUTES = {
   FIDO_BASE: `${PLUGIN_BASE_PATHS.FIDO}/configuration`,
   FIDO_METRICS: `${PLUGIN_BASE_PATHS.FIDO}/metrics`,
   FIDO_SECURITY_MONITOR: `${PLUGIN_BASE_PATHS.FIDO}/security-monitor`,
+  FIDO_AUTH_METRICS: `${PLUGIN_BASE_PATHS.FIDO}/auth-metrics`,
 
   // ========== SMTP Plugin ==========
   SMTP_BASE: `${PLUGIN_BASE_PATHS.SMTP}/smtpmanagement`,

admin-ui/app/locales/en/translation.json

@@ -832,7 +832,36 @@
     "metric": "Metric",
     "label": "Label",
     "secondary_value": "Secondary value",
-    "suspicious_ips": "Suspicious IP addresses"
+    "suspicious_ips": "Suspicious IP addresses",
+    "auth_metrics_unavailable": "Metrics are unavailable. Check that the metric plugin is deployed and your token carries the metric.readonly scope.",
+    "auth_metrics_partial": "Some metric types could not be loaded. The figures below are incomplete.",
+    "auth_activity_subtitle": "Successful and failed authentications over time.",
+    "auth_by_acr_subtitle": "Successful authentications split by authentication context.",
+    "token_issuance_subtitle": "Tokens and authorization codes issued over time.",
+    "auth_success": "Successful",
+    "auth_failure": "Failed",
+    "auth_attempts": "Attempts",
+    "acr_in_use": "ACRs in use",
+    "access_tokens": "Access tokens",
+    "id_tokens": "ID tokens",
+    "refresh_tokens": "Refresh tokens",
+    "authorization_codes": "Authorization codes",
+    "select_granularity": "Select granularity",
+    "date_preset_24h": "24 Hours",
+    "date_preset_7d": "7 Days",
+    "date_preset_30d": "30 Days",
+    "granularity": "Granularity",
+    "granularity_hourly": "Hourly",
+    "granularity_hours_3": "3 Hours",
+    "granularity_hours_12": "12 Hours",
+    "granularity_hours_24": "24 Hours",
+    "granularity_daily": "Daily",
+    "granularity_days_3": "3 Days",
+    "granularity_days_7": "7 Days",
+    "granularity_days_15": "15 Days",
+    "granularity_days_21": "21 Days",
+    "granularity_days_30": "30 Days",
+    "auth_metrics_truncated": "Showing partial data: this range holds more entries than one page walk can read. Narrow the range for exact totals."
   },
   "languages": {
     "language": "Language",
@@ -941,7 +970,8 @@
     "allCategory": "All Category",
     "notification": "Notification",
     "mobileNavigation": "Mobile navigation",
-    "security_monitor": "Security Monitor"
+    "security_monitor": "Security Monitor",
+    "auth_metrics": "Auth Metrics"
   },
   "footer": {
     "company_name": "Gluu Inc."
@@ -1696,7 +1726,12 @@
     "error_intelligence": "Error Types",
     "velocity_watch": "Attempts by User",
     "device_fingerprint_shift": "Authenticator Types",
-    "threat_origins_ips": "Threat Origins by IP"
+    "threat_origins_ips": "Threat Origins by IP",
+    "auth_metrics": "Auth Metrics",
+    "auth_activity": "Authentication Activity",
+    "auth_by_acr": "Authentications by ACR",
+    "token_issuance": "Token Issuance",
+    "auth_token_activity": "Authentication & Token Activity"
   },
   "options": {
     "admin": "ADMIN",

admin-ui/app/locales/es/translation.json

@@ -832,7 +832,36 @@
     "metric": "Métrica",
     "label": "Etiqueta",
     "secondary_value": "Valor secundario",
-    "suspicious_ips": "Direcciones IP sospechosas"
+    "suspicious_ips": "Direcciones IP sospechosas",
+    "auth_metrics_unavailable": "Las métricas no están disponibles. Compruebe que el plugin de métricas esté desplegado y que su token tenga el permiso metric.readonly.",
+    "auth_metrics_partial": "No se pudieron cargar algunos tipos de métrica. Las cifras siguientes están incompletas.",
+    "auth_activity_subtitle": "Autenticaciones correctas y fallidas a lo largo del tiempo.",
+    "auth_by_acr_subtitle": "Autenticaciones correctas divididas por contexto de autenticación.",
+    "token_issuance_subtitle": "Tokens y códigos de autorización emitidos a lo largo del tiempo.",
+    "auth_success": "Correctas",
+    "auth_failure": "Fallidas",
+    "auth_attempts": "Intentos",
+    "acr_in_use": "ACR en uso",
+    "access_tokens": "Tokens de acceso",
+    "id_tokens": "Tokens de ID",
+    "refresh_tokens": "Tokens de actualización",
+    "authorization_codes": "Códigos de autorización",
+    "select_granularity": "Seleccionar granularidad",
+    "date_preset_24h": "24 horas",
+    "date_preset_7d": "7 días",
+    "date_preset_30d": "30 días",
+    "granularity": "Granularidad",
+    "granularity_hourly": "Cada hora",
+    "granularity_hours_3": "3 horas",
+    "granularity_hours_12": "12 horas",
+    "granularity_hours_24": "24 horas",
+    "granularity_daily": "Diario",
+    "granularity_days_3": "3 días",
+    "granularity_days_7": "7 días",
+    "granularity_days_15": "15 días",
+    "granularity_days_21": "21 días",
+    "granularity_days_30": "30 días",
+    "auth_metrics_truncated": "Mostrando datos parciales: este intervalo contiene más entradas de las que se pueden leer. Reduzca el intervalo para obtener totales exactos."
   },
   "languages": {
     "language": "Idioma",
@@ -941,7 +970,8 @@
     "allCategory": "Todas las categorías",
     "notification": "Notificación",
     "mobileNavigation": "Navegación móvil",
-    "security_monitor": "Monitor de Seguridad"
+    "security_monitor": "Monitor de Seguridad",
+    "auth_metrics": "Métricas de autenticación"
   },
   "footer": {
     "company_name": "Gluu Inc."
@@ -1699,7 +1729,12 @@
     "error_intelligence": "Tipos de error",
     "velocity_watch": "Intentos por usuario",
     "device_fingerprint_shift": "Tipos de autenticador",
-    "threat_origins_ips": "Orígenes de amenazas por IP"
+    "threat_origins_ips": "Orígenes de amenazas por IP",
+    "auth_metrics": "Métricas de autenticación",
+    "auth_activity": "Actividad de autenticación",
+    "auth_by_acr": "Autenticaciones por ACR",
+    "token_issuance": "Emisión de tokens",
+    "auth_token_activity": "Actividad de autenticación y tokens"
   },
   "options": {
     "admin": "ADMIN",

admin-ui/app/locales/fr/translation.json

@@ -162,7 +162,8 @@
     "allCategory": "Toutes les catégories",
     "notification": "Notification",
     "mobileNavigation": "Navigation mobile",
-    "security_monitor": "Moniteur de Sécurité"
+    "security_monitor": "Moniteur de Sécurité",
+    "auth_metrics": "Métriques d'authentification"
   },
   "actions": {
     "accept": "J'accepte",
@@ -945,7 +946,36 @@
     "metric": "Métrique",
     "label": "Libellé",
     "secondary_value": "Valeur secondaire",
-    "suspicious_ips": "Adresses IP suspectes"
+    "suspicious_ips": "Adresses IP suspectes",
+    "auth_metrics_unavailable": "Les métriques sont indisponibles. Vérifiez que le plugin de métriques est déployé et que votre jeton possède la portée metric.readonly.",
+    "auth_metrics_partial": "Certains types de métrique n'ont pas pu être chargés. Les chiffres ci-dessous sont incomplets.",
+    "auth_activity_subtitle": "Authentifications réussies et échouées au fil du temps.",
+    "auth_by_acr_subtitle": "Authentifications réussies réparties par contexte d'authentification.",
+    "token_issuance_subtitle": "Jetons et codes d'autorisation émis au fil du temps.",
+    "auth_success": "Réussies",
+    "auth_failure": "Échouées",
+    "auth_attempts": "Tentatives",
+    "acr_in_use": "ACR utilisés",
+    "access_tokens": "Jetons d'accès",
+    "id_tokens": "Jetons ID",
+    "refresh_tokens": "Jetons de rafraîchissement",
+    "authorization_codes": "Codes d'autorisation",
+    "select_granularity": "Sélectionner la granularité",
+    "date_preset_24h": "24 heures",
+    "date_preset_7d": "7 jours",
+    "date_preset_30d": "30 jours",
+    "granularity": "Granularité",
+    "granularity_hourly": "Horaire",
+    "granularity_hours_3": "3 heures",
+    "granularity_hours_12": "12 heures",
+    "granularity_hours_24": "24 heures",
+    "granularity_daily": "Quotidien",
+    "granularity_days_3": "3 jours",
+    "granularity_days_7": "7 jours",
+    "granularity_days_15": "15 jours",
+    "granularity_days_21": "21 jours",
+    "granularity_days_30": "30 jours",
+    "auth_metrics_truncated": "Données partielles affichées : cette plage contient plus d'entrées qu'il n'est possible de lire. Réduisez la plage pour obtenir des totaux exacts."
   },
   "footer": {
     "company_name": "Gluu Inc."
@@ -1704,7 +1734,12 @@
     "error_intelligence": "Types d'erreur",
     "velocity_watch": "Tentatives par utilisateur",
     "device_fingerprint_shift": "Types d'authentificateur",
-    "threat_origins_ips": "Origines des menaces par IP"
+    "threat_origins_ips": "Origines des menaces par IP",
+    "auth_metrics": "Métriques d'authentification",
+    "auth_activity": "Activité d'authentification",
+    "auth_by_acr": "Authentifications par ACR",
+    "token_issuance": "Émission de jetons",
+    "auth_token_activity": "Activité d'authentification et de jetons"
   },
   "options": {
     "admin": "ADMINISTRER",

admin-ui/app/locales/pt/translation.json

@@ -161,7 +161,8 @@
     "allCategory": "Todas as categorias",
     "notification": "Notificação",
     "mobileNavigation": "Navegação móvel",
-    "security_monitor": "Monitor de Segurança"
+    "security_monitor": "Monitor de Segurança",
+    "auth_metrics": "Métricas de autenticação"
   },
   "actions": {
     "accept": "Aceitar",
@@ -941,7 +942,36 @@
     "metric": "Métrica",
     "label": "Rótulo",
     "secondary_value": "Valor secundário",
-    "suspicious_ips": "Endereços IP suspeitos"
+    "suspicious_ips": "Endereços IP suspeitos",
+    "auth_metrics_unavailable": "As métricas não estão disponíveis. Verifique se o plugin de métricas está implementado e se o seu token tem o âmbito metric.readonly.",
+    "auth_metrics_partial": "Não foi possível carregar alguns tipos de métrica. Os números abaixo estão incompletos.",
+    "auth_activity_subtitle": "Autenticações bem-sucedidas e falhadas ao longo do tempo.",
+    "auth_by_acr_subtitle": "Autenticações bem-sucedidas divididas por contexto de autenticação.",
+    "token_issuance_subtitle": "Tokens e códigos de autorização emitidos ao longo do tempo.",
+    "auth_success": "Bem-sucedidas",
+    "auth_failure": "Falhadas",
+    "auth_attempts": "Tentativas",
+    "acr_in_use": "ACR em uso",
+    "access_tokens": "Tokens de acesso",
+    "id_tokens": "Tokens de ID",
+    "refresh_tokens": "Tokens de atualização",
+    "authorization_codes": "Códigos de autorização",
+    "select_granularity": "Selecionar granularidade",
+    "date_preset_24h": "24 horas",
+    "date_preset_7d": "7 dias",
+    "date_preset_30d": "30 dias",
+    "granularity": "Granularidade",
+    "granularity_hourly": "Por hora",
+    "granularity_hours_3": "3 horas",
+    "granularity_hours_12": "12 horas",
+    "granularity_hours_24": "24 horas",
+    "granularity_daily": "Diário",
+    "granularity_days_3": "3 dias",
+    "granularity_days_7": "7 dias",
+    "granularity_days_15": "15 dias",
+    "granularity_days_21": "21 dias",
+    "granularity_days_30": "30 dias",
+    "auth_metrics_truncated": "A mostrar dados parciais: este intervalo contém mais entradas do que é possível ler. Reduza o intervalo para obter totais exatos."
   },
   "footer": {
     "company_name": "Gluu Inc."
@@ -1700,7 +1730,12 @@
     "error_intelligence": "Tipos de erro",
     "velocity_watch": "Tentativas por usuário",
     "device_fingerprint_shift": "Tipos de autenticador",
-    "threat_origins_ips": "Origens de ameaças por IP"
+    "threat_origins_ips": "Origens de ameaças por IP",
+    "auth_metrics": "Métricas de autenticação",
+    "auth_activity": "Atividade de autenticação",
+    "auth_by_acr": "Autenticações por ACR",
+    "token_issuance": "Emissão de tokens",
+    "auth_token_activity": "Atividade de autenticação e tokens"
   },
   "options": {
     "admin": "ADMIN",

admin-ui/app/utils/dayjsUtils.ts

@@ -1,10 +1,12 @@
 import dayjs from 'dayjs'
 import isSameOrBefore from 'dayjs/plugin/isSameOrBefore'
 import customParseFormat from 'dayjs/plugin/customParseFormat'
+import utc from 'dayjs/plugin/utc'
 import type { Dayjs, OpUnitType, ManipulateType } from 'dayjs'
 
 dayjs.extend(isSameOrBefore)
 dayjs.extend(customParseFormat)
+dayjs.extend(utc)
 
 export type { Dayjs } from 'dayjs'
 
@@ -73,6 +75,13 @@ export const createDate = (
   return dayjs(date)
 }
 
+export const createUtcDate = (date?: string | number | Date | Dayjs | null): Dayjs => {
+  if (date == null) {
+    return dayjs.utc()
+  }
+  return dayjs.utc(date)
+}
+
 export const parseDateStrict = (date: string, format: string): Dayjs | null => {
   const parsed = dayjs(date, format, true)
   return parsed.isValid() ? parsed : null

admin-ui/openapi-merge.json

@@ -26,6 +26,9 @@
     },
     {
       "inputURL": "https://raw.githubusercontent.com/JanssenProject/jans/main/jans-config-api/plugins/docs/lock-plugin-swagger.yaml"
+    },
+    {
+      "inputURL": "https://raw.githubusercontent.com/JanssenProject/jans/main/jans-config-api/plugins/docs/metric-plugin-swagger.yaml"
     }
   ],
   "output": "./configApiSpecs.yaml"