commit 81e737006c19db52200a65fe9c078455bfdc8558
Author: Jan Pašek <janpasek97@gmail.com>
Date:   Fri Apr 16 15:04:50 2021 +0200

    Re #8583 - Improved certificate listing

diff --git a/static/index.html b/static/index.html
index e270647..704cbf1 100644
--- a/static/index.html
+++ b/static/index.html
@@ -22,8 +22,7 @@
                     <th class="align-middle" scope="col" colspan="2">Validity</th>
                     <th class="align-middle" scope="col" rowspan="2">Usage</th>
                     <th class="align-middle" scope="col" rowspan="2">Certificate</th>
-                    <th class="align-middle" scope="col" rowspan="2">Trust chain</th>
-                    <th class="align-middle" scope="col" rowspan="2">Chain root</th>
+                    <th class="align-middle" scope="col" rowspan="2">Issuer</th>
                 </tr>
                 <tr>
                     <th scope="col">Start</th>
diff --git a/static/js/components.js b/static/js/components.js
index a64c427..5f78b38 100644
--- a/static/js/components.js
+++ b/static/js/components.js
@@ -4,7 +4,7 @@ Vue.component("certificate-item",{
     // certificate = certificate to be displayed by the list item
     props: ["certificate"],
     template: "<tr>"+
-                "<td class='align-middle'>{{ certificate.CN }}</td>"+
+                "<td class='align-middle'><a :href='certificateURL' class='font-weight-bold'>{{ certificate.CN }}</a></td>"+
                 "<td class='align-middle'>{{ certificate.notBefore }}</td>"+
                 "<td class='align-middle'>{{ certificate.notAfter }}</td>"+
                 "<td class='align-middle'>" +
@@ -14,9 +14,17 @@ Vue.component("certificate-item",{
                 "   <div v-if='certificate.usage.SSL'>SSL/TLS</div>" +
                 "</td>"+
                 "<td class='align-middle'><button v-on:click='onCertificateDownload()'>Download certificate</button></td>"+
-                "<td class='align-middle'><button v-on:click='onCertificateChainDownload()'>Download chain of trust</button></td>"+
-                "<td class='align-middle'><button v-on:click='onCertificateRootDownload()'>Download chain root</button></td>"+
+                "<td v-if='certificate.issuer.id !== certificate.id' class='align-middle'><a :href='issuerURL' class='font-weight-bold'>{{ certificate.issuer.CN }}</a></td>"+
+                "<td v-if='certificate.issuer.id === certificate.id'  class='align-middle'><a :href='issuerURL' class='font-weight-light'>self-signed</a></td>"+
             "</tr>",
+    computed: {
+        certificateURL: function () {
+            return "/static/certificate.html?id=" + this.certificate.id;
+        },
+        issuerURL: function () {
+            return "/static/certificate.html?id=" + this.certificate.issuer.id;
+        }
+    },
     methods: {
         // Get the certificate PEM data from the server and downloads it to users computer
         onCertificateDownload: function () {
diff --git a/static/js/index.js b/static/js/index.js
index cea9091..4d484e0 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -12,6 +12,16 @@
             if (params !== "") {
                 const urlParams = new URLSearchParams(params);
                 if (urlParams.get("success") != null) this.successMessage = urlParams.get("success");
+
+                const nextURL = '/static/index.html';
+                const nextTitle = 'X.509 Certificate Management';
+                const nextState = { additionalInformation: 'Updated the URL with JS' };
+
+                // This will create a new entry in the browser's history, without reloading
+                window.history.pushState(nextState, nextTitle, nextURL);
+
+                // This will replace the current entry in the browser's history, without reloading
+                window.history.replaceState(nextState, nextTitle, nextURL);
             }
         }
     });
@@ -21,8 +31,6 @@
         .then(function (response) {
             if (response.data["success"])
                 response.data["data"].forEach(item => certificateListingApp.certificates.push(item))
-            else
-                console.log("Error occured while loading certificate list") // TODO more action may be required
         })
         .catch(function (error) {
             console.log(error);
