fix(admin-ui): Use typescript generated client on MAU, Reports and Heath pages

admin-ui/app/context/theme/themeContext.tsx

@@ -1,4 +1,4 @@
-import React, { createContext, useReducer, Dispatch, ReactNode } from 'react'
+import React, { createContext, useReducer, useContext, Dispatch, ReactNode } from 'react'
 
 // Define the shape of the theme state
 type ThemeState = {
@@ -40,3 +40,11 @@ export function ThemeProvider(props: ThemeProviderProps) {
   const [state, dispatch] = useReducer(themeReducer, initialState)
   return <ThemeContext.Provider value={{ state, dispatch }}>{props.children}</ThemeContext.Provider>
 }
+
+export function useTheme(): ThemeContextType {
+  const context = useContext(ThemeContext)
+  if (!context) {
+    throw new Error('useTheme must be used within a ThemeProvider')
+  }
+  return context
+}

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

@@ -61,7 +61,8 @@
     "remove_source_server": "Remove source server",
     "copy_to_clipboard": "Copy To Clipboard",
     "export_csv": "Export CSV",
-    "add_custom_attributes": "Add custom attributes"
+    "add_custom_attributes": "Add custom attributes",
+    "refresh": "Refresh"
   },
   "dashboard": {
     "summary_title": "Actives Users & Access Token Stats",
@@ -358,6 +359,14 @@
     "minimum_length": "Minimum length",
     "month": "Month",
     "monthly_active_users": "Monthly Active Users",
+    "total_mau": "Total MAU",
+    "total_tokens": "Total Tokens",
+    "cc_tokens": "Client Credentials Tokens",
+    "authz_code_tokens": "Authorization Code Tokens",
+    "date_preset_3m": "3 Months",
+    "date_preset_6m": "6 Months",
+    "date_preset_1y": "1 Year",
+    "date_preset_custom": "Custom",
     "multivalued": "Multivalued?",
     "name": "Name",
     "type": "Type",
@@ -856,7 +865,22 @@
     "user_updated_successfully": "User updated successfully",
     "user_deleted_successfully": "User deleted successfully",
     "password_changed_successfully": "Password changed successfully",
-    "device_deleted_successfully": "Device deleted successfully"
+    "device_deleted_successfully": "Device deleted successfully",
+    "service_status_up": "Service is running normally.",
+    "service_status_down": "Service is currently unavailable.",
+    "service_status_degraded": "Service is experiencing issues.",
+    "service_status_unknown": "Service status could not be determined.",
+    "services_healthy_count": "{{healthyCount}} of {{totalCount}} services healthy",
+    "error_fetching_health_status": "Error fetching health status. Please try again.",
+    "no_services_found": "No services found.",
+    "status_online": "Online",
+    "status_offline": "Offline",
+    "status_degraded": "Degraded",
+    "status_unknown": "Unknown",
+    "no_mau_data": "No data available for the selected period.",
+    "error_loading_data": "An error occurred while loading data. Please try again.",
+    "mau_loading": "Loading statistics...",
+    "vs_previous_period": "vs previous period"
   },
   "errors": {
     "attribute_create_failed": "Error creating attribute",
@@ -1001,6 +1025,10 @@
     "detail_contact": "Detail Contact",
     "ldap_authentication": "LDAP Authentication",
     "services_health": "Services Health Status",
+    "mau_dashboard": "Monthly Active Users Dashboard",
+    "mau_trend": "MAU Trend Over Time",
+    "token_distribution": "Token Distribution by Type",
+    "token_trends": "Token Trends Over Time",
     "sql_authentication": "SQL Authentication",
     "logging": "LOGGING",
     "jwk_keys": "JWK keys",

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

@@ -61,7 +61,8 @@
     "remove_source_server": "Eliminar servidor de origen",
     "copy_to_clipboard": "Copiar al portapapeles",
     "export_csv": "Exportar CSV",
-    "add_custom_attributes": "Agregar atributos personalizados"
+    "add_custom_attributes": "Agregar atributos personalizados",
+    "refresh": "Actualizar"
   },
   "dashboard": {
     "summary_title": "Usuarios Activos y Estadísticas de Tokens de Acceso",
@@ -358,6 +359,14 @@
     "minimum_length": "Longitud Mínima",
     "month": "Mes",
     "monthly_active_users": "Usuarios Activos Mensuales",
+    "total_mau": "MAU Total",
+    "total_tokens": "Tokens Totales",
+    "cc_tokens": "Tokens de Credenciales de Cliente",
+    "authz_code_tokens": "Tokens de Código de Autorización",
+    "date_preset_3m": "3 Meses",
+    "date_preset_6m": "6 Meses",
+    "date_preset_1y": "1 Año",
+    "date_preset_custom": "Personalizado",
     "multivalued": "¿Multivalorado?",
     "name": "Nombre",
     "type": "Tipo",
@@ -855,7 +864,22 @@
     "user_updated_successfully": "Usuario actualizado exitosamente",
     "user_deleted_successfully": "Usuario eliminado exitosamente",
     "password_changed_successfully": "Contraseña cambiada exitosamente",
-    "device_deleted_successfully": "Dispositivo eliminado exitosamente"
+    "device_deleted_successfully": "Dispositivo eliminado exitosamente",
+    "service_status_up": "El servicio está funcionando normalmente.",
+    "service_status_down": "El servicio no está disponible actualmente.",
+    "service_status_degraded": "El servicio está experimentando problemas.",
+    "service_status_unknown": "No se pudo determinar el estado del servicio.",
+    "services_healthy_count": "{{healthyCount}} de {{totalCount}} servicios en buen estado",
+    "error_fetching_health_status": "Error al obtener el estado de salud. Por favor, intente de nuevo.",
+    "no_services_found": "No se encontraron servicios.",
+    "status_online": "En línea",
+    "status_offline": "Fuera de línea",
+    "status_degraded": "Degradado",
+    "status_unknown": "Desconocido",
+    "no_mau_data": "No hay datos disponibles para el período seleccionado.",
+    "error_loading_data": "Ocurrió un error al cargar los datos. Por favor, inténtelo de nuevo.",
+    "mau_loading": "Cargando estadísticas...",
+    "vs_previous_period": "vs período anterior"
   },
   "errors": {
     "attribute_create_failed": "Error al crear el atributo",
@@ -994,6 +1018,10 @@
     "detail_contact": "Detalle de contacto",
     "ldap_authentication": "Autenticación LDAP",
     "services_health": "Estado de salud de los servicios",
+    "mau_dashboard": "Panel de Usuarios Activos Mensuales",
+    "mau_trend": "Tendencia de MAU en el Tiempo",
+    "token_distribution": "Distribución de Tokens por Tipo",
+    "token_trends": "Tendencias de Tokens en el Tiempo",
     "sql_authentication": "Autenticación SQL",
     "logging": "LOGGING",
     "jwk_keys": "Claves JWK",

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

@@ -171,7 +171,8 @@
     "add_source_attribute": "Ajouter un attribut source",
     "add_source_ldap_server": "Ajouter un serveur LDAP source",
     "remove_source_server": "Supprimer le serveur source",
-    "copy_to_clipboard": "Copier dans le presse-papier"
+    "copy_to_clipboard": "Copier dans le presse-papier",
+    "refresh": "Actualiser"
   },
   "fields": {
     "asset_name": "Asset Name",
@@ -479,6 +480,14 @@
     "minimum_length": "Longueur minimale",
     "month": "Mois",
     "monthly_active_users": "Utilisateurs actifs mensuels",
+    "total_mau": "MAU Total",
+    "total_tokens": "Jetons Totaux",
+    "cc_tokens": "Jetons d'Identification Client",
+    "authz_code_tokens": "Jetons de Code d'Autorisation",
+    "date_preset_3m": "3 Mois",
+    "date_preset_6m": "6 Mois",
+    "date_preset_1y": "1 An",
+    "date_preset_custom": "Personnalisé",
     "multivalued": "Multivalué ?",
     "name": "Nom",
     "type": "Taper",
@@ -793,7 +802,22 @@
     "user_updated_successfully": "Utilisateur mis à jour avec succès",
     "user_deleted_successfully": "Utilisateur supprimé avec succès",
     "password_changed_successfully": "Mot de passe modifié avec succès",
-    "device_deleted_successfully": "Appareil supprimé avec succès"
+    "device_deleted_successfully": "Appareil supprimé avec succès",
+    "service_status_up": "Le service fonctionne normalement.",
+    "service_status_down": "Le service est actuellement indisponible.",
+    "service_status_degraded": "Le service rencontre des problèmes.",
+    "service_status_unknown": "L'état du service n'a pas pu être déterminé.",
+    "services_healthy_count": "{{healthyCount}} sur {{totalCount}} services en bon état",
+    "error_fetching_health_status": "Erreur lors de la récupération de l'état de santé. Veuillez réessayer.",
+    "no_services_found": "Aucun service trouvé.",
+    "status_online": "En ligne",
+    "status_offline": "Hors ligne",
+    "status_degraded": "Dégradé",
+    "status_unknown": "Inconnu",
+    "no_mau_data": "Aucune donnée disponible pour la période sélectionnée.",
+    "error_loading_data": "Une erreur s'est produite lors du chargement des données. Veuillez réessayer.",
+    "mau_loading": "Chargement des statistiques...",
+    "vs_previous_period": "vs période précédente"
   },
   "errors": {
     "attribute_create_failed": "Erreur lors de la création de l'attribut",
@@ -920,6 +944,11 @@
     "detail_information": "Des informations détaillées",
     "detail_contact": "Détails Contact",
     "ldap_authentication": "Authentification LDAP",
+    "services_health": "État de Santé des Services",
+    "mau_dashboard": "Tableau de Bord des Utilisateurs Actifs Mensuels",
+    "mau_trend": "Tendance MAU dans le Temps",
+    "token_distribution": "Distribution des Jetons par Type",
+    "token_trends": "Tendances des Jetons dans le Temps",
     "sql_authentication": "Authentification SQL",
     "logging": "ENREGISTREMENT",
     "jwk_keys": "Clés JWK",

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

@@ -168,7 +168,8 @@
     "add_source_attribute": "Adicionar atributo de origem",
     "add_source_ldap_server": "Adicionar servidor LDAP de origem",
     "remove_source_server": "Remover servidor de origem",
-    "copy_to_clipboard": "Copiar para área de transferência"
+    "copy_to_clipboard": "Copiar para área de transferência",
+    "refresh": "Atualizar"
   },
   "fields": {
     "asset_name": "Asset Name",
@@ -491,6 +492,14 @@
     "minimum_length": "Comprimento mínimo",
     "month": "Mês",
     "monthly_active_users": "Usuários ativos mensais",
+    "total_mau": "MAU Total",
+    "total_tokens": "Tokens Totais",
+    "cc_tokens": "Tokens de Credenciais de Cliente",
+    "authz_code_tokens": "Tokens de Código de Autorização",
+    "date_preset_3m": "3 Meses",
+    "date_preset_6m": "6 Meses",
+    "date_preset_1y": "1 Ano",
+    "date_preset_custom": "Personalizado",
     "multivalued": "Multivalorado?",
     "name": "Nome",
     "type": "Tipo",
@@ -788,7 +797,22 @@
     "user_updated_successfully": "Usuário atualizado com sucesso",
     "user_deleted_successfully": "Usuário excluído com sucesso",
     "password_changed_successfully": "Senha alterada com sucesso",
-    "device_deleted_successfully": "Dispositivo excluído com sucesso"
+    "device_deleted_successfully": "Dispositivo excluído com sucesso",
+    "service_status_up": "O serviço está funcionando normalmente.",
+    "service_status_down": "O serviço está indisponível no momento.",
+    "service_status_degraded": "O serviço está enfrentando problemas.",
+    "service_status_unknown": "Não foi possível determinar o status do serviço.",
+    "services_healthy_count": "{{healthyCount}} de {{totalCount}} serviços saudáveis",
+    "error_fetching_health_status": "Erro ao obter o status de saúde. Por favor, tente novamente.",
+    "no_services_found": "Nenhum serviço encontrado.",
+    "status_online": "Online",
+    "status_offline": "Offline",
+    "status_degraded": "Degradado",
+    "status_unknown": "Desconhecido",
+    "no_mau_data": "Nenhum dado disponível para o período selecionado.",
+    "error_loading_data": "Ocorreu um erro ao carregar os dados. Por favor, tente novamente.",
+    "mau_loading": "Carregando estatísticas...",
+    "vs_previous_period": "vs período anterior"
   },
   "errors": {
     "attribute_create_failed": "Erro ao criar atributo",
@@ -913,6 +937,11 @@
     "detail_information": "Informação detalhada",
     "detail_contact": "Detalhes de contato",
     "ldap_authentication": "Autenticação Ldap",
+    "services_health": "Estado de Saúde dos Serviços",
+    "mau_dashboard": "Painel de Usuários Ativos Mensais",
+    "mau_trend": "Tendência de MAU ao Longo do Tempo",
+    "token_distribution": "Distribuição de Tokens por Tipo",
+    "token_trends": "Tendências de Tokens ao Longo do Tempo",
     "sql_authentication": "Autenticação Sql",
     "logging": "EXPLORAÇÃO MADEIREIRA",
     "jwk_keys": "Chaves JWK",

admin-ui/plugins/admin/components/Health/HealthPage.tsx

@@ -0,0 +1,85 @@
+import React, { useCallback } from 'react'
+import { Container, CardBody, Card, Button, Row, Col, Alert } from 'Components'
+import { useTranslation } from 'react-i18next'
+import SetTitle from 'Utils/SetTitle'
+import { useTheme } from 'Context/theme/themeContext'
+import getThemeColor from '@/context/theme/config'
+import GluuLoader from 'Routes/Apps/Gluu/GluuLoader'
+import { useHealthStatus } from './hooks'
+import ServiceStatusCard from './components/ServiceStatusCard'
+import HealthStatusBadge from './components/HealthStatusBadge'
+
+const HealthPage: React.FC = () => {
+  const { t } = useTranslation()
+  SetTitle(t('titles.services_health'))
+
+  const { state } = useTheme()
+  const themeColors = getThemeColor(state.theme)
+
+  const {
+    services,
+    overallStatus,
+    healthyCount,
+    totalCount,
+    isLoading,
+    isFetching,
+    isError,
+    refetch,
+  } = useHealthStatus()
+
+  const handleRefresh = useCallback(() => {
+    refetch()
+  }, [refetch])
+
+  const loading = isLoading || isFetching
+
+  return (
+    <GluuLoader blocking={loading}>
+      <Container>
+        <Card className="mb-3">
+          <CardBody>
+            <Row className="mb-4 align-items-center">
+              <Col>
+                <h4 className="mb-0 d-flex align-items-center gap-3">
+                  {t('titles.services_health')}
+                  {!isLoading && !isError && <HealthStatusBadge status={overallStatus} />}
+                </h4>
+                {!isLoading && !isError && totalCount > 0 && (
+                  <small className="text-muted">
+                    {t('messages.services_healthy_count', { healthyCount, totalCount })}
+                  </small>
+                )}
+              </Col>
+              <Col xs="auto">
+                <Button color={`primary-${state.theme}`} onClick={handleRefresh} disabled={loading}>
+                  <i className={`fa fa-refresh me-2 ${loading ? 'fa-spin' : ''}`}></i>
+                  {t('actions.refresh')}
+                </Button>
+              </Col>
+            </Row>
+
+            {isError && (
+              <Alert color="danger" className="mb-4">
+                <i className="fa fa-exclamation-triangle me-2"></i>
+                {t('messages.error_fetching_health_status')}
+              </Alert>
+            )}
+
+            {!isLoading && !isError && services.length === 0 && (
+              <Alert color="info">
+                <i className="fa fa-info-circle me-2"></i>
+                {t('messages.no_services_found')}
+              </Alert>
+            )}
+
+            {services.map((service) => (
+              <ServiceStatusCard key={service.name} service={service} themeColors={themeColors} />
+            ))}
+          </CardBody>
+        </Card>
+      </Container>
+    </GluuLoader>
+  )
+}
+
+export default HealthPage