topaLE
/
uptime-kuma
1
0
Fork 0
Code Issues 185 Pull Requests 26 Projects Releases 28 Wiki Activity
Browse Source

Feat: Improve Certificaet Info Display

pull/519/head
Nelson Chan 4 years ago
parent
2aaed66b38
commit
13bdfefa9d
7 changed files with 216 additions and 104 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      server/prometheus.js
  2. 56
      server/util-server.js
  3. 30
      src/components/CertificateInfo.vue
  4. 106
      src/components/CertificateInfoRow.vue
  5. 4
      src/icon.js
  6. 4
      src/mixins/socket.js
  7. 118
      src/pages/Details.vue

2
server/prometheus.js
View File

@ -59,7 +59,7 @@ class Prometheus {
}
try {
monitor_cert_days_remaining.set(this.monitorLabelValues, tlsInfo.daysRemaining)
monitor_cert_days_remaining.set(this.monitorLabelValues, tlsInfo.certInfo.daysRemaining)
} catch (e) {
console.error(e)
}

56
server/util-server.js
View File

@ -185,38 +185,42 @@ const getDaysRemaining = (validFrom, validTo) => {
return daysRemaining;
};
exports.checkCertificate = function (res) {
const {
valid_from,
valid_to,
subjectaltname,
issuer,
fingerprint,
} = res.request.res.socket.getPeerCertificate(false);
if (!valid_from || !valid_to || !subjectaltname) {
throw {
message: "No TLS certificate in response",
};
// Fix certificate Info for display
// param: info - the chain obtained from getPeerCertificate()
const parseCertificateInfo = function (info) {
let link = info;
while (link) {
if (!link.valid_from || !link.valid_to) {
break;
}
link.validTo = new Date(link.valid_to);
link.validFor = link.subjectaltname?.replace(/DNS:|IP Address:/g, "").split(", ");
link.daysRemaining = getDaysRemaining(new Date(), link.validTo);
// Move up the chain until loop is encountered
if (link.issuerCertificate == null) {
break;
} else if (link.fingerprint == link.issuerCertificate.fingerprint) {
link.issuerCertificate = null;
break;
} else {
link = link.issuerCertificate;
}
}
const valid = res.request.res.socket.authorized || false;
const validTo = new Date(valid_to);
return info;
};
const validFor = subjectaltname
.replace(/DNS:|IP Address:/g, "")
.split(", ");
exports.checkCertificate = function (res) {
const info = res.request.res.socket.getPeerCertificate(true);
const valid = res.request.res.socket.authorized || false;
const daysRemaining = getDaysRemaining(new Date(), validTo);
const parsedInfo = parseCertificateInfo(info);
return {
valid,
validFor,
validTo,
daysRemaining,
issuer,
fingerprint,
valid: valid,
certInfo: parsedInfo
};
};

30
src/components/CertificateInfo.vue
View File

@ -0,0 +1,30 @@
<template>
<div>
<h4>{{ $t("Certificate Info") }}</h4>
{{ $t("Certificate Chain") }}:
<div v-if="valid" class="rounded d-inline-flex ms-2 py-1 px-3 bg-success text-white">{{ $t("Valid") }}</div>
<div v-if="!valid" class="rounded d-inline-flex ms-2 py-1 px-3 bg-danger text-white">{{ $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></style>

106
src/components/CertificateInfoRow.vue
View File

@ -0,0 +1,106 @@
<template>
<div>
<div class="d-flex flex-row align-items-center p-1 overflow-hidden">
<div class="m-3 ps-3">
<font-awesome-icon class="cert-icon" icon="file-contract" />
</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 {
font-size: 70px;
color: $link-color;
opacity: 0.5;
.dark & {
color: $dark-font-color;
opacity: 0.3;
}
}
.link-icon {
font-size: 20px;
margin-left: 50px !important;
color: $link-color;
opacity: 0.5;
.dark & {
color: $dark-font-color;
opacity: 0.3;
}
}
</style>

4
src/icon.js
View File

@ -30,6 +30,8 @@ import {
faUpload,
faCopy,
faCheck,
faFileContract,
faLink,
} from "@fortawesome/free-solid-svg-icons";
library.add(
@ -59,6 +61,8 @@ library.add(
faUpload,
faCopy,
faCheck,
faFileContract,
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>

Write Preview
Loading…
Cancel
Save