Merge e441b6d76b into 30f82b9cb4

server/routers/status-page-router.js

@@ -70,10 +70,12 @@ router.get("/api/status-page/heartbeat/:slug", cache("1 minutes"), async (reques
     try {
         let heartbeatList = {};
         let uptimeList = {};
+        let certificateExpiryList = {};
 
         let slug = request.params.slug;
         slug = slug.toLowerCase();
         let statusPageID = await StatusPage.slugToID(slug);
+        let showCertificateExpiry = !!(await R.getCell("SELECT show_certificate_expiry FROM status_page WHERE id = ? ", [ statusPageID ]));
 
         let monitorIDList = await R.getCol(`
             SELECT monitor_group.monitor_id FROM monitor_group, \`group\`
@@ -99,11 +101,34 @@ router.get("/api/status-page/heartbeat/:slug", cache("1 minutes"), async (reques
 
             const uptimeCalculator = await UptimeCalculator.getUptimeCalculator(monitorID);
             uptimeList[`${monitorID}_24`] = uptimeCalculator.get24Hour().uptime;
+
+            // Get Certificate Status (Copied from monitor.js getCertExpiry())
+            if (showCertificateExpiry) {
+                let tlsInfoBean = await R.findOne("monitor_tls_info", "monitor_id = ?", [
+                    monitorID,
+                ]);
+                let tlsInfo;
+                if (tlsInfoBean) {
+                    tlsInfo = JSON.parse(tlsInfoBean?.info_json);
+                    if (tlsInfo?.valid && tlsInfo?.certInfo?.daysRemaining) {
+                        certificateExpiryList[monitorID] = {
+                            certExpiryDaysRemaining: tlsInfo.certInfo.daysRemaining,
+                            validCert: true
+                        };
+                    } else {
+                        certificateExpiryList[monitorID] = {
+                            certExpiryDaysRemaining: "",
+                            validCert: false
+                        };
+                    }
+                }
+            }
         }
 
         response.json({
             heartbeatList,
-            uptimeList
+            uptimeList,
+            certificateExpiryList
         });
 
     } catch (error) {

src/components/PublicGroupList.vue

@@ -63,8 +63,19 @@
                                             </span>
                                         </div>
                                         <div class="extra-info">
-                                            <div v-if="showCertificateExpiry && monitor.element.certExpiryDaysRemaining">
+                                            <div
-                                                <Tag :item="{name: $t('Cert Exp.'), value: formattedCertExpiryMessage(monitor), color: certExpiryColor(monitor)}" :size="'sm'" />
+                                                v-if="showCertificateExpiry &&
+                                                    $root.certificateExpiryList &&
+                                                    $root.certificateExpiryList[monitor.element.id].certExpiryDaysRemaining"
+                                            >
+                                                <Tag
+                                                    :item="{
+                                                        name: $t('Cert Exp.'),
+                                                        value: formattedCertExpiryMessage($root.certificateExpiryList[monitor.element.id]),
+                                                        color: certExpiryColor($root.certificateExpiryList[monitor.element.id])
+                                                    }"
+                                                    :size="'sm'"
+                                                />
                                             </div>
                                             <div v-if="showTags">
                                                 <Tag v-for="tag in monitor.element.tags" :key="tag" :item="tag" :size="'sm'" data-testid="monitor-tag" />
@@ -169,13 +180,13 @@ export default {
 
         /**
          * Returns formatted certificate expiry or Bad cert message
-         * @param {object} monitor Monitor to show expiry for
+         * @param {object} info Certificate information to show
          * @returns {string} Certificate expiry message
          */
-        formattedCertExpiryMessage(monitor) {
+        formattedCertExpiryMessage(info) {
-            if (monitor?.element?.validCert && monitor?.element?.certExpiryDaysRemaining) {
+            if (info.validCert && info.certExpiryDaysRemaining) {
-                return monitor.element.certExpiryDaysRemaining + " " + this.$tc("day", monitor.element.certExpiryDaysRemaining);
+                return info.certExpiryDaysRemaining + " " + this.$tc("day", info.certExpiryDaysRemaining);
-            } else if (monitor?.element?.validCert === false) {
+            } else if (info.validCert === false) {
                 return this.$t("noOrBadCertificate");
             } else {
                 return this.$t("Unknown") + " " + this.$tc("day", 2);
@@ -184,11 +195,11 @@ export default {
 
         /**
          * Returns certificate expiry color based on days remaining
-         * @param {object} monitor Monitor to show expiry for
+         * @param {object} info Certificate information to show
          * @returns {string} Color for certificate expiry
          */
-        certExpiryColor(monitor) {
+        certExpiryColor(info) {
-            if (monitor?.element?.validCert && monitor.element.certExpiryDaysRemaining > 7) {
+            if (info.validCert && info.certExpiryDaysRemaining > 7) {
                 return "#059669";
             }
             return "#DC2626";

src/pages/StatusPage.vue

@@ -765,17 +765,18 @@ export default {
         },
 
         /**
-         * Update the heartbeat list and update favicon if necessary
+         * Update the heartbeat list along with the favicon and certificate expiry if necessary
          * @returns {void}
          */
         updateHeartbeatList() {
             // If editMode, it will use the data from websocket.
             if (! this.editMode) {
                 axios.get("/api/status-page/heartbeat/" + this.slug).then((res) => {
-                    const { heartbeatList, uptimeList } = res.data;
+                    const { heartbeatList, uptimeList, certificateExpiryList } = res.data;
 
                     this.$root.heartbeatList = heartbeatList;
                     this.$root.uptimeList = uptimeList;
+                    this.$root.certificateExpiryList = certificateExpiryList;
 
                     const heartbeatIds = Object.keys(heartbeatList);
                     const downMonitors = heartbeatIds.reduce((downMonitorsAmount, currentId) => {