From 15e2d3a29b0d1a304965e34f114a911e5a7abdb3 Mon Sep 17 00:00:00 2001 From: sai-neetha Date: Mon, 20 Mar 2023 08:05:47 +0100 Subject: Odlux Update Add eslint and custom icons update Issue-ID: CCSDK-3871 Signed-off-by: sai-neetha Change-Id: If6b676128cc9cff0437a5dc54f85eaafd3b8c586 Signed-off-by: highstreetherbert --- .../src/components/connectionStatusLog.tsx | 39 +-- .../src/components/editNetworkElementDialog.tsx | 209 +++++++-------- .../src/components/infoNetworkElementDialog.tsx | 285 +++++++++++---------- .../connectApp/src/components/networkElements.tsx | 174 ++++++------- .../refreshConnectionStatusLogDialog.tsx | 61 +++-- .../components/refreshNetworkElementsDialog.tsx | 61 +++-- 6 files changed, 417 insertions(+), 412 deletions(-) (limited to 'sdnr/wt/odlux/apps/connectApp/src/components') diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/connectionStatusLog.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/connectionStatusLog.tsx index b240b2419..6a8c92438 100644 --- a/sdnr/wt/odlux/apps/connectApp/src/components/connectionStatusLog.tsx +++ b/sdnr/wt/odlux/apps/connectApp/src/components/connectionStatusLog.tsx @@ -15,11 +15,13 @@ * the License. * ============LICENSE_END========================================================================== */ -import * as React from 'react'; -import connect, { IDispatcher, Connect } from '../../../../framework/src/flux/connect'; +import React from 'react'; + +import Refresh from '@mui/icons-material/Refresh'; + +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 { MaterialTable, ColumnType, MaterialTableCtorType } from '../../../../framework/src/components/material-table'; -import Refresh from '@mui/icons-material/Refresh'; import { createConnectionStatusLogActions, createConnectionStatusLogProperties } from '../handlers/connectionStatusLogHandler'; import { NetworkElementConnectionLog } from '../models/networkElementConnectionLog'; @@ -37,36 +39,36 @@ const ConnectionStatusTable = MaterialTable as MaterialTableCtorType; type ConnectionStatusLogComponentState = { - refreshConnectionStatusLogEditorMode: RefreshConnectionStatusLogDialogMode -} + refreshConnectionStatusLogEditorMode: RefreshConnectionStatusLogDialogMode; +}; let initialSorted = false; -class ConnectionStatusLogComponent extends React.Component { +class ConnectionStatusLogComponent extends React.Component { constructor(props: ConnectionStatusLogComponentProps) { super(props); this.state = { - refreshConnectionStatusLogEditorMode: RefreshConnectionStatusLogDialogMode.None + refreshConnectionStatusLogEditorMode: RefreshConnectionStatusLogDialogMode.None, }; } render(): JSX.Element { const refreshConnectionStatusLogAction = { - icon: Refresh, tooltip: 'Refresh Connection Status Log Table',ariaLabel:'refresh', onClick: () => { + icon: Refresh, tooltip: 'Refresh Connection Status Log Table', ariaLabel:'refresh', onClick: () => { this.setState({ - refreshConnectionStatusLogEditorMode: RefreshConnectionStatusLogDialogMode.RefreshConnectionStatusLogTable + refreshConnectionStatusLogEditorMode: RefreshConnectionStatusLogDialogMode.RefreshConnectionStatusLogTable, }); - } + }, }; return ( <> ); - }; + } private onCloseRefreshConnectionStatusLogDialog = () => { this.setState({ - refreshConnectionStatusLogEditorMode: RefreshConnectionStatusLogDialogMode.None + refreshConnectionStatusLogEditorMode: RefreshConnectionStatusLogDialogMode.None, }); - } + }; + componentDidMount() { if (!initialSorted) { initialSorted = true; - this.props.connectionStatusLogActions.onHandleExplicitRequestSort("timestamp", "desc"); + this.props.connectionStatusLogActions.onHandleExplicitRequestSort('timestamp', 'desc'); } else { this.props.connectionStatusLogActions.onRefresh(); } diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx index 5740ebda0..b0db63476 100644 --- a/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx +++ b/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx @@ -15,42 +15,43 @@ * the License. * ============LICENSE_END========================================================================== */ -import * as React from 'react'; +import React from 'react'; import Button from '@mui/material/Button'; -import TextField from '@mui/material/TextField'; 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 { FormControl, InputLabel, Select, MenuItem, Typography, Radio, RadioGroup, Options, FormLabel, FormControlLabel } from '@mui/material'; -import { loadAllTlsKeyListAsync } from '../actions/tlsKeyActions'; -import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; +import FormControl from '@mui/material/FormControl'; +import FormControlLabel from '@mui/material/FormControlLabel'; +import InputLabel from '@mui/material/InputLabel'; +import MenuItem from '@mui/material/MenuItem'; +import Radio from '@mui/material/Radio'; +import RadioGroup from '@mui/material/RadioGroup'; +import Select from '@mui/material/Select'; +import TextField from '@mui/material/TextField'; +import Typography from '@mui/material/Typography'; -import { IDispatcher, connect, Connect } from '../../../../framework/src/flux/connect'; +import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect'; +import { removeWebUriAction } from '../actions/commonNetworkElementsActions'; +import { mountNetworkElementAsyncActionCreator, unmountNetworkElementAsyncActionCreator } from '../actions/mountedNetworkElementsActions'; import { - editNetworkElementAsyncActionCreator, - addNewNetworkElementAsyncActionCreator, - removeNetworkElementAsyncActionCreator + addNewNetworkElementAsyncActionCreator, editNetworkElementAsyncActionCreator, removeNetworkElementAsyncActionCreator, } from '../actions/networkElementsActions'; - -import { unmountNetworkElementAsyncActionCreator, mountNetworkElementAsyncActionCreator } from '../actions/mountedNetworkElementsActions'; -import { NetworkElementConnection, UpdateNetworkElement, propertyOf } from '../models/networkElementConnection'; -import { removeWebUriAction } from '../actions/commonNetworkElementsActions'; +import { loadAllTlsKeyListAsync } from '../actions/tlsKeyActions'; +import { NetworkElementConnection, propertyOf, UpdateNetworkElement } from '../models/networkElementConnection'; export enum EditNetworkElementDialogMode { - None = "none", - EditNetworkElement = "editNetworkElement", - RemoveNetworkElement = "removeNetworkElement", - AddNewNetworkElement = "addNewNetworkElement", - MountNetworkElement = "mountNetworkElement", - UnmountNetworkElement = "unmountNetworkElement", + None = 'none', + EditNetworkElement = 'editNetworkElement', + RemoveNetworkElement = 'removeNetworkElement', + AddNewNetworkElement = 'addNewNetworkElement', + MountNetworkElement = 'mountNetworkElement', + UnmountNetworkElement = 'unmountNetworkElement', } - - const mapDispatch = (dispatcher: IDispatcher) => ({ addNewNetworkElement: async (element: NetworkElementConnection) => { await dispatcher.dispatch(addNewNetworkElementAsyncActionCreator(element)); @@ -63,12 +64,12 @@ const mapDispatch = (dispatcher: IDispatcher) => ({ editNetworkElement: async (element: UpdateNetworkElement, mountElement: NetworkElementConnection) => { const values = Object.keys(element); - console.log("edit element"); + console.log('edit element'); console.log(values); //make sure properties are there in case they get renamed - const idProperty = propertyOf("id"); - const isRequiredProperty = propertyOf("isRequired"); + const idProperty = propertyOf('id'); + const isRequiredProperty = propertyOf('isRequired'); if (values.length === 2 && values.includes(idProperty as string) && values.includes(isRequiredProperty as string)) { @@ -84,92 +85,92 @@ const mapDispatch = (dispatcher: IDispatcher) => ({ await dispatcher.dispatch(removeNetworkElementAsyncActionCreator(element)); dispatcher.dispatch(removeWebUriAction(element.id)); }, - getAvailableTlsKeys: async () => await dispatcher.dispatch(loadAllTlsKeyListAsync()), + getAvailableTlsKeys: async () => dispatcher.dispatch(loadAllTlsKeyListAsync()), }); 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 } = { [EditNetworkElementDialogMode.None]: { - dialogTitle: "", - dialogDescription: "", - applyButtonText: "", - cancelButtonText: "", + dialogTitle: '', + dialogDescription: '', + applyButtonText: '', + cancelButtonText: '', enableMountIdEditor: false, enableUsernameEditor: false, enableExtendedEditor: false, }, [EditNetworkElementDialogMode.AddNewNetworkElement]: { - dialogTitle: "Add New Node", - dialogDescription: "Add this new node:", - applyButtonText: "Add node", - cancelButtonText: "Cancel", + dialogTitle: 'Add New Node', + dialogDescription: 'Add this new node:', + applyButtonText: 'Add node', + cancelButtonText: 'Cancel', enableMountIdEditor: true, enableUsernameEditor: true, enableExtendedEditor: true, }, [EditNetworkElementDialogMode.MountNetworkElement]: { - dialogTitle: "Mount Node", - dialogDescription: "Mount this node:", - applyButtonText: "Mount node", - cancelButtonText: "Cancel", + dialogTitle: 'Mount Node', + dialogDescription: 'Mount this node:', + applyButtonText: 'Mount node', + cancelButtonText: 'Cancel', enableMountIdEditor: false, enableUsernameEditor: false, enableExtendedEditor: false, }, [EditNetworkElementDialogMode.UnmountNetworkElement]: { - dialogTitle: "Unmount Node", - dialogDescription: "Unmount this node:", - applyButtonText: "Unmount node", - cancelButtonText: "Cancel", + dialogTitle: 'Unmount Node', + dialogDescription: 'Unmount this node:', + applyButtonText: 'Unmount node', + cancelButtonText: 'Cancel', enableMountIdEditor: false, enableUsernameEditor: false, enableExtendedEditor: false, }, [EditNetworkElementDialogMode.EditNetworkElement]: { - dialogTitle: "Modify Node", - dialogDescription: "Modify this node", - applyButtonText: "Modify", - cancelButtonText: "Cancel", + dialogTitle: 'Modify Node', + dialogDescription: 'Modify this node', + applyButtonText: 'Modify', + cancelButtonText: 'Cancel', enableMountIdEditor: false, enableUsernameEditor: true, enableExtendedEditor: false, }, [EditNetworkElementDialogMode.RemoveNetworkElement]: { - dialogTitle: "Remove Node", - dialogDescription: "Do you really want to remove this node?", - applyButtonText: "Remove node", - cancelButtonText: "Cancel", + dialogTitle: 'Remove Node', + dialogDescription: 'Do you really want to remove this node?', + applyButtonText: 'Remove node', + cancelButtonText: 'Cancel', enableMountIdEditor: false, enableUsernameEditor: false, enableExtendedEditor: false, - } -} + }, +}; type EditNetworkElementDialogComponentProps = Connect & { mode: EditNetworkElementDialogMode; initialNetworkElement: NetworkElementConnection; onClose: () => void; - radioChecked: string + radioChecked: string; }; type EditNetworkElementDialogComponentState = NetworkElementConnection & { - isNameValid: boolean, - isHostSet: boolean, - isPasswordSelected: boolean, - isTlsSelected: boolean, - radioSelected: string, - showPasswordTextField: boolean, - showTlsDropdown: boolean + isNameValid: boolean; + isHostSet: boolean; + isPasswordSelected: boolean; + isTlsSelected: boolean; + radioSelected: string; + showPasswordTextField: boolean; + showTlsDropdown: boolean; }; class EditNetworkElementDialogComponent extends React.Component { @@ -189,16 +190,17 @@ class EditNetworkElementDialogComponent extends React.Component { this.setState({ radioSelected: event.target.value, showPasswordTextField: event.target.value === 'password', - showTlsDropdown: event.target.value === 'tlsKey' + showTlsDropdown: event.target.value === 'tlsKey', }); - } + }; render(): JSX.Element { const setting = settings[this.props.mode]; @@ -215,22 +217,27 @@ class EditNetworkElementDialogComponent extends React.Component - {setting.dialogTitle} + {setting.dialogTitle} {setting.dialogDescription} - { this.setState({ nodeId: event.target.value }); }} /> + { this.setState({ nodeId: event.target.value }); }} /> {!this.state.isNameValid && Node ID cannot be empty.} - { this.setState({ host: event.target.value }); }} /> + { this.setState({ host: event.target.value }); }} /> {!this.state.isHostSet && Host/IP address cannot be empty.} - { this.setState({ port: +event.target.value }); }} /> - {setting.enableUsernameEditor && { this.setState({ username: event.target.value }); }} /> || null} + { this.setState({ port: +event.target.value }); }} /> + {setting.enableUsernameEditor && { this.setState({ username: event.target.value }); }} /> || null} {setting.enableUsernameEditor && { this.setState({ tlsKey: event.target.value as any }); }} inputProps={{ name: 'tlsKey', id: 'tlsKey' }} > - --Select tls-key-- + --Select tls-key-- {tlsKeysList.map(tlsKey => ({tlsKey.key}))} @@ -283,7 +290,7 @@ class EditNetworkElementDialogComponent extends React.Component { if (e.target.value == 'password') { - this.setState({ isPasswordSelected: true, isTlsSelected: false }) + this.setState({ isPasswordSelected: true, isTlsSelected: false }); } else if (e.target.value == 'tlsKey') { - this.setState({ isPasswordSelected: false, isTlsSelected: true }) + this.setState({ isPasswordSelected: false, isTlsSelected: true }); } }; private onApply = (element: NetworkElementConnection) => { - this.props.onClose && this.props.onClose(); + if (this.props.onClose) this.props.onClose(); let updateElement: UpdateNetworkElement = { - id: this.state.nodeId - } + id: this.state.nodeId, + }; if (this.state.isPasswordSelected) { - element.tlsKey = '' - } - else if (this.state.isTlsSelected) { //check here - element.password = '' + element.tlsKey = ''; + } else if (this.state.isTlsSelected) { //check here + element.password = ''; } switch (this.props.mode) { case EditNetworkElementDialogMode.AddNewNetworkElement: - element && this.props.addNewNetworkElement(element); + if (element) this.props.addNewNetworkElement(element); this.setState({ radioSelected: '', isPasswordSelected: true, }); break; case EditNetworkElementDialogMode.MountNetworkElement: - element && this.props.mountNetworkElement(element); + if (element) this.props.mountNetworkElement(element); break; case EditNetworkElementDialogMode.UnmountNetworkElement: - element && this.props.unmountNetworkElement(element); + if (element) this.props.unmountNetworkElement(element); break; case EditNetworkElementDialogMode.EditNetworkElement: if (this.props.initialNetworkElement.isRequired !== this.state.isRequired) @@ -358,13 +364,13 @@ class EditNetworkElementDialogComponent extends React.Component { - this.props.onClose && this.props.onClose(); + if (this.props.onClose) this.props.onClose(); this.setState({ password: '', username: '', tlsKey: '', radioSelected: '' }); this.resetRequieredFields(); - } + }; private resetRequieredFields() { this.setState({ isNameValid: true, isHostSet: true }); @@ -402,15 +408,16 @@ class EditNetworkElementDialogComponent extends React.Component ({ - }); - - - const InfoElementTable = MaterialTable as MaterialTableCtorType; - - type DialogSettings = { - dialogTitle: string, - dialogDescription: string, - cancelButtonText: string, - } - - const settings: { [key: string]: DialogSettings } = { - [InfoNetworkElementDialogMode.None]: { - dialogTitle: "", - dialogDescription: "", - cancelButtonText: "", - }, - [InfoNetworkElementDialogMode.InfoNetworkElement]: { - dialogTitle: "YANG Capabilities of the Node", - dialogDescription: "", - cancelButtonText: "OK", - } - } - - type InfoNetworkElementDialogComponentProps = Connect & { - mode: InfoNetworkElementDialogMode; - initialNetworkElement: NetworkElementConnection; - onClose: () => void; - }; - - type InfoNetworkElementDialogComponentState = NetworkElementConnection; - - class InfoNetworkElementDialogComponent extends React.Component { - constructor(props: InfoNetworkElementDialogComponentProps) { - super(props); - - this.state = { - nodeId: this.props.initialNetworkElement.nodeId, - isRequired: false, - host: this.props.initialNetworkElement.host, - port: this.props.initialNetworkElement.port, - }; - } - - render(): JSX.Element { - const setting = settings[this.props.mode]; - const availableCapabilities = this.props.state.connect.elementInfo.elementInfo["netconf-node-topology:available-capabilities"]["available-capability"]; - let yangFeatures = this.props.state.connect.elementFeatureInfo.elementFeatureInfo; - let yangCapabilities: AvailableCapabilities[] = []; - - availableCapabilities.forEach(value => { - const capabilty = value.capability; - const indexRevision = capabilty.indexOf("revision="); - const indexModule = capabilty.indexOf(")", indexRevision); - if (indexRevision > 0 && indexModule > 0) { - let moduleName = capabilty.substring(indexModule + 1); - let ModuleFeaturesList; - for(let index = 0; index < yangFeatures.length; index++) { - if(yangFeatures[index].name == moduleName) { - ModuleFeaturesList = yangFeatures[index].feature? yangFeatures[index].feature : null; - break; - } - } - const featuresListCommaSeparated= ModuleFeaturesList? ModuleFeaturesList.toString() : "" - let featuresList = featuresListCommaSeparated.replace(',',', '); - - yangCapabilities.push({ - module: moduleName, - revision: capabilty.substring(indexRevision + 9, indexRevision + 19), - features: featuresList - }); - } - }); - - yangCapabilities = yangCapabilities.sort((a,b) => a.module === b.module ? 0 : a.module > b.module ? 1 : -1); - - return ( - <> - - {`${setting.dialogTitle}: "${this.state.nodeId}"`} - { - return ( - - ) - } - }, - { property: "features", title: "Features", type: ColumnType.text, width:500 }, - ]} idProperty="id" rows={yangCapabilities} > - - - - - - - ) - } - - private onCancel = () => { - this.props.onClose(); - } - - static getDerivedStateFromProps(props: InfoNetworkElementDialogComponentProps, state: InfoNetworkElementDialogComponentState & { _initialNetworkElement: NetworkElementConnection }): InfoNetworkElementDialogComponentState & { _initialNetworkElement: NetworkElementConnection } { - if (props.initialNetworkElement !== state._initialNetworkElement) { - state = { - ...state, - ...props.initialNetworkElement, - _initialNetworkElement: props.initialNetworkElement, - }; - } - return state; - } - } - - export const InfoNetworkElementDialog = connect(undefined, mapDispatch)(InfoNetworkElementDialogComponent); - export default InfoNetworkElementDialog; \ No newline at end of file +import * as React from 'react'; + +import Button from '@mui/material/Button'; +import Dialog from '@mui/material/Dialog'; +import DialogActions from '@mui/material/DialogActions'; +import DialogTitle from '@mui/material/DialogTitle'; + +import { ColumnType, MaterialTable, MaterialTableCtorType } from '../../../../framework/src/components/material-table'; +import { connect, Connect } from '../../../../framework/src/flux/connect'; + +import { NetworkElementConnection } from '../models/networkElementConnection'; +import { AvailableCapabilities } from '../models/yangCapabilitiesType'; + +export enum InfoNetworkElementDialogMode { + None = 'none', + InfoNetworkElement = 'infoNetworkElement', +} + +const mapDispatch = () => ({ +}); + +const InfoElementTable = MaterialTable as MaterialTableCtorType; + +type DialogSettings = { + dialogTitle: string; + dialogDescription: string; + cancelButtonText: string; +}; + +const settings: { [key: string]: DialogSettings } = { + [InfoNetworkElementDialogMode.None]: { + dialogTitle: '', + dialogDescription: '', + cancelButtonText: '', + }, + [InfoNetworkElementDialogMode.InfoNetworkElement]: { + dialogTitle: 'YANG Capabilities of the Node', + dialogDescription: '', + cancelButtonText: 'OK', + }, +}; + +type InfoNetworkElementDialogComponentProps = Connect & { + mode: InfoNetworkElementDialogMode; + initialNetworkElement: NetworkElementConnection; + onClose: () => void; +}; + +type InfoNetworkElementDialogComponentState = NetworkElementConnection; + +class InfoNetworkElementDialogComponent extends React.Component { + constructor(props: InfoNetworkElementDialogComponentProps) { + super(props); + + this.state = { + nodeId: this.props.initialNetworkElement.nodeId, + isRequired: false, + host: this.props.initialNetworkElement.host, + port: this.props.initialNetworkElement.port, + }; + } + + render(): JSX.Element { + const setting = settings[this.props.mode]; + const availableCapabilities = this.props.state.connect.elementInfo.elementInfo['netconf-node-topology:available-capabilities']['available-capability']; + let yangFeatures = this.props.state.connect.elementFeatureInfo.elementFeatureInfo; + let yangCapabilities: AvailableCapabilities[] = []; + + availableCapabilities.forEach(value => { + const capabilty = value.capability; + const indexRevision = capabilty.indexOf('revision='); + const indexModule = capabilty.indexOf(')', indexRevision); + if (indexRevision > 0 && indexModule > 0) { + let moduleName = capabilty.substring(indexModule + 1); + let ModuleFeaturesList; + for (let index = 0; index < yangFeatures.length; index++) { + if (yangFeatures[index].name == moduleName) { + ModuleFeaturesList = yangFeatures[index].feature ? yangFeatures[index].feature : null; + break; + } + } + const featuresListCommaSeparated = ModuleFeaturesList ? ModuleFeaturesList.toString() : ''; + let featuresList = featuresListCommaSeparated.replace(',', ', '); + + yangCapabilities.push({ + module: moduleName, + revision: capabilty.substring(indexRevision + 9, indexRevision + 19), + features: featuresList, + }); + } + }); + + yangCapabilities = yangCapabilities.sort((a, b) => a.module === b.module ? 0 : a.module > b.module ? 1 : -1); + + return ( + <> + + {`${setting.dialogTitle}: "${this.state.nodeId}"`} + { + return ( + + ); + }, + }, + { property: 'features', title: 'Features', type: ColumnType.text, width: 500 }, + ]} idProperty="id" rows={yangCapabilities} > + + + + + + + ); + } + + private onCancel = () => { + this.props.onClose(); + }; + + static getDerivedStateFromProps(props: InfoNetworkElementDialogComponentProps, state: InfoNetworkElementDialogComponentState & { initialNetworkElement: NetworkElementConnection }): InfoNetworkElementDialogComponentState & { initialNetworkElement: NetworkElementConnection } { + let returnState = state; + if (props.initialNetworkElement !== state.initialNetworkElement) { + returnState = { + ...state, + ...props.initialNetworkElement, + initialNetworkElement: props.initialNetworkElement, + }; + } + return returnState; + } +} + +export const InfoNetworkElementDialog = connect(undefined, mapDispatch)(InfoNetworkElementDialogComponent); +export default InfoNetworkElementDialog; \ No newline at end of file diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx index 67fdef69d..1ce8f0c3b 100644 --- a/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx +++ b/sdnr/wt/odlux/apps/connectApp/src/components/networkElements.tsx @@ -15,39 +15,37 @@ * the License. * ============LICENSE_END========================================================================== */ -import * as React from 'react'; -import { Theme } from '@mui/material/styles'; - -import { WithStyles } from '@mui/styles'; -import createStyles from '@mui/styles/createStyles'; -import withStyles from '@mui/styles/withStyles'; +import React from 'react'; import AddIcon from '@mui/icons-material/Add'; -import Refresh from '@mui/icons-material/Refresh'; +import ComputerIcon from '@mui/icons-material/Computer'; +import EditIcon from '@mui/icons-material/Edit'; +import Info from '@mui/icons-material/Info'; import LinkIcon from '@mui/icons-material/Link'; import LinkOffIcon from '@mui/icons-material/LinkOff'; +import Refresh from '@mui/icons-material/Refresh'; import RemoveIcon from '@mui/icons-material/RemoveCircleOutline'; -import EditIcon from '@mui/icons-material/Edit'; -import Info from '@mui/icons-material/Info'; -import ComputerIcon from '@mui/icons-material/Computer'; -import { MenuItem, Divider, Typography } from '@mui/material'; +import { Divider, MenuItem, Typography } from '@mui/material'; +import { Theme } from '@mui/material/styles'; +import { WithStyles } from '@mui/styles'; +import createStyles from '@mui/styles/createStyles'; +import withStyles from '@mui/styles/withStyles'; -import { MaterialTable, ColumnType, MaterialTableCtorType } from '../../../../framework/src/components/material-table'; -import { IApplicationStoreState } from '../../../../framework/src/store/applicationStore'; -import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect'; import { NavigateToApplication } from '../../../../framework/src/actions/navigationActions'; +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 { getAccessPolicyByUrl } from '../../../../framework/src/services/restService'; +import { loadAllInfoElementAsync, loadAllInfoElementFeaturesAsync } from '../actions/infoNetworkElementActions'; import { createNetworkElementsActions, createNetworkElementsProperties } from '../handlers/networkElementsHandler'; - import { NetworkElementConnection } from '../models/networkElementConnection'; import { ModuleSet, TopologyNode } from '../models/topologyNetconf'; -import EditNetworkElementDialog, { EditNetworkElementDialogMode } from './editNetworkElementDialog'; -import RefreshNetworkElementsDialog, { RefreshNetworkElementsDialogMode } from './refreshNetworkElementsDialog'; +import { connectService } from '../services/connectService'; +import EditNetworkElementDialog, { EditNetworkElementDialogMode } from './editNetworkElementDialog'; import InfoNetworkElementDialog, { InfoNetworkElementDialogMode } from './infoNetworkElementDialog'; -import { loadAllInfoElementAsync, loadAllInfoElementFeaturesAsync } from '../actions/infoNetworkElementActions'; -import { connectService } from '../services/connectService'; -import { getAccessPolicyByUrl } from '../../../../framework/src/services/restService'; +import RefreshNetworkElementsDialog, { RefreshNetworkElementsDialogMode } from './refreshNetworkElementsDialog'; const styles = (theme: Theme) => createStyles({ connectionStatusConnected: { @@ -61,17 +59,17 @@ const styles = (theme: Theme) => createStyles({ }, button: { margin: 0, - padding: "6px 6px", - minWidth: 'unset' + padding: '6px 6px', + minWidth: 'unset', }, spacer: { marginLeft: theme.spacing(1), marginRight: theme.spacing(1), - display: "inline" - } + display: 'inline', + }, }); -type GetStatelessComponentProps = T extends (props: infer P & { children?: React.ReactNode }) => any ? P : any +type GetStatelessComponentProps = T extends (props: infer P & { children?: React.ReactNode }) => any ? P : any; const MenuItemExt: React.FC> = (props) => { const [disabled, setDisabled] = React.useState(true); const onMouseDown = (ev: React.MouseEvent) => { @@ -95,21 +93,21 @@ const mapProps = (state: IApplicationStoreState) => ({ const mapDispatch = (dispatcher: IDispatcher) => ({ networkElementsActions: createNetworkElementsActions(dispatcher.dispatch), navigateToApplication: (applicationName: string, path?: string) => dispatcher.dispatch(new NavigateToApplication(applicationName, path)), - networkElementInfo: async (nodeId: string) => await dispatcher.dispatch(loadAllInfoElementAsync(nodeId)), - networkElementFeaturesInfo: async (nodeId: string) => await dispatcher.dispatch(loadAllInfoElementFeaturesAsync(nodeId)) + networkElementInfo: async (nodeId: string) => dispatcher.dispatch(loadAllInfoElementAsync(nodeId)), + networkElementFeaturesInfo: async (nodeId: string) => dispatcher.dispatch(loadAllInfoElementFeaturesAsync(nodeId)), }); type NetworkElementsListComponentProps = WithStyles & Connect; type NetworkElementsListComponentState = { - networkElementToEdit: NetworkElementConnection, - networkElementEditorMode: EditNetworkElementDialogMode, - refreshNetworkElementsEditorMode: RefreshNetworkElementsDialogMode, - infoNetworkElementEditorMode: InfoNetworkElementDialogMode, - elementInfo: TopologyNode | null, - elementInfoFeature: ModuleSet | null -} + networkElementToEdit: NetworkElementConnection; + networkElementEditorMode: EditNetworkElementDialogMode; + refreshNetworkElementsEditorMode: RefreshNetworkElementsDialogMode; + infoNetworkElementEditorMode: InfoNetworkElementDialogMode; + elementInfo: TopologyNode | null; + elementInfoFeature: ModuleSet | null; +}; -const emptyRequireNetworkElement: NetworkElementConnection = { id: "", nodeId: "", host: "", port: 830, status: "Disconnected", isRequired: true }; +const emptyRequireNetworkElement: NetworkElementConnection = { id: '', nodeId: '', host: '', port: 830, status: 'Disconnected', isRequired: true }; let initialSorted = false; const NetworkElementTable = MaterialTable as MaterialTableCtorType; @@ -124,7 +122,7 @@ export class NetworkElementsListComponent extends React.Component this.onOpenMountdNetworkElementsDialog(event, rowData)} disabled={!canMount} >Mount, - this.onOpenUnmountdNetworkElementsDialog(event, rowData)} disabled={!canMount} >Unmount, + this.onOpenMountdNetworkElementsDialog(event, rowData)} disabled={!canMount} >Mount, + this.onOpenUnmountdNetworkElementsDialog(event, rowData)} disabled={!canMount} >Unmount, , - this.onOpenInfoNetworkElementDialog(event, rowData)} disabled={rowData.status !== "Connected"} >Info, - this.onOpenEditNetworkElementDialog(event, rowData)}>Edit, - this.onOpenRemoveNetworkElementDialog(event, rowData)} >Remove, + this.onOpenInfoNetworkElementDialog(event, rowData)} disabled={rowData.status !== 'Connected'} >Info, + this.onOpenEditNetworkElementDialog(event, rowData)}>Edit, + this.onOpenRemoveNetworkElementDialog(event, rowData)} >Remove, , - this.props.navigateToApplication("inventory", rowData.nodeId)}>Inventory, + this.props.navigateToApplication('inventory', rowData.nodeId)}>Inventory, , - this.props.navigateToApplication("fault", rowData.nodeId)} >Fault, - this.props.navigateToApplication("configuration", rowData.nodeId)} disabled={rowData.status === "Connecting" || rowData.status === "Disconnected" || !configuration}>Configure, - this.props.navigateToApplication("accounting", rowData.nodeId)} disabled={true}>Accounting, - this.props.navigateToApplication("performanceHistory", rowData.nodeId)}>Performance, - this.props.navigateToApplication("security", rowData.nodeId)} disabled={true} >Security, + this.props.navigateToApplication('fault', rowData.nodeId)} >Fault, + this.props.navigateToApplication('configuration', rowData.nodeId)} disabled={rowData.status === 'Connecting' || rowData.status === 'Disconnected' || !configuration}>Configure, + this.props.navigateToApplication('accounting', rowData.nodeId)} disabled={true}>Accounting, + this.props.navigateToApplication('performanceHistory', rowData.nodeId)}>Performance, + this.props.navigateToApplication('security', rowData.nodeId)} disabled={true} >Security, ]; if (rowData.weburi) { // add an icon for gui cuttrough, if weburi is available - return [ window.open(rowData.weburi, "_blank")} >Web Client].concat(buttonArray) + return [ window.open(rowData.weburi, '_blank')} >Web Client].concat(buttonArray); } else { return buttonArray; } @@ -162,13 +160,13 @@ export class NetworkElementsListComponent extends React.Component 0) { - savedRadio = 'password' + savedRadio = 'password'; } else if (this.state.networkElementToEdit.tlsKey && this.state.networkElementToEdit.tlsKey.length > 0) { - savedRadio = 'tlsKey' + savedRadio = 'tlsKey'; } // const mountUri = rowData.id && connectService.getNetworkElementUri(rowData.id); @@ -177,32 +175,32 @@ export class NetworkElementsListComponent extends React.Component { + icon: AddIcon, tooltip: 'Add node', ariaLabel: 'add-element', onClick: () => { this.setState({ networkElementEditorMode: EditNetworkElementDialogMode.AddNewNetworkElement, networkElementToEdit: emptyRequireNetworkElement, }); - } + }, }; const refreshNetworkElementsAction = { icon: Refresh, tooltip: 'Refresh table', ariaLabel: 'refresh', onClick: () => { this.setState({ - refreshNetworkElementsEditorMode: RefreshNetworkElementsDialogMode.RefreshNetworkElementsTable + refreshNetworkElementsEditorMode: RefreshNetworkElementsDialogMode.RefreshNetworkElementsTable, }); - } + }, }; return <> { return this.getContextMenu(rowData); @@ -224,12 +222,12 @@ export class NetworkElementsListComponent extends React.Component ; - }; + } public componentDidMount() { if (!initialSorted) { initialSorted = true; - this.props.networkElementsActions.onHandleRequestSort("node-id"); + this.props.networkElementsActions.onHandleRequestSort('node-id'); } else { this.props.networkElementsActions.onRefresh(); } @@ -238,23 +236,23 @@ export class NetworkElementsListComponent extends React.Component, element: NetworkElementConnection) => { this.setState({ networkElementToEdit: element, - networkElementEditorMode: EditNetworkElementDialogMode.AddNewNetworkElement + networkElementEditorMode: EditNetworkElementDialogMode.AddNewNetworkElement, }); - } + }; private onOpenRemoveNetworkElementDialog = (event: React.MouseEvent, element: NetworkElementConnection) => { this.setState({ networkElementToEdit: element, - networkElementEditorMode: EditNetworkElementDialogMode.RemoveNetworkElement + networkElementEditorMode: EditNetworkElementDialogMode.RemoveNetworkElement, }); - } + }; private onOpenEditNetworkElementDialog = (event: React.MouseEvent, element: NetworkElementConnection) => { - let radioSaved; - if (element.password && element.password.length > 0) - radioSaved = 'password' - else if (element.tlsKey && element.tlsKey.length > 0) - radioSaved = 'tlsKey' + //let radioSaved; + //if (element.password && element.password.length > 0) + // radioSaved = 'password'; + //else if (element.tlsKey && element.tlsKey.length > 0) + // radioSaved = 'tlsKey'; this.setState({ networkElementToEdit: { nodeId: element.nodeId, @@ -263,25 +261,25 @@ export class NetworkElementsListComponent extends React.Component, element: NetworkElementConnection) => { this.setState({ networkElementToEdit: element, - networkElementEditorMode: EditNetworkElementDialogMode.UnmountNetworkElement + networkElementEditorMode: EditNetworkElementDialogMode.UnmountNetworkElement, }); - } + }; private onOpenMountdNetworkElementsDialog = (event: React.MouseEvent, element: NetworkElementConnection) => { this.setState({ networkElementToEdit: element, - networkElementEditorMode: EditNetworkElementDialogMode.MountNetworkElement + networkElementEditorMode: EditNetworkElementDialogMode.MountNetworkElement, }); - } + }; private onOpenInfoNetworkElementDialog = (event: React.MouseEvent, element: NetworkElementConnection) => { this.props.networkElementInfo(element.nodeId); @@ -290,25 +288,27 @@ export class NetworkElementsListComponent extends React.Component { this.setState({ networkElementEditorMode: EditNetworkElementDialogMode.None, networkElementToEdit: emptyRequireNetworkElement, }); - } + }; + private onCloseInfoNetworkElementDialog = () => { this.setState({ infoNetworkElementEditorMode: InfoNetworkElementDialogMode.None, networkElementToEdit: emptyRequireNetworkElement, }); - } + }; + private onCloseRefreshNetworkElementsDialog = () => { this.setState({ - refreshNetworkElementsEditorMode: RefreshNetworkElementsDialogMode.None + refreshNetworkElementsEditorMode: RefreshNetworkElementsDialogMode.None, }); - } + }; } export const NetworkElementsList = withStyles(styles)(connect(mapProps, mapDispatch)(NetworkElementsListComponent)); diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/refreshConnectionStatusLogDialog.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/refreshConnectionStatusLogDialog.tsx index c09f59b40..a4aea7f82 100644 --- a/sdnr/wt/odlux/apps/connectApp/src/components/refreshConnectionStatusLogDialog.tsx +++ b/sdnr/wt/odlux/apps/connectApp/src/components/refreshConnectionStatusLogDialog.tsx @@ -15,7 +15,7 @@ * the License. * ============LICENSE_END========================================================================== */ -import * as React from 'react'; +import React from 'react'; import Button from '@mui/material/Button'; import Dialog from '@mui/material/Dialog'; @@ -24,78 +24,75 @@ import DialogContent from '@mui/material/DialogContent'; import DialogContentText from '@mui/material/DialogContentText'; import DialogTitle from '@mui/material/DialogTitle'; -import { connectionStatusLogReloadAction } from '../handlers/connectionStatusLogHandler'; -import { IDispatcher, connect, Connect } from '../../../../framework/src/flux/connect'; +import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect'; +import { connectionStatusLogReloadAction } from '../handlers/connectionStatusLogHandler'; import { ConnectionStatusLogType } from '../models/connectionStatusLog'; export enum RefreshConnectionStatusLogDialogMode { - None = "none", - RefreshConnectionStatusLogTable = "RefreshConnectionStatusLogTable", + None = 'none', + RefreshConnectionStatusLogTable = 'RefreshConnectionStatusLogTable', } const mapDispatch = (dispatcher: IDispatcher) => ({ - refreshConnectionStatusLog: () => dispatcher.dispatch(connectionStatusLogReloadAction) + refreshConnectionStatusLog: () => dispatcher.dispatch(connectionStatusLogReloadAction), }); 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 } = { [RefreshConnectionStatusLogDialogMode.None]: { - dialogTitle: "", - dialogDescription: "", - applyButtonText: "", - cancelButtonText: "", + dialogTitle: '', + dialogDescription: '', + applyButtonText: '', + cancelButtonText: '', enableMountIdEditor: false, enableUsernameEditor: false, enableExtendedEditor: false, }, [RefreshConnectionStatusLogDialogMode.RefreshConnectionStatusLogTable]: { - dialogTitle: "Do you want to refresh the Connection Status Log table?", - dialogDescription: "", - applyButtonText: "Yes", - cancelButtonText: "Cancel", + dialogTitle: 'Do you want to refresh the Connection Status Log table?', + dialogDescription: '', + applyButtonText: 'Yes', + cancelButtonText: 'Cancel', enableMountIdEditor: true, enableUsernameEditor: true, enableExtendedEditor: true, - } -} + }, +}; type RefreshConnectionStatusLogDialogComponentProps = Connect & { mode: RefreshConnectionStatusLogDialogMode; onClose: () => void; }; -type RefreshConnectionStatusLogDialogComponentState = ConnectionStatusLogType & { isNameValid: boolean, isHostSet: boolean }; +type RefreshConnectionStatusLogDialogComponentState = ConnectionStatusLogType & { isNameValid: boolean; isHostSet: boolean }; class RefreshConnectionStatusLogDialogComponent extends React.Component { - constructor(props: RefreshConnectionStatusLogDialogComponentProps) { - super(props); - } render(): JSX.Element { const setting = settings[this.props.mode]; return ( - {setting.dialogTitle} + {setting.dialogTitle} {setting.dialogDescription} - - @@ -110,7 +107,7 @@ class RefreshConnectionStatusLogDialogComponent extends React.Component { this.props.onClose(); - } + }; } export const RefreshConnectionStatusLogDialog = connect(undefined, mapDispatch)(RefreshConnectionStatusLogDialogComponent); diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/refreshNetworkElementsDialog.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/refreshNetworkElementsDialog.tsx index abf593882..e41fd27aa 100644 --- a/sdnr/wt/odlux/apps/connectApp/src/components/refreshNetworkElementsDialog.tsx +++ b/sdnr/wt/odlux/apps/connectApp/src/components/refreshNetworkElementsDialog.tsx @@ -15,7 +15,7 @@ * the License. * ============LICENSE_END========================================================================== */ -import * as React from 'react'; +import React from 'react'; import Button from '@mui/material/Button'; import Dialog from '@mui/material/Dialog'; @@ -24,78 +24,75 @@ import DialogContent from '@mui/material/DialogContent'; import DialogContentText from '@mui/material/DialogContentText'; import DialogTitle from '@mui/material/DialogTitle'; -import { networkElementsReloadAction } from '../handlers/networkElementsHandler'; -import { IDispatcher, connect, Connect } from '../../../../framework/src/flux/connect'; +import { connect, Connect, IDispatcher } from '../../../../framework/src/flux/connect'; +import { networkElementsReloadAction } from '../handlers/networkElementsHandler'; import { NetworkElementConnection } from '../models/networkElementConnection'; export enum RefreshNetworkElementsDialogMode { - None = "none", - RefreshNetworkElementsTable = "RefreshNetworkElementsTable", + None = 'none', + RefreshNetworkElementsTable = 'RefreshNetworkElementsTable', } const mapDispatch = (dispatcher: IDispatcher) => ({ - refreshNetworkElement: () => dispatcher.dispatch(networkElementsReloadAction) + refreshNetworkElement: () => dispatcher.dispatch(networkElementsReloadAction), }); 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 } = { [RefreshNetworkElementsDialogMode.None]: { - dialogTitle: "", - dialogDescription: "", - applyButtonText: "", - cancelButtonText: "", + dialogTitle: '', + dialogDescription: '', + applyButtonText: '', + cancelButtonText: '', enableMountIdEditor: false, enableUsernameEditor: false, enableExtendedEditor: false, }, [RefreshNetworkElementsDialogMode.RefreshNetworkElementsTable]: { - dialogTitle: "Do you want to refresh the nodes table?", - dialogDescription: "", - applyButtonText: "Yes", - cancelButtonText: "Cancel", + dialogTitle: 'Do you want to refresh the nodes table?', + dialogDescription: '', + applyButtonText: 'Yes', + cancelButtonText: 'Cancel', enableMountIdEditor: true, enableUsernameEditor: true, enableExtendedEditor: true, - } -} + }, +}; type RefreshNetworkElementsDialogComponentProps = Connect & { mode: RefreshNetworkElementsDialogMode; onClose: () => void; }; -type RefreshNetworkElementsDialogComponentState = NetworkElementConnection & { isNameValid: boolean, isHostSet: boolean }; +type RefreshNetworkElementsDialogComponentState = NetworkElementConnection & { isNameValid: boolean; isHostSet: boolean }; class RefreshNetworkElementsDialogComponent extends React.Component { - constructor(props: RefreshNetworkElementsDialogComponentProps) { - super(props); - } render(): JSX.Element { const setting = settings[this.props.mode]; return ( - {setting.dialogTitle} + {setting.dialogTitle} {setting.dialogDescription} - - @@ -110,7 +107,7 @@ class RefreshNetworkElementsDialogComponent extends React.Component { this.props.onClose(); - } + }; } export const RefreshNetworkElementsDialog = connect(undefined, mapDispatch)(RefreshNetworkElementsDialogComponent); -- cgit 1.2.3-korg