Added expiry changes to status page and fixes

src/components/PublicGroupList.vue

@@ -60,7 +60,7 @@
                                                     @click="$refs.monitorSettingDialog.show(group, monitor)"
                                                 />
                                             </span>
-                                            <p v-if="showCertificateExpiry" class="item-name"> Expiry: {{ formatExpiry(monitor) }} </p>
+                                            <span class="badge rounded-pill" :class=" 'bg-' + certExpiryColor(monitor)"> {{ $t("Expiry") }}: {{ formattedCertExpiryMessage(monitor) }} </span>
                                         </div>
                                         <div v-if="showTags" class="tags">
                                             <Tag v-for="tag in monitor.element.tags" :key="tag" :item="tag" :size="'sm'" />
@@ -165,13 +165,27 @@ export default {
          * @param {Object} monitor Monitor to show expiry for
          * @returns {string}
          */
-        formatExpiry(monitor) {
-            if (monitor?.element?.validCert) {
-                return monitor.element.certExpiryDaysRemaining + " days";
+        formattedCertExpiryMessage(monitor) {
+            if (monitor?.element?.validCert && monitor?.element?.certExpiryDaysRemaining) {
+                return monitor.element.certExpiryDaysRemaining + " " + this.$tc("day", monitor.element.certExpiryDaysRemaining);
+            } else if (monitor?.element?.validCert === false) {
+                return this.$t("noOrBadCertificate");
             } else {
-                return monitor.element.certExpiryDaysRemaining;
+                return "";
             }
         },
+
+        /**
+         * Returns certificate expiry based on days remaining
+         * @param {Object} monitor Monitor to show expiry for
+         * @returns {string}
+         */
+        certExpiryColor(monitor) {
+            if (monitor?.element?.validCert) {
+                return monitor.element.certExpiryDaysRemaining > 7 ? "primary" : "danger";
+            }
+            return "danger";
+        },
     }
 };
 </script>

src/lang/en.json

@@ -755,5 +755,7 @@
     "Group": "Group",
     "Monitor Group": "Monitor Group",
     "noGroupMonitorMsg": "Not Available. Create a Group Monitor First.",
-    "Close": "Close"
+    "Close": "Close",
+    "showCertificateExpiry": "Show Certificate Expiry",
+    "noOrBadCertificate": "No/Bad Certificate"
 }

src/lang/hi.json

@@ -39,5 +39,6 @@
     "Reconnecting...": "पुनः कनेक्ट किया जा रहा है...",
     "Down": "बंद",
     "Passive Monitor Type": "निष्क्रिय मॉनिटर प्रकार",
-    "Status": "स्थिति"
+    "Status": "स्थिति",
+    "showCertificateExpiry": "प्रमाणपत्र समाप्ति दिखाएँ"
 }

src/pages/StatusPage.vue

@@ -57,7 +57,7 @@
                 <!-- Show certificate expiry -->
                 <div class="my-3 form-check form-switch">
                     <input id="show-certificate-expiry" v-model="config.showCertificateExpiry" class="form-check-input" type="checkbox">
-                    <label class="form-check-label" for="show-certificate-expiry">{{ $t("Show Certificate Expiry") }}</label>
+                    <label class="form-check-label" for="show-certificate-expiry">{{ $t("showCertificateExpiry") }}</label>
                 </div>
 
                 <div v-if="false" class="my-3">