open-source-mirrors
/
homepage
mirror of https://github.com/benphelps/homepage
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #1917 from benphelps/non-graphs

Browse Source 
mini-non-chart charts
pull/1918/head
Ben Phelps 1 year ago committed by GitHub
parent c2058f353d 17b0f635d8
commit 99f60eab29
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
12 changed files with 434 additions and 242 deletions
Show Stats Download Patch File Download Diff File

1
public/locales/en/common.json
Unescape View File

@ -365,6 +365,7 @@
"load": "Load", "load": "Load",
"wait": "Please wait", "wait": "Please wait",
"temp": "TEMP", "temp": "TEMP",
"_temp": "Temp",
"warn": "Warn", "warn": "Warn",
"uptime": "UP", "uptime": "UP",
"total": "Total", "total": "Total",

150
src/utils/config/service-helpers.js
Unescape View File

@ -13,7 +13,6 @@ import getKubeConfig from "utils/config/kubernetes";
const logger = createLogger("service-helpers"); const logger = createLogger("service-helpers");
export async function servicesFromConfig() { export async function servicesFromConfig() {
checkAndCopyConfig("services.yaml"); checkAndCopyConfig("services.yaml");
@ -32,14 +31,14 @@ export async function servicesFromConfig() {
services: servicesGroup[Object.keys(servicesGroup)[0]].map((entries) => ({ services: servicesGroup[Object.keys(servicesGroup)[0]].map((entries) => ({
name: Object.keys(entries)[0], name: Object.keys(entries)[0],
...entries[Object.keys(entries)[0]], ...entries[Object.keys(entries)[0]],
type: 'service' type: "service",
})), })),
})); }));
// add default weight to services based on their position in the configuration // add default weight to services based on their position in the configuration
servicesArray.forEach((group, groupIndex) => { servicesArray.forEach((group, groupIndex) => {
group.services.forEach((service, serviceIndex) => { group.services.forEach((service, serviceIndex) => {
if(!service.weight) { if (!service.weight) {
servicesArray[groupIndex].services[serviceIndex].weight = (serviceIndex + 1) * 100; servicesArray[groupIndex].services[serviceIndex].weight = (serviceIndex + 1) * 100;
} }
}); });
@ -66,7 +65,9 @@ export async function servicesFromDocker() {
const isSwarm = !!servers[serverName].swarm; const isSwarm = !!servers[serverName].swarm;
const docker = new Docker(getDockerArguments(serverName).conn); const docker = new Docker(getDockerArguments(serverName).conn);
const listProperties = { all: true }; const listProperties = { all: true };
const containers = await ((isSwarm) ? docker.listServices(listProperties) : docker.listContainers(listProperties)); const containers = await (isSwarm
? docker.listServices(listProperties)
: docker.listContainers(listProperties));
// bad docker connections can result in a <Buffer ...> object? // bad docker connections can result in a <Buffer ...> object?
// in any case, this ensures the result is the expected array // in any case, this ensures the result is the expected array
@ -76,8 +77,8 @@ export async function servicesFromDocker() {
const discovered = containers.map((container) => { const discovered = containers.map((container) => {
let constructedService = null; let constructedService = null;
const containerLabels = isSwarm ? shvl.get(container, 'Spec.Labels') : container.Labels; const containerLabels = isSwarm ? shvl.get(container, "Spec.Labels") : container.Labels;
const containerName = isSwarm ? shvl.get(container, 'Spec.Name') : container.Names[0]; const containerName = isSwarm ? shvl.get(container, "Spec.Name") : container.Names[0];
Object.keys(containerLabels).forEach((label) => { Object.keys(containerLabels).forEach((label) => {
if (label.startsWith("homepage.")) { if (label.startsWith("homepage.")) {
@ -85,10 +86,14 @@ export async function servicesFromDocker() {
constructedService = { constructedService = {
container: containerName.replace(/^\//, ""), container: containerName.replace(/^\//, ""),
server: serverName, server: serverName,
type: 'service' type: "service",
}; };
} }
shvl.set(constructedService, label.replace("homepage.", ""), substituteEnvironmentVars(containerLabels[label])); shvl.set(
constructedService,
label.replace("homepage.", ""),
substituteEnvironmentVars(containerLabels[label])
);
} }
}); });
@ -132,12 +137,12 @@ export async function servicesFromDocker() {
function getUrlFromIngress(ingress) { function getUrlFromIngress(ingress) {
const urlHost = ingress.spec.rules[0].host; const urlHost = ingress.spec.rules[0].host;
const urlPath = ingress.spec.rules[0].http.paths[0].path; const urlPath = ingress.spec.rules[0].http.paths[0].path;
const urlSchema = ingress.spec.tls ? 'https' : 'http'; const urlSchema = ingress.spec.tls ? "https" : "http";
return `${urlSchema}://${urlHost}${urlPath}`; return `${urlSchema}://${urlHost}${urlPath}`;
} }
export async function servicesFromKubernetes() { export async function servicesFromKubernetes() {
const ANNOTATION_BASE = 'gethomepage.dev'; const ANNOTATION_BASE = "gethomepage.dev";
const ANNOTATION_WIDGET_BASE = `${ANNOTATION_BASE}/widget.`; const ANNOTATION_WIDGET_BASE = `${ANNOTATION_BASE}/widget.`;
const ANNOTATION_POD_SELECTOR = `${ANNOTATION_BASE}/pod-selector`; const ANNOTATION_POD_SELECTOR = `${ANNOTATION_BASE}/pod-selector`;
@ -151,39 +156,52 @@ export async function servicesFromKubernetes() {
const networking = kc.makeApiClient(NetworkingV1Api); const networking = kc.makeApiClient(NetworkingV1Api);
const crd = kc.makeApiClient(CustomObjectsApi); const crd = kc.makeApiClient(CustomObjectsApi);
const ingressList = await networking.listIngressForAllNamespaces(null, null, null, null) const ingressList = await networking
.listIngressForAllNamespaces(null, null, null, null)
.then((response) => response.body) .then((response) => response.body)
.catch((error) => { .catch((error) => {
logger.error("Error getting ingresses: %d %s %s", error.statusCode, error.body, error.response); logger.error("Error getting ingresses: %d %s %s", error.statusCode, error.body, error.response);
return null; return null;
}); });
const traefikIngressListContaino = await crd.listClusterCustomObject("traefik.containo.us", "v1alpha1", "ingressroutes") const traefikIngressListContaino = await crd
.listClusterCustomObject("traefik.containo.us", "v1alpha1", "ingressroutes")
.then((response) => response.body) .then((response) => response.body)
.catch(async (error) => { .catch(async (error) => {
if (error.statusCode !== 404) { if (error.statusCode !== 404) {
logger.error("Error getting traefik ingresses from traefik.containo.us: %d %s %s", error.statusCode, error.body, error.response); logger.error(
"Error getting traefik ingresses from traefik.containo.us: %d %s %s",
error.statusCode,
error.body,
error.response
);
} }
return []; return [];
}); });
const traefikIngressListIo = await crd.listClusterCustomObject("traefik.io", "v1alpha1", "ingressroutes") const traefikIngressListIo = await crd
.listClusterCustomObject("traefik.io", "v1alpha1", "ingressroutes")
.then((response) => response.body) .then((response) => response.body)
.catch(async (error) => { .catch(async (error) => {
if (error.statusCode !== 404) { if (error.statusCode !== 404) {
logger.error("Error getting traefik ingresses from traefik.io: %d %s %s", error.statusCode, error.body, error.response); logger.error(
} "Error getting traefik ingresses from traefik.io: %d %s %s",
error.statusCode,
error.body,
error.response
);
}
return []; return [];
}); });
const traefikIngressList = [...traefikIngressListContaino, ...traefikIngressListIo]; const traefikIngressList = [...traefikIngressListContaino, ...traefikIngressListIo];
if (traefikIngressList && traefikIngressList.items.length > 0) { if (traefikIngressList && traefikIngressList.items.length > 0) {
const traefikServices = traefikIngressList.items const traefikServices = traefikIngressList.items.filter(
.filter((ingress) => ingress.metadata.annotations && ingress.metadata.annotations[`${ANNOTATION_BASE}/href`]) (ingress) => ingress.metadata.annotations && ingress.metadata.annotations[`${ANNOTATION_BASE}/href`]
);
ingressList.items.push(...traefikServices); ingressList.items.push(...traefikServices);
} }
@ -191,43 +209,51 @@ export async function servicesFromKubernetes() {
return []; return [];
} }
const services = ingressList.items const services = ingressList.items
.filter((ingress) => ingress.metadata.annotations && ingress.metadata.annotations[`${ANNOTATION_BASE}/enabled`] === 'true') .filter(
(ingress) =>
ingress.metadata.annotations && ingress.metadata.annotations[`${ANNOTATION_BASE}/enabled`] === "true"
)
.map((ingress) => { .map((ingress) => {
let constructedService = { let constructedService = {
app: ingress.metadata.name, app: ingress.metadata.name,
namespace: ingress.metadata.namespace, namespace: ingress.metadata.namespace,
href: ingress.metadata.annotations[`${ANNOTATION_BASE}/href`] || getUrlFromIngress(ingress), href: ingress.metadata.annotations[`${ANNOTATION_BASE}/href`] || getUrlFromIngress(ingress),
name: ingress.metadata.annotations[`${ANNOTATION_BASE}/name`] || ingress.metadata.name, name: ingress.metadata.annotations[`${ANNOTATION_BASE}/name`] || ingress.metadata.name,
group: ingress.metadata.annotations[`${ANNOTATION_BASE}/group`] || "Kubernetes", group: ingress.metadata.annotations[`${ANNOTATION_BASE}/group`] || "Kubernetes",
weight: ingress.metadata.annotations[`${ANNOTATION_BASE}/weight`] || '0', weight: ingress.metadata.annotations[`${ANNOTATION_BASE}/weight`] || "0",
icon: ingress.metadata.annotations[`${ANNOTATION_BASE}/icon`] || '', icon: ingress.metadata.annotations[`${ANNOTATION_BASE}/icon`] || "",
description: ingress.metadata.annotations[`${ANNOTATION_BASE}/description`] || '', description: ingress.metadata.annotations[`${ANNOTATION_BASE}/description`] || "",
external: false, external: false,
type: 'service' type: "service",
}; };
if (ingress.metadata.annotations[`${ANNOTATION_BASE}/external`]) { if (ingress.metadata.annotations[`${ANNOTATION_BASE}/external`]) {
constructedService.external = String(ingress.metadata.annotations[`${ANNOTATION_BASE}/external`]).toLowerCase() === "true" constructedService.external =
} String(ingress.metadata.annotations[`${ANNOTATION_BASE}/external`]).toLowerCase() === "true";
if (ingress.metadata.annotations[ANNOTATION_POD_SELECTOR]) {
constructedService.podSelector = ingress.metadata.annotations[ANNOTATION_POD_SELECTOR];
}
if (ingress.metadata.annotations[`${ANNOTATION_BASE}/ping`]) {
constructedService.ping = ingress.metadata.annotations[`${ANNOTATION_BASE}/ping`];
}
Object.keys(ingress.metadata.annotations).forEach((annotation) => {
if (annotation.startsWith(ANNOTATION_WIDGET_BASE)) {
shvl.set(constructedService, annotation.replace(`${ANNOTATION_BASE}/`, ""), ingress.metadata.annotations[annotation]);
} }
}); if (ingress.metadata.annotations[ANNOTATION_POD_SELECTOR]) {
constructedService.podSelector = ingress.metadata.annotations[ANNOTATION_POD_SELECTOR];
}
if (ingress.metadata.annotations[`${ANNOTATION_BASE}/ping`]) {
constructedService.ping = ingress.metadata.annotations[`${ANNOTATION_BASE}/ping`];
}
Object.keys(ingress.metadata.annotations).forEach((annotation) => {
if (annotation.startsWith(ANNOTATION_WIDGET_BASE)) {
shvl.set(
constructedService,
annotation.replace(`${ANNOTATION_BASE}/`, ""),
ingress.metadata.annotations[annotation]
);
}
});
try { try {
constructedService = JSON.parse(substituteEnvironmentVars(JSON.stringify(constructedService))); constructedService = JSON.parse(substituteEnvironmentVars(JSON.stringify(constructedService)));
} catch (e) { } catch (e) {
logger.error("Error attempting k8s environment variable substitution."); logger.error("Error attempting k8s environment variable substitution.");
} }
return constructedService; return constructedService;
}); });
const mappedServiceGroups = []; const mappedServiceGroups = [];
@ -251,7 +277,6 @@ export async function servicesFromKubernetes() {
}); });
return mappedServiceGroups; return mappedServiceGroups;
} catch (e) { } catch (e) {
logger.error(e); logger.error(e);
throw e; throw e;
@ -264,7 +289,7 @@ export function cleanServiceGroups(groups) {
services: serviceGroup.services.map((service) => { services: serviceGroup.services.map((service) => {
const cleanedService = { ...service }; const cleanedService = { ...service };
if (cleanedService.showStats !== undefined) cleanedService.showStats = JSON.parse(cleanedService.showStats); if (cleanedService.showStats !== undefined) cleanedService.showStats = JSON.parse(cleanedService.showStats);
if (typeof service.weight === 'string') { if (typeof service.weight === "string") {
const weight = parseInt(service.weight, 10); const weight = parseInt(service.weight, 10);
if (Number.isNaN(weight)) { if (Number.isNaN(weight)) {
cleanedService.weight = 0; cleanedService.weight = 0;
@ -303,6 +328,7 @@ export function cleanServiceGroups(groups) {
userEmail, // azuredevops userEmail, // azuredevops
repositoryId, repositoryId,
metric, // glances metric, // glances
chart, // glances
stream, // mjpeg stream, // mjpeg
fit, fit,
method, // openmediavault widget method, // openmediavault widget
@ -311,9 +337,10 @@ export function cleanServiceGroups(groups) {
} = cleanedService.widget; } = cleanedService.widget;
let fieldsList = fields; let fieldsList = fields;
if (typeof fields === 'string') { if (typeof fields === "string") {
try { JSON.parse(fields) } try {
catch (e) { JSON.parse(fields);
} catch (e) {
logger.error("Invalid fields list detected in config for service '%s'", service.name); logger.error("Invalid fields list detected in config for service '%s'", service.name);
fieldsList = null; fieldsList = null;
} }
@ -373,6 +400,11 @@ export function cleanServiceGroups(groups) {
} }
if (type === "glances") { if (type === "glances") {
if (metric) cleanedService.widget.metric = metric; if (metric) cleanedService.widget.metric = metric;
if (chart !== undefined) {
cleanedService.widget.chart = chart;
} else {
cleanedService.widget.chart = true;
}
} }
if (type === "mjpeg") { if (type === "mjpeg") {
if (stream) cleanedService.widget.stream = stream; if (stream) cleanedService.widget.stream = stream;

5
src/widgets/glances/components/container.jsx
Unescape View File

@ -1,9 +1,10 @@
export default function Container({ children, className = "" }) { export default function Container({ children, chart = true, className = "" }) {
return ( return (
<div> <div>
{children} {children}
<div className={`absolute top-0 right-0 bottom-0 left-0 overflow-clip pointer-events-none ${className}`} /> <div className={`absolute top-0 right-0 bottom-0 left-0 overflow-clip pointer-events-none ${className}`} />
<div className="h-[68px] overflow-clip" /> { chart && <div className="h-[68px] overflow-clip" /> }
{ !chart && <div className="h-[16px] overflow-clip" /> }
</div> </div>
); );
} }

43
src/widgets/glances/metrics/cpu.jsx
Unescape View File

@ -14,6 +14,8 @@ const pointsLimit = 15;
export default function Component({ service }) { export default function Component({ service }) {
const { t } = useTranslation(); const { t } = useTranslation();
const { widget } = service;
const { chart } = widget;
const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit)); const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
@ -44,32 +46,45 @@ export default function Component({ service }) {
} }
return ( return (
<Container> <Container chart={chart}>
<Chart { chart && (
dataPoints={dataPoints} <Chart
label={[t("resources.used")]} dataPoints={dataPoints}
formatter={(value) => t("common.number", { label={[t("resources.used")]}
value, formatter={(value) => t("common.number", {
style: "unit", value,
unit: "percent", style: "unit",
maximumFractionDigits: 0, unit: "percent",
})} maximumFractionDigits: 0,
/> })}
/>
)}
{ !chart && (
<Block position="top-3 right-3">
<div className="text-xs opacity-50">
{systemData.linux_distro && `${systemData.linux_distro} - ` }
{systemData.os_version && systemData.os_version }
</div>
</Block>
)}
{systemData && !systemError && ( {systemData && !systemError && (
<Block position="bottom-3 left-3"> <Block position="bottom-3 left-3">
{systemData.linux_distro && ( {systemData.linux_distro && chart && (
<div className="text-xs opacity-50"> <div className="text-xs opacity-50">
{systemData.linux_distro} {systemData.linux_distro}
</div> </div>
)} )}
{systemData.os_version && (
{systemData.os_version && chart && (
<div className="text-xs opacity-50"> <div className="text-xs opacity-50">
{systemData.os_version} {systemData.os_version}
</div> </div>
)} )}
{systemData.hostname && ( {systemData.hostname && (
<div className="text-xs opacity-75"> <div className="text-xs opacity-50">
{systemData.hostname} {systemData.hostname}
</div> </div>
)} )}

29
src/widgets/glances/metrics/disk.jsx
Unescape View File

@ -15,6 +15,7 @@ const pointsLimit = 15;
export default function Component({ service }) { export default function Component({ service }) {
const { t } = useTranslation(); const { t } = useTranslation();
const { widget } = service; const { widget } = service;
const { chart } = widget;
const [, diskName] = widget.metric.split(':'); const [, diskName] = widget.metric.split(':');
const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ read_bytes: 0, write_bytes: 0, time_since_update: 0 }, 0, pointsLimit)); const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ read_bytes: 0, write_bytes: 0, time_since_update: 0 }, 0, pointsLimit));
@ -65,24 +66,26 @@ export default function Component({ service }) {
const currentRate = diskRates[diskRates.length - 1]; const currentRate = diskRates[diskRates.length - 1];
return ( return (
<Container> <Container chart={chart}>
<ChartDual { chart && (
dataPoints={ratePoints} <ChartDual
label={[t("glances.read"), t("glances.write")]} dataPoints={ratePoints}
max={diskData.critical} label={[t("glances.read"), t("glances.write")]}
formatter={(value) => t("common.bitrate", { max={diskData.critical}
value, formatter={(value) => t("common.bitrate", {
})} value,
/> })}
/>
)}
{currentRate && !error && ( {currentRate && !error && (
<Block position="bottom-3 left-3"> <Block position={chart ? "bottom-3 left-3" : "bottom-3 right-3"}>
<div className="text-xs opacity-50"> <div className="text-xs opacity-50 text-right">
{t("common.bitrate", { {t("common.bitrate", {
value: currentRate.a, value: currentRate.a,
})} {t("glances.read")} })} {t("glances.read")}
</div> </div>
<div className="text-xs opacity-50"> <div className="text-xs opacity-50 text-right">
{t("common.bitrate", { {t("common.bitrate", {
value: currentRate.b, value: currentRate.b,
})} {t("glances.write")} })} {t("glances.write")}
@ -90,7 +93,7 @@ export default function Component({ service }) {
</Block> </Block>
)} )}
<Block position="bottom-3 right-3"> <Block position={chart ? "bottom-3 right-3" : "bottom-3 left-3"}>
<div className="text-xs opacity-75"> <div className="text-xs opacity-75">
{t("common.bitrate", { {t("common.bitrate", {
value: currentRate.a + currentRate.b, value: currentRate.a + currentRate.b,

56
src/widgets/glances/metrics/fs.jsx
Unescape View File

@ -9,6 +9,7 @@ import useWidgetAPI from "utils/proxy/use-widget-api";
export default function Component({ service }) { export default function Component({ service }) {
const { t } = useTranslation(); const { t } = useTranslation();
const { widget } = service; const { widget } = service;
const { chart } = widget;
const [, fsName] = widget.metric.split(':'); const [, fsName] = widget.metric.split(':');
const { data, error } = useWidgetAPI(widget, 'fs', { const { data, error } = useWidgetAPI(widget, 'fs', {
@ -30,35 +31,52 @@ export default function Component({ service }) {
} }
return ( return (
<Container> <Container chart={chart}>
<div className="absolute top-0 left-0 right-0 bottom-0"> { chart && (
<div style={{ <div className="absolute top-0 left-0 right-0 bottom-0">
height: `${Math.max(20, (fsData.size/fsData.free))}%`,
}} className="absolute bottom-0 border-t border-t-theme-500 bg-gradient-to-b from-theme-500/40 to-theme-500/10 w-full" />
<div style={{ <div style={{
top: `${100-Math.max(18, (fsData.size/fsData.free))}%`, height: `${Math.max(20, (fsData.size/fsData.free))}%`,
}} className="relative -my-5 ml-2.5 text-xs opacity-50"> }} className="absolute bottom-0 border-t border-t-theme-500 bg-gradient-to-b from-theme-500/40 to-theme-500/10 w-full" />
</div>
)}
<Block position="bottom-3 left-3">
{ fsData.used && chart && (
<div className="text-xs opacity-50">
{t("common.bbytes", { {t("common.bbytes", {
value: fsData.used, value: fsData.used,
maximumFractionDigits: 0, maximumFractionDigits: 0,
})} {t("resources.used")} })} {t("resources.used")}
</div> </div>
<div style={{ )}
top: `${100-Math.max(22, (fsData.size/fsData.free))}%`,
}} className="relative my-7 ml-2.5 text-xs opacity-50"> <div className="text-xs opacity-75">
{t("common.bbytes", { {t("common.bbytes", {
value: fsData.free, value: fsData.free,
maximumFractionDigits: 0, maximumFractionDigits: 0,
})} {t("resources.free")} })} {t("resources.free")}
</div> </div>
</div> </Block>
{ !chart && (
<Block position="top-3 right-3">
{fsData.used && (
<div className="text-xs opacity-50">
{t("common.bbytes", {
value: fsData.used,
maximumFractionDigits: 0,
})} {t("resources.used")}
</div>
)}
</Block>
)}
<Block position="top-3 right-3"> <Block position="bottom-3 right-3">
<div className="border rounded-md px-1.5 py-0.5 bg-theme-400/30 border-white/30 font-bold opacity-75"> <div className="text-xs opacity-75">
{t("common.bbytes", { {t("common.bbytes", {
value: fsData.size, value: fsData.size,
maximumFractionDigits: 1, maximumFractionDigits: 1,
})} })} {t("resources.total")}
</div> </div>
</Block> </Block>
</Container> </Container>

105
src/widgets/glances/metrics/gpu.jsx
Unescape View File

@ -15,6 +15,7 @@ const pointsLimit = 15;
export default function Component({ service }) { export default function Component({ service }) {
const { t } = useTranslation(); const { t } = useTranslation();
const { widget } = service; const { widget } = service;
const { chart } = widget;
const [, gpuName] = widget.metric.split(':'); const [, gpuName] = widget.metric.split(':');
const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ a: 0, b: 0 }, 0, pointsLimit)); const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ a: 0, b: 0 }, 0, pointsLimit));
@ -56,48 +57,84 @@ export default function Component({ service }) {
} }
return ( return (
<Container> <Container chart={chart}>
<ChartDual { chart && (
dataPoints={dataPoints} <ChartDual
label={[t("glances.mem"), t("glances.gpu")]} dataPoints={dataPoints}
stack={['mem', 'proc']} label={[t("glances.mem"), t("glances.gpu")]}
formatter={(value) => t("common.percent", { stack={['mem', 'proc']}
value, formatter={(value) => t("common.percent", {
maximumFractionDigits: 1, value,
})}
/>
<Block position="bottom-3 left-3">
{gpuData && gpuData.name && (
<div className="text-xs opacity-50">
{gpuData.name}
</div>
)}
<div className="text-xs opacity-75">
{t("common.number", {
value: gpuData.mem,
maximumFractionDigits: 1, maximumFractionDigits: 1,
})}% {t("glances.mem")} {t("resources.used")} })}
</div> />
</Block> )}
{ chart && (
<Block position="bottom-3 left-3">
{gpuData && gpuData.name && (
<div className="text-xs opacity-50">
{gpuData.name}
</div>
)}
<div className="text-xs opacity-50">
{t("common.number", {
value: gpuData.mem,
maximumFractionDigits: 1,
})}% {t("resources.mem")}
</div>
</Block>
)}
{ !chart && (
<Block position="bottom-3 left-3">
<div className="text-xs opacity-50">
{t("common.number", {
value: gpuData.temperature,
maximumFractionDigits: 1,
})}&deg; C
</div>
</Block>
)}
<Block position="bottom-3 right-3"> <Block position="bottom-3 right-3">
<div className="text-xs opacity-75"> <div className="text-xs opacity-75">
{t("common.number", { {!chart && (
value: gpuData.proc, <div className="inline-block mr-1">
maximumFractionDigits: 1, {t("common.number", {
})}% {t("glances.gpu")} value: gpuData.proc,
maximumFractionDigits: 1,
})}% {t("glances.gpu")}
</div>
)}
{ !chart && (
<>&bull;</>
)}
<div className="inline-block ml-1">
{t("common.number", {
value: gpuData.proc,
maximumFractionDigits: 1,
})}% {t("glances.gpu")}
</div>
</div> </div>
</Block> </Block>
<Block position="top-3 right-3"> <Block position="top-3 right-3">
<div className="text-xs opacity-75"> { chart && (
{t("common.number", { <div className="text-xs opacity-50">
value: gpuData.temperature, {t("common.number", {
maximumFractionDigits: 1, value: gpuData.temperature,
})}&deg; maximumFractionDigits: 1,
</div> })}&deg; C
</div>
)}
{gpuData && gpuData.name && !chart && (
<div className="text-xs opacity-50">
{gpuData.name}
</div>
)}
</Block> </Block>
</Container> </Container>
); );

155
src/widgets/glances/metrics/info.jsx
Unescape View File

@ -6,9 +6,65 @@ import Block from "../components/block";
import useWidgetAPI from "utils/proxy/use-widget-api"; import useWidgetAPI from "utils/proxy/use-widget-api";
export default function Component({ service }) {
function Swap({ quicklookData, className = "" }) {
const { t } = useTranslation(); const { t } = useTranslation();
return quicklookData && quicklookData.swap !== 0 && (
<div className="text-xs flex place-content-between">
<div className={className}>{t("glances.swap")}</div>
<div className={className}>
{t("common.number", {
value: quicklookData.swap,
style: "unit",
unit: "percent",
maximumFractionDigits: 0,
})}
</div>
</div>
);
}
function CPU({ quicklookData, className = "" }) {
const { t } = useTranslation();
return quicklookData && quicklookData.cpu && (
<div className="text-xs flex place-content-between">
<div className={className}>{t("glances.cpu")}</div>
<div className={className}>
{t("common.number", {
value: quicklookData.cpu,
style: "unit",
unit: "percent",
maximumFractionDigits: 0,
})}
</div>
</div>
);
}
function Mem({ quicklookData, className = "" }) {
const { t } = useTranslation();
return quicklookData && quicklookData.mem && (
<div className="text-xs flex place-content-between">
<div className={className}>{t("glances.mem")}</div>
<div className={className}>
{t("common.number", {
value: quicklookData.mem,
style: "unit",
unit: "percent",
maximumFractionDigits: 0,
})}
</div>
</div>
);
}
export default function Component({ service }) {
const { widget } = service;
const { chart } = widget;
const { data: quicklookData, errorL: quicklookError } = useWidgetAPI(service.widget, 'quicklook', { const { data: quicklookData, errorL: quicklookError } = useWidgetAPI(service.widget, 'quicklook', {
refreshInterval: 1000, refreshInterval: 1000,
}); });
@ -41,74 +97,59 @@ export default function Component({ service }) {
return ( return (
<Container className="bg-gradient-to-br from-theme-500/30 via-theme-600/20 to-theme-700/10"> <Container chart={chart} className="bg-gradient-to-br from-theme-500/30 via-theme-600/20 to-theme-700/10">
<Block position="top-3 right-3"> <Block position="top-3 right-3">
{quicklookData && quicklookData.cpu_name && ( {quicklookData && quicklookData.cpu_name && chart && (
<div className="text-[0.6rem] opacity-50"> <div className="text-[0.6rem] opacity-50">
{quicklookData.cpu_name} {quicklookData.cpu_name}
</div> </div>
)} )}
</Block>
<Block position="bottom-3 left-3"> { !chart && quicklookData?.swap === 0 && (
{systemData && systemData.linux_distro && ( <div className="text-[0.6rem] opacity-50">
<div className="text-xs opacity-50"> {quicklookData.cpu_name}
{systemData.linux_distro}
</div>
)}
{systemData && systemData.os_version && (
<div className="text-xs opacity-50">
{systemData.os_version}
</div>
)}
{systemData && systemData.hostname && (
<div className="text-xs opacity-75">
{systemData.hostname}
</div> </div>
)} )}
<div className="w-[4rem]">
{ !chart && <Swap quicklookData={quicklookData} className="opacity-25" /> }
</div>
</Block> </Block>
<Block position="bottom-3 right-3 w-[4rem]">
{quicklookData && quicklookData.cpu && (
<div className="text-xs opacity-25 flex place-content-between">
<div>{t("glances.cpu")}</div>
<div className="opacity-75">
{t("common.number", {
value: quicklookData.cpu,
style: "unit",
unit: "percent",
maximumFractionDigits: 0,
})}
</div>
</div>
)}
{quicklookData && quicklookData.mem && ( {chart && (
<div className="text-xs opacity-25 flex place-content-between"> <Block position="bottom-3 left-3">
<div>{t("glances.mem")}</div> {systemData && systemData.linux_distro && (
<div className="opacity-75"> <div className="text-xs opacity-50">
{t("common.number", { {systemData.linux_distro}
value: quicklookData.mem,
style: "unit",
unit: "percent",
maximumFractionDigits: 0,
})}
</div> </div>
</div> )}
)} {systemData && systemData.os_version && (
<div className="text-xs opacity-50">
{quicklookData && quicklookData.swap !== 0 && ( {systemData.os_version}
<div className="text-xs opacity-25 flex place-content-between">
<div>{t("glances.swap")}</div>
<div className="opacity-75">
{t("common.number", {
value: quicklookData.swap,
style: "unit",
unit: "percent",
maximumFractionDigits: 0,
})}
</div> </div>
</div> )}
)} {systemData && systemData.hostname && (
<div className="text-xs opacity-75">
{systemData.hostname}
</div>
)}
</Block>
)}
{!chart && (
<Block position="bottom-3 left-3 w-[3rem]">
<CPU quicklookData={quicklookData} className="opacity-75" />
</Block>
)}
<Block position="bottom-3 right-3 w-[4rem]">
{ chart && <CPU quicklookData={quicklookData} className="opacity-50" /> }
{ chart && <Mem quicklookData={quicklookData} className="opacity-50" /> }
{ !chart && <Mem quicklookData={quicklookData} className="opacity-75" /> }
{ chart && <Swap quicklookData={quicklookData} className="opacity-50" /> }
</Block> </Block>
</Container> </Container>
); );

45
src/widgets/glances/metrics/memory.jsx
Unescape View File

@ -14,11 +14,14 @@ const pointsLimit = 15;
export default function Component({ service }) { export default function Component({ service }) {
const { t } = useTranslation(); const { t } = useTranslation();
const { widget } = service;
const { chart } = widget;
const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit)); const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
const { data, error } = useWidgetAPI(service.widget, 'mem', { const { data, error } = useWidgetAPI(service.widget, 'mem', {
refreshInterval: 1000, refreshInterval: chart ? 1000 : 5000,
}); });
useEffect(() => { useEffect(() => {
@ -42,21 +45,23 @@ export default function Component({ service }) {
} }
return ( return (
<Container> <Container chart={chart} >
<ChartDual {chart && (
dataPoints={dataPoints} <ChartDual
max={data.total} dataPoints={dataPoints}
label={[t("resources.used"), t("resources.free")]} max={data.total}
formatter={(value) => t("common.bytes", { label={[t("resources.used"), t("resources.free")]}
value, formatter={(value) => t("common.bytes", {
maximumFractionDigits: 0, value,
binary: true, maximumFractionDigits: 0,
})} binary: true,
/> })}
/>
)}
{data && !error && ( {data && !error && (
<Block position="bottom-3 left-3"> <Block position="bottom-3 left-3">
{data.free && ( {data.free && chart && (
<div className="text-xs opacity-50"> <div className="text-xs opacity-50">
{t("common.bytes", { {t("common.bytes", {
value: data.free, value: data.free,
@ -78,6 +83,20 @@ export default function Component({ service }) {
</Block> </Block>
)} )}
{ !chart && (
<Block position="top-3 right-3">
{data.free && (
<div className="text-xs opacity-50">
{t("common.bytes", {
value: data.free,
maximumFractionDigits: 0,
binary: true,
})} {t("resources.free")}
</div>
)}
</Block>
)}
<Block position="bottom-3 right-3"> <Block position="bottom-3 right-3">
<div className="text-xs font-bold opacity-75"> <div className="text-xs font-bold opacity-75">
{t("common.bytes", { {t("common.bytes", {

37
src/widgets/glances/metrics/net.jsx
Unescape View File

@ -15,12 +15,13 @@ const pointsLimit = 15;
export default function Component({ service }) { export default function Component({ service }) {
const { t } = useTranslation(); const { t } = useTranslation();
const { widget } = service; const { widget } = service;
const [, interfaceName] = widget.metric.split(':'); const { chart, metric } = widget;
const [, interfaceName] = metric.split(':');
const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit)); const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
const { data, error } = useWidgetAPI(widget, 'network', { const { data, error } = useWidgetAPI(widget, 'network', {
refreshInterval: 1000, refreshInterval: chart ? 1000 : 5000,
}); });
useEffect(() => { useEffect(() => {
@ -54,18 +55,20 @@ export default function Component({ service }) {
} }
return ( return (
<Container> <Container chart={chart}>
<ChartDual { chart && (
dataPoints={dataPoints} <ChartDual
label={[t("docker.tx"), t("docker.rx")]} dataPoints={dataPoints}
formatter={(value) => t("common.byterate", { label={[t("docker.tx"), t("docker.rx")]}
value, formatter={(value) => t("common.byterate", {
maximumFractionDigits: 0, value,
})} maximumFractionDigits: 0,
/> })}
/>
)}
<Block position="bottom-3 left-3"> <Block position="bottom-3 left-3">
{interfaceData && interfaceData.interface_name && ( {interfaceData && interfaceData.interface_name && chart && (
<div className="text-xs opacity-50"> <div className="text-xs opacity-50">
{interfaceData.interface_name} {interfaceData.interface_name}
</div> </div>
@ -79,6 +82,16 @@ export default function Component({ service }) {
</div> </div>
</Block> </Block>
{ !chart && (
<Block position="top-3 right-3">
{interfaceData && interfaceData.interface_name && (
<div className="text-xs opacity-50">
{interfaceData.interface_name}
</div>
)}
</Block>
)}
<Block position="bottom-3 right-3"> <Block position="bottom-3 right-3">
<div className="text-xs opacity-75"> <div className="text-xs opacity-75">
{t("common.bitrate", { {t("common.bitrate", {

6
src/widgets/glances/metrics/process.jsx
Unescape View File

@ -19,6 +19,8 @@ const statusMap = {
export default function Component({ service }) { export default function Component({ service }) {
const { t } = useTranslation(); const { t } = useTranslation();
const { widget } = service;
const { chart } = widget;
const { data, error } = useWidgetAPI(service.widget, 'processlist', { const { data, error } = useWidgetAPI(service.widget, 'processlist', {
refreshInterval: 1000, refreshInterval: 1000,
@ -32,10 +34,10 @@ export default function Component({ service }) {
return <Container><Block position="bottom-3 left-3">-</Block></Container>; return <Container><Block position="bottom-3 left-3">-</Block></Container>;
} }
data.splice(5); data.splice(chart ? 5 : 1);
return ( return (
<Container> <Container chart={chart}>
<Block position="top-4 right-3 left-3"> <Block position="top-4 right-3 left-3">
<div className="flex items-center text-xs"> <div className="flex items-center text-xs">
<div className="grow" /> <div className="grow" />

44
src/widgets/glances/metrics/sensor.jsx
Unescape View File

@ -15,6 +15,7 @@ const pointsLimit = 15;
export default function Component({ service }) { export default function Component({ service }) {
const { t } = useTranslation(); const { t } = useTranslation();
const { widget } = service; const { widget } = service;
const { chart } = widget;
const [, sensorName] = widget.metric.split(':'); const [, sensorName] = widget.metric.split(':');
const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit)); const [dataPoints, setDataPoints] = useState(new Array(pointsLimit).fill({ value: 0 }, 0, pointsLimit));
@ -51,37 +52,46 @@ export default function Component({ service }) {
} }
return ( return (
<Container> <Container chart={chart}>
<Chart { chart && (
dataPoints={dataPoints} <Chart
label={[sensorData.unit]} dataPoints={dataPoints}
max={sensorData.critical} label={[sensorData.unit]}
formatter={(value) => t("common.number", { max={sensorData.critical}
value, formatter={(value) => t("common.number", {
})} value,
/> })}
/>
)}
{sensorData && !error && ( {sensorData && !error && (
<Block position="bottom-3 left-3"> <Block position="bottom-3 left-3">
{sensorData.warning && ( {sensorData.warning && chart && (
<div className="text-xs opacity-50"> <div className="text-xs opacity-50">
{sensorData.warning}{sensorData.unit} {t("glances.warn")} {t("glances.warn")} {sensorData.warning} {sensorData.unit}
</div> </div>
)} )}
{sensorData.critical && ( {sensorData.critical && (
<div className="text-xs opacity-50"> <div className="text-xs opacity-50">
{sensorData.critical} {sensorData.unit} {t("glances.crit")} {t("glances.crit")} {sensorData.critical} {sensorData.unit}
</div> </div>
)} )}
</Block> </Block>
)} )}
<Block position="bottom-3 right-3"> <Block position="bottom-3 right-3">
<div className="text-xs opacity-75"> <div className="text-xs opacity-50">
{t("common.number", { {sensorData.warning && !chart && (
value: sensorData.value, <>
})} {sensorData.unit} {t("glances.warn")} {sensorData.warning} {sensorData.unit}
</div> </>
)}
</div>
<div className="text-xs opacity-75">
{t("glances.temp")} {t("common.number", {
value: sensorData.value,
})} {sensorData.unit}
</div>
</Block> </Block>
</Container> </Container>
); );

Write Preview
Loading…
Cancel
Save