ui: Improve logs page

ui/src/lib/locales/en.json

@@ -196,6 +196,14 @@
         "see": "Display the zone at this time",
         "title": "History of changes to the zone "
     },
+    "logs": {
+      "date": "Date",
+      "description": "Action/description",
+      "level": "Level",
+      "no-entry": "No entry in the domain log.",
+      "title": "Domain's logs ",
+      "user": "User"
+    },
     "menu": {
         "my-domains": "My domains",
         "my-providers": "My domain providers",

ui/src/lib/locales/fr.json

@@ -190,6 +190,14 @@
         "see": "Voir la zone à ce moment",
         "title": "Historique des changements la zone "
     },
+    "logs": {
+      "date": "Date",
+      "description": "Action/description",
+      "level": "Niveau",
+      "no-entry": "Aucune entrée dans le journal du domaine.",
+      "title": "Journal du domaine ",
+      "user": "Utilisateur"
+    },
     "menu": {
         "my-domains": "Mes domaines",
         "dns-resolver": "Résolveur DNS",

ui/src/routes/domains/[dn]/logs/+page.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
  import {
+     Badge,
      Button,
      Icon,
      Table,
@@ -14,46 +15,60 @@
 </script>
 
 <div class="flex-fill pb-4 pt-2">
-    <h2>Journal du domaine <span class="font-monospace">{data.domain.domain}</span></h2>
+    <h2>{$t("logs.title")} <span class="font-monospace">{data.domain.domain}</span></h2>
     {#await getDomainLogs(data.domain.id)}
         <div class="mt-5 text-center flex-fill">
             <Spinner label="Spinning" />
             <p>{$t('wait.loading')}</p>
         </div>
     {:then logs}
-        <Table hover stripped>
+        <Table hover striped>
             <thead>
                 <tr>
-                    <th>Utilisateur</th>
-                    <th>Action/description</th>
-                    <th>Date</th>
-                    <th>Niveau</th>
+                    <th>{$t("logs.user")}</th>
+                    <th>{$t("logs.level")}</th>
+                    <th>{$t("logs.description")}</th>
+                    <th>{$t("logs.date")}</th>
                 </tr>
             </thead>
             <tbody>
                 {#if logs}
                     {#each logs as log}
                         <tr>
-                            <td>
-                                {#await getUser(log.id_user)}
-                                    {log.id_user}
-                                {:then user}
-                                    <span title={user.Email}>
-                                        {user.Email}
-                                    </span>
-                                {/await}
+                            <td class="align-middle" style="max-width: 150px">
+                                <div class="d-flex align-items-center gap-1">
+                                    {#await getUser(log.id_user)}
+                                        <img src={"/api/users/" + encodeURIComponent(log.id_user) + "/avatar.png"} alt={log.id_user} style="height: 1.1em; border-radius: .1em">
+                                        {log.id_user}
+                                    {:then user}
+                                        <img src={"/api/users/" + encodeURIComponent(log.id_user) + "/avatar.png"} alt={user.email} style="height: 1.1em; border-radius: .1em">
+                                        <span title={user.email} class="text-truncate">
+                                            {user.email}
+                                        </span>
+                                    {/await}
+                                </div>
+                            </td>
+                            <td class="align-middle text-center">
+                                {#if log.level > 9}<Badge color="light">DEBUG</Badge>
+                                {:else if log.level > 8}<Badge color="success">INFO</Badge>
+                                {:else if log.level > 7}<Badge color="info">INFO</Badge>
+                                {:else if log.level > 3}<Badge color="warning">WARN</Badge>
+                                {:else if log.level > 1}<Badge color="danger">ERR</Badge>
+                                {:else}<Badge color="dark">CRIT</Badge>
+                                {/if}
+                            </td>
+                            <td class="align-middle">
+                                {log.content}
                             </td>
-                            <td>{log.content}</td>
                             <td>
                                 {new Intl.DateTimeFormat(undefined, {dateStyle: "short", timeStyle: "medium"}).format(new Date(log.date))}
                             </td>
-                            <td>{log.level}</td>
                         </tr>
                     {/each}
                 {:else}
                     <tr>
                         <td colspan="4" class="text-center">
-                            Aucune entrée dans le journal du domaine.
+                            {$t("logs.no-entry")}
                         </td>
                     </tr>
                 {/if}