From a95bccbc22a848fcf50ff63f7041b4888e6b4b41 Mon Sep 17 00:00:00 2001 From: csawatzky Date: Wed, 23 Apr 2025 14:03:53 -0600 Subject: [PATCH] added the usage api and put the device wizard back in the device page --- src/device/DeviceViewer.tsx | 42 +++++++------- src/hooks/index.ts | 2 +- src/pages/Device.tsx | 15 ++--- src/providers/index.ts | 2 +- src/providers/pond/pond.tsx | 8 ++- src/providers/pond/usageAPI.tsx | 99 +++++++++++++++++++++++++++++++++ 6 files changed, 136 insertions(+), 32 deletions(-) create mode 100644 src/providers/pond/usageAPI.tsx diff --git a/src/device/DeviceViewer.tsx b/src/device/DeviceViewer.tsx index b366f4d..52c9693 100644 --- a/src/device/DeviceViewer.tsx +++ b/src/device/DeviceViewer.tsx @@ -12,7 +12,7 @@ import { useDeviceAPI, useInteractionsAPI, useSnackbar, - //useUsageAPI, + useUsageAPI, useUserAPI } from "hooks"; import { cloneDeep } from "lodash"; @@ -74,7 +74,7 @@ export default function Device(props: Props) { const deviceAPI = useDeviceAPI(); const componentAPI = useComponentAPI(); const interactionsAPI = useInteractionsAPI(); - //const usageAPI = useUsageAPI(); + const usageAPI = useUsageAPI(); const userAPI = useUserAPI(); const [isLoading, setIsLoading] = useState(false); const [device, setDevice] = useState(DeviceModel.create()); @@ -147,25 +147,25 @@ export default function Device(props: Props) { error(err); }) .finally(() => setIsLoading(false)); - // usageAPI - // .getUsage(deviceID, moment().subtract(1, "days")) - // .then((res: any) => { - // let usage = res.data; - // if (usage) { - // let rCellularStatus = "active"; - // let rCellularUsage = 0; - // let sessions: any[] = []; - // if (usage.sessions) { - // sessions = usage.sessions.filter((session: any) => { - // return moment(session.begin).isAfter(moment().subtract(1, "days")); - // }); - // } - // sessions.forEach((session: any) => (rCellularUsage += Number(or(session.bytes, 0)))); - // setCellularStatus(rCellularStatus); - // setCellularUsage(rCellularUsage); - // } - // }) - // .catch(err => {}); + usageAPI + .getUsage(deviceID, moment().subtract(1, "days")) + .then((res: any) => { + let usage = res.data; + if (usage) { + let rCellularStatus = "active"; + let rCellularUsage = 0; + let sessions: any[] = []; + if (usage.sessions) { + sessions = usage.sessions.filter((session: any) => { + return moment(session.begin).isAfter(moment().subtract(1, "days")); + }); + } + sessions.forEach((session: any) => (rCellularUsage += Number(or(session.bytes, 0)))); + setCellularStatus(rCellularStatus); + setCellularUsage(rCellularUsage); + } + }) + .catch(err => {}); }, [componentAPI, props.device, deviceID, error, interactionsAPI, /*usageAPI*/, userAPI, user, as]); useEffect(() => { diff --git a/src/hooks/index.ts b/src/hooks/index.ts index 554b174..0bd5baf 100644 --- a/src/hooks/index.ts +++ b/src/hooks/index.ts @@ -20,7 +20,7 @@ export { // useSecurity, useSnackbar, // useTagAPI, -// useUsageAPI, + useUsageAPI, useUserAPI } from "providers"; export * from "./useDebounce"; diff --git a/src/pages/Device.tsx b/src/pages/Device.tsx index ab0a586..dd634f5 100644 --- a/src/pages/Device.tsx +++ b/src/pages/Device.tsx @@ -20,6 +20,7 @@ import { sameComponentID, sortComponents } from "pbHelpers/Component"; import { isController } from "pbHelpers/ComponentType"; import { or } from "utils"; import ComponentDiagnostics from "component/ComponentDiagnostics"; +import DeviceWizard from "device/DeviceWizard"; export default function DevicePage() { const deviceAPI = useDeviceAPI() @@ -358,16 +359,16 @@ export default function DevicePage() { - + {isMobile ? ( <> - {/* */} + refreshCallback={loadDevice} + /> {diagnosticComponents.map(comp => ( @@ -382,12 +383,12 @@ export default function DevicePage() { ) : ( <> - {/* */} + refreshCallback={loadDevice} + /> diff --git a/src/providers/index.ts b/src/providers/index.ts index dafcf34..62f551b 100644 --- a/src/providers/index.ts +++ b/src/providers/index.ts @@ -30,7 +30,7 @@ export { useTeamAPI, useImagekitAPI, useTaskAPI, //TODO: update api with resolve, reject - // useUsageAPI, + useUsageAPI,//TODO: update api with resolve, reject useUserAPI, // useStripeAPI, useDataDogProxyAPI, diff --git a/src/providers/pond/pond.tsx b/src/providers/pond/pond.tsx index bcaeaa5..6f5f1f0 100644 --- a/src/providers/pond/pond.tsx +++ b/src/providers/pond/pond.tsx @@ -32,6 +32,7 @@ import PreferenceProvider, {usePreferenceAPI} from "./preferenceAPI"; import TaskProvider, { useTaskAPI } from "./taskAPI"; import DataDogProvider, { useDataDogProxyAPI } from "./datadogProxyAPI"; import ContractProvider, { useContractAPI } from "./contractAPI"; +import UsageProvider, { useUsageAPI } from "./usageAPI"; // import NoteProvider from "providers/noteAPI"; export const pondURL = (partial: string, demo: boolean = false): string => { @@ -80,7 +81,9 @@ export default function PondProvider(props: PropsWithChildren) { - {children} + + {children} + @@ -147,5 +150,6 @@ export { usePreferenceAPI, useTaskAPI, useDataDogProxyAPI, - useContractAPI + useContractAPI, + useUsageAPI }; diff --git a/src/providers/pond/usageAPI.tsx b/src/providers/pond/usageAPI.tsx new file mode 100644 index 0000000..92de655 --- /dev/null +++ b/src/providers/pond/usageAPI.tsx @@ -0,0 +1,99 @@ +import { useHTTP } from "hooks"; +import moment from "moment"; +import { useGlobalState } from "providers"; +import { createContext, PropsWithChildren, useContext } from "react"; +import { pondURL } from "./pond"; + +export interface IUsageAPIContext { + getUsage: ( + deviceID: number | string, + startDate?: any, + demo?: boolean, + keys?: string[], + types?: string[] + ) => Promise; + getUsages: (deviceIDs: number[], startDate?: any) => Promise; + listUsages: (startDate?: any) => Promise; +} + +export const UsageAPIContext = createContext({} as IUsageAPIContext); + +function usageQuery(deviceIDs?: number[], startDate?: any): string { + let query = ""; + let symbol: "?" | "&" = "?"; + if (deviceIDs && deviceIDs.length > 0) { + query = query.concat(symbol + "ids=" + deviceIDs.join(",")); + symbol = "&"; + } + if (startDate) { + let start = moment(startDate).toISOString(); + query = query.concat(symbol + "start=" + start); + symbol = "&"; + } + return query; +} + +interface Props {} + +export default function UsageProvider(props: PropsWithChildren) { + const { children } = props; + const { get } = useHTTP(); + const [{ as }] = useGlobalState(); + + const getUsage = ( + deviceID: number | string, + startDate?: any, + demo: boolean = false, + keys?: string[], + types?: string[] + ) => { + if (as && !(types && types.length > 0 && types[0] === "team")) + return get( + pondURL( + "/devices/" + + deviceID + + "/usage" + + usageQuery(undefined, startDate) + + "&as=" + + as + + (keys ? "&keys=" + keys.toString() : "") + + (types ? "&types=" + types.toString() : ""), + demo + ) + ); + return get( + pondURL( + "/devices/" + + deviceID + + "/usage" + + usageQuery(undefined, startDate) + + (keys ? "&keys=" + keys.toString() : "") + + (types ? "&types=" + types.toString() : ""), + demo + ) + ); + }; + + const getUsages = (deviceIDs: number[], startDate?: any) => { + if (as) return get(pondURL("/usage/devices" + usageQuery(deviceIDs, startDate) + "&as=" + as)); + return get(pondURL("/usage/devices" + usageQuery(deviceIDs, startDate))); + }; + + const listUsages = (startDate?: any) => { + if (as) return get(pondURL("/usage" + usageQuery(undefined, startDate) + "&as=" + as)); + return get(pondURL("/usage" + usageQuery(undefined, startDate))); + }; + + return ( + + {children} + + ); +} + +export const useUsageAPI = () => useContext(UsageAPIContext);