add interface

package/share/ahriman/templates/build-status.jinja2

@@ -16,11 +16,11 @@
         <div class="container">
             <nav class="navbar navbar-expand-lg">
                 <div class="navbar-brand"><a href="https://github.com/arcan1s/ahriman" title="logo"><img src="/static/logo.svg" width="30" height="30" alt=""></a></div>
-                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#repositories-navbar-supported-content" aria-controls="repositories-navbar-supported-content" aria-expanded="false" aria-label="Toggle navigation">
+                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#repositories-navbar" aria-controls="repositories-navbar" aria-expanded="false" aria-label="Toggle navigation">
                     <span class="navbar-toggler-icon"></span>
                 </button>
 
-                <div id="repositories-navbar-supported-content" class="collapse navbar-collapse">
+                <div id="repositories-navbar" class="collapse navbar-collapse">
                     <ul id="repositories" class="nav nav-tabs">
                         {% for repository in repositories %}
                             <li class="nav-item">

package/share/ahriman/templates/build-status/package-info-modal.jinja2

@@ -59,8 +59,15 @@
                 </nav>
                 <div class="tab-content" id="nav-tabContent">
                     <div id="package-info-logs" class="tab-pane fade show active" role="tabpanel" aria-labelledby="package-info-logs-button" tabindex="0">
+                        <div class="row">
+                            <div class="col-2">
+                                <nav id="package-info-logs-versions" class="nav flex-column"></nav>
+                            </div>
+                            <div class="col-10">
                                 <pre class="language-console"><code id="package-info-logs-input" class="pre-scrollable language-console"></code><button id="package-info-logs-copy-button" type="button" class="btn language-console" onclick="copyLogs()"><i class="bi bi-clipboard"></i> copy</button></pre>
                             </div>
+                        </div>
+                    </div>
                     <div id="package-info-changes" class="tab-pane fade" role="tabpanel" aria-labelledby="package-info-changes-button" tabindex="0">
                         <pre class="language-diff"><code id="package-info-changes-input" class="pre-scrollable language-diff"></code><button id="package-info-changes-copy-button" type="button" class="btn language-diff" onclick="copyChanges()"><i class="bi bi-clipboard"></i> copy</button></pre>
                     </div>
@@ -100,6 +107,7 @@
     const packageInfoModalHeader = document.getElementById("package-info-modal-header");
     const packageInfo = document.getElementById("package-info");
 
+    const packageInfoLogsVersions = document.getElementById("package-info-logs-versions");
     const packageInfoLogsInput = document.getElementById("package-info-logs-input");
     const packageInfoLogsCopyButton = document.getElementById("package-info-logs-copy-button");
 
@@ -285,11 +293,45 @@
                 convert: response => response.json(),
             },
             data => {
-                const logs = data.map(log_record => {
+                const selectors = Object
-                    return `[${new Date(1000 * log_record.created).toISOString()}] ${log_record.message}`;
+                    .values(
-                });
+                        data.reduce((acc, log_record) => {
+                            const id = `${log_record.version}-${log_record.process_id}`;
+                            if (acc[id])
+                                acc[id].created = Math.min(log_record.created, acc[id].created);
+                            else
+                                acc[id] = log_record;
+                            return acc;
+                        }, {})
+                    )
+                    .sort(({created: left}, {created: right}) =>
+                        right - left
+                    )
+                    .map(version => {
+                        const link = document.createElement("a");
+                        link.classList.add("nav-link");
+
+                        link.textContent = version.version;
+                        link.href = "#";
+                        link.onclick = _ => {
+                            const logs = data
+                                .filter(log_record => log_record.version === version.version && log_record.process_id === version.process_id)
+                                .map(log_record => `[${new Date(1000 * log_record.created).toISOString()}] ${log_record.message}`);
+
                             packageInfoLogsInput.textContent = logs.join("\n");
                             highlight(packageInfoLogsInput);
+
+                            Array.from(packageInfoLogsVersions.children).forEach(el => el.classList.remove("active"));
+                            link.classList.add("active");
+
+                            return false;
+                        };
+
+                        return link;
+                    });
+
+                packageInfoLogsVersions.replaceChildren(...selectors);
+                selectors.find(Boolean)?.click();
             },
             onFailure,
         );

package/share/ahriman/templates/utils/style.jinja2

@@ -27,4 +27,8 @@
         top: 0;
         right: 5px;
     }
+
+    .nav-link > .active {
+        color: black;
+    }
 </style>