summaryrefslogtreecommitdiffstats
path: root/sdnr/wt/odlux/apps/faultApp/src/views
diff options
context:
space:
mode:
authorsai-neetha <sai-neetha.phulmali@highstreet-technologies.com>2023-03-20 08:05:47 +0100
committerhighstreetherbert <herbert.eiselt@highstreet-technologies.com>2023-03-29 19:06:25 +0200
commit15e2d3a29b0d1a304965e34f114a911e5a7abdb3 (patch)
tree711ef5616aceb115a1081cccd152eeae0e87bc79 /sdnr/wt/odlux/apps/faultApp/src/views
parentac5e2dc8f1ee4d5549f7260374e8164d52b07f55 (diff)
Odlux Update
Add eslint and custom icons update Issue-ID: CCSDK-3871 Signed-off-by: sai-neetha <sai-neetha.phulmali@highstreet-technologies.com> Change-Id: If6b676128cc9cff0437a5dc54f85eaafd3b8c586 Signed-off-by: highstreetherbert <herbert.eiselt@highstreet-technologies.com>
Diffstat (limited to 'sdnr/wt/odlux/apps/faultApp/src/views')
-rw-r--r--sdnr/wt/odlux/apps/faultApp/src/views/faultApplication.tsx185
1 files changed, 87 insertions, 98 deletions
diff --git a/sdnr/wt/odlux/apps/faultApp/src/views/faultApplication.tsx b/sdnr/wt/odlux/apps/faultApp/src/views/faultApplication.tsx
index b9cd5e4da..b9f115ed7 100644
--- a/sdnr/wt/odlux/apps/faultApp/src/views/faultApplication.tsx
+++ b/sdnr/wt/odlux/apps/faultApp/src/views/faultApplication.tsx
@@ -15,44 +15,37 @@
* the License.
* ============LICENSE_END==========================================================================
*/
-import * as React from 'react';
+import React from 'react';
+import { RouteComponentProps, withRouter } from 'react-router-dom';
-import { withRouter, RouteComponentProps } from 'react-router-dom';
-
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
-
-import { MaterialTable, ColumnType, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
-import { Panel } from '../../../../framework/src/components/material-ui';
+import Refresh from '@mui/icons-material/Refresh';
+import Sync from '@mui/icons-material/Sync';
+import { AppBar, Tab, Tabs } from '@mui/material';
+import { ColumnType, MaterialTable, MaterialTableCtorType } from '../../../../framework/src/components/material-table';
+import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect';
import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore';
-import connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect';
-import { Fault, FaultAlarmNotification } from '../models/fault';
-import { PanelId } from '../models/panelId';
-
-import { createCurrentProblemsProperties, createCurrentProblemsActions, currentProblemsReloadAction } from '../handlers/currentProblemsHandler';
-import { createAlarmLogEntriesProperties, createAlarmLogEntriesActions, alarmLogEntriesReloadAction } from '../handlers/alarmLogEntriesHandler';
import { setPanelAction } from '../actions/panelChangeActions';
-import { Tooltip, IconButton, AppBar, Tabs, Tab } from '@mui/material';
-import Sync from '@mui/icons-material/Sync';
-import Refresh from '@mui/icons-material/Refresh';
-
import ClearStuckAlarmsDialog, { ClearStuckAlarmsDialogMode } from '../components/clearStuckAlarmsDialog';
import RefreshAlarmLogDialog, { RefreshAlarmLogDialogMode } from '../components/refreshAlarmLogDialog';
-import RefreshCurrentProblemsDialog, { RefreshCurrentProblemsDialogMode } from '../components/refreshCurrentProblemsDialog';
+import RefreshCurrentAlarmsDialog, { RefreshCurrentAlarmsDialogMode } from '../components/refreshCurrentAlarmsDialog';
+import { alarmLogEntriesReloadAction, createAlarmLogEntriesActions, createAlarmLogEntriesProperties } from '../handlers/alarmLogEntriesHandler';
+import { createCurrentAlarmsActions, createCurrentAlarmsProperties, currentAlarmsReloadAction } from '../handlers/currentAlarmsHandler';
+import { Fault, FaultAlarmNotification } from '../models/fault';
+import { PanelId } from '../models/panelId';
const mapProps = (state: IApplicationStoreState) => ({
panelId: state.fault.currentOpenPanel,
- currentProblemsProperties: createCurrentProblemsProperties(state),
+ currentAlarmsProperties: createCurrentAlarmsProperties(state),
faultNotifications: state.fault.faultNotifications,
- alarmLogEntriesProperties: createAlarmLogEntriesProperties(state)
+ alarmLogEntriesProperties: createAlarmLogEntriesProperties(state),
});
const mapDisp = (dispatcher: IDispatcher) => ({
- currentProblemsActions: createCurrentProblemsActions(dispatcher.dispatch),
+ currentAlarmsActions: createCurrentAlarmsActions(dispatcher.dispatch),
alarmLogEntriesActions: createAlarmLogEntriesActions(dispatcher.dispatch),
- reloadCurrentProblems: () => dispatcher.dispatch(currentProblemsReloadAction),
+ reloadCurrentAlarms: () => dispatcher.dispatch(currentAlarmsReloadAction),
reloadAlarmLogEntries: () => dispatcher.dispatch(alarmLogEntriesReloadAction),
switchActivePanel: (panelId: PanelId) => {
dispatcher.dispatch(setPanelAction(panelId));
@@ -62,63 +55,59 @@ const mapDisp = (dispatcher: IDispatcher) => ({
type FaultApplicationComponentProps = RouteComponentProps & Connect<typeof mapProps, typeof mapDisp>;
type FaultApplicationState = {
- clearAlarmDialogMode: ClearStuckAlarmsDialogMode,
- stuckAlarms: string[],
- refreshAlarmLogEditorMode: RefreshAlarmLogDialogMode,
- refreshCurrentProblemsEditorMode: RefreshCurrentProblemsDialogMode
-}
+ clearAlarmDialogMode: ClearStuckAlarmsDialogMode;
+ stuckAlarms: string[];
+ refreshAlarmLogEditorMode: RefreshAlarmLogDialogMode;
+ refreshCurrentAlarmsEditorMode: RefreshCurrentAlarmsDialogMode;
+};
const FaultTable = MaterialTable as MaterialTableCtorType<Fault>;
const FaultAlarmNotificationTable = MaterialTable as MaterialTableCtorType<FaultAlarmNotification>;
-let currentProblemsInitalSorted = false;
+let currentAlarmsInitalSorted = false;
let alarmLogInitialSorted = false;
-class FaultApplicationComponent extends React.Component<FaultApplicationComponentProps, FaultApplicationState>{
-
- /**
- *
- */
+class FaultApplicationComponent extends React.Component<FaultApplicationComponentProps, FaultApplicationState> {
constructor(props: FaultApplicationComponentProps) {
super(props);
this.state = {
clearAlarmDialogMode: ClearStuckAlarmsDialogMode.None,
stuckAlarms: [],
refreshAlarmLogEditorMode: RefreshAlarmLogDialogMode.None,
- refreshCurrentProblemsEditorMode: RefreshCurrentProblemsDialogMode.None
- }
+ refreshCurrentAlarmsEditorMode: RefreshCurrentAlarmsDialogMode.None,
+ };
}
onDialogClose = () => {
- this.setState({ clearAlarmDialogMode: ClearStuckAlarmsDialogMode.None, stuckAlarms: [] })
- }
+ this.setState({ clearAlarmDialogMode: ClearStuckAlarmsDialogMode.None, stuckAlarms: [] });
+ };
onDialogOpen = () => {
- const stuckAlarms = [...new Set(this.props.currentProblemsProperties.rows.map(item => item.nodeId))];
- this.setState({ clearAlarmDialogMode: ClearStuckAlarmsDialogMode.Show, stuckAlarms: stuckAlarms })
- }
+ const stuckAlarms = [...new Set(this.props.currentAlarmsProperties.rows.map(item => item.nodeId))];
+ this.setState({ clearAlarmDialogMode: ClearStuckAlarmsDialogMode.Show, stuckAlarms: stuckAlarms });
+ };
private onHandleTabChange = (event: React.SyntheticEvent, newValue: PanelId) => {
this.onToggleTabs(newValue);
- }
+ };
private onToggleTabs = (panelId: PanelId) => {
const nextActivePanel = panelId;
this.props.switchActivePanel(nextActivePanel);
switch (nextActivePanel) {
- case 'CurrentProblem':
- if (!currentProblemsInitalSorted) {
- currentProblemsInitalSorted = true;
- this.props.currentProblemsActions.onHandleExplicitRequestSort("timestamp", "desc");
+ case 'CurrentAlarms':
+ if (!currentAlarmsInitalSorted) {
+ currentAlarmsInitalSorted = true;
+ this.props.currentAlarmsActions.onHandleExplicitRequestSort('timestamp', 'desc');
} else {
- this.props.reloadCurrentProblems();
+ this.props.reloadCurrentAlarms();
}
break;
case 'AlarmLog':
if (!alarmLogInitialSorted) {
alarmLogInitialSorted = true;
- this.props.alarmLogEntriesActions.onHandleExplicitRequestSort("timestamp", "desc");
+ this.props.alarmLogEntriesActions.onHandleExplicitRequestSort('timestamp', 'desc');
} else {
this.props.reloadAlarmLogEntries();
}
@@ -136,27 +125,27 @@ class FaultApplicationComponent extends React.Component<FaultApplicationComponen
render(): JSX.Element {
const clearAlarmsAction = {
- icon: Sync, tooltip: 'Clear stuck alarms', ariaLabel:'clear-stuck-alarms', onClick: this.onDialogOpen
+ icon: Sync, tooltip: 'Clear stuck alarms', ariaLabel:'clear-stuck-alarms', onClick: this.onDialogOpen,
};
- const refreshCurrentProblemsAction = {
- icon: Refresh, tooltip: 'Refresh Current Problems List', ariaLabel:'refresh', onClick: () => {
+ const refreshCurrentAlarmsAction = {
+ icon: Refresh, tooltip: 'Refresh Current Alarms List', ariaLabel:'refresh', onClick: () => {
this.setState({
- refreshCurrentProblemsEditorMode: RefreshCurrentProblemsDialogMode.RefreshCurrentProblemsTable
+ refreshCurrentAlarmsEditorMode: RefreshCurrentAlarmsDialogMode.RefreshCurrentAlarmsTable,
});
- }
+ },
};
const refreshAlarmLogAction = {
icon: Refresh, tooltip: 'Refresh Alarm log table', ariaLabel:'refresh', onClick: () => {
this.setState({
- refreshAlarmLogEditorMode: RefreshAlarmLogDialogMode.RefreshAlarmLogTable
+ refreshAlarmLogEditorMode: RefreshAlarmLogDialogMode.RefreshAlarmLogTable,
});
- }
+ },
};
- const areFaultsAvailable = this.props.currentProblemsProperties.rows && this.props.currentProblemsProperties.rows.length > 0
- const customActions = areFaultsAvailable ? [clearAlarmsAction, refreshCurrentProblemsAction] : [refreshCurrentProblemsAction];
+ const areFaultsAvailable = this.props.currentAlarmsProperties.rows && this.props.currentAlarmsProperties.rows.length > 0;
+ const customActions = areFaultsAvailable ? [clearAlarmsAction, refreshCurrentAlarmsAction] : [refreshCurrentAlarmsAction];
const { panelId: activePanelId } = this.props;
@@ -164,26 +153,26 @@ class FaultApplicationComponent extends React.Component<FaultApplicationComponen
<>
<AppBar enableColorOnDark position="static" >
<Tabs indicatorColor="secondary" textColor="inherit" value={activePanelId} onChange={this.onHandleTabChange} aria-label="fault-tabs">
- <Tab aria-label="current-problem-list-tab" label="Current Problem List" value="CurrentProblem" />
+ <Tab aria-label="current-alarms-list-tab" label="Current Alarms" value="CurrentAlarms" />
<Tab aria-label="alarm-notifications-list-tab" label={`Alarm Notifications (${this.props.faultNotifications.faults.length})`} value="AlarmNotifications" />
<Tab aria-label="alarm-log-tab" label="Alarm Log" value="AlarmLog" />
</Tabs>
</AppBar>
{
- activePanelId === 'CurrentProblem' &&
+ activePanelId === 'CurrentAlarms' &&
<>
- <FaultTable stickyHeader tableId="current-problems-table" idProperty="id" customActionButtons={customActions} columns={[
+ <FaultTable stickyHeader tableId="current-alarms-table" idProperty="id" customActionButtons={customActions} columns={[
// { property: "icon", title: "", type: ColumnType.custom, customControl: this.renderIcon },
- { property: "severity", title: "Severity", type: ColumnType.text, width: "140px" },
- { property: "timestamp", type: ColumnType.text, title: "Timestamp" },
- { property: "nodeId", title: "Node Name", type: ColumnType.text },
- { property: "counter", title: "Count", type: ColumnType.numeric, width: "100px" },
- { property: "objectId", title: "Object Id", type: ColumnType.text },
- { property: "problem", title: "Alarm Type", type: ColumnType.text },
- ]} {...this.props.currentProblemsProperties} {...this.props.currentProblemsActions} />
- <RefreshCurrentProblemsDialog
- mode={this.state.refreshCurrentProblemsEditorMode}
- onClose={this.onCloseRefreshCurrentProblemsDialog}
+ { property: 'severity', title: 'Severity', type: ColumnType.text, width: '140px' },
+ { property: 'timestamp', type: ColumnType.text, title: 'Timestamp' },
+ { property: 'nodeId', title: 'Node Name', type: ColumnType.text },
+ { property: 'counter', title: 'Count', type: ColumnType.numeric, width: '100px' },
+ { property: 'objectId', title: 'Object Id', type: ColumnType.text },
+ { property: 'problem', title: 'Alarm Type', type: ColumnType.text },
+ ]} {...this.props.currentAlarmsProperties} {...this.props.currentAlarmsActions} />
+ <RefreshCurrentAlarmsDialog
+ mode={this.state.refreshCurrentAlarmsEditorMode}
+ onClose={this.onCloseRefreshCurrentAlarmsDialog}
/>
</>
}
@@ -191,12 +180,12 @@ class FaultApplicationComponent extends React.Component<FaultApplicationComponen
<FaultAlarmNotificationTable stickyHeader tableId="alarm-notifications-table" idProperty="id" defaultSortColumn='timeStamp' defaultSortOrder='desc' rows={this.props.faultNotifications.faults} asynchronus columns={[
// { property: "icon", title: "", type: ColumnType.custom, customControl: this.renderIcon },
- { property: "severity", title: "Severity", width: "140px" },
- { property: "timeStamp", title: "Timestamp" },
- { property: "nodeName", title: "Node Name" },
- { property: "counter", title: "Count", width: "100px", type: ColumnType.numeric },
- { property: "objectId", title: "Object Id" },
- { property: "problem", title: "Alarm Type" },
+ { property: 'severity', title: 'Severity', width: '140px', type: ColumnType.text },
+ { property: 'timeStamp', title: 'Timestamp', type: ColumnType.text },
+ { property: 'nodeName', title: 'Node Name', type: ColumnType.text },
+ { property: 'counter', title: 'Count', width: '100px', type: ColumnType.numeric },
+ { property: 'objectId', title: 'Object Id', type: ColumnType.text },
+ { property: 'problem', title: 'Alarm Type', type: ColumnType.text },
]} />
}
@@ -205,13 +194,13 @@ class FaultApplicationComponent extends React.Component<FaultApplicationComponen
<FaultTable stickyHeader idProperty={'id'} tableId="alarm-log-table" customActionButtons={[refreshAlarmLogAction]}
columns={[
// { property: "icon", title: "", type: ColumnType.custom, customControl: this.renderIcon },
- { property: "severity", title: "Severity", width: "140px" },
- { property: "timestamp", title: "Timestamp" },
- { property: "nodeId", title: "Node Name" },
- { property: "counter", title: "Count", type: ColumnType.numeric, width: "100px" },
- { property: "objectId", title: "Object Id" },
- { property: "problem", title: "Alarm Type" },
- { property: "sourceType", title: "Source", width: "140px" },
+ { property: 'severity', title: 'Severity', width: '140px' },
+ { property: 'timestamp', title: 'Timestamp' },
+ { property: 'nodeId', title: 'Node Name' },
+ { property: 'counter', title: 'Count', type: ColumnType.numeric, width: '100px' },
+ { property: 'objectId', title: 'Object Id' },
+ { property: 'problem', title: 'Alarm Type' },
+ { property: 'sourceType', title: 'Source', width: '140px' },
]} {...this.props.alarmLogEntriesProperties} {...this.props.alarmLogEntriesActions} />
<RefreshAlarmLogDialog
mode={this.state.refreshAlarmLogEditorMode}
@@ -224,34 +213,34 @@ class FaultApplicationComponent extends React.Component<FaultApplicationComponen
this.state.clearAlarmDialogMode !== ClearStuckAlarmsDialogMode.None && <ClearStuckAlarmsDialog mode={this.state.clearAlarmDialogMode} numberDevices={this.state.stuckAlarms.length} stuckAlarms={this.state.stuckAlarms} onClose={this.onDialogClose} />
}
</>
- )
-
- };
+ );
+ }
public componentDidMount() {
if (this.props.panelId === null) { //set default tab if none is set
- this.onToggleTabs("CurrentProblem");
- }else{
+ this.onToggleTabs('CurrentAlarms');
+ } else {
this.onToggleTabs(this.props.panelId);
}
}
- private renderIcon = (props: { rowData: Fault | FaultAlarmNotification }) => {
- return (
- <FontAwesomeIcon icon={faExclamationTriangle} />
- );
- };
+ // private renderIcon = (props: { rowData: Fault | FaultAlarmNotification }) => {
+ // return (
+ // <FontAwesomeIcon icon={faExclamationTriangle} />
+ // );
+ // };
private onCloseRefreshAlarmLogDialog = () => {
this.setState({
- refreshAlarmLogEditorMode: RefreshAlarmLogDialogMode.None
+ refreshAlarmLogEditorMode: RefreshAlarmLogDialogMode.None,
});
- }
- private onCloseRefreshCurrentProblemsDialog = () => {
+ };
+
+ private onCloseRefreshCurrentAlarmsDialog = () => {
this.setState({
- refreshCurrentProblemsEditorMode: RefreshCurrentProblemsDialogMode.None
+ refreshCurrentAlarmsEditorMode: RefreshCurrentAlarmsDialogMode.None,
});
- }
+ };
}
export const FaultApplication = withRouter(connect(mapProps, mapDisp)(FaultApplicationComponent));