Added http type check and tags based design

This commit is contained in:
Tarun Singh 2023-07-17 02:01:10 -04:00
parent 2e75142fe5
commit f6c1b92fc6
2 changed files with 20 additions and 6 deletions

View File

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

View File

@ -60,10 +60,14 @@
@click="$refs.monitorSettingDialog.show(group, monitor)" @click="$refs.monitorSettingDialog.show(group, monitor)"
/> />
</span> </span>
<span v-if="showCertificateExpiry" class="badge rounded-pill" :class=" 'bg-' + certExpiryColor(monitor)"> {{ $t("Expiry") }}: {{ formattedCertExpiryMessage(monitor) }} </span>
</div> </div>
<div v-if="showTags" class="tags"> <div class="extra-info">
<Tag v-for="tag in monitor.element.tags" :key="tag" :item="tag" :size="'sm'" /> <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> </div>
<div :key="$root.userHeartbeatBar" class="col-3 col-md-4"> <div :key="$root.userHeartbeatBar" class="col-3 col-md-4">
@ -182,9 +186,9 @@ export default {
*/ */
certExpiryColor(monitor) { certExpiryColor(monitor) {
if (monitor?.element?.validCert && monitor.element.certExpiryDaysRemaining > 7) { 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> <style lang="scss" scoped>
@import "../assets/vars"; @import "../assets/vars";
.extra-info {
display: flex;
margin-bottom: 0.5rem;
}
.extra-info > div > div:first-child {
margin-left: 0 !important;
}
.no-monitor-msg { .no-monitor-msg {
position: absolute; position: absolute;
width: 100%; width: 100%;