diff --git a/public/locales/en/common.json b/public/locales/en/common.json index dc4fcd00..6d9b76a7 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -708,6 +708,8 @@ "running": "Running", "stopped": "Stopped", "passed": "Passed", - "failed": "Failed" + "failed": "Failed", + "zfsHits": "Hits", + "zfsMisses": "Misses" } } diff --git a/src/widgets/openmediavault/component.jsx b/src/widgets/openmediavault/component.jsx index bd34a750..b71d936f 100644 --- a/src/widgets/openmediavault/component.jsx +++ b/src/widgets/openmediavault/component.jsx @@ -1,6 +1,7 @@ import ServicesGetStatus from "./methods/services_get_status"; import SmartGetList from "./methods/smart_get_list"; import DownloaderGetDownloadList from "./methods/downloader_get_downloadlist"; +import ZfsGetStats from "./methods/zfs_get_stats"; export default function Component({ service }) { switch (service.widget.method) { @@ -10,6 +11,8 @@ export default function Component({ service }) { return ; case "downloader.getDownloadList": return ; + case "zfs.getStats": + return ; default: return null; } diff --git a/src/widgets/openmediavault/methods/zfs_get_stats.jsx b/src/widgets/openmediavault/methods/zfs_get_stats.jsx new file mode 100644 index 00000000..ec8b7a25 --- /dev/null +++ b/src/widgets/openmediavault/methods/zfs_get_stats.jsx @@ -0,0 +1,80 @@ +import dynamic from "next/dynamic"; +import { useState, useEffect } from "react"; +import { useTranslation } from "next-i18next"; + +import Error from "../../glances/components/error"; +import Container from "../../glances/components/container"; +import Block from "../../glances/components/block"; + +import useWidgetAPI from "utils/proxy/use-widget-api"; + +const ChartDual = dynamic(() => import("../../glances/components/chart_dual"), { ssr: false }); + +const POINTS_LIMIT = 15; + +export default function Component({ service }) { + const { t } = useTranslation(); + const { widget } = service; + + const [dataPoints, setDataPoints] = useState(new Array(POINTS_LIMIT).fill({ value: 0 }, 0, POINTS_LIMIT)); + + const { data, error } = useWidgetAPI(widget, null, { + refreshInterval: 5000, + }); + + useEffect(() => { + if (data?.response) { + const { hits, misses } = data.response; + const a = parseInt(hits, 10); + const b = parseInt(misses, 10); + + setDataPoints((prevDataPoints) => { + const newDataPoints = [...prevDataPoints, { a, b }]; + if (newDataPoints.length > POINTS_LIMIT) { + newDataPoints.shift(); + } + return newDataPoints; + }); + } + }, [data]); + + if (error) { + return ( + + + + ); + } + + if (!data) { + return ( + + - + + ); + } + + const { hits, misses, hitsMisses, ratio } = data.response; + const hitsRatio = Math.round(ratio); + const missesRatio = 100 - hitsRatio; + + return ( + + value} + /> + + + {`${t("resources.total")}: ${hitsMisses}`} + + {`${t("openmediavault.zfsHits")}: ${hits} (${hitsRatio}%)`} + + + + {`${t("openmediavault.zfsMisses")}: ${misses} (${missesRatio}%)`} + + + ); +}