brandxtech/frontend
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

added the usage api and put the device wizard back in the device page

Browse source
This commit is contained in:
csawatzky 2025-04-23 14:03:53 -06:00
parent 11b523e8e5
commit a95bccbc22
6 changed files with 136 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

42
src/device/DeviceViewer.tsx
View file

@ -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<boolean>(false);
const [device, setDevice] = useState<DeviceModel>(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(() => {

2
src/hooks/index.ts
View file

@ -20,7 +20,7 @@ export {
// useSecurity,
useSnackbar,
// useTagAPI,
// useUsageAPI,
useUsageAPI,
useUserAPI
} from "providers";
export * from "./useDebounce";

15
src/pages/Device.tsx
View file

@ -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() {
</li>
<Divider component="li" />
<ListItem>
<Grid container direction="row" spacing={2}>
<Grid container direction="row" spacing={2} width={"100%"}>
{isMobile ? (
<>
<Grid size={{ xs: 12 }}>
{/* <DeviceWizard
<DeviceWizard
device={device}
//permissions={permissions}
components={Array.from(components.values())}
refreshCallback={load}
/> */}
refreshCallback={loadDevice}
/>
</Grid>
{diagnosticComponents.map(comp => (
<Grid size={{ xs: 12 }} key={comp.key()}>
@ -382,12 +383,12 @@ export default function DevicePage() {
) : (
<>
<Grid size={{ xs: 6, sm: 6, lg: 4, xl: 3 }} >
{/* <DeviceWizard
<DeviceWizard
device={device}
//permissions={permissions}
components={Array.from(components.values())}
refreshCallback={load}
/> */}
refreshCallback={loadDevice}
/>
</Grid>
<Grid size={{ xs: 6, sm: 6, lg: 8, xl: 9 }} >
<Grid container direction="row" spacing={2}>

2
src/providers/index.ts
View file

@ -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,

8
src/providers/pond/pond.tsx
View file

@ -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<any>) {
<TaskProvider>
<DataDogProvider>
<ContractProvider>
{children}
<UsageProvider>
{children}
</UsageProvider>
</ContractProvider>
</DataDogProvider>
</TaskProvider>
@ -147,5 +150,6 @@ export {
usePreferenceAPI,
useTaskAPI,
useDataDogProxyAPI,
useContractAPI
useContractAPI,
useUsageAPI
};

99
src/providers/pond/usageAPI.tsx Normal file
View file

@ -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<any>;
getUsages: (deviceIDs: number[], startDate?: any) => Promise<any>;
listUsages: (startDate?: any) => Promise<any>;
}
export const UsageAPIContext = createContext<IUsageAPIContext>({} 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<Props>) {
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 (
<UsageAPIContext.Provider
value={{
getUsage,
getUsages,
listUsages
}}>
{children}
</UsageAPIContext.Provider>
);
}
export const useUsageAPI = () => useContext(UsageAPIContext);