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,
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;

View File

@ -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%;