diff options
Diffstat (limited to 'sdnr/wt/odlux/apps/faultApp/src/components')
6 files changed, 340 insertions, 350 deletions
diff --git a/sdnr/wt/odlux/apps/faultApp/src/components/clearStuckAlarmsDialog.tsx b/sdnr/wt/odlux/apps/faultApp/src/components/clearStuckAlarmsDialog.tsx index 463c2079c..e86b756a7 100644 --- a/sdnr/wt/odlux/apps/faultApp/src/components/clearStuckAlarmsDialog.tsx +++ b/sdnr/wt/odlux/apps/faultApp/src/components/clearStuckAlarmsDialog.tsx @@ -16,119 +16,122 @@ * ============LICENSE_END========================================================================== */ -import * as React from 'react' -import { DialogContent, DialogActions, Button, Dialog, DialogTitle, DialogContentText } from '@mui/material'; -import { currentProblemsReloadAction } from '../handlers/currentProblemsHandler'; +import React from 'react'; + +import { Button, Dialog, DialogActions, DialogContent, DialogContentText, DialogTitle } from '@mui/material'; + +import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect'; + import { clearStuckAlarmAsyncAction } from '../actions/clearStuckAlarmsAction'; -import connect, { IDispatcher, Connect } from '../../../../framework/src/flux/connect'; +import { currentAlarmsReloadAction } from '../handlers/currentAlarmsHandler'; export enum ClearStuckAlarmsDialogMode { - None = "none", - Show = "show" + None = 'none', + Show = 'show', } const mapDispatch = (dispatcher: IDispatcher) => ({ - clearStuckAlarmsAsync: clearStuckAlarmAsyncAction(dispatcher.dispatch), - reloadCurrentProblemsAction: () => dispatcher.dispatch(currentProblemsReloadAction) + clearStuckAlarmsAsync: clearStuckAlarmAsyncAction(dispatcher.dispatch), + reloadCurrentAlarmsAction: () => dispatcher.dispatch(currentAlarmsReloadAction), }); type clearStuckAlarmsProps = Connect<typeof undefined, typeof mapDispatch> & { - numberDevices: Number; - mode: ClearStuckAlarmsDialogMode; - stuckAlarms: string[]; - onClose: () => void; -} + numberDevices: Number; + mode: ClearStuckAlarmsDialogMode; + stuckAlarms: string[]; + onClose: () => void; +}; type ClearStuckAlarmsState = { - clearAlarmsSuccessful: boolean; - errormessage: string; - unclearedAlarms: string[]; -} - -class ClearStuckAlarmsDialogComponent extends React.Component<clearStuckAlarmsProps, ClearStuckAlarmsState>{ - constructor(props: clearStuckAlarmsProps) { - super(props); - this.state = { - clearAlarmsSuccessful: true, - errormessage: '', - unclearedAlarms: [] - }; - } - - onClose = (event: React.MouseEvent) => { - event.stopPropagation(); - event.preventDefault(); - this.props.onClose(); + clearAlarmsSuccessful: boolean; + errormessage: string; + unclearedAlarms: string[]; +}; + +class ClearStuckAlarmsDialogComponent extends React.Component<clearStuckAlarmsProps, ClearStuckAlarmsState> { + constructor(props: clearStuckAlarmsProps) { + super(props); + this.state = { + clearAlarmsSuccessful: true, + errormessage: '', + unclearedAlarms: [], + }; + } + + onClose = (event: React.MouseEvent) => { + event.stopPropagation(); + event.preventDefault(); + this.props.onClose(); + }; + + onRefresh = async (event: React.MouseEvent) => { + event.stopPropagation(); + event.preventDefault(); + const result = await this.props.clearStuckAlarmsAsync(this.props.stuckAlarms); + + if (result && result['devicemanager:output'].nodenames && result['devicemanager:output'].nodenames.length !== this.props.stuckAlarms.length) { //show errormessage if not all devices were cleared + const undeletedAlarm = this.props.stuckAlarms.filter(item => !result['devicemanager:output'].nodenames.includes(item)); + const error = 'The alarms of the following devices couldn\'t be refreshed: '; + this.setState({ clearAlarmsSuccessful: false, errormessage: error, unclearedAlarms: undeletedAlarm }); + return; + + } else { //show errormessage if no devices were cleared + this.setState({ clearAlarmsSuccessful: false, errormessage: 'Alarms couldn\'t be refreshed.', unclearedAlarms: [] }); } - onRefresh = async (event: React.MouseEvent) => { - event.stopPropagation(); - event.preventDefault(); - const result = await this.props.clearStuckAlarmsAsync(this.props.stuckAlarms); - - if (result && result["devicemanager:output"].nodenames && result["devicemanager:output"].nodenames.length !== this.props.stuckAlarms.length) { //show errormessage if not all devices were cleared - const undeletedAlarm = this.props.stuckAlarms.filter(item => !result["devicemanager:output"].nodenames.includes(item)); - const error = "The alarms of the following devices couldn't be refreshed: "; - this.setState({ clearAlarmsSuccessful: false, errormessage: error, unclearedAlarms: undeletedAlarm }); - return; - - } else { //show errormessage if no devices were cleared - this.setState({ clearAlarmsSuccessful: false, errormessage: "Alarms couldn't be refreshed.", unclearedAlarms: [] }); - } - - this.props.reloadCurrentProblemsAction(); - this.props.onClose(); - } - - onOk = (event: React.MouseEvent) => { - - event.stopPropagation(); - event.preventDefault(); - if (this.state.unclearedAlarms.length > 0) - this.props.reloadCurrentProblemsAction(); - this.props.onClose(); - } - - render() { - console.log(this.props.stuckAlarms); - const device = this.props.numberDevices > 1 ? 'devices' : 'device' - const defaultMessage = "Are you sure you want to refresh all alarms for " + this.props.numberDevices + " " + device + "?" - const message = this.state.clearAlarmsSuccessful ? defaultMessage : this.state.errormessage; - - const defaultTitle = "Refresh Confirmation" - const title = this.state.clearAlarmsSuccessful ? defaultTitle : 'Refresh Result'; - - return ( - <Dialog open={this.props.mode !== ClearStuckAlarmsDialogMode.None}> - <DialogTitle>{title}</DialogTitle> - <DialogContent> - <DialogContentText> - {message} - </DialogContentText> - { - this.state.unclearedAlarms.map(item => - <DialogContentText> - {item} - </DialogContentText> - ) - } - </DialogContent> - <DialogActions> - { - this.state.clearAlarmsSuccessful && - <> - <Button color="inherit" onClick={this.onRefresh}>Yes</Button> - <Button color="inherit" onClick={this.onClose}>No</Button> - </> - } - - { - !this.state.clearAlarmsSuccessful && <Button color="inherit" onClick={this.onOk}>Ok</Button> - } - </DialogActions> - </Dialog> - ) - } + this.props.reloadCurrentAlarmsAction(); + this.props.onClose(); + }; + + onOk = (event: React.MouseEvent) => { + + event.stopPropagation(); + event.preventDefault(); + if (this.state.unclearedAlarms.length > 0) + this.props.reloadCurrentAlarmsAction(); + this.props.onClose(); + }; + + render() { + console.log(this.props.stuckAlarms); + const device = this.props.numberDevices > 1 ? 'devices' : 'device'; + const defaultMessage = 'Are you sure you want to refresh all alarms for ' + this.props.numberDevices + ' ' + device + '?'; + const message = this.state.clearAlarmsSuccessful ? defaultMessage : this.state.errormessage; + + const defaultTitle = 'Refresh Confirmation'; + const title = this.state.clearAlarmsSuccessful ? defaultTitle : 'Refresh Result'; + + return ( + <Dialog open={this.props.mode !== ClearStuckAlarmsDialogMode.None}> + <DialogTitle>{title}</DialogTitle> + <DialogContent> + <DialogContentText> + {message} + </DialogContentText> + { + this.state.unclearedAlarms.map(item => + <DialogContentText> + {item} + </DialogContentText>, + ) + } + </DialogContent> + <DialogActions> + { + this.state.clearAlarmsSuccessful && + <> + <Button color="inherit" onClick={this.onRefresh}>Yes</Button> + <Button color="inherit" onClick={this.onClose}>No</Button> + </> + } + + { + !this.state.clearAlarmsSuccessful && <Button color="inherit" onClick={this.onOk}>Ok</Button> + } + </DialogActions> + </Dialog> + ); + } } const ClearStuckAlarmsDialog = connect(undefined, mapDispatch)(ClearStuckAlarmsDialogComponent); diff --git a/sdnr/wt/odlux/apps/faultApp/src/components/dashboardHome.tsx b/sdnr/wt/odlux/apps/faultApp/src/components/dashboardHome.tsx index a81705965..a3e32c42c 100644 --- a/sdnr/wt/odlux/apps/faultApp/src/components/dashboardHome.tsx +++ b/sdnr/wt/odlux/apps/faultApp/src/components/dashboardHome.tsx @@ -15,26 +15,25 @@ * 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 connect, { Connect, IDispatcher } from '../../../../framework/src/flux/connect';; -import { Theme } from '@mui/material'; import { WithStyles } from '@mui/styles'; import createStyles from '@mui/styles/createStyles'; -import withStyles from '@mui/styles/withStyles'; import { Doughnut } from 'react-chartjs-2'; -import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; +import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect'; + import { NavigateToApplication } from '../../../../framework/src/actions/navigationActions'; +import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; -const styles = (theme: Theme) => createStyles({ +const styles = () => createStyles({ pageWidthSettings: { width: '50%', - float: 'left' + float: 'left', }, -}) +}); -const scrollbar = { overflow: "auto", paddingRight: "20px" } +const scrollbar = { overflow: 'auto', paddingRight: '20px' }; let connectionStatusinitialLoad = true; let connectionStatusinitialStateChanged = false; @@ -47,7 +46,7 @@ let alarmStatusDataLoad: number[] = [0, 0, 0, 0]; let alarmTotalCount = 0; const mapProps = (state: IApplicationStoreState) => ({ - alarmStatus: state.fault.faultStatus + alarmStatus: state.fault.faultStatus, }); const mapDispatch = (dispatcher: IDispatcher) => ({ @@ -60,11 +59,10 @@ class DashboardHome extends React.Component<HomeComponentProps> { constructor(props: HomeComponentProps) { super(props); this.state = { - } + }; } render(): JSX.Element { - const { classes } = this.props; if (!this.props.alarmStatus.isLoadingConnectionStatusChart) { connectionStatusDataLoad = [ @@ -72,7 +70,7 @@ class DashboardHome extends React.Component<HomeComponentProps> { this.props.alarmStatus.Connecting, this.props.alarmStatus.Disconnected, this.props.alarmStatus.UnableToConnect, - this.props.alarmStatus.Undefined + this.props.alarmStatus.Undefined, ]; connectionTotalCount = this.props.alarmStatus.Connected + this.props.alarmStatus.Connecting + this.props.alarmStatus.Disconnected + this.props.alarmStatus.UnableToConnect + this.props.alarmStatus.Undefined; @@ -84,7 +82,7 @@ class DashboardHome extends React.Component<HomeComponentProps> { this.props.alarmStatus.critical, this.props.alarmStatus.major, this.props.alarmStatus.minor, - this.props.alarmStatus.warning + this.props.alarmStatus.warning, ]; alarmTotalCount = this.props.alarmStatus.critical + this.props.alarmStatus.major + this.props.alarmStatus.minor + this.props.alarmStatus.warning; @@ -97,7 +95,7 @@ class DashboardHome extends React.Component<HomeComponentProps> { 'Connecting: ' + this.props.alarmStatus.Connecting, 'Disconnected: ' + this.props.alarmStatus.Disconnected, 'UnableToConnect: ' + this.props.alarmStatus.UnableToConnect, - 'Undefined: ' + this.props.alarmStatus.Undefined + 'Undefined: ' + this.props.alarmStatus.Undefined, ], datasets: [{ labels: ['Connected', 'Connecting', 'Disconnected', 'UnableToConnect', 'Undefined'], @@ -107,9 +105,9 @@ class DashboardHome extends React.Component<HomeComponentProps> { 'rgb(255, 102, 0)', 'rgb(191, 191, 191)', 'rgb(191, 191, 191)', - 'rgb(242, 240, 240)' - ] - }] + 'rgb(242, 240, 240)', + ], + }], }; @@ -119,9 +117,9 @@ class DashboardHome extends React.Component<HomeComponentProps> { datasets: [{ data: [1], backgroundColor: [ - 'rgb(255, 255, 255)' - ] - }] + 'rgb(255, 255, 255)', + ], + }], }; /** Loading Connection Status chart */ @@ -130,9 +128,9 @@ class DashboardHome extends React.Component<HomeComponentProps> { datasets: [{ data: [1], backgroundColor: [ - 'rgb(255, 255, 255)' - ] - }] + 'rgb(255, 255, 255)', + ], + }], }; /** Loading Alarm Status chart */ @@ -141,9 +139,9 @@ class DashboardHome extends React.Component<HomeComponentProps> { datasets: [{ data: [1], backgroundColor: [ - 'rgb(255, 255, 255)' - ] - }] + 'rgb(255, 255, 255)', + ], + }], }; /** Connection status options */ @@ -155,57 +153,57 @@ class DashboardHome extends React.Component<HomeComponentProps> { let label = (data.datasets[tooltipItem.datasetIndex].labels && data.datasets[tooltipItem.datasetIndex].labels[ - tooltipItem.index + tooltipItem.index ]) || data.labels[tooltipItem.index] || - ""; + ''; if (label) { - label += ": "; + label += ': '; } label += data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] + - (data.datasets[tooltipItem.datasetIndex].labelSuffix || ""); + (data.datasets[tooltipItem.datasetIndex].labelSuffix || ''); return label; - } - } + }, + }, }, responsive: true, maintainAspectRatio: false, animation: { - duration: 0 + duration: 0, }, plugins: { legend: { display: true, - position: 'top' - } + position: 'top', + }, }, onClick: (event: MouseEvent, item: any) => { if (item[0]) { let connectionStatus = labels[item[0]._index] + ''; - this.props.navigateToApplication("connect", '/connectionStatus/' + connectionStatus); + this.props.navigateToApplication('connect', '/connectionStatus/' + connectionStatus); } - } - } + }, + }; /** Connection status unavailable options */ const connectionStatusUnavailableOptions = { responsive: true, maintainAspectRatio: false, animation: { - duration: 0 + duration: 0, }, plugins: { legend: { display: true, - position: 'top' + position: 'top', }, tooltip: { - enabled: false - } - } - } + enabled: false, + }, + }, + }; /** Add text inside the doughnut chart for Connection Status */ const connectionStatusPlugins = [{ @@ -215,15 +213,15 @@ class DashboardHome extends React.Component<HomeComponentProps> { ctx = chart.ctx; ctx.restore(); var fontSize = (height / 480).toFixed(2); - ctx.font = fontSize + "em sans-serif"; - ctx.textBaseline = "top"; - var text = "Network Connection Status", + ctx.font = fontSize + 'em sans-serif'; + ctx.textBaseline = 'top'; + var text = 'Network Connection Status', textX = Math.round((width - ctx.measureText(text).width) / 2), textY = height / 2; ctx.fillText(text, textX, textY); ctx.save(); - } - }] + }, + }]; /** Alarm status Data */ const alarmStatusData = { @@ -231,7 +229,7 @@ class DashboardHome extends React.Component<HomeComponentProps> { 'Critical : ' + this.props.alarmStatus.critical, 'Major : ' + this.props.alarmStatus.major, 'Minor : ' + this.props.alarmStatus.minor, - 'Warning : ' + this.props.alarmStatus.warning + 'Warning : ' + this.props.alarmStatus.warning, ], datasets: [{ labels: ['Critical', 'Major', 'Minor', 'Warning'], @@ -240,10 +238,10 @@ class DashboardHome extends React.Component<HomeComponentProps> { 'rgb(240, 25, 10)', 'rgb(240, 133, 10)', 'rgb(240, 240, 10)', - 'rgb(46, 115, 176)' + 'rgb(46, 115, 176)', ], - }] - } + }], + }; /** No Alarm status available */ const alarmStatusUnavailableData = { @@ -251,9 +249,9 @@ class DashboardHome extends React.Component<HomeComponentProps> { datasets: [{ data: [1], backgroundColor: [ - 'rgb(0, 153, 51)' - ] - }] + 'rgb(0, 153, 51)', + ], + }], }; /** Alarm status Options */ @@ -265,36 +263,36 @@ class DashboardHome extends React.Component<HomeComponentProps> { let label = (data.datasets[tooltipItem.datasetIndex].labels && data.datasets[tooltipItem.datasetIndex].labels[ - tooltipItem.index + tooltipItem.index ]) || data.labels[tooltipItem.index] || - ""; + ''; if (label) { - label += ": "; + label += ': '; } label += data.datasets[tooltipItem.datasetIndex].data[tooltipItem.index] + - (data.datasets[tooltipItem.datasetIndex].labelSuffix || ""); + (data.datasets[tooltipItem.datasetIndex].labelSuffix || ''); return label; - } - } + }, + }, }, responsive: true, maintainAspectRatio: false, animation: { - duration: 0 + duration: 0, }, plugins: { legend: { display: true, - position: 'top' - } + position: 'top', + }, }, onClick: (event: MouseEvent, item: any) => { if (item[0]) { let severity = alarmLabels[item[0]._index] + ''; - this.props.navigateToApplication("fault", '/alarmStatus/' + severity); + this.props.navigateToApplication('fault', '/alarmStatus/' + severity); } }, }; @@ -304,18 +302,18 @@ class DashboardHome extends React.Component<HomeComponentProps> { responsive: true, maintainAspectRatio: false, animation: { - duration: 0 + duration: 0, }, plugins: { legend: { display: true, - position: 'top' + position: 'top', }, tooltip: { - enabled: false - } - } - } + enabled: false, + }, + }, + }; /** Add text inside the doughnut chart for Alarm Status */ const alarmStatusPlugins = [{ beforeDraw: function (chart: any) { @@ -324,15 +322,15 @@ class DashboardHome extends React.Component<HomeComponentProps> { ctx = chart.ctx; ctx.restore(); var fontSize = (height / 480).toFixed(2); - ctx.font = fontSize + "em sans-serif"; - ctx.textBaseline = "top"; - var text = "Network Alarm Status", + ctx.font = fontSize + 'em sans-serif'; + ctx.textBaseline = 'top'; + var text = 'Network Alarm Status', textX = Math.round((width - ctx.measureText(text).width) / 2), textY = height / 2; ctx.fillText(text, textX, textY); ctx.save(); - } - }] + }, + }]; return ( <> @@ -397,7 +395,7 @@ class DashboardHome extends React.Component<HomeComponentProps> { </div> </div> </> - ) + ); } /** Check if connection status data available */ @@ -412,7 +410,7 @@ class DashboardHome extends React.Component<HomeComponentProps> { } else { return true; } - } + }; /** Check if connection status chart data is loaded */ public checkElementsAreLoaded = () => { @@ -434,7 +432,7 @@ class DashboardHome extends React.Component<HomeComponentProps> { return !isLoadingCheck.isLoadingConnectionStatusChart; } return true; - } + }; /** Check if alarms data available */ public checkAlarmStatus = () => { @@ -444,11 +442,10 @@ class DashboardHome extends React.Component<HomeComponentProps> { } if (alarmCount.critical == 0 && alarmCount.major == 0 && alarmCount.minor == 0 && alarmCount.warning == 0) { return false; - } - else { + } else { return true; } - } + }; /** Check if alarm status chart data is loaded */ public checkAlarmsAreLoaded = () => { @@ -470,7 +467,7 @@ class DashboardHome extends React.Component<HomeComponentProps> { return !isLoadingCheck.isLoadingAlarmStatusChart; } return true; - } + }; } export default (withRouter(connect(mapProps, mapDispatch)(DashboardHome)));
\ No newline at end of file diff --git a/sdnr/wt/odlux/apps/faultApp/src/components/faultStatus.tsx b/sdnr/wt/odlux/apps/faultApp/src/components/faultStatus.tsx index 7820dfdeb..c2ca4a536 100644 --- a/sdnr/wt/odlux/apps/faultApp/src/components/faultStatus.tsx +++ b/sdnr/wt/odlux/apps/faultApp/src/components/faultStatus.tsx @@ -15,37 +15,36 @@ * the License. * ============LICENSE_END========================================================================== */ -import * as React from 'react'; +import React from 'react'; -import { Theme } from '@mui/material/styles'; +import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons'; // select app icon +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import Typography from '@mui/material/Typography'; import { WithStyles } from '@mui/styles'; -import withStyles from '@mui/styles/withStyles'; import createStyles from '@mui/styles/createStyles'; -import { faExclamationTriangle } from '@fortawesome/free-solid-svg-icons'; // select app icon +import withStyles from '@mui/styles/withStyles'; -import connect, { Connect } from '../../../../framework/src/flux/connect'; +import { connect, Connect } from '../../../../framework/src/flux/connect'; import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; -import Typography from '@mui/material/Typography'; -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -const styles = (theme: Theme) => createStyles({ +const styles = () => createStyles({ icon: { marginLeft: 8, - marginRight: 8 + marginRight: 8, }, critical: { - color: "red" + color: 'red', }, major: { - color: "orange" + color: 'orange', }, minor: { - color: "#f7f700" + color: '#f7f700', }, warning: { - color: "#428bca" - } + color: '#428bca', + }, }); const mapProps = (state: IApplicationStoreState) => ({ @@ -75,7 +74,7 @@ class FaultStatusComponent extends React.Component<FaultStatusComponentProps> { </Typography> </> ); - }; + } } export const FaultStatus = withStyles(styles)(connect(mapProps)(FaultStatusComponent)); diff --git a/sdnr/wt/odlux/apps/faultApp/src/components/refreshAlarmLogDialog.tsx b/sdnr/wt/odlux/apps/faultApp/src/components/refreshAlarmLogDialog.tsx index 8c639eec9..59657d8de 100644 --- a/sdnr/wt/odlux/apps/faultApp/src/components/refreshAlarmLogDialog.tsx +++ b/sdnr/wt/odlux/apps/faultApp/src/components/refreshAlarmLogDialog.tsx @@ -24,78 +24,73 @@ import DialogContent from '@mui/material/DialogContent'; import DialogContentText from '@mui/material/DialogContentText'; import DialogTitle from '@mui/material/DialogTitle'; +import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect'; import { alarmLogEntriesReloadAction } from '../handlers/alarmLogEntriesHandler'; -import { IDispatcher, connect, Connect } from '../../../../framework/src/flux/connect'; - import { Fault } from '../models/fault'; export enum RefreshAlarmLogDialogMode { - None = "none", - RefreshAlarmLogTable = "RefreshAlarmLogTable", + None = 'none', + RefreshAlarmLogTable = 'RefreshAlarmLogTable', } const mapDispatch = (dispatcher: IDispatcher) => ({ - refreshAlarmLog: () => dispatcher.dispatch(alarmLogEntriesReloadAction) + refreshAlarmLog: () => dispatcher.dispatch(alarmLogEntriesReloadAction), }); type DialogSettings = { - dialogTitle: string, - dialogDescription: string, - applyButtonText: string, - cancelButtonText: string, - enableMountIdEditor: boolean, - enableUsernameEditor: boolean, - enableExtendedEditor: boolean, -} + dialogTitle: string; + dialogDescription: string; + applyButtonText: string; + cancelButtonText: string; + enableMountIdEditor: boolean; + enableUsernameEditor: boolean; + enableExtendedEditor: boolean; +}; const settings: { [key: string]: DialogSettings } = { [RefreshAlarmLogDialogMode.None]: { - dialogTitle: "", - dialogDescription: "", - applyButtonText: "", - cancelButtonText: "", + dialogTitle: '', + dialogDescription: '', + applyButtonText: '', + cancelButtonText: '', enableMountIdEditor: false, enableUsernameEditor: false, enableExtendedEditor: false, }, [RefreshAlarmLogDialogMode.RefreshAlarmLogTable]: { - dialogTitle: "Do you want to refresh the Alarm Log?", - dialogDescription: "", - applyButtonText: "Yes", - cancelButtonText: "Cancel", + dialogTitle: 'Do you want to refresh the Alarm Log?', + dialogDescription: '', + applyButtonText: 'Yes', + cancelButtonText: 'Cancel', enableMountIdEditor: true, enableUsernameEditor: true, enableExtendedEditor: true, - } -} + }, +}; type RefreshAlarmLogDialogComponentProps = Connect<undefined, typeof mapDispatch> & { mode: RefreshAlarmLogDialogMode; onClose: () => void; }; -type RefreshAlarmLogDialogComponentState = Fault & { isNameValid: boolean, isHostSet: boolean }; +type RefreshAlarmLogDialogComponentState = Fault & { isNameValid: boolean; isHostSet: boolean }; class RefreshAlarmLogDialogComponent extends React.Component<RefreshAlarmLogDialogComponentProps, RefreshAlarmLogDialogComponentState> { - constructor(props: RefreshAlarmLogDialogComponentProps) { - super(props); - } - render(): JSX.Element { const setting = settings[this.props.mode]; return ( <Dialog open={this.props.mode !== RefreshAlarmLogDialogMode.None}> - <DialogTitle id="form-dialog-title" aria-label={`${setting.dialogTitle.replace(/ /g, "-").toLowerCase()}-dialog`}>{setting.dialogTitle}</DialogTitle> + <DialogTitle id="form-dialog-title" aria-label={`${setting.dialogTitle.replace(/ /g, '-').toLowerCase()}-dialog`}>{setting.dialogTitle}</DialogTitle> <DialogContent> <DialogContentText> {setting.dialogDescription} </DialogContentText> </DialogContent> <DialogActions> - <Button aria-label="dialog-confirm-button" onClick={(event) => { + <Button aria-label="dialog-confirm-button" onClick={() => { this.onRefresh(); }} color="inherit" > {setting.applyButtonText} </Button> - <Button aria-label="dialog-cancel-button" onClick={(event) => { + <Button aria-label="dialog-cancel-button" onClick={() => { this.onCancel(); }} color="secondary"> {setting.cancelButtonText} </Button> </DialogActions> @@ -110,7 +105,7 @@ class RefreshAlarmLogDialogComponent extends React.Component<RefreshAlarmLogDial private onCancel = () => { this.props.onClose(); - } + }; } export const RefreshAlarmLogDialog = connect(undefined, mapDispatch)(RefreshAlarmLogDialogComponent); diff --git a/sdnr/wt/odlux/apps/faultApp/src/components/refreshCurrentAlarmsDialog.tsx b/sdnr/wt/odlux/apps/faultApp/src/components/refreshCurrentAlarmsDialog.tsx new file mode 100644 index 000000000..20cd514cd --- /dev/null +++ b/sdnr/wt/odlux/apps/faultApp/src/components/refreshCurrentAlarmsDialog.tsx @@ -0,0 +1,113 @@ +/** + * ============LICENSE_START======================================================================== + * ONAP : ccsdk feature sdnr wt odlux + * ================================================================================================= + * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved. + * ================================================================================================= + * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except + * in compliance with the License. You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software distributed under the License + * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express + * or implied. See the License for the specific language governing permissions and limitations under + * the License. + * ============LICENSE_END========================================================================== + */ +import * as React from 'react'; + +import Button from '@mui/material/Button'; +import Dialog from '@mui/material/Dialog'; +import DialogActions from '@mui/material/DialogActions'; +import DialogContent from '@mui/material/DialogContent'; +import DialogContentText from '@mui/material/DialogContentText'; +import DialogTitle from '@mui/material/DialogTitle'; + +import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect'; + +import { currentAlarmsReloadAction } from '../handlers/currentAlarmsHandler'; +import { Fault } from '../models/fault'; + +export enum RefreshCurrentAlarmsDialogMode { + None = 'none', + RefreshCurrentAlarmsTable = 'RefreshCurrentAlarmsTable', +} + +const mapDispatch = (dispatcher: IDispatcher) => ({ + refreshCurrentAlarms: () => dispatcher.dispatch(currentAlarmsReloadAction), +}); + +type DialogSettings = { + dialogTitle: string; + dialogDescription: string; + applyButtonText: string; + cancelButtonText: string; + enableMountIdEditor: boolean; + enableUsernameEditor: boolean; + enableExtendedEditor: boolean; +}; + +const settings: { [key: string]: DialogSettings } = { + [RefreshCurrentAlarmsDialogMode.None]: { + dialogTitle: '', + dialogDescription: '', + applyButtonText: '', + cancelButtonText: '', + enableMountIdEditor: false, + enableUsernameEditor: false, + enableExtendedEditor: false, + }, + [RefreshCurrentAlarmsDialogMode.RefreshCurrentAlarmsTable]: { + dialogTitle: 'Do you want to refresh the Current Alarms List?', + dialogDescription: '', + applyButtonText: 'Yes', + cancelButtonText: 'Cancel', + enableMountIdEditor: true, + enableUsernameEditor: true, + enableExtendedEditor: true, + }, +}; + +type RefreshCurrentAlarmsDialogComponentProps = Connect<undefined, typeof mapDispatch> & { + mode: RefreshCurrentAlarmsDialogMode; + onClose: () => void; +}; + +type RefreshCurrentAlarmsDialogComponentState = Fault & { isNameValid: boolean; isHostSet: boolean }; + +class RefreshCurrentAlarmsDialogComponent extends React.Component<RefreshCurrentAlarmsDialogComponentProps, RefreshCurrentAlarmsDialogComponentState> { + render(): JSX.Element { + const setting = settings[this.props.mode]; + return ( + <Dialog open={this.props.mode !== RefreshCurrentAlarmsDialogMode.None}> + <DialogTitle id="form-dialog-title" aria-label={`${setting.dialogTitle.replace(/ /g, '-').toLowerCase()}-dialog`}>{setting.dialogTitle}</DialogTitle> + <DialogContent> + <DialogContentText> + {setting.dialogDescription} + </DialogContentText> + </DialogContent> + <DialogActions> + <Button aria-label="dialog-confirm-button" onClick={() => { + this.onRefresh(); + }} color="inherit" > {setting.applyButtonText} </Button> + <Button aria-label="dialog-cancel-button" onClick={() => { + this.onCancel(); + }} color="secondary"> {setting.cancelButtonText} </Button> + </DialogActions> + </Dialog> + ); + } + + private onRefresh = () => { + this.props.refreshCurrentAlarms(); + this.props.onClose(); + }; + + private onCancel = () => { + this.props.onClose(); + }; +} + +export const RefreshCurrentAlarmsDialog = connect(undefined, mapDispatch)(RefreshCurrentAlarmsDialogComponent); +export default RefreshCurrentAlarmsDialog;
\ No newline at end of file diff --git a/sdnr/wt/odlux/apps/faultApp/src/components/refreshCurrentProblemsDialog.tsx b/sdnr/wt/odlux/apps/faultApp/src/components/refreshCurrentProblemsDialog.tsx deleted file mode 100644 index e501ec0ad..000000000 --- a/sdnr/wt/odlux/apps/faultApp/src/components/refreshCurrentProblemsDialog.tsx +++ /dev/null @@ -1,117 +0,0 @@ -/** - * ============LICENSE_START======================================================================== - * ONAP : ccsdk feature sdnr wt odlux - * ================================================================================================= - * Copyright (C) 2019 highstreet technologies GmbH Intellectual Property. All rights reserved. - * ================================================================================================= - * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except - * in compliance with the License. You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software distributed under the License - * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express - * or implied. See the License for the specific language governing permissions and limitations under - * the License. - * ============LICENSE_END========================================================================== - */ -import * as React from 'react'; - -import Button from '@mui/material/Button'; -import Dialog from '@mui/material/Dialog'; -import DialogActions from '@mui/material/DialogActions'; -import DialogContent from '@mui/material/DialogContent'; -import DialogContentText from '@mui/material/DialogContentText'; -import DialogTitle from '@mui/material/DialogTitle'; - -import { currentProblemsReloadAction } from '../handlers/currentProblemsHandler'; -import { IDispatcher, connect, Connect } from '../../../../framework/src/flux/connect'; - -import { Fault } from '../models/fault'; - -export enum RefreshCurrentProblemsDialogMode { - None = "none", - RefreshCurrentProblemsTable = "RefreshCurrentProblemsTable", -} - -const mapDispatch = (dispatcher: IDispatcher) => ({ - refreshCurrentProblems: () => dispatcher.dispatch(currentProblemsReloadAction) -}); - -type DialogSettings = { - dialogTitle: string, - dialogDescription: string, - applyButtonText: string, - cancelButtonText: string, - enableMountIdEditor: boolean, - enableUsernameEditor: boolean, - enableExtendedEditor: boolean, -} - -const settings: { [key: string]: DialogSettings } = { - [RefreshCurrentProblemsDialogMode.None]: { - dialogTitle: "", - dialogDescription: "", - applyButtonText: "", - cancelButtonText: "", - enableMountIdEditor: false, - enableUsernameEditor: false, - enableExtendedEditor: false, - }, - [RefreshCurrentProblemsDialogMode.RefreshCurrentProblemsTable]: { - dialogTitle: "Do you want to refresh the Current Problems List?", - dialogDescription: "", - applyButtonText: "Yes", - cancelButtonText: "Cancel", - enableMountIdEditor: true, - enableUsernameEditor: true, - enableExtendedEditor: true, - } -} - -type RefreshCurrentProblemsDialogComponentProps = Connect<undefined, typeof mapDispatch> & { - mode: RefreshCurrentProblemsDialogMode; - onClose: () => void; -}; - -type RefreshCurrentProblemsDialogComponentState = Fault & { isNameValid: boolean, isHostSet: boolean }; - -class RefreshCurrentProblemsDialogComponent extends React.Component<RefreshCurrentProblemsDialogComponentProps, RefreshCurrentProblemsDialogComponentState> { - constructor(props: RefreshCurrentProblemsDialogComponentProps) { - super(props); - } - - render(): JSX.Element { - const setting = settings[this.props.mode]; - return ( - <Dialog open={this.props.mode !== RefreshCurrentProblemsDialogMode.None}> - <DialogTitle id="form-dialog-title" aria-label={`${setting.dialogTitle.replace(/ /g, "-").toLowerCase()}-dialog`}>{setting.dialogTitle}</DialogTitle> - <DialogContent> - <DialogContentText> - {setting.dialogDescription} - </DialogContentText> - </DialogContent> - <DialogActions> - <Button aria-label="dialog-confirm-button" onClick={(event) => { - this.onRefresh(); - }} color="inherit" > {setting.applyButtonText} </Button> - <Button aria-label="dialog-cancel-button" onClick={(event) => { - this.onCancel(); - }} color="secondary"> {setting.cancelButtonText} </Button> - </DialogActions> - </Dialog> - ); - } - - private onRefresh = () => { - this.props.refreshCurrentProblems(); - this.props.onClose(); - }; - - private onCancel = () => { - this.props.onClose(); - } -} - -export const RefreshCurrentProblemsDialog = connect(undefined, mapDispatch)(RefreshCurrentProblemsDialogComponent); -export default RefreshCurrentProblemsDialog;
\ No newline at end of file |