From 13bdfefa9d36b299b1852b475f85793f007dfaef Mon Sep 17 00:00:00 2001
From: Nelson Chan <chakflying@hotmail.com>
Date: Fri, 1 Oct 2021 18:44:32 +0800
Subject: [PATCH 1/3] Feat: Improve Certificaet Info Display

---
 server/prometheus.js                  |   2 +-
 server/util-server.js                 |  54 ++++++------
 src/components/CertificateInfo.vue    |  30 +++++++
 src/components/CertificateInfoRow.vue | 106 +++++++++++++++++++++++
 src/icon.js                           |   4 +
 src/mixins/socket.js                  |   4 +-
 src/pages/Details.vue                 | 118 ++++++++++----------------
 7 files changed, 215 insertions(+), 103 deletions(-)
 create mode 100644 src/components/CertificateInfo.vue
 create mode 100644 src/components/CertificateInfoRow.vue

diff --git a/server/prometheus.js b/server/prometheus.js
index 3e4767b3..c27f87f0 100644
--- a/server/prometheus.js
+++ b/server/prometheus.js
@@ -59,7 +59,7 @@ class Prometheus {
             }
 
             try {
-                monitor_cert_days_remaining.set(this.monitorLabelValues, tlsInfo.daysRemaining)
+                monitor_cert_days_remaining.set(this.monitorLabelValues, tlsInfo.certInfo.daysRemaining)
             } catch (e) {
                 console.error(e)
             }
diff --git a/server/util-server.js b/server/util-server.js
index 29e4b11f..66c50d8c 100644
--- a/server/util-server.js
+++ b/server/util-server.js
@@ -185,38 +185,42 @@ const getDaysRemaining = (validFrom, validTo) => {
     return daysRemaining;
 };
 
-exports.checkCertificate = function (res) {
-    const {
-        valid_from,
-        valid_to,
-        subjectaltname,
-        issuer,
-        fingerprint,
-    } = res.request.res.socket.getPeerCertificate(false);
+// Fix certificate Info for display
+// param: info -  the chain obtained from getPeerCertificate()
+const parseCertificateInfo = function (info) {
+    let link = info;
 
-    if (!valid_from || !valid_to || !subjectaltname) {
-        throw {
-            message: "No TLS certificate in response",
-        };
+    while (link) {
+        if (!link.valid_from || !link.valid_to) {
+            break;
+        }
+        link.validTo = new Date(link.valid_to);
+        link.validFor = link.subjectaltname?.replace(/DNS:|IP Address:/g, "").split(", ");
+        link.daysRemaining = getDaysRemaining(new Date(), link.validTo);
+
+        // Move up the chain until loop is encountered
+        if (link.issuerCertificate == null) {
+            break;
+        } else if (link.fingerprint == link.issuerCertificate.fingerprint) {
+            link.issuerCertificate = null;
+            break;
+        } else {
+            link = link.issuerCertificate;
+        }
     }
 
+    return info;
+};
+
+exports.checkCertificate = function (res) {
+    const info = res.request.res.socket.getPeerCertificate(true);
     const valid = res.request.res.socket.authorized || false;
 
-    const validTo = new Date(valid_to);
-
-    const validFor = subjectaltname
-        .replace(/DNS:|IP Address:/g, "")
-        .split(", ");
-
-    const daysRemaining = getDaysRemaining(new Date(), validTo);
+    const parsedInfo = parseCertificateInfo(info);
 
     return {
-        valid,
-        validFor,
-        validTo,
-        daysRemaining,
-        issuer,
-        fingerprint,
+        valid: valid,
+        certInfo: parsedInfo
     };
 };
 
diff --git a/src/components/CertificateInfo.vue b/src/components/CertificateInfo.vue
new file mode 100644
index 00000000..0b23c952
--- /dev/null
+++ b/src/components/CertificateInfo.vue
@@ -0,0 +1,30 @@
+<template>
+    <div>
+        <h4>{{ $t("Certificate Info") }}</h4>
+        {{ $t("Certificate Chain") }}:
+        <div v-if="valid" class="rounded d-inline-flex ms-2 py-1 px-3 bg-success text-white">{{ $t("Valid") }}</div>
+        <div v-if="!valid" class="rounded d-inline-flex ms-2 py-1 px-3 bg-danger text-white">{{ $t("Invalid") }}</div>
+        <certificate-info-row :cert="certInfo" />
+    </div>
+</template>
+
+<script>
+import CertificateInfoRow from "./CertificateInfoRow.vue";
+export default {
+    components: {
+        CertificateInfoRow,
+    },
+    props: {
+        certInfo: {
+            type: Object,
+            required: true,
+        },
+        valid: {
+            type: Boolean,
+            required: true,
+        },
+    },
+};
+</script>
+
+<style></style>
diff --git a/src/components/CertificateInfoRow.vue b/src/components/CertificateInfoRow.vue
new file mode 100644
index 00000000..2b37d6e1
--- /dev/null
+++ b/src/components/CertificateInfoRow.vue
@@ -0,0 +1,106 @@
+<template>
+    <div>
+        <div class="d-flex flex-row align-items-center p-1 overflow-hidden">
+            <div class="m-3 ps-3">
+                <font-awesome-icon class="cert-icon" icon="file-contract" />
+            </div>
+            <div class="m-3">
+                <table class="text-start">
+                    <tbody>
+                        <tr class="my-3">
+                            <td class="px-3">Subject:</td>
+                            <td>{{ formatSubject(cert.subject) }}</td>
+                        </tr>
+                        <tr class="my-3">
+                            <td class="px-3">Valid To:</td>
+                            <td><Datetime :value="cert.validTo" /></td>
+                        </tr>
+                        <tr class="my-3">
+                            <td class="px-3">Days Remaining:</td>
+                            <td>{{ cert.daysRemaining }}</td>
+                        </tr>
+                        <tr class="my-3">
+                            <td class="px-3">Issuer:</td>
+                            <td>{{ formatSubject(cert.issuer) }}</td>
+                        </tr>
+                        <tr class="my-3">
+                            <td class="px-3">Fingerprint:</td>
+                            <td>{{ cert.fingerprint }}</td>
+                        </tr>
+                    </tbody>
+                </table>
+            </div>
+        </div>
+        <div class="d-flex">
+            <font-awesome-icon
+                v-if="cert.issuerCertificate"
+                class="m-2 ps-6 link-icon"
+                icon="link"
+            />
+        </div>
+        <certificate-info-row
+            v-if="cert.issuerCertificate"
+            :cert="cert.issuerCertificate"
+        />
+    </div>
+</template>
+
+<script>
+import Datetime from "../components/Datetime.vue";
+export default {
+    name: "CertificateInfoRow",
+    components: {
+        Datetime,
+    },
+    props: {
+        cert: {
+            type: Object,
+            required: true,
+        },
+    },
+    methods: {
+        formatSubject(subject) {
+            if (subject.O && subject.CN && subject.C) {
+                return `${subject.CN} - ${subject.O} (${subject.C})`;
+            } else if (subject.O && subject.CN) {
+                return `${subject.CN} - ${subject.O}`;
+            } else if (subject.CN) {
+                return subject.CN;
+            } else {
+                return "no info";
+            }
+        },
+    },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../assets/vars.scss";
+
+table {
+    overflow: hidden;
+}
+
+.cert-icon {
+    font-size: 70px;
+    color: $link-color;
+    opacity: 0.5;
+
+    .dark & {
+        color: $dark-font-color;
+        opacity: 0.3;
+    }
+}
+
+.link-icon {
+    font-size: 20px;
+    margin-left: 50px !important;
+    color: $link-color;
+    opacity: 0.5;
+
+    .dark & {
+        color: $dark-font-color;
+        opacity: 0.3;
+    }
+}
+</style>
diff --git a/src/icon.js b/src/icon.js
index 6fb91498..5ac3511e 100644
--- a/src/icon.js
+++ b/src/icon.js
@@ -30,6 +30,8 @@ import {
     faUpload,
     faCopy,
     faCheck,
+    faFileContract,
+    faLink,
 } from "@fortawesome/free-solid-svg-icons";
 
 library.add(
@@ -59,6 +61,8 @@ library.add(
     faUpload,
     faCopy,
     faCheck,
+    faFileContract,
+    faLink,
 );
 
 export { FontAwesomeIcon };
diff --git a/src/mixins/socket.js b/src/mixins/socket.js
index a14771c3..8a12ae4b 100644
--- a/src/mixins/socket.js
+++ b/src/mixins/socket.js
@@ -30,7 +30,7 @@ export default {
             importantHeartbeatList: { },
             avgPingList: { },
             uptimeList: { },
-            certInfoList: {},
+            tlsInfoList: {},
             notificationList: [],
             connectionErrorMsg: "Cannot connect to the socket server. Reconnecting...",
         };
@@ -154,7 +154,7 @@ export default {
             });
 
             socket.on("certInfo", (monitorID, data) => {
-                this.certInfoList[monitorID] = JSON.parse(data);
+                this.tlsInfoList[monitorID] = JSON.parse(data);
             });
 
             socket.on("importantHeartbeatList", (monitorID, data, overwrite) => {
diff --git a/src/pages/Details.vue b/src/pages/Details.vue
index e4aeb28d..ee0c4948 100644
--- a/src/pages/Details.vue
+++ b/src/pages/Details.vue
@@ -73,11 +73,11 @@
                         <span class="num"><Uptime :monitor="monitor" type="720" /></span>
                     </div>
 
-                    <div v-if="certInfo" class="col">
+                    <div v-if="tlsInfo" class="col">
                         <h4>{{ $t("Cert Exp.") }}</h4>
-                        <p>(<Datetime :value="certInfo.validTo" date-only />)</p>
+                        <p>(<Datetime :value="tlsInfo.certInfo.validTo" date-only />)</p>
                         <span class="num">
-                            <a href="#" @click.prevent="toggleCertInfoBox = !toggleCertInfoBox">{{ certInfo.daysRemaining }} {{ $t("days") }}</a>
+                            <a href="#" @click.prevent="toggleCertInfoBox = !toggleCertInfoBox">{{ tlsInfo.certInfo.daysRemaining }} {{ $t("days") }}</a>
                         </span>
                     </div>
                 </div>
@@ -87,41 +87,7 @@
                 <div v-if="showCertInfoBox" class="shadow-box big-padding text-center">
                     <div class="row">
                         <div class="col">
-                            <h4>{{ $t("Certificate Info") }}</h4>
-                            <table class="text-start">
-                                <tbody>
-                                    <tr class="my-3">
-                                        <td class="px-3">
-                                            Valid:
-                                        </td>
-                                        <td>{{ certInfo.valid }}</td>
-                                    </tr>
-                                    <tr class="my-3">
-                                        <td class="px-3">
-                                            Valid To:
-                                        </td>
-                                        <td><Datetime :value="certInfo.validTo" /></td>
-                                    </tr>
-                                    <tr class="my-3">
-                                        <td class="px-3">
-                                            Days Remaining:
-                                        </td>
-                                        <td>{{ certInfo.daysRemaining }}</td>
-                                    </tr>
-                                    <tr class="my-3">
-                                        <td class="px-3">
-                                            Issuer:
-                                        </td>
-                                        <td>{{ certInfo.issuer }}</td>
-                                    </tr>
-                                    <tr class="my-3">
-                                        <td class="px-3">
-                                            Fingerprint:
-                                        </td>
-                                        <td>{{ certInfo.fingerprint }}</td>
-                                    </tr>
-                                </tbody>
-                            </table>
+                            <certificate-info :certInfo="tlsInfo.certInfo" :valid="tlsInfo.valid" />
                         </div>
                     </div>
                 </div>
@@ -207,8 +173,8 @@
 
 <script>
 import { defineAsyncComponent } from "vue";
-import { useToast } from "vue-toastification"
-const toast = useToast()
+import { useToast } from "vue-toastification";
+const toast = useToast();
 import Confirm from "../components/Confirm.vue";
 import HeartbeatBar from "../components/HeartbeatBar.vue";
 import Status from "../components/Status.vue";
@@ -218,6 +184,7 @@ import Uptime from "../components/Uptime.vue";
 import Pagination from "v-pagination-3";
 const PingChart = defineAsyncComponent(() => import("../components/PingChart.vue"));
 import Tag from "../components/Tag.vue";
+import CertificateInfo from "../components/CertificateInfo.vue";
 
 export default {
     components: {
@@ -230,6 +197,7 @@ export default {
         Pagination,
         PingChart,
         Tag,
+        CertificateInfo,
     },
     data() {
         return {
@@ -239,32 +207,32 @@ export default {
             toggleCertInfoBox: false,
             showPingChartBox: true,
             paginationConfig: {
-                texts:{
-                    count:`${this.$t("Showing {from} to {to} of {count} records")}|{count} ${this.$t("records")}|${this.$t("One record")}`,
-                    first:this.$t("First"),
-                    last:this.$t("Last"),
-                    nextPage:'>',
-                    nextChunk:'>>',
-                    prevPage:'<',
-                    prevChunk:'<<'
+                texts: {
+                    count: `${this.$t("Showing {from} to {to} of {count} records")}|{count} ${this.$t("records")}|${this.$t("One record")}`,
+                    first: this.$t("First"),
+                    last: this.$t("Last"),
+                    nextPage: ">",
+                    nextChunk: ">>",
+                    prevPage: "<",
+                    prevChunk: "<<"
                 }
             }
-        }
+        };
     },
     computed: {
         monitor() {
-            let id = this.$route.params.id
+            let id = this.$route.params.id;
             return this.$root.monitorList[id];
         },
 
         lastHeartBeat() {
             if (this.monitor.id in this.$root.lastHeartbeatList && this.$root.lastHeartbeatList[this.monitor.id]) {
-                return this.$root.lastHeartbeatList[this.monitor.id]
+                return this.$root.lastHeartbeatList[this.monitor.id];
             }
 
             return {
                 status: -1,
-            }
+            };
         },
 
         ping() {
@@ -272,7 +240,7 @@ export default {
                 return this.lastHeartBeat.ping;
             }
 
-            return this.$t("notAvailableShort")
+            return this.$t("notAvailableShort");
         },
 
         avgPing() {
@@ -280,14 +248,14 @@ export default {
                 return this.$root.avgPingList[this.monitor.id];
             }
 
-            return this.$t("notAvailableShort")
+            return this.$t("notAvailableShort");
         },
 
         importantHeartBeatList() {
             if (this.$root.importantHeartbeatList[this.monitor.id]) {
                 // eslint-disable-next-line vue/no-side-effects-in-computed-properties
                 this.heartBeatList = this.$root.importantHeartbeatList[this.monitor.id];
-                return this.$root.importantHeartbeatList[this.monitor.id]
+                return this.$root.importantHeartbeatList[this.monitor.id];
             }
 
             return [];
@@ -295,22 +263,22 @@ export default {
 
         status() {
             if (this.$root.statusList[this.monitor.id]) {
-                return this.$root.statusList[this.monitor.id]
+                return this.$root.statusList[this.monitor.id];
             }
 
-            return { }
+            return { };
         },
 
-        certInfo() {
-            if (this.$root.certInfoList[this.monitor.id]) {
-                return this.$root.certInfoList[this.monitor.id]
+        tlsInfo() {
+            if (this.$root.tlsInfoList[this.monitor.id]) {
+                return this.$root.tlsInfoList[this.monitor.id];
             }
 
-            return null
+            return null;
         },
 
         showCertInfoBox() {
-            return this.certInfo != null && this.toggleCertInfoBox;
+            return this.tlsInfo != null && this.toggleCertInfoBox;
         },
 
         displayedRecords() {
@@ -324,8 +292,8 @@ export default {
     },
     methods: {
         testNotification() {
-            this.$root.getSocket().emit("testNotification", this.monitor.id)
-            toast.success("Test notification is requested.")
+            this.$root.getSocket().emit("testNotification", this.monitor.id);
+            toast.success("Test notification is requested.");
         },
 
         pauseDialog() {
@@ -334,14 +302,14 @@ export default {
 
         resumeMonitor() {
             this.$root.getSocket().emit("resumeMonitor", this.monitor.id, (res) => {
-                this.$root.toastRes(res)
-            })
+                this.$root.toastRes(res);
+            });
         },
 
         pauseMonitor() {
             this.$root.getSocket().emit("pauseMonitor", this.monitor.id, (res) => {
-                this.$root.toastRes(res)
-            })
+                this.$root.toastRes(res);
+            });
         },
 
         deleteDialog() {
@@ -360,11 +328,11 @@ export default {
             this.$root.deleteMonitor(this.monitor.id, (res) => {
                 if (res.ok) {
                     toast.success(res.msg);
-                    this.$router.push("/dashboard")
+                    this.$router.push("/dashboard");
                 } else {
                     toast.error(res.msg);
                 }
-            })
+            });
         },
 
         clearEvents() {
@@ -372,7 +340,7 @@ export default {
                 if (! res.ok) {
                     toast.error(res.msg);
                 }
-            })
+            });
         },
 
         clearHeartbeats() {
@@ -380,13 +348,13 @@ export default {
                 if (! res.ok) {
                     toast.error(res.msg);
                 }
-            })
+            });
         },
 
         pingTitle(average = false) {
-            let translationPrefix = ""
+            let translationPrefix = "";
             if (average) {
-                translationPrefix = "Avg. "
+                translationPrefix = "Avg. ";
             }
 
             if (this.monitor.type === "http") {
@@ -396,7 +364,7 @@ export default {
             return this.$t(translationPrefix + "Ping");
         },
     },
-}
+};
 </script>
 
 <style lang="scss" scoped>

From b7568e9caa14400d6972b892278eb4398a629b81 Mon Sep 17 00:00:00 2001
From: Nelson Chan <chakflying@hotmail.com>
Date: Fri, 1 Oct 2021 22:29:22 +0800
Subject: [PATCH 2/3] Fix: Update Certificate Icon

---
 src/components/CertificateInfoRow.vue | 18 +++++++++++++++++-
 src/icon.js                           |  6 ++++--
 2 files changed, 21 insertions(+), 3 deletions(-)

diff --git a/src/components/CertificateInfoRow.vue b/src/components/CertificateInfoRow.vue
index 2b37d6e1..df726eb7 100644
--- a/src/components/CertificateInfoRow.vue
+++ b/src/components/CertificateInfoRow.vue
@@ -2,7 +2,10 @@
     <div>
         <div class="d-flex flex-row align-items-center p-1 overflow-hidden">
             <div class="m-3 ps-3">
-                <font-awesome-icon class="cert-icon" icon="file-contract" />
+                <div class="cert-icon">
+                    <font-awesome-icon icon="file" />
+                    <font-awesome-icon class="award-icon" icon="award" />
+                </div>
             </div>
             <div class="m-3">
                 <table class="text-start">
@@ -82,6 +85,7 @@ table {
 }
 
 .cert-icon {
+    position: relative;
     font-size: 70px;
     color: $link-color;
     opacity: 0.5;
@@ -92,6 +96,18 @@ table {
     }
 }
 
+.award-icon {
+    position: absolute;
+    font-size: 0.5em;
+    bottom: 20%;
+    left: 12%;
+    color: white;
+
+    .dark & {
+        color: $dark-bg;
+    }
+}
+
 .link-icon {
     font-size: 20px;
     margin-left: 50px !important;
diff --git a/src/icon.js b/src/icon.js
index 5ac3511e..e78992f2 100644
--- a/src/icon.js
+++ b/src/icon.js
@@ -30,7 +30,8 @@ import {
     faUpload,
     faCopy,
     faCheck,
-    faFileContract,
+    faFile,
+    faAward,
     faLink,
 } from "@fortawesome/free-solid-svg-icons";
 
@@ -61,7 +62,8 @@ library.add(
     faUpload,
     faCopy,
     faCheck,
-    faFileContract,
+    faFile,
+    faAward,
     faLink,
 );
 

From 668fd58af37318c2cdbbe0f324821280ea3efcc6 Mon Sep 17 00:00:00 2001
From: Nelson Chan <chakflying@hotmail.com>
Date: Fri, 1 Oct 2021 22:43:09 +0800
Subject: [PATCH 3/3] Fix: Slightly improve validity styling

---
 src/components/CertificateInfo.vue | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/src/components/CertificateInfo.vue b/src/components/CertificateInfo.vue
index 0b23c952..bb10f158 100644
--- a/src/components/CertificateInfo.vue
+++ b/src/components/CertificateInfo.vue
@@ -2,8 +2,18 @@
     <div>
         <h4>{{ $t("Certificate Info") }}</h4>
         {{ $t("Certificate Chain") }}:
-        <div v-if="valid" class="rounded d-inline-flex ms-2 py-1 px-3 bg-success text-white">{{ $t("Valid") }}</div>
-        <div v-if="!valid" class="rounded d-inline-flex ms-2 py-1 px-3 bg-danger text-white">{{ $t("Invalid") }}</div>
+        <div
+            v-if="valid"
+            class="rounded d-inline-flex ms-2 text-white tag-valid"
+        >
+            {{ $t("Valid") }}
+        </div>
+        <div
+            v-if="!valid"
+            class="rounded d-inline-flex ms-2 text-white tag-invalid"
+        >
+            {{ $t("Invalid") }}
+        </div>
         <certificate-info-row :cert="certInfo" />
     </div>
 </template>
@@ -27,4 +37,16 @@ export default {
 };
 </script>
 
-<style></style>
+<style lang="scss" scoped>
+@import "../assets/vars.scss";
+
+.tag-valid {
+    padding: 2px 25px;
+    background-color: $primary;
+}
+
+.tag-invalid {
+    padding: 2px 25px;
+    background-color: $danger;
+}
+</style>