homepage/src/components/widgets/unifi_console/unifi_console.jsx

import { useTranslation } from "next-i18next/pages";
import { BiCheckCircle, BiError, BiNetworkChart, BiWifi, BiXCircle } from "react-icons/bi";
import { MdSettingsEthernet } from "react-icons/md";
import { SiUbiquiti } from "react-icons/si";

import Container from "../widget/container";
import Error from "../widget/error";
import PrimaryText from "../widget/primary_text";
import Raw from "../widget/raw";
import WidgetIcon from "../widget/widget_icon";

import useWidgetAPI from "utils/proxy/use-widget-api";

export default function Widget({ options }) {
  const { t } = useTranslation();

  const widgetOptions = { ...options, service_group: "unifi_console", service_name: "unifi_console" };
  const { data: statsData, error: statsError } = useWidgetAPI(widgetOptions, "stat/sites", { index: options.index });

  if (statsError) {
    return <Error options={widgetOptions} />;
  }

  const defaultSite = options.site
    ? statsData?.data.find((s) => s.desc === options.site)
    : statsData?.data?.find((s) => s.name === "default");

  if (!defaultSite) {
    return (
      <Container options={widgetOptions} additionalClassNames="information-widget-unifi-console">
        <PrimaryText>{t("unifi.wait")}</PrimaryText>
        <WidgetIcon icon={SiUbiquiti} />
      </Container>
    );
  }

  const getHealth = (subsystem) => {
    const health = defaultSite.health.find((item) => item.subsystem === subsystem) ?? { status: "unknown" };
    return { ...health, up: health.status === "ok", show: health.status !== "unknown" };
  };
  const wan = getHealth("wan");
  const lan = getHealth("lan");
  const wlan = getHealth("wlan");
  const name = wan.gw_name ?? defaultSite.desc;
  const uptime = wan["gw_system-stats"] ? wan["gw_system-stats"].uptime : null;

  const dataEmpty = !(wan.show || lan.show || wlan.show || uptime);

  return (
    <Container options={widgetOptions} additionalClassNames="information-widget-unifi-console">
      <Raw>
        <div className="flex-none flex flex-row items-center mr-3 py-1.5">
          <div className="flex flex-col">
            <div className="flex flex-row ml-3 mb-0.5">
              <SiUbiquiti className="text-theme-800 dark:text-theme-200 w-3 h-3 mr-1" />
              <div className="text-theme-800 dark:text-theme-200 text-xs font-bold flex flex-row justify-between">
                {name}
              </div>
            </div>
            {dataEmpty && (
              <div className="flex flex-row ml-3 text-[8px] justify-between">
                <div className="flex flex-row items-center justify-end">
                  <div className="flex flex-row">
                    <BiError className="w-4 h-4 text-theme-800 dark:text-theme-200" />
                    <span className="text-theme-800 dark:text-theme-200 text-xs">{t("unifi.empty_data")}</span>
                  </div>
                </div>
              </div>
            )}
            <div className="flex flex-row ml-3 text-[10px] justify-between">
              {uptime && (
                <div className="flex flex-row" title={t("unifi.uptime")}>
                  <div className="pr-0.5 text-theme-800 dark:text-theme-200">
                    {t("common.number", {
                      value: uptime / 86400,
                      maximumFractionDigits: 1,
                    })}
                  </div>
                  <div className="pr-1 text-theme-800 dark:text-theme-200">{t("unifi.days")}</div>
                </div>
              )}
              {wan.show && (
                <div className="flex flex-row">
                  <div className="pr-1 text-theme-800 dark:text-theme-200">{t("unifi.wan")}</div>
                  {wan.up ? (
                    <BiCheckCircle className="text-theme-800 dark:text-theme-200 h-4 w-3" />
                  ) : (
                    <BiXCircle className="text-theme-800 dark:text-theme-200 h-4 w-3" />
                  )}
                </div>
              )}
              {!wan.show && !lan.show && wlan.show && (
                <div className="flex flex-row">
                  <div className="pr-1 text-theme-800 dark:text-theme-200">{t("unifi.wlan")}</div>
                  {wlan.up ? (
                    <BiCheckCircle className="text-theme-800 dark:text-theme-200 h-4 w-3" />
                  ) : (
                    <BiXCircle className="text-theme-800 dark:text-theme-200 h-4 w-3" />
                  )}
                </div>
              )}
              {!wan.show && !wlan.show && lan.show && (
                <div className="flex flex-row">
                  <div className="pr-1 text-theme-800 dark:text-theme-200">{t("unifi.lan")}</div>
                  {lan.up ? (
                    <BiCheckCircle className="text-theme-800 dark:text-theme-200 h-4 w-3" />
                  ) : (
                    <BiXCircle className="text-theme-800 dark:text-theme-200 h-4 w-3" />
                  )}
                </div>
              )}
            </div>
          </div>
          <div className="flex flex-col">
            {wlan.show && (
              <div className="flex flex-row ml-3 py-0.5">
                <BiWifi className="text-theme-800 dark:text-theme-200 w-4 h-4 mr-1" />
                <div
                  className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between"
                  title={t("unifi.users")}
                >
                  <div className="pr-0.5">
                    {t("common.number", {
                      value: wlan.num_user,
                      maximumFractionDigits: 0,
                    })}
                  </div>
                </div>
              </div>
            )}
            {lan.show && (
              <div className="flex flex-row ml-3 pb-0.5">
                <MdSettingsEthernet className="text-theme-800 dark:text-theme-200 w-4 h-4 mr-1" />
                <div
                  className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between"
                  title={t("unifi.users")}
                >
                  <div className="pr-0.5">
                    {t("common.number", {
                      value: lan.num_user,
                      maximumFractionDigits: 0,
                    })}
                  </div>
                </div>
              </div>
            )}
            {((wlan.show && !lan.show) || (!wlan.show && lan.show)) && (
              <div className="flex flex-row ml-3 py-0.5">
                <BiNetworkChart className="text-theme-800 dark:text-theme-200 w-4 h-4 mr-1" />
                <div
                  className="text-theme-800 dark:text-theme-200 text-xs flex flex-row justify-between"
                  title={t("unifi.devices")}
                >
                  <div className="pr-0.5">
                    {t("common.number", {
                      value: wlan.show ? wlan.num_adopted : lan.num_adopted,
                      maximumFractionDigits: 0,
                    })}
                  </div>
                </div>
              </div>
            )}
          </div>
        </div>
      </Raw>
    </Container>
  );
}