Add Tailscale Widget (#1468)
* Added tailscale widget * finished tailscale widget * Consolidated date comparison to it's own function * Modified to follow Airbnb's style guide * Removed refresh and added translations * fix some tailscale translation strings --------- Co-authored-by: shamoon <4887959+shamoon@users.noreply.github.com>pull/1471/head
parent
142be300e0
commit
acc19ccca1
@ -0,0 +1,72 @@
|
||||
import { useTranslation } from "next-i18next";
|
||||
|
||||
import Container from "components/services/widget/container";
|
||||
import Block from "components/services/widget/block";
|
||||
import useWidgetAPI from "utils/proxy/use-widget-api";
|
||||
|
||||
export default function Component({ service }) {
|
||||
const { t } = useTranslation();
|
||||
|
||||
const { widget } = service;
|
||||
|
||||
const { data: statsData, error: statsError } = useWidgetAPI(widget, "device");
|
||||
|
||||
if (statsError) {
|
||||
return <Container service={service} error={statsError} />;
|
||||
}
|
||||
|
||||
if (!statsData) {
|
||||
return (
|
||||
<Container service={service}>
|
||||
<Block label="tailscale.address" />
|
||||
<Block label="tailscale.last_seen" />
|
||||
<Block label="tailscale.expires" />
|
||||
</Container>
|
||||
);
|
||||
}
|
||||
|
||||
const {
|
||||
addresses: [address],
|
||||
keyExpiryDisabled,
|
||||
lastSeen,
|
||||
expires,
|
||||
} = statsData;
|
||||
|
||||
const now = new Date();
|
||||
const compareDifferenceInTwoDates = (priorDate, futureDate) => {
|
||||
const diff = futureDate.getTime() - priorDate.getTime();
|
||||
const diffInYears = Math.ceil(diff / (1000 * 60 * 60 * 24 * 365));
|
||||
if (diffInYears > 1) return t("tailscale.years", { number: diffInYears });
|
||||
const diffInWeeks = Math.ceil(diff / (1000 * 60 * 60 * 24 * 7));
|
||||
if (diffInWeeks > 1) return t("tailscale.weeks", { number: diffInWeeks });
|
||||
const diffInDays = Math.ceil(diff / (1000 * 60 * 60 * 24));
|
||||
if (diffInDays > 1) return t("tailscale.days", { number: diffInDays });
|
||||
const diffInHours = Math.ceil(diff / (1000 * 60 * 60));
|
||||
if (diffInHours > 1) return t("tailscale.hours", { number: diffInHours });
|
||||
const diffInMinutes = Math.ceil(diff / (1000 * 60));
|
||||
if (diffInMinutes > 1) return t("tailscale.minutes", { number: diffInMinutes });
|
||||
const diffInSeconds = Math.ceil(diff / 1000);
|
||||
if (diffInSeconds > 10) return t("tailscale.seconds", { number: diffInSeconds });
|
||||
return "Now";
|
||||
};
|
||||
|
||||
const getLastSeen = () => {
|
||||
const date = new Date(lastSeen);
|
||||
const diff = compareDifferenceInTwoDates(date, now);
|
||||
return diff === "Now" ? t("tailscale.now") : t("tailscale.ago", { value: diff });
|
||||
};
|
||||
|
||||
const getExpiry = () => {
|
||||
if (keyExpiryDisabled) return t("tailscale.never");
|
||||
const date = new Date(expires);
|
||||
return compareDifferenceInTwoDates(now, date);
|
||||
};
|
||||
|
||||
return (
|
||||
<Container service={service}>
|
||||
<Block label="tailscale.address" value={address} />
|
||||
<Block label="tailscale.last_seen" value={getLastSeen()} />
|
||||
<Block label="tailscale.expires" value={getExpiry()} />
|
||||
</Container>
|
||||
);
|
||||
}
|
@ -0,0 +1,14 @@
|
||||
import credentialedProxyHandler from "utils/proxy/handlers/credentialed";
|
||||
|
||||
const widget = {
|
||||
api: "https://api.tailscale.com/api/v2/{endpoint}/{deviceid}",
|
||||
proxyHandler: credentialedProxyHandler,
|
||||
|
||||
mappings: {
|
||||
device: {
|
||||
endpoint: "device",
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
export default widget;
|
Loading…
Reference in new issue