Source: frontend/src/pages/admin/AdminDashboard.jsx

  1. /**
  2.  * @file AdminDashboard.jsx - Administrator-Verwaltungsoberfläche
  3.  * @author Miray
  4.  * @description Diese Komponente stellt die Hauptverwaltungsoberfläche für Administratoren dar.
  5.  * Sie ermöglicht die Verwaltung von Benutzern und das Monitoring von Datenbank-Aktivitäten.
  6.  * 
  7.  * @requires react
  8.  * @requires sweetalert2
  9.  * @requires ../../production-config
  10.  */
  12. import React, { useEffect, useState } from "react";
  13. import Swal from "sweetalert2";
  14. import prodconfig from "../../production-config";
  16. /**
  17.  * @component AdminDashboard
  18.  * @description Hauptkomponente für die Administrator-Verwaltungsoberfläche
  19.  * 
  20.  * @example
  21.  * return (
  22.  *   <AdminDashboard />
  23.  * )
  24.  */
  25. /**
  26.  * @typedef {Object} User
  27.  * @property {number} user_id - Eindeutige Benutzer-ID
  28.  * @property {string} user_name - Benutzername
  29.  * @property {string} email - E-Mail-Adresse des Benutzers
  30.  * @property {boolean} is_verified - Verifizierungsstatus
  31.  * @property {Date} registered_at - Registrierungsdatum
  32.  */
  33. /**
  34.  * @typedef {Object} DBSession
  35.  * @property {string} datname - Name der Datenbank
  36.  * @property {string} usename - Datenbankbenutzer
  37.  * @property {string} state - Aktueller Status
  38.  * @property {string} query - Aktuelle Abfrage
  39.  * @property {string} query_start - Startzeitpunkt der Abfrage
  40.  */
  41. /**
  42.  * @typedef {Object} DBStats
  43.  * @property {string} datname - Name der Datenbank
  44.  * @property {number} active_connections - Anzahl aktiver Verbindungen
  45.  * @property {number} committed_transactions - Anzahl erfolgreich abgeschlossener Transaktionen
  46.  * @property {number} rolledback_transactions - Anzahl zurückgerollter Transaktionen
  47.  * @property {number} blocks_read - Anzahl gelesener Blöcke
  48.  * @property {number} blocks_hit - Cache-Treffer
  49.  */
  50. /**
  51.  * State-Hooks der Komponente
  52.  * @type {Object}
  53.  * @property {User[]} users - Liste aller Benutzer
  54.  * @property {User|null} editingUser - Aktuell bearbeiteter Benutzer
  55.  * @property {string} newEmail - Neue E-Mail-Adresse bei Bearbeitung
  56.  * @property {string} newPassword - Neues Passwort bei Bearbeitung
  57.  * @property {DBSession[]} dbSessions - Aktive Datenbank-Sitzungen
  58.  * @property {DBStats[]} dbStats - Datenbankstatistiken
  59.  * @property {boolean} isMonitoringLoading - Ladezustand des Monitorings
  60.  * @property {Set<number>} adminUserIds - Set der Admin-Benutzer-IDs
  61.  */
  62. const AdminDashboard = () => {
  63.   const [users, setUsers] = useState([]);
  64.   const [editingUser, setEditingUser] = useState(null);
  65.   const [newEmail, setNewEmail] = useState("");
  66.   const [newPassword, setNewPassword] = useState("");
  67.   const [dbSessions, setDbSessions] = useState([]);
  68.   const [dbStats, setDbStats] = useState([]);
  69.   const [isMonitoringLoading, setIsMonitoringLoading] = useState(false);
  70.   const [adminUserIds, setAdminUserIds] = useState(new Set());
  72.   useEffect(() => {
  73.     fetchAdminUserIds();
  74.   }, []);
  75.   
  76. /**
  77.  * @function fetchAdminUserIds
  78.  * @async
  79.  * @description Ruft die IDs aller Admin-Benutzer vom Server ab
  80.  * @throws {Error} Wenn die Anfrage fehlschlägt
  81.  */
  82.   const fetchAdminUserIds = async () => {
  83.     try {
  84.       const response = await fetch(
  85.         `${prodconfig.backendUrl}/api/admin/admin-roles`,
  86.         { credentials: "include" }
  87.       );
  88.       const data = await response.json();
  89.       setAdminUserIds(new Set(data.adminUserIds)); 
  90.     } catch (error) {
  91.       console.error("Fehler beim Abrufen der Admin-Benutzer:", error);
  92.     }
  93.   };
  95.   useEffect(() => {
  96.     fetch(`${prodconfig.backendUrl}/api/admin/users`, { credentials: "include" })
  97.       .then((response) => response.json())
  98.       .then((data) => setUsers(data))
  99.       .catch((error) => console.error("Fehler beim Abrufen der Benutzer:", error));
  101.     fetchDbSessions();
  102.     fetchDbStats();
  103.   }, []);
  105.   /**
  106.  * @function fetchDbSessions
  107.  * @async
  108.  * @description Ruft aktuelle Datenbank-Sitzungsinformationen ab
  109.  * @throws {Error} Wenn die Abfrage fehlschlägt
  110.  */
  111.   const fetchDbSessions = async () => {
  112.     setIsMonitoringLoading(true);
  113.     try {
  114.       const response = await fetch(`${prodconfig.backendUrl}/monitor/db-sessions`, { credentials: "include" });
  115.       const data = await response.json();
  116.       setDbSessions(data);
  117.     } catch (error) {
  118.       console.error("Fehler beim Abrufen der DB-Sitzungen:", error);
  119.     } finally {
  120.       setIsMonitoringLoading(false);
  121.     }
  122.   };
  124.   /**
  125.  * @function fetchDbStats
  126.  * @async
  127.  * @description Ruft Datenbankstatistiken ab
  128.  * @throws {Error} Wenn die Abfrage fehlschlägt
  129.  */
  130.   const fetchDbStats = async () => {
  131.     setIsMonitoringLoading(true);
  132.     try {
  133.       const response = await fetch(`${prodconfig.backendUrl}/monitor/db-stats`, { credentials: "include" });
  134.       const data = await response.json();
  135.       setDbStats(data);
  136.     } catch (error) {
  137.       console.error("Fehler beim Abrufen der DB-Statistiken:", error);
  138.     } finally {
  139.       setIsMonitoringLoading(false);
  140.     }
  141.   };
  143.   /**
  144.  * @function deleteUser
  145.  * @async
  146.  * @param {number} id - ID des zu löschenden Benutzers
  147.  * @description Löscht einen Benutzer nach Bestätigung
  148.  * @throws {Error} Wenn das Löschen fehlschlägt
  149.  */
  150.   const deleteUser = async (id) => {
  151.     const confirmed = await Swal.fire({
  152.       title: "Benutzer löschen?",
  153.       text: "Dieser Vorgang kann nicht rückgängig gemacht werden!",
  154.       icon: "warning",
  155.       showCancelButton: true,
  156.       confirmButtonText: "Ja, löschen!",
  157.       cancelButtonText: "Abbrechen",
  158.     });
  160.     if (confirmed.isConfirmed) {
  161.       try {
  162.         await fetch(`${prodconfig.backendUrl}/api/admin/users/${id}`, { method: "DELETE", credentials: "include" });
  163.         setUsers(users.filter((user) => user.user_id !== id));
  164.         Swal.fire("Gelöscht!", "Der Benutzer wurde erfolgreich gelöscht.", "success");
  165.       } catch (error) {
  166.         Swal.fire("Fehler", "Benutzer konnte nicht gelöscht werden.", "error");
  167.         console.error("Fehler beim Löschen des Benutzers:", error);
  168.       }
  169.     }
  170.   };
  172.   /**
  173.  * @function assignAdmin
  174.  * @async
  175.  * @param {number} id - ID des Benutzers, der Admin-Rechte erhalten soll
  176.  * @description Weist einem Benutzer Admin-Rechte zu
  177.  * @throws {Error} Wenn die Rechtezuweisung fehlschlägt
  178.  */
  179.   const assignAdmin = async (id) => {
  180.     const user = users.find(u => u.user_id === id);
  181.   
  182.     if (user?.roles?.some(role => role.role_name === 'admin')) {
  183.       Swal.fire("Info", "Dieser Benutzer ist bereits Admin.", "info");
  184.       return;
  185.     }
  186.   
  187.     const confirmed = await Swal.fire({
  188.       title: "Sind Sie sicher?",
  189.       text: "Dieser Benutzer wird Admin-Rechte erhalten.",
  190.       icon: "warning",
  191.       showCancelButton: true,
  192.       confirmButtonText: "Ja, befördern!",
  193.       cancelButtonText: "Abbrechen",
  194.     });
  195.   
  196.     if (!confirmed.isConfirmed) return;
  197.   
  198.     try {
  199.       const response = await fetch(`${prodconfig.backendUrl}/api/admin/users/${id}/assign-admin`, {
  200.         method: "POST",
  201.         credentials: "include",
  202.       });
  203.   
  204.       if (!response.ok) {
  205.         const errorData = await response.json();
  206.         throw new Error(errorData.message || "Fehler beim Zuweisen der Admin-Rechte.");
  207.       }
  208.   
  209.       await Swal.fire("Erfolg", "Admin-Rechte erfolgreich zugewiesen.", "success");
  210.   
  211.       // Seite neu laden
  212.       window.location.reload();
  213.     } catch (error) {
  214.       Swal.fire("Fehler", error.message, "error");
  215.       console.error("Fehler beim Zuweisen der Admin-Rechte:", error);
  216.     }
  217.   };
  218.   
  219. /**
  220.  * @function updateUser
  221.  * @async
  222.  * @description Aktualisiert die Benutzerdaten des ausgewählten Benutzers
  223.  * @throws {Error} Wenn die Aktualisierung fehlschlägt
  224.  */
  225.   const updateUser = async () => {
  226.     try {
  227.       const response = await fetch(`${prodconfig.backendUrl}/api/admin/users/${editingUser.user_id}`, {
  228.         method: "PUT",
  229.         headers: { "Content-Type": "application/json" },
  230.         credentials: "include",
  231.         body: JSON.stringify({ email: newEmail, password: newPassword }),
  232.       });
  234.       if (!response.ok) {
  235.         const errorData = await response.json();
  236.         throw new Error(errorData.message || "Fehler beim Aktualisieren.");
  237.       }
  239.       setUsers((prevUsers) =>
  240.         prevUsers.map((user) =>
  241.           user.user_id === editingUser.user_id ? { ...user, email: newEmail } : user
  242.         )
  243.       );
  245.       Swal.fire("Erfolg", "Benutzer erfolgreich aktualisiert.", "success");
  246.       setEditingUser(null);
  247.       setNewEmail("");
  248.       setNewPassword("");
  249.     } catch (error) {
  250.       console.error("Fehler beim Aktualisieren des Benutzers:", error);
  251.     }
  252.   };
  254.   return (
  255.     <div className="dashboard">
  256.       <div className="shadow-sm bg-white border-y border-slate-200">
  257.         <div className="flex items-center justify-between py-2 px-3">
  258.           <h1 className="text-lg font-semibold text-black">Admin-Dashboard</h1>
  259.           <button
  260.             onClick={() => { window.location.href = "/dashboard"; }}
  261.             className="text-white bg-red-500 hover:bg-red-600 px-4 py-2 rounded-md"
  262.           >
  263.             Zurück zum Dashboard
  264.           </button>
  265.         </div>
  266.       </div>
  268.       <div className="mt-16 px-4">
  269.         <h2 className="text-xl font-semibold mb-4">Benutzerverwaltung</h2>
  270.         <table className="w-full text-black border-collapse border border-slate-300">
  271.           <thead>
  272.             <tr>
  273.               <th className="border border-slate-300 px-4 py-2">ID</th>
  274.               <th className="border border-slate-300 px-4 py-2">Benutzername</th>
  275.               <th className="border border-slate-300 px-4 py-2">E-Mail</th>
  276.               <th className="border border-slate-300 px-4 py-2">Verifiziert</th>
  277.               <th className="border border-slate-300 px-4 py-2">Registriert am</th>
  278.               <th className="border border-slate-300 px-4 py-2">Admin</th>
  279.               <th className="border border-slate-300 px-4 py-2">Aktionen</th>
  280.             </tr>
  281.           </thead>
  282.           <tbody>
  283.             {users.map((user) => (
  284.               <tr key={user.user_id}>
  285.                 <td className="border border-slate-300 px-4 py-2">{user.user_id}</td>
  286.                 <td className="border border-slate-300 px-4 py-2">{user.user_name}</td>
  287.                 <td className="border border-slate-300 px-4 py-2">{user.email}</td>
  288.                 <td className="border border-slate-300 px-4 py-2">
  289.                   {user.is_verified ? "Ja" : "Nein"}
  290.                 </td>
  291.                 <td className="border border-slate-300 px-4 py-2">
  292.                   {user.registered_at
  293.                     ? new Date(user.registered_at).toLocaleDateString("de-DE")
  294.                     : "Kein Datum"}
  295.                 </td>
  296.                 <td className="border border-slate-300 px-4 py-2">
  297.                   {adminUserIds.has(user.user_id) ? "Ja" : "Nein"}
  298.                 </td>
  299.                 <td className="border border-slate-300 px-4 py-2 flex gap-2">
  300.                   <button
  301.                     className={`px-3 py-1 rounded ${adminUserIds.has(user.user_id)
  302.                         ? "bg-gray-200 text-gray-600 cursor-not-allowed border border-gray-300"
  303.                         : "bg-[#669f62] hover:bg-[#68b461] text-white"
  304.                       }`}
  305.                     onClick={() => !adminUserIds.has(user.user_id) && assignAdmin(user.user_id)}
  306.                     disabled={adminUserIds.has(user.user_id)}
  307.                     title={
  308.                       adminUserIds.has(user.user_id)
  309.                         ? "Benutzer ist bereits Admin"
  310.                         : "Zum Admin befördern"
  311.                     }
  312.                   >
  313.                     {adminUserIds.has(user.user_id) ? "Bereits Admin" : "Admin-Rechte zuweisen"}
  314.                   </button>
  316.                   <button
  317.                     className="bg-red-500 text-white px-3 py-1 rounded hover:bg-red-600"
  318.                     onClick={() => deleteUser(user.user_id)}
  319.                   >
  320.                     Löschen
  321.                   </button>
  322.                   <button
  323.                     className="bg-blue-500 text-white px-3 py-1 rounded hover:bg-blue-600"
  324.                     onClick={() => {
  325.                       setEditingUser(user);
  326.                       setNewEmail(user.email);
  327.                       setNewPassword(""); 
  328.                     }}
  329.                   >
  330.                     Bearbeiten
  331.                   </button>
  332.                 </td>
  333.               </tr>
  334.             ))}
  335.           </tbody>
  336.         </table>
  337.       </div>
  339.       {editingUser && (
  340.         <div className="fixed inset-0 flex items-center justify-center bg-black bg-opacity-50 z-50">
  341.           <div className="bg-white p-6 rounded-lg shadow-lg max-w-md w-full">
  342.             <h2 className="text-xl font-bold mb-4">Benutzer bearbeiten</h2>
  343.             <form
  344.               onSubmit={(e) => {
  345.                 e.preventDefault();
  346.                 updateUser();
  347.               }}
  348.             >
  349.               <div className="mb-4">
  350.                 <label className="block text-sm font-medium text-gray-700">
  351.                   Benutzername:
  352.                 </label>
  353.                 <input
  354.                   type="text"
  355.                   value={editingUser.user_name}
  356.                   disabled
  357.                   className="w-full mt-1 p-2 border border-gray-300 rounded-md"
  358.                 />
  359.               </div>
  360.               <div className="mb-4">
  361.                 <label className="block text-sm font-medium text-gray-700">
  362.                   E-Mail:
  363.                 </label>
  364.                 <input
  365.                   type="email"
  366.                   value={newEmail}
  367.                   onChange={(e) => setNewEmail(e.target.value)}
  368.                   className="w-full mt-1 p-2 border border-gray-300 rounded-md"
  369.                 />
  370.               </div>
  371.               <div className="mb-4">
  372.                 <label className="block text-sm font-medium text-gray-700">
  373.                   Neues Passwort:
  374.                 </label>
  375.                 <input
  376.                   type="password"
  377.                   value={newPassword}
  378.                   onChange={(e) => setNewPassword(e.target.value)}
  379.                   className="w-full mt-1 p-2 border border-gray-300 rounded-md"
  380.                 />
  381.               </div>
  382.               <div className="flex justify-end gap-2">
  383.                 <button
  384.                   type="submit"
  385.                   className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
  386.                 >
  387.                   Speichern
  388.                 </button>
  389.                 <button
  390.                   type="button"
  391.                   onClick={() => {
  392.                     setEditingUser(null);
  393.                     setNewEmail("");
  394.                     setNewPassword("");
  395.                   }}
  396.                   className="bg-gray-300 px-4 py-2 rounded hover:bg-gray-400"
  397.                 >
  398.                   Abbrechen
  399.                 </button>
  400.               </div>
  401.             </form>
  402.           </div>
  403.         </div>
  404.       )}
  406.       <div className="monitoring-section mt-8">
  407.         <h2 className="text-xl font-semibold mb-4">System Monitoring</h2>
  409.         {isMonitoringLoading ? (
  410.           <p>Lade Monitoring-Daten...</p>
  411.         ) : (
  412.           <>
  413.             <div className="mb-6">
  414.               <h3 className="text-lg font-medium">Aktive DB-Sitzungen</h3>
  415.               <table className="w-full text-black border-collapse border border-slate-300">
  416.                 <thead>
  417.                   <tr>
  418.                     <th className="border border-slate-300 px-4 py-2">Datenbank</th>
  419.                     <th className="border border-slate-300 px-4 py-2">Benutzer</th>
  420.                     <th className="border border-slate-300 px-4 py-2">Status</th>
  421.                     <th className="border border-slate-300 px-4 py-2">Abfrage</th>
  422.                     <th className="border border-slate-300 px-4 py-2">Abfragebeginn</th>
  423.                   </tr>
  424.                 </thead>
  425.                 <tbody>
  426.                   {dbSessions.map((session, index) => (
  427.                     <tr key={index}>
  428.                       <td className="border border-slate-300 px-4 py-2">{session.datname}</td>
  429.                       <td className="border border-slate-300 px-4 py-2">{session.usename}</td>
  430.                       <td className="border border-slate-300 px-4 py-2">{session.state}</td>
  431.                       <td className="border border-slate-300 px-4 py-2">{session.query}</td>
  432.                       <td className="border border-slate-300 px-4 py-2">{session.query_start}</td>
  433.                     </tr>
  434.                   ))}
  435.                 </tbody>
  436.               </table>
  437.             </div>
  439.             <div>
  440.               <h3 className="text-lg font-medium">Datenbankstatistiken</h3>
  441.               <table className="w-full text-black border-collapse border border-slate-300">
  442.                 <thead>
  443.                   <tr>
  444.                     <th className="border border-slate-300 px-4 py-2">Datenbank</th>
  445.                     <th className="border border-slate-300 px-4 py-2">Aktive Verbindungen</th>
  446.                     <th className="border border-slate-300 px-4 py-2">Transaktionen (Commit)</th>
  447.                     <th className="border border-slate-300 px-4 py-2">Transaktionen (Rollback)</th>
  448.                     <th className="border border-slate-300 px-4 py-2">Gelesene Blöcke</th>
  449.                     <th className="border border-slate-300 px-4 py-2">Treffer in Blöcken</th>
  450.                   </tr>
  451.                 </thead>
  452.                 <tbody>
  453.                   {dbStats.map((stat, index) => (
  454.                     <tr key={index}>
  455.                       <td className="border border-slate-300 px-4 py-2">{stat.datname}</td>
  456.                       <td className="border border-slate-300 px-4 py-2">{stat.active_connections}</td>
  457.                       <td className="border border-slate-300 px-4 py-2">{stat.committed_transactions}</td>
  458.                       <td className="border border-slate-300 px-4 py-2">{stat.rolledback_transactions}</td>
  459.                       <td className="border border-slate-300 px-4 py-2">{stat.blocks_read}</td>
  460.                       <td className="border border-slate-300 px-4 py-2">{stat.blocks_hit}</td>
  461.                     </tr>
  462.                   ))}
  463.                 </tbody>
  464.               </table>
  465.             </div>
  466.           </>
  467.         )}
  468.       </div>
  469.     </div>
  470.   );
  471. };
  473. export default AdminDashboard;