Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SIMSBIOHUB-627: Frontend Changes #1413

Closed
wants to merge 3 commits into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 12 additions & 1 deletion app/src/constants/i18n.ts
Original file line number Diff line number Diff line change
Expand Up @@ -477,6 +477,17 @@ export const TelemetryDeviceKeyFileI18N = {
'An error has occurred while attempting to download the device key file, please try again. If the error persists, please contact your system administrator.'
};

export const TelemetryDeviceI18N = {
cancelTitle: 'Discard changes and exit?',
cancelText: 'Any changes you have made will not be saved. Do you want to proceed?',
createErrorTitle: 'Error Creating Device',
createErrorText:
'An error has occurred while attempting to create your device. Please try again. If the error persists, please contact your system administrator.',
editErrorTitle: 'Error Editing Device',
editErrorText:
'An error has occurred while attempting to edit your device. Please try again. If the error persists, please contact your system administrator.'
};

export const CreateAnimalDeploymentI18N = {
cancelTitle: 'Discard changes and exit?',
cancelText: 'Any changes you have made will not be saved. Do you want to proceed?',
Expand All @@ -490,7 +501,7 @@ export const EditAnimalDeploymentI18N = {
cancelText: 'Any changes you have made will not be saved. Do you want to proceed?',
createErrorTitle: 'Error Creating Deployment',
createErrorText:
'An error has occurred while attempting to create your deployment. Please try again. If the error persists, please contact your system administrator.'
'An error has occurred while attempting to edit your deployment. Please try again. If the error persists, please contact your system administrator.'
};

export const SurveyExportI18N = {
Expand Down
13 changes: 5 additions & 8 deletions app/src/contexts/telemetryDataContext.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { useBiohubApi } from 'hooks/useBioHubApi';
import useDataLoader, { DataLoader } from 'hooks/useDataLoader';
import { WarningSchema } from 'interfaces/useBioHubApi.interface';
import { IAllTelemetry, IAnimalDeployment } from 'interfaces/useTelemetryApi.interface';
import { IAllTelemetry } from 'interfaces/useTelemetryApi.interface';
import { TelemetryDeployment } from 'interfaces/useTelemetryDeploymentApi.interface';
import { createContext, PropsWithChildren, useMemo } from 'react';

/**
Expand All @@ -14,15 +14,12 @@ export interface ITelemetryDataContext {
/**
* The Data Loader used to load deployments.
*
* @type {DataLoader<[project_id: number, survey_id: number], { deployments: IAnimalDeployment[]; bad_deployments: WarningSchema<{ sims_deployment_id: number; bctw_deployment_id: string }>[] }, unknown>}
* @type {DataLoader<[project_id: number, survey_id: number], { deployments: TelemetryDeployment[] }>[] }, unknown>}
* @memberof ITelemetryDataContext
*/
deploymentsDataLoader: DataLoader<
[project_id: number, survey_id: number],
{
deployments: IAnimalDeployment[];
bad_deployments: WarningSchema<{ sims_deployment_id: number; bctw_deployment_id: string }>[];
},
{ deployments: TelemetryDeployment[] },
unknown
>;
/**
Expand All @@ -39,7 +36,7 @@ export const TelemetryDataContext = createContext<ITelemetryDataContext | undefi
export const TelemetryDataContextProvider = (props: PropsWithChildren<Record<never, any>>) => {
const biohubApi = useBiohubApi();

const deploymentsDataLoader = useDataLoader(biohubApi.survey.getDeploymentsInSurvey);
const deploymentsDataLoader = useDataLoader(biohubApi.telemetryDeployment.getDeploymentsInSurvey);
const telemetryDataLoader = useDataLoader(biohubApi.telemetry.getAllTelemetryByDeploymentIds);

const telemetryDataContext: ITelemetryDataContext = useMemo(() => {
Expand Down
8 changes: 4 additions & 4 deletions app/src/contexts/telemetryTableContext.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ import { v4 as uuidv4 } from 'uuid';
import { RowValidationError, TableValidationModel } from '../components/data-grid/DataGridValidationAlert';

export interface IManualTelemetryRecord {
deployment_id: string;
deployment_id: number;
device_id: string;
latitude: number;
longitude: number;
Expand Down Expand Up @@ -684,14 +684,14 @@ export const TelemetryTableContextProvider = (props: IAllTelemetryTableContextPr

const rows: IManualTelemetryTableRow[] = telemetryData.map((item) => {
return {
id: item.id,
id: item.deployment_id,
deployment_id: item.deployment_id,
device_id: item.device_id,
device_id: item.serial,
latitude: item.latitude,
longitude: item.longitude,
date: dayjs(item.acquisition_date).format('YYYY-MM-DD'),
time: dayjs(item.acquisition_date).format('HH:mm:ss'),
telemetry_type: item.telemetry_type
telemetry_type: item.vendor
};
});

Expand Down
18 changes: 15 additions & 3 deletions app/src/features/surveys/SurveyRouter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,11 @@ const SurveyRouter: React.FC = () => {
{/* Animals Routes */}
<RouteWithTitle path="/admin/projects/:id/surveys/:survey_id/animals" title={getTitle('Manage Animals')}>
<ProjectRoleRouteGuard
validProjectPermissions={[PROJECT_PERMISSION.COORDINATOR, PROJECT_PERMISSION.COLLABORATOR]}
validProjectPermissions={[
PROJECT_PERMISSION.COORDINATOR,
PROJECT_PERMISSION.COLLABORATOR,
PROJECT_PERMISSION.OBSERVER
]}
validSystemRoles={[SYSTEM_ROLE.SYSTEM_ADMIN, SYSTEM_ROLE.DATA_ADMINISTRATOR]}>
<DialogContextProvider>
<AnimalPageContextProvider>
Expand All @@ -59,7 +63,11 @@ const SurveyRouter: React.FC = () => {
{/* Telemetry Routes */}
<RouteWithTitle path="/admin/projects/:id/surveys/:survey_id/telemetry" title={getTitle('Manage Telemetry')}>
<ProjectRoleRouteGuard
validProjectPermissions={[PROJECT_PERMISSION.COORDINATOR, PROJECT_PERMISSION.COLLABORATOR]}
validProjectPermissions={[
PROJECT_PERMISSION.COORDINATOR,
PROJECT_PERMISSION.COLLABORATOR,
PROJECT_PERMISSION.OBSERVER
]}
validSystemRoles={[SYSTEM_ROLE.SYSTEM_ADMIN, SYSTEM_ROLE.DATA_ADMINISTRATOR]}>
<AnimalPageContextProvider>
<TelemetryDataContextProvider>
Expand All @@ -75,7 +83,11 @@ const SurveyRouter: React.FC = () => {
path="/admin/projects/:id/surveys/:survey_id/observations"
title={getTitle('Manage Observations')}>
<ProjectRoleRouteGuard
validProjectPermissions={[PROJECT_PERMISSION.COORDINATOR, PROJECT_PERMISSION.COLLABORATOR]}
validProjectPermissions={[
PROJECT_PERMISSION.COORDINATOR,
PROJECT_PERMISSION.COLLABORATOR,
PROJECT_PERMISSION.OBSERVER
]}
validSystemRoles={[SYSTEM_ROLE.SYSTEM_ADMIN, SYSTEM_ROLE.DATA_ADMINISTRATOR]}>
<SurveyObservationPage />
</ProjectRoleRouteGuard>
Expand Down
44 changes: 32 additions & 12 deletions app/src/features/surveys/sampling-information/SamplingRouter.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -22,18 +22,30 @@ export const SamplingRouter = () => {
exact
path="/admin/projects/:id/surveys/:survey_id/sampling"
title={getTitle('Manage Sampling Information')}>
<DialogContextProvider>
<SamplingSiteManagePage />
</DialogContextProvider>
<ProjectRoleRouteGuard
validProjectPermissions={[
PROJECT_PERMISSION.COORDINATOR,
PROJECT_PERMISSION.COLLABORATOR,
PROJECT_PERMISSION.OBSERVER
]}
validSystemRoles={[SYSTEM_ROLE.SYSTEM_ADMIN, SYSTEM_ROLE.DATA_ADMINISTRATOR]}>
<DialogContextProvider>
<SamplingSiteManagePage />
</DialogContextProvider>
</ProjectRoleRouteGuard>
</RouteWithTitle>

<RouteWithTitle
exact
path="/admin/projects/:id/surveys/:survey_id/sampling/create"
title={getTitle('Create Sampling Sites')}>
<DialogContextProvider>
<CreateSamplingSitePage />
</DialogContextProvider>
<ProjectRoleRouteGuard
validProjectPermissions={[PROJECT_PERMISSION.COORDINATOR, PROJECT_PERMISSION.COLLABORATOR]}
validSystemRoles={[SYSTEM_ROLE.SYSTEM_ADMIN, SYSTEM_ROLE.DATA_ADMINISTRATOR]}>
<DialogContextProvider>
<CreateSamplingSitePage />
</DialogContextProvider>
</ProjectRoleRouteGuard>
</RouteWithTitle>

<RouteWithTitle
Expand All @@ -53,18 +65,26 @@ export const SamplingRouter = () => {
exact
path="/admin/projects/:id/surveys/:survey_id/sampling/techniques/create"
title={getTitle('Create Technique')}>
<DialogContextProvider>
<CreateTechniquePage />
</DialogContextProvider>
<ProjectRoleRouteGuard
validProjectPermissions={[PROJECT_PERMISSION.COORDINATOR, PROJECT_PERMISSION.COLLABORATOR]}
validSystemRoles={[SYSTEM_ROLE.SYSTEM_ADMIN, SYSTEM_ROLE.DATA_ADMINISTRATOR]}>
<DialogContextProvider>
<CreateTechniquePage />
</DialogContextProvider>
</ProjectRoleRouteGuard>
</RouteWithTitle>

<RouteWithTitle
exact
path="/admin/projects/:id/surveys/:survey_id/sampling/techniques/:method_technique_id/edit"
title={getTitle('Edit Technique')}>
<DialogContextProvider>
<EditTechniquePage />
</DialogContextProvider>
<ProjectRoleRouteGuard
validProjectPermissions={[PROJECT_PERMISSION.COORDINATOR, PROJECT_PERMISSION.COLLABORATOR]}
validSystemRoles={[SYSTEM_ROLE.SYSTEM_ADMIN, SYSTEM_ROLE.DATA_ADMINISTRATOR]}>
<DialogContextProvider>
<EditTechniquePage />
</DialogContextProvider>
</ProjectRoleRouteGuard>
</RouteWithTitle>
</Switch>
);
Expand Down
43 changes: 15 additions & 28 deletions app/src/features/surveys/telemetry/TelemetryPage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,40 +16,28 @@ export const TelemetryPage = () => {
const projectContext = useProjectContext();
const surveyContext = useSurveyContext();

const deploymentsDataLoader = useDataLoader(biohubApi.survey.getDeploymentsInSurvey);
const telemetryDataLoader = useDataLoader(biohubApi.telemetry.getAllTelemetryByDeploymentIds);
const deploymentDataLoader = useDataLoader((projectId: number, surveyId: number) =>
biohubApi.telemetryDeployment.getDeploymentsInSurvey(projectId, surveyId)
);

const telemetryDataLoader = useDataLoader((projectId: number, surveyId: number) =>
biohubApi.telemetry.getTelemetryForSurvey(projectId, surveyId)
);

/**
* Load the deployments and telemetry data when the page is initially loaded.
*/
useEffect(() => {
deploymentsDataLoader.load(surveyContext.projectId, surveyContext.surveyId).then((deployments) => {
const deploymentIds = deployments?.deployments.map((deployment) => deployment.bctw_deployment_id) ?? [];

if (!deploymentIds.length) {
// No deployments, no telemetry to load
return;
}

telemetryDataLoader.load(deploymentIds);
});
}, [deploymentsDataLoader, surveyContext.projectId, surveyContext.surveyId, telemetryDataLoader]);
deploymentDataLoader.load(surveyContext.projectId, surveyContext.surveyId);
telemetryDataLoader.load(surveyContext.projectId, surveyContext.surveyId);
}, [deploymentDataLoader, telemetryDataLoader, surveyContext.projectId, surveyContext.surveyId]);

/**
* Refresh the data for the telemetry page.
*/
const refreshData = async () => {
deploymentsDataLoader.refresh(surveyContext.projectId, surveyContext.surveyId).then((deployments) => {
const deploymentIds = deployments?.deployments.map((deployment) => deployment.bctw_deployment_id) ?? [];

if (!deploymentIds.length) {
// No deployments, refresh (clear) the telemetry data
telemetryDataLoader.clearData();
return;
}

telemetryDataLoader.refresh(deploymentIds);
});
deploymentDataLoader.refresh(surveyContext.projectId, surveyContext.surveyId);
telemetryDataLoader.refresh(surveyContext.projectId, surveyContext.surveyId);
};

if (!surveyContext.surveyDataLoader.data || !projectContext.projectDataLoader.data) {
Expand All @@ -76,9 +64,8 @@ export const TelemetryPage = () => {
{/* Telematry List */}
<Box flex="0 0 auto" position="relative" width="400px">
<SurveyDeploymentList
deployments={deploymentsDataLoader.data?.deployments ?? []}
badDeployments={deploymentsDataLoader.data?.bad_deployments ?? []}
isLoading={deploymentsDataLoader.isLoading}
deployments={deploymentDataLoader.data?.deployments ?? []}
isLoading={deploymentDataLoader.isLoading}
refreshRecords={() => {
refreshData();
}}
Expand All @@ -88,7 +75,7 @@ export const TelemetryPage = () => {
<Box flex="1 1 auto" position="relative">
<TelemetryTableContextProvider
isLoading={telemetryDataLoader.isLoading}
telemetryData={telemetryDataLoader.data ?? []}
telemetryData={telemetryDataLoader.data?.telemetry ?? []}
refreshRecords={async () => {
refreshData();
}}>
Expand Down
56 changes: 51 additions & 5 deletions app/src/features/surveys/telemetry/TelemetryRouter.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,11 @@
import { ProjectRoleRouteGuard } from 'components/security/RouteGuards';
import { PROJECT_PERMISSION, SYSTEM_ROLE } from 'constants/roles';
import { DialogContextProvider } from 'contexts/dialogContext';
import { CreateDeploymentPage } from 'features/surveys/telemetry/deployments/create/CreateDeploymentPage';
import { EditDeploymentPage } from 'features/surveys/telemetry/deployments/edit/EditDeploymentPage';
import { CreateDeploymentPage } from 'features/surveys/telemetry/manage/deployments/create/CreateDeploymentPage';
import { EditDeploymentPage } from 'features/surveys/telemetry/manage/deployments/edit/EditDeploymentPage';
import { CreateDevicePage } from 'features/surveys/telemetry/manage/devices/create/CreateDevicePage';
import { EditDevicePage } from 'features/surveys/telemetry/manage/devices/edit/EditDevicePage';
import { DevicesAndDeploymentsManagePage } from 'features/surveys/telemetry/manage/DevicesAndDeploymentsManagePage';
import { TelemetryPage } from 'features/surveys/telemetry/TelemetryPage';
import { Redirect, Switch } from 'react-router';
import RouteWithTitle from 'utils/RouteWithTitle';
Expand All @@ -27,7 +30,11 @@ export const TelemetryRouter = () => {
path="/admin/projects/:id/surveys/:survey_id/telemetry/details"
title={getTitle('Telemetry')}>
<ProjectRoleRouteGuard
validProjectPermissions={[PROJECT_PERMISSION.COORDINATOR, PROJECT_PERMISSION.COLLABORATOR]}
validProjectPermissions={[
PROJECT_PERMISSION.COORDINATOR,
PROJECT_PERMISSION.COLLABORATOR,
PROJECT_PERMISSION.OBSERVER
]}
validSystemRoles={[SYSTEM_ROLE.SYSTEM_ADMIN, SYSTEM_ROLE.DATA_ADMINISTRATOR]}>
<DialogContextProvider>
<TelemetryPage />
Expand All @@ -37,7 +44,46 @@ export const TelemetryRouter = () => {

<RouteWithTitle
exact
path="/admin/projects/:id/surveys/:survey_id/telemetry/deployment/create"
path="/admin/projects/:id/surveys/:survey_id/telemetry/manage"
title={getTitle('Devices and Deployments')}>
<ProjectRoleRouteGuard
validProjectPermissions={[PROJECT_PERMISSION.COORDINATOR, PROJECT_PERMISSION.COLLABORATOR]}
validSystemRoles={[SYSTEM_ROLE.SYSTEM_ADMIN, SYSTEM_ROLE.DATA_ADMINISTRATOR]}>
<DialogContextProvider>
<DevicesAndDeploymentsManagePage />
</DialogContextProvider>
</ProjectRoleRouteGuard>
</RouteWithTitle>

<RouteWithTitle
exact
path="/admin/projects/:id/surveys/:survey_id/telemetry/manage/device/create"
title={getTitle('Add Device')}>
<ProjectRoleRouteGuard
validProjectPermissions={[PROJECT_PERMISSION.COORDINATOR, PROJECT_PERMISSION.COLLABORATOR]}
validSystemRoles={[SYSTEM_ROLE.SYSTEM_ADMIN, SYSTEM_ROLE.DATA_ADMINISTRATOR]}>
<DialogContextProvider>
<CreateDevicePage />
</DialogContextProvider>
</ProjectRoleRouteGuard>
</RouteWithTitle>

<RouteWithTitle
exact
path="/admin/projects/:id/surveys/:survey_id/telemetry/manage/device/:device_id/edit"
title={getTitle('Edit Device')}>
<ProjectRoleRouteGuard
validProjectPermissions={[PROJECT_PERMISSION.COORDINATOR, PROJECT_PERMISSION.COLLABORATOR]}
validSystemRoles={[SYSTEM_ROLE.SYSTEM_ADMIN, SYSTEM_ROLE.DATA_ADMINISTRATOR]}>
<DialogContextProvider>
<EditDevicePage />
</DialogContextProvider>
</ProjectRoleRouteGuard>
</RouteWithTitle>

<RouteWithTitle
exact
path="/admin/projects/:id/surveys/:survey_id/telemetry/manage/deployment/create"
title={getTitle('Add Deployment')}>
<ProjectRoleRouteGuard
validProjectPermissions={[PROJECT_PERMISSION.COORDINATOR, PROJECT_PERMISSION.COLLABORATOR]}
Expand All @@ -50,7 +96,7 @@ export const TelemetryRouter = () => {

<RouteWithTitle
exact
path="/admin/projects/:id/surveys/:survey_id/telemetry/deployment/:deployment_id/edit"
path="/admin/projects/:id/surveys/:survey_id/telemetry/manage/deployment/:deployment_id/edit"
title={getTitle('Edit Deployment')}>
<ProjectRoleRouteGuard
validProjectPermissions={[PROJECT_PERMISSION.COORDINATOR, PROJECT_PERMISSION.COLLABORATOR]}
Expand Down
Loading
Loading