7x31/uptime-kuma
1
0
Fork 0
mirror of https://github.com/louislam/uptime-kuma.git synced 2025-08-21 22:47:58 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #519 from chakflying/improve-certInfo

Browse Source 
Feat: Improve Certificate Info Display
This commit is contained in:
Louis Lam
2021-10-05 16:09:08 +08:00
committed by GitHub
parent 911690bea8 668fd58af3
commit 865b721b79
7 changed files with 255 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

52
src/components/CertificateInfo.vue Normal file
View File

@@ -0,0 +1,52 @@
<template>
<div>
<h4>{{ $t("Certificate Info") }}</h4>
{{ $t("Certificate Chain") }}:
<div
v-if="valid"
class="rounded d-inline-flex ms-2 text-white tag-valid"
>
{{ $t("Valid") }}
</div>
<div
v-if="!valid"
class="rounded d-inline-flex ms-2 text-white tag-invalid"
>
{{ $t("Invalid") }}
</div>
<certificate-info-row :cert="certInfo" />
</div>
</template>
<script>
import CertificateInfoRow from "./CertificateInfoRow.vue";
export default {
components: {
CertificateInfoRow,
},
props: {
certInfo: {
type: Object,
required: true,
},
valid: {
type: Boolean,
required: true,
},
},
};
</script>
<style lang="scss" scoped>
@import "../assets/vars.scss";
.tag-valid {
padding: 2px 25px;
background-color: $primary;
}
.tag-invalid {
padding: 2px 25px;
background-color: $danger;
}
</style>

122
src/components/CertificateInfoRow.vue Normal file
View File

@@ -0,0 +1,122 @@
<template>
<div>
<div class="d-flex flex-row align-items-center p-1 overflow-hidden">
<div class="m-3 ps-3">
<div class="cert-icon">
<font-awesome-icon icon="file" />
<font-awesome-icon class="award-icon" icon="award" />
</div>
</div>
<div class="m-3">
<table class="text-start">
<tbody>
<tr class="my-3">
<td class="px-3">Subject:</td>
<td>{{ formatSubject(cert.subject) }}</td>
</tr>
<tr class="my-3">
<td class="px-3">Valid To:</td>
<td><Datetime :value="cert.validTo" /></td>
</tr>
<tr class="my-3">
<td class="px-3">Days Remaining:</td>
<td>{{ cert.daysRemaining }}</td>
</tr>
<tr class="my-3">
<td class="px-3">Issuer:</td>
<td>{{ formatSubject(cert.issuer) }}</td>
</tr>
<tr class="my-3">
<td class="px-3">Fingerprint:</td>
<td>{{ cert.fingerprint }}</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="d-flex">
<font-awesome-icon
v-if="cert.issuerCertificate"
class="m-2 ps-6 link-icon"
icon="link"
/>
</div>
<certificate-info-row
v-if="cert.issuerCertificate"
:cert="cert.issuerCertificate"
/>
</div>
</template>
<script>
import Datetime from "../components/Datetime.vue";
export default {
name: "CertificateInfoRow",
components: {
Datetime,
},
props: {
cert: {
type: Object,
required: true,
},
},
methods: {
formatSubject(subject) {
if (subject.O && subject.CN && subject.C) {
return `${subject.CN} - ${subject.O} (${subject.C})`;
} else if (subject.O && subject.CN) {
return `${subject.CN} - ${subject.O}`;
} else if (subject.CN) {
return subject.CN;
} else {
return "no info";
}
},
},
};
</script>
<style lang="scss" scoped>
@import "../assets/vars.scss";
table {
overflow: hidden;
}
.cert-icon {
position: relative;
font-size: 70px;
color: $link-color;
opacity: 0.5;
.dark & {
color: $dark-font-color;
opacity: 0.3;
}
}
.award-icon {
position: absolute;
font-size: 0.5em;
bottom: 20%;
left: 12%;
color: white;
.dark & {
color: $dark-bg;
}
}
.link-icon {
font-size: 20px;
margin-left: 50px !important;
color: $link-color;
opacity: 0.5;
.dark & {
color: $dark-font-color;
opacity: 0.3;
}
}
</style>

6
src/icon.js
View File

@@ -30,6 +30,9 @@ import {
faUpload,
faCopy,
faCheck,
faFile,
faAward,
faLink,
} from "@fortawesome/free-solid-svg-icons";
library.add(
@@ -59,6 +62,9 @@ library.add(
faUpload,
faCopy,
faCheck,
faFile,
faAward,
faLink,
);
export { FontAwesomeIcon };

4
src/mixins/socket.js
View File

@@ -30,7 +30,7 @@ export default {
importantHeartbeatList: { },
avgPingList: { },
uptimeList: { },
certInfoList: {},
tlsInfoList: {},
notificationList: [],
connectionErrorMsg: "Cannot connect to the socket server. Reconnecting...",
};
@@ -154,7 +154,7 @@ export default {
});
socket.on("certInfo", (monitorID, data) => {
this.certInfoList[monitorID] = JSON.parse(data);
this.tlsInfoList[monitorID] = JSON.parse(data);
});
socket.on("importantHeartbeatList", (monitorID, data, overwrite) => {

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>