@@ -67,7 +67,7 @@ const DataSets: React.FunctionComponent = (props: {}) => {
diff --git a/TrenDAP/wwwroot/TypeScript/Features/DataSets/DataSetsSlice.ts b/TrenDAP/wwwroot/TypeScript/Features/DataSets/DataSetsSlice.ts
index 744b97e9..dc73a59f 100644
--- a/TrenDAP/wwwroot/TypeScript/Features/DataSets/DataSetsSlice.ts
+++ b/TrenDAP/wwwroot/TypeScript/Features/DataSets/DataSetsSlice.ts
@@ -54,6 +54,8 @@ export const RemoveDataSet = createAsyncThunk('DataSets/RemoveDataSet', async (D
return await DeleteDataSet(DataSet);
});
+export const DataSetsHaveChanged = createAsyncThunk('DataSets/DataSetsHaveChanged', async () => { return; });
+
export const UpdateDataSet = createAsyncThunk('DataSets/UpdateDataSet', async (DataSet: TrenDAP.iDataSet, { dispatch }) => {
return await PatchDataSet(DataSet);
});
@@ -68,7 +70,7 @@ export const PatchDataSetData = createAsyncThunk('DataSets/PatchDataSetData', as
// #region [ Consts ]
const newDataSet: TrenDAP.iDataSet = {
- ID: 0,
+ ID: -1,
Name: '',
User: '',
Context: 'Fixed Dates',
@@ -95,7 +97,8 @@ export const DataSetsSlice = createSlice({
SortField: 'UpdatedOn',
Ascending: false,
Record: {
- ID: 0, Name: '', User: '', Context: 'Relative', RelativeValue: 30, RelativeWindow: 'Day', From: moment().subtract(30, 'days').format('YYYY-MM-DD'), To: moment().format('YYYY-MM-DD'), Hours: Math.pow(2, 24) - 1, Days: Math.pow(2, 7) - 1, Weeks: Math.pow(2, 53) - 1, Months: Math.pow(2, 12) - 1, Data: {Status: 'unitiated', Error: null} }
+ ID: 0, Name: '', User: '', Context: 'Relative', RelativeValue: 30, RelativeWindow: 'Day', From: moment().subtract(30, 'days').format('YYYY-MM-DD'), To: moment().format('YYYY-MM-DD'), Hours: Math.pow(2, 24) - 1, Days: Math.pow(2, 7) - 1, Weeks: Math.pow(2, 53) - 1, Months: Math.pow(2, 12) - 1, Data: { Status: 'unitiated', Error: null }
+ }
} as Redux.State
,
reducers: {
Sort: (state, action) => {
@@ -124,7 +127,7 @@ export const DataSetsSlice = createSlice({
builder.addCase(FetchDataSets.fulfilled, (state, action) => {
state.Status = 'idle';
state.Error = null;
- const results = action.payload.map(r => ({ ...r, From: moment(r.From).format('YYYY-MM-DD'), To: moment(r.To).format('YYYY-MM-DD'), Data: { Status: 'unitiated', Error: null}}));
+ const results = action.payload.map(r => ({ ...r, From: moment(r.From).format('YYYY-MM-DD'), To: moment(r.To).format('YYYY-MM-DD'), Data: { Status: 'unitiated', Error: null } }));
const sorted = _.orderBy(results, [state.SortField], [state.Ascending ? "asc" : "desc"]) as TrenDAP.iDataSet[];
state.Data = sorted;
});
@@ -140,7 +143,7 @@ export const DataSetsSlice = createSlice({
builder.addCase(FetchDataSetData.fulfilled, (state, action) => {
//state.Status = 'idle';
//state.Error = null;
- state.Data.find(d => d.ID === action.meta.arg.ID).Data = { Status: 'idle', Error: null } ;
+ state.Data.find(d => d.ID === action.meta.arg.ID).Data = { Status: 'idle', Error: null };
});
builder.addCase(FetchDataSetData.pending, (state, action) => {
@@ -213,16 +216,16 @@ export const DataSetsSlice = createSlice({
state.Data.find(d => d.ID === action.meta.arg.ID).Data = { Status: 'error', Error: action.error.message };
});
builder.addCase(UpdateDataSetDataFlag.fulfilled, (state, action) => {
- if(action.payload.ID != null)
+ if (action.payload.ID != null)
state.Data.find(d => d.ID === action.meta.arg.ID).Data = { Status: 'idle', Error: action.payload.Created };
else
- state.Data.find(d => d.ID === action.meta.arg.ID).Data = { Status: 'unitiated', Error: null};
+ state.Data.find(d => d.ID === action.meta.arg.ID).Data = { Status: 'unitiated', Error: null };
});
builder.addCase(PatchDataSetData.pending, (state, action) => {
state.Data.find(d => d.ID === action.meta.arg.DataSet.ID).Data = { Status: 'changed', Error: null };
});
-
+ builder.addCase(DataSetsHaveChanged.pending, (state) => { state.Status = 'changed'; });
}
});
diff --git a/TrenDAP/wwwroot/TypeScript/Features/DataSets/EditDataSet.tsx b/TrenDAP/wwwroot/TypeScript/Features/DataSets/EditDataSet.tsx
index 79d298f3..382f9930 100644
--- a/TrenDAP/wwwroot/TypeScript/Features/DataSets/EditDataSet.tsx
+++ b/TrenDAP/wwwroot/TypeScript/Features/DataSets/EditDataSet.tsx
@@ -22,56 +22,80 @@
//******************************************************************************************************
import * as React from 'react';
-import { DataSourceTypes, TrenDAP } from '../../global';
-import { useAppDispatch, useAppSelector } from '../../hooks';
-import { UpdateDataSet, SelectDataSetsStatus, FetchDataSets, SelectDataSets, SetRecordByID, Update } from './DataSetsSlice'
-import { SelectDataSourceDataSets, SelectDataSourceDataSetStatus, FetchDataSourceDataSets, RemoveDataSourceDataSet, UpdateDataSourceDataSet, AddDataSourceDataSet } from '../DataSources/DataSourceDataSetSlice';
-import DataSet from './DataSet';
-import { useNavigate } from "react-router-dom";
-import { TabSelector, ToolTip } from '@gpa-gemstone/react-interactive';
import * as _ from 'lodash';
-import { SelectDataSources } from '../DataSources/DataSourcesSlice'
import moment from 'moment';
+import * as $ from 'jquery';
+import { useNavigate } from "react-router-dom";
+import { TabSelector, ToolTip } from '@gpa-gemstone/react-interactive';
import { CrossMark, Warning } from '@gpa-gemstone/gpa-symbols';
+import { DataSourceTypes, TrenDAP } from '../../global';
+import { useAppDispatch, useAppSelector } from '../../hooks';
+import { SelectDataSetsStatus, FetchDataSets, SelectDataSets, DataSetsHaveChanged, SelectNewDataSet } from './DataSetsSlice';
+import DataSetSettingsTab from './Tabs/DataSetSettingsTab';
+import DataSourceConnectionTab from './Tabs/DataSourceConnectionTab';
+import EventSourceConnectionTab from './Tabs/EventSourceConnectionTab';
+import { EventSourceTypes } from '../EventSources/Interface';
const EditDataSet: React.FunctionComponent<{}> = (props) => {
const navigate = useNavigate();
const dispatch = useAppDispatch();
- const sourceSetConnections = useAppSelector(SelectDataSourceDataSets);
- const dsdsStatus = useAppSelector(SelectDataSourceDataSetStatus);
+
const dataSets = useAppSelector(SelectDataSets);
- const wsStatus = useAppSelector(SelectDataSetsStatus);
- const dataSources = useAppSelector(SelectDataSources);
+ const dataSetStatus = useAppSelector(SelectDataSetsStatus);
const [warnings, setWarning] = React.useState([]);
const [errors, setErrors] = React.useState([]);
- const [sourceErrors, setSourceErrors] = React.useState([]);
+
+ const [dataErrors, setDataErrors] = React.useState([]);
+ const [eventErrors, setEventErrors] = React.useState([]);
+
const [hover, setHover] = React.useState(false);
- const [connections, setConnections] = React.useState([]);
- const [deletedConnections, setDeletedConnections] = React.useState([]);
+
+ const [dataConnections, setDataConnections] = React.useState([]);
+ const [eventConnections, setEventConnections] = React.useState([]);
const [dataSet, setDataSet] = React.useState(undefined);
const [tab, setTab] = React.useState('settings');
React.useEffect(() => {
- if (wsStatus === 'unitiated' || wsStatus === 'changed')
+ if (dataSetStatus === 'unitiated' || dataSetStatus === 'changed')
dispatch(FetchDataSets());
- }, [wsStatus]);
+ }, [dataSetStatus]);
React.useEffect(() => {
- if (wsStatus === 'idle')
- setDataSet(dataSets.find(set => set.ID == (props['useParams']?.id ?? -1)));
- }, [wsStatus, props['useParams']?.id]);
+ if (dataSetStatus !== 'idle') return; //SelectNewDataSet
+ const id = (props['useParams']?.id ?? -1);
+ if (id < 0) setDataSet(SelectNewDataSet());
+ else setDataSet(dataSets.find(set => set.ID == id));
+ }, [dataSetStatus, props['useParams']?.id]);
React.useEffect(() => {
- if (dsdsStatus === 'unitiated' || dsdsStatus === 'changed')
- dispatch(FetchDataSourceDataSets());
- }, [dsdsStatus]);
-
- React.useEffect(() => {
- if (dataSet === undefined) return;
- if (dsdsStatus === 'idle')
- setConnections(sourceSetConnections.filter(conn => conn.DataSetID === dataSet.ID));
- }, [dsdsStatus, dataSet?.ID]);
+ const id = props['useParams']?.id ?? -1;
+ if (id === -1) return;
+ const dataConnectionHandle = $.ajax({
+ type: "GET",
+ url: `${homePath}api/DataSourceDataSet/${id}`,
+ contentType: "application/json; charset=utf-8",
+ dataType: 'json',
+ cache: false,
+ async: true
+ }).done((data: DataSourceTypes.IDataSourceDataSet[]) => {
+ setDataConnections(data);
+ });
+ const eventConnectionHandle = $.ajax({
+ type: "GET",
+ url: `${homePath}api/EventSourceDataSet/${id}`,
+ contentType: "application/json; charset=utf-8",
+ dataType: 'json',
+ cache: false,
+ async: true
+ }).done((data: EventSourceTypes.IEventSourceDataSet[]) => {
+ setEventConnections(data);
+ });
+ return () => {
+ if (dataConnectionHandle != null && dataConnectionHandle.abort != null) dataConnectionHandle.abort();
+ if (eventConnectionHandle != null && eventConnectionHandle.abort != null) eventConnectionHandle.abort();
+ }
+ }, [props['useParams']?.id]);
React.useEffect(() => {
if (dataSet == null) return;
@@ -104,72 +128,74 @@ const EditDataSet: React.FunctionComponent<{}> = (props) => {
e.push("At least 1 Month has to be selected.")
if (dataSet.Weeks == 0)
e.push("At least 1 Week has to be selected.")
- if (connections.length == 0)
- e.push("At least 1 DataSource needs to be added.");
- setErrors(e.concat(sourceErrors));
- }, [dataSet, connections, sourceErrors]);
+ if (dataConnections.length == 0)
+ e.push("At least 1 Trend DataSource needs to be added.");
+ setErrors(e.concat(dataErrors).concat(eventErrors));
+ }, [dataSet, dataConnections, dataErrors, eventErrors]);
if (dataSet === undefined) return null;
return (
-
-
- Edit Data Set
-
-
- ({
- Label: dataSources.find(ds => ds.ID === item.DataSourceID)?.Name,
- Id: dataSources.find(ds => ds.ID === item.DataSourceID)?.Name + index.toString(),
- })),
- ]}
- SetTab={(item) => setTab(item)} CurrentTab={tab} />
-
-
-
-
-
-
+
+
+
+
+ Edit Data Set
+
+
+
+
+
+ {tab === 'trend' ?
+ : <>}
+ {tab === 'event' ?
+ : <>}
+ {tab === 'settings' ?
+ : <>}
+
+
+
+
+
+
+
+
0 || errors.length > 0)} Position={'top'}>
+ {warnings.map((w, i) => {Warning} {w}
)}
+ {errors.map((e, i) => {CrossMark} {e}
)}
+
+
-
0 || errors.length > 0)} Position={'top'}>
- {warnings.map((w, i) => {Warning} {w}
)}
- {errors.map((e, i) => {CrossMark} {e}
)}
-
- {tab !== 'settings' ?
-
-
-
: null
- }
diff --git a/TrenDAP/wwwroot/TypeScript/Features/DataSets/HelperFunctions.ts b/TrenDAP/wwwroot/TypeScript/Features/DataSets/HelperFunctions.ts
index 3ae3c6c5..c6bb0e28 100644
--- a/TrenDAP/wwwroot/TypeScript/Features/DataSets/HelperFunctions.ts
+++ b/TrenDAP/wwwroot/TypeScript/Features/DataSets/HelperFunctions.ts
@@ -24,6 +24,8 @@
import { TrenDAP } from "../../global";
import moment from "moment";
+const DateFormat = 'YYYY-MM-DD';
+
const ComputeValidDays = (ds: TrenDAP.iDataSet) => {
if (ds.Context == 'Relative')
return 127;
@@ -82,4 +84,29 @@ const ComputeValidWeeks = (ds: TrenDAP.iDataSet) => {
}
-export { ComputeValidDays, ComputeValidWeeks }
\ No newline at end of file
+const ComputeTimeEnds = (ds: TrenDAP.iDataSet) => {
+ let startTime = moment.utc(ds.From, DateFormat);
+ let endTime = moment.utc(ds.To, DateFormat);
+ if (ds.Context == "Relative") {
+ endTime = moment.utc(moment().format(DateFormat), DateFormat);
+ if (ds.RelativeWindow == "Day")
+ startTime = endTime.add(-ds.RelativeValue, "day");
+ else if (ds.RelativeWindow == "Week")
+ startTime = endTime.add(-ds.RelativeValue * 7, "day");
+ else if (ds.RelativeWindow == "Month")
+ startTime = endTime.add(-ds.RelativeValue, "month");
+ else
+ startTime = endTime.add(-ds.RelativeValue, "year");
+ }
+ return { Start: startTime, End: endTime };
+}
+
+// Computes center of window and size of window in hours
+const ComputeTimeCenterAndSize = (ds: TrenDAP.iDataSet, granularity: moment.unitOfTime.Diff = 'hours') => {
+ const timeEnds = ComputeTimeEnds(ds);
+ const windowSize = timeEnds.End.diff(timeEnds.Start, granularity, true) / 2;
+ const center = timeEnds.Start.add(windowSize, granularity);
+ return { Center: center, Size: windowSize, Unit: granularity }
+}
+
+export { DateFormat, ComputeTimeEnds, ComputeTimeCenterAndSize, ComputeValidDays, ComputeValidWeeks }
\ No newline at end of file
diff --git a/TrenDAP/wwwroot/TypeScript/Features/DataSets/Types/DataSetGlobalSettings.tsx b/TrenDAP/wwwroot/TypeScript/Features/DataSets/Tabs/DataSetSettingsTab.tsx
similarity index 57%
rename from TrenDAP/wwwroot/TypeScript/Features/DataSets/Types/DataSetGlobalSettings.tsx
rename to TrenDAP/wwwroot/TypeScript/Features/DataSets/Tabs/DataSetSettingsTab.tsx
index 6655368a..6b20ddd1 100644
--- a/TrenDAP/wwwroot/TypeScript/Features/DataSets/Types/DataSetGlobalSettings.tsx
+++ b/TrenDAP/wwwroot/TypeScript/Features/DataSets/Tabs/DataSetSettingsTab.tsx
@@ -22,65 +22,40 @@
//******************************************************************************************************
import * as React from 'react';
-import { TrenDAP, Redux, DataSourceTypes } from '../../../global';
+import { TrenDAP, DataSourceTypes } from '../../../global';
import { Input, CheckBox, EnumCheckBoxes } from '@gpa-gemstone/react-forms';
-import { Plus } from '../../../Constants';
-import { SelectDataSourcesStatus, SelectDataSourcesAllPublicNotUser, SelectDataSourcesForUser, FetchDataSources } from '../../DataSources/DataSourcesSlice';
-import { AddDataSourceDataSet } from '../../DataSources/DataSourceDataSetSlice';
-import { GetReactDataSource } from '../../DataSources/DataSourceWrapper';
import { useAppSelector, useAppDispatch } from '../../../hooks';
-import { SelectDataSourceTypes, SelectDataSourceTypesStatus, FetchDataSourceTypes } from '../../DataSourceTypes/DataSourceTypesSlice';
-import { SelectDataSets } from './../DataSetsSlice';
+import { SelectDataSets, SelectDataSetsStatus, FetchDataSets } from './../DataSetsSlice';
import { ComputeValidDays, ComputeValidWeeks } from '../HelperFunctions';
+import { EventSourceTypes } from '../../EventSources/Interface';
interface IProps {
DataSet: TrenDAP.iDataSet,
SetDataSet: (ws: TrenDAP.iDataSet) => void,
- Connections: DataSourceTypes.IDataSourceDataSet[],
- SetConnections: (arg: DataSourceTypes.IDataSourceDataSet[]) => void
+ DataConnections: DataSourceTypes.IDataSourceDataSet[],
+ SetDataConnections: (arg: DataSourceTypes.IDataSourceDataSet[]) => void,
+ EventConnections: EventSourceTypes.IEventSourceDataSet[],
+ SetEventConnections: (arg: EventSourceTypes.IEventSourceDataSet[]) => void
}
-const DataSetGlobalSettings: React.FunctionComponent
= (props: IProps) => {
+const DataSetSettingsTab: React.FunctionComponent = (props: IProps) => {
const dispatch = useAppDispatch();
- const dataSources = useAppSelector((state: Redux.StoreState) => SelectDataSourcesForUser(state, userName)) as DataSourceTypes.IDataSourceView[];
- const publicDataSources = useAppSelector((state: Redux.StoreState) => SelectDataSourcesAllPublicNotUser(state, userName)) as DataSourceTypes.IDataSourceView[];
- const dsStatus = useAppSelector(SelectDataSourcesStatus);
- const dataSourceTypes = useAppSelector(SelectDataSourceTypes) as DataSourceTypes.IDataSourceType[];
- const dstStatus = useAppSelector(SelectDataSourceTypesStatus);
- const allDataSets = useAppSelector(SelectDataSets);
+ const dataSets = useAppSelector(SelectDataSets);
+ const dataSetStatus = useAppSelector(SelectDataSetsStatus);
React.useEffect(() => {
- if (dsStatus != 'unitiated' && dsStatus != 'changed') return;
- dispatch(FetchDataSources());
-
- return function () {
- }
- }, [dispatch, dsStatus]);
-
- React.useEffect(() => {
- if (dstStatus != 'unitiated') return;
-
- dispatch(FetchDataSourceTypes());
- return function () {
- }
- }, [dispatch, dstStatus]);
-
+ if (dataSetStatus != 'unitiated' && dataSetStatus != 'changed') return;
+ dispatch(FetchDataSets());
+ }, [dataSetStatus]);
function valid(field: keyof (TrenDAP.iDataSet)): boolean {
if (field == 'Name')
return props.DataSet.Name != null && props.DataSet.Name.trim().length > 0 &&
- props.DataSet.Name.length <= 200 && allDataSets.find(ws => ws.Name.toLowerCase() == props.DataSet.Name.toLowerCase() && ws.ID != props.DataSet.ID) == null
+ props.DataSet.Name.length <= 200 && dataSets.find(ws => ws.Name.toLowerCase() == props.DataSet.Name.toLowerCase() && ws.ID != props.DataSet.ID) == null
else
return true;
}
- function AddDS(dataSource: DataSourceTypes.IDataSourceView) {
- const dataSourceReact = GetReactDataSource(dataSource, dataSourceTypes);
- const newConns = [...props.Connections];
- newConns.push({ ID: -1, DataSourceID: dataSource.ID, DataSetID: props.DataSet.ID, Settings: JSON.stringify(dataSourceReact.DefaultDataSetSettings) })
- props.SetConnections(newConns);
- }
-
function validDay(d: string) {
const dayOfWeek = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']
@@ -96,35 +71,20 @@ const DataSetGlobalSettings: React.FunctionComponent = (props: IProps) =
}
return (
-
+ <>
+ Record={props.DataSet} Field="Name" Setter={(record) => props.SetDataSet(record)} Valid={valid} Feedback={"A Unique Name has to be specified"} />
+ props.SetDataSet(record)} />
+ Record={props.DataSet} Field="Hours" Label="Hour of Day" Setter={(record) => props.SetDataSet(record)} Enum={Array.from({ length: 24 }, (_, i) => i.toString())} />
+ Record={props.DataSet} Field="Days" Label="Day of Week" Setter={(record) => props.SetDataSet(record)} Enum={['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']} IsDisabled={validDay} />
+ Record={props.DataSet} Field="Weeks" Label="Week of Year" Setter={(record) => props.SetDataSet(record)} Enum={Array.from({ length: 53 }, (_, i) => i.toString())} IsDisabled={validWeek} />
+ Record={props.DataSet} Field="Months" Label="Month of Year" Setter={(record) => props.SetDataSet(record)} Enum={['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']} />
+ Record={props.DataSet} Field="Public" Label='Shared' Setter={(record) => props.SetDataSet(record)} />
+
);
}
-export default DataSetGlobalSettings;
+export default DataSetSettingsTab;
const RelativeDateRangePicker = (props: { Record: TrenDAP.iDataSet, Setter: (record: TrenDAP.iDataSet) => void }) => {
const [context, setContext] = React.useState<'Relative' | 'Fixed Dates'>(props.Record.Context);
diff --git a/TrenDAP/wwwroot/TypeScript/Features/DataSets/Tabs/DataSourceConnectionTab.tsx b/TrenDAP/wwwroot/TypeScript/Features/DataSets/Tabs/DataSourceConnectionTab.tsx
new file mode 100644
index 00000000..f3014142
--- /dev/null
+++ b/TrenDAP/wwwroot/TypeScript/Features/DataSets/Tabs/DataSourceConnectionTab.tsx
@@ -0,0 +1,186 @@
+//******************************************************************************************************
+// DataSourceCOnnectionTab.tsx - Gbtc
+//
+// Copyright © 2020, Grid Protection Alliance. All Rights Reserved.
+//
+// Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+// the NOTICE file distributed with this work for additional information regarding copyright ownership.
+// The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+// file except in compliance with the License. You may obtain a copy of the License at:
+//
+// http://opensource.org/licenses/MIT
+//
+// Unless agreed to in writing, the subject software distributed under the License is distributed on an
+// "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+// License for the specific language governing permissions and limitations.
+//
+// Code Modification History:
+// ----------------------------------------------------------------------------------------------------
+// 05/01/2024 - Gabriel Santos
+// Generated original version of source code.
+//
+//******************************************************************************************************
+
+import * as React from 'react';
+import * as _ from 'lodash';
+import { ReactTable } from '@gpa-gemstone/react-table';
+import { DataSourceTypes, TrenDAP } from '../../../global';
+import { FetchDataSources, SelectDataSources, SelectDataSourcesStatus } from '../../DataSources/DataSourcesSlice';
+import { Pencil, Plus, TrashCan } from '@gpa-gemstone/gpa-symbols';
+import { useAppSelector, useAppDispatch } from '../../../hooks';
+import DataSourceWrapper from '../../DataSources/DataSourceWrapper';
+
+interface IProps {
+ DataSourceConnections: DataSourceTypes.IDataSourceDataSet[],
+ SetDataSourceConnections: (newConns: DataSourceTypes.IDataSourceDataSet[]) => void,
+ DataSet: TrenDAP.iDataSet,
+ SetErrors: (e: string[]) => void
+}
+
+const DataSourceConnectionTab: React.FC = (props) => {
+ const dispatch = useAppDispatch();
+ const dataSources = useAppSelector(SelectDataSources);
+ const dataSourceStatus = useAppSelector(SelectDataSourcesStatus);
+ const errors = React.useRef>(new Array().fill(null));
+ const [currentIndex, setCurrentIndex] = React.useState(0);
+
+ React.useEffect(() => {
+ if (dataSourceStatus === 'unitiated' || dataSourceStatus === 'changed')
+ dispatch(FetchDataSources());
+ }, [dataSourceStatus]);
+
+ React.useEffect(() => {
+ props.SetErrors([]);
+ errors.current = new Array().fill(null);
+ }, [props.DataSet.ID]);
+
+ const dataSource = React.useMemo(() => {
+ const srcId = props.DataSourceConnections[currentIndex]?.DataSourceID;
+ if (srcId == undefined) return undefined;
+ return dataSources.find(src => srcId === src.ID);
+ }, [dataSourceStatus, currentIndex, props.DataSourceConnections]);
+
+ const AddDS = React.useCallback((dataSource: DataSourceTypes.IDataSourceView) => {
+ const newConns = [...props.DataSourceConnections];
+ newConns.push({ ID: -1, DataSourceID: dataSource.ID, DataSourceName: dataSource.Name, DataSetID: props.DataSet.ID, DataSetName: props.DataSet.Name, Settings: {} });
+ setCurrentIndex(newConns.length - 1);
+ props.SetDataSourceConnections(newConns);
+ }, [props.DataSourceConnections, props.SetDataSourceConnections, props.DataSet, currentIndex, dataSourceStatus]);
+
+ const pushErrors = React.useCallback(() => {
+ let e: string[] = [];
+ errors.current.forEach(errorList => {
+ if (errorList != null) e = e.concat(errorList);
+ })
+ props.SetErrors(e);
+ }, [props.SetErrors]);
+
+ const addWrapperErrors = React.useCallback((e: string[]) => {
+ if (e.length === 0) errors.current[currentIndex] = null;
+ else errors.current[currentIndex] = [`Errors from ${props.DataSourceConnections[currentIndex]?.DataSourceName}:`].concat(e);
+ pushErrors();
+ }, [pushErrors, currentIndex, props.DataSourceConnections]);
+
+ return (
+
+
+
+
+
Trend Connections
+
+
+
+
+
+
+ TableClass="table table-hover"
+ Data={props.DataSourceConnections}
+ SortKey={null}
+ Ascending={null}
+ OnSort={(d) => { }}
+ TableStyle={{
+ padding: 0, width: '100%', height: '100%',
+ tableLayout: 'fixed', overflow: 'hidden', display: 'flex', flexDirection: 'column'
+ }}
+ TheadStyle={{ fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%' }}
+ TbodyStyle={{ display: 'block', overflowY: 'scroll', flex: 1 }}
+ RowStyle={{ display: 'table', tableLayout: 'fixed', width: '100%' }}
+ Selected={(_item, index) => currentIndex === index}
+ KeySelector={(_item, index) => index}
+ OnClick={(item) => { setCurrentIndex(item.index); }}
+ >
+
+ Key={'DataSourceName'}
+ AllowSort={true}
+ Field={'DataSourceName'}
+ HeaderStyle={{ width: 'auto' }}
+ RowStyle={{ width: 'auto' }}
+ > DataSource
+
+
+ Key={'ID'}
+ AllowSort={false}
+ Field={'ID'}
+ HeaderStyle={{ width: 'auto' }}
+ RowStyle={{ width: 'auto' }}
+ Content={row =>
+
+
+
+ }
+ ><>
+
+
+
+
+
+
+
+
+ {props.DataSourceConnections[currentIndex] != null ?
+ {
+ const newConns = [...props.DataSourceConnections];
+ newConns.splice(currentIndex, 1, newConn)
+ props.SetDataSourceConnections(newConns);
+ }} /> : <>}
+
+
+
+
+
+
+
+
+
Event Connections
+
+
+
+
+
+
+ TableClass="table table-hover"
+ Data={props.EventSourceConnections}
+ SortKey={null}
+ Ascending={null}
+ OnSort={(d) => { }}
+ TableStyle={{
+ padding: 0, width: '100%', height: '100%',
+ tableLayout: 'fixed', overflow: 'hidden', display: 'flex', flexDirection: 'column'
+ }}
+ TheadStyle={{ fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%' }}
+ TbodyStyle={{ display: 'block', overflowY: 'scroll', flex: 1 }}
+ RowStyle={{ display: 'table', tableLayout: 'fixed', width: '100%' }}
+ Selected={(_item, index) => currentIndex === index}
+ KeySelector={(_item, index) => index}
+ OnClick={(item) => { setCurrentIndex(item.index); }}
+ >
+
+ Key={'EventSourceName'}
+ AllowSort={true}
+ Field={'EventSourceName'}
+ HeaderStyle={{ width: 'auto' }}
+ RowStyle={{ width: 'auto' }}
+ > EventSource
+
+
+ Key={'ID'}
+ AllowSort={false}
+ Field={'ID'}
+ HeaderStyle={{ width: 'auto' }}
+ RowStyle={{ width: 'auto' }}
+ Content={row =>
+
+
+
+ }
+ ><>
+
+
+
+
+
+
+
+
+ {props.EventSourceConnections[currentIndex] != null ?
+ {
+ const newConns = [...props.EventSourceConnections];
+ newConns.splice(currentIndex, 1, newConn)
+ props.SetEventSourceConnections(newConns);
+ }} /> : <>}
+
+
+
+
+
+ return <>{implementation == null ?
{props.DataSource?.Name} - Error
@@ -107,44 +72,17 @@ const DataSourceWrapper: React.FC
= (props: IProp
-
+
@@ -62,7 +58,7 @@ const DataSources: React.FunctionComponent = () => {
-
+
Shared DataSources
@@ -84,7 +80,6 @@ const DataSourceTable = React.memo((props: ITableProps) => {
const [dataSources, setDataSources] = React.useState
([]);
const dispatch = useAppDispatch();
- const dataSourceTypes = useAppSelector(SelectDataSourceTypes);
const dsStatus = useAppSelector(SelectDataSourcesStatus);
const allDataSources = useAppSelector(SelectDataSources);
const [deleteItem, setDeleteItem] = React.useState(null);
@@ -118,8 +113,7 @@ const DataSourceTable = React.memo((props: ITableProps) => {
KeySelector={source => source.ID}
Ascending={ascending}>
Key={'Name'} Field={'Name'}>Name
- Key={'DataSourceTypeID'} Field={'DataSourceTypeID'}
- Content={row => dataSourceTypes.find(dst => row.item.DataSourceTypeID === dst.ID)?.Name}>Type
+ Key={'Type'} Field={'Type'}>Type
{
props.OwnedByUser ?
AllowSort={false} Key={'Edit'} Field={'Public'}
diff --git a/TrenDAP/wwwroot/TypeScript/Features/DataSources/ReactDataSources/OpenHistorianDataSource.tsx b/TrenDAP/wwwroot/TypeScript/Features/DataSources/Implementations/OpenHistorianDataSource.tsx
similarity index 97%
rename from TrenDAP/wwwroot/TypeScript/Features/DataSources/ReactDataSources/OpenHistorianDataSource.tsx
rename to TrenDAP/wwwroot/TypeScript/Features/DataSources/Implementations/OpenHistorianDataSource.tsx
index 7bce974d..8e9260c2 100644
--- a/TrenDAP/wwwroot/TypeScript/Features/DataSources/ReactDataSources/OpenHistorianDataSource.tsx
+++ b/TrenDAP/wwwroot/TypeScript/Features/DataSources/Implementations/OpenHistorianDataSource.tsx
@@ -26,9 +26,10 @@ import { DataSourceTypes, TrenDAP, Redux, DataSetTypes } from '../../../global';
import { useAppSelector, useAppDispatch } from '../../../hooks';
import * as React from 'react';
import { SelectOpenHistorian, FetchOpenHistorian } from '../../OpenHistorian/OpenHistorianSlice';
+import { IDataSource } from '../Interface';
-const OpenHistorianDataSource: DataSourceTypes.IDataSource<{}, TrenDAP.iOpenHistorianDataSet> = {
+const OpenHistorianDataSource: IDataSource<{}, TrenDAP.iOpenHistorianDataSet> = {
Name: 'OpenHistorian',
DefaultSourceSettings: {},
DefaultDataSetSettings: { Devices: [], Phases: [], Types: [], Instance: "", Aggregate: '1w'},
diff --git a/TrenDAP/wwwroot/TypeScript/Features/DataSources/ReactDataSources/SapphireDataSource.tsx b/TrenDAP/wwwroot/TypeScript/Features/DataSources/Implementations/SapphireDataSource.tsx
similarity index 98%
rename from TrenDAP/wwwroot/TypeScript/Features/DataSources/ReactDataSources/SapphireDataSource.tsx
rename to TrenDAP/wwwroot/TypeScript/Features/DataSources/Implementations/SapphireDataSource.tsx
index 6f78e28c..93b54965 100644
--- a/TrenDAP/wwwroot/TypeScript/Features/DataSources/ReactDataSources/SapphireDataSource.tsx
+++ b/TrenDAP/wwwroot/TypeScript/Features/DataSources/Implementations/SapphireDataSource.tsx
@@ -26,8 +26,9 @@ import { DataSourceTypes, TrenDAP, Redux, DataSetTypes } from '../../../global';
import { Select, ArrayCheckBoxes, ArrayMultiSelect, Input } from '@gpa-gemstone/react-forms';
import { useAppSelector, useAppDispatch } from '../../../hooks';
import { SelectSapphire, FetchSapphire, SelectSapphireStatus } from '../../Sapphire/SapphireSlice';
+import { IDataSource } from '../Interface';
-const SapphireDataSource: DataSourceTypes.IDataSource<{}, TrenDAP.iSapphireDataSet> = {
+const SapphireDataSource: IDataSource<{}, TrenDAP.iSapphireDataSet> = {
Name: 'Sapphire',
DefaultSourceSettings: {},
DefaultDataSetSettings: { IDs: [], Phases: [], Types: [], Aggregate: "", Harmonics: "" },
diff --git a/TrenDAP/wwwroot/TypeScript/Features/DataSources/ReactDataSources/XDADataSource.tsx b/TrenDAP/wwwroot/TypeScript/Features/DataSources/Implementations/XDADataSource.tsx
similarity index 96%
rename from TrenDAP/wwwroot/TypeScript/Features/DataSources/ReactDataSources/XDADataSource.tsx
rename to TrenDAP/wwwroot/TypeScript/Features/DataSources/Implementations/XDADataSource.tsx
index 9f148e5c..a6b345c2 100644
--- a/TrenDAP/wwwroot/TypeScript/Features/DataSources/ReactDataSources/XDADataSource.tsx
+++ b/TrenDAP/wwwroot/TypeScript/Features/DataSources/Implementations/XDADataSource.tsx
@@ -27,7 +27,7 @@ import { OpenXDA } from '@gpa-gemstone/application-typings';
import { DataSourceTypes, TrenDAP, Redux, DataSetTypes } from '../../../global';
import { useAppSelector, useAppDispatch } from '../../../hooks';
import { SelectOpenXDA, FetchOpenXDA, SelectOpenXDAStatus } from '../../OpenXDA/OpenXDASlice';
-import { TypeCorrectSettings } from '../DataSourceWrapper';
+import { IDataSource, EnsureTypeSafety } from '../Interface';
import $ from 'jquery';
import queryString from 'querystring';
import moment from 'moment';
@@ -46,11 +46,11 @@ interface XDAChannel extends OpenXDA.Types.Channel {
Latitude: number
}
-const XDADataSource: DataSourceTypes.IDataSource = {
+const XDADataSource: IDataSource = {
Name: 'TrenDAPDB',
DefaultSourceSettings: { PQBrowserUrl: "http://localhost:44368/"},
DefaultDataSetSettings: { By: 'Meter', IDs: [], Phases: [], Groups: [], ChannelIDs: [], Aggregate: ''},
- ConfigUI: (props: DataSourceTypes.IConfigProps) => {
+ ConfigUI: (props: TrenDAP.ISourceConfig) => {
React.useEffect(() => {
const errors: string[] = [];
if (props.Settings.PQBrowserUrl === null || props.Settings.PQBrowserUrl.length === 0)
@@ -163,7 +163,7 @@ const XDADataSource: DataSourceTypes.IDataSource {
return new Promise((resolve, reject) => {
- const dataSetSettings = TypeCorrectSettings(setConn.Settings, XDADataSource.DefaultDataSetSettings);
+ const dataSetSettings = EnsureTypeSafety(setConn.Settings, XDADataSource.DefaultDataSetSettings);
const returnData: DataSetTypes.IDataSetMetaData[] = dataSetSettings.ChannelIDs.map(id => ({
ID: id.toString(),
Name: '',
@@ -208,7 +208,7 @@ const XDADataSource: DataSourceTypes.IDataSource {
return new Promise((resolve, reject) => {
- const dataSetSettings = TypeCorrectSettings(setConn.Settings, XDADataSource.DefaultDataSetSettings);
+ const dataSetSettings = EnsureTypeSafety(setConn.Settings, XDADataSource.DefaultDataSetSettings);
const returnData: DataSetTypes.IDataSetData[] = dataSetSettings.ChannelIDs.map(id => ({
ID: id.toString(),
Name: '',
@@ -272,8 +272,8 @@ const XDADataSource: DataSourceTypes.IDataSource Default Settings Objects, Unintiated Fields Match this Default
+*/
+export function EnsureTypeSafety(settingsObj: any, defaultSettings: T): T {
+ const s = cloneDeep(defaultSettings);
+ for (const [k] of Object.entries(defaultSettings)) {
+ if (settingsObj.hasOwnProperty(k))
+ s[k] = cloneDeep(settingsObj[k]);
+ }
+ return s;
+}
+
+/*
+ Interface that needs to be implemented by an DataSource
+ {T} => Settings Associated with this Datasource
+ {U} => Settings associated with the specific Datasource and Dataset
+*/
+export interface IDataSource {
+ DataSetUI: React.FC>,
+ ConfigUI: React.FC>,
+ LoadDataSetMeta: (dataSource: DataSourceTypes.IDataSourceView, dataSet: TrenDAP.iDataSet, dataConn: DataSourceTypes.IDataSourceDataSet)
+ => Promise,
+ LoadDataSet: (dataSource: DataSourceTypes.IDataSourceView, dataSet: TrenDAP.iDataSet, dataConn: DataSourceTypes.IDataSourceDataSet)
+ => Promise,
+ QuickViewDataSet?: (dataSource: DataSourceTypes.IDataSourceView, dataSet: TrenDAP.iDataSet, dataConn: DataSourceTypes.IDataSourceDataSet)
+ => string,
+ TestAuth: (dataSource: DataSourceTypes.IDataSourceView)
+ => Promise,
+ DefaultSourceSettings: T,
+ DefaultDataSetSettings: U,
+ Name: string,
+}
\ No newline at end of file
diff --git a/TrenDAP/wwwroot/TypeScript/Features/EventSources/AddEditEventSource.tsx b/TrenDAP/wwwroot/TypeScript/Features/EventSources/AddEditEventSource.tsx
new file mode 100644
index 00000000..c3853483
--- /dev/null
+++ b/TrenDAP/wwwroot/TypeScript/Features/EventSources/AddEditEventSource.tsx
@@ -0,0 +1,70 @@
+//******************************************************************************************************
+// AddEditEventSource.tsx - Gbtc
+//
+// Copyright © 2020, Grid Protection Alliance. All Rights Reserved.
+//
+// Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+// the NOTICE file distributed with this work for additional information regarding copyright ownership.
+// The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+// file except in compliance with the License. You may obtain a copy of the License at:
+//
+// http://opensource.org/licenses/MIT
+//
+// Unless agreed to in writing, the subject software distributed under the License is distributed on an
+// "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+// License for the specific language governing permissions and limitations.
+//
+// Code Modification History:
+// ----------------------------------------------------------------------------------------------------
+// 04/29/2024 - Gabriel Santos
+// Generated original version of source code.
+//
+//******************************************************************************************************
+
+
+import * as React from 'react';
+import { useAppDispatch } from '../../hooks';
+import { UpdateEventSource, AddEventSource } from './Slices/EventSourcesSlice';
+import EventSource from './EventSource';
+import { EventSourceTypes } from './Interface';
+import { Modal } from '@gpa-gemstone/react-interactive';
+import { CrossMark } from '@gpa-gemstone/gpa-symbols';
+
+interface IProps {
+ EventSource: EventSourceTypes.IEventSourceView,
+ Show: boolean,
+ SetShow: (shw: boolean) => void
+}
+
+const AddEditEventSource: React.FunctionComponent = (props: IProps) => {
+ const dispatch = useAppDispatch();
+ const [eventSource, setEventSource] = React.useState(props.EventSource);
+ const [errors, setErrors] = React.useState([]);
+
+ React.useEffect(() => { setEventSource(props.EventSource); }, [props.EventSource])
+
+ if (eventSource == null) return <>;
+ return (
+ 0}
+ Show={props.Show}
+ ShowX={true}
+ ConfirmText={'Save'}
+ ConfirmShowToolTip={errors.length > 0}
+ ConfirmToolTipContent={errors.map((e, i) => {CrossMark} {e}
)}
+ Title={`${eventSource.ID > -1 ? 'Edit' : 'Add New'} Event Data Source`}
+ CallBack={conf => {
+ if (conf) {
+ if (eventSource.ID > -1) dispatch(UpdateEventSource(eventSource));
+ else dispatch(AddEventSource(eventSource));
+ }
+ props.SetShow(false);
+ }}
+ >
+
+
+ );
+}
+
+export default AddEditEventSource;
\ No newline at end of file
diff --git a/TrenDAP/wwwroot/TypeScript/Features/EventSources/ByEventSources.tsx b/TrenDAP/wwwroot/TypeScript/Features/EventSources/ByEventSources.tsx
new file mode 100644
index 00000000..b6e3b0d6
--- /dev/null
+++ b/TrenDAP/wwwroot/TypeScript/Features/EventSources/ByEventSources.tsx
@@ -0,0 +1,168 @@
+//******************************************************************************************************
+// ByEventSources.tsx - Gbtc
+//
+// Copyright © 2020, Grid Protection Alliance. All Rights Reserved.
+//
+// Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+// the NOTICE file distributed with this work for additional information regarding copyright ownership.
+// The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+// file except in compliance with the License. You may obtain a copy of the License at:
+//
+// http://opensource.org/licenses/MIT
+//
+// Unless agreed to in writing, the subject software distributed under the License is distributed on an
+// "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+// License for the specific language governing permissions and limitations.
+//
+// Code Modification History:
+// ----------------------------------------------------------------------------------------------------
+// 04/29/2024 - Gabriel Santos
+// Generated original version of source code.
+//
+//******************************************************************************************************
+
+import * as React from 'react';
+import _ from 'lodash';
+import { EventSourceTypes, IEventSource } from './Interface';
+import { useAppSelector, useAppDispatch } from '../../hooks';
+import { ReactTable } from '@gpa-gemstone/react-table';
+import { SelectEventSources, SelectEventSourcesStatus, FetchEventSources, RemoveEventSource } from './Slices/EventSourcesSlice';
+import { TrashCan, HeavyCheckMark, Pencil } from './../../Constants';
+import AddEditEventSource from './AddEditEventSource';
+import { Warning } from '@gpa-gemstone/react-interactive';
+import RandomEvents from './Implementations/RandomEvents';
+import OpenXDAEvents from './Implementations/OpenXDAEvents';
+
+export const EventDataSources: IEventSource[] = [OpenXDAEvents, RandomEvents];
+
+const ByEventSources: React.FunctionComponent = () => {
+ const dispatch = useAppDispatch();
+ const [editEvt, setEditEvt] = React.useState(undefined);
+ const [showDelete, setShowDelete] = React.useState(false);
+ const [showEdit, setShowEdit] = React.useState(false);
+
+ return (
+
+
+
+
+
+
+
My Event Data Sources
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Shared Event Data Sources
+
+
+
+
+
+
+
{
+ if (c) dispatch(RemoveEventSource(editEvt));
+ setShowDelete(false);
+ }} />
+
+
+ TableClass="table table-hover"
+ TableStyle={{
+ padding: 0, width: 'calc(100%)', height: '100%',
+ tableLayout: 'fixed', overflow: 'hidden', display: 'flex', flexDirection: 'column', marginBottom: 0
+ }}
+ TheadStyle={{ fontSize: 'auto', tableLayout: 'fixed', display: 'table', width: '100%' }}
+ TbodyStyle={{ display: 'block', overflowY: 'scroll', flex: 1 }}
+ RowStyle={{ fontSize: 'smaller', display: 'table', tableLayout: 'fixed', width: '100%' }}
+ SortKey={sortField}
+ OnClick={() => { }}
+ OnSort={data => {
+ if (data.colKey === sortField) setAscending(s => !s);
+ else setSortField(data.colKey);
+ }}
+ Data={eventSources}
+ KeySelector={source => source.ID}
+ Ascending={ascending}>
+ Key={'Name'} Field={'Name'}>Name
+ Key={'Type'} Field={'Type'}>Type
+ {
+ props.OwnedByUser ?
+ AllowSort={false} Key={'Edit'} Field={'Public'}
+ Content={row => {row.item.Public ? HeavyCheckMark : null}}>Shared
+ : <>
+ }
+ {
+ props.OwnedByUser ?
+ AllowSort={false} Key={'Delete'} Field={'Public'}
+ Content={row =>
+
+
+
+ }
+ ><>
+ : <>
+ }
+
+
+ );
+});
+
+export default ByEventSources;
\ No newline at end of file
diff --git a/TrenDAP/wwwroot/TypeScript/Features/EventSources/EventDataSourceWrapper.tsx b/TrenDAP/wwwroot/TypeScript/Features/EventSources/EventDataSourceWrapper.tsx
new file mode 100644
index 00000000..835428d7
--- /dev/null
+++ b/TrenDAP/wwwroot/TypeScript/Features/EventSources/EventDataSourceWrapper.tsx
@@ -0,0 +1,81 @@
+//******************************************************************************************************
+// EventDataSourceWrapper.tsx - Gbtc
+//
+// Copyright © 2020, Grid Protection Alliance. All Rights Reserved.
+//
+// Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+// the NOTICE file distributed with this work for additional information regarding copyright ownership.
+// The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+// file except in compliance with the License. You may obtain a copy of the License at:
+//
+// http://opensource.org/licenses/MIT
+//
+// Unless agreed to in writing, the subject software distributed under the License is distributed on an
+// "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+// License for the specific language governing permissions and limitations.
+//
+// Code Modification History:
+// ----------------------------------------------------------------------------------------------------
+// 09/25/2020 - Billy Ernest
+// Generated original version of source code.
+//
+//******************************************************************************************************
+
+import * as React from 'react';
+import * as _ from 'lodash';
+import { TrenDAP } from '../../global';
+import { EventSourceTypes, IEventSource } from './Interface';
+import { EventDataSources } from './ByEventSources';
+
+interface IProps {
+ DataSet: TrenDAP.iDataSet,
+ Connection: EventSourceTypes.IEventSourceDataSet,
+ EventDataSource: EventSourceTypes.IEventSourceView,
+ SetConnection: (arg: EventSourceTypes.IEventSourceDataSet) => void,
+ SetErrors: (e: string[]) => void
+}
+
+const EventDataSourceWrapper: React.FunctionComponent = (props: IProps) => {
+ const implementation: IEventSource | null = React.useMemo(() => EventDataSources.find(t => t.Name == props.EventDataSource?.Type), [props.EventDataSource?.Type]);
+
+ const settings = React.useMemo(() => {
+ if (implementation == null)
+ return {};
+ const s = _.cloneDeep(implementation.DefaultDataSetSettings ?? {});
+ let custom = props.Connection.Settings;
+
+ for (const [k] of Object.entries(implementation?.DefaultDataSetSettings ?? {})) {
+ if (custom.hasOwnProperty(k))
+ s[k] = _.cloneDeep(custom[k]);
+ }
+ return s;
+ }, [implementation, props.Connection.Settings]);
+
+ // Ensure that source settings are valid
+ const eventSource = React.useMemo(() => {
+ if (implementation == null)
+ return props.EventDataSource;
+ const src = _.cloneDeep(props.EventDataSource);
+ const sourceSettings = _.cloneDeep(implementation.DefaultSourceSettings ?? {});
+ let custom = props.EventDataSource.Settings;
+ for (const [k] of Object.entries(sourceSettings)) {
+ if (custom.hasOwnProperty(k))
+ sourceSettings[k] = _.cloneDeep(custom[k]);
+ }
+ src.Settings = sourceSettings;
+ return src;
+ }, [props.EventDataSource]);
+
+ return (
+
+ {implementation != null ? props.SetConnection({ ...props.Connection, Settings: s })} /> : <>}
+
+ );
+}
+
+export default EventDataSourceWrapper;
\ No newline at end of file
diff --git a/TrenDAP/wwwroot/TypeScript/Features/EventSources/EventSource.tsx b/TrenDAP/wwwroot/TypeScript/Features/EventSources/EventSource.tsx
new file mode 100644
index 00000000..7bf30743
--- /dev/null
+++ b/TrenDAP/wwwroot/TypeScript/Features/EventSources/EventSource.tsx
@@ -0,0 +1,78 @@
+//******************************************************************************************************
+// EventSources.tsx - Gbtc
+//
+// Copyright © 2020, Grid Protection Alliance. All Rights Reserved.
+//
+// Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+// the NOTICE file distributed with this work for additional information regarding copyright ownership.
+// The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+// file except in compliance with the License. You may obtain a copy of the License at:
+//
+// http://opensource.org/licenses/MIT
+//
+// Unless agreed to in writing, the subject software distributed under the License is distributed on an
+// "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+// License for the specific language governing permissions and limitations.
+//
+// Code Modification History:
+// ----------------------------------------------------------------------------------------------------
+// 04/29/2024 - Gabriel Santos
+// Generated original version of source code.
+//
+//******************************************************************************************************
+
+import * as React from 'react';
+import * as _ from 'lodash';
+import { EventSourceTypes, IEventSource } from './Interface';
+import { EventDataSources } from './ByEventSources';
+import { Input, Select, CheckBox } from '@gpa-gemstone/react-forms';
+
+interface IProps {
+ EventSource: EventSourceTypes.IEventSourceView,
+ SetEventSource: (ds: EventSourceTypes.IEventSourceView) => void,
+ SetErrors: (e: string[]) => void
+}
+
+const EventSource: React.FunctionComponent = (props: IProps) => {
+ const [configErrors, setConfigErrors] = React.useState([]);
+ const implementation: IEventSource | null = React.useMemo(() => EventDataSources.find(t => t.Name == props.EventSource.Type), [props.EventSource.Type])
+
+ const settings = React.useMemo(() => {
+ if (implementation == null)
+ return {};
+ const s = _.cloneDeep(implementation.DefaultSourceSettings ?? {});
+ let custom = props.EventSource.Settings;
+
+ for (const [k] of Object.entries(implementation?.DefaultSourceSettings ?? {})) {
+ if (custom.hasOwnProperty(k))
+ s[k] = _.cloneDeep(custom[k]);
+ }
+ return s;
+ }, [implementation, props.EventSource.Settings]);
+
+ React.useEffect(() => {
+ const errors: string[] = [];
+ if (!valid('Name')) errors.push("Name between 0 and 200 characters is required.");
+ props.SetErrors([...errors, ...configErrors]);
+ }, [props.EventSource.Name, configErrors])
+
+ function valid(field: keyof (EventSourceTypes.IEventSourceView)): boolean {
+ if (field == 'Name')
+ return props.EventSource.Name != null && props.EventSource.Name.length > 0 && props.EventSource.Name.length <= 200;
+ return false;
+ }
+
+ return (
+
+ );
+}
+
+export default EventSource;
\ No newline at end of file
diff --git a/TrenDAP/wwwroot/TypeScript/Features/EventSources/Implementations/OpenXDAEvents.tsx b/TrenDAP/wwwroot/TypeScript/Features/EventSources/Implementations/OpenXDAEvents.tsx
new file mode 100644
index 00000000..dd3b571f
--- /dev/null
+++ b/TrenDAP/wwwroot/TypeScript/Features/EventSources/Implementations/OpenXDAEvents.tsx
@@ -0,0 +1,488 @@
+//******************************************************************************************************
+// OpenXDAEvents.tsx - Gbtc
+//
+// Copyright © 2024, Grid Protection Alliance. All Rights Reserved.
+//
+// Licensed to the Grid Protection Alliance (GPA) under one or more contributor license agreements. See
+// the NOTICE file distributed with this work for additional information regarding copyright ownership.
+// The GPA licenses this file to you under the MIT License (MIT), the "License"; you may not use this
+// file except in compliance with the License. You may obtain a copy of the License at:
+//
+// http://opensource.org/licenses/MIT
+//
+// Unless agreed to in writing, the subject software distributed under the License is distributed on an
+// "AS-IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. Refer to the
+// License for the specific language governing permissions and limitations.
+//
+// Code Modification History:
+// ----------------------------------------------------------------------------------------------------
+// 05/07/2024 - Gabriel Santos
+// Generated original version of source code.
+//
+//******************************************************************************************************
+
+import * as React from 'react';
+import * as $ from 'jquery';
+import _ from 'lodash';
+import moment from 'moment';
+import queryString from 'querystring';
+import { TrenDAP, Redux } from '../../../global';
+import { SelectOpenXDA, FetchOpenXDA, SelectOpenXDAStatus } from '../../OpenXDA/OpenXDASlice';
+import { useAppSelector, useAppDispatch } from '../../../hooks';
+import { EventSourceTypes, IEventSource, EnsureTypeSafety } from '../Interface';
+import { ComputeTimeCenterAndSize } from '../../DataSets/HelperFunctions';
+import { ArrayCheckBoxes, ArrayMultiSelect, Input, Select } from '@gpa-gemstone/react-forms';
+import { OpenXDA } from '@gpa-gemstone/application-typings';
+
+const encodedDateFormat = 'MM/DD/YYYY';
+const encodedTimeFormat = 'HH:mm:ss.SSS';
+
+interface ISetting { PQBrowserUrl: string }
+interface IDatasetSetting {
+ // Todo: Replace this with 4 arrays that match eventsearch on sebrowser after we get access to generic slices
+ By: 'Asset' | 'Meter', IDs: number[],
+ Phases: number[],
+ LegacyPhases: { AN: boolean, BN: boolean, CN: boolean, AB: boolean, BC: boolean, CA: boolean, ABG: boolean, BCG: boolean, ABC: boolean, ABCG: boolean },
+ Types: number[],
+ CurveID: number | null,
+ CurveInside: boolean,
+ DurationMin: number | null,
+ DurationMax: number | null,
+ TransientMin: number | null,
+ TransientMax: number | null,
+ TransientType: 'LL' | 'LN' | 'both',
+ SagMin: number | null,
+ SagMax: number | null,
+ SagType: 'LL' | 'LN' | 'both',
+ SwellMin: number | null,
+ SwellMax: number | null,
+ SwellType: 'LL' | 'LN' | 'both'
+}
+
+const OpenXDAEvents: IEventSource = {
+ Name: 'OpenXDA',
+ DefaultSourceSettings: { PQBrowserUrl: "http://localhost:44368/" },
+ DefaultDataSetSettings: {
+ By: 'Meter',
+ IDs: [],
+ Phases: [],
+ LegacyPhases: { AN: false, BN: false, CN: false, AB: false, BC: false, CA: false, ABG: false, BCG: false, ABC: false, ABCG: false },
+ Types: [],
+ DurationMin: null,
+ DurationMax: null,
+ SwellMin: null,
+ SwellMax: null,
+ SagMin: null,
+ SagMax: null,
+ TransientMin: null,
+ TransientMax: null,
+ CurveID: null,
+ CurveInside: true,
+ TransientType: 'both',
+ SagType: 'both',
+ SwellType: 'both'
+ },
+ ConfigUI: (props: TrenDAP.ISourceConfig) => {
+ React.useEffect(() => {
+ const errors: string[] = [];
+ if (props.Settings.PQBrowserUrl === null || props.Settings.PQBrowserUrl.length === 0)
+ errors.push("PQ Browser URL is required by datasource.");
+ props.SetErrors(errors);
+ }, [props.Settings]);
+
+ function valid(field: string): boolean {
+ if (field === 'PQBrowserUrl') return (props.Settings.PQBrowserUrl !== null && props.Settings.PQBrowserUrl.length !== 0);
+ return true;
+ }
+
+ return ;
+ },
+ DataSetUI: (props: EventSourceTypes.IEventSourceDataSetProps) => {
+ const dispatch = useAppDispatch();
+ const phases: OpenXDA.Types.Phase[] = useAppSelector((state: Redux.StoreState) => SelectOpenXDA(state, props.EventSource.ID, 'Phase', 'event'));
+ const phaseStatus: TrenDAP.Status = useAppSelector((state: Redux.StoreState) => SelectOpenXDAStatus(state, props.EventSource.ID, 'Phase', 'event'));
+ const meters: OpenXDA.Types.Meter[] = useAppSelector((state: Redux.StoreState) => SelectOpenXDA(state, props.EventSource.ID, 'Meter', 'event'));
+ const meterStatus: TrenDAP.Status = useAppSelector((state: Redux.StoreState) => SelectOpenXDAStatus(state, props.EventSource.ID, 'Meter', 'event'));
+ const assets: OpenXDA.Types.Asset[] = useAppSelector((state: Redux.StoreState) => SelectOpenXDA(state, props.EventSource.ID, 'Asset', 'event'));
+ const assetStatus: TrenDAP.Status = useAppSelector((state: Redux.StoreState) => SelectOpenXDAStatus(state, props.EventSource.ID, 'Asset', 'event'));
+ const types: OpenXDA.Types.EventType[] = useAppSelector((state: Redux.StoreState) => SelectOpenXDA(state, props.EventSource.ID, 'EventType', 'event'));
+ const typeStatus: TrenDAP.Status = useAppSelector((state: Redux.StoreState) => SelectOpenXDAStatus(state, props.EventSource.ID, 'EventType', 'event'));
+ const curves: any[] = useAppSelector((state: Redux.StoreState) => SelectOpenXDA(state, props.EventSource.ID, 'StandardMagDurCurve', 'event'));
+ const curveStatus: TrenDAP.Status = useAppSelector((state: Redux.StoreState) => SelectOpenXDAStatus(state, props.EventSource.ID, 'StandardMagDurCurve', 'event'));
+
+ React.useEffect(() => {
+ const errors: string[] = [];
+ if (!valid('DurationMin') || !valid('DurationMax'))
+ errors.push('Duration range is not valid.');
+ if (!valid('SagMin') || !valid('SagMax'))
+ errors.push('Sag range is not valid.');
+ if (!valid('SwellMin') || !valid('SwellMax'))
+ errors.push('Swell range is not valid.');
+ if (!valid('TransientMin') || !valid('TransientMax'))
+ errors.push('Transient range is not valid.');
+ props.SetErrors(errors);
+ }, [props.Settings]);
+
+ React.useEffect(() => {
+ if (phaseStatus === 'unitiated' || phaseStatus === 'changed')
+ dispatch(FetchOpenXDA({ dataSourceID: props.EventSource.ID, sourceType: 'event', table: 'Phase' }));
+ }, [phaseStatus]);
+
+ React.useEffect(() => {
+ if (meterStatus === 'unitiated' || meterStatus === 'changed')
+ dispatch(FetchOpenXDA({ dataSourceID: props.EventSource.ID, sourceType: 'event', table: 'Meter' }));
+ }, [meterStatus]);
+
+ React.useEffect(() => {
+ if (assetStatus === 'unitiated' || assetStatus === 'changed')
+ dispatch(FetchOpenXDA({ dataSourceID: props.EventSource.ID, sourceType: 'event', table: 'Asset' }));
+ }, [assetStatus]);
+
+ React.useEffect(() => {
+ if (typeStatus === 'unitiated' || typeStatus === 'changed')
+ dispatch(FetchOpenXDA({ dataSourceID: props.EventSource.ID, sourceType: 'event', table: 'EventType' }));
+ }, [typeStatus]);
+
+ React.useEffect(() => {
+ if (curveStatus === 'unitiated' || curveStatus === 'changed')
+ dispatch(FetchOpenXDA({ dataSourceID: props.EventSource.ID, sourceType: 'event', table: 'StandardMagDurCurve' }));
+ }, [curveStatus]);
+
+ function valid(field: keyof IDatasetSetting) {
+ function NullOrNaN(val) {
+ return val == null || isNaN(val);
+ }
+
+ if (field == 'DurationMin')
+ return NullOrNaN(props.Settings.DurationMin) || (
+ props.Settings.DurationMin >= 0 && props.Settings.DurationMin < 100 &&
+ (NullOrNaN(props.Settings.DurationMax) ||
+ props.Settings.DurationMax >= props.Settings.DurationMin));
+ if (field == 'DurationMax')
+ return NullOrNaN(props.Settings.DurationMax) || (
+ props.Settings.DurationMax >= 0 && props.Settings.DurationMax < 100 &&
+ (NullOrNaN(props.Settings.DurationMin) ||
+ props.Settings.DurationMax >= props.Settings.DurationMin));
+ if (field == 'SagMin')
+ return NullOrNaN(props.Settings.SagMin) || (
+ props.Settings.SagMin >= 0 && props.Settings.SagMin < 1 &&
+ (NullOrNaN(props.Settings.SagMax) ||
+ props.Settings.SagMax >= props.Settings.SagMin));
+ if (field == 'SagMax')
+ return NullOrNaN(props.Settings.SagMax) || (
+ props.Settings.SagMax >= 0 && props.Settings.SagMax < 1 &&
+ (NullOrNaN(props.Settings.SagMax) ||
+ props.Settings.SagMax >= props.Settings.SagMax));
+ if (field == 'SwellMin')
+ return NullOrNaN(props.Settings.SwellMin) || (
+ props.Settings.SwellMin >= 1 && props.Settings.SwellMin < 9999 &&
+ (NullOrNaN(props.Settings.SwellMax) ||
+ props.Settings.SwellMax >= props.Settings.SwellMin));
+ if (field == 'SwellMax')
+ return NullOrNaN(props.Settings.SwellMax) || (
+ props.Settings.SwellMax >= 1 && props.Settings.SwellMax < 9999 &&
+ (NullOrNaN(props.Settings.SwellMin) ||
+ props.Settings.SwellMax >= props.Settings.SwellMin));
+ if (field == 'TransientMin')
+ return NullOrNaN(props.Settings.TransientMin) || (
+ props.Settings.TransientMin >= 0 && props.Settings.TransientMin < 9999 &&
+ (NullOrNaN(props.Settings.TransientMax) ||
+ props.Settings.TransientMax >= props.Settings.TransientMin));
+ if (field == 'TransientMax')
+ return NullOrNaN(props.Settings.TransientMax) || (
+ props.Settings.TransientMax >= 0 && props.Settings.TransientMax < 9999 &&
+ (NullOrNaN(props.Settings.TransientMin) ||
+ props.Settings.TransientMax >= props.Settings.TransientMin));
+
+ return true;
+ }
+
+ function setPhases(record: IDatasetSetting) {
+ const phaseFilter = { ...props.Settings.LegacyPhases };
+ Object.keys(phaseFilter).forEach(phaseField => {
+ const phaseId = phases.find(p => p.Name == phaseField)?.ID ?? -1;
+ phaseFilter[phaseField] = (phaseId !== -1) &&
+ (record.Phases.findIndex(p => p == phaseId) !== -1);
+ });
+ const newRecord: IDatasetSetting = { ...record, LegacyPhases: phaseFilter };
+ props.SetSettings(newRecord);
+ }
+
+ return (
+
+
+
Record={props.Settings} Field="By" Options={[{ Value: 'Meter', Label: 'Meter' }, { Value: 'Asset', Label: 'Asset' }]} Setter={props.SetSettings} />
+ Style={{ height: window.innerHeight - 560 }} Record={props.Settings} Field="IDs" Setter={props.SetSettings}
+ Options={(props.Settings.By == 'Meter' ? meters?.map(m => ({ Value: m.ID.toString(), Label: m.Name })) : assets?.map(m => ({ Value: m.ID.toString(), Label: m.AssetName }))) ?? []} />
+
+
+
Record={props.Settings} Checkboxes={types?.map(m => ({ ID: m.ID.toString(), Label: m.Name })) ?? []} Field="Types" Setter={props.SetSettings} />
+ Record={props.Settings} Checkboxes={phases?.map(m => ({ ID: m.ID.toString(), Label: m.Name })) ?? []} Field="Phases" Setter={setPhases} />
+
+
+
+
+