Simplify CurrentUptime

Author: AuroraLS3

Plan/react/dashboard/src/components/datapoint/CurrentUptime.tsx

@@ -1,16 +1,9 @@
 import React from 'react';
 import {useTranslation} from "react-i18next";
 import {faPowerOff} from "@fortawesome/free-solid-svg-icons";
-import {faQuestionCircle} from "@fortawesome/free-regular-svg-icons";
-import Datapoint, {Datapoint as DatapointComponent} from "./Datapoint";
-import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
-import FormattedTime from "../text/FormattedTime.jsx";
-import {isNumber} from "../../util/isNumber.js";
 import {GenericFilter} from "../../dataHooks/model/GenericFilter";
-import {useAuth} from "../../hooks/authenticationHook";
-import {calculatePermission, useDatapointQuery} from "./QueryDatapoint";
+import {QueryDatapoint} from "./QueryDatapoint";
 import {DatapointType} from "../../dataHooks/model/datapoint/Datapoint";
-import {DatapointLoader} from "../navigation/Loader";
 
 type Props = {
     filter: GenericFilter;
@@ -19,31 +12,10 @@ type Props = {
 const CurrentUptime = ({filter}: Props) => {
     const {t} = useTranslation();
 
-    const {hasPermission} = useAuth();
-    const isAllowed = hasPermission(calculatePermission(DatapointType.CURRENT_UPTIME, undefined, filter))
-    const {data, isFetching, error} = useDatapointQuery(isAllowed, DatapointType.CURRENT_UPTIME, filter);
-
-    if (!isAllowed) return null;
-
-    const infoBubble = error?.status === 404
-        ? <span title={t('html.description.noUptimeCalculation')}><FontAwesomeIcon icon={faQuestionCircle}/></span>
-        : undefined;
-
-    if (error && error.status !== 404) {
-        console.error(error);
-        return <DatapointComponent
-            icon={faPowerOff} color={'uptime'}
-            name={t('html.label.currentUptime')}
-            value={error.message}
-        />
-    }
-
     return (
-        <Datapoint icon={faPowerOff} color={'uptime'}
-                   name={t('html.label.currentUptime')}
-                   value={(data || error?.status === 404) && !isFetching ? (isNumber(data?.value) &&
-                       <FormattedTime timeMs={data?.value}/> || 'plugin.generic.unavailable') : <DatapointLoader/>}
-                   valueLabel={infoBubble}/>
+        <QueryDatapoint dataType={DatapointType.CURRENT_UPTIME} icon={faPowerOff} color={'uptime'}
+                        name={t('html.label.currentUptime')} filter={filter}
+                        fallbackUnavailableExplanation={t('html.description.noUptimeCalculation')}/>
     )
 };
 

Plan/react/dashboard/src/components/datapoint/QueryDatapoint.tsx

@@ -10,7 +10,7 @@ import {GenericFilter} from "../../dataHooks/model/GenericFilter";
 import {useNavigation} from "../../hooks/navigationHook";
 import {useQuery} from "@tanstack/react-query";
 import {queryRetry} from "../../dataHooks/queryRetry";
-import {useEffect} from "react";
+import React, {useEffect} from "react";
 import {Datapoint as DatapointComponent, DatapointProps} from "./Datapoint";
 import FormattedTime from "../text/FormattedTime";
 import {DatapointLoader} from "../navigation/Loader";
@@ -22,11 +22,14 @@ import {useTranslation} from "react-i18next";
 import {DateObj, isDateObj} from "../../dataHooks/model/datapoint/DateObj";
 import FormattedDate from "../text/FormattedDate";
 import BigTrend from "../trend/BigTrend";
+import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
+import {faQuestionCircle} from "@fortawesome/free-regular-svg-icons";
 
 type Props<K extends DatapointType> = {
     dataType: K;
     filter?: GenericFilter;
     permission?: string;
+    fallbackUnavailableExplanation?: string
 } & Omit<DatapointProps, 'value'>;
 
 type ValueProps<K extends DatapointType> = Omit<Props<K>, 'color' | 'name' | 'icon'>;
@@ -67,6 +70,8 @@ function Format<K extends DatapointType>({value, formatType}: FormatProps<K>) {
             return <FormattedTime timeMs={value}/>
         case "PERCENTAGE":
             return formatDecimals(value as number * 100) + '%'
+        case "DECIMAL":
+            return formatDecimals(value as number)
         case "SPECIAL":
             if (isOutOf(value)) {
                 return <FormattedOutOf outOf={value as OutOf}/>
@@ -94,13 +99,27 @@ export function calculatePermission(dataType: DatapointType, permission?: string
     return 'data.network.' + asPermission;
 }
 
-export function QueryDatapoint<K extends DatapointType>({permission, dataType, filter, ...props}: Props<K>) {
+export function QueryDatapoint<K extends DatapointType>({
+                                                            permission,
+                                                            dataType,
+                                                            filter,
+                                                            fallbackUnavailableExplanation,
+                                                            ...props
+                                                        }: Props<K>) {
     const {hasPermission} = useAuth();
     const allowed = hasPermission(calculatePermission(dataType, permission, filter));
     const {data, isFetching, error} = useDatapointQuery(allowed, dataType, filter);
 
     if (!allowed) return null;
     if (error) {
+        if (error.status === 404) {
+            return <DatapointComponent
+                {...props}
+                value={'plugin.generic.unavailable'}
+                valueLabel={<span
+                    title={fallbackUnavailableExplanation}><FontAwesomeIcon icon={faQuestionCircle}/></span>}
+            />
+        }
         console.error(error);
         return <DatapointComponent
             {...props}