feat: allow to use single web instance for all repositories (#114)

* Allow to use single web instance for any repository

* some improvements

* drop includes from user home directory, introduce new variables to docker

The old solution didn't actually work as expected, because devtools
configuration belongs to filesystem (as well as sudo one), so it was
still required to run setup command.

In order to handle additional repositories, the POSTSETUP and PRESETUP
commands variables have been introduced. FAQ has been updated as well

* raise 404 in case if repository is unknown

package/share/ahriman/templates/build-status/key-import-modal.jinja2

@@ -8,21 +8,21 @@
                 </div>
                 <div class="modal-body">
                     <div class="form-group row">
-                        <label for="key-fingerprint-input" class="col-sm-2 col-form-label">fingerprint</label>
+                        <label for="key-import-fingerprint-input" class="col-sm-2 col-form-label">fingerprint</label>
                         <div class="col-sm-10">
-                            <input id="key-fingerprint-input" type="text" class="form-control" placeholder="PGP key fingerprint" name="key" required>
+                            <input id="key-import-fingerprint-input" type="text" class="form-control" placeholder="PGP key fingerprint" name="key" required>
                         </div>
                     </div>
                     <div class="form-group row">
-                        <label for="key-server-input" class="col-sm-2 col-form-label">key server</label>
+                        <label for="key-import-server-input" class="col-sm-2 col-form-label">key server</label>
                         <div class="col-sm-10">
-                            <input id="key-server-input" type="text" class="form-control" placeholder="PGP key server" name="server" value="keyserver.ubuntu.com" required>
+                            <input id="key-import-server-input" type="text" class="form-control" placeholder="PGP key server" name="server" value="keyserver.ubuntu.com" required>
                         </div>
                     </div>
                     <div class="form-group row">
                         <div class="col-sm-2"></div>
                         <div class="col-sm-10">
-                            <pre class="language-less"><samp id="key-body-input" class="pre-scrollable language-less"></samp><button id="key-copy-btn" type="button" class="btn language-less" onclick="copyPgpKey()"><i class="bi bi-clipboard"></i> copy</button></pre>
+                            <pre class="language-less"><samp id="key-import-body-input" class="pre-scrollable language-less"></samp><button id="key-import-copy-button" type="button" class="btn language-less" onclick="copyPgpKey()"><i class="bi bi-clipboard"></i> copy</button></pre>
                         </div>
                     </div>
                 </div>
@@ -39,24 +39,24 @@
     const keyImportModal = $("#key-import-modal");
     const keyImportForm = $("#key-import-form");
     keyImportModal.on("hidden.bs.modal", () => {
-        keyBodyInput.text("");
+        keyImportBodyInput.text("");
         keyImportForm.trigger("reset");
     });
 
-    const keyBodyInput = $("#key-body-input");
-    const keyCopyButton = $("#key-copy-btn");
+    const keyImportBodyInput = $("#key-import-body-input");
+    const keyImportCopyButton = $("#key-import-copy-button");
 
-    const keyFingerprintInput = $("#key-fingerprint-input");
-    const keyServerInput = $("#key-server-input");
+    const keyImportFingerprintInput = $("#key-import-fingerprint-input");
+    const keyImportServerInput = $("#key-import-server-input");
 
     async function copyPgpKey() {
-        const logs = keyBodyInput.text();
-        await copyToClipboard(logs, keyCopyButton);
+        const logs = keyImportBodyInput.text();
+        await copyToClipboard(logs, keyImportCopyButton);
     }
 
     function fetchPgpKey() {
-        const key = keyFingerprintInput.val();
-        const server = keyServerInput.val();
+        const key = keyImportFingerprintInput.val();
+        const server = keyImportServerInput.val();
 
         if (key && server) {
             $.ajax({
@@ -64,14 +64,14 @@
                 data: {"key": key, "server": server},
                 type: "GET",
                 dataType: "json",
-                success: response => { keyBodyInput.text(response.key); },
+                success: response => { keyImportBodyInput.text(response.key); },
             });
         }
     }
 
     function importPgpKey() {
-        const key = keyFingerprintInput.val();
-        const server = keyServerInput.val();
+        const key = keyImportFingerprintInput.val();
+        const server = keyImportServerInput.val();
 
         if (key && server) {
             $.ajax({

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

@@ -8,18 +8,18 @@
                 </div>
                 <div class="modal-body">
                     <div class="form-group row">
-                        <label for="username" class="col-sm-2 col-form-label">username</label>
-                        <div class="col-sm-10">
-                            <input id="username" type="text" class="form-control" placeholder="enter username" name="username" required>
+                        <label for="login-username" class="col-sm-4 col-form-label">username</label>
+                        <div class="col-sm-8">
+                            <input id="login-username" type="text" class="form-control" placeholder="enter username" name="username" required>
                         </div>
                     </div>
                     <div class="form-group row">
-                        <label for="password" class="col-sm-2 col-form-label">password</label>
-                        <div class="col-sm-10">
+                        <label for="login-password" class="col-sm-4 col-form-label">password</label>
+                        <div class="col-sm-8">
                             <div class="input-group">
-                                <input id="password" type="password" class="form-control" placeholder="enter password" name="password" required>
+                                <input id="login-password" type="password" class="form-control" placeholder="enter password" name="password" required>
                                 <div class="input-group-append">
-                                    <button class="btn btn-outline-secondary" type="button" onclick="showPassword()"><i id="show-hide-password-btn" class="bi bi-eye"></i></button>
+                                    <button class="btn btn-outline-secondary" type="button" onclick="showPassword()"><i id="login-show-hide-password-button" class="bi bi-eye"></i></button>
                                 </div>
                             </div>
                         </div>
@@ -34,8 +34,8 @@
 </div>
 
 <script>
-    const passwordInput = $("#password");
-    const showHidePasswordButton = $("#show-hide-password-btn");
+    const passwordInput = $("#login-password");
+    const showHidePasswordButton = $("#login-show-hide-password-button");
 
     function showPassword() {
         if (passwordInput.attr("type") === "password") {

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

@@ -8,10 +8,20 @@
                 </div>
                 <div class="modal-body">
                     <div class="form-group row">
-                        <label for="package-input" class="col-sm-2 col-form-label">package</label>
-                        <div class="col-sm-10">
-                            <input id="package-input" type="text" list="known-packages-dlist" autocomplete="off" class="form-control" placeholder="AUR package" name="package" required>
-                            <datalist id="known-packages-dlist"></datalist>
+                        <label for="package-add-repository-input" class="col-sm-4 col-form-label">repository</label>
+                        <div class="col-sm-8">
+                            <select id="package-add-repository-input" class="form-control" name="repository" required>
+                                {% for repository in repositories %}
+                                    <option value="{{ repository.id }}" data-repository="{{ repository.repository }}" data-architecture="{{ repository.architecture }}">{{ repository.repository }} ({{ repository.architecture }})</option>
+                                {% endfor %}
+                            </select>
+                        </div>
+                    </div>
+                    <div class="form-group row">
+                        <label for="package-add-input" class="col-sm-4 col-form-label">package</label>
+                        <div class="col-sm-8">
+                            <input id="package-add-input" type="text" list="known-packages-dlist" autocomplete="off" class="form-control" placeholder="AUR package" name="package" required>
+                            <datalist id="package-add-known-packages-dlist"></datalist>
                         </div>
                     </div>
                 </div>
@@ -27,14 +37,19 @@
 <script>
     const packageAddModal = $("#package-add-modal");
     const packageAddForm = $("#package-add-form");
+    packageAddModal.on("shown.bs.modal", () => {
+        $(`#package-add-repository-input option[value="${repository.architecture}-${repository.repository}"]`).prop("selected", true);
+
+    });
     packageAddModal.on("hidden.bs.modal", () => { packageAddForm.trigger("reset"); });
 
-    const packageInput = $("#package-input");
-    const knownPackagesList = $("#known-packages-dlist");
-    packageInput.keyup(() => {
-        clearTimeout(packageInput.data("timeout"));
-        packageInput.data("timeout", setTimeout($.proxy(() => {
-            const value = packageInput.val();
+    const packageAddInput = $("#package-add-input");
+    const packageAddRepositoryInput = $("#package-add-repository-input");
+    const packageAddKnownPackagesList = $("#package-add-known-packages-dlist");
+    packageAddInput.keyup(() => {
+        clearTimeout(packageAddInput.data("timeout"));
+        packageAddInput.data("timeout", setTimeout($.proxy(() => {
+            const value = packageAddInput.val();
 
             if (value.length >= 3) {
                 $.ajax({
@@ -49,7 +64,7 @@
                             option.innerText = `${pkg.package} (${pkg.description})`;
                             return option;
                         });
-                        knownPackagesList.empty().append(options);
+                        packageAddKnownPackagesList.empty().append(options);
                     },
                 });
             }
@@ -57,22 +72,24 @@
     });
 
     function packagesAdd() {
-        const packages = packageInput.val();
+        const packages = packageAddInput.val();
+        const repository = getRepositorySelector(packageAddRepositoryInput);
         if (packages) {
             packageAddModal.modal("hide");
             const onSuccess = update => `Packages ${update} have been added`;
             const onFailure = error => `Package addition failed: ${error}`;
-            doPackageAction("/api/v1/service/add", [packages], onSuccess, onFailure);
+            doPackageAction("/api/v1/service/add", [packages], repository, onSuccess, onFailure);
         }
     }
 
     function packagesRequest() {
-        const packages = packageInput.val();
+        const packages = packageAddInput.val();
+        const repository = getRepositorySelector(packageAddRepositoryInput);
         if (packages) {
             packageAddModal.modal("hide");
             const onSuccess = update => `Packages ${update} have been requested`;
             const onFailure = error => `Package request failed: ${error}`;
-            doPackageAction("/api/v1/service/request", [packages], onSuccess, onFailure);
+            doPackageAction("/api/v1/service/request", [packages], repository, onSuccess, onFailure);
         }
     }
 </script>

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

@@ -6,7 +6,7 @@
                 <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="close"></button>
             </div>
             <div class="modal-body">
-                <pre class="language-logs"><samp id="package-info-logs-input" class="pre-scrollable language-logs"></samp><button id="logs-copy-btn" type="button" class="btn language-logs" onclick="copyLogs()"><i class="bi bi-clipboard"></i> copy</button></pre>
+                <pre class="language-logs"><samp id="package-info-logs-input" class="pre-scrollable language-logs"></samp><button id="package-info-logs-copy-button" type="button" class="btn language-logs" onclick="copyLogs()"><i class="bi bi-clipboard"></i> copy</button></pre>
             </div>
             <div class="modal-footer">
                 <button type="button" class="btn btn-secondary" onclick="showLogs()"><i class="bi bi-arrow-clockwise"></i> reload</button>
@@ -22,7 +22,7 @@
     const packageInfo = $("#package-info");
 
     const packageInfoLogsInput = $("#package-info-logs-input");
-    const packageInfoLogsCopyButton = $("#logs-copy-btn");
+    const packageInfoLogsCopyButton = $("#package-info-logs-copy-button");
 
     async function copyLogs() {
         const logs = packageInfoLogsInput.text();
@@ -46,6 +46,10 @@
 
         $.ajax({
             url: `/api/v2/packages/${packageBase}/logs`,
+            data: {
+                architecture: repository.architecture,
+                repository: repository.repository,
+            },
             type: "GET",
             dataType: "json",
             success: response => {

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

@@ -8,9 +8,19 @@
                 </div>
                 <div class="modal-body">
                     <div class="form-group row">
-                        <label for="dependency-input" class="col-sm-4 col-form-label">dependency</label>
+                        <label for="package-rebuild-repository-input" class="col-sm-4 col-form-label">repository</label>
                         <div class="col-sm-8">
-                            <input id="dependency-input" type="text" class="form-control" placeholder="packages dependency" name="package" required>
+                            <select id="package-rebuild-repository-input" class="form-control" name="repository" required>
+                                {% for repository in repositories %}
+                                    <option value="{{ repository.id }}" data-repository="{{ repository.repository }}" data-architecture="{{ repository.architecture }}">{{ repository.repository }} ({{ repository.architecture }})</option>
+                                {% endfor %}
+                            </select>
+                        </div>
+                    </div>
+                    <div class="form-group row">
+                        <label for="package-rebuild-dependency-input" class="col-sm-4 col-form-label">dependency</label>
+                        <div class="col-sm-8">
+                            <input id="package-rebuild-dependency-input" type="text" class="form-control" placeholder="packages dependency" name="package" required>
                         </div>
                     </div>
                 </div>
@@ -25,17 +35,23 @@
 <script>
     const packageRebuildModal = $("#package-rebuild-modal");
     const packageRebuildForm = $("#package-rebuild-form");
+    packageRebuildModal.on("shown.bs.modal", () => {
+        $(`#package-rebuild-repository-input option[value="${repository.architecture}-${repository.repository}"]`).prop("selected", true);
+
+    });
     packageRebuildModal.on("hidden.bs.modal", () => { packageRebuildForm.trigger("reset"); });
 
-    const dependencyInput = $("#dependency-input");
+    const packageRebuildDependencyInput = $("#package-rebuild-dependency-input");
+    const packageRebuildRepositoryInput = $("#package-rebuild-repository-input");
 
     function packagesRebuild() {
-        const packages = dependencyInput.val();
+        const packages = packageRebuildDependencyInput.val();
+        const repository = getRepositorySelector(packageRebuildRepositoryInput);
         if (packages) {
             packageRebuildModal.modal("hide");
             const onSuccess = update => `Repository rebuild has been run for packages which depend on ${update}`;
             const onFailure = error => `Repository rebuild failed: ${error}`;
-            doPackageAction("/api/v1/service/rebuild", [packages], onSuccess, onFailure);
+            doPackageAction("/api/v1/service/rebuild", [packages], repository, onSuccess, onFailure);
         }
     }
 </script>

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

@@ -1,9 +1,21 @@
 <script>
-    const keyImportButton = $("#key-import-btn");
-    const packageAddButton = $("#package-add-btn");
-    const packageRebuildButton = $("#package-rebuild-btn");
-    const packageRemoveButton = $("#package-remove-btn");
-    const packageUpdateButton = $("#package-update-btn");
+    const keyImportButton = $("#key-import-button");
+    const packageAddButton = $("#package-add-button");
+    const packageRebuildButton = $("#package-rebuild-button");
+    const packageRemoveButton = $("#package-remove-button");
+    const packageUpdateButton = $("#package-update-button");
+
+    let repository = null;
+    $("#repositories a").on("click", (event) => {
+        const element = event.target;
+        repository = {
+            architecture: element.dataset.architecture,
+            repository: element.dataset.repository,
+        };
+        packageUpdateButton.html(`<i class="bi bi-play"></i> update ${safe(repository.repository)} (${safe(repository.architecture)})`);
+        $(`#${element.id}`).tab("show");
+        reload();
+    });
 
     const table = $("#packages");
     table.on("check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table", () => {
@@ -35,13 +47,17 @@
         });
     });
 
-    const repositoryBadge = $("#badge-repository");
     const statusBadge = $("#badge-status");
     const versionBadge = $("#badge-version");
 
-    function doPackageAction(uri, packages, successText, failureText) {
+    function doPackageAction(uri, packages, repository, successText, failureText) {
+        const queryParams = $.param({
+            architecture: repository.architecture,
+            repository: repository.repository,
+        }); // it will never be empty btw
+
         $.ajax({
-            url: uri,
+            url: `${uri}?${queryParams}`,
             data: JSON.stringify({packages: packages}),
             type: "POST",
             contentType: "application/json",
@@ -62,16 +78,22 @@
     function removePackages() {
         const onSuccess = update => `Packages ${update} have been removed`;
         const onFailure = error => `Could not remove packages: ${error}`;
-        doPackageAction("/api/v1/service/remove", getSelection(), onSuccess, onFailure);
+        doPackageAction("/api/v1/service/remove", getSelection(), repository, onSuccess, onFailure);
+    }
+
+    function selectRepository() {
+        const fragment = window.location.hash.replace("#", "") || "{{ repositories[0].id }}";
+        const element = $(`#${fragment}-lnk`);
+        element.click();
     }
 
     function updatePackages() {
         const currentSelection = getSelection();
         const [url, onSuccess] = currentSelection.length === 0
-            ? ["/api/v1/service/update", _ => "Repository update has been run"]
+            ? ["/api/v1/service/update", _ => `Repository update has been run`]
             : ["/api/v1/service/add", update => `Run update for packages ${update}`];
         const onFailure = error => `Packages update failed: ${error}`;
-        doPackageAction(url, currentSelection, onSuccess, onFailure);
+        doPackageAction(url, currentSelection, repository, onSuccess, onFailure);
     }
 
     function hideControls(hidden) {
@@ -95,6 +117,10 @@
 
         $.ajax({
             url: "/api/v1/packages",
+            data: {
+                architecture: repository.architecture,
+                repository: repository.repository,
+            },
             type: "GET",
             dataType: "json",
             success: response => {
@@ -149,10 +175,13 @@
 
         $.ajax({
             url: "/api/v1/status",
+            data: {
+                architecture: repository.architecture,
+                repository: repository.repository,
+            },
             type: "GET",
             dataType: "json",
             success: response => {
-                repositoryBadge.text(`${response.repository} ${response.architecture}`);
                 versionBadge.html(`<i class="bi bi-github"></i> ahriman ${safe(response.version)}`);
 
                 statusBadge
@@ -189,9 +218,17 @@
         return extractDataList(table.bootstrapTable("getData"), "packager");
     }
 
+    function getRepositorySelector(selector) {
+        const selected = selector.find(":selected");
+        return {
+            architecture: selected.data("architecture"),
+            repository: selected.data("repository"),
+        };
+    }
+
     $(() => {
         table.bootstrapTable({});
         statusBadge.popover();
-        reload();
+        selectRepository();
     });
 </script>