diff options
author | 2021-02-18 10:55:11 +0100 | |
---|---|---|
committer | 2021-02-18 10:55:11 +0100 | |
commit | f333557c8bf0a74eb7b88d6294dea2a420b1ec61 (patch) | |
tree | 696dabd7e02e97f53ff936e54543a31944696c3d /sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx | |
parent | 5cf15b27796b68b3edbfc1e59f258dee1e10b2b9 (diff) |
Update NetworkMap and LinkCalculator
Update NetworkMap and LinkCalculator to use the topology-server-v2 API, minior bugfixes for NetworkMap
Issue-ID: CCSDK-3172
Signed-off-by: Aijana Schumann <aijana.schumann@highstreet-technologies.com>
Change-Id: Ia5690c5039d7a9431443bc131fe398cc79d08287
Diffstat (limited to 'sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx')
-rw-r--r-- | sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx | 121 |
1 files changed, 91 insertions, 30 deletions
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 5e617be2d..3aa35c348 100644 --- a/sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx +++ b/sdnr/wt/odlux/apps/networkMapApp/src/components/details/siteDetails.tsx @@ -23,19 +23,28 @@ import { TextField, Tabs, Tab, Typography, AppBar, Button, Tooltip } from '@mate import MaterialTable, { ColumnModel, ColumnType, MaterialTableCtorType } from "../../../../../framework/src/components/material-table"; -import { site, Device } from '../../model/site'; +import { Site, Device, Address } from '../../model/site'; import DenseTable from '../denseTable'; import { LatLonToDMS } from '../../utils/mapUtils'; +import { CheckDeviceList, InitializeLoadedDevicesAction } from '../../actions/detailsAction'; +import { NavigateToApplication } from '../../../../../framework/src/actions/navigationActions'; +import connect, { Connect, IDispatcher } from '../../../../../framework/src/flux/connect'; +import { IApplicationStoreState } from '../../../../../framework/src/store/applicationStore'; -type minLinks = { name: string, azimuth: string} - -const FaultAlarmNotificationTable = MaterialTable as MaterialTableCtorType<minLinks>; +type linkRow = { name: string, azimuth?: string} +type deviceRow = { id: string;type: string,name: string,manufacturer: string,owner: string,status?: string,port: number[]} type panelId="links" | "nodes"; -type props = { site: site, updatedDevices: Device[]|null, navigate(applicationName: string, path?: string):void, onLinkClick(id: string): void, loadDevices(devices:Device[]): void }; +type siteDetailProps = { + site: Site, + onLinkClick(id: string): void, +} & props; + +type props = Connect<typeof mapStateToProps, typeof mapDispatchToProps>; + -const SiteDetails: React.FunctionComponent<props> = (props) => { +const SiteDetails: React.FunctionComponent<siteDetailProps> = (props) => { const [value, setValue] = React.useState<panelId>("links"); const [height, setHeight] = React.useState(330); @@ -59,21 +68,51 @@ const SiteDetails: React.FunctionComponent<props> = (props) => { // on update React.useEffect(()=>{ - - props.loadDevices(props.site.devices); + + if(props.site.devices!== null && props.site.devices.length>0){ + props.initializeDevices(props.site.devices); + props.loadDevices(props.site.devices); + } + handleResize(); - }, [props.site]) + }, [props.site]); const onHandleTabChange = (event: React.ChangeEvent<{}>, newValue: panelId) => { setValue(newValue); } - const linkRows: minLinks[] = props.site.links.map(link=> + //prepare link table + + let hasAzimuth = false; + const linkRows: linkRow[] = props.site.links.map(link=> { - return {name: link.name, azimuth: link.azimuthB.toFixed(2) } + if(link.azimuthB!==null){ + hasAzimuth=true; + return {name: link.name, azimuth: link.azimuthB.toFixed(2) } + + }else{ + return {name: link.name } + } + }); + + const linkTableHeader = hasAzimuth ? ["Link Name", "Azimuth in °"] : ["Link Name"]; + + //prepare device table + const deviceRows : deviceRow[] = props.updatedDevices.map(device=>{ + return{ + id: device.id, + name: device.name, + type: device.type, + status: device.status, + manufacturer: device.manufacturer, + owner: device.owner, + port: device.port + } + }); + const adressString = props.site.address == null ? null : buildAdress(props.site.address); return (<div style={{ padding: '15px', display: "flex", flexDirection:"column", minWidth:0, minHeight:0 }}> @@ -88,20 +127,20 @@ const SiteDetails: React.FunctionComponent<props> = (props) => { <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 inputProps={{ 'aria-label': 'adress' }} disabled={true} value={props.site.address} label="Adress" style={{ marginTop: "5px" }} /> + adressString !== null && + <TextField inputProps={{ 'aria-label': 'adress' }} disabled={true} value={adressString} label="Address" style={{ marginTop: "5px" }} /> } { - props.site.heighAGLInMeters !== undefined && props.site.heighAGLInMeters > 0 && - <TextField inputProps={{ 'aria-label': 'amsl-in-meters' }} disabled={true} value={props.site.heighAGLInMeters} label="AMSL in meters" style={{ marginTop: "5px" }} /> + props.site.heightAmslInMeters !== undefined && props.site.heightAmslInMeters > 0 && + <TextField inputProps={{ 'aria-label': 'amsl-in-meters' }} disabled={true} value={props.site.heightAmslInMeters} label="AMSL in meters" style={{ marginTop: "5px" }} /> } { - props.site.antennaHeightAGLInMeters !== undefined && props.site.antennaHeightAGLInMeters > 0 && - <TextField inputProps={{ 'aria-label': 'antenna-above-ground-in-meters' }} disabled={true} value={props.site.antennaHeightAGLInMeters} label="Atenna above ground in meters" style={{ marginTop: "5px" }} /> + props.site.antennaHeightAmslInMeters !== undefined && props.site.antennaHeightAmslInMeters > 0 && + <TextField inputProps={{ 'aria-label': 'antenna-above-ground-in-meters' }} disabled={true} value={props.site.antennaHeightAmslInMeters} label="Atenna above ground in meters" style={{ marginTop: "5px" }} /> } - <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" /> + <TextField inputProps={{ 'aria-label': 'latitude' }} style={{ marginTop: "5px" }} disabled={true} value={LatLonToDMS(props.site.location.lat)} label="Latitude" /> + <TextField inputProps={{ 'aria-label': 'longitude' }} style={{ marginTop: "5px" }} disabled={true} value={LatLonToDMS(props.site.location.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"> @@ -119,13 +158,8 @@ const SiteDetails: React.FunctionComponent<props> = (props) => { { props.site.links.length > 0 && - <DenseTable ariaLabelRow="available-links-table" ariaLabelColumn={["link-name", "azimuth"]} height={height} hover={true} headers={["Link Name", "Azimuth in °"]} data={linkRows} onClick={props.onLinkClick} ></DenseTable> - /** - * - * */ - - - } + <DenseTable ariaLabelRow="available-links-table" ariaLabelColumn={["link-name", "azimuth"]} height={height} hover={true} headers={linkTableHeader} data={linkRows} onClick={props.onLinkClick} ></DenseTable> + } </> @@ -134,19 +168,46 @@ const SiteDetails: React.FunctionComponent<props> = (props) => { value === "nodes" && <> { - props.site.devices.length === 0 && + props.site.devices === null && <Typography aria-label="no-nodes-avilable" variant="body1" style={{ marginTop: '10px' }}>No nodes available.</Typography> } { - props.site.devices.length>0 && props.updatedDevices !== null && - <DenseTable ariaLabelRow="available-nodes-table" ariaLabelColumn={["id","name","type", "manufacturer","owner","status", "ports", "actions"]} navigate={props.navigate} height={height} hover={false} headers={["ID","Name","Type", "Manufacturer","Owner","Status", "Ports", "Actions"]} actions={true} data={props.updatedDevices!} /> + props.site.devices?.length>0 && props.updatedDevices !== null && + <DenseTable ariaLabelRow="available-nodes-table" ariaLabelColumn={["id","name","type","status", "manufacturer","owner", "ports", "actions"]} navigate={props.navigateToApplication} height={height} hover={false} headers={["ID","Name","Type","Status", "Manufacturer","Owner", "Ports", "Actions"]} actions={true} data={deviceRows!} /> } </> } </div> ) +} + +const buildAdress = (adress: Address) =>{ + switch(adress.country){ + case "de": + return `${adress.streetAndNr}, ${adress.zipCode!== null? adress.zipCode : ''} ${adress.city}` + + case "us": + return `${adress.streetAndNr}, ${adress.city} ${adress.zipCode!== null? adress.zipCode : ''}` + + default: + console.log("address formatting for country {"+adress.country+"} not recognized, defaulting."); + return `${adress.streetAndNr}, ${adress.zipCode!== null? adress.zipCode : ''} ${adress.city}` + } + + } -export default SiteDetails;
\ No newline at end of file +const mapStateToProps = (state: IApplicationStoreState) => ({ + updatedDevices: state.network.details.checkedDevices +}); + +const mapDispatchToProps = (dispatcher: IDispatcher) => ({ + initializeDevices: (devices: Device[]) => {dispatcher.dispatch(new InitializeLoadedDevicesAction(devices))}, + loadDevices: async (networkElements: Device[]) => { await dispatcher.dispatch(CheckDeviceList(networkElements)) }, + navigateToApplication: (applicationName: string, path?: string) => dispatcher.dispatch(new NavigateToApplication(applicationName, path, "test3")), + +}) + +export default connect(mapStateToProps, mapDispatchToProps)(SiteDetails);
\ No newline at end of file |