Clean this up

This commit is contained in:
shamoon 2024-06-22 07:19:02 -07:00
parent cbb74a9772
commit 4dde54a631
11 changed files with 97 additions and 95 deletions

View File

@ -1,19 +1,10 @@
import { useContext } from "react";
import { useTranslation } from "next-i18next";
import { SettingsContext } from "utils/contexts/settings";
import Error from "./error"
export default function Container({ service, children, chart = true, error = false, className = "" }) {
const { t } = useTranslation();
const { settings } = useContext(SettingsContext);
const hideErrors = (settings.hideErrors || service.widget.hide_errors)
export default function Container({ children, chart = true, className = "" }) {
return (
<div>
{children}
<div className={`absolute top-0 right-0 bottom-0 left-0 overflow-clip pointer-events-none ${className}`} />
{chart && <div className="h-[68px] overflow-clip" />}
{!chart && <div className="h-[16px] overflow-clip" />}
{error && !hideErrors && <Error />}
</div>
);
}

View File

@ -1,7 +1,17 @@
import { useTranslation } from "next-i18next";
import { useContext } from "react";
export default function Error() {
import { SettingsContext } from "utils/contexts/settings";
export default function Error({ service, error }) {
const { t } = useTranslation();
const { settings } = useContext(SettingsContext);
return <div className="absolute bottom-2 left-2 z-20 text-red-400 text-xs opacity-75">{t("widget.api_error")}</div>;
}
if (error) {
if (settings.hideErrors || service?.widget.hide_errors) {
return null;
}
return <div className="absolute bottom-2 left-2 z-20 text-red-400 text-xs opacity-75">{t("widget.api_error")}</div>;
}
}

View File

@ -4,6 +4,7 @@ import { useTranslation } from "next-i18next";
import Container from "../components/container";
import Block from "../components/block";
import Error from "../components/error";
import useWidgetAPI from "utils/proxy/use-widget-api";
@ -39,22 +40,22 @@ export default function Component({ service }) {
if (error) {
return (
<Container service={service} chart={chart} error={error}>
<Error error={error} />
<Container chart={chart}>
<Error error={error} service={service} />
</Container>
);
}
if (!data) {
return (
<Container service={service} chart={chart}>
<Container chart={chart}>
<Block position="bottom-3 left-3">-</Block>
</Container>
);
}
return (
<Container service={service} chart={chart}>
<Container chart={chart}>
{chart && (
<Chart
dataPoints={dataPoints}

View File

@ -2,6 +2,7 @@ import dynamic from "next/dynamic";
import { useState, useEffect } from "react";
import { useTranslation } from "next-i18next";
import Error from "../components/error";
import Container from "../components/container";
import Block from "../components/block";
@ -34,7 +35,7 @@ export default function Component({ service }) {
}));
useEffect(() => {
if (data) {
if (data && !data.error) {
const diskData = data.find((item) => item.disk_name === diskName);
setDataPoints((prevDataPoints) => {
@ -51,16 +52,18 @@ export default function Component({ service }) {
setRatePoints(calculateRates(dataPoints));
}, [dataPoints]);
if (error) {
if (error || (data && data.error)) {
const finalError = error || data.error;
return (
<Container service={service} chart={chart} error={error}>
<Container chart={chart}>
<Error error={finalError} service={service} />
</Container>
);
}
if (!data) {
return (
<Container service={service} chart={chart}>
<Container chart={chart}>
<Block position="bottom-3 left-3">-</Block>
</Container>
);
@ -70,7 +73,7 @@ export default function Component({ service }) {
if (!diskData) {
return (
<Container service={service} chart={chart}>
<Container chart={chart}>
<Block position="bottom-3 left-3">-</Block>
</Container>
);
@ -80,7 +83,7 @@ export default function Component({ service }) {
const currentRate = diskRates[diskRates.length - 1];
return (
<Container service={service} chart={chart}>
<Container chart={chart}>
{chart && (
<ChartDual
dataPoints={ratePoints}

View File

@ -1,5 +1,6 @@
import { useTranslation } from "next-i18next";
import Error from "../components/error";
import Container from "../components/container";
import Block from "../components/block";
@ -20,14 +21,15 @@ export default function Component({ service }) {
if (error) {
return (
<Container service={service} chart={chart} error={error}>
<Container chart={chart}>
<Error error={error} service={service} />
</Container>
);
}
if (!data) {
return (
<Container service={service} chart={chart}>
<Container chart={chart}>
<Block position="bottom-3 left-3">-</Block>
</Container>
);
@ -37,14 +39,14 @@ export default function Component({ service }) {
if (!fsData) {
return (
<Container service={service} chart={chart}>
<Container chart={chart}>
<Block position="bottom-3 left-3">-</Block>
</Container>
);
}
return (
<Container service={service} chart={chart}>
<Container chart={chart}>
{chart && (
<div className="absolute top-0 left-0 right-0 bottom-0">
<div

View File

@ -2,6 +2,7 @@ import dynamic from "next/dynamic";
import { useState, useEffect } from "react";
import { useTranslation } from "next-i18next";
import Error from "../components/error";
import Container from "../components/container";
import Block from "../components/block";
@ -25,43 +26,34 @@ export default function Component({ service }) {
});
useEffect(() => {
if (data) {
if (data && !data.error) {
// eslint-disable-next-line eqeqeq
const gpuData = data.find((item) => item[item.key] == gpuName);
if (data.hasOwnProperty("error")) {
return (
<Container service={service} chart={chart} error={true}>
</Container>
)
if (gpuData) {
setDataPoints((prevDataPoints) => {
const newDataPoints = [...prevDataPoints, { a: gpuData.mem, b: gpuData.proc }];
if (newDataPoints.length > pointsLimit) {
newDataPoints.shift();
}
return newDataPoints;
});
}
else {
// eslint-disable-next-line eqeqeq
const gpuData = data.find((item) => item[item.key] == gpuName);
if (gpuData) {
setDataPoints((prevDataPoints) => {
const newDataPoints = [...prevDataPoints, { a: gpuData.mem, b: gpuData.proc }];
if (newDataPoints.length > pointsLimit) {
newDataPoints.shift();
}
return newDataPoints;
});
}
}
}
}, [data, gpuName, pointsLimit]);
if (error) {
if (error || (data && data.error)) {
const finalError = error || data.error;
return (
<Container service={service} chart={chart} error={error}>
<Container chart={chart}>
<Error error={finalError} service={service} />
</Container>
);
}
if (!data) {
return (
<Container service={service} chart={chart}>
<Container chart={chart}>
<Block position="bottom-3 left-3">-</Block>
</Container>
);
@ -72,14 +64,14 @@ export default function Component({ service }) {
if (!gpuData) {
return (
<Container service={service} chart={chart}>
<Container chart={chart}>
<Block position="bottom-3 left-3">-</Block>
</Container>
);
}
return (
<Container service={service} chart={chart}>
<Container chart={chart}>
{chart && (
<ChartDual
dataPoints={dataPoints}

View File

@ -1,5 +1,6 @@
import { useTranslation } from "next-i18next";
import Error from "../components/error";
import Container from "../components/container";
import Block from "../components/block";
@ -83,47 +84,39 @@ export default function Component({ service }) {
refreshInterval: defaultSystemInterval,
});
if (quicklookError) {
if (quicklookError || (quicklookData && quicklookData.error)) {
const qlError = quicklookError || quicklookData.error;
return (
<Container service={service} chart={chart} error={quicklookError}>
<Container chart={chart}>
<Error error={qlError} service={service} />
</Container>
);
}
if (systemError) {
return (
<Container service={service} chart={chart} error={systemError}>
<Container chart={chart}>
<Error error={systemError} service={service} />
</Container>
);
}
const dataCharts = [];
if (quicklookData) {
if (quicklookData.hasOwnProperty("error")) {
const quicklookError = true;
return (
<Container service={service} chart={chart} error={quicklookError} >
</Container>
);
}
else {
quicklookData.percpu.forEach((cpu, index) => {
dataCharts.push({
name: `CPU ${index}`,
cpu: cpu.total,
mem: quicklookData.mem,
swap: quicklookData.swap,
proc: quicklookData.cpu,
});
quicklookData.percpu.forEach((cpu, index) => {
dataCharts.push({
name: `CPU ${index}`,
cpu: cpu.total,
mem: quicklookData.mem,
swap: quicklookData.swap,
proc: quicklookData.cpu,
});
}
});
}
return (
<Container service={service} chart={chart} 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">
{quicklookData && quicklookData.cpu_name && chart && (
<div className="text-[0.6rem] opacity-50">{quicklookData.cpu_name}</div>

View File

@ -2,6 +2,7 @@ import dynamic from "next/dynamic";
import { useState, useEffect } from "react";
import { useTranslation } from "next-i18next";
import Error from "../components/error";
import Container from "../components/container";
import Block from "../components/block";
@ -38,21 +39,22 @@ export default function Component({ service }) {
if (error) {
return (
<Container service={service} chart={chart} error={error}>
<Container chart={chart}>
<Error error={error} service={service} />
</Container>
);
}
if (!data) {
return (
<Container service={service} chart={chart}>
<Container chart={chart}>
<Block position="bottom-3 left-3">-</Block>
</Container>
);
}
return (
<Container service={service} chart={chart}>
<Container chart={chart}>
{chart && (
<ChartDual
dataPoints={dataPoints}

View File

@ -2,6 +2,7 @@ import dynamic from "next/dynamic";
import { useState, useEffect } from "react";
import { useTranslation } from "next-i18next";
import Error from "../components/error";
import Container from "../components/container";
import Block from "../components/block";
@ -30,7 +31,7 @@ export default function Component({ service }) {
});
useEffect(() => {
if (data) {
if (data && !data.error) {
const interfaceData = data.find((item) => item[item.key] === interfaceName);
if (interfaceData) {
@ -51,16 +52,18 @@ export default function Component({ service }) {
}
}, [data, interfaceName, pointsLimit, rxKey, txKey]);
if (error) {
if (error || (data && data.error)) {
const finalError = error || data.error;
return (
<Container service={service} chart={chart} error={error}>
<Container chart={chart}>
<Error error={finalError} service={service} />
</Container>
);
}
if (!data) {
return (
<Container service={service} chart={chart}>
<Container chart={chart}>
<Block position="bottom-3 left-3">-</Block>
</Container>
);
@ -70,14 +73,14 @@ export default function Component({ service }) {
if (!interfaceData) {
return (
<Container service={service} chart={chart}>
<Container chart={chart}>
<Block position="bottom-3 left-3">-</Block>
</Container>
);
}
return (
<Container service={service} chart={chart}>
<Container chart={chart}>
{chart && (
<ChartDual
dataPoints={dataPoints}

View File

@ -1,5 +1,6 @@
import { useTranslation } from "next-i18next";
import Error from "../components/error";
import Container from "../components/container";
import Block from "../components/block";
@ -31,14 +32,15 @@ export default function Component({ service }) {
if (error) {
return (
<Container service={service} chart={chart} error={true}>
<Container chart={chart}>
<Error error={error} />
</Container>
);
}
if (!data) {
return (
<Container service={service} chart={chart}>
<Container chart={chart}>
<Block position="bottom-3 left-3">-</Block>
</Container>
);
@ -47,7 +49,7 @@ export default function Component({ service }) {
data.splice(chart ? 5 : 1);
return (
<Container service={service} chart={chart}>
<Container chart={chart}>
<Block position="top-4 right-3 left-3">
<div className="flex items-center text-xs">
<div className="grow" />

View File

@ -2,6 +2,7 @@ import dynamic from "next/dynamic";
import { useState, useEffect } from "react";
import { useTranslation } from "next-i18next";
import Error from "../components/error";
import Container from "../components/container";
import Block from "../components/block";
@ -25,7 +26,7 @@ export default function Component({ service }) {
});
useEffect(() => {
if (data) {
if (data && !data.error) {
const sensorData = data.find((item) => item.label === sensorName);
setDataPoints((prevDataPoints) => {
const newDataPoints = [...prevDataPoints, { value: sensorData.value }];
@ -37,16 +38,18 @@ export default function Component({ service }) {
}
}, [data, sensorName, pointsLimit]);
if (error) {
if (error || (data && data.error)) {
const finalError = error || data.error;
return (
<Container service={service} chart={chart} error={error}>
<Container chart={chart}>
<Error error={finalError} service={service} />
</Container>
);
}
if (!data) {
return (
<Container service={service} chart={chart}>
<Container chart={chart}>
<Block position="bottom-3 left-3">-</Block>
</Container>
);
@ -56,14 +59,14 @@ export default function Component({ service }) {
if (!sensorData) {
return (
<Container service={service} chart={chart}>
<Container chart={chart}>
<Block position="bottom-3 left-3">-</Block>
</Container>
);
}
return (
<Container service={service} chart={chart}>
<Container chart={chart}>
{chart && (
<Chart
dataPoints={dataPoints}