improve the ui of cert info

src/components/Datetime.vue

@@ -14,12 +14,23 @@ dayjs.extend(relativeTime)
 export default {
     props: {
         value: String,
+        dateOnly: {
+            type: Boolean,
+            default: false,
+        },
     },
 
     computed: {
         displayText() {
-            let format = "YYYY-MM-DD HH:mm:ss";
-            return dayjs.utc(this.value).tz(this.$root.timezone).format(format)
+            if (this.value !== undefined && this.value !== "") {
+                let format = "YYYY-MM-DD HH:mm:ss";
+                if (this.dateOnly) {
+                    format = "YYYY-MM-DD";
+                }
+                return dayjs.utc(this.value).tz(this.$root.timezone).format(format);
+            } else {
+                return "";
+            }
         },
     }
 }

src/pages/Details.vue

@@ -51,10 +51,18 @@
                 <p>(30-day)</p>
                 <span class="num"><Uptime :monitor="monitor" type="720" /></span>
             </div>
+
+            <div class="col" v-if="certInfo">
+                <h4>CertExp.</h4>
+                <p>(<Datetime :value="certInfo.validTo" date-only />)</p>
+                <span class="num" >
+                    <a href="#"  @click.prevent="toggleCertInfoBox = !toggleCertInfoBox">{{certInfo.daysRemaining}} days</a>
+                </span>
+            </div>
         </div>
     </div>
 
-    <div class="shadow-box big-padding text-center stats" v-if="monitor.type === 'http' && monitor.getUrl()?.protocol === 'https:' && certInfo != null">
+    <div class="shadow-box big-padding text-center" v-if="showCertInfoBox">
         <div class="row">
             <div class="col">
                 <h4>Certificate Info</h4>
@@ -66,7 +74,7 @@
                         </tr>
                         <tr class="my-3">
                             <td class="px-3">Valid To: </td>
-                            <td>{{ certInfo.validTo ? new Date(certInfo.validTo).toLocaleString() : "" }}</td>
+                            <td><Datetime :value="certInfo.validTo" /></td>
                         </tr>
                         <tr class="my-3">
                             <td class="px-3">Days Remaining: </td>
@@ -154,6 +162,7 @@ export default {
             page: 1,
             perPage: 25,
             heartBeatList: [],
+            toggleCertInfoBox: false,
         }
     },
     computed: {
@@ -216,10 +225,14 @@ export default {
             if (this.$root.certInfoList[this.monitor.id]) {
                 return this.$root.certInfoList[this.monitor.id]
             } else {
-                return { }
+                return null
             }
         },
 
+        showCertInfoBox() {
+            return this.certInfo != null && this.toggleCertInfoBox;
+        },
+
         displayedRecords() {
             const startIndex = this.perPage * (this.page - 1);
             const endIndex = startIndex + this.perPage;
@@ -308,4 +321,12 @@ table {
     font-size: 13px;
     color: #AAA;
 }
+
+.stats {
+    padding: 10px;
+
+    .col {
+        margin: 20px 0;
+    }
+}
 </style>