7x31/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2025-11-04 13:46:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

Feat: Improve Certificaet Info Display

Browse Source
This commit is contained in:
Nelson Chan
2021-10-01 18:44:32 +08:00
parent 2aaed66b38
commit 13bdfefa9d
7 changed files with 215 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

118
src/pages/Details.vue
View File

@@ -73,11 +73,11 @@
<span class="num"><Uptime :monitor="monitor" type="720" /></span>
</div>
<div v-if="certInfo" class="col">
<div v-if="tlsInfo" class="col">
<h4>{{ $t("Cert Exp.") }}</h4>
<p>(<Datetime :value="certInfo.validTo" date-only />)</p>
<p>(<Datetime :value="tlsInfo.certInfo.validTo" date-only />)</p>
<span class="num">
<a href="#" @click.prevent="toggleCertInfoBox = !toggleCertInfoBox">{{ certInfo.daysRemaining }} {{ $t("days") }}</a>
<a href="#" @click.prevent="toggleCertInfoBox = !toggleCertInfoBox">{{ tlsInfo.certInfo.daysRemaining }} {{ $t("days") }}</a>
</span>
</div>
</div>
@@ -87,41 +87,7 @@
<div v-if="showCertInfoBox" class="shadow-box big-padding text-center">
<div class="row">
<div class="col">
<h4>{{ $t("Certificate Info") }}</h4>
<table class="text-start">
<tbody>
<tr class="my-3">
<td class="px-3">
Valid:
</td>
<td>{{ certInfo.valid }}</td>
</tr>
<tr class="my-3">
<td class="px-3">
Valid To:
</td>
<td><Datetime :value="certInfo.validTo" /></td>
</tr>
<tr class="my-3">
<td class="px-3">
Days Remaining:
</td>
<td>{{ certInfo.daysRemaining }}</td>
</tr>
<tr class="my-3">
<td class="px-3">
Issuer:
</td>
<td>{{ certInfo.issuer }}</td>
</tr>
<tr class="my-3">
<td class="px-3">
Fingerprint:
</td>
<td>{{ certInfo.fingerprint }}</td>
</tr>
</tbody>
</table>
<certificate-info :certInfo="tlsInfo.certInfo" :valid="tlsInfo.valid" />
</div>
</div>
</div>
@@ -207,8 +173,8 @@
<script>
import { defineAsyncComponent } from "vue";
import { useToast } from "vue-toastification"
const toast = useToast()
import { useToast } from "vue-toastification";
const toast = useToast();
import Confirm from "../components/Confirm.vue";
import HeartbeatBar from "../components/HeartbeatBar.vue";
import Status from "../components/Status.vue";
@@ -218,6 +184,7 @@ import Uptime from "../components/Uptime.vue";
import Pagination from "v-pagination-3";
const PingChart = defineAsyncComponent(() => import("../components/PingChart.vue"));
import Tag from "../components/Tag.vue";
import CertificateInfo from "../components/CertificateInfo.vue";
export default {
components: {
@@ -230,6 +197,7 @@ export default {
Pagination,
PingChart,
Tag,
CertificateInfo,
},
data() {
return {
@@ -239,32 +207,32 @@ export default {
toggleCertInfoBox: false,
showPingChartBox: true,
paginationConfig: {
texts:{
count:`${this.$t("Showing {from} to {to} of {count} records")}|{count} ${this.$t("records")}|${this.$t("One record")}`,
first:this.$t("First"),
last:this.$t("Last"),
nextPage:'>',
nextChunk:'>>',
prevPage:'<',
prevChunk:'<<'
texts: {
count: `${this.$t("Showing {from} to {to} of {count} records")}|{count} ${this.$t("records")}|${this.$t("One record")}`,
first: this.$t("First"),
last: this.$t("Last"),
nextPage: ">",
nextChunk: ">>",
prevPage: "<",
prevChunk: "<<"
}
}
}
};
},
computed: {
monitor() {
let id = this.$route.params.id
let id = this.$route.params.id;
return this.$root.monitorList[id];
},
lastHeartBeat() {
if (this.monitor.id in this.$root.lastHeartbeatList && this.$root.lastHeartbeatList[this.monitor.id]) {
return this.$root.lastHeartbeatList[this.monitor.id]
return this.$root.lastHeartbeatList[this.monitor.id];
}
return {
status: -1,
}
};
},
ping() {
@@ -272,7 +240,7 @@ export default {
return this.lastHeartBeat.ping;
}
return this.$t("notAvailableShort")
return this.$t("notAvailableShort");
},
avgPing() {
@@ -280,14 +248,14 @@ export default {
return this.$root.avgPingList[this.monitor.id];
}
return this.$t("notAvailableShort")
return this.$t("notAvailableShort");
},
importantHeartBeatList() {
if (this.$root.importantHeartbeatList[this.monitor.id]) {
// eslint-disable-next-line vue/no-side-effects-in-computed-properties
this.heartBeatList = this.$root.importantHeartbeatList[this.monitor.id];
return this.$root.importantHeartbeatList[this.monitor.id]
return this.$root.importantHeartbeatList[this.monitor.id];
}
return [];
@@ -295,22 +263,22 @@ export default {
status() {
if (this.$root.statusList[this.monitor.id]) {
return this.$root.statusList[this.monitor.id]
return this.$root.statusList[this.monitor.id];
}
return { }
return { };
},
certInfo() {
if (this.$root.certInfoList[this.monitor.id]) {
return this.$root.certInfoList[this.monitor.id]
tlsInfo() {
if (this.$root.tlsInfoList[this.monitor.id]) {
return this.$root.tlsInfoList[this.monitor.id];
}
return null
return null;
},
showCertInfoBox() {
return this.certInfo != null && this.toggleCertInfoBox;
return this.tlsInfo != null && this.toggleCertInfoBox;
},
displayedRecords() {
@@ -324,8 +292,8 @@ export default {
},
methods: {
testNotification() {
this.$root.getSocket().emit("testNotification", this.monitor.id)
toast.success("Test notification is requested.")
this.$root.getSocket().emit("testNotification", this.monitor.id);
toast.success("Test notification is requested.");
},
pauseDialog() {
@@ -334,14 +302,14 @@ export default {
resumeMonitor() {
this.$root.getSocket().emit("resumeMonitor", this.monitor.id, (res) => {
this.$root.toastRes(res)
})
this.$root.toastRes(res);
});
},
pauseMonitor() {
this.$root.getSocket().emit("pauseMonitor", this.monitor.id, (res) => {
this.$root.toastRes(res)
})
this.$root.toastRes(res);
});
},
deleteDialog() {
@@ -360,11 +328,11 @@ export default {
this.$root.deleteMonitor(this.monitor.id, (res) => {
if (res.ok) {
toast.success(res.msg);
this.$router.push("/dashboard")
this.$router.push("/dashboard");
} else {
toast.error(res.msg);
}
})
});
},
clearEvents() {
@@ -372,7 +340,7 @@ export default {
if (! res.ok) {
toast.error(res.msg);
}
})
});
},
clearHeartbeats() {
@@ -380,13 +348,13 @@ export default {
if (! res.ok) {
toast.error(res.msg);
}
})
});
},
pingTitle(average = false) {
let translationPrefix = ""
let translationPrefix = "";
if (average) {
translationPrefix = "Avg. "
translationPrefix = "Avg. ";
}
if (this.monitor.type === "http") {
@@ -396,7 +364,7 @@ export default {
return this.$t(translationPrefix + "Ping");
},
},
}
};
</script>
<style lang="scss" scoped>