Clean this up
This commit is contained in:
parent
cbb74a9772
commit
4dde54a631
@ -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>
|
||||
);
|
||||
}
|
||||
|
||||
@ -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>;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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>
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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}
|
||||
|
||||
@ -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" />
|
||||
|
||||
@ -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}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user