- {plots.map((plot, i) => {
- if (i < 5) return createReportRow(project, plot);
- })}
+
+ {plots.map((plot, _i) => createReportRow(project, plot))}
) : (
diff --git a/src/app-pages/project/dashboard/cards/instrumentStatusCard.jsx b/src/app-pages/project/dashboard/cards/instrumentStatusCard.jsx
index 0d5b1f59..b23fcb8f 100644
--- a/src/app-pages/project/dashboard/cards/instrumentStatusCard.jsx
+++ b/src/app-pages/project/dashboard/cards/instrumentStatusCard.jsx
@@ -22,6 +22,8 @@ const InstrumentStatusCard = connect(
const instrumentsByStatus = reduceInstrumentsByStatus(instruments);
const dataValues = Object.values(instrumentsByStatus);
+
+ // NOTE: Possibly remove yellow -> gray
return (
+ No Report Configurations in this project.
+
+
+ Click the button below to add a new Report Configuration.
+
+ doModalOpen(NewReportConfigContent, {}, 'lg')}
+ />
+
+
+);
+
+const ReportConfigsCard = connect(
+ 'doModalOpen',
+ 'selectProjectReportConfigurations',
+ 'selectProjectsByRoute',
+ ({
+ doModalOpen,
+ projectReportConfigurations: reportConfigs,
+ projectsByRoute: project,
+ }) => {
+ const [toastId, setToastId] = useState(undefined);
+
+ const { id: projectId } = project;
+ const { data: jobDetails, mutate: initReportJobMutator } = useInitializeReportDownload(projectId);
+ const { report_config_id: reportConfigId, id: jobId } = jobDetails || {};
+
+ const { data: currentJob } = useGetReportStatus({ projectId, reportConfigId, jobId }, {
+ enabled: !!((projectId && reportConfigId && jobId) && (['INIT', 'IN_PROGRESS'].includes(jobDetails?.status))),
+ refetchInterval: 3000,
+ });
+ const { file_key, progress } = currentJob || {};
+
+ if (file_key && progress === 100) {
+ tUpdateSuccess(
+ toastId,
+ 'Your file is ready, click this message to open!',
+ {
+ autoClose: false,
+ onClose: () => {
+ downloadFinalReport({ projectId, reportConfigId, jobId });
+ }
+ }
+ );
+ }
+
+ const beginDownloadReportJob = id => {
+ const tId = toast.loading('Getting your report ready for download. This may take a minute...');
+ setToastId(tId);
+ initReportJobMutator(id);
+ };
+
+ return (
+
+
+
+
+ Report Configurations
+
+
+ doModalOpen(NewReportConfigContent, {}, 'lg')}>
+ Create Report Configuation
+
+
+
+
+
+
+ {reportConfigs.length ? (
+ (
+ doModalOpen(NewReportConfigContent, { isEdit: true, data: row }, 'lg' )}
+ />
+ ),
+ }, {
+ key: 'creator_username',
+ header: 'Created By',
+ isSortable: true,
+ }, {
+ key: 'actions',
+ header: '',
+ render: (row) => (
+ <>
+ {downloadEnabled ? (
+
+
diff --git a/src/app-pages/project/dashboard/modals/newReportConfigContent.jsx b/src/app-pages/project/dashboard/modals/newReportConfigContent.jsx
new file mode 100644
index 00000000..d1c79d86
--- /dev/null
+++ b/src/app-pages/project/dashboard/modals/newReportConfigContent.jsx
@@ -0,0 +1,277 @@
+import React, { useState } from 'react';
+import { connect } from 'redux-bundler-react';
+import { FormControl, Input, InputLabel, MenuItem, Select, Switch } from '@mui/material';
+import ReactDatePicker from 'react-datepicker';
+
+import * as Modal from '../../../../app-components/modal';
+import Card from '../../../../app-components/card';
+import { DateTime } from 'luxon';
+
+const timePatterns = ['', 'Custom', '1 month', '1 year', '5 years', 'Lifetime'];
+
+const requiredFields = {
+ name: '',
+ description: '',
+ plot_configs: [],
+};
+
+const initFormState = (initValue = {}) => {
+ const {
+ name = '',
+ description = '',
+ plot_configs = [],
+ global_overrides = {
+ date_range: {
+ enabled: false,
+ value: '',
+ customStart: null, // YYYY-MM-DD YYYY-MM-DD
+ customEnd: null,
+ },
+ show_masked: {
+ enabled: false,
+ value: true,
+ },
+ show_nonvalidated: {
+ enabled: false,
+ value: true,
+ }
+ },
+ } = initValue;
+
+ if (!timePatterns.includes(global_overrides.date_range.value)) {
+ const [start, end] = String(global_overrides.date_range.value).split(' ');
+ global_overrides.date_range.value = 'Custom';
+ global_overrides.date_range.customStart = start;
+ global_overrides.date_range.customEnd = end;
+ }
+
+ return {
+ name,
+ description,
+ plot_configs: plot_configs.map(el => el.id),
+ global_overrides,
+ };
+};
+
+const setGlobalOverrides = (prev, key, subkey, value) => ({
+ ...prev,
+ global_overrides: {
+ ...prev.global_overrides,
+ [key]: {
+ ...prev.global_overrides[key],
+ [subkey]: value,
+ },
+ },
+})
+
+const NewReportConfigContent = connect(
+ 'doCreateNewReportConfiguration',
+ 'doUpdateReportConfiguration',
+ 'selectBatchPlotConfigurationsItems',
+ ({
+ doCreateNewReportConfiguration,
+ doUpdateReportConfiguration,
+ batchPlotConfigurationsItems: plots,
+ isEdit = false,
+ data = {},
+ }) => {
+ const [formState, setFormState] = useState(initFormState(isEdit ? data : {}));
+
+ const handleInputChange = (key, val) => {
+ setFormState(prev => ({ ...prev, [key]: val }));
+ };
+
+ const isSaveEnabled = () => {
+ const requiredKeys = Object.keys(requiredFields);
+
+ return requiredKeys.every(key => {
+ if (Array.isArray(formState[key])) {
+ return formState[key].length > 0;
+ } else {
+ return !!formState[key];
+ }
+ });
+ };
+
+ const saveReportConfig = () => {
+ if (isEdit) {
+ doUpdateReportConfiguration({
+ id: data.id,
+ ...formState,
+ plot_configs: formState.plot_configs?.map(c => plots.find(plot => plot.id === c)),
+ });
+ } else {
+ doCreateNewReportConfiguration({
+ ...formState,
+ plot_configs: formState.plot_configs?.map(c => plots.find(plot => plot.id === c)),
+ });
+ }
+ };
+
+ return (
+
+
+
+ Report Name
+
+
+ Description
+
+
+ Batch Plot Configurations
+ handleInputChange('plot_configs', e.target.value)}
+ >
+ {plots?.map(el => {
+ const { id, name } = el;
+ return (
+ {name}
+ );
+ })}
+
+
+
+
+
+ Date Range
+
setFormState(prev => setGlobalOverrides(prev, 'date_range', 'enabled', isChecked))}
+ />
+
+ Presets
+ setFormState(prev => setGlobalOverrides(prev, 'date_range', 'value', e.target.value))}
+ sx={{ width: '250px' }}
+ >
+ Custom
+ One (1) Month
+ One (1) Year
+ Five (5) Years
+ Lifetime
+
+
+ {formState?.global_overrides?.date_range?.value === 'Custom' && (
+
+
+ Start Date
+ setFormState(prev => setGlobalOverrides(prev, 'date_range', 'customStart', DateTime.fromJSDate(date).toFormat('yyyy-MM-dd')))}
+ />
+
+
+ End Date
+ setFormState(prev => setGlobalOverrides(prev, 'date_range', 'customEnd', DateTime.fromJSDate(date).toFormat('yyyy-MM-dd')))}
+ />
+
+
setFormState(prev => setGlobalOverrides(prev, 'show_masked', 'enabled', isChecked))}
+ />
+
+ Select Display Option
+ setFormState(prev => setGlobalOverrides(prev, 'show_masked', 'value', Boolean(e.target.value)))}
+ sx={{ width: '250px' }}
+ >
+ Hide Masked Values
+ Show Masked Values
+
+
+ setFormState(prev => setGlobalOverrides(prev, 'show_nonvalidated', 'enabled', isChecked))}
+ />
+
+ Select Display Option
+ setFormState(prev => setGlobalOverrides(prev, 'show_nonvalidated', 'value', Boolean(e.target.value)))}
+ sx={{ width: '250px' }}
+ >
+ Hide Non-Validated Values
+ Show Non-Validated Values
+
+
+
+
+
+
+ );
+ },
+);
+
+export default NewReportConfigContent;
diff --git a/src/app-pages/project/data-loggers/modals/editMappingRowModal.jsx b/src/app-pages/project/data-loggers/modals/editMappingRowModal.jsx
index 6539a322..954af06f 100644
--- a/src/app-pages/project/data-loggers/modals/editMappingRowModal.jsx
+++ b/src/app-pages/project/data-loggers/modals/editMappingRowModal.jsx
@@ -15,6 +15,7 @@ const generateTimeseriesOptions = (timeseries = {}, selectedInstrument) => {
const tIds = Object.keys(timeseries);
return tIds.map(t => {
+ if (timeseries[t].is_computed) return null;
if (timeseries[t].instrument_id === selectedInstrument) {
return ({
label: timeseries[t].name,
diff --git a/src/app-pages/project/index.jsx b/src/app-pages/project/index.jsx
index 14b5c3e4..c58133f2 100644
--- a/src/app-pages/project/index.jsx
+++ b/src/app-pages/project/index.jsx
@@ -49,7 +49,7 @@ const Project = connect(
}, {
title:
} />,
content:
,
- paddingSmall: true,
+ paddingSmall: false,
uri: '#explorer',
}, {
title:
} />,
@@ -64,7 +64,7 @@ const Project = connect(
paddingSmall: true,
uri: '#uploader',
}, {
- title:
} />,
+ title:
} />,
content:
,
paddingSmall: true,
uri: '#batch-plotting',
diff --git a/src/app-pages/signup/signup.jsx b/src/app-pages/signup/signup.jsx
deleted file mode 100644
index fb922b3b..00000000
--- a/src/app-pages/signup/signup.jsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import React, { useRef } from 'react';
-import { connect } from 'redux-bundler-react';
-
-import Card from '../../app-components/card';
-import ProfileForm from '../../app-components/profile-form';
-
-export default connect(
- 'doProfileSave',
- 'doUpdateRelativeUrl',
- 'selectAuthIsLoggedIn',
- 'selectProfileActive',
- ({
- doProfileSave,
- doUpdateRelativeUrl,
- authIsLoggedIn: isLoggedIn,
- profileActive: profile,
- }) => {
- // If user already has a profile or is not logged in,
- // i.e. navigated directly to "/signup", redirect them back to home.
- if (profile || !isLoggedIn) {
- doUpdateRelativeUrl('/');
- }
-
- const form = useRef();
- const handleSave = () => {
- if (form.current) {
- form.current.save();
- doUpdateRelativeUrl('/');
- }
- };
-
- return (
-
-
-
-
-
- Create your profile to continue
-
-
- This information will be used to display your identity
- associated with changes you make within this system and to
- facilitate sending notifications. We wont send you any
- notifications unless you or an admin subscribe to alerts.
-
-
-
-
-
-
- );
- }
-);
diff --git a/src/app-services/collections/cwms-timeseries.ts b/src/app-services/collections/cwms-timeseries.ts
new file mode 100644
index 00000000..4f6f2d57
--- /dev/null
+++ b/src/app-services/collections/cwms-timeseries.ts
@@ -0,0 +1,113 @@
+import { QueryClient, useMutation, useQuery } from '@tanstack/react-query';
+
+import { apiGet, apiPost, apiPut, buildQueryParams } from '../fetch-helpers';
+
+type CwmsTimeseries = {
+ name: string,
+ instrument_id: string,
+ unit_id: string,
+ parameter_id: string,
+ cwms_office_id: string,
+ cwms_timeseries_id: string,
+ cwms_extent_earliest_time: string,
+};
+
+interface OfficeParams {
+ like?: string,
+ hasData?: boolean,
+}
+
+interface CwmsTimeseriesParams {
+ office: string;
+}
+
+interface CwmsTimeseriesMeasurementParams {
+ name: string,
+ office?: string,
+ page?: string,
+ begin?: string,
+ end?: string,
+}
+
+interface MidasCwmsPostTimeseriesParams {
+ projectId: string,
+ instrumentId: string,
+ body: CwmsTimeseries[],
+}
+
+interface MidasCwmsPutTimeseriesParams {
+ projectId: string,
+ instrumentId: string,
+ timeseriesId: string,
+ body: CwmsTimeseries,
+}
+
+export const useGetCwmsOffices = ({ hasData = true }: OfficeParams, opts: ClientQueryOptions) => {
+ const uri = `/offices${buildQueryParams({ hasData })}`;
+
+ return useQuery({
+ queryKey: [`cwmsOffices`, hasData],
+ queryFn: () => apiGet(uri, 'CWMS'),
+ ...opts,
+ });
+};
+
+export const useGetCwmsTimeseries = ({ office }: CwmsTimeseriesParams, opts: ClientQueryOptions) => {
+ const uri = `/catalog/TIMESERIES?office=${office}&page-size=5000`;
+
+ return useQuery({
+ queryKey: [`cwmsTimeseries`, office],
+ queryFn: () => apiGet(uri, 'CWMS'),
+ ...opts,
+ });
+};
+
+export const useGetCwmsTimeseriesMeasurements = ({ name, office, page, begin, end }: CwmsTimeseriesMeasurementParams, opts: ClientQueryOptions) => {
+ const uri = `/timeseries${buildQueryParams({ name, office, page, begin, end })}`;
+
+ return useQuery({
+ queryKey: [`cwmsTimeseriesMeasurements`, name, office, page, begin, end],
+ queryFn: () => apiGet(uri, 'CWMS'),
+ ...opts,
+ });
+};
+
+export const useGetMidasCwmsTimeseries = ({ projectId, instrumentId }: MidasCwmsPostTimeseriesParams, opts: ClientQueryOptions) => {
+ const uri = `/projects/${projectId}/instruments/${instrumentId}/timeseries/cwms`;
+
+ return useQuery({
+ queryKey: [`midasCwmsTimeseries`, projectId, instrumentId],
+ queryFn: () => apiGet(uri),
+ ...opts,
+ });
+};
+
+export const usePostMidasCwmsTimeseries = (client: QueryClient) => {
+ return useMutation({
+ mutationFn: ({ projectId, instrumentId, body }: MidasCwmsPostTimeseriesParams) => {
+ const uri = `/projects/${projectId}/instruments/${instrumentId}/timeseries/cwms`;
+
+ return apiPost(uri, body);
+ },
+ onSuccess: (_body, _, _ctx) => {
+ client.invalidateQueries({
+ queryKey: ['midasCwmsTimeseries'],
+ })
+ },
+ });
+};
+
+export const usePutMidasCwmsTimeseries = (client: QueryClient) => {
+ return useMutation({
+ mutationFn: ({ projectId, instrumentId, timeseriesId, body }: MidasCwmsPutTimeseriesParams) => {
+ const uri = `/projects/${projectId}/instruments/${instrumentId}/timeseries/cwms/${timeseriesId}`;
+
+ return apiPut(uri, body);
+ },
+ onSuccess: (_body, _, _ctx) => {
+ client.invalidateQueries({
+ queryKey: ['midasCwmsTimeseries'],
+ })
+ },
+ });
+};
diff --git a/src/app-services/collections/instrument-timeseries-measurements.ts b/src/app-services/collections/instrument-timeseries-measurements.ts
new file mode 100644
index 00000000..d89879a9
--- /dev/null
+++ b/src/app-services/collections/instrument-timeseries-measurements.ts
@@ -0,0 +1,67 @@
+import { useQuery } from '@tanstack/react-query';
+
+import { apiGet } from '../fetch-helpers';
+
+interface InstrumentParams {
+ instrumentId: string,
+ instrumentType: string,
+}
+
+interface BullseyeParams {
+ projectId: string,
+ plotConfigId: string,
+}
+
+interface ContourParams extends BullseyeParams {
+ time: string,
+}
+
+interface TimestampParams extends BullseyeParams {
+ before?: string,
+ after?: string,
+}
+
+export const useGetContourMeasurements = ({ projectId, plotConfigId, time }: ContourParams, opts: ClientQueryOptions) => {
+ const uri = `/projects/${projectId}/plot_configs/contour_plots/${plotConfigId}/measurements?time=${time}`;
+
+ return useQuery({
+ queryKey: [`contourMeasurements`, projectId, plotConfigId, time],
+ queryFn: () => apiGet(uri),
+ ...opts,
+ });
+};
+
+export const useGetBullseyeMeasurements = ({ projectId, plotConfigId, before, after }: TimestampParams, opts: ClientQueryOptions) => {
+ const uri = `/projects/${projectId}/plot_configs/bullseye_plots/${plotConfigId}/measurements?before=${before}&after=${after}`;
+
+ return useQuery({
+ queryKey: [`contourMeasurements`, projectId, plotConfigId, before, after],
+ queryFn: () => apiGet(uri),
+ ...opts,
+ });
+};
+
+export const useGetMeasurementsByInstrumentType = ({ instrumentId, instrumentType }: InstrumentParams, opts: ClientQueryOptions) => {
+ const typeMap = {
+ 'SAA': 'saa',
+ 'IPI': 'ipi',
+ } as Record
;
+
+ const uri = `/instruments/${typeMap[instrumentType]}/${instrumentId}/measurements`;
+
+ return useQuery({
+ queryKey: [`instrumentMeasurementsType`, instrumentId, instrumentType],
+ queryFn: () => apiGet(uri),
+ ...opts,
+ });
+};
+
+export const useGetMeasurementTimestamps = ({ projectId, plotConfigId, before, after }: TimestampParams, opts: ClientQueryOptions) => {
+ const uri = `/projects/${projectId}/plot_configs/contour_plots/${plotConfigId}/times?before=${before}&after=${after}`;
+
+ return useQuery({
+ queryKey: [`measurementTimestamps`, projectId, plotConfigId, before, after],
+ queryFn: () => apiGet(uri),
+ ...opts,
+ });
+};
diff --git a/src/app-services/collections/report-configuration-download.ts b/src/app-services/collections/report-configuration-download.ts
new file mode 100644
index 00000000..4e9f5354
--- /dev/null
+++ b/src/app-services/collections/report-configuration-download.ts
@@ -0,0 +1,57 @@
+import { useMutation, useQuery } from '@tanstack/react-query';
+import { toast } from 'react-toastify';
+
+import { apiGet, apiGetBlob, apiPost } from '../fetch-helpers';
+
+interface QueryParams {
+ projectId: string,
+ reportConfigId: string,
+ jobId: string,
+}
+
+export const downloadFinalReport = ({ projectId, reportConfigId, jobId }: QueryParams) => {
+ const uri = `/projects/${projectId}/report_configs/${reportConfigId}/jobs/${jobId}/downloads`;
+
+ apiGetBlob(uri)
+ .then((file) => {
+ const fileUrl = file ? URL.createObjectURL(file) : '';
+ window.open(fileUrl, '_blank');
+ window.URL.revokeObjectURL(fileUrl);
+ return fileUrl;
+ })
+ .catch(err => console.error(err));
+};
+
+export const useGetReportStatus = ({ projectId, reportConfigId, jobId }: QueryParams, opts: ClientQueryOptions) => {
+ const uri = `/projects/${projectId}/report_configs/${reportConfigId}/jobs/${jobId}`;
+
+ return useQuery({
+ queryKey: [`reportStatus`, reportConfigId, jobId],
+ queryFn: () => apiGet(uri),
+ ...opts,
+ });
+};
+
+export const useInitializeReportDownload = (projectId: string, toastId: string) => {
+ return useMutation({
+ mutationFn: (reportConfigId: string) => {
+ const uri = `/projects/${projectId}/report_configs/${reportConfigId}/jobs`;
+
+ return apiPost(uri);
+ },
+ onError: (err, __, _ctx) => {
+ toast.update(toastId, {
+ render: 'Failed to initialize report job. Please try again later.',
+ type: 'error',
+ isLoading: false,
+ autoClose: 5000,
+ closeOnClick: true,
+ draggable: true,
+ })
+ return { error: 'Failed to Initialize Job', _raw: err };
+ },
+ onSuccess: (body, _, _ctx) => {
+ return body;
+ },
+ });
+};
diff --git a/src/app-services/fetch-helpers.ts b/src/app-services/fetch-helpers.ts
new file mode 100644
index 00000000..a634393c
--- /dev/null
+++ b/src/app-services/fetch-helpers.ts
@@ -0,0 +1,159 @@
+import { getToken } from '../userService';
+
+type ApiSource = 'MIDAS' | 'CWMS';
+
+const API_ROOT = import.meta.env.VITE_API_URL as string;
+const CWMS_ROOT = import.meta.env.VITE_CWMS_API_URL as string;
+
+const roots = {
+ 'MIDAS': API_ROOT,
+ 'CWMS': CWMS_ROOT,
+};
+
+interface OptsType extends RequestInit {
+ isFormData?: boolean;
+}
+
+interface CommonItems {
+ root: string;
+}
+
+export const buildQueryParams = (params: Record) => {
+ const keys = Object.keys(params);
+ const mapped = keys.map(key => {
+ if (!key || params[key] === undefined) return null;
+ return `${key}=${params[key]}`;
+ }).filter(e => e);
+
+ return `?${mapped.join('&')}`;
+};
+
+export const commonFetch = async (root: string, path: string, options: OptsType): Promise => {
+ const res = await fetch(`${root}${path}`, options);
+
+ if (res.status === 204) return {} as JSON;
+ else if (!res.ok) throw new Error(res.statusText);
+
+ return (await res.json()) as JSON;
+};
+
+const getCommonItems = (source: ApiSource = 'MIDAS'): CommonItems => {
+ return ({
+ root: roots[source],
+ });
+};
+
+const defaultHeaders = (source: ApiSource = 'MIDAS') => ({
+ Authorization: source !== 'MIDAS' ? '' : `Bearer ${getToken()}`,
+ ...source === 'CWMS' && {
+ accept: 'application/json;version=2',
+ },
+});
+
+export const apiFetch = (path: string, options: OptsType) => {
+ const { root } = getCommonItems();
+
+ options.headers = { ...defaultHeaders() };
+ return fetch(`${root}${path}`, options);
+};
+
+export const apiGet = (path: string, source?: ApiSource) => {
+ const { root } = getCommonItems(source);
+ const options = { method: 'GET' } as OptsType;
+
+ options.headers = { ...defaultHeaders(source) };
+ return commonFetch(root, path, options);
+};
+
+export const apiGetBlob = async (path: string) => {
+ const { root } = getCommonItems();
+ const options = { method: 'GET' } as OptsType;
+
+ options.headers = { ...defaultHeaders() };
+ const response = await fetch(`${root}${path}`, options);
+
+ return response.blob();
+};
+
+export const apiPut = (path: string, payload: JSON | Record) => {
+ const { root } = getCommonItems();
+ const options = {
+ method: 'PUT',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ } as OptsType;
+
+ options.headers = {
+ ...options.headers,
+ ...defaultHeaders(),
+ };
+
+ if (payload) {
+ options.body = JSON.stringify(payload);
+ }
+
+ return commonFetch(root, path, options);
+};
+
+/**
+ * Function to send a POST request to the api.
+ * @param {String} path - The URI of the request, will be appended to base path.
+ * @param {JSON | FormData | any[]} payload - The payload of the request. If FormData, request will be sent with Content-Type: multipart/form-data
+ * @param {OptsType} opts - Options provided to the function to alter the request.
+ * @returns
+ */
+export const apiPost = (path: string, payload?: JSON | FormData | any[], opts?: OptsType) => {
+ const { root } = getCommonItems();
+ const { isFormData } = opts || {};
+
+ const options = {
+ method: 'POST',
+ headers: {
+ ...(!isFormData && { 'Content-Type': 'application/json' }),
+ },
+ } as OptsType;
+
+ options.headers = {
+ ...options.headers,
+ ...defaultHeaders(),
+ };
+
+ if (payload) {
+ options.body = (isFormData ? payload : JSON.stringify(payload)) as BodyInit;
+ }
+
+ return commonFetch(root, path, options);
+};
+
+export const apiPatch = (path: string, payload: JSON | FormData | Record) => {
+ const { root } = getCommonItems();
+ const options = {
+ method: 'PATCH',
+ headers: {
+ 'Content-Type': 'application/json',
+ },
+ } as OptsType;
+
+ options.headers = {
+ ...options.headers,
+ ...defaultHeaders(),
+ };
+
+ if (payload) {
+ options.body = JSON.stringify(payload);
+ }
+
+ return commonFetch(root, path, options);
+};
+
+export const apiDelete = (path: string) => {
+ const { root } = getCommonItems();
+ const options = {
+ method: 'DELETE',
+ } as OptsType;
+
+ options.headers = { ...defaultHeaders() };
+
+ return commonFetch(root, path, options);
+};
diff --git a/src/common/forms/collection-group-form.jsx b/src/common/forms/collection-group-form.jsx
index 7838f24d..bbca1ca9 100644
--- a/src/common/forms/collection-group-form.jsx
+++ b/src/common/forms/collection-group-form.jsx
@@ -63,7 +63,7 @@ export default connect(
saveIsSubmit
customClosingLogic
onCancel={() => doModalClose()}
- onDelete={handleDelete}
+ onDelete={item && item.id ? handleDelete : null}
/>
diff --git a/src/common/forms/instrument-form.jsx b/src/common/forms/instrument-form.jsx
index bcf29c2e..81d93b6f 100644
--- a/src/common/forms/instrument-form.jsx
+++ b/src/common/forms/instrument-form.jsx
@@ -51,6 +51,7 @@ export default connect(
isEdit = true,
}) => {
const [name, setName] = useState(item?.name || '');
+ const [showCwms, setShowCwms] = useState(item?.show_cwms_tab || '');
const [type_id, setTypeId] = useState(item?.type_id || '');
const [station, setStation] = useState(item?.station || '');
const [offset, setOffset] = useState(item?.offset || '');
@@ -125,6 +126,7 @@ export default connect(
type_id: type_id ?? item.type_id,
status_id: status_id ?? item.status_id,
status_time,
+ show_cwms_tab: showCwms,
opts,
station:
station === null || station === ''
@@ -209,6 +211,15 @@ export default connect(
placeholder='Name'
/>
+
+ Contains CWMS Data
+
Type
setTypeId(val?.id)} domain='instrument_type' />
diff --git a/src/css/index.scss b/src/css/index.scss
index a5c79dcd..5375249c 100644
--- a/src/css/index.scss
+++ b/src/css/index.scss
@@ -54,14 +54,16 @@
.card-header {
background-color: #f7f7f7 !important;
- z-index: 2;
+ display: block !important;
+ width: 100vw;
+ padding: 7px;
}
.page-margin {
- margin-top: 98px;
+ margin-top: 73px;
&.banner {
- margin-top: 130px
+ margin-top: 105px;
}
}
diff --git a/src/customHooks/useWindowDimensions.js b/src/customHooks/useWindowDimensions.js
new file mode 100644
index 00000000..4f9a29b8
--- /dev/null
+++ b/src/customHooks/useWindowDimensions.js
@@ -0,0 +1,24 @@
+import { useState, useEffect } from 'react';
+
+const getWindowDimensions = () => {
+ const { innerWidth: width, innerHeight: height } = window;
+
+ return { width, height };
+}
+
+const useWindowDimensions = () => {
+ const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());
+
+ useEffect(() => {
+ const handleResize = () => {
+ setWindowDimensions(getWindowDimensions());
+ }
+
+ window.addEventListener('resize', handleResize);
+ return () => window.removeEventListener('resize', handleResize);
+ }, []);
+
+ return windowDimensions;
+};
+
+export default useWindowDimensions;
diff --git a/src/index.jsx b/src/index.jsx
index a5d917a1..f5794d3c 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -2,24 +2,32 @@ import React from 'react';
import { createRoot } from 'react-dom/client';
import { Provider } from 'redux-bundler-react';
import { getNavHelper } from 'internal-nav-helper';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import App from './App';
import cache from './common/helpers/cache';
import getStore from './app-bundles';
+import { initKeycloak } from './userService.ts';
const container = document.getElementById('root');
const root = createRoot(container);
+const queryClient = new QueryClient();
cache.getAll().then((initialData) => {
- const store = getStore(initialData);
+ const renderApp = () => {
+ const store = getStore(initialData);
+ if (import.meta.env.DEV) window.store = store;
- if (import.meta.env.DEV) window.store = store;
+ root.render(
+
+
+
+
+
+ )
+ };
- root.render(
-
-
-
- );
+ initKeycloak(renderApp);
});
diff --git a/src/upload-parsers/timeseries_measurements.js b/src/upload-parsers/timeseries_measurements.js
index 82abcf4c..10893f45 100644
--- a/src/upload-parsers/timeseries_measurements.js
+++ b/src/upload-parsers/timeseries_measurements.js
@@ -8,7 +8,7 @@ const timeseriesMeasurementParser = {
prePostFilter: (data) => (
/** this will work for single timeseries_id, needs to be updated to allow for multiple */
data.reduce((accum, current) => {
- const { timeseries_id, time, value, masked, validated, annotation } = current;
+ const { timeseries_id, time, value, masked, validated, annotation = '' } = current;
return ({
...accum,
@@ -61,7 +61,7 @@ const timeseriesMeasurementParser = {
label: 'Masked',
type: 'boolean',
required: false,
- parse: val => val === 'true' || val === 'T' || val ==='Y',
+ parse: val => val === 'true' || val === 'T' || val === 'Y',
validate: val => !!val,
helpText: 'Boolean value of whether the measurement should be masked (Optional, default to false)',
},
@@ -69,7 +69,7 @@ const timeseriesMeasurementParser = {
label: 'Validated',
type: 'boolean',
required: false,
- parse: val => val === 'true' || val === 'T' || val ==='Y',
+ parse: val => val === 'true' || val === 'T' || val === 'Y',
validate: val => !!val,
helpText: 'Boolean value of whether the measurement is already validated (Optional, default to false)',
},
@@ -78,7 +78,7 @@ const timeseriesMeasurementParser = {
type: 'string',
required: false,
parse: val => val,
- validate: val => !!val,
+ validate: val => !!val || val === '',
helpText: 'String note to be associated with the measurement (Optional, can be empty)',
},
},
diff --git a/src/userService.ts b/src/userService.ts
new file mode 100644
index 00000000..2183e4d9
--- /dev/null
+++ b/src/userService.ts
@@ -0,0 +1,65 @@
+import Keycloak from 'keycloak-js';
+
+const _kc = new Keycloak({
+ url: import.meta.env.VITE_KC_URL,
+ realm: import.meta.env.VITE_KC_REALM,
+ clientId: import.meta.env.VITE_KC_CLIENT_ID,
+});
+
+const basePath = import.meta.env.VITE_URL_BASE_PATH ?? ''
+
+export const initKeycloak = (renderAppCallback = () => {}) => {
+ _kc
+ .init({
+ onLoad: 'check-sso',
+ silentCheckSsoRedirectUri:
+ `${window.location.origin}${basePath}/silent-check-sso.html`,
+ pkceMethod: 'S256',
+ adapter: 'default',
+ })
+ .then(() => {
+ renderAppCallback();
+ })
+ .catch(e => console.error('test error on init: ', e)); // eslint-disable no-console
+};
+
+const loginOptions = import.meta.env.DEV ? undefined : { idpHint: 'login.gov' };
+
+export const doLogin = () => _kc.login(loginOptions);
+export const doLogout = () => _kc.logout({
+ redirectUri: import.meta.env.VITE_BASE_REDIRECT_URI,
+});
+export const getToken = () => _kc.token;
+export const isLoggedIn = () => !!_kc.token;
+export const updateToken = (successCallback: () => {}) =>
+ _kc.updateToken(5).then(successCallback).catch(doLogin);
+export const getUsername = () => _kc.tokenParsed?.preferred_username;
+export const getInitials = () => {
+ const nameParts = (_kc.tokenParsed?.name || _kc.tokenParsed?.preferred_username).split(' ') as string[];
+ const uppers = nameParts.map(name => name?.length ? name[0].toUpperCase() : '').filter(e => e);
+
+ return uppers.join('');
+};
+export const getFullName = () => _kc.tokenParsed?.name;
+export const getFirstName = () => _kc.tokenParsed?.given_name;
+export const getEmail = () => _kc.tokenParsed?.email;
+
+_kc.onTokenExpired = () => {
+ _kc.updateToken(50);
+};
+
+_kc.onAuthError = () => {
+ try {
+ doLogout();
+ } catch (err) {
+ console.error(err);
+ }
+};
+
+_kc.onAuthRefreshError = () => {
+ try {
+ doLogout();
+ } catch (err) {
+ console.error(err);
+ }
+};
diff --git a/tsconfig.json b/tsconfig.json
new file mode 100644
index 00000000..73db2df4
--- /dev/null
+++ b/tsconfig.json
@@ -0,0 +1,27 @@
+{
+ "compilerOptions": {
+ "target": "ES2020",
+ "useDefineForClassFields": true,
+ "lib": ["ES2020", "DOM", "DOM.Iterable"],
+ "module": "ESNext",
+ "skipLibCheck": true,
+ "sourceMap": true,
+
+ /* Bundler mode */
+ "moduleResolution": "bundler",
+ "allowImportingTsExtensions": true,
+ "resolveJsonModule": true,
+ "isolatedModules": true,
+ "noEmit": true,
+ "jsx": "react-jsx",
+ "types": ["vite/client"],
+
+ /* Linting */
+ "strict": true,
+ "noUnusedLocals": true,
+ "noUnusedParameters": true,
+ "noFallthroughCasesInSwitch": true
+ },
+ "include": ["src"],
+ "references": [{ "path": "./tsconfig.node.json" }]
+}
diff --git a/tsconfig.node.json b/tsconfig.node.json
new file mode 100644
index 00000000..42872c59
--- /dev/null
+++ b/tsconfig.node.json
@@ -0,0 +1,10 @@
+{
+ "compilerOptions": {
+ "composite": true,
+ "skipLibCheck": true,
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ "allowSyntheticDefaultImports": true
+ },
+ "include": ["vite.config.ts"]
+}
diff --git a/tsconfig.vite.json b/tsconfig.vite.json
new file mode 100644
index 00000000..87a55c36
--- /dev/null
+++ b/tsconfig.vite.json
@@ -0,0 +1,7 @@
+{
+ "include": ["vite.config.*"],
+ "compilerOptions": {
+ "composite": true,
+ "types": ["node", "vite/client"],
+ }
+}
\ No newline at end of file