You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
uptime-kuma/src/mixins/socket.js

754 lines
23 KiB

3 years ago
import { io } from "socket.io-client";
import { useToast } from "vue-toastification";
import jwtDecode from "jwt-decode";
import Favico from "favico.js";
import dayjs from "dayjs";
const toast = useToast();
3 years ago
let socket;
const noSocketIOPages = [
/^\/status-page$/, // /status-page
/^\/status/, // /status**
/^\/$/ // /
];
const favicon = new Favico({
animation: "none"
});
3 years ago
export default {
data() {
return {
info: { },
3 years ago
socket: {
token: null,
firstConnect: true,
connected: false,
3 years ago
connectCount: 0,
initedSocketIO: false,
3 years ago
},
username: null,
remember: (localStorage.remember !== "0"),
3 years ago
allowLoginDialog: false, // Allowed to show login dialog, but "loggedIn" have to be true too. This exists because prevent the login dialog show 0.1s in first before the socket server auth-ed.
loggedIn: false,
3 years ago
monitorList: { },
maintenanceList: { },
3 years ago
heartbeatList: { },
importantHeartbeatList: { },
avgPingList: { },
uptimeList: { },
tlsInfoList: {},
notificationList: [],
dockerHostList: [],
statusPageListLoaded: false,
statusPageList: [],
proxyList: [],
connectionErrorMsg: "Cannot connect to the socket server. Reconnecting...",
showReverseProxyGuide: true,
cloudflared: {
cloudflareTunnelToken: "",
installed: null,
running: false,
message: "",
errorMessage: "",
currentPassword: "",
}
};
3 years ago
},
created() {
this.initSocketIO();
},
methods: {
/**
* Initialize connection to socket server
* @param {boolean} [bypass = false] Should the check for if we
* are on a status page be bypassed?
* @returns {(void|null)}
*/
initSocketIO(bypass = false) {
// No need to re-init
if (this.socket.initedSocketIO) {
return;
}
// No need to connect to the socket.io for status page
if (! bypass && location.pathname) {
for (let page of noSocketIOPages) {
if (location.pathname.match(page)) {
return;
}
}
}
this.socket.initedSocketIO = true;
3 years ago
let protocol = (location.protocol === "https:") ? "wss://" : "ws://";
let wsHost;
const env = process.env.NODE_ENV || "production";
if (env === "development" || localStorage.dev === "dev") {
wsHost = protocol + location.hostname + ":3001";
} else {
wsHost = protocol + location.host;
3 years ago
}
socket = io(wsHost, {
transports: [ "websocket" ],
});
socket.on("info", (info) => {
this.info = info;
});
socket.on("setup", (monitorID, data) => {
this.$router.push("/setup");
});
socket.on("autoLogin", (monitorID, data) => {
this.loggedIn = true;
this.storage().token = "autoLogin";
this.socket.token = "autoLogin";
this.allowLoginDialog = false;
});
socket.on("monitorList", (data) => {
// Add Helper function
Object.entries(data).forEach(([ monitorID, monitor ]) => {
monitor.getUrl = () => {
try {
return new URL(monitor.url);
} catch (_) {
return null;
}
};
});
this.monitorList = data;
});
socket.on("maintenanceList", (data) => {
this.maintenanceList = data;
});
socket.on("notificationList", (data) => {
this.notificationList = data;
});
socket.on("statusPageList", (data) => {
this.statusPageListLoaded = true;
this.statusPageList = data;
});
socket.on("proxyList", (data) => {
this.proxyList = data.map(item => {
item.auth = !!item.auth;
item.active = !!item.active;
item.default = !!item.default;
return item;
});
});
socket.on("dockerHostList", (data) => {
this.dockerHostList = data;
});
socket.on("heartbeat", (data) => {
if (! (data.monitorID in this.heartbeatList)) {
this.heartbeatList[data.monitorID] = [];
}
this.heartbeatList[data.monitorID].push(data);
if (this.heartbeatList[data.monitorID].length >= 150) {
this.heartbeatList[data.monitorID].shift();
}
// Add to important list if it is important
// Also toast
if (data.important) {
if (data.status === 0) {
toast.error(`[${this.monitorList[data.monitorID].name}] [DOWN] ${data.msg}`, {
timeout: false,
});
} else if (data.status === 1) {
toast.success(`[${this.monitorList[data.monitorID].name}] [Up] ${data.msg}`, {
timeout: 20000,
});
} else {
toast(`[${this.monitorList[data.monitorID].name}] ${data.msg}`);
}
3 years ago
if (! (data.monitorID in this.importantHeartbeatList)) {
this.importantHeartbeatList[data.monitorID] = [];
}
3 years ago
this.importantHeartbeatList[data.monitorID].unshift(data);
}
});
socket.on("heartbeatList", (monitorID, data, overwrite = false) => {
if (! (monitorID in this.heartbeatList) || overwrite) {
this.heartbeatList[monitorID] = data;
} else {
this.heartbeatList[monitorID] = data.concat(this.heartbeatList[monitorID]);
}
});
3 years ago
socket.on("avgPing", (monitorID, data) => {
this.avgPingList[monitorID] = data;
});
socket.on("uptime", (monitorID, type, data) => {
this.uptimeList[`${monitorID}_${type}`] = data;
});
3 years ago
socket.on("certInfo", (monitorID, data) => {
this.tlsInfoList[monitorID] = JSON.parse(data);
});
socket.on("importantHeartbeatList", (monitorID, data, overwrite) => {
if (! (monitorID in this.importantHeartbeatList) || overwrite) {
this.importantHeartbeatList[monitorID] = data;
} else {
this.importantHeartbeatList[monitorID] = data.concat(this.importantHeartbeatList[monitorID]);
}
});
socket.on("connect_error", (err) => {
console.error(`Failed to connect to the backend. Socket.io connect_error: ${err.message}`);
this.connectionErrorMsg = `Cannot connect to the socket server. [${err}] Reconnecting...`;
this.showReverseProxyGuide = true;
this.socket.connected = false;
this.socket.firstConnect = false;
});
socket.on("disconnect", () => {
console.log("disconnect");
this.connectionErrorMsg = "Lost connection to the socket server. Reconnecting...";
this.socket.connected = false;
});
socket.on("connect", () => {
3 years ago
console.log("Connected to the socket server");
this.socket.connectCount++;
this.socket.connected = true;
this.showReverseProxyGuide = false;
// Reset Heartbeat list if it is re-connect
if (this.socket.connectCount >= 2) {
this.clearData();
}
3 years ago
let token = this.storage().token;
3 years ago
if (token) {
if (token !== "autoLogin") {
this.loginByToken(token);
} else {
// Timeout if it is not actually auto login
setTimeout(() => {
if (! this.loggedIn) {
this.allowLoginDialog = true;
this.$root.storage().removeItem("token");
}
}, 5000);
}
} else {
this.allowLoginDialog = true;
}
this.socket.firstConnect = false;
});
// cloudflared
socket.on("cloudflared_installed", (res) => this.cloudflared.installed = res);
socket.on("cloudflared_running", (res) => this.cloudflared.running = res);
socket.on("cloudflared_message", (res) => this.cloudflared.message = res);
socket.on("cloudflared_errorMessage", (res) => this.cloudflared.errorMessage = res);
socket.on("cloudflared_token", (res) => this.cloudflared.cloudflareTunnelToken = res);
socket.on("initServerTimezone", () => {
socket.emit("initServerTimezone", dayjs.tz.guess());
});
},
3 years ago
/**
* The storage currently in use
* @returns {Storage}
*/
storage() {
return (this.remember) ? localStorage : sessionStorage;
},
/**
* Get payload of JWT cookie
* @returns {(Object|undefined)}
*/
getJWTPayload() {
const jwtToken = this.$root.storage().token;
if (jwtToken && jwtToken !== "autoLogin") {
return jwtDecode(jwtToken);
}
return undefined;
},
/**
* Get current socket
* @returns {Socket}
*/
3 years ago
getSocket() {
3 years ago
return socket;
3 years ago
},
3 years ago
/**
* Show success or error toast dependant on response status code
* @param {Object} res Response object
*/
3 years ago
toastRes(res) {
if (res.ok) {
toast.success(res.msg);
} else {
toast.error(res.msg);
}
},
3 years ago
/**
* Show a success toast
* @param {string} msg Message to show
*/
toastSuccess(msg) {
toast.success(msg);
},
/**
* Show an error toast
* @param {string} msg Message to show
*/
toastError(msg) {
toast.error(msg);
},
/**
* Callback for login
* @callback loginCB
* @param {Object} res Response object
*/
/**
* Send request to log user in
* @param {string} username Username to log in with
* @param {string} password Password to log in with
* @param {string} token User token
* @param {loginCB} callback Callback to call with result
*/
login(username, password, token, callback) {
3 years ago
socket.emit("login", {
username,
password,
token,
3 years ago
}, (res) => {
if (res.tokenRequired) {
callback(res);
}
3 years ago
if (res.ok) {
this.storage().token = res.token;
3 years ago
this.socket.token = res.token;
this.loggedIn = true;
this.username = this.getJWTPayload()?.username;
3 years ago
// Trigger Chrome Save Password
history.pushState({}, "");
3 years ago
}
callback(res);
});
3 years ago
},
3 years ago
/**
* Log in using a token
* @param {string} token Token to log in with
*/
3 years ago
loginByToken(token) {
socket.emit("loginByToken", token, (res) => {
this.allowLoginDialog = true;
if (! res.ok) {
this.logout();
3 years ago
} else {
this.loggedIn = true;
this.username = this.getJWTPayload()?.username;
3 years ago
}
});
3 years ago
},
3 years ago
/** Log out of the web application */
3 years ago
logout() {
3 years ago
socket.emit("logout", () => { });
this.storage().removeItem("token");
3 years ago
this.socket.token = null;
this.loggedIn = false;
this.username = null;
this.clearData();
3 years ago
},
3 years ago
/**
* Callback for general socket requests
* @callback socketCB
* @param {Object} res Result of operation
*/
/** Prepare 2FA configuration */
prepare2FA(callback) {
socket.emit("prepare2FA", callback);
},
/**
* Save the current 2FA configuration
* @param {any} secret Unused
* @param {socketCB} callback
*/
save2FA(secret, callback) {
socket.emit("save2FA", callback);
},
/**
* Disable 2FA for this user
* @param {socketCB} callback
*/
disable2FA(callback) {
socket.emit("disable2FA", callback);
},
/**
* Verify the provided 2FA token
* @param {string} token Token to verify
* @param {socketCB} callback
*/
verifyToken(token, callback) {
socket.emit("verifyToken", token, callback);
},
/**
* Get current 2FA status
* @param {socketCB} callback
*/
twoFAStatus(callback) {
socket.emit("twoFAStatus", callback);
},
/**
* Get list of monitors
* @param {socketCB} callback
*/
getMonitorList(callback) {
if (! callback) {
callback = () => { };
}
socket.emit("getMonitorList", callback);
},
/**
* Get list of maintenances
* @param {socketCB} callback
*/
getMaintenanceList(callback) {
if (! callback) {
callback = () => { };
}
socket.emit("getMaintenanceList", callback);
},
/**
* Add a monitor
* @param {Object} monitor Object representing monitor to add
* @param {socketCB} callback
*/
3 years ago
add(monitor, callback) {
socket.emit("add", monitor, callback);
3 years ago
},
3 years ago
/**
* Adds a maintenace
* @param {Object} maintenance
* @param {socketCB} callback
*/
addMaintenance(maintenance, callback) {
socket.emit("addMaintenance", maintenance, callback);
},
/**
* Add monitors to maintenance
* @param {number} maintenanceID
* @param {number[]} monitors
* @param {socketCB} callback
*/
addMonitorMaintenance(maintenanceID, monitors, callback) {
socket.emit("addMonitorMaintenance", maintenanceID, monitors, callback);
},
/**
* Add status page to maintenance
* @param {number} maintenanceID
* @param {number} statusPages
* @param {socketCB} callback
*/
addMaintenanceStatusPage(maintenanceID, statusPages, callback) {
socket.emit("addMaintenanceStatusPage", maintenanceID, statusPages, callback);
},
/**
* Get monitors affected by maintenance
* @param {number} maintenanceID
* @param {socketCB} callback
*/
getMonitorMaintenance(maintenanceID, callback) {
socket.emit("getMonitorMaintenance", maintenanceID, callback);
},
/**
* Get status pages where maintenance is shown
* @param {number} maintenanceID
* @param {socketCB} callback
*/
getMaintenanceStatusPage(maintenanceID, callback) {
socket.emit("getMaintenanceStatusPage", maintenanceID, callback);
},
/**
* Delete monitor by ID
* @param {number} monitorID ID of monitor to delete
* @param {socketCB} callback
*/
3 years ago
deleteMonitor(monitorID, callback) {
socket.emit("deleteMonitor", monitorID, callback);
3 years ago
},
/**
* Delete specified maintenance
* @param {number} maintenanceID
* @param {socketCB} callback
*/
deleteMaintenance(maintenanceID, callback) {
socket.emit("deleteMaintenance", maintenanceID, callback);
},
/** Clear the hearbeat list */
clearData() {
console.log("reset heartbeat list");
this.heartbeatList = {};
this.importantHeartbeatList = {};
},
/**
* Upload the provided backup
* @param {string} uploadedJSON JSON to upload
* @param {string} importHandle Type of import. If set to
* most data in database will be replaced
* @param {socketCB} callback
*/
uploadBackup(uploadedJSON, importHandle, callback) {
socket.emit("uploadBackup", uploadedJSON, importHandle, callback);
},
/**
* Clear events for a specified monitor
* @param {number} monitorID ID of monitor to clear
* @param {socketCB} callback
*/
clearEvents(monitorID, callback) {
socket.emit("clearEvents", monitorID, callback);
},
/**
* Clear the heartbeats of a specified monitor
* @param {number} monitorID Id of monitor to clear
* @param {socketCB} callback
*/
clearHeartbeats(monitorID, callback) {
socket.emit("clearHeartbeats", monitorID, callback);
},
/**
* Clear all statistics
* @param {socketCB} callback
*/
clearStatistics(callback) {
socket.emit("clearStatistics", callback);
},
/**
* Get monitor beats for a specific monitor in a time range
* @param {number} monitorID ID of monitor to fetch
* @param {number} period Time in hours from now
* @param {socketCB} callback
*/
getMonitorBeats(monitorID, period, callback) {
socket.emit("getMonitorBeats", monitorID, period, callback);
}
3 years ago
},
computed: {
usernameFirstChar() {
if (typeof this.username == "string" && this.username.length >= 1) {
return this.username.charAt(0).toUpperCase();
} else {
return "🐻";
}
},
3 years ago
lastHeartbeatList() {
let result = {};
3 years ago
for (let monitorID in this.heartbeatList) {
let index = this.heartbeatList[monitorID].length - 1;
result[monitorID] = this.heartbeatList[monitorID][index];
}
return result;
},
statusList() {
let result = {};
3 years ago
3 years ago
let unknown = {
3 years ago
text: this.$t("Unknown"),
3 years ago
color: "secondary",
};
3 years ago
for (let monitorID in this.lastHeartbeatList) {
let lastHeartBeat = this.lastHeartbeatList[monitorID];
3 years ago
if (this.monitorList[monitorID] && this.monitorList[monitorID].maintenance) {
result[monitorID] = {
text: this.$t("statusMaintenance"),
color: "maintenance",
};
} else if (! lastHeartBeat) {
3 years ago
result[monitorID] = unknown;
} else if (lastHeartBeat.status === 1) {
result[monitorID] = {
3 years ago
text: this.$t("Up"),
3 years ago
color: "primary",
3 years ago
};
} else if (lastHeartBeat.status === 0) {
result[monitorID] = {
3 years ago
text: this.$t("Down"),
3 years ago
color: "danger",
3 years ago
};
} else if (lastHeartBeat.status === 2) {
result[monitorID] = {
3 years ago
text: this.$t("Pending"),
3 years ago
color: "warning",
};
3 years ago
} else {
result[monitorID] = unknown;
}
}
return result;
3 years ago
},
stats() {
let result = {
up: 0,
down: 0,
maintenance: 0,
unknown: 0,
pause: 0,
};
for (let monitorID in this.$root.monitorList) {
let beat = this.$root.lastHeartbeatList[monitorID];
let monitor = this.$root.monitorList[monitorID];
if (monitor && monitor.maintenance) {
result.maintenance++;
} else if (monitor && ! monitor.active) {
result.pause++;
} else if (beat) {
if (beat.status === 1) {
result.up++;
} else if (beat.status === 0) {
result.down++;
} else if (beat.status === 2) {
result.up++;
} else {
result.unknown++;
}
} else {
result.unknown++;
}
}
return result;
},
/**
* Frontend Version
* It should be compiled to a static value while building the frontend.
* Please see ./config/vite.config.js, it is defined via vite.js
* @returns {string}
*/
frontendVersion() {
// eslint-disable-next-line no-undef
return FRONTEND_VERSION;
},
/**
* Are both frontend and backend in the same version?
* @returns {boolean}
*/
isFrontendBackendVersionMatched() {
if (!this.info.version) {
return true;
}
return this.info.version === this.frontendVersion;
}
},
watch: {
// Update Badge
"stats.down"(to, from) {
if (to !== from) {
favicon.badge(to);
}
},
// Reload the SPA if the server version is changed.
"info.version"(to, from) {
3 years ago
if (from && from !== to) {
window.location.reload();
3 years ago
}
},
remember() {
localStorage.remember = (this.remember) ? "1" : "0";
3 years ago
},
// Reconnect the socket io, if status-page to dashboard
"$route.fullPath"(newValue, oldValue) {
if (newValue) {
for (let page of noSocketIOPages) {
if (newValue.match(page)) {
return;
}
}
}
this.initSocketIO();
},
3 years ago
},
3 years ago
};