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>

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));