Added http type check and tags based design

server/model/monitor.js

@@ -42,6 +42,7 @@ class Monitor extends BeanModel {
             id: this.id,
             name: this.name,
             sendUrl: this.sendUrl,
+            type: this.type,
         };
 
         if (this.sendUrl) {
@@ -52,7 +53,7 @@ class Monitor extends BeanModel {
             obj.tags = await this.getTags();
         }
 
-        if (certExpiry) {
+        if (certExpiry && this.type === "http") {
             const { certExpiryDaysRemaining, validCert } = await this.getCertExpiry(this.id);
             obj.certExpiryDaysRemaining = certExpiryDaysRemaining;
             obj.validCert = validCert;

src/components/PublicGroupList.vue

@@ -60,12 +60,16 @@
                                                     @click="$refs.monitorSettingDialog.show(group, monitor)"
                                                 />
                                             </span>
-                                            <span v-if="showCertificateExpiry" class="badge rounded-pill" :class=" 'bg-' + certExpiryColor(monitor)"> {{ $t("Expiry") }}: {{ formattedCertExpiryMessage(monitor) }} </span>
                                         </div>
-                                        <div v-if="showTags" class="tags">
+                                        <div class="extra-info">
+                                            <div v-if="showCertificateExpiry && monitor.element.type === 'http'">
+                                                <Tag :item="{name: $t('Cert Exp.'), value: formattedCertExpiryMessage(monitor), color: certExpiryColor(monitor)}" :size="'sm'" />
+                                            </div>
+                                            <div v-if="showTags">
                                                 <Tag v-for="tag in monitor.element.tags" :key="tag" :item="tag" :size="'sm'" />
                                             </div>
                                         </div>
+                                    </div>
                                     <div :key="$root.userHeartbeatBar" class="col-3 col-md-4">
                                         <HeartbeatBar size="small" :monitor-id="monitor.element.id" />
                                     </div>
@@ -182,9 +186,9 @@ export default {
          */
         certExpiryColor(monitor) {
             if (monitor?.element?.validCert && monitor.element.certExpiryDaysRemaining > 7) {
-                return "primary";
+                return "#059669";
             }
-            return "danger";
+            return "#DC2626";
         },
     }
 };
@@ -193,6 +197,15 @@ export default {
 <style lang="scss" scoped>
 @import "../assets/vars";
 
+.extra-info {
+    display: flex;
+    margin-bottom: 0.5rem;
+}
+
+.extra-info > div > div:first-child {
+    margin-left: 0 !important;
+}
+
 .no-monitor-msg {
     position: absolute;
     width: 100%;