ric/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2024-11-23 23:04:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

improve the ui of cert info

Browse source
This commit is contained in:
LouisLam 2021-07-26 22:53:07 +08:00
parent 5b18a6a518
commit bf3e9dccd2
2 changed files with 37 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/components/Datetime.vue
View file

@ -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 "";
}
},
}
}

27
src/pages/Details.vue
View file

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