diff options
Diffstat (limited to 'sdnr/wt/odlux/apps')
26 files changed, 87 insertions, 83 deletions
diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/ifWhenTextInput.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/ifWhenTextInput.tsx index 62ddeb22d..56ec8dfd0 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/components/ifWhenTextInput.tsx +++ b/sdnr/wt/odlux/apps/configurationApp/src/components/ifWhenTextInput.tsx @@ -75,7 +75,7 @@ export const IfWhenTextInput = (props: IfwhenProps) => { return ( <FormControl error={error} style={style}> <InputLabel htmlFor={id} >{label}</InputLabel> - <Input id={id} endAdornment={<div>{ifFeature}{whenFeature}</div>} {...otherProps} /> + <Input id={id} inputProps={{'aria-label': label+'-input'}} endAdornment={<div>{ifFeature}{whenFeature}</div>} {...otherProps} /> <FormHelperText>{errorText}</FormHelperText> </FormControl> ); diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementBoolean.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementBoolean.tsx index 2fbbf956f..081ec46e8 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementBoolean.tsx +++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementBoolean.tsx @@ -35,6 +35,7 @@ export const UiElementBoolean = (props: BooleanInputProps) => { ? (<FormControl style={{ width: 485, marginLeft: 20, marginRight: 20 }}> <InputLabel htmlFor={`select-${element.id}`} >{element.label}</InputLabel> <Select + aria-label={element.label+'-selection'} required={!!element.mandatory} error={mandetoryError} onChange={(e) => { props.onChange(e.target.value === 'true') }} @@ -46,8 +47,8 @@ export const UiElementBoolean = (props: BooleanInputProps) => { id: `select-${element.id}`, }} > - <MenuItem value={'true'}>{element.trueValue || 'True'}</MenuItem> - <MenuItem value={'false'}>{element.falseValue || 'False'}</MenuItem> + <MenuItem value={'true'} aria-label="true">{element.trueValue || 'True'}</MenuItem> + <MenuItem value={'false'} aria-label="false">{element.falseValue || 'False'}</MenuItem> </Select> <FormHelperText>{mandetoryError ? "Value is mandetory" : ""}</FormHelperText> diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementReference.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementReference.tsx index 2760eee50..b95df1f51 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementReference.tsx +++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementReference.tsx @@ -39,9 +39,9 @@ export const UIElementReference: React.FC<UIElementReferenceProps> = (props) => return ( <FormControl key={element.id} style={{ width: 485, marginLeft: 20, marginRight: 20 }}> <Tooltip title={element.description || ''}> - <Button className={classes.button} color="secondary" disabled={props.disabled} onClick={() => { + <Button className={classes.button} aria-label={element.label+'-button'} color="secondary" disabled={props.disabled} onClick={() => { props.onOpenReference(element); - }}>{element.label}</Button> + }}>{`${element.label}`}</Button> </Tooltip> </FormControl> ); diff --git a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementSelection.tsx b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementSelection.tsx index 278605144..530b0be9b 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementSelection.tsx +++ b/sdnr/wt/odlux/apps/configurationApp/src/components/uiElementSelection.tsx @@ -19,7 +19,7 @@ import * as React from 'react'; import { BaseProps } from './baseProps'; import { ViewElementSelection } from '../models/uiModels' -import { FormControl, InputLabel, Select, FormHelperText, MenuItem } from '@material-ui/core'; +import { FormControl, InputLabel, Select, FormHelperText, MenuItem, Tooltip } from '@material-ui/core'; type selectionProps = BaseProps; @@ -37,20 +37,20 @@ export const UiElementSelection = (props: selectionProps) => { ? (<FormControl style={{ width: 485, marginLeft: 20, marginRight: 20 }}> <InputLabel htmlFor={`select-${element.id}`} >{element.label}</InputLabel> <Select - title={(element.options.find(o => o.key === value.toString().toLowerCase()) || { description: undefined }).description} required={!!element.mandatory} error={!!error} onChange={(e) => { props.onChange(e.target.value as string) }} readOnly={props.readOnly} disabled={props.disabled} value={value.toString().toLowerCase()} + aria-label={element.label+'-selection'} inputProps={{ name: element.id, id: `select-${element.id}`, }} > {element.options.map(option => ( - <MenuItem key={option.key} title={option.description || ''} value={option.key}>{option.key}</MenuItem> + <MenuItem key={option.key} value={option.key} aria-label={option.key}><Tooltip title={option.description || '' }><div style={{width:"100%"}}>{option.key}</div></Tooltip></MenuItem> ))} </Select> <FormHelperText>{error}</FormHelperText> diff --git a/sdnr/wt/odlux/apps/configurationApp/src/views/networkElementSelector.tsx b/sdnr/wt/odlux/apps/configurationApp/src/views/networkElementSelector.tsx index 503133b0f..5d849986d 100644 --- a/sdnr/wt/odlux/apps/configurationApp/src/views/networkElementSelector.tsx +++ b/sdnr/wt/odlux/apps/configurationApp/src/views/networkElementSelector.tsx @@ -55,8 +55,8 @@ class NetworkElementSelectorComponent extends React.Component<NetworkElementSele render() { return ( <ConnectedElementTable stickyHeader onHandleClick={(e, row) => { this.props.history.push(`${this.props.match.path}/${row.nodeId}`) }} columns={[ - { property: "nodeId", title: "Name", type: ColumnType.text }, - { property: "isRequired", title: "Required ?", type: ColumnType.boolean }, + { property: "nodeId", title: "Node Name", type: ColumnType.text }, + { property: "isRequired", title: "Required", type: ColumnType.boolean }, { property: "host", title: "Host", type: ColumnType.text }, { property: "port", title: "Port", type: ColumnType.numeric }, { property: "coreModelCapability", title: "Core Model", type: ColumnType.text }, diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/connectionStatusLog.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/connectionStatusLog.tsx index 96f6c8a6b..f2fd2937d 100644 --- a/sdnr/wt/odlux/apps/connectApp/src/components/connectionStatusLog.tsx +++ b/sdnr/wt/odlux/apps/connectApp/src/components/connectionStatusLog.tsx @@ -42,9 +42,9 @@ class ConnectionStatusLogComponent extends React.Component<ConnectionStatusLogCo render(): JSX.Element { return ( <ConnectionStatusTable stickyHeader tableId="connection-status-table" columns={[ - { property: "timestamp", title: "Time", type: ColumnType.text }, + { property: "timestamp", title: "Timestamp", type: ColumnType.text }, { property: "nodeId", title: "Node Name", type: ColumnType.text }, - { property: "status", title: "Connection status", type: ColumnType.text }, + { property: "status", title: "Connection Status", type: ColumnType.text }, ]} idProperty="id" {...this.props.connectionStatusLogActions} {...this.props.connectionStatusLogProperties} > </ConnectionStatusTable> ); diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx index 3b4cf3bb5..97e6647cf 100644 --- a/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx +++ b/sdnr/wt/odlux/apps/connectApp/src/components/editNetworkElementDialog.tsx @@ -192,11 +192,11 @@ class EditNetworkElementDialogComponent extends React.Component<EditNetworkEleme {setting.enableUsernameEditor && <TextField disabled={!setting.enableUsernameEditor} spellCheck={false} margin="dense" id="password" label="Password" aria-label="password" type="password" fullWidth value={this.state.password} onChange={(event) => { this.setState({ password: event.target.value }); }} /> || null} <FormControl fullWidth disabled={!setting.enableUsernameEditor}> <InputLabel htmlFor="active">Required</InputLabel> - <Select value={this.state.isRequired || false} onChange={(event) => { + <Select aria-label="required-selection" value={this.state.isRequired || false} onChange={(event) => { this.setState({ isRequired: event.target.value as any as boolean }); }} inputProps={{ name: 'required', id: 'required' }} fullWidth > - <MenuItem value={true as any as string} >True</MenuItem> - <MenuItem value={false as any as string} >False</MenuItem> + <MenuItem value={true as any as string} aria-label="true">True</MenuItem> + <MenuItem value={false as any as string} aria-label="false">False</MenuItem> </Select> </FormControl> </DialogContent> diff --git a/sdnr/wt/odlux/apps/connectApp/src/components/infoNetworkElementDialog.tsx b/sdnr/wt/odlux/apps/connectApp/src/components/infoNetworkElementDialog.tsx index ea9d419ec..df8515e58 100644 --- a/sdnr/wt/odlux/apps/connectApp/src/components/infoNetworkElementDialog.tsx +++ b/sdnr/wt/odlux/apps/connectApp/src/components/infoNetworkElementDialog.tsx @@ -56,7 +56,7 @@ const settings: { [key: string]: DialogSettings } = { [InfoNetworkElementDialogMode.InfoNetworkElement]: { dialogTitle: "Yang capabilities of the network element", dialogDescription: "Available capabilities of the network element", - cancelButtonText: "Cancel", + cancelButtonText: "OK", } } @@ -97,6 +97,8 @@ class InfoNetworkElementDialogComponent extends React.Component<InfoNetworkEleme } }); + yangCapabilities = yangCapabilities.sort((a,b) => a.module === b.module ? 0 : a.module > b.module ? 1 : -1); + return ( <Dialog open={this.props.mode !== InfoNetworkElementDialogMode.None}> <DialogTitle id="form-dialog-title">{setting.dialogTitle}</DialogTitle> @@ -104,7 +106,7 @@ class InfoNetworkElementDialogComponent extends React.Component<InfoNetworkEleme <DialogContentText> {setting.dialogDescription + " " + this.state.nodeId} </DialogContentText> - <Table > + <Table aria-label="yang-capabilities-table"> <TableHead> <TableRow> <TableCell align="right">S.No</TableCell> @@ -114,17 +116,17 @@ class InfoNetworkElementDialogComponent extends React.Component<InfoNetworkEleme </TableHead> <TableBody> {yangCapabilities.map((yang, index) => ( - <TableRow> + <TableRow aria-label="yang-capabilities-row"> <TableCell>{index + 1}</TableCell> - <TableCell>{yang.module}</TableCell> - <TableCell>{yang.revision}</TableCell> + <TableCell aria-label="yang-module"><a href={`/yang-schema/${yang.module}`} target={"_blank"}> {yang.module} </a></TableCell> + <TableCell aria-label="yang-revision">{yang.revision}</TableCell> </TableRow> ))} </TableBody> </Table> </DialogContent> <DialogActions> - <Button onClick={(event) => { + <Button aria-label="ok-button" onClick={(event) => { this.onCancel(); event.preventDefault(); event.stopPropagation(); diff --git a/sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx b/sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx index 86861fabb..1fa5e1909 100644 --- a/sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx +++ b/sdnr/wt/odlux/apps/connectApp/src/views/connectView.tsx @@ -105,9 +105,9 @@ class ConnectApplicationComponent extends React.Component<ConnectApplicationComp return ( <> <AppBar position="static"> - <Tabs value={activePanelId} onChange={this.onHandleTabChange} aria-label="simple tabs example"> - <Tab aria-lablel="network-elements-list-tab" label="Network Elements" value="NetworkElements" /> - <Tab aria-lablel="connection-status-log-tab" label="Connection Status Log" value="ConnectionStatusLog" /> + <Tabs value={activePanelId} onChange={this.onHandleTabChange} aria-label="connect-app-tabs"> + <Tab aria-label="network-elements-list-tab" label="Network Elements" value="NetworkElements" /> + <Tab aria-label="connection-status-log-tab" label="Connection Status Log" value="ConnectionStatusLog" /> </Tabs> </AppBar> {activePanelId === 'NetworkElements' diff --git a/sdnr/wt/odlux/apps/eventLogApp/src/views/eventLog.tsx b/sdnr/wt/odlux/apps/eventLogApp/src/views/eventLog.tsx index aa9027206..3d81e4e46 100644 --- a/sdnr/wt/odlux/apps/eventLogApp/src/views/eventLog.tsx +++ b/sdnr/wt/odlux/apps/eventLogApp/src/views/eventLog.tsx @@ -39,7 +39,7 @@ let initalSorted = false; class EventLogComponent extends React.Component<Connect<typeof mapProps, typeof mapDispatch>> { render() { - return <EventLogTable stickyHeader title="Event Log" idProperty="_id" columns={[ + return <EventLogTable stickyHeader title="Event Log" tableId="event-log-table" idProperty="_id" columns={[ { property: "nodeId", title: "Node Name" }, { property: "counter", title: "Counter" }, { property: "timestamp", title: "Timestamp" }, diff --git a/sdnr/wt/odlux/apps/faultApp/src/views/faultApplication.tsx b/sdnr/wt/odlux/apps/faultApp/src/views/faultApplication.tsx index 7c29fec56..2c167c5b2 100644 --- a/sdnr/wt/odlux/apps/faultApp/src/views/faultApplication.tsx +++ b/sdnr/wt/odlux/apps/faultApp/src/views/faultApplication.tsx @@ -137,16 +137,16 @@ class FaultApplicationComponent extends React.Component<FaultApplicationComponen return ( <> <AppBar position="static" > - <Tabs value={activePanelId} onChange={this.onHandleTabChange} aria-label="fault tabs"> + <Tabs 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="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' && <FaultTable stickyHeader idProperty={'id'} customActionButtons={customAction} columns={[ + activePanelId === 'CurrentProblem' && <FaultTable stickyHeader tableId="current-problems-table" idProperty={'id'} customActionButtons={customAction} columns={[ { property: "icon", title: "", type: ColumnType.custom, customControl: this.renderIcon }, - { property: "timestamp", type: ColumnType.text, title: "Time Stamp" }, + { 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 }, @@ -156,9 +156,9 @@ class FaultApplicationComponent extends React.Component<FaultApplicationComponen } {activePanelId === 'AlarmNotifications' && - <FaultAlarmNotificationTable stickyHeader rows={this.props.faultNotifications.faults} asynchronus columns={[ + <FaultAlarmNotificationTable tableId="alarm-notifications-table" stickyHeader rows={this.props.faultNotifications.faults} asynchronus columns={[ { property: "icon", title: "", type: ColumnType.custom, customControl: this.renderIcon }, - { property: "timeStamp", title: "Time Stamp" }, + { property: "timeStamp", title: "Timestamp" }, { property: "nodeName", title: "Node Name" }, { property: "counter", title: "Count", width: "100px", type: ColumnType.numeric }, { property: "objectId", title: "Object Id" }, @@ -168,9 +168,11 @@ class FaultApplicationComponent extends React.Component<FaultApplicationComponen } - {activePanelId === 'AlarmLog' && <FaultTable stickyHeader idProperty={'id'} columns={[ + {activePanelId === 'AlarmLog' && + <FaultTable stickyHeader idProperty={'id'} tableId="alarm-log-table" + columns={[ { property: "icon", title: "", type: ColumnType.custom, customControl: this.renderIcon }, - { property: "timestamp", title: "Time Stamp" }, + { property: "timestamp", title: "Timestamp" }, { property: "nodeId", title: "Node Name" }, { property: "counter", title: "Count", type: ColumnType.numeric, width: "100px" }, { property: "objectId", title: "Object Id" }, diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/views/dashboard.tsx b/sdnr/wt/odlux/apps/inventoryApp/src/views/dashboard.tsx index 14792df5b..f5ada22ab 100644 --- a/sdnr/wt/odlux/apps/inventoryApp/src/views/dashboard.tsx +++ b/sdnr/wt/odlux/apps/inventoryApp/src/views/dashboard.tsx @@ -115,9 +115,9 @@ class DashboardSelectorComponent extends React.Component<DashboardComponentProps return ( <> <AppBar position="static"> - <Tabs value={activePanelId} onChange={this.onHandleTabChange} aria-label="simple tabs example"> - <Tab label="Table View" value="InventoryElementsTable" /> - <Tab label="Tree view" value="TreeviewTable" /> + <Tabs value={activePanelId} onChange={this.onHandleTabChange} aria-label="inventory-app-tabs"> + <Tab label="Table View" value="InventoryElementsTable" aria-label="table-tab" /> + <Tab label="Tree view" value="TreeviewTable" aria-label="treeview-tab" /> </Tabs> </AppBar> @@ -125,7 +125,7 @@ class DashboardSelectorComponent extends React.Component<DashboardComponentProps activePanelId === "InventoryElementsTable" && - <InventoryTable stickyHeader title="Inventory" idProperty="_id" columns={[ + <InventoryTable stickyHeader title="Inventory" idProperty="_id" tableId="inventory-table" columns={[ { property: "nodeId", title: "Node Name" }, { property: "manufacturerIdentifier", title: "Manufacturer" }, { property: "parentUuid", title: "Parent" }, @@ -149,9 +149,9 @@ class DashboardSelectorComponent extends React.Component<DashboardComponentProps { activePanelId === "TreeviewTable" && - <ConnectedElementTable stickyHeader onHandleClick={(e, row) => { this.props.history.push(`${this.props.match.path}/${row.nodeId}`) }} columns={[ - { property: "nodeId", title: "Name", type: ColumnType.text }, - { property: "isRequired", title: "Required ?", type: ColumnType.boolean }, + <ConnectedElementTable stickyHeader tableId="treeview-networkelement-selection-table" onHandleClick={(e, row) => { this.props.history.push(`${this.props.match.path}/${row.nodeId}`) }} columns={[ + { property: "nodeId", title: "Node Name", type: ColumnType.text }, + { property: "isRequired", title: "Required", type: ColumnType.boolean }, { property: "host", title: "Host", type: ColumnType.text }, { property: "port", title: "Port", type: ColumnType.numeric }, { property: "coreModelCapability", title: "Core Model", type: ColumnType.text }, diff --git a/sdnr/wt/odlux/apps/inventoryApp/src/views/treeview.tsx b/sdnr/wt/odlux/apps/inventoryApp/src/views/treeview.tsx index 5f2c61080..5ba82abe7 100644 --- a/sdnr/wt/odlux/apps/inventoryApp/src/views/treeview.tsx +++ b/sdnr/wt/odlux/apps/inventoryApp/src/views/treeview.tsx @@ -112,7 +112,7 @@ class DashboardComponent extends React.Component<TreeviewComponentProps, Treevie }} onItemClick={(elm) => selectTreeNode(elm.value)} /> <div className={classes.details}>{ - selectedNode && renderObject(selectedNode) || null + selectedNode && renderObject(selectedNode, "tree-view") || null }</div> </div> ); diff --git a/sdnr/wt/odlux/apps/maintenanceApp/src/views/maintenenceView.tsx b/sdnr/wt/odlux/apps/maintenanceApp/src/views/maintenenceView.tsx index f087ed2e4..f52d46d81 100644 --- a/sdnr/wt/odlux/apps/maintenanceApp/src/views/maintenenceView.tsx +++ b/sdnr/wt/odlux/apps/maintenanceApp/src/views/maintenenceView.tsx @@ -116,7 +116,7 @@ class MaintenenceViewComponent extends React.Component<MaintenenceViewComponentP const now = new Date().valueOf(); return ( <> - <MaintenenceEntriesTable stickyHeader title={"Maintenance"} customActionButtons={[addMaintenenceEntryAction]} columns={ + <MaintenenceEntriesTable stickyHeader tableId="maintenance-table" title={"Maintenance"} customActionButtons={[addMaintenenceEntryAction]} columns={ [ { property: "nodeId", title: "Node Name", type: ColumnType.text }, { diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/linkDetails.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/linkDetails.tsx index 0c9f6034f..a8f73f35c 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/linkDetails.tsx +++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/linkDetails.tsx @@ -82,10 +82,10 @@ const LinkDetails: React.FunctionComponent<props> = (props) => { return (<div style={{ paddingLeft: "15px", paddingRight: "15px", paddingTop: "0px", display: 'flex', flexDirection: 'column' }}> <h2>{props.link.name}</h2> - <TextField aria-label="operator" disabled style={{ marginTop: "5px" }} value="Unkown" label="Operator" /> - <TextField aria-label="type" disabled style={{ marginTop: "5px" }} value={props.link.type} label="Type" /> - <TextField aria-label="planned-distance-in-km" disabled style={{ marginTop: "5px" }} value={props.link.length.toFixed(2)} label="Distance planned in km" /> - <TextField aria-label="calculated-distance-in-km" disabled style={{ marginTop: "5px" }} value={props.link.calculatedLength.toFixed(2)} label="Distance calculated in km" /> + <TextField inputProps={{ 'aria-label': 'operator' }} disabled style={{ marginTop: "5px" }} value="Unkown" label="Operator" /> + <TextField inputProps={{ 'aria-label': 'type' }} disabled style={{ marginTop: "5px" }} value={props.link.type} label="Type" /> + <TextField inputProps={{ 'aria-label': 'planned-distance-in-km' }} disabled style={{ marginTop: "5px" }} value={props.link.length.toFixed(2)} label="Distance planned in km" /> + <TextField inputProps={{ 'aria-label': 'calculated-distance-in-km' }} disabled style={{ marginTop: "5px" }} value={props.link.calculatedLength.toFixed(2)} label="Distance calculated in km" /> <AppBar position="static" id="site-tabs" style={{ marginTop: "20px", background: '#2E3B55' }}> <Typography aria-label="details-of-link-sites" style={{ margin:"5px"}}>SITE DETAILS</Typography> diff --git a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx index 92643d0c4..613166116 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx +++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx @@ -41,7 +41,6 @@ const SiteDetails: React.FunctionComponent<props> = (props) => { const [height, setHeight] = React.useState(330); const handleResize = () =>{ - //console.log("resize") const el = document.getElementById('site-details-panel')?.getBoundingClientRect(); const el2 = document.getElementById('site-tabs')?.getBoundingClientRect(); @@ -81,28 +80,28 @@ const SiteDetails: React.FunctionComponent<props> = (props) => { <h2 >{props.site.name}</h2> { props.site.operator !== '' && props.site.operator !== null ? - <TextField aria-label="operator" disabled={true} value={props.site.operator} label="Operator" /> : - <TextField aria-label="operator" disabled={true} value="Unkown" label="Operator" style={{ marginTop: "5px" }} /> + <TextField inputProps={{ 'aria-label': 'operator' }} disabled={true} value={props.site.operator} label="Operator" /> : + <TextField inputProps={{ 'aria-label': 'operator' }} disabled={true} value="Unkown" label="Operator" style={{ marginTop: "5px" }} /> } { props.site.type !== undefined && props.site.type.length > 0 && - <TextField aria-label="type" disabled={true} value={props.site.type} label="Type" style={{ marginTop: "5px" }} /> + <TextField inputProps={{ 'aria-label': 'type' }} disabled={true} value={props.site.type} label="Type" style={{ marginTop: "5px" }} /> } { props.site.address !== undefined && props.site.address.length > 0 && - <TextField aria-label="adress" disabled={true} value={props.site.address} label="Adress" style={{ marginTop: "5px" }} /> + <TextField inputProps={{ 'aria-label': 'adress' }} disabled={true} value={props.site.address} label="Adress" style={{ marginTop: "5px" }} /> } { props.site.heighAGLInMeters !== undefined && props.site.heighAGLInMeters > 0 && - <TextField aria-label="amsl-in-meters" disabled={true} value={props.site.heighAGLInMeters} label="AMSL in meters" style={{ marginTop: "5px" }} /> + <TextField inputProps={{ 'aria-label': 'amsl-in-meters' }} disabled={true} value={props.site.heighAGLInMeters} label="AMSL in meters" style={{ marginTop: "5px" }} /> } { props.site.antennaHeightAGLInMeters !== undefined && props.site.antennaHeightAGLInMeters > 0 && - <TextField aria-label="antenna-above-ground-in-meters" disabled={true} value={props.site.antennaHeightAGLInMeters} label="Atenna above ground in meters" style={{ marginTop: "5px" }} /> + <TextField inputProps={{ 'aria-label': 'antenna-above-ground-in-meters' }} disabled={true} value={props.site.antennaHeightAGLInMeters} label="Atenna above ground in meters" style={{ marginTop: "5px" }} /> } - <TextField aria-label="latitude" style={{ marginTop: "5px" }} disabled={true} value={LatLonToDMS(props.site.geoLocation.lat)} label="Latitude" /> - <TextField aria-label="longitude" style={{ marginTop: "5px" }} disabled={true} value={LatLonToDMS(props.site.geoLocation.lon, true)} label="Longitude" /> + <TextField inputProps={{ 'aria-label': 'latitude' }} style={{ marginTop: "5px" }} disabled={true} value={LatLonToDMS(props.site.geoLocation.lat)} label="Latitude" /> + <TextField inputProps={{ 'aria-label': 'longitude' }} style={{ marginTop: "5px" }} disabled={true} value={LatLonToDMS(props.site.geoLocation.lon, true)} label="Longitude" /> <AppBar position="static" style={{ marginTop: "5px", background: '#2E3B55' }}> <Tabs id="site-tabs" value={value} onChange={onHandleTabChange} aria-label="simple tabs example"> diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx index f0a93f565..17b1374b8 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/adaptiveModulation.tsx @@ -90,7 +90,7 @@ class AdaptiveModulationComponent extends React.Component<AdaptiveModulationComp <> <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.adaptiveModulationProperties.filter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}> {lineChart(chartPagedData)} - <AdaptiveModulationTable stickyHeader idProperty={"_id"} columns={adaptiveModulationColumns} {...properties} {...actions} /> + <AdaptiveModulationTable stickyHeader idProperty={"_id"} tableId="adaptive-modulation-table" columns={adaptiveModulationColumns} {...properties} {...actions} /> </ToggleContainer> </> ); diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx index e5f540e19..e7583de12 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/chartFilter.tsx @@ -44,22 +44,22 @@ const ChartFilter: React.FunctionComponent<filterProps> = (props) => { { props.isVisible && <div className={classes.filterContainer}> - <TextField className={classes.filterInput} label="Radio Signal" value={props.filters.radioSignalId || ''} onChange={(event) => props.onFilterChanged("radioSignalId", event.target.value)} InputLabelProps={{ + <TextField inputProps={{'aria-label': 'radio-signal-filter'}} className={classes.filterInput} label="Radio Signal" value={props.filters.radioSignalId || ''} onChange={(event) => props.onFilterChanged("radioSignalId", event.target.value)} InputLabelProps={{ shrink: true, }} /> - <TextField className={classes.filterInput} label="Scanner ID" value={props.filters.scannerId || ''} onChange={(event) => props.onFilterChanged("scannerId", event.target.value)} InputLabelProps={{ + <TextField inputProps={{'aria-label': 'scanner-id-filter'}} className={classes.filterInput} label="Scanner ID" value={props.filters.scannerId || ''} onChange={(event) => props.onFilterChanged("scannerId", event.target.value)} InputLabelProps={{ shrink: true, }} /> - <TextField className={classes.filterInput} label="End Time" value={props.filters.timeStamp || ''} onChange={(event) => props.onFilterChanged("timeStamp", event.target.value)} InputLabelProps={{ + <TextField inputProps={{'aria-label': 'end-time-filter'}} className={classes.filterInput} label="End Time" value={props.filters.timeStamp || ''} onChange={(event) => props.onFilterChanged("timeStamp", event.target.value)} InputLabelProps={{ shrink: true, }} /> <FormControl> <InputLabel id="suspect-interval-label" shrink>Suspect Interval</InputLabel> - <Select labelId="suspect-interval-label" value={suspectIntervalFlag || ''} onChange={(event) => props.onFilterChanged("suspectIntervalFlag", event.target.value as string)}> - <MenuItem value={undefined}>None</MenuItem> - <MenuItem value={"true"}>true</MenuItem> - <MenuItem value={"false"}>false</MenuItem> + <Select aria-label="suspect-interval-selection" labelId="suspect-interval-label" value={suspectIntervalFlag || ''} onChange={(event) => props.onFilterChanged("suspectIntervalFlag", event.target.value as string)}> + <MenuItem value={undefined} aria-label="none">None</MenuItem> + <MenuItem value={"true"} aria-label="true">true</MenuItem> + <MenuItem value={"false"} aria-label="false">false</MenuItem> </Select> </FormControl> </ div> diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx index 60051d03e..14cc02d6d 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/crossPolarDiscrimination.tsx @@ -93,7 +93,7 @@ class CrossPolarDiscriminationComponent extends React.Component<CrossPolarDiscri <> <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.crossPolarDiscriminationProperties.filter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}> {lineChart(chartPagedData)} - <CrossPolarDiscriminationTable stickyHeader idProperty={"_id"} columns={cpdColumns} {...properties} {...actions} /> + <CrossPolarDiscriminationTable stickyHeader idProperty={"_id"} tableId="cross-polar-discrimination-table" columns={cpdColumns} {...properties} {...actions} /> </ToggleContainer> </> ); diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx index b0aebd208..61b781384 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/ltpSelection.tsx @@ -58,15 +58,15 @@ export const LtpSelection = (props: LtpSelectionProps) => { <span> Select LTP </span> - <Select className={classes.selectDropdown} value={props.selectedLtp} onChange={props.onChangeLtp} > - <MenuItem value={"-1"}><em>--Select--</em></MenuItem> + <Select className={classes.selectDropdown} value={props.selectedLtp} onChange={props.onChangeLtp} aria-label="ltp-selection" > + <MenuItem value={"-1"} aria-label="none"><em>--Select--</em></MenuItem> {props.availableLtps.map(ltp => - (<MenuItem value={ltp.key} key={ltp.key}>{ltp.key}</MenuItem>))} + (<MenuItem value={ltp.key} key={ltp.key} aria-label={ltp.key}>{ltp.key}</MenuItem>))} </Select> <span> Time-Period </span> - <Select className={classes.selectDropdown} value={props.selectedTimePeriod} onChange={props.onChangeTimePeriod} > - <MenuItem value={"15min"}>15min</MenuItem> - <MenuItem value={"24hours"}>24hours</MenuItem> + <Select className={classes.selectDropdown} value={props.selectedTimePeriod} onChange={props.onChangeTimePeriod} aria-label="time-period-selection"> + <MenuItem value={"15min"} aria-label="15minutes">15min</MenuItem> + <MenuItem value={"24hours"} aria-label="24hours">24hours</MenuItem> </Select> </FormControl> { diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx index 28352cd31..62090245a 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/performanceData.tsx @@ -85,7 +85,7 @@ class PerformanceDataComponent extends React.Component<PerformanceDataComponentP <> <ToggleContainer onToggleFilterButton={() => this.props.toggleFilterButton(!this.props.isFilterVisible)} existingFilter={this.props.existingFilter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} showFilter={this.props.isFilterVisible} onChange={this.props.setSubView}> {lineChart(chartPagedData)} - <PerformanceDataTable stickyHeader idProperty={"_id"} columns={performanceColumns} {...properties} {...actions} /> + <PerformanceDataTable stickyHeader idProperty={"_id"} tableId="perfromance-data-table" columns={performanceColumns} {...properties} {...actions} /> </ToggleContainer> </> ); diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx index 720fb946e..8dc92b8ac 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/receiveLevel.tsx @@ -92,7 +92,7 @@ class ReceiveLevelComponent extends React.Component<ReceiveLevelComponentProps>{ <> <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.receiveLevelProperties.filter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}> {lineChart(chartPagedData)} - <ReceiveLevelTable stickyHeader idProperty={"_id"} columns={receiveLevelColumns} {...properties} {...actions} /> + <ReceiveLevelTable stickyHeader idProperty={"_id"} tableId="receive-level-table" columns={receiveLevelColumns} {...properties} {...actions} /> </ToggleContainer> </> ); diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx index 4b34019ae..ee7fe34aa 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/signalToInterference.tsx @@ -91,7 +91,7 @@ class SignalToInterferenceComponent extends React.Component<SignalToInterference <> <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.signalToInterferenceProperties.filter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}> {lineChart(chartPagedData)} - <SignalToInterferenceTable stickyHeader idProperty={"_id"} columns={sinrColumns} {...properties} {...actions} + <SignalToInterferenceTable stickyHeader idProperty={"_id"} tableId="signal-to-interference-table" columns={sinrColumns} {...properties} {...actions} /> </ToggleContainer> </> diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx index 2484a8cfb..31e1d363f 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/temperature.tsx @@ -93,7 +93,7 @@ class TemperatureComponent extends React.Component<TemperatureComponentProps>{ <ToggleContainer onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.temperatureProperties.filter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} onChange={this.onChange}> {lineChart(chartPagedData)} - <TemperatureTable stickyHeader idProperty={"_id"} columns={temperatureColumns} {...properties} {...actions} /> + <TemperatureTable stickyHeader idProperty={"_id"} tableId="temperature-table" columns={temperatureColumns} {...properties} {...actions} /> </ToggleContainer> </> ); diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx index e44ffe077..97a35da0a 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/components/transmissionPower.tsx @@ -94,7 +94,7 @@ class TransmissionPowerComponent extends React.Component<TransmissionPowerCompon <> <ToggleContainer onChange={this.onChange} onToggleFilterButton={this.onToggleFilterButton} showFilter={this.props.isFilterVisible} existingFilter={this.props.transmissionPowerProperties.filter} onFilterChanged={this.onFilterChanged} selectedValue={this.props.currentView} > {lineChart(chartPagedData)} - <TransmissionPowerTable stickyHeader idProperty={"_id"} columns={transmissionColumns} {...properties} {...actions} /> + <TransmissionPowerTable stickyHeader idProperty={"_id"} tableId="transmission-power-table" columns={transmissionColumns} {...properties} {...actions} /> </ToggleContainer> </> ); diff --git a/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx b/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx index f19058cf2..a0df93fe1 100644 --- a/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx +++ b/sdnr/wt/odlux/apps/performanceHistoryApp/src/views/performanceHistoryApplication.tsx @@ -223,7 +223,7 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp if (nodeId === "") { return ( <> - <NetworkElementTable defaultSortColumn={"nodeId"} defaultSortOrder="asc" stickyHeader title={"Please select the network element!"} idProperty={"nodeId"} rows={this.props.networkElements} asynchronus + <NetworkElementTable tableId="performance-data-element-selection-table" defaultSortColumn={"nodeId"} defaultSortOrder="asc" stickyHeader title={"Please select the network element!"} idProperty={"nodeId"} rows={this.props.networkElements} asynchronus onHandleClick={(event, rowData) => { this.handleNetworkElementSelect(rowData.nodeId) }} columns={ [{ property: "nodeId", title: "Node Name" }] } /> @@ -245,14 +245,14 @@ class PerformanceHistoryComponent extends React.Component<PerformanceHistoryComp <> <AppBar position="static" > - <Tabs value={activePanel} onChange={this.onChangeTabs} variant="scrollable" scrollButtons="auto" aria-label="performance data tabs"> - <Tab label="Performance Data" value="PerformanceData" /> - <Tab label="Receive Level" value="ReceiveLevel" /> - <Tab label="Transmission Power" value="TransmissionPower" /> - <Tab label="Adaptive Modulation" value="AdaptiveModulation" /> - <Tab label="Temperature" value="Temperature" /> - <Tab label="Signal-to-interference-plus-noise ratio (SINR)" value="SINR" /> - <Tab label="Cross Polar Discrimination" value="CPD" /> + <Tabs value={activePanel} onChange={this.onChangeTabs} variant="scrollable" scrollButtons="auto" aria-label="performance-data-tabs"> + <Tab label="Performance Data" value="PerformanceData" aria-label="performance-data" /> + <Tab label="Receive Level" value="ReceiveLevel" aria-label="receive-level" /> + <Tab label="Transmission Power" value="TransmissionPower" aria-label="transmission-power" /> + <Tab label="Adaptive Modulation" value="AdaptiveModulation" aria-label="adaptive-modulation" /> + <Tab label="Temperature" value="Temperature" aria-label="temperature" /> + <Tab label="Signal-to-interference-plus-noise ratio (SINR)" value="SINR" aria-label="snir" /> + <Tab label="Cross Polar Discrimination" value="CPD" aria-label="cross-polar-discrimination" /> </Tabs> </AppBar> { |